/* People Commons — shared styles for the tool pages (Brand v2)
   Add this one line to the <head> of any page:
     <link rel="stylesheet" href="/pc-styles.css">

   Everything in here is shared. A page keeps its own <style> block for the
   parts that are only its own. If a value needs to change across the site,
   it changes here and nowhere else. */

:root{
  --white:#ffffff;
  --soft:#faf8f5;
  --ink:#211c17;
  --warm-ink:#2b2520;
  --body:#5c554d;
  --muted:#8a8178;
  --terra:#c05f36;
  --terra-dark:#a34d2a;
  --sage:#7a8a63;
  --sage-dark:#5f7050;
  --wheat:#d9a441;
  --signal:#b3402e;

  --line:rgba(33,28,23,.08);
  --edge:rgba(33,28,23,.17);
  --sh:0 1px 2px rgba(33,28,23,.06), 0 12px 28px rgba(33,28,23,.10);
  --sh-h:0 2px 5px rgba(33,28,23,.08), 0 20px 46px rgba(33,28,23,.16);

  --page:920px;

  /* kept so older rules on not yet restyled pages do not break */
  --sand:#f7f1e8; --linen:#fffdf9; --hedge:#ddd2c2; --clay:#6f655a;
  --card-shadow:var(--sh); --card-shadow-hover:var(--sh-h);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--white);
  color:var(--body);
  font:400 17px/1.6 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* A quiet wash at the top of every tool page, so the rooms belong to the
   same house as the landing. No animation: these are working pages. */
body::before{
  content:"";
  position:fixed; inset:0 0 auto 0; height:420px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 70% at 12% 0%, rgba(233,178,143,.30), transparent 70%),
    radial-gradient(50% 60% at 82% 4%, rgba(230,211,163,.26), transparent 72%);
}

a{color:inherit}
h1,h2,h3,h4{font-family:'Bricolage Grotesque', system-ui, sans-serif; color:var(--ink); margin:0}
:focus-visible{outline:2px solid var(--terra); outline-offset:3px; border-radius:8px}
.hidden{display:none !important}

/* ---------- header ---------- */
.topbar-outer{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  max-width:var(--page); margin:0 auto; padding:14px 24px;
}
.wordmark{
  font:600 23px 'Bricolage Grotesque', sans-serif; letter-spacing:-.015em;
  color:var(--warm-ink); text-decoration:none; white-space:nowrap;
}
.wordmark span{color:var(--terra)}
.toollabel{font:500 14px 'Instrument Sans', sans-serif; color:var(--muted); margin-left:auto}
.toollabel a{color:var(--terra); text-decoration:none; font-weight:600}
.toollabel a:hover{text-decoration:underline; text-underline-offset:2px}

/* ---------- page shell ---------- */
main{max-width:var(--page); margin:0 auto; padding:26px 24px 64px}
h1{font:700 clamp(28px,3.6vw,36px)/1.12 'Bricolage Grotesque', sans-serif; letter-spacing:-.02em; margin:0 0 6px}
.lede{color:var(--body); margin:0 0 24px; font-size:16px; max-width:62ch}
.eyebrow{
  font:600 12.5px 'Instrument Sans', sans-serif; text-transform:uppercase;
  letter-spacing:.14em; color:var(--terra); margin:0 0 10px;
}
footer{
  max-width:var(--page); margin:0 auto; padding:0 24px 40px;
  font-size:13px; color:var(--muted);
}

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid var(--edge); border-radius:16px;
  padding:22px; margin-bottom:16px; box-shadow:var(--sh);
}
.card h2{font:600 19px 'Bricolage Grotesque', sans-serif; letter-spacing:-.012em; margin:0 0 4px}
.card .sub{font-size:13.5px; color:var(--muted); margin:0 0 16px}
.hr{height:1px; background:var(--line); margin:18px 0 14px}

/* ---------- form fields ---------- */
label{display:block; font:600 13px 'Instrument Sans', sans-serif; color:var(--ink); margin:0 0 6px}
textarea, select, input[type=text], input[type=email], input[type=password], input[type=date], input[type=number]{
  width:100%; border:1px solid var(--edge); border-radius:12px; background:#fff; color:var(--ink);
  font:400 16px/1.55 'Instrument Sans', sans-serif; padding:12px 14px; resize:vertical;
}
textarea:focus, select:focus, input:focus{outline:2px solid var(--terra); outline-offset:1px; border-color:transparent}
::placeholder{color:#b3a794; opacity:1}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--edge); border-radius:999px; background:#fff; color:var(--ink);
  font:500 14px 'Instrument Sans', sans-serif; padding:9px 16px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.btn:hover{border-color:var(--terra); color:var(--terra)}
.btn:disabled{opacity:.5; cursor:default; border-color:var(--edge); color:var(--ink)}
.btn-terra{
  border:0; border-radius:999px; background:var(--terra); color:#fff;
  font:600 16px 'Instrument Sans', sans-serif; padding:14px 26px; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.btn-terra:hover{background:var(--terra-dark); transform:translateY(-1px)}
.btn-terra:disabled{opacity:.55; cursor:default; transform:none}
.gen-btn{
  margin-top:18px; width:100%; padding:15px; border:0; border-radius:999px;
  background:var(--terra); color:#fff; font:600 16px 'Instrument Sans', sans-serif; cursor:pointer;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow:0 6px 18px rgba(192,95,54,.24);
}
.gen-btn:hover{background:var(--terra-dark); transform:translateY(-1px); box-shadow:0 10px 24px rgba(192,95,54,.30)}
.gen-btn:disabled{opacity:.55; cursor:default; transform:none; box-shadow:none}

/* ---------- messages ---------- */
.status{min-height:22px; font-size:14px; color:var(--sage-dark); margin:12px 2px}
.status.err{color:var(--signal)}

/* ---------- credits, shared by every AI tool ---------- */
.balance{margin:8px 0 0; font:400 13px 'Instrument Sans', sans-serif; color:var(--muted)}
.balance a{color:var(--terra); font-weight:600; text-decoration:none}
.balance a:hover{text-decoration:underline}
.limit-note{
  margin:14px 0 0; padding:16px 18px; border-radius:14px;
  background:rgba(192,95,54,.07); border:1px solid rgba(192,95,54,.22);
  font:400 14.5px/1.5 'Instrument Sans', sans-serif; color:var(--warm-ink);
}
.limit-note b{font-weight:600}
.limit-note a{
  display:inline-block; margin-top:12px; padding:10px 20px; border-radius:999px;
  background:var(--terra); color:#fff; font-weight:600; text-decoration:none;
}
.limit-note a:hover{background:var(--terra-dark)}
/* A second, quieter link inside the same note. One pill button per panel is
   enough; anything after it is a plain text link. */
.limit-note a.quiet{
  padding:0; background:none; color:var(--terra);
  font-weight:500; text-decoration:underline;
}
.limit-note a.quiet:hover{background:none; color:var(--terra-dark)}

@media (max-width:640px){
  main{padding:20px 18px 48px}
  .topbar{padding:12px 18px}
  .toollabel{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}
