/* Shared chrome: footer, legal pages, blog. The app shell in index.html keeps its own
   layout rules because it is a fixed-height tool rather than a scrolling document. */
:root {
  /* Warm cream ground, terracotta accent. One palette for the landing page, the app,
     the blog and the legal pages, so nothing looks like a different product. */
  --bg:#faf7f2; --panel:#fff; --panel-2:#f6f1e9; --fg:#17171a;
  --muted:#6e6e78; --faint:#9a9aa4;
  --line:#ece7de; --line-soft:#f3efe7;
  --accent:#c0522a; --accent-soft:#fdf1e8; --ok:#2f7a3f; --ok-soft:#eef6ef;
  --warn:#b5761a;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,18,15,.04), 0 8px 24px rgba(20,18,15,.05);
}

/* Every width in this project is written assuming padding and border sit inside the
   declared width. Without this a width:100% button with padding overflows its card,
   which is exactly what happened on the landing page hero. */
*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ site footer */
/* One centred line. The separators are borders rather than pipe characters, so a
   screen reader never announces them and a wrapped line never leaves a stray glyph. */
.footer {
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 20px 0;
  flex: 0 0 auto;      /* pinned: never scrolls away with the content */
}
/* One width for every band on every page: landing, blog, legal, app, admin. */
.shellwrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; }
.footer .container, .footer .shellwrap {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
}
/* Brand left, line optically centred: the empty third column balances the mark. */
.footer-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px 20px;
}
.footer-mark {
  display: flex; align-items: center; gap: 8px; justify-self: start;
  font-weight: 700; font-size: 15px; letter-spacing: -.015em;
  color: var(--fg); text-decoration: none;
}
.footer-mark img { border-radius: 6px; }
.footer-mark .w span { color: var(--accent); }
@media (max-width: 820px) {
  .footer-row { grid-template-columns: 1fr; justify-items: center; }
  .footer-mark { justify-self: center; }
}
.footer-line {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 4px 12px;
  margin: 0;
  font-size: 13px; color: var(--muted); text-align: center;
}
.footer-line > * + * {
  border-left: 1px solid var(--line);
  padding-left: 12px;
}
.footer-line a { color: var(--accent); text-decoration: none; }
.footer-line a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- pricing tiers */
.tiers {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  margin: 28px 0 36px;
}
@media (min-width: 760px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 22px 20px 24px;
}
/* The middle tier is the one we expect most people to take, so it carries the accent. */
.tier.best { border-color: var(--accent); box-shadow: var(--shadow); }
.tier h3 { margin: 0; font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
           color: var(--muted); font-weight: 650; }
.tier .price { margin: 10px 0 2px; font-size: 15px; color: var(--muted); }
.tier .price span { font-size: 34px; font-weight: 800; letter-spacing: -.02em;
                    color: var(--fg); margin-right: 6px; }
.tier .note { margin: 0 0 14px; font-size: 13px; color: var(--faint); }
.tier ul { margin: 0; padding-left: 18px; }
.tier .buy { margin: 16px 0 0; }
.tier .buy a { display: block; text-align: center; padding: 10px 14px; border-radius: 10px;
               font-size: 14.5px; font-weight: 600; text-decoration: none; }
.tier .buy a.solid { background: var(--accent); color: #fff; }
.tier .buy a.line { border: 1px solid var(--line); color: var(--fg); }
.tier .buy a:hover { opacity: .92; }
.tier li { margin: 0 0 7px; font-size: 14.5px; line-height: 1.5; }

/* ------------------------------------------------------- legal and blog documents */
/* Same shell as the app: the page itself never scrolls. The header and footer are
   fixed in place and only the content column moves, so the brand and the legal links
   stay reachable no matter how long a blog post runs. */
html.doc-html { height: 100%; }
body.doc {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.68 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;   /* dvh so mobile browser chrome does not clip it */
  overflow: hidden;
}
body.doc header.site {
  flex: 0 0 auto;
  background: var(--panel); border-bottom: 1px solid var(--line);
  /* min-height, not height: a fixed 64px band let the CTA grow taller than its own
     header and hang below the bottom rule wherever the user's base font renders
     larger than ours. The band now grows with its contents instead of being crossed. */
  min-height: 64px; display: flex; align-items: center;
}
body.doc header.site .shellwrap {
  display: flex; align-items: center; gap: 22px; min-width: 0;
}
body.doc header.site .cta {
  background: var(--accent); color: #fff; text-decoration: none; font-size: 14px;
  font-weight: 500; padding: 9px 16px; border-radius: 10px; white-space: nowrap;
  flex: 0 0 auto;   /* the CTA is the last thing that should give way */
  line-height: 1.2; /* pin the height: the inherited 1.68 made the pill 41px tall */
  /* Reset what the in-article .cta box further down this file sets. That rule is for a
     block of promo copy inside a doc, and its margin-top of 34px was landing on this pill
     too: it pushed the pill to the bottom of the band, sat it on the bottom rule, and
     stretched a 64px header to 72px. Its cream border was showing here as well. Two
     different things should not share a class name, but until they stop sharing one the
     specific rule has to undo the general one. */
  margin: 0; border: 0;
}
body.doc header.site .cta:hover { background: #a8451d; }
body.doc header.site .brand {
  display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: 0 0 auto;
  font-weight: 660; font-size: 15px; letter-spacing: -.015em;
  color: var(--fg); text-decoration: none;
}
body.doc header.site .brand img { border-radius: 6px; }
body.doc header.site .brand .w span { color: var(--accent); }
body.doc header.site .sp { flex: 1; }
body.doc header.site a.nav {
  color: var(--muted); font-size: 14px; text-decoration: none; font-weight: 500;
}
body.doc header.site a.nav:hover { color: var(--fg); }
body.doc header.site a.nav { flex: 0 0 auto; white-space: nowrap; }

/* The header row measures about 447px, so it overflowed on any phone narrower than
   that and cut the CTA off the right edge. Tightening the gaps buys enough room to
   keep every link: nothing is hidden, the row just gets closer together. */
@media (max-width: 720px) {
  body.doc header.site .shellwrap { gap: 14px; padding: 0 16px; }
  body.doc header.site .cta { padding: 8px 12px; font-size: 13.5px; }
  /* Tighter gaps alone were not enough, so the nav links drop out and the brand and
     the CTA keep the row. Nothing is lost: Blog sits in the footer on every page and
     Profile is one tap inside the app. index.html already does the same at 900px. */
  body.doc header.site a.nav { display: none; }
}
/* Below about 400px even that is tight, so the brand drops its "AI" suffix. The
   wordmark still reads, and the icon carries the rest of the identity. */
@media (max-width: 400px) {
  body.doc header.site .shellwrap { gap: 11px; }
  /* .w span, not span: the bare selector hid the whole wordmark and left a lone icon. */
  body.doc header.site .brand .w span { display: none; }
  body.doc header.site .brand img { width: 24px; height: 24px; }
}

/* The only scrolling region. min-height:0 is required or a flex child refuses to
   shrink below its content and the page scrolls after all. */
body.doc main {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.doc-wrap { max-width: 760px; margin: 0 auto; padding: 44px 24px 56px; }

/* Phones: a pinned header and a two-line pinned footer left a reading window of barely
   half the screen, and the footer sat over the pricing tiers. Here the page scrolls
   normally, the header stays stuck to the top, and the footer is simply the end. */
@media (max-width: 720px) {
  body.doc { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  body.doc header.site { position: sticky; top: 0; z-index: 10; }
  body.doc main { overflow: visible; flex: 1 0 auto; }
  .doc-wrap { padding: 28px 16px 40px; }
}
/* The index is a directory, not an article, so it gets the full page width. */
.doc-wrap.wide { max-width: 1180px; }
.doc-wrap h1 { font-size: 34px; line-height: 1.18; letter-spacing: -.025em;
               margin: 0 0 10px; font-weight: 700; }
.doc-wrap .sub { color: var(--muted); font-size: 14.5px; margin: 0 0 34px; }
.doc-wrap h2 { font-size: 21px; letter-spacing: -.015em; margin: 38px 0 10px;
               font-weight: 660; }
.doc-wrap h3 { font-size: 17px; margin: 26px 0 8px; font-weight: 640; }
.doc-wrap p { margin: 0 0 15px; }
.doc-wrap ul, .doc-wrap ol { margin: 0 0 15px; padding-left: 22px; }
.doc-wrap li { margin: 0 0 7px; }
.doc-wrap a { color: var(--accent); }
.doc-wrap strong { font-weight: 640; }
.doc-wrap table { width: 100%; border-collapse: collapse; margin: 0 0 18px;
                  font-size: 14.5px; }
.doc-wrap th { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line);
               font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
               color: var(--faint); }
.doc-wrap td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft);
               vertical-align: top; }
.callout { background: var(--panel); border: 1px solid var(--line);
           border-left: 3px solid var(--accent); border-radius: 10px;
           padding: 15px 18px; margin: 0 0 20px; }
.callout p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------- blog list */
.posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
         margin-top: 10px; }
@media (max-width: 760px) { .posts { grid-template-columns: 1fr; } }
.post-card { background: var(--panel); border: 1px solid var(--line);
             border-radius: var(--radius); padding: 20px 22px;
             box-shadow: var(--shadow); transition: border-color .14s, transform .14s; }
.post-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.post-card h2 { font-size: 18px; margin: 0 0 5px; letter-spacing: -.01em; }
.post-card h2 a { color: var(--fg); text-decoration: none; }
.post-card h2 a:hover { color: var(--accent); }
.post-card p { color: var(--muted); font-size: 14.5px; margin: 0; }
.post-card .tag { display: inline-block; font-size: 11.5px; letter-spacing: .04em;
                  text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.topic-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.topic-nav a { border: 1px solid var(--line); background: var(--panel);
               border-radius: 99px; padding: 6px 13px; font-size: 13.5px;
               color: var(--fg); text-decoration: none; }
.topic-nav a:hover { border-color: var(--accent); color: var(--accent); }
.doc-wrap h2 + .posts { margin-bottom: 34px; }
.byline { color: var(--faint); font-size: 13.5px; margin: 0 0 30px; }
.cta { background: var(--accent-soft); border: 1px solid #f2ddd1; border-radius: 12px;
       padding: 20px 22px; margin: 34px 0 0; }
.cta h3 { margin: 0 0 6px; font-size: 17px; }
.cta p { margin: 0 0 12px; color: #6a4a38; font-size: 14.5px; }
.cta a.btn { display: inline-block; background: var(--accent); color: #fff;
             padding: 9px 16px; border-radius: 9px; text-decoration: none;
             font-size: 14px; font-weight: 500; }

/* ------------------------------------------------------------------------ toasts */
/* Bottom centre rather than top right: on a page whose header carries the trial
   countdown and the sign out control, a toast in the corner lands on top of them. */
.toast-host {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  /* Above the cookie banner, which is also fixed at 9999. Equal values meant
     whichever was appended last won, and that was the toast. */
  z-index: 10000; pointer-events: none; width: min(92vw, 460px);
}
/* While the cookie banner is up, sit above it instead of across it. The height comes
   from track.js because the banner wraps to two lines on narrow screens. */
.has-consent-banner .toast-host { bottom: calc(24px + var(--consent-h, 96px) + 12px); }
.toast {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: flex-start; gap: 10px;
  background: #1d1c1a; color: #fff; border-radius: 11px;
  padding: 11px 15px; font-size: 14.5px; line-height: 1.45;
  box-shadow: 0 6px 28px rgba(20,18,15,.28);
  animation: toast-in .18s ease-out;
  max-width: 100%;
}
.toast .ti {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  margin-top: 1px; background: #2f7a3f;
}
.toast.error { background: #7a2016; }
.toast.error .ti { background: #fff; color: #7a2016; }
.toast.info .ti { background: #4b4b55; }
.toast.out { animation: toast-out .18s ease-in forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.out { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Place picker (/assets/places.js). Used by /app and /profile, which both style
 * input[type=text] inline; those rules load after this file and match at the same
 * specificity, so the selectors here name the attribute too in order to win.
 * ------------------------------------------------------------------------- */
.combo { position:relative; }
.combo-field { display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:7px 8px; min-height:44px; cursor:text; }
.combo-field:focus-within { border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.combo-field input[type="text"] { flex:1 1 150px; width:auto; min-width:150px;
  border:0; outline:0; padding:3px 2px; background:transparent; font:inherit;
  font-size:14.5px; color:var(--fg); border-radius:0; }
.combo-field input[type="text"]:focus { border:0; outline:0; box-shadow:none; }
.combo-chips { display:contents; }
.combo-chip { display:inline-flex; align-items:center; gap:5px; background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:3px 4px 3px 10px;
  font-size:13px; line-height:1.4; max-width:100%; }
.combo-chip button { border:0; background:transparent; cursor:pointer;
  color:var(--muted); font:inherit; font-size:15px; line-height:1; padding:0 5px;
  border-radius:999px; }
.combo-chip button:hover { background:var(--line); color:var(--fg); }
.combo-list { position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
  margin:0; padding:4px; list-style:none; max-height:290px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 28px rgba(20,18,15,.14); }
.combo-list li { display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; padding:7px 10px; border-radius:7px; cursor:pointer; font-size:14px; }
.combo-list li.on { background:var(--accent-soft); }
.combo-list li em { flex:0 0 auto; font-style:normal; font-size:11px;
  color:var(--faint); text-transform:uppercase; letter-spacing:.04em; }
.combo-list li.combo-none { display:block; cursor:default; color:var(--muted);
  font-size:13px; }
.combo-list li.combo-none b { color:var(--fg); font-weight:600; }