/* monetizers.ai — base visual identity
   Minimalist, white background. Semantic colours:
   positive=green, warning=orange, bad=red, insight=purple. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&family=Source+Sans+3:wght@400;500;600&display=swap');

:root {
    /* typography */
    --font-sans: 'Montserrat', 'Noto Sans', 'Source Sans 3', sans-serif;

    /* surface + text (minimalist, white) */
    --color-bg:      #ffffff;
    --color-surface: #ffffff;
    --color-text:    #14161a;
    --color-muted:   #6b7280;
    --color-border:  #e5e7eb;

    /* semantic */
    --color-positive:    #16a34a;  /* green  */
    --color-warning:     #ea580c;  /* orange */
    --color-bad:         #dc2626;  /* red    */
    --color-insight:     #9333ea;  /* purple */

    /* soft tints for badges/backgrounds */
    --color-positive-bg: #ecfdf3;
    --color-warning-bg:  #fff7ed;
    --color-bad-bg:      #fef2f2;
    --color-insight-bg:  #faf5ff;

    /* spacing / shape */
    --radius:    10px;
    --radius-sm: 6px;
    --maxw:      64rem;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--color-muted); }

/* semantic text */
.text-positive { color: var(--color-positive); }
.text-warning  { color: var(--color-warning); }
.text-bad      { color: var(--color-bad); }
.text-insight  { color: var(--color-insight); }

/* semantic badges */
.badge {
    display: inline-flex; align-items: center;
    padding: 0.15em 0.6em;
    font-size: 0.8rem; font-weight: 600;
    border-radius: 999px;
    line-height: 1.4;
}
.badge-positive { color: var(--color-positive); background: var(--color-positive-bg); }
.badge-warning  { color: var(--color-warning);  background: var(--color-warning-bg); }
.badge-bad      { color: var(--color-bad);      background: var(--color-bad-bg); }
.badge-insight  { color: var(--color-insight);  background: var(--color-insight-bg); }

/* layout helpers */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

/* buttons */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: inherit; font-weight: 600; font-size: 0.95rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff; color: var(--color-text);
    cursor: pointer;
}
.btn:hover { background: #f7f7f8; text-decoration: none; }
.btn-primary { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.btn-primary:hover { background: #000; }

/* shared public top bar (landing / learn / privacy) */
header.pub-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border);
}
header.pub-top .brand {
    display: flex; align-items: center; gap: 0.55rem; font-weight: 700;
    letter-spacing: -0.02em; font-size: 1.1rem; color: var(--color-text);
}
header.pub-top .brand:hover { text-decoration: none; }
header.pub-top .brand img { width: 26px; height: 26px; border-radius: 6px; display: block; }
.gbtn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: #fff; color: #1f1f1f; font-weight: 600;
    padding: 0.6rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.gbtn:hover { background: #f7f7f8; text-decoration: none; }
.gbtn .g { width: 18px; height: 18px; }

/* shared public footer */
.site-footer { border-top: 1px solid var(--color-border); margin-top: 3rem; }
.site-footer .foot-inner {
    max-width: var(--maxw); margin: 0 auto;
    padding: 1.75rem clamp(1.5rem, 5vw, 4rem);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    row-gap: 0.75rem; column-gap: 1.5rem;
}
.site-footer .foot-links { display: flex; gap: 1.75rem; }
.site-footer .foot-links a { color: var(--color-muted); font-size: 0.9rem; }
.site-footer .foot-links a:hover { color: var(--color-text); text-decoration: none; }
.site-footer .foot-copy { color: var(--color-muted); font-size: 0.8rem; margin: 0; }

/* staff header identity dropdown */
.usermenu { position: relative; }
.usermenu > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--color-muted);
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { color: var(--color-text); }
.usermenu .caret { width: 16px; height: 16px; color: var(--color-muted); transition: transform .15s ease; flex: none; }
.usermenu[open] .caret { transform: rotate(180deg); }
.usermenu-panel {
    position: absolute; right: 0; top: calc(100% + 0.45rem);
    min-width: 150px; padding: 0.3rem;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(20, 22, 26, 0.10); z-index: 50;
}
.usermenu-panel a {
    display: block; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
    color: var(--color-text); font-size: 0.9rem; font-weight: 500;
}
.usermenu-panel a:hover { background: #f5f5f6; text-decoration: none; }