/* ==========================================================================
   Fractional DevRel — advocate application design system (SHARED)
   --------------------------------------------------------------------------
   The single stylesheet every advocate-app page imports. It holds the design
   TOKENS and the components shared across the directory, account, auth, admin,
   dashboard and notifications screens — everything that used to be copy-pasted
   into each mockup's inline <style>. Page-specific rules stay in that page's
   own <style> block; anything here is, by definition, used by more than one.

   Authored to BRAND_STYLE.md — read it before changing a token or adding a
   component. Rules of the system: three colours only (bone / black /
   ultramarine), Funnel Display + DM Sans, no rounded corners, no shadows,
   no gradients, no tints, 1.5px rules.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* palette — three colours, no fourth */
  --bone: #f4f4f2;
  --black: #000000;
  --ultra: #2241ff;
  /* supporting neutrals */
  --bone-deep: #ebebe7;
  --ink: #0a0a0a;
  --mute: #6b7280;
  /* structure */
  --rule: 1.5px solid var(--black);
  --hair: 1.5px solid var(--black);
  --maxw: 1280px;
}

/* ---------- reset + base ---------- */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--bone);
  color: var(--black);
  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* display face — never below 18px, always negative tracking */
h1,
h2,
h3,
h4,
.disp {
  font-family: "Funnel Display", "DM Sans", system-ui, sans-serif;
  font-weight: 800;
  margin: 0;
}
h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
h2 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 700;
}
h3 {
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
}
h4 {
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
}
a {
  color: var(--black);
}

/* focus — the ultramarine ring is the one interaction accent */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ultra);
  outline-offset: 2px;
}
::selection {
  background: var(--ultra);
  color: var(--bone);
}

/* ---------- meta label — the only caps in the system ---------- */
.meta {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  line-height: 1.4;
}
.num {
  font-family: "Funnel Display";
  font-weight: 800;
  color: var(--ultra);
  letter-spacing: -0.02em;
}

/* section marker:  01 ───────── SECTION NAME */
.marker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.marker .n {
  font-family: "DM Sans";
  font-weight: 700;
  font-size: 12px;
  color: var(--ultra);
}
.marker .r {
  width: 80px;
  height: 1px;
  background: var(--black);
  flex: none;
}
.marker .t {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
}

/* ---------- disc mark + wordmark lockup ---------- */
.lockup {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: none;
}
.disc {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ultra);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: "Funnel Display";
  font-weight: 800;
  font-size: 13px;
  color: var(--bone);
  line-height: 1;
  padding-right: 1px;
}
.wordmark {
  font-family: "Funnel Display";
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--black);
}

/* ---------- header ---------- */
header {
  border-bottom: var(--rule);
  background: var(--bone);
  padding: 20px 48px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 60;
}
header .crumb {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
}
.count {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
}
.count b {
  color: var(--black);
  font-weight: 700;
}

/* auth actions in header */
.auth-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.signin {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  padding: 10px 14px;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.signin:hover {
  color: var(--ultra);
}
.joinbtn {
  font-size: 14px;
  font-weight: 500;
  background: var(--black);
  color: var(--bone);
  text-decoration: none;
  padding: 11px 22px;
  white-space: nowrap;
  border: 1.5px solid var(--black);
}
.joinbtn:hover {
  background: var(--ultra);
  border-color: var(--ultra);
  color: var(--bone);
}
.joinshort {
  display: none;
}

/* ---------- header dropdown (e.g. Community) ---------- */
.navmenu {
  position: relative;
  display: inline-flex;
}
.navmenu-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  background: none;
  cursor: pointer;
  padding: 10px 14px;
  white-space: nowrap;
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.navmenu-btn:hover,
.navmenu-btn[aria-expanded="true"] {
  color: var(--ultra);
}
.navmenu-btn .caret {
  font-size: 10px;
  line-height: 1;
}
.navmenu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 190px;
  background: var(--bone);
  border: var(--rule);
  display: flex;
  flex-direction: column;
  z-index: 61;
}
.navmenu-list[hidden] {
  display: none;
}
.navmenu-list a {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  text-decoration: none;
  padding: 11px 16px;
  white-space: nowrap;
}
.navmenu-list a:hover {
  background: var(--black);
  color: var(--bone);
}

/* ---------- buttons ---------- */
.btn {
  font-family: "DM Sans";
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--black);
  padding: 13px 22px;
  cursor: pointer;
  line-height: 1.2;
}
.btn:hover {
  background: var(--black);
  color: var(--bone);
}
.btn.solid {
  background: var(--black);
  color: var(--bone);
}
.btn.solid:hover {
  background: var(--ultra);
  border-color: var(--ultra);
}
.btn.full {
  width: 100%;
  text-align: center;
  padding: 16px;
}
.btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn.danger {
  border-color: var(--black);
  color: var(--black);
}
.btn.danger:hover {
  background: var(--black);
  color: var(--bone);
}
.btn.solid.danger {
  background: var(--black);
  color: var(--bone);
}
.btn.solid.danger:hover {
  background: var(--ultra);
  border-color: var(--ultra);
}

/* ---------- forms ---------- */
label.f {
  display: block;
  margin-bottom: 20px;
}
label.f .lb {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  margin-bottom: 8px;
}
label.f .lb a {
  font-size: 12px;
  color: var(--ultra);
  text-transform: none;
  letter-spacing: 0;
}
.inp {
  width: 100%;
  border: 1.5px solid var(--black);
  background: transparent;
  padding: 15px 18px;
  font-family: "DM Sans";
  font-size: 15px;
  color: var(--black);
}
.inp:focus {
  outline: none;
  border-color: var(--ultra);
}
.inp::placeholder {
  color: var(--mute);
}
textarea.inp {
  resize: vertical;
  min-height: 92px;
  line-height: 1.6;
}
select.inp {
  cursor: pointer;
}
.help {
  font-size: 13px;
  color: var(--mute);
  margin-top: 7px;
  line-height: 1.55;
}
.err {
  font-size: 13px;
  color: var(--ultra);
  font-weight: 500;
  margin-top: 7px;
  display: none;
}
.inp.bad {
  border-color: var(--ultra);
}
.inp.bad + .err {
  display: block;
}
.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  margin-bottom: 14px;
}
.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--ultra);
  margin: 3px 0 0;
  flex: none;
  cursor: pointer;
}
.check a {
  color: var(--ultra);
}

/* ---------- tags / pills — sharp, not rounded ---------- */
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid var(--black);
  padding: 3px 9px;
  margin: 0 5px 5px 0;
  color: var(--black);
}
.tag.q {
  border-color: var(--mute);
  color: var(--mute);
}

/* champion badge — ultramarine, the accent's job */
.champ {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--ultra);
  color: var(--ultra);
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  margin: 0 5px 5px 0;
  white-space: nowrap;
}
.champ svg {
  width: 9px;
  height: 9px;
  flex: none;
}
.champ .kind {
  color: var(--mute);
}

/* availability */
.avail {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.avail.open {
  color: var(--ultra);
}
.avail.soon {
  color: var(--black);
}
.avail.full {
  color: var(--mute);
}
.dotline::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: currentColor;
  margin-right: 7px;
  vertical-align: 1px;
}

/* social icon links — 1.5px stroke, no fill, sharp */
.socials {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}
.soc {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  text-decoration: none;
}
.soc svg {
  width: 13px;
  height: 13px;
}
.soc:hover {
  background: var(--ultra);
  border-color: var(--ultra);
  color: var(--bone);
}
.socials.lg .soc {
  width: 34px;
  height: 34px;
}
.socials.lg .soc svg {
  width: 15px;
  height: 15px;
}

/* ---------- utility ---------- */
.hidden {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---------- signed-in header chrome (shared) ----------------------------- */
/* account.html/notifications.html group their header links in .whoami, which had
   no layout rule — the bell + avatar stacked vertically. Lay it out like
   .auth-actions does. */
.whoami {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Account chip: image layered over centred initials, so a missing or broken
   avatar falls back to initials instead of an empty box. Pages that define their
   own .avatar (account, notifications) still win — their <style> loads after this. */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1.5px solid var(--black);
  background: var(--ultra);
  overflow: hidden;
  font-family: "Funnel Display";
  font-weight: 800;
  font-size: 13px;
  color: var(--bone);
  line-height: 1;
}
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-link {
  display: inline-flex;
  text-decoration: none;
}