/* Growth: podcasts, journalists, guest blogs, pitch emails, commitments.
   The Norton's Mind Growth composition (ccc-nortonsmind public/growth.css,
   Mike 2026-11-02: one composition, a clear place to look first), redrawn on
   this console's :root tokens:
     1. a stage strip (.g-flow / .g-stage), the stage to act on dark (.act);
     2. the working list (.g-panel) with tabs that carry counts (.g-tabs);
     3. a rail (.g-rail / .g-card) for explanations and buttons. */
.g-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start}
@media (max-width:980px){ .g-wrap{grid-template-columns:1fr} }

.g-flow{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0 0 18px}
@media (max-width:760px){ .g-flow{grid-template-columns:repeat(2,minmax(0,1fr))} }
.g-stage{display:flex; flex-direction:column; gap:3px; padding:14px 16px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface-0); box-shadow:var(--shadow-s)}
.g-stage b{font:800 26px/1 var(--head); color:var(--ink)}
.g-stage .g-lab{font:700 12px/1.3 var(--sans); color:var(--text)}
.g-stage .g-cap{font:400 11px/1.4 var(--sans); color:var(--text-3)}
.g-stage.dim b{color:var(--line-strong)}
.g-stage.act{background:var(--band); border-color:transparent; box-shadow:var(--band-lift)}
.g-stage.act b,.g-stage.act .g-lab{color:var(--white)}
.g-stage.act .g-cap{color:var(--band-kick)}

.g-panel{border:1px solid var(--line); border-radius:14px; background:var(--surface-0); box-shadow:var(--shadow-m); overflow:hidden}
.g-tabs{display:flex; flex-wrap:wrap; gap:2px; padding:8px 8px 0; border-bottom:1px solid var(--line); background:var(--surface-2)}
.g-tabs button{background:none; border:0; border-bottom:3px solid transparent; border-radius:0; padding:9px 12px;
  font:600 12.5px/1 var(--sans); color:var(--text-2); box-shadow:none}
.g-tabs button small{font:600 10.5px/1 var(--mono); color:var(--text-3); margin-left:5px}
.g-tabs button.on{color:var(--accent-live); border-bottom-color:var(--accent)}
.g-tools{display:flex; flex-wrap:wrap; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line)}
.g-tools input[type=search]{flex:1; min-width:180px}

.g-row{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px; align-items:start; padding:14px 16px;
  border-bottom:1px solid var(--line); cursor:pointer}
.g-row:hover{background:var(--surface-2)}
.g-row.open{background:color-mix(in srgb, var(--accent) 4%, var(--white))}
.g-row h4{margin:0; font:700 14px/1.35 var(--sans); color:var(--ink)}
.g-row .g-sub{font:400 12px/1.45 var(--sans); color:var(--text-3)}
.g-row .g-why{margin:5px 0 0; font:400 12.5px/1.5 var(--sans); color:var(--text-2)}
.g-detail{grid-column:1/-1; display:grid; gap:10px; padding:4px 0 2px}
.g-detail p{margin:0; font:400 12.5px/1.55 var(--sans); color:var(--text-2)}
.g-detail .g-q{color:var(--text-3)}
.g-detail ul{margin:0; padding-left:18px; font:400 12px/1.5 var(--sans); color:var(--text-2)}
.g-detail .cite{display:block; font-size:11px; color:var(--text-3)}
.g-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center}

/* the rating as a ring filled to the score */
.g-fit{--p:0; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--c, var(--line-strong)) calc(var(--p) * 1%), var(--fog) 0)}
.g-fit b{width:40px; height:40px; border-radius:50%; background:var(--white); display:grid; place-items:center;
  font:800 14px/1 var(--head); color:var(--ink)}
.g-fit.top{--c:var(--accent)} .g-fit.good{--c:var(--accent-mid)} .g-fit.weak{--c:var(--watch)} .g-fit.no,.g-fit.none{--c:var(--line-strong)}
.g-fitword{margin-top:4px; text-align:center; font:600 9.5px/1.2 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--text-3)}
.g-st{display:inline-block; padding:2px 9px; border-radius:999px; font:600 10.5px/1.6 var(--sans); border:1px solid var(--line); color:var(--text-2); background:var(--surface-2); white-space:nowrap}
.g-st.ready,.g-st.approved{border-color:color-mix(in srgb, var(--accent) 35%, var(--white)); color:var(--accent-live); background:color-mix(in srgb, var(--accent) 7%, var(--white))}
.g-st.booked,.g-st.done,.g-st.sent{border-color:color-mix(in srgb, var(--good) 35%, var(--white)); color:var(--good); background:color-mix(in srgb, var(--good) 8%, var(--white))}
.g-st.overdue{border-color:var(--critical); color:var(--critical)}

.g-rail{display:flex; flex-direction:column; gap:12px; position:sticky; top:12px}
.g-card{border:1px solid var(--line); border-radius:12px; background:var(--surface-0); padding:14px 15px; box-shadow:var(--shadow-s)}
.g-card h4{margin:0 0 6px; font:700 13px/1.3 var(--head); color:var(--ink)}
.g-card p{margin:0 0 6px; font:400 12px/1.5 var(--sans); color:var(--text-2)}
.g-card .g-q{color:var(--text-3)}
.g-card.caution{border-color:color-mix(in srgb, var(--watch) 45%, var(--white)); background:color-mix(in srgb, var(--watch) 6%, var(--white))}
.g-card.caution h4{color:var(--watch)}
.g-card.dark{background:var(--band); border-color:transparent; color:var(--white)}
.g-card.dark h4{color:var(--white)} .g-card.dark p{color:color-mix(in srgb, var(--white) 82%, var(--ink))}

.g-mailed{display:grid; gap:8px}
.g-mailed label{display:flex; flex-direction:column; gap:3px; font:600 11px/1.4 var(--sans); color:var(--text-3)}
.g-mailed textarea{min-height:230px; font:400 13px/1.55 var(--sans)}
.g-empty{padding:26px 18px; font:400 13px/1.55 var(--sans); color:var(--text-2)}
.g-empty b{display:block; color:var(--ink); margin-bottom:4px}

.g-commit{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px 12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.g-commit label{display:flex; flex-direction:column; gap:3px; font:600 11px/1.4 var(--sans); color:var(--text-3)}
.g-commit .wide{grid-column:1/-1}

/* Two more groups (Growth, Help) made the header wider than a laptop screen
   and put a scrollbar under it. Tighter group padding on narrower screens. */
@media (max-width:1600px){ #groups button{padding:9px 8px; font-size:13px} }
@media (max-width:1300px){ #groups button{padding:9px 7px; font-size:12.5px} }
.armwrap button, #signout{white-space:nowrap}