/* BearBlog — Bear theme. Tracks Bear's own export style.
   Apple-platform visitors see Avenir Next; others fall back to the
   system sans. Dark-mode visitors get a coherent dark variant via
   prefers-color-scheme at the foot of the file. */

:root {
  /* Type */
  --text-font: "Avenir Next", "AvenirNext", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  --heading-font: var(--text-font);
  --code-font: "Menlo", ui-monospace, SFMono-Regular, Consolas, monospace;
  --text-size: 17px;
  --line-height: 1.755;          /* Bear: 1.5 × 1.17 transform */

  /* Layout */
  --content-max-width: 48em;

  /* Light palette — from Bear's export */
  --text-color: #444444;
  --text-secondary: #888888;
  --text-tertiary: #d9d9d9;
  --background: #ffffff;
  --background-secondary: #F3F5F7;
  --background-tertiary: #E4E5E6;
  --accent: #DD4C4F;
  --stroke: #d9d9d9;

  /* Highlights */
  --hl-default-bg: #CDF7BD;  --hl-default-fg: #102D05;
  --hl-green-bg:   #CDF7BD;  --hl-green-fg:   #102D05;
  --hl-red-bg:     #FFD5D5;  --hl-red-fg:     #321A00;
  --hl-blue-bg:    #C9E5FF;  --hl-blue-fg:    #001A32;
  --hl-yellow-bg:  #FCF195;  --hl-yellow-fg:  #312C01;
  --hl-purple-bg:  #FEDAFF;  --hl-purple-fg:  #310032;

  /* Callouts */
  --alert-note-bg:       hsla(209, 100%, 89%, 0.20);
  --alert-note-bar:      hsla(209,  80%, 35%, 0.80);
  --alert-tip-bg:        hsla(103,  78%, 85%, 0.20);
  --alert-tip-bar:       hsla(103,  80%, 35%, 0.80);
  --alert-important-bg:  hsla(298, 100%, 93%, 0.20);
  --alert-important-bar: hsla(298,  80%, 35%, 0.80);
  --alert-warning-bg:    hsla( 54,  94%, 79%, 0.20);
  --alert-warning-bar:   hsla( 45,  94%, 50%, 1);
  --alert-caution-bg:    hsla( 31,  98%, 81%, 0.20);
  --alert-caution-bar:   hsla( 31,  98%, 50%, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--text-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  color: var(--text-color);
  background: var(--background);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

header, main, .site-header, .site-pinned, .site-footer {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 2em;
}

header.site-brand {
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 2rem;
}
header.site-brand a {
  color: var(--text-color);
  text-decoration: none;
  font-family: var(--heading-font);
  font-size: 2em;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Configuration-driven chrome — header, pinned, footer */
.site-header { padding-bottom: 1rem; margin-bottom: 1.5rem;
               border-bottom: 1px solid var(--stroke); }
.site-pinned { padding-bottom: 1rem; margin-bottom: 1.5rem;
               border-bottom: 1px solid var(--stroke); }
.site-footer { padding-top: 1rem; margin-top: 3rem;
               border-top: 1px solid var(--stroke);
               color: var(--text-secondary);
               font-size: 0.9em;
               padding-bottom: 1.5rem; }

main { padding-bottom: 4rem; }

/* Headings — Bear's modular scale 1.125 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 500;
  line-height: 1.521;            /* Bear: 1.3 × 1.17 transform */
  color: var(--text-color);
}
h1 { font-size: 2em;    padding-block-start: 0.8em;  padding-block-end: 0.33em; }
h2 { font-size: 1.6em;  padding-block-start: 0.66em; padding-block-end: 0.27em; }
h3 { font-size: 1.27em; padding-block-start: 0.53em; padding-block-end: 0.27em; }
h4, h5, h6 { padding-block-start: 0.4em; padding-block-end: 0.27em; }
article > h1:first-child { padding-block-start: 0; }

p { margin: 0 0 1em; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
a:hover { text-decoration: none; }

time {
  display: inline-block;
  color: var(--text-secondary);
  font-size: 0.9em;
  margin-bottom: 1.5rem;
}

strong, b { font-weight: 600; }
em, i { font-style: italic; }
u { text-decoration: underline; text-decoration-color: var(--accent); }
del, s { text-decoration: line-through; color: var(--text-secondary); }

/* Highlights */
mark {
  background: var(--hl-default-bg);
  color: var(--hl-default-fg);
  padding: 0.05em 0.25em;
  border-radius: 0.25em;
}
mark.hl-green  { background: var(--hl-green-bg);  color: var(--hl-green-fg); }
mark.hl-red    { background: var(--hl-red-bg);    color: var(--hl-red-fg); }
mark.hl-blue   { background: var(--hl-blue-bg);   color: var(--hl-blue-fg); }
mark.hl-yellow { background: var(--hl-yellow-bg); color: var(--hl-yellow-fg); }
mark.hl-purple { background: var(--hl-purple-bg); color: var(--hl-purple-fg); }

/* Code */
code, pre {
  font-family: var(--code-font);
  font-size: 0.91em;
}
code {
  background: var(--background-secondary);
  color: var(--text-color);
  padding: 0.05em 0.25em;
  border-radius: 0.25em;
}
pre {
  background: var(--background-secondary);
  color: var(--text-color);
  padding: 0.5em 0.75em;
  border-radius: 0.33em;
  overflow-x: auto;
  margin: 1em 0;
  line-height: 1.4;
  white-space: pre-wrap;
}
pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Lists */
ul, ol {
  padding-inline-start: 2.13em;
  margin: 0 0 1em;
}
li { margin: 0.075em 0; }
/* Loose lists wrap their item content in <p>. Default <p> styling adds a
   full 1em bottom margin which makes the list spacing visually doubled,
   so we collapse those paragraph margins inside list items. */
li > p { margin: 0; }
ul { list-style-type: disc; }
li li ul { list-style-type: circle; }
li li li ul { list-style-type: disc; }
li::marker { color: var(--accent); }
ol { list-style: decimal; }

/* Task lists — checkbox and text on one line.
   swift-markdown emits `<li><input type="checkbox" disabled> text</li>`
   with no class, so we target the structural shape via `:has()`. The
   loose-list form wraps the text in `<p>`; force that paragraph inline
   so it stays alongside the checkbox. */
li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-inline-start: -1.3em;
}
li > input[type="checkbox"] {
  margin-right: 0.4em;
  vertical-align: -1px;
  cursor: default;
}
li:has(> input[type="checkbox"]) > p {
  display: inline;
}

/* Blockquote — bar to the left, in accent */
blockquote {
  margin: 1em 0;
  padding-inline-start: 2.13em;
  position: relative;
}
blockquote::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 1em;
  width: 0.13em;
  height: calc(100% - 0.4em);
  border-radius: 0.33em;
  background: var(--accent);
}
blockquote blockquote::before,
blockquote blockquote blockquote::before { background: transparent; }

/* Horizontal rule */
hr {
  display: block;
  border: 0;
  border-top: 1px solid var(--stroke);
  margin: 2em 0;
}

/* Images */
img { max-width: 100%; height: auto; }
a.img-link {
  display: inline-block;
  text-decoration: none;
  cursor: zoom-in;
}
a.img-link img { margin: 1em 0; display: block; }

/* Tables — Bear's alternating rows + rounded border */
table {
  display: block;
  max-width: fit-content;
  overflow-x: auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--stroke);
  border-radius: 0.33em;
  margin: 1em 0;
}
tr { display: table-row; background: var(--background); }
tr.header-row,
tr:nth-child(odd) { background: var(--background-secondary); }
td, th {
  display: table-cell;
  padding: 0.37em 0.75em;
  min-width: 5em;
  border-right: 1px solid var(--stroke);
  text-align: left;
}
th { font-weight: 600; }
td:last-of-type, th:last-of-type { border-right: 0; }

/* Tags — Bear-style pill, with the `#` marker styled separately */
a.tag, .tag {
  display: inline-block;
  font-size: 0.91em;
  background: var(--background-tertiary);
  color: var(--text-color);
  padding: 0.05em 0.55em;
  border-radius: 1em;
  text-decoration: none;
  margin: 0 0.1em;
  white-space: nowrap;
}
a.tag:hover { background: var(--background-secondary); }
.tag-marker {
  color: var(--text-secondary);
  padding-right: 0.05em;
}

/* Wiki link that couldn't be resolved */
.wiki-unresolved {
  color: var(--text-secondary);
  font-style: italic;
  border-bottom: 1px dotted var(--text-secondary);
}

/* Inline math placeholder — passes through to a client-side renderer */
.math {
  font-family: var(--code-font);
  font-size: 0.95em;
  background: var(--background-secondary);
  padding: 0 0.25em;
  border-radius: 0.25em;
}

/* Footnotes */
.footnotes {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--stroke);
  font-size: 0.9em;
  color: var(--text-secondary);
}
.footnotes ol { padding-inline-start: 1.6em; }
.footnotes li { margin: 0.4em 0; }
.footnote-ref { font-size: 0.85em; vertical-align: super; line-height: 0; }
.footnote-backref { margin-left: 0.4em; text-decoration: none; }

/* Callouts — Bear's tinted backgrounds + bordered accent */
.alert {
  margin: 1.25em 0;
  padding: 0.8em 1em;
  border: 1px solid;
  border-radius: 3px;
  position: relative;
}
.alert > :last-child { margin-bottom: 0; }
.alert .alert-title {
  font-family: var(--heading-font);
  font-weight: 600;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}
.alert-note      { background: var(--alert-note-bg);      border-color: var(--alert-note-bar); }
.alert-tip       { background: var(--alert-tip-bg);       border-color: var(--alert-tip-bar); }
.alert-important { background: var(--alert-important-bg); border-color: var(--alert-important-bar); }
.alert-warning   { background: var(--alert-warning-bg);   border-color: var(--alert-warning-bar); }
.alert-caution   { background: var(--alert-caution-bg);   border-color: var(--alert-caution-bar); }

/* Index / tag-page post listing — title prominent, date stacked
   underneath as secondary metadata. */
.post-list {
  list-style: none;
  padding-inline-start: 0;
}
.post-list > li {
  padding: 0.75em 0;
  margin: 0;
}
.post-list > li a {
  display: block;
  text-decoration: none;
  color: var(--text-color);
}
.post-list .post-title {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.27em;
  font-weight: 500;
  line-height: 1.3;
}
.post-list .post-date {
  display: block;
  margin-top: 0.2em;
  color: var(--text-secondary);
  font-size: 0.85em;
}
.post-list > li a:hover .post-title { text-decoration: underline; }

/* Home-page tag index — chip-style links to each tag page. */
.tag-index {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--stroke);
}
.tag-index h2 {
  font-size: 1em;
  font-weight: 500;
  color: var(--text-secondary);
  padding-block-start: 0;
  padding-block-end: 0.5em;
  margin: 0;
}
.tag-index ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.5em;
}
.tag-index .tag-chip {
  display: inline-block;
  padding: 0.15em 0.6em;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  font-size: 0.9em;
  color: var(--text-secondary);
  text-decoration: none;
}
.tag-index .tag-chip:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Mobile — the 17px desktop body size feels oversized on phones, so
   revert to Bear's native 15px under 600px (everything in `em` scales
   down with it). Tablets keep the desktop value. */
@media (max-width: 600px) {
  :root { --text-size: 15px; }
}

/* Dark mode — re-bind the colour tokens, leave layout alone */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #e6e6e6;
    --text-secondary: #a8a8a8;
    --text-tertiary: #5a5a5c;
    --background: #1c1c1e;
    --background-secondary: #2a2a2c;
    --background-tertiary: #3a3a3c;
    --stroke: #3a3a3c;

    /* Highlight backgrounds re-tuned to read over a dark page; foregrounds
       inverted to light tints. */
    --hl-default-bg: hsla(103, 78%, 35%, 0.40); --hl-default-fg: #e6f4d7;
    --hl-green-bg:   hsla(103, 78%, 35%, 0.40); --hl-green-fg:   #e6f4d7;
    --hl-red-bg:     hsla(  0, 80%, 45%, 0.40); --hl-red-fg:     #ffe2e2;
    --hl-blue-bg:    hsla(209, 80%, 45%, 0.40); --hl-blue-fg:    #d8eaff;
    --hl-yellow-bg:  hsla( 45, 94%, 50%, 0.35); --hl-yellow-fg:  #fff3a7;
    --hl-purple-bg:  hsla(298, 80%, 50%, 0.35); --hl-purple-fg:  #f4d4f7;

    --alert-note-bg:       hsla(209, 100%, 70%, 0.10);
    --alert-tip-bg:        hsla(103,  78%, 60%, 0.10);
    --alert-important-bg:  hsla(298, 100%, 70%, 0.10);
    --alert-warning-bg:    hsla( 54,  94%, 60%, 0.10);
    --alert-caution-bg:    hsla( 31,  98%, 65%, 0.10);
  }
}