/* Shared styles for the blog and tools pages. The landing page keeps its own
   inline styles; everything else links this file so a palette change is one
   edit. Same Happy Hues 10 palette as the product. */
:root {
  --bg:        #001e1d;
  --surface:   #004643;
  --line:      #0a5b55;
  --text:      #abd1c6;
  --heading:   #fffffe;
  --accent:    #f9bc60;
  --accent-in: #001e1d;
  --danger:    #e16162;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
.wrap.wide { max-width: 68rem; }
a { color: var(--accent); }

header { padding: 1.25rem 0; }
header .wrap { display: flex; align-items: center; gap: 1rem; max-width: 68rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem; color: var(--heading); text-decoration: none; letter-spacing: -.01em; }
.brand svg { width: 30px; height: 30px; display: block; }
nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
nav a { color: var(--text); text-decoration: none; font-size: .95rem; }
nav a:hover { color: var(--heading); }
.btn {
  display: inline-block; padding: .65rem 1.3rem; border-radius: .45rem;
  background: var(--accent); color: var(--accent-in);
  text-decoration: none; font-weight: 600; border: 1px solid var(--accent);
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--heading); filter: none; }
@media (max-width: 34rem) {
  nav a:not(.btn) { display: none; }
  nav { gap: .75rem; }
}

main { padding: 1.5rem 0 4rem; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.15; color: var(--heading); letter-spacing: -.02em; margin: 1.2rem 0 .8rem; }
h2 { font-size: 1.35rem; color: var(--heading); letter-spacing: -.01em; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1.05rem; color: var(--heading); margin: 1.6rem 0 .4rem; }
p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: .35rem; }
strong { color: var(--heading); font-weight: 600; }
.meta { font-size: .88rem; opacity: .75; margin-bottom: 1.5rem; }

.hero { width: 100%; height: auto; border-radius: .65rem; border: 1px solid var(--line); display: block; }

/* The quick answer box: the first thing on the page after the title, written
   so a search engine or an AI assistant can lift it whole. */
.answer {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: .65rem;
  padding: 1.1rem 1.3rem; margin: 0 0 2rem;
}
.answer .label {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .45rem;
}
.answer p { margin: 0; }
.answer p + p { margin-top: .6rem; }

code {
  background: #00302d; border: 1px solid var(--line); border-radius: .3rem;
  padding: .12rem .38rem; font-size: .86em; color: var(--heading);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
pre {
  background: #00302d; border: 1px solid var(--line); border-radius: .55rem;
  padding: .9rem 1.1rem; overflow-x: auto; margin: 0 0 1rem;
  position: relative;
}
/* Copy-to-clipboard button, added by script to each code block. */
.copybtn {
  position: absolute; top: .45rem; right: .45rem;
  display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  padding: 0; border-radius: .4rem; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); cursor: pointer; opacity: .75;
}
.copybtn:hover { opacity: 1; color: var(--heading); border-color: var(--accent); }
.copybtn.done, .copybtn.done:hover { opacity: 1; color: #5ecfa4; border-color: #5ecfa4; }
pre code { background: none; border: 0; padding: 0; font-size: .84rem; line-height: 1.55; }

table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
th { color: var(--heading); font-weight: 600; }
tr:hover td { background: rgb(255 255 254 / .02); }

/* Product plug inside articles: one per post, clearly a plug, never a trick. */
.plug {
  background: var(--surface); border: 1px solid var(--line); border-radius: .65rem;
  padding: 1.1rem 1.3rem; margin: 2rem 0;
}
.plug p { margin: 0 0 .7rem; }
.plug p:last-child { margin: 0; }

/* Listing cards, blog and tools indexes. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.cardlink {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: .65rem; padding: 1.3rem; text-decoration: none; color: var(--text);
}
.cardlink:hover { border-color: var(--accent); }
.cardlink h3 { margin: 0 0 .45rem; color: var(--heading); font-size: 1.05rem; }
.cardlink p { margin: 0; font-size: .92rem; }
.cardlink .tagline { display: inline-block; font-size: .78rem; color: var(--accent); font-weight: 600; margin-bottom: .5rem; letter-spacing: .04em; text-transform: uppercase; }

/* Tool forms. */
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: .65rem; padding: 1.4rem; margin: 1.5rem 0 2rem; }
.tool form { display: flex; gap: .7rem; flex-wrap: wrap; }
.tool input[type="text"], .tool select {
  flex: 1 1 14rem; padding: .6rem .8rem; border-radius: .45rem;
  border: 1px solid var(--line); background: var(--bg); color: var(--heading);
  font: inherit;
}
.tool input:focus, .tool select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.tool button {
  padding: .6rem 1.3rem; border-radius: .45rem; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-in); font: inherit; font-weight: 600; cursor: pointer;
}
.tool button:hover { filter: brightness(1.08); }
.result { margin-top: 1.2rem; }
.result .err { color: var(--danger); }
.result table { font-size: .95rem; }
.result td:first-child { color: var(--heading); white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.ok { color: #5ecfa4; }
.warn { color: var(--accent); }
.bad { color: var(--danger); }

/* Filter bar on section indexes: sits under the heading and intro, filters
   the cards live. */
.filterbar { margin: 1.6rem 0 0; }
.filterbar input {
  width: 100%; max-width: 32rem; padding: .65rem .95rem;
  border-radius: .45rem; border: 1px solid var(--line);
  background: var(--surface); color: var(--heading); font: inherit;
}
.filterbar input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.filterbar input::placeholder { color: var(--text); opacity: .6; }

/* Article with a section menu on the left. The menu is first in the DOM so
   column-reverse can drop it below the article on narrow screens. */
.sidegrid { display: flex; gap: 3rem; align-items: flex-start; }
/* display/margin reset: the bare `nav` rule above is for the header bar and
   would otherwise lay this menu out in a row. */
.sidegrid > .side { flex: 0 0 14rem; position: sticky; top: 1.2rem; font-size: .92rem; display: block; margin-left: 0; }
.sidegrid > article { flex: 1; min-width: 0; max-width: 46rem; }
.side .side-title {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem;
}
.side ul { list-style: none; margin: 0; padding: 0; }
.side a {
  display: block; padding: .38rem .65rem; border-radius: .4rem;
  color: var(--text); text-decoration: none; border-left: 2px solid transparent;
}
.side a:hover { color: var(--heading); background: var(--surface); text-decoration: none; }
.side a.active { color: var(--heading); background: var(--surface); border-left-color: var(--accent); }
@media (max-width: 52rem) {
  .sidegrid { flex-direction: column-reverse; }
  .sidegrid > .side { position: static; flex: none; width: 100%; border-top: 1px solid var(--line); padding-top: 1.5rem; }
}

footer { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; font-size: .9rem; margin-top: 3rem; }
footer .wrap { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; max-width: 68rem; }
footer .muted { opacity: .7; }
footer nav { margin-left: auto; gap: 1.2rem; }