/* ==========================================================================
   houzeyu.com  --  custom styling
   --------------------------------------------------------------------------
   Everything visual lives in this one file. Material for MkDocs exposes its
   colours as CSS variables, so overriding a variable re-colours every element
   that uses it. Nothing here depends on a third-party theme, so nothing here
   can break when someone else ships an update.

   The design decisions, in order of how much they matter:
     1. Warm paper background, not pure white. Pure white on an LCD is
        fatiguing over a long article.
     2. Ink, not pure black, for text. #24242a instead of #000.
     3. One accent colour, used sparingly: links, the active nav item, and
        the rule under an H2. Nothing else is coloured.
     4. No webfonts at all. See the FONTS block below for why.
     5. Line height 1.85 for the body, because Chinese glyphs are dense and
        need more vertical air than Latin text does.
   ========================================================================== */


/* ==========================================================================
   1. PALETTE
   --------------------------------------------------------------------------
   MANUAL OVERRIDE: four palettes are written out below. "Paper + rust" is
   active. To switch, comment out the active :root pair and uncomment another.
   Each pair is a light block and a matching dark block.
   ========================================================================== */

/* ---- ACTIVE: paper + rust --------------------------------------------- */
[data-md-color-scheme="default"] {
  --accent:          #a8503c;   /* rust */
  --accent-soft:     #c47a63;
  --paper:           #fbf9f5;   /* warm off-white */
  --paper-raised:    #ffffff;
  --paper-sunk:      #f2eee6;
  --ink:             #24242a;
  --ink-soft:        #5c5c66;
  --ink-faint:       #8b8b95;
  --rule:            #e4ded3;
}
[data-md-color-scheme="slate"] {
  --accent:          #e0906f;
  --accent-soft:     #b86f52;
  --paper:           #17171b;
  --paper-raised:    #1e1e24;
  --paper-sunk:      #202027;
  --ink:             #ddd8d0;
  --ink-soft:        #a09a92;
  --ink-faint:       #6e6a65;
  --rule:            #2e2e36;
}

/* ---- ALTERNATIVE A: paper + deep indigo -------------------------------
[data-md-color-scheme="default"] {
  --accent: #3d5a99; --accent-soft: #6980b3; --paper: #fbfaf8;
  --paper-raised: #ffffff; --paper-sunk: #f0f0ee; --ink: #1f2128;
  --ink-soft: #565a66; --ink-faint: #8a8e99; --rule: #e2e2e0;
}
[data-md-color-scheme="slate"] {
  --accent: #8fa8e0; --accent-soft: #6b82b8; --paper: #14161c;
  --paper-raised: #1b1e26; --paper-sunk: #1d2029; --ink: #d8dae2;
  --ink-soft: #969aa6; --ink-faint: #666b78; --rule: #2b2f3a;
}
------------------------------------------------------------------------- */

/* ---- ALTERNATIVE B: cool grey + forest --------------------------------
[data-md-color-scheme="default"] {
  --accent: #2f6d4f; --accent-soft: #5c9478; --paper: #fafafa;
  --paper-raised: #ffffff; --paper-sunk: #f0f2f1; --ink: #1e2222;
  --ink-soft: #545c5a; --ink-faint: #888f8d; --rule: #e0e4e2;
}
[data-md-color-scheme="slate"] {
  --accent: #7dbd9c; --accent-soft: #5c9478; --paper: #141816;
  --paper-raised: #1a1f1d; --paper-sunk: #1c211f; --ink: #d6dcd9;
  --ink-soft: #929b98; --ink-faint: #656d6a; --rule: #29302d;
}
------------------------------------------------------------------------- */

/* ---- ALTERNATIVE C: monochrome, no accent hue -------------------------
[data-md-color-scheme="default"] {
  --accent: #000000; --accent-soft: #555555; --paper: #ffffff;
  --paper-raised: #ffffff; --paper-sunk: #f4f4f4; --ink: #111111;
  --ink-soft: #555555; --ink-faint: #909090; --rule: #e0e0e0;
}
[data-md-color-scheme="slate"] {
  --accent: #ffffff; --accent-soft: #bbbbbb; --paper: #121212;
  --paper-raised: #191919; --paper-sunk: #1c1c1c; --ink: #e8e8e8;
  --ink-soft: #a0a0a0; --ink-faint: #6a6a6a; --rule: #2a2a2a;
}
------------------------------------------------------------------------- */


/* ---- Wire our palette into Material's variables ------------------------ */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-bg-color:            var(--paper);
  --md-default-fg-color:            var(--ink);
  --md-default-fg-color--light:     var(--ink-soft);
  --md-default-fg-color--lighter:   var(--ink-faint);
  --md-default-fg-color--lightest:  var(--rule);

  --md-primary-fg-color:            var(--paper);
  --md-primary-bg-color:            var(--ink);
  --md-primary-bg-color--light:     var(--ink-soft);

  --md-accent-fg-color:             var(--accent);
  --md-typeset-a-color:             var(--accent);

  --md-code-bg-color:               var(--paper-sunk);
  --md-code-fg-color:               var(--ink);

  --md-footer-bg-color:             var(--paper-sunk);
  --md-footer-bg-color--dark:       var(--paper-sunk);
  --md-footer-fg-color:             var(--ink);
  --md-footer-fg-color--light:      var(--ink-soft);
  --md-footer-fg-color--lighter:    var(--ink-faint);
}


/* ==========================================================================
   2. FONTS
   --------------------------------------------------------------------------
   No webfonts are loaded. Reasons, in order:
     - A Chinese webfont covering common characters is 5-10 MB. On a phone on
       mobile data that is a several-second blank page.
     - Google Fonts is unreliable from mainland China.
     - Every modern OS ships a good Chinese UI font already: PingFang SC on
       macOS and iOS, Microsoft YaHei on Windows, Noto Sans CJK on Linux and
       Android. Using them costs zero bytes and zero latency.
   The cost is that the site looks slightly different per platform. For a
   personal blog that is the correct trade.
   ========================================================================== */

:root {
  --md-text-font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
      "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
      "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei",
      sans-serif;

  --md-code-font-family:
      "SFMono-Regular", "SF Mono", "Cascadia Mono", "Consolas",
      "Liberation Mono", Menlo, "Courier New", monospace;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.85;            /* generous: Chinese glyphs are dense */
  letter-spacing: 0.008em;
  color: var(--ink);
}

/* Comfortable measure. Long lines are the single biggest readability
   mistake on a text site. ~40rem is roughly 38-42 Chinese characters. */
.md-content__inner {
  max-width: 42rem;
  margin-inline: auto;
  padding-bottom: 3rem;
}

.md-typeset p {
  margin: 1.05em 0;
}

/* Headings: tight leading, clear size steps, no colour. */
.md-typeset h1 {
  font-size: 1.85em;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 0.6em;
}

.md-typeset h2 {
  font-size: 1.32em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.008em;
  margin: 2.4em 0 0.75em;
  padding-bottom: 0.32em;
  border-bottom: 1px solid var(--rule);
}

/* The one place the accent colour appears structurally: a short rule that
   overlaps the full-width H2 underline. */
.md-typeset h2::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  background: var(--accent);
  position: relative;
  top: calc(0.32em + 1px);
}

.md-typeset h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin: 1.9em 0 0.6em;
}

.md-typeset h4 {
  font-size: 1em;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 1.6em 0 0.5em;
}

/* Links: underlined on hover only, never a different weight. */
.md-typeset a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color 120ms, background-color 120ms;
}
.md-typeset a:hover {
  border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.md-typeset strong { font-weight: 600; color: var(--ink); }

/* Blockquote: a rule on the left, no background tint. */
.md-typeset blockquote {
  border-left: 2px solid var(--accent-soft);
  color: var(--ink-soft);
  margin: 1.5em 0;
  padding-left: 1.1em;
}

.md-typeset hr {
  border-bottom: 1px solid var(--rule);
  margin: 2.6em 0;
}


/* ==========================================================================
   4. CODE
   ========================================================================== */

.md-typeset code {
  font-size: 0.86em;
  padding: 0.15em 0.36em;
  border-radius: 3px;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
}

.md-typeset pre > code {
  border: none;
  padding: 0.9rem 1rem;
  line-height: 1.65;
  font-size: 0.78rem;
}

.md-typeset .highlight {
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
  margin: 1.5em 0;
}

/* Filename label above a code block, written as  ```python title="x.py" */
.md-typeset .highlight span.filename {
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--md-code-font-family);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.4rem 1rem;
}


/* ==========================================================================
   5. TABLES
   --------------------------------------------------------------------------
   Horizontal rules only. Vertical borders and zebra striping both add ink
   without adding information.
   ========================================================================== */

.md-typeset table:not([class]) {
  border: none;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  font-size: 0.76rem;
  display: table;
  width: 100%;
}

.md-typeset table:not([class]) th {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--ink-faint);
  padding: 0.6em 0.9em;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--rule);
  padding: 0.55em 0.9em;
  vertical-align: top;
}

.md-typeset table:not([class]) tr:hover { background: var(--paper-sunk); }
.md-typeset table:not([class]) tr:first-child td { border-top: none; }


/* ==========================================================================
   6. HEADER AND NAVIGATION
   ========================================================================== */

.md-header {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
  color: var(--ink);
}

.md-header__title {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.md-tabs {
  background: transparent;
  border-bottom: 1px solid var(--rule);
}
.md-tabs__link { color: var(--ink-soft); opacity: 1; font-size: 0.75rem; }
.md-tabs__link:hover,
.md-tabs__link--active { color: var(--ink); }

.md-nav { font-size: 0.72rem; }
.md-nav__title { color: var(--ink-faint); font-weight: 600; font-size: 0.68rem;
                 text-transform: uppercase; letter-spacing: 0.06em; }
.md-nav__link { color: var(--ink-soft); }
.md-nav__link:hover { color: var(--accent); }
.md-nav__link--active,
.md-nav__item .md-nav__link--active { color: var(--accent); font-weight: 600; }

/* Right-hand table of contents: a thin marker on the active heading. */
.md-nav--secondary .md-nav__link--active {
  border-left: 2px solid var(--accent);
  margin-left: -0.65rem;
  padding-left: calc(0.65rem - 2px);
}

.md-search__form {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 5px;
  box-shadow: none;
}
.md-search__input { color: var(--ink); }
.md-search__input::placeholder { color: var(--ink-faint); }


/* ==========================================================================
   7. BLOG POST LIST
   --------------------------------------------------------------------------
   The default listing runs entries together. This turns each into a spaced
   block with the date set small and quiet above the title.
   ========================================================================== */

.md-post--excerpt {
  background: transparent;
  margin: 0 0 2.6rem;
  padding: 0;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2.2rem;
}
.md-post--excerpt:last-of-type { border-bottom: none; }

.md-post__header {
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.md-post__meta,
.md-post__meta .md-meta__list,
.md-post__meta .md-meta__item {
  color: var(--ink-faint);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.md-post--excerpt .md-post__content > h1,
.md-post--excerpt .md-post__content > h2 {
  border: none;
  padding: 0;
  margin: 0.1em 0 0.5em;
  font-size: 1.25em;
  line-height: 1.4;
}
.md-post--excerpt .md-post__content > h2::after { display: none; }

/* Post titles in the listing are links, but they must read as headings:
   ink coloured, no underline. The accent appears only on hover. */
.md-post--excerpt .md-post__content > h1 > a,
.md-post--excerpt .md-post__content > h2 > a,
.md-post--excerpt .md-post__content > h1 > a:hover,
.md-post--excerpt .md-post__content > h2 > a:hover {
  color: var(--ink);
  border-bottom: none;
  background: transparent;
  font-weight: 600;
}
.md-post--excerpt .md-post__content > h1 > a:hover,
.md-post--excerpt .md-post__content > h2 > a:hover {
  color: var(--accent);
}

.md-post--excerpt .md-post__content > p {
  color: var(--ink-soft);
  margin: 0.4em 0 0.9em;
}

/* "Continue reading" link, styled as a quiet button. */
.md-post__action {
  margin-top: 0.8rem;
}
.md-post__action a {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.28rem 0.7rem;
  font-size: 0.7rem;
  color: var(--ink-soft);
  background: transparent;
}
.md-post__action a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

/* Category and tag chips. */
.md-typeset .md-tag {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink-soft);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  padding: 0.14rem 0.5rem;
}
.md-typeset .md-tag:hover { border-color: var(--accent); color: var(--accent); }


/* ==========================================================================
   8. HOME PAGE HERO
   --------------------------------------------------------------------------
   Used by the <div class="hero"> block in docs/index.md.
   ========================================================================== */

.hero {
  margin: 1.5rem 0 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}

.hero h1 {
  font-size: 2.4em !important;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 0.35em !important;
}

.hero .hero__sub {
  font-size: 1.02em;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 34rem;
  margin: 0 0 1.6rem;
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.hero__links a {
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.42rem 0.95rem;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  transition: all 130ms;
}
.hero__links a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
  transform: translateY(-1px);
}
.hero__links a.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.hero__links a.is-primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--paper);
}

/* Two-column card grid, used on the home page. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 2.5rem;
}
.card-grid > div {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  background: var(--paper-raised);
  transition: border-color 130ms;
}
.card-grid > div:hover { border-color: var(--accent-soft); }
.card-grid h3 { margin: 0 0 0.4rem !important; font-size: 0.92em !important; }
.card-grid p  { margin: 0 !important; font-size: 0.78em; color: var(--ink-soft); }


/* ==========================================================================
   9. ADMONITIONS  (the "Note" / "Warning" boxes)
   --------------------------------------------------------------------------
   Material ships saturated defaults: bright blue for note, bright orange for
   warning. Against warm paper they look like they belong to a different site.
   Below they are desaturated to sit in the same colour family, while staying
   far enough apart that note / warning / danger are still distinguishable at
   a glance. The type colour carries meaning, so it is kept, not removed.
   ========================================================================== */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-soft);
  border-radius: 5px;
  box-shadow: none;
  font-size: 0.78rem;
  background: var(--paper-raised);
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent;
  font-weight: 600;
  border: none;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before { background-color: var(--accent-soft); }

/* Per-type muted colours. Each block sets the left rule, the faint title
   wash, and the icon. */
.md-typeset .note,        .md-typeset details.note        { --adm: #5b7c9e; }
.md-typeset .abstract,    .md-typeset details.abstract    { --adm: #5b7c9e; }
.md-typeset .info,        .md-typeset details.info        { --adm: #4f8794; }
.md-typeset .tip,         .md-typeset details.tip         { --adm: #4f8168; }
.md-typeset .success,     .md-typeset details.success     { --adm: #4f8168; }
.md-typeset .question,    .md-typeset details.question    { --adm: #6b7f57; }
.md-typeset .warning,     .md-typeset details.warning     { --adm: #b0803c; }
.md-typeset .failure,     .md-typeset details.failure     { --adm: #a35a4a; }
.md-typeset .danger,      .md-typeset details.danger      { --adm: #96413a; }
.md-typeset .bug,         .md-typeset details.bug         { --adm: #8a5470; }
.md-typeset .example,     .md-typeset details.example     { --adm: #6f6a8c; }
.md-typeset .quote,       .md-typeset details.quote       { --adm: #7d7a74; }

/* Material sets `border-color` on `.admonition.note` (specificity 0,3,0),
   which outranks the base `.admonition` rule above. So the three non-accent
   sides have to be reset here, at matching specificity. Order matters: the
   shorthand sets all four sides, the longhand then re-colours the left. */
.md-typeset .admonition[class],
.md-typeset details[class] {
  border-color: var(--rule);
  border-left-color: var(--adm, var(--accent-soft));
}
.md-typeset .admonition[class] > .admonition-title,
.md-typeset details[class]     > summary {
  background-color: color-mix(in srgb, var(--adm, var(--accent-soft)) 9%, transparent);
  color: var(--ink);
}
.md-typeset .admonition[class] > .admonition-title::before,
.md-typeset details[class]     > summary::before {
  background-color: var(--adm, var(--accent-soft));
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.md-footer { border-top: 1px solid var(--rule); }
.md-footer-meta { background: transparent; }
.md-copyright { color: var(--ink-faint); font-size: 0.66rem; }
.md-footer__link { opacity: 1; }
.md-footer__title { background: transparent; }
.md-social__link { color: var(--ink-faint); }
.md-social__link:hover { color: var(--accent); }


/* ==========================================================================
   11. SMALL SCREENS
   ========================================================================== */

@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title { background: var(--paper-sunk); color: var(--ink); }
  .md-nav__source { background: var(--paper-sunk); }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset { font-size: 0.8rem; line-height: 1.8; }
  .hero h1 { font-size: 1.85em !important; }
  .hero .hero__sub { font-size: 0.95em; }

  /* On a phone the content otherwise sits flush against the screen edge.
     Material's own gutter is lost once max-width + auto margins apply. */
  .md-content__inner {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    padding-bottom: 2rem;
  }
}


/* ==========================================================================
   12. PRINT
   ========================================================================== */

@media print {
  .md-header, .md-sidebar, .md-footer, .hero__links { display: none !important; }
  .md-content__inner { max-width: 100%; }
  .md-typeset a { border-bottom: none; color: var(--ink); }
}