/* ============================================================

   core.css · 风格锚点 + 全站通用

   项目：CoolWalking

   契约类名：breadcrumb / trust-bar / page-alive / topic-intro /

             judgment-framework / intent-funnel / editor-picks /

             quick-recommend / subcategory-nav / exploration-hook /

             article-card / author-signature / btn-cta

   ============================================================ */



*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {

  margin: 0;

  font-family: var(--font-body);

  font-size: var(--text-base);

  line-height: var(--leading-relaxed);

  color: var(--color-text-primary);

  background-color: var(--color-bg);

  transition: background-color var(--duration-normal) var(--ease-in-out),

              color var(--duration-normal) var(--ease-in-out);

}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary-600); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }

a:hover { color: var(--color-primary-700); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {

  font-family: var(--font-display);

  line-height: var(--leading-tight);

  margin-top: var(--rhythm-loose);

  margin-bottom: var(--rhythm-normal);

  font-weight: var(--font-bold);

}

h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }

h2 { font-size: var(--text-2xl); line-height: var(--leading-snug); }

h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }

h4 { font-size: var(--text-lg); }

p { margin-top: 0; margin-bottom: var(--rhythm-normal); }

ul, ol { padding-left: var(--space-6); margin-bottom: var(--rhythm-normal); }

li { margin-bottom: var(--space-2); }

blockquote {

  margin: var(--rhythm-loose) 0;

  padding: var(--rhythm-normal) var(--rhythm-loose);

  border-left: 4px solid var(--color-primary-500);

  background: var(--color-surface);

  border-radius: var(--radius-md);

  font-style: italic;

  color: var(--color-text-secondary);

}

code {

  font-family: var(--font-mono);

  font-size: 0.9em;

  background: var(--color-surface);

  padding: 2px 6px;

  border-radius: var(--radius-sm);

}

hr { border: none; border-top: 1px solid var(--color-border); margin: var(--rhythm-loose) 0; }



/* ---------- Layout ---------- */

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }

.container-narrow { max-width: var(--reading-max-width); margin: 0 auto; padding: 0 var(--space-5); }

.site-main { min-height: 60vh; padding: var(--rhythm-loose) 0 var(--rhythm-breath); }



/* ---------- Header / Nav ---------- */

.site-header {

  position: sticky; top: 0; z-index: var(--z-sticky);

  background: var(--color-bg);

  border-bottom: 1px solid var(--color-border);

  padding: var(--space-3) 0;

}

.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

.site-logo { font-weight: var(--font-bold); font-size: var(--text-lg); color: var(--color-primary-700); }

.site-nav { display: flex; gap: var(--space-5); align-items: center; }

.site-nav a { color: var(--color-text-secondary); font-weight: var(--font-medium); font-size: var(--text-sm); }

.site-nav a[aria-current="page"] { color: var(--color-primary-600); }

.hamburger {

  display: none; width: 44px; height: 44px;

  border: none; background: transparent; cursor: pointer;

  align-items: center; justify-content: center; font-size: 1.5rem;

  color: var(--color-text-primary);

}

.theme-switcher { display: flex; gap: 6px; align-items: center; }

.theme-option {

  width: 28px; height: 28px; border-radius: 50%;

  border: 2px solid transparent; cursor: pointer; padding: 0;

}

.theme-option[aria-selected="true"] { border-color: var(--color-primary-500); }



/* ---------- Footer ---------- */

.site-footer {

  background: var(--color-surface);

  border-top: 1px solid var(--color-border);

  padding: var(--rhythm-breath) 0 var(--rhythm-loose);

  color: var(--color-text-secondary);

  font-size: var(--text-sm);

}

.site-footer a { color: var(--color-text-secondary); }



/* ---------- Buttons ---------- */

.btn-cta {

  display: inline-flex; align-items: center; justify-content: center;

  min-height: 48px; padding: var(--space-3) var(--space-6);

  background: var(--color-accent-500); color: #fff;

  font-weight: var(--font-semibold); font-size: var(--text-base);

  border-radius: var(--radius-md); border: none; cursor: pointer;

  text-decoration: none;

  transition: background var(--duration-fast) var(--ease-out),

              transform var(--duration-fast) var(--ease-spring);

  box-shadow: var(--shadow-md);

}

.btn-cta:hover { background: var(--color-accent-600); color: #fff; text-decoration: none; }

.btn-cta:active { transform: scale(0.97); }

.btn-secondary {

  display: inline-flex; align-items: center; justify-content: center;

  min-height: 44px; padding: var(--space-2) var(--space-5);

  background: transparent; color: var(--color-primary-600);

  border: 1px solid var(--color-primary-400);

  border-radius: var(--radius-md); font-weight: var(--font-medium);

  cursor: pointer; text-decoration: none;

}

.btn-secondary:hover { background: var(--color-primary-50); text-decoration: none; }



/* ---------- Cards ---------- */

.card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: var(--card-padding);

  transition: box-shadow var(--duration-normal) var(--ease-out);

}

.card:hover { box-shadow: var(--shadow-md); }



/* ---------- Contract components ---------- */

.trust-bar {

  display: flex; flex-wrap: wrap; gap: var(--space-4);

  font-size: var(--text-sm); color: var(--color-text-secondary);

  padding: var(--space-3) 0;

  border-bottom: 1px solid var(--color-border);

  margin-bottom: var(--rhythm-normal);

}

.trust-bar span { display: inline-flex; align-items: center; gap: 4px; }



.page-alive {

  font-size: var(--text-sm);

  color: var(--color-text-tertiary);

  margin-bottom: var(--rhythm-normal);

}



.breadcrumb {

  font-size: var(--text-sm);

  color: var(--color-text-tertiary);

  margin-bottom: var(--rhythm-normal);

}

.breadcrumb a { color: var(--color-text-secondary); }

.breadcrumb a:hover { color: var(--color-primary-600); }



.topic-intro {

  font-size: var(--text-lg);

  line-height: var(--leading-relaxed);

  color: var(--color-text-secondary);

  margin-bottom: var(--rhythm-loose);

}



.judgment-framework {

  background: color-mix(in srgb, var(--color-primary-50) 40%, transparent);

  border-left: 4px solid var(--color-primary-500);

  padding: var(--rhythm-normal) var(--rhythm-loose);

  border-radius: var(--radius-md);

  margin: var(--rhythm-loose) 0;

}

.judgment-framework h2, .judgment-framework h3 { margin-top: 0; color: var(--color-primary-700); }



.intent-funnel {

  display: flex; flex-wrap: wrap; gap: var(--space-3);

  margin: var(--rhythm-loose) 0;

}

.intent-funnel a {

  padding: var(--space-2) var(--space-4);

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-full);

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

}

.intent-funnel a:hover { background: var(--color-primary-50); color: var(--color-primary-700); text-decoration: none; }



.editor-picks h2, .quick-recommend h3 { margin-top: var(--rhythm-loose); }

.pick-card {

  display: flex; justify-content: space-between; align-items: center;

  padding: var(--space-3) var(--rhythm-normal);

  background: var(--color-surface);

  border-radius: var(--radius-md);

  margin-bottom: var(--space-2);

}

.pick-score { color: var(--color-primary-600); font-weight: var(--font-semibold); }



.subcategory-nav {

  display: flex; flex-wrap: wrap; gap: var(--space-3);

  margin: var(--rhythm-loose) 0;

}

.subcategory-nav a {

  padding: var(--space-2) var(--space-4);

  background: var(--color-primary-50);

  border-radius: var(--radius-md);

  color: var(--color-primary-700);

  font-size: var(--text-sm);

}



.exploration-hook {

  display: block; position: relative;

  padding: var(--rhythm-normal) var(--rhythm-loose);

  margin: var(--rhythm-loose) 0;

  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-50) 60%, transparent), transparent);

  border: 1px solid var(--color-accent-300);

  border-radius: var(--radius-md);

  font-weight: var(--font-medium);

}

.exploration-hook a { color: var(--color-accent-700); }



/* ---------- FAQ ---------- */

.faq-section { margin: var(--rhythm-loose) 0; }

.faq-section details {

  border-bottom: 1px solid var(--color-border);

  padding: var(--rhythm-normal) 0;

}

.faq-section summary {

  cursor: pointer;

  font-weight: var(--font-semibold);

  font-size: var(--text-lg);

  padding: var(--space-2) 0;

  list-style: none;

}

.faq-section summary::-webkit-details-marker { display: none; }

.faq-section summary::after { content: " ▾"; color: var(--color-text-tertiary); }

.faq-section details[open] summary::after { content: " ▴"; }

.faq-section details p { margin-top: var(--rhythm-normal); color: var(--color-text-secondary); }



/* ---------- Article timestamps ---------- */

.article-timestamps {

  display: flex; flex-wrap: wrap; gap: var(--space-4);

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  margin-bottom: var(--rhythm-normal);

}

.article-timestamps span { display: inline-flex; align-items: center; gap: 4px; }



/* ---------- dpScore badge ---------- */

.dpscore-badge {

  display: inline-block;

  padding: var(--space-1) var(--space-3);

  background: var(--color-primary-500);

  color: #fff;

  border-radius: var(--radius-full);

  font-size: var(--text-sm);

  font-weight: var(--font-semibold);

  text-decoration: none;

}

.dpscore-badge:hover { background: var(--color-primary-600); color: #fff; text-decoration: none; }



/* ---------- Author avatar ---------- */

.author-avatar {

  width: 64px; height: 64px; border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  font-weight: var(--font-bold); font-size: 28px; color: #fff;

  background: linear-gradient(135deg, hsl(145, 45%, 42%), hsl(185, 55%, 38%));

  flex-shrink: 0;

}

.author-signature {

  display: flex; gap: var(--rhythm-normal); align-items: flex-start;

  padding: var(--rhythm-normal);

  background: var(--color-surface);

  border-radius: var(--radius-md);

  margin: var(--rhythm-loose) 0;

}

.author-signature p { margin: 0 0 var(--space-1); }

.author-name { font-weight: var(--font-semibold); font-size: var(--text-lg); }

.author-bio { color: var(--color-text-secondary); font-size: var(--text-sm); }

.author-conflict { color: var(--color-text-tertiary); font-size: var(--text-xs); margin-top: var(--space-2) !important; }



/* ---------- Related / comments ---------- */

.related-links-section { margin: var(--rhythm-loose) 0; }

.related-link-card {

  padding: var(--rhythm-normal);

  background: var(--color-surface);

  border-radius: var(--radius-md);

  margin-bottom: var(--space-3);

}

.related-link-card p { margin: 0 0 var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); }



/* ---------- Recommendation block ---------- */

.next-step-recommend {

  padding: var(--rhythm-loose);

  background: var(--color-surface);

  border-radius: var(--radius-md);

  margin: var(--rhythm-loose) 0;

}

.next-step-recommend h3 { margin-top: 0; }



/* ---------- Sidebar ---------- */

.sidebar-widget { margin-bottom: var(--rhythm-loose); }

.sidebar-widget h4 { font-size: var(--text-base); margin-top: 0; margin-bottom: var(--rhythm-normal); }

.quick-pick-card, .editors-pick-card {

  display: flex; justify-content: space-between; align-items: center;

  padding: var(--space-3);

  background: var(--color-surface);

  border-radius: var(--radius-md);

  margin-bottom: var(--space-2);

  font-size: var(--text-sm);

  color: var(--color-text-primary);

}

.quick-pick-score { color: var(--color-primary-600); font-weight: var(--font-semibold); }



/* ---------- Article card ---------- */

.article-card {

  background: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  padding: var(--card-padding);

  margin-bottom: var(--rhythm-normal);

}

.article-card h3 { margin-top: 0; font-size: var(--text-xl); }

.card-summary { color: var(--color-text-secondary); font-size: var(--text-base); }

.card-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-tertiary); }

.under-review {

  background: var(--color-warning);

  color: #000;

  padding: 2px 8px;

  border-radius: var(--radius-sm);

  font-weight: var(--font-semibold);

}



/* ---------- Empty state ---------- */

.empty-state {

  padding: var(--rhythm-loose);

  text-align: center;

  color: var(--color-text-tertiary);

  background: var(--color-surface);

  border-radius: var(--radius-md);

}



/* ---------- L3 专属 ---------- */

.l3-page { background: var(--color-l3-bg); }

.l3-page h1 {

  border-left: 6px solid var(--color-l3-border);

  padding-left: var(--rhythm-normal);

}

.l3-copyright {

  font-size: var(--text-xs);

  color: var(--color-text-tertiary);

  border-top: 1px solid var(--color-border);

  padding-top: var(--rhythm-normal);

  margin-top: var(--rhythm-loose);

}



/* ---------- Tables ---------- */

table {

  width: 100%; border-collapse: collapse;

  margin: var(--rhythm-loose) 0;

  font-size: var(--text-sm);

}

th, td {

  padding: var(--space-3);

  text-align: left;

  border-bottom: 1px solid var(--color-border);

}

th { background: var(--color-surface); font-weight: var(--font-semibold); }



/* ---------- 移动端 ---------- */

@media (max-width: 768px) {

  .site-nav { display: none; }

  .site-nav.open {

    display: flex; position: absolute; top: 100%; left: 0; right: 0;

    background: var(--color-bg); flex-direction: column;

    padding: var(--rhythm-normal);

    border-bottom: 1px solid var(--color-border);

    gap: var(--space-3);

  }

  .site-nav.open a { min-height: 48px; display: flex; align-items: center; }

  .hamburger { display: flex; }

  .btn-cta { width: 100%; }

  .container, .container-narrow { padding: 0 var(--space-4); }

  table { font-size: var(--text-xs); }

  th, td { padding: var(--space-2); }

}



@media (max-width: 375px) {

  .container, .container-narrow { padding: 0 var(--space-3); }

  h1 { font-size: 1.5rem; }

}