/* crossfriend.css — brand tokens + app components layered over Pico (classless).
   Pico styles the bare semantic HTML; everything here is deliberate deviation. */

:root {
  --cf-accent: #534ab7;            /* brand purple */
  --cf-accent-strong: #3c3489;
  --cf-surface: transparent;       /* card/section fill; gets a real value in dark mode */
  --cf-brand: #1a1a18;             /* wordmark color: near-black on light, white on dark */
  /* Sleeker controls than Pico's roomy defaults (.75rem/1rem): these two vars drive the
     padding of every button, input, and select. */
  --pico-form-element-spacing-vertical: .42rem;
  --pico-form-element-spacing-horizontal: .75rem;
  --pico-primary: var(--cf-accent);
  --pico-primary-background: var(--cf-accent);
  --pico-primary-border: var(--cf-accent);
  --pico-primary-hover: var(--cf-accent-strong);
  --pico-primary-hover-background: var(--cf-accent-strong);
  --pico-primary-hover-border: var(--cf-accent-strong);
  --pico-primary-underline: rgba(83, 74, 183, .35);
  --pico-primary-focus: rgba(83, 74, 183, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --cf-accent: #afa9ec;
    --cf-accent-strong: #cecbf6;
    --pico-primary-inverse: #1a1730;
    /* Warm dark-grey palette (page #262624, surfaces #30302E, light hairline borders)
       in place of Pico's blue-slate dark theme. */
    --cf-surface: #30302e;
    --cf-brand: #fff;
    --pico-background-color: #262624;
    --pico-card-background-color: #30302e;
    --pico-card-sectioning-background-color: #2b2b29;
    --pico-muted-border-color: rgba(255, 255, 255, .14);
    --pico-card-border-color: rgba(255, 255, 255, .14);
    --pico-form-element-background-color: #30302e;
    --pico-form-element-border-color: rgba(255, 255, 255, .2);
    --pico-table-border-color: rgba(255, 255, 255, .12);
    --pico-code-background-color: #30302e;
  }
}

/* App-shaped container: Pico's classless container goes very wide; cap it. */
body > header, body > main { max-width: 48rem; }
body > main { padding-top: 1rem; }

/* Pico makes buttons 100% width (form-first default); this is an app, not a form page. */
button, [type=submit], [role=button] { width: auto; font-size: .92rem; }
table button, td form button { padding: .12rem .55rem; font-size: .85em; margin: 0; }
/* .btn = link styled as a compact button (connect cards, open-profile actions) */
.btn { display: inline-block; padding: .38rem .75rem; font-size: .92rem;
       border: 1px solid var(--pico-muted-border-color); border-radius: 8px;
       text-decoration: none; line-height: 1.3; }
.btn:hover { border-color: var(--cf-accent); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; margin-top: 1.6em; }

/* Top navigation */
.cf-nav { border-bottom: 1px solid var(--pico-muted-border-color); }
.cf-nav nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
              padding: .55rem 0; }
.cf-nav a { text-decoration: none; color: var(--pico-muted-color); font-size: .95rem; }
.cf-nav a:hover { color: var(--pico-color); }
.cf-nav a.active { color: var(--pico-color);
                   border-bottom: 2px solid var(--cf-accent); padding-bottom: 1px; }
.cf-nav a.brand { font-weight: 700; font-size: 1.05rem; color: var(--cf-brand); }
.cf-nav a.brand:hover { color: var(--cf-brand); }
.cf-nav .brand-logo { width: 1.25em; height: 1.25em; vertical-align: -.27em;
                      border-radius: 4px; }
.cf-nav .spacer { margin-left: auto; }
.cf-nav .who { color: var(--pico-color); font-size: .9rem; font-weight: 600; }
.cf-nav .nav-logout { margin: 0; }
.cf-nav .nav-logout button { font-size: .78rem; padding: .15rem .6rem; margin: 0;
                             background: none; color: var(--pico-muted-color);
                             border: 1px solid var(--pico-muted-border-color); }
.cf-nav .nav-logout button:hover { color: var(--pico-color); }

/* Inbox badge (pending approval count) */
.badge { display: inline-block; min-width: 1.4em; text-align: center;
         background: var(--cf-accent); color: var(--pico-primary-inverse, #fff);
         border-radius: 999px; font-size: .72rem; font-weight: 700;
         padding: .1em .45em; vertical-align: text-top; }

/* Flash / notice component (PRG results, profile-switch notice, bulk summaries) */
.flash { border: 1px solid var(--pico-muted-border-color); border-radius: 8px;
         padding: .5rem .8rem; margin: .8rem 0; background: var(--cf-surface); }
.flash-warn { border-color: #e67e22; background: rgba(230, 126, 34, .08); }
.flash-ok { border-color: #1d9e75; }
.error-text { color: #c0392b; }

/* Onboarding steps (dashboard) */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
         gap: .5rem; margin: .8rem 0 1.3rem; }
.step { border: 1px solid var(--pico-muted-border-color); border-radius: 10px;
        padding: .4rem .7rem; background: var(--cf-surface); }
.step .k { font-size: .78rem; color: var(--pico-muted-color); margin: 0 0 .15rem; }
.step .v { font-weight: 600; font-size: .95rem; margin: 0; }
.step.next { border-color: var(--cf-accent); }
.step.next .k { color: var(--cf-accent); }

/* Card grids (dashboard platforms, discover people) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
         gap: .55rem; margin: .8rem 0; }
.card { border: 1px solid var(--pico-muted-border-color); border-radius: 10px;
        padding: .5rem .7rem; margin: 0; position: relative;
        background: var(--cf-surface); }
.card p { margin: 0 0 .25rem; }
.card form { margin: 0; }
.card .actions { margin-top: .35rem; }

/* Inline platform glyphs (vendored Tabler brand icons, see icons.py) */
.picon svg { width: 1.15em; height: 1.15em; vertical-align: -.2em; }

/* Small glyph button (e.g. per-card unlink, pinned to the corner) */
.iconbtn { border: none; background: none; color: var(--pico-muted-color);
           padding: .05rem .35rem; width: auto; font-size: .95rem; line-height: 1; }
.iconbtn:hover { color: #c0392b; background: none; }
.card form.unlink { position: absolute; top: .45rem; right: .4rem; }

/* Connect-platform cards */
.connect-card input { margin-bottom: .45rem; }
.connect-card img { display: block; }
.connect-card .btn { margin: 0; }

/* Person identity row inside a card */
.person { display: flex; gap: .5rem; align-items: center; margin-bottom: .3rem; }
.avatar { display: inline-flex; flex: none; width: 2.1rem; height: 2.1rem;
          border-radius: 50%; align-items: center; justify-content: center;
          background: rgba(83, 74, 183, .16); color: var(--cf-accent);
          font-weight: 700; font-size: .82rem; }
.person .meta p { margin: 0; }
.person .meta .sub { font-size: .82rem; color: var(--pico-muted-color); }

/* Status chips */
.chip { display: inline-block; font-size: .76rem; border-radius: 999px;
        padding: .08em .75em; border: 1px solid var(--pico-muted-border-color);
        color: var(--pico-muted-color); white-space: nowrap; }
.chip-warn { background: rgba(230, 126, 34, .14); border-color: rgba(230, 126, 34, .45);
             color: #b9651a; }
.chip-ok { background: rgba(29, 158, 117, .14); border-color: rgba(29, 158, 117, .45);
           color: #14855f; }
.chip-pending { background: rgba(127, 127, 127, .12); }
/* Inside cards, chips wrap rather than overflow the card edge (nowrap is for table cells). */
.card .chip { white-space: normal; }

/* Mobile: tables scroll sideways instead of crushing the layout */
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 28rem; }

/* Collapsed expert sections (grants page) */
details { border: 1px solid var(--pico-muted-border-color); border-radius: 10px;
          padding: .45rem .7rem; margin: .8rem 0; background: var(--cf-surface); }
details summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: .6rem; }

/* Footer (legal links) */
.cf-footer { max-width: 48rem; margin: 2rem auto 1rem; padding: .6rem 0 0;
             border-top: 1px solid var(--pico-muted-border-color);
             font-size: .82rem; color: var(--pico-muted-color); }
.cf-footer a { color: var(--pico-muted-color); text-decoration: none; }
.cf-footer a:hover { color: var(--pico-color); }

@media (max-width: 600px) {
  .cf-nav nav { gap: .65rem; font-size: .9rem; }
  ul.friends { columns: 1; }
}

/* Carried over from the old inline styles */
.muted { color: var(--pico-muted-color); }
ul.friends { columns: 2; padding-left: 1.1rem; }
.copybtn { border: none; background: none; cursor: pointer; padding: 0 .25rem; width: auto; }