/* HolleyFamily.net theme — v1
 *
 * One stylesheet for every HolleyFamily.net site, WebAdmin and the SSO sign-in page.
 * Source of truth: WebAdmin repo theme/web/. Published by theme/deploy.sh to
 *   https://sso.holleyfamily.net/theme/v1/holleyfamily.css   (public, any site)
 *   WebAdmin /theme/holleyfamily.css                          (served from the repo)
 *   Keycloak login theme `holleyfamily`                       (copied into the theme)
 *
 * Use the --hf-* tokens in your own CSS; the hf-* classes are optional building blocks.
 * Light and dark follow the OS, and `<html data-theme="light|dark">` forces either.
 * v1 is stable: additions only. A breaking change becomes /theme/v2/.
 */

:root{
  --hf-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --hf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hf-radius: 10px; --hf-radius-sm: 6px;

  --hf-bg:#f7f6f2; --hf-surface:#ffffff; --hf-surface-2:#f1efe9; --hf-line:#e2ded5;
  --hf-fg:#1d2420; --hf-dim:#5b665f; --hf-faint:#8a948d;
  --hf-brand:#1f6b47; --hf-brand-strong:#17573a; --hf-brand-fg:#ffffff; --hf-brand-soft:#e3f0e8;
  --hf-berry:#b3261e;
  --hf-ok:#1a7f4b; --hf-warn:#a86a00; --hf-fail:#c0392b; --hf-info:#2563eb; --hf-unknown:#6b7280;
  --hf-ok-bg:#e6f4ec; --hf-warn-bg:#fdf3e0; --hf-fail-bg:#fdecea; --hf-unknown-bg:#eef0f2;
  --hf-shadow: 0 8px 28px rgba(20,30,25,.14);
  --hf-focus: 0 0 0 3px color-mix(in srgb, var(--hf-brand) 35%, transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --hf-bg:#0f1412; --hf-surface:#161d1a; --hf-surface-2:#1c2521; --hf-line:#2a3530;
    --hf-fg:#e7ece9; --hf-dim:#9fb0a7; --hf-faint:#6f7f77;
    --hf-brand:#4fb383; --hf-brand-strong:#6cc79a; --hf-brand-fg:#08130d; --hf-brand-soft:#16291f;
    --hf-berry:#f06a5f;
    --hf-ok:#4ec98a; --hf-warn:#e0a44a; --hf-fail:#f0705f; --hf-info:#6ea8fe; --hf-unknown:#8b95a1;
    --hf-ok-bg:#12281d; --hf-warn-bg:#2c2313; --hf-fail-bg:#301a18; --hf-unknown-bg:#1c222a;
    --hf-shadow: 0 10px 32px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --hf-bg:#0f1412; --hf-surface:#161d1a; --hf-surface-2:#1c2521; --hf-line:#2a3530;
  --hf-fg:#e7ece9; --hf-dim:#9fb0a7; --hf-faint:#6f7f77;
  --hf-brand:#4fb383; --hf-brand-strong:#6cc79a; --hf-brand-fg:#08130d; --hf-brand-soft:#16291f;
  --hf-berry:#f06a5f;
  --hf-ok:#4ec98a; --hf-warn:#e0a44a; --hf-fail:#f0705f; --hf-info:#6ea8fe; --hf-unknown:#8b95a1;
  --hf-ok-bg:#12281d; --hf-warn-bg:#2c2313; --hf-fail-bg:#301a18; --hf-unknown-bg:#1c222a;
  --hf-shadow: 0 10px 32px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0;background:var(--hf-bg);color:var(--hf-fg);font:14px/1.5 var(--hf-font);
  -webkit-font-smoothing:antialiased}
a{color:var(--hf-brand)}
a:hover{color:var(--hf-brand-strong)}
:focus-visible{outline:none;box-shadow:var(--hf-focus);border-radius:var(--hf-radius-sm)}
code,.hf-mono{font-family:var(--hf-mono);font-size:12.5px}

/* ── top bar ──────────────────────────────────────────────────────────────── */
.hf-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.75rem;
  flex-wrap:wrap;padding:.55rem 1rem;background:var(--hf-surface);
  border-bottom:1px solid var(--hf-line)}
.hf-brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--hf-fg);
  text-decoration:none;font-weight:650;letter-spacing:.1px;white-space:nowrap}
.hf-brand img,.hf-brand svg{width:28px;height:28px;flex:none}
.hf-brand .hf-app{font-weight:400;color:var(--hf-dim)}
.hf-brand .hf-app::before{content:"/";margin:0 .45rem;color:var(--hf-faint)}
.hf-nav{display:flex;gap:.25rem;flex-wrap:wrap}
.hf-nav a{padding:.3rem .6rem;border-radius:var(--hf-radius-sm);color:var(--hf-dim);
  text-decoration:none;font-size:13px}
.hf-nav a:hover{background:var(--hf-surface-2);color:var(--hf-fg)}
.hf-nav a[aria-current="page"]{background:var(--hf-brand-soft);color:var(--hf-brand);font-weight:600}
.hf-spacer{flex:1}

/* ── user menu (hf-user.js renders into [data-hf-user]) ───────────────────── */
.hf-user{position:relative}
.hf-avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--hf-line);
  background:var(--hf-brand);color:var(--hf-brand-fg);display:inline-grid;place-items:center;
  font:600 13px/1 var(--hf-font);cursor:pointer;padding:0}
.hf-avatar.hf-anon{background:var(--hf-surface-2);color:var(--hf-dim)}
.hf-avatar svg{width:18px;height:18px}
.hf-avatar:hover{filter:brightness(1.07)}
.hf-signin{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;flex:none}
.hf-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:15rem;z-index:60;
  background:var(--hf-surface);border:1px solid var(--hf-line);border-radius:var(--hf-radius);
  box-shadow:var(--hf-shadow);padding:.35rem;display:none}
.hf-menu[data-open]{display:block}
.hf-menu .hf-who{padding:.5rem .6rem .6rem;border-bottom:1px solid var(--hf-line);margin-bottom:.3rem}
.hf-menu .hf-who b{display:block;font-size:14px}
.hf-menu .hf-who span{color:var(--hf-dim);font-size:12.5px}
.hf-menu a,.hf-menu button{display:flex;align-items:center;gap:.5rem;width:100%;
  padding:.45rem .6rem;border-radius:var(--hf-radius-sm);border:0;background:none;
  color:var(--hf-fg);font:13px var(--hf-font);text-decoration:none;cursor:pointer;text-align:left}
.hf-menu a:hover,.hf-menu button:hover{background:var(--hf-surface-2)}
.hf-menu .hf-danger{color:var(--hf-fail)}
.hf-menu svg{width:16px;height:16px;flex:none;opacity:.8}

/* ── building blocks ──────────────────────────────────────────────────────── */
.hf-btn{font:inherit;font-size:13px;padding:.4rem .8rem;border-radius:var(--hf-radius-sm);
  border:1px solid var(--hf-line);background:var(--hf-surface-2);color:var(--hf-fg);cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.hf-btn:hover{border-color:var(--hf-brand);color:var(--hf-brand)}
.hf-btn-primary{background:var(--hf-brand);border-color:var(--hf-brand);color:var(--hf-brand-fg)}
.hf-btn-primary:hover{background:var(--hf-brand-strong);border-color:var(--hf-brand-strong);color:var(--hf-brand-fg)}
.hf-card{background:var(--hf-surface);border:1px solid var(--hf-line);border-radius:var(--hf-radius)}
.hf-input{font:inherit;width:100%;padding:.55rem .7rem;border-radius:var(--hf-radius-sm);
  border:1px solid var(--hf-line);background:var(--hf-surface);color:var(--hf-fg)}
.hf-input:focus{border-color:var(--hf-brand);outline:none;box-shadow:var(--hf-focus)}
.hf-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.12rem .5rem;border-radius:99px;
  font-size:.72rem;font-weight:600}

/* ── centred message page (sign-in errors, signed out) ────────────────────── */
.hf-center{min-height:100vh;display:grid;place-items:center;padding:16px}
.hf-panel{width:100%;max-width:26rem;padding:1.75rem;text-align:center}
.hf-panel img{width:56px;height:56px}
.hf-panel h1{font-size:1.25rem;margin:.6rem 0 .4rem}
.hf-panel p{color:var(--hf-dim);margin:.4rem 0 1.2rem}