/* Canonical brand green: single value everywhere, including inline var() styles. */
:root{--ic-green:var(--ic-primary,#0E6B45);--th-accent:var(--ic-primary,#0E6B45)}
.app-theme{--th-accent:var(--ic-primary,#0E6B45)}
/* Impact Connect - canonical button system v1 (Brand Kit: primary #0E6B45, white text on green site-wide).
   Loaded AFTER design-system.css so these rules settle every earlier conflict. */
html body .app-theme button,
html body button,
html body .app-theme input[type="submit"],
html body input[type="submit"],
html body input[type="button"],
html body .button,
html body a[class*="button"],
html body [class*="-btn"]:not(.icv-vbtn),
html body .ic-offbar button,
html body .ic-off-banner button,
html body .ic-offdlg .primary{
  min-height:44px!important;
  padding:.7rem 1.1rem!important;
  border-radius:12px!important;
  font:700 .94rem/1.2 system-ui,-apple-system,'Segoe UI',sans-serif!important;
  cursor:pointer;
  border:1px solid var(--ic-primary,#0E6B45)!important;
  background:var(--ic-primary,#0E6B45)!important;
  color:#FFFFFF!important;
  text-decoration:none!important;
  box-sizing:border-box;
  transition:background .15s ease,border-color .15s ease;
}
html body .app-theme button:hover,
html body button:hover,
html body input[type="submit"]:hover,
html body .button:hover,
html body a[class*="button"]:hover{filter:brightness(1.12);color:#FFFFFF!important}
html body .app-theme button:active,
html body button:active{filter:brightness(.92)}
html body button:disabled{opacity:.45;cursor:default}

/* Secondary style - one and only one: white box, green text, green border. */
html body button.secondary,
html body .btn-secondary,
html body .guide-hero a,
html body .guide-hero button,
html body .role-chooser>div button,
html body .role-skip,
html body .role-welcome [data-change],
html body .need-actions [data-share-need],
html body .autofill-notice button,
html body .ic-offdlg .ghost,
html body .pagination-controls button{
  background:#FFFFFF!important;
  color:var(--ic-primary,#0E6B45)!important;
  border:1px solid color-mix(in srgb,var(--ic-primary,#0E6B45) 35%,#FFFFFF)!important;
}
html body button.secondary:hover,
html body .btn-secondary:hover,
html body .guide-hero a:hover,
html body .guide-hero button:hover,
html body .role-chooser>div button:hover,
html body .pagination-controls button:hover{background:#E3F3EA!important;background-image:none!important;border-color:var(--ic-primary,#0E6B45)!important;color:#0E6B45!important}

/* Role-chooser cards stay card-shaped but inherit the same shape language. */
html body .role-chooser>div button{text-align:left!important;border-radius:16px!important}
html body .role-chooser>div button b{color:#123B2E!important}
html body .role-chooser>div button small{color:#4E6259!important}

/* Inline-styled green variants collapse to the canonical green, always white text. */
html body button[style*="background"],
html body a[style*="background"]{color:#FFFFFF!important}
html body button[style*="#0E6B45"],html body button[style*="#0E6B45"],html body button[style*="#0e684f"],html body button[style*="#0E6B45"],html body button[style*="var(--ic-green)"],
html body a[style*="#0E6B45"],html body a[style*="#0E6B45"],html body a[style*="#0e684f"]{background:var(--ic-primary,#0E6B45)!important;border-color:var(--ic-primary,#0E6B45)!important;color:#FFFFFF!important;border-radius:12px!important}

/* Danger stays red but same shape, white text. */
html body button[style*="#123B2E"],html body button.danger{background:#123B2E!important;border-color:#123B2E!important;color:#FFFFFF!important}

/* Text-only icon/name buttons are not boxes. */
html body .wu-card button.icv-vbtn{background:transparent!important;border:0!important;color:#123B2E!important;padding:0!important;min-height:0!important;border-radius:0!important}

/* Button children (arrow glyphs, badges) always follow the button's own text colour. */
html body button span,
html body .button span,
html body a[class*="button"] span,
html body [class*="-btn"] span{color:inherit!important}

/* Role chooser: pressed/hover keeps the card light and readable (was dark grey-green with dark text). */
html body .role-chooser > div:not(.role-head) button:hover,html body .role-chooser > div:not(.role-head) button:active,html body .role-chooser > div:not(.role-head) button:focus-visible{background:linear-gradient(135deg,color-mix(in srgb,var(--rc,#0E6B45) 16%,#FFFFFF) 0%,#FFFFFF 78%)!important;border-color:var(--rc,#0E6B45)!important;color:#123B2E!important}
html body .role-chooser > div:not(.role-head) button:hover b,html body .role-chooser > div:not(.role-head) button:active b{color:#123B2E!important}
html body .role-chooser > div:not(.role-head) button:hover small,html body .role-chooser > div:not(.role-head) button:active small{color:#4E6259!important}

/* Role chooser: the scroll area starts below the header and "Maybe later" stays pinned, so it never shows half cut off under the header. */
html body .role-chooser{top:var(--native-top,0px)!important}
html body .role-chooser .role-head{position:sticky!important;top:0!important;z-index:3;background:var(--ic-bg,#FAFCFA);padding-block:8px;margin-top:-8px}
html body .role-chooser{padding-bottom:calc(104px + env(safe-area-inset-bottom))!important}
html body .project-intake .goal-prompt textarea{padding-bottom:12px!important;min-height:120px}
html body .project-intake .goal-prompt .goal-mic{position:static!important;display:inline-flex!important;margin:10px 0 0!important}
html body .role-chooser{padding-top:0!important}
html body .role-chooser .role-head{position:sticky!important;top:0!important;margin:0 -16px 12px!important;padding:14px 16px 10px!important;background:var(--ic-bg,#FAFCFA)!important;z-index:5}
html{scroll-padding-top:84px}

/* Welcome chooser: the name row sat under the sticky "Maybe later" header on phones (the centred, shrinking column pushed it up). Top-aligned, no shrinking. */
html body .role-chooser{justify-content:flex-start!important}
html body .role-chooser>*{flex-shrink:0!important}
html body .role-chooser>.wn{margin-top:0!important}