/* Field Notes skin — handwritten notebook look for CloudToAILearn.
   Ported from career/linkedin-hub's BeSA field-notes.css (lined paper,
   Caveat headings, Source Serif body). Self-contained and additive:
   scoped entirely under body.field-notes-skin so it never leaks into
   the default site styling, and it re-skins the SAME markup baseof.html
   already renders (.post-content, .post-header, table, blockquote → .callout,
   pre/code, .toc-container) — so TOC, callout parser, Mermaid loader,
   code-copy buttons and comments all keep working unchanged.

   Opt in per-page: set `layout: field-note` in a post's frontmatter.
   To later skin the whole site, apply body.field-notes-skin globally
   in baseof.html instead of per-template — no other file needs to change. */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

body.field-notes-skin {
  --fn-paper: #fdfeff; --fn-paper-2: #eef4fc; --fn-line: #cfe0f5; --fn-line-2: #9dbde3;
  --fn-ink: #1c2733; --fn-ink-2: #485566; --fn-dim: #7c8898;
  --fn-red: #b4442e; --fn-blue: #2a5f8f; --fn-teal: #0d7d6c; --fn-gold: #a8791f; --fn-violet: #6a4f9e;
  --fn-ok: #3f7d4a; --fn-bad: #b4442e;
  --fn-hand: 'Caveat', cursive; --fn-serif: 'Source Serif 4', Georgia, serif;
  --fn-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fn-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
[data-theme="dark"] body.field-notes-skin,
body.field-notes-skin[data-theme="dark"] {
  --fn-paper: #1c1a15; --fn-paper-2: #231f18; --fn-line: #3a3527; --fn-line-2: #4a4432;
  --fn-ink: #ece6d6; --fn-ink-2: #c2b99f; --fn-dim: #8f8770;
  --fn-red: #e08265; --fn-blue: #7fb0e0; --fn-teal: #5bc9ae; --fn-gold: #d4ab5c; --fn-violet: #ac97dd;
  --fn-ok: #7ec288; --fn-bad: #e08265;
}

/* ── page shell ── */
body.field-notes-skin {
  background-color: var(--fn-paper) !important;
  background-image:
    repeating-linear-gradient(var(--fn-paper) 0px, var(--fn-paper) 31px, var(--fn-line) 32px),
    radial-gradient(ellipse 900px 500px at 50% 0%, color-mix(in srgb, var(--fn-blue) 5%, transparent), transparent 70%) !important;
  color: var(--fn-ink);
  font-family: var(--fn-serif);
}
body.field-notes-skin .page-wrap { display: block; max-width: 900px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem) 5rem; }
body.field-notes-skin .sidebar,
body.field-notes-skin .right-panel,
body.field-notes-skin .cat-bar { display: none !important; }
body.field-notes-skin .main-content { min-width: 0; }

/* top nav restyle (keep same markup/JS, just repaint) */
body.field-notes-skin .topnav {
  background: var(--fn-paper); border-bottom: 2px solid var(--fn-ink); box-shadow: none;
}
body.field-notes-skin .nav-brand { font-family: var(--fn-hand); font-weight: 700; color: var(--fn-red); font-size: 1.5rem; }
body.field-notes-skin .nav-brand span { color: var(--fn-ink); }
body.field-notes-skin .nav-links a { font-family: var(--fn-sans); color: var(--fn-ink-2); }
body.field-notes-skin .nav-links a:hover { color: var(--fn-red); }
body.field-notes-skin #reading-progress { background: var(--fn-red); }

/* ── article header ── */
body.field-notes-skin .post-header { padding-top: 2.4rem; border-bottom: 2px solid var(--fn-ink); margin-bottom: 1.8rem; }
body.field-notes-skin .post-meta { font-family: var(--fn-sans); color: var(--fn-dim); font-size: .82rem; }
body.field-notes-skin .post-meta .post-cat-label {
  font-family: var(--fn-sans); font-weight: 700; color: var(--fn-red);
  background: var(--fn-paper-2); border-radius: 999px; padding: .1rem .6rem;
}
body.field-notes-skin .post-header h1 {
  font-family: var(--fn-hand); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.01em; color: var(--fn-ink); transform: rotate(-.4deg);
  margin: .3rem 0 .5rem;
}
body.field-notes-skin .post-header p { font-family: var(--fn-sans); color: var(--fn-ink-2) !important; }
body.field-notes-skin .tags .tag {
  font-family: var(--fn-sans); font-size: .76rem; color: var(--fn-blue);
  border: 1px solid var(--fn-line-2); border-radius: 999px; padding: .15rem .6rem;
}

/* ── body copy ── */
body.field-notes-skin .post-content { font-family: var(--fn-serif); font-size: 1.06rem; line-height: 1.7; color: var(--fn-ink); }
body.field-notes-skin .post-content h2 {
  font-family: var(--fn-hand); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--fn-ink); margin: 2.2rem 0 .5rem; padding-top: 1.4rem; border-top: 1px dashed var(--fn-line-2);
  display: flex; align-items: center; gap: .5rem; transform: rotate(-.2deg);
}
body.field-notes-skin .post-content h2::before { content: ""; width: .55rem; height: .55rem; background: var(--fn-red); border-radius: 50%; flex: none; }
body.field-notes-skin .post-content h3 {
  font-family: var(--fn-sans); font-weight: 700; font-size: 1.05rem; color: var(--fn-blue); margin: 1.6rem 0 .6rem;
}
body.field-notes-skin .post-content p { color: var(--fn-ink-2); }
body.field-notes-skin .post-content strong { color: var(--fn-ink); }
body.field-notes-skin .post-content a { color: var(--fn-blue); text-decoration-color: var(--fn-line-2); }
body.field-notes-skin .post-content blockquote:not(.callout) {
  font-family: var(--fn-hand); font-size: 1.25rem; color: var(--fn-ink);
  border-left: 3px solid var(--fn-gold); background: color-mix(in srgb, var(--fn-gold) 8%, var(--fn-paper));
  padding: .8rem 1.1rem; border-radius: 2px 12px 12px 2px;
}

/* ── tables ── */
body.field-notes-skin .post-content table {
  border-collapse: collapse; width: 100%; font-family: var(--fn-sans); font-size: .9rem;
  border: 2px solid var(--fn-ink); border-radius: 10px; overflow: hidden; background: var(--fn-paper-2);
}
body.field-notes-skin .post-content th {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--fn-dim); background: var(--fn-paper); padding: .6rem .85rem; text-align: left;
}
body.field-notes-skin .post-content td { padding: .6rem .85rem; border-top: 1px dashed var(--fn-line-2); color: var(--fn-ink-2); vertical-align: top; }
body.field-notes-skin .post-content td:first-child { color: var(--fn-ink); font-weight: 600; }

/* ── callouts (parsed from > [!NOTE] etc by existing baseof.html JS) ── */
body.field-notes-skin .callout {
  font-family: var(--fn-sans); border-radius: 2px 14px 14px 2px; padding: .9rem 1.1rem; margin: 1.2rem 0;
  border-left: 4px solid var(--fn-blue); background: color-mix(in srgb, var(--fn-blue) 8%, var(--fn-paper));
}
body.field-notes-skin .callout-title { font-family: var(--fn-hand); font-weight: 700; font-size: 1.15rem; color: var(--fn-blue); margin-bottom: .2rem; }
body.field-notes-skin .callout-tip { border-left-color: var(--fn-teal); background: color-mix(in srgb, var(--fn-teal) 8%, var(--fn-paper)); }
body.field-notes-skin .callout-tip .callout-title { color: var(--fn-teal); }
body.field-notes-skin .callout-warning,
body.field-notes-skin .callout-caution { border-left-color: var(--fn-red); background: color-mix(in srgb, var(--fn-red) 8%, var(--fn-paper)); }
body.field-notes-skin .callout-warning .callout-title,
body.field-notes-skin .callout-caution .callout-title { color: var(--fn-red); }

/* ── code ── */
body.field-notes-skin .post-content pre {
  border: 2px solid var(--fn-ink); border-radius: 10px; background: var(--fn-paper-2);
}
body.field-notes-skin .post-content code { font-family: var(--fn-mono); }

/* ── figures / diagrams ── */
body.field-notes-skin .post-content img {
  border: 2px solid var(--fn-ink); border-radius: 10px; background: var(--fn-paper-2); padding: .6rem;
}
body.field-notes-skin .post-content figcaption { font-family: var(--fn-sans); font-size: .85rem; color: var(--fn-dim); text-align: center; margin-top: .4rem; }

/* ── TOC (existing JS-built container, restyled) ── */
body.field-notes-skin .toc-container {
  border: 2px solid var(--fn-ink); border-radius: 10px; background: var(--fn-paper-2); padding: 1rem 1.2rem; margin: 1.5rem 0;
}
body.field-notes-skin .toc-title { font-family: var(--fn-hand); font-weight: 700; color: var(--fn-red); font-size: 1.2rem; }
body.field-notes-skin .toc-list a { font-family: var(--fn-sans); color: var(--fn-ink-2); }
body.field-notes-skin .toc-list a:hover { color: var(--fn-blue); }

/* ── takeaway / "worth remembering" margin note pattern for authors to use inline ── */
body.field-notes-skin .post-content .mnote {
  font-family: var(--fn-hand); font-size: 1.25rem; color: var(--fn-ink); max-width: 60ch;
  background: color-mix(in srgb, var(--fn-gold) 8%, var(--fn-paper)); border: 1px solid var(--fn-gold);
  border-radius: 2px 12px 12px 2px; padding: .8rem 1.1rem; margin: 1.4rem 0; transform: rotate(-.4deg);
}

/* ── footer bits ── */
body.field-notes-skin .social-share,
body.field-notes-skin .related-posts,
body.field-notes-skin .comments-section { font-family: var(--fn-sans); border-top: 1px dashed var(--fn-line-2); }
body.field-notes-skin .related-posts h3,
body.field-notes-skin .comments-title { font-family: var(--fn-hand); color: var(--fn-red); font-size: 1.3rem; }

@media (max-width: 640px) {
  body.field-notes-skin .page-wrap { padding: 0 1rem 3rem; }
}