/* ==========================================================================
   BugRater — "Ratings Agency" design system
   Light by default. Institutional. The scorecard is the signature element.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800; font-display: swap; font-style: normal;
}

:root {
  /* Paper & ink */
  --paper:      #FBFBF8;
  --paper-2:    #F4F3ED;   /* sunken panels */
  --card:       #FFFFFF;
  --ink:        #161D2B;   /* primary text — deep ink navy */
  --ink-2:      #4A5265;   /* secondary text */
  --ink-3:      #7C8291;   /* muted / captions */
  --hair:       #E4E1D8;   /* hairline rules */
  --hair-2:     #D6D2C6;   /* stronger rule */

  /* Accents */
  --gold:       #A9833B;   /* gold-leaf — grade frames, marks */
  --gold-soft:  #F0E7D2;
  --oxblood:    #8C2A2A;   /* concern / negative */
  --oxblood-soft:#F3E4E2;
  --green:      #2F6B4F;   /* strength / positive */
  --green-soft: #E2EFE7;
  --navy-link:  #2B4A78;   /* links */

  /* Grade tiers */
  --tier-a: #2F6B4F;
  --tier-b: #3E6B86;
  --tier-c: #A9833B;
  --tier-d: #B4622A;
  --tier-f: #8C2A2A;
  --tier-nr:#7C8291;

  /* Type */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1080px;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(20,29,43,.04), 0 8px 24px -12px rgba(20,29,43,.10);
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex; flex-direction: column; min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--navy-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 560; line-height: 1.12; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--navy-link); outline-offset: 2px; border-radius: 2px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* grade-tier color hooks — set --tier so bordered grade chips + meters color themselves */
.t-a { --tier: var(--tier-a); }
.t-b { --tier: var(--tier-b); }
.t-c { --tier: var(--tier-c); }
.t-d { --tier: var(--tier-d); }
.t-f { --tier: var(--tier-f); }
.t-nr{ --tier: var(--tier-nr); }

/* --- layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.stack > * + * { margin-top: var(--gap, 16px); }
main { flex: 1; }
.section { padding: 56px 0; }
.section--tight { padding: 36px 0; }
.divider { border: 0; border-top: 1px solid var(--hair); }

/* eyebrow / label — the institutional tell */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}

/* --- header --------------------------------------------------------------- */
/* The masthead is the one element that runs the full width of the screen.
   Brand in the left corner, actions in the right, and the gutter opens up as
   the viewport does — so a wide display reads as composed rather than as a
   centred strip floating in space. Page content stays in its readable column. */
:root { --edge: clamp(20px, 3.6vw, 60px); }

.masthead { border-bottom: 1px solid var(--hair-2); background: var(--paper); }
.masthead__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 32px;
  width: 100%; max-width: none; margin: 0;
  padding: 0 var(--edge);
}
.brand { display: flex; align-items: baseline; gap: 9px; }
.brand__mark {
  font-family: var(--display); font-weight: 640; font-size: 24px;
  letter-spacing: -.02em; color: var(--ink);
}
.brand__mark:hover { text-decoration: none; }
.brand__tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 2px; padding: 1px 5px;
}
.nav { display: flex; align-items: center; gap: 28px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
/* Account controls sit closer together and behind a hairline, so the bell reads
   as part of "you" rather than as a stray icon dropped between two words. */
.nav__acct {
  display: flex; align-items: center; gap: 18px;
  padding-left: 28px; border-left: 1px solid var(--hair-2);
}
.nav a { color: var(--ink-2); font-size: 15px; font-weight: 500; transition: color .14s ease; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav__me { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__cta {
  background: var(--ink); color: var(--paper) !important;
  padding: 10px 18px; border-radius: var(--radius); font-weight: 550 !important;
  transition: background .14s ease;
}
.nav__cta:hover { background: #0d1420; }

.subbar {
  background: var(--paper-2); border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  letter-spacing: .04em;
}
/* Tracks the masthead's gutter so the two bars share one left edge. */
.subbar__in {
  display: flex; align-items: center; gap: 8px; height: 36px;
  width: 100%; padding: 0 var(--edge);
}
.subbar strong { color: var(--gold); font-weight: 600; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius);
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-size: 14.5px; font-weight: 550; transition: background .12s, border-color .12s;
}
.btn:hover { background: #0d1420; text-decoration: none; color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-3); }
.btn--gold { background: var(--gold); border-color: var(--gold); }
.btn--gold:hover { background: #96722f; }
.btn--sm { padding: 7px 13px; font-size: 13px; }
.btn--danger { background: var(--oxblood); border-color: var(--oxblood); }
.btn--danger:hover { background: #741f1f; }

/* --- cards ---------------------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 22px;
}
.card--pad-lg { padding: 28px; }
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- hero ----------------------------------------------------------------- */
.hero { padding: 72px 0 40px; }
.hero__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(38px, 6vw, 68px); line-height: 1.02; letter-spacing: -.025em;
  max-width: 15ch;
}
.hero__title em { font-style: italic; color: var(--gold); }
.hero__lede { font-size: 19px; color: var(--ink-2); max-width: 54ch; margin-top: 20px; line-height: 1.5; }
.hero__actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

/* --- search bar (hero) ---------------------------------------------------- */
.searchbar { display: flex; margin-top: 28px; max-width: 560px; border: 1px solid var(--hair-2); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.searchbar input { flex: 1; border: 0; padding: 14px 16px; font: inherit; background: transparent; color: var(--ink); }
.searchbar input:focus { outline: none; }
.searchbar button { border: 0; background: var(--ink); color: var(--paper); padding: 0 22px; font-weight: 550; }

/* ==========================================================================
   SCORECARD — the signature component
   ========================================================================== */
.scorecard { border: 1px solid var(--hair-2); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.scorecard__head { display: flex; gap: 14px; padding: 20px; border-bottom: 1px solid var(--hair); align-items: center; flex-wrap: wrap; }

/* engraved letter-grade block */
.gradebox {
  flex: 0 0 auto; width: 92px; height: 92px;
  display: grid; place-items: center; position: relative;
  border: 2px solid var(--tier); border-radius: 6px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.6), rgba(0,0,0,.02)),
    var(--paper);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 6px rgba(20,29,43,.05);
}
.gradebox__letter {
  font-family: var(--display); font-weight: 620;
  font-size: 44px; line-height: 1; color: var(--tier);
  letter-spacing: -.03em;
}
.gradebox__sub { position: absolute; bottom: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.gradebox--a { --tier: var(--tier-a); }
.gradebox--b { --tier: var(--tier-b); }
.gradebox--c { --tier: var(--tier-c); }
.gradebox--d { --tier: var(--tier-d); }
.gradebox--f { --tier: var(--tier-f); }
.gradebox--nr { --tier: var(--tier-nr); }
.gradebox--nr .gradebox__letter { font-size: 30px; }

.scorecard__ident { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1 1 150px; }
.scorecard__name { font-size: 21px; font-weight: 580; letter-spacing: -.015em; line-height: 1.2; overflow-wrap: normal; word-break: normal; hyphens: none; }
.scorecard__meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; color: var(--ink-3); font-size: 13px; }
.scorecard__score { text-align: right; align-self: center; flex: 0 0 auto; margin-left: auto; }
.scorecard__score--nr { text-align: left; margin-left: 0; flex: 1 0 100%; padding-top: 2px; }
.scorecard__score--nr b, .scorecard__score--nr span { display: inline; font-size: 11px; font-family: var(--mono); letter-spacing: .06em; color: var(--ink-3); text-transform: none; font-weight: 500; }
.scorecard__score b { font-family: var(--mono); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.scorecard__score span { display: block; font-size: 10px; color: var(--ink-3); font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* data rows with dotted leaders + micro bar meters */
.metrics { padding: 8px 24px 20px; }
.metric { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--hair); gap: 12px; }
.metric:last-child { border-bottom: 0; }
.metric__label { display: flex; align-items: baseline; gap: 8px; color: var(--ink-2); font-size: 14px; overflow: hidden; }
.metric__label::after { content: ""; flex: 1; border-bottom: 1px dotted var(--hair-2); transform: translateY(-3px); min-width: 20px; }
.metric__val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
.meter { grid-column: 1 / -1; height: 4px; background: var(--paper-2); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.meter__fill { height: 100%; background: var(--tier, var(--gold)); border-radius: 2px; }

/* reported practices */
.practices { padding: 20px 24px; border-top: 1px solid var(--hair); }
.practices__title { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.practice { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.practice__mark { font-family: var(--mono); font-weight: 700; width: 16px; text-align: center; }
.practice--good .practice__mark { color: var(--green); }
.practice--bad  .practice__mark { color: var(--oxblood); }
.practice__count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* --- badges --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; padding: 3px 8px; border-radius: 3px;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--hair);
}
.badge--verified { background: var(--green-soft); color: var(--green); border-color: transparent; }
.badge--platform { background: var(--paper-2); color: var(--ink-2); }
.badge--pos { background: var(--green-soft); color: var(--green); border-color: transparent; }
.badge--neu { background: var(--gold-soft); color: var(--gold); border-color: transparent; }
.badge--neg { background: var(--oxblood-soft); color: var(--oxblood); border-color: transparent; }

/* --- stars ---------------------------------------------------------------- */
.stars { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; letter-spacing: 1px; }
.stars i { font-style: normal; color: var(--hair-2); }
.stars i.on { color: var(--gold); }

/* --- program list rows ---------------------------------------------------- */
.plist { border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.prow { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--hair); }
.prow:last-child { border-bottom: 0; }
.prow:hover { background: var(--paper-2); text-decoration: none; }
.prow__grade { width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid var(--tier); border-radius: 5px; font-family: var(--display); font-weight: 620; font-size: 21px; color: var(--tier); }
.prow__name { font-weight: 560; font-size: 16.5px; color: var(--ink); letter-spacing: -.01em; }
.prow__meta { color: var(--ink-3); font-size: 13px; margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prow__num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.prow__num b { font-size: 17px; color: var(--ink); }
.prow__num span { display: block; font-size: 11px; color: var(--ink-3); }

/* --- review card ---------------------------------------------------------- */
.review { border: 1px solid var(--hair); border-radius: var(--radius); background: var(--card); padding: 20px; }
.review__top { display: flex; align-items: flex-start; gap: 12px; }
.review__title { font-family: var(--display); font-size: 18px; font-weight: 560; letter-spacing: -.01em; }
.review__body { color: var(--ink-2); margin-top: 8px; line-height: 1.6; white-space: pre-line; }
.review__facts { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 14px; }
.fact { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--hair); border-radius: 3px; padding: 3px 8px; }
.fact b { color: var(--ink); font-weight: 600; }
.review__foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink-3); }
.review__author { display: flex; align-items: center; gap: 7px; }
.review__author a { color: var(--ink-2); font-weight: 500; }
.helpful { margin-left: auto; }
.helpful button { background: transparent; border: 1px solid var(--hair-2); border-radius: 3px; padding: 4px 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.helpful button:hover { border-color: var(--ink-3); color: var(--ink); }

/* --- forms ---------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field > label { display: block; font-weight: 550; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.field .hint { color: var(--ink-3); font-size: 12.5px; margin-top: 5px; }
.req { color: var(--oxblood); }
.input, .select, .textarea {
  width: 100%; padding: 11px 13px; font: inherit;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--hair-2); border-radius: var(--radius);
  transition: border-color .12s, box-shadow .12s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--navy-link); box-shadow: 0 0 0 3px rgba(43,74,120,.12); }
.textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }

/* custom-styled select: drop the OS chrome, draw our own chevron */
.select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234A5265' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
}
.select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B4A78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* clean number inputs — drop the clunky native spinner */
.input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.input[type=number]::-webkit-outer-spin-button,
.input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fieldset { border: 1px solid var(--hair); border-radius: var(--radius); padding: 18px; }
.fieldset > legend { padding: 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* star input — natural left-to-right order; fill driven by :checked (+ JS hover) */
.starinput { display: inline-flex; gap: 2px; }
.starinput label { cursor: pointer; line-height: 1; display: inline-flex; }
.starinput input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starinput span { font-size: 30px; color: var(--hair-2); padding: 3px; transition: color .06s; }
/* checked: this star and every earlier one (natural order via :has) */
.starinput label:has(input:checked) span,
.starinput label:has(~ label input:checked) span { color: var(--gold); }
/* JS hover preview overrides the checked fill while pointing */
.starinput.hovering label span { color: var(--hair-2) !important; }
.starinput.hovering label.on span { color: var(--gold) !important; }
.starinput input:focus-visible + span { outline: 2px solid var(--navy-link); outline-offset: 1px; border-radius: 3px; }

/* checkbox grid */
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); padding: 5px 0; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); }

/* segmented radio (yes/partial/no) */
.segmented { display: inline-flex; border: 1px solid var(--hair-2); border-radius: var(--radius); overflow: hidden; }
.segmented label { padding: 9px 18px; font-size: 14px; color: var(--ink-2); cursor: pointer; border-right: 1px solid var(--hair); transition: background .12s, color .12s; }
.segmented label:last-child { border-right: 0; }
.segmented label:hover { background: var(--paper-2); color: var(--ink); }
.segmented input { position: absolute; opacity: 0; }
.segmented input:checked + label,
.segmented label:has(input:checked) { background: var(--ink); color: var(--paper); }

/* --- flash ---------------------------------------------------------------- */
.flashes { position: sticky; top: 0; z-index: 40; }
.flash { padding: 12px 24px; font-size: 14px; border-bottom: 1px solid; }
.flash--success { background: var(--green-soft); color: var(--green); border-color: #cfe3d6; }
.flash--error   { background: var(--oxblood-soft); color: var(--oxblood); border-color: #ecd2cf; }
.flash--info    { background: var(--gold-soft); color: #7a5f24; border-color: #e6d6b3; }
.errbox { background: var(--oxblood-soft); border: 1px solid #ecd2cf; color: var(--oxblood); padding: 12px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 18px; }

/* --- tables (rankings / stats) ------------------------------------------- */
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.table th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--hair-2); background: var(--paper-2); }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--paper-2); }
.table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.rank { font-family: var(--mono); color: var(--ink-3); font-size: 13px; }

/* --- stat tiles (stats page) --------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.tile { background: var(--card); padding: 22px; }
.tile__num { font-family: var(--display); font-size: 40px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile__label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

/* --- section headers ------------------------------------------------------ */
.shead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.shead h2 { font-size: 24px; font-weight: 580; letter-spacing: -.015em; }
.shead a { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--ink-2); }

/* --- researcher profile --------------------------------------------------- */
.pf-head { display: flex; gap: 22px; align-items: flex-start; }
.avatar {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 32px; letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px -6px rgba(20,29,43,.35);
}
.avatar--sm { width: 40px; height: 40px; font-size: 16px; }
.pf-id { flex: 1; min-width: 0; }
.pf-name { font-size: 32px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-sub { color: var(--ink-3); font-family: var(--mono); font-size: 13px; margin-top: 4px; }
.pf-sub a { color: var(--ink-2); }
.pf-bio { color: var(--ink-2); margin-top: 12px; max-width: 60ch; line-height: 1.6; }

.achievements { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ach {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 550; padding: 5px 11px; border-radius: 100px;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--hair);
}
.ach i { font-style: normal; font-size: 12px; }
.ach--good { background: var(--green-soft); color: var(--green); border-color: transparent; }

/* reputation panel */
.rep { display: flex; align-items: center; gap: 16px; }
.rep__num { font-family: var(--mono); font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; }
.rep__num small { font-size: 15px; color: var(--ink-3); }
.rep__tier { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.rep__bar { flex: 1; }

/* verified-platform link chips */
.plat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--hair-2); border-radius: var(--radius); background: var(--card); font-size: 14px; color: var(--ink); transition: border-color .12s; }
.plat:hover { border-color: var(--ink-3); text-decoration: none; }
.plat b { font-weight: 600; }
.plat .chk { color: var(--green); }
.plat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* split sentiment bar */
.split { display: flex; height: 10px; border-radius: 100px; overflow: hidden; background: var(--paper-2); }
.split i { display: block; height: 100%; }
.split .pos { background: var(--green); }
.split .neu { background: var(--neutral-tone); }
.split .neg { background: var(--oxblood); }

/* --- linked-account verification + import ---------------------------------- */
.linkcard { position: relative; }
.poll-status { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); position: relative; flex: 0 0 auto; }
.pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--gold); animation: pulsering 1.4s ease-out infinite; }
@keyframes pulsering { 0% { transform: scale(.6); opacity: .8 } 100% { transform: scale(1.8); opacity: 0 } }
.tokenbox { font-family: var(--mono); font-size: 13px; background: var(--paper-2); border: 1px solid var(--hair); border-radius: 4px; padding: 8px 12px; user-select: all; display: inline-flex; align-items: center; gap: 8px; }
.copybtn { background: none; border: 1px solid var(--hair-2); border-radius: 3px; font-family: var(--mono); font-size: 11px; padding: 2px 7px; color: var(--ink-2); cursor: pointer; }

/* modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(20,29,43,.55); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: 20px; animation: fade .2s ease; }
.modal-overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal { background: var(--card); border: 1px solid var(--hair-2); border-radius: 10px; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; box-shadow: 0 24px 64px -20px rgba(20,29,43,.5); animation: pop .25s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { transform: translateY(12px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }
.modal__head { padding: 24px 26px 16px; border-bottom: 1px solid var(--hair); }
.modal__body { padding: 22px 26px; }
.modal__foot { padding: 16px 26px 24px; display: flex; gap: 10px; justify-content: flex-end; }
.modal__x { position: absolute; }

/* verified check burst */
.checkburst { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-size: 34px; margin: 0 auto 14px; animation: pop .3s cubic-bezier(.2,.9,.3,1.4); }

/* extraction steps */
.xsteps { list-style: none; padding: 0; margin: 8px 0 0; }
.xstep { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 14.5px; color: var(--ink-3); transition: color .25s; }
.xstep__ic { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--hair-2); flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; }
.xstep.active { color: var(--ink); }
.xstep.active .xstep__ic { border-color: var(--gold); border-top-color: transparent; animation: spin .7s linear infinite; }
.xstep.done { color: var(--ink); }
.xstep.done .xstep__ic { border-color: var(--green); background: var(--green); color: #fff; animation: none; }
@keyframes spin { to { transform: rotate(360deg) } }

/* extracted stat grid */
.xstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.xstat { background: var(--card); padding: 14px; text-align: center; }
.xstat b { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; color: var(--ink); display: block; }
.xstat span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ximport { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.ximport:last-child { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .pulse::after, .xstep.active .xstep__ic { animation: none; }
}

/* --- submit nudge --------------------------------------------------------- */
.nudge { border: 1px solid var(--gold); background: var(--gold-soft); border-radius: var(--radius); padding: 16px 18px; color: #6f571f; }
.nudge strong { color: #6f571f; }
.nudge ul { margin: 8px 0 0; padding-left: 20px; columns: 2; }
.nudge li { font-size: 14px; margin: 2px 0; }
.nudge__actions { display: flex; gap: 10px; margin-top: 14px; }
@media (max-width: 560px) { .nudge ul { columns: 1; } }

/* --- notification bell + list --------------------------------------------- */
/* Given its own square so it has a real target and optical weight matching the
   text links either side of it, instead of sitting on the text baseline. */
.nav__bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: 0 -4px; border-radius: var(--radius);
  color: var(--ink-3); transition: color .14s ease, background .14s ease;
}
.nav__bell:hover { color: var(--ink); background: var(--paper-2); }
.nav__badge {
  position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--oxblood); color: #fff; border-radius: 100px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--hair); color: var(--ink); }
.notif:last-child { border-bottom: 0; }
a.notif:hover { background: var(--paper-2); text-decoration: none; }
.notif--unread { background: var(--gold-soft); }
a.notif--unread:hover { background: #f0e4c8; }
.notif__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 6px; }
.notif__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif__msg { font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.notif__time { font-size: 11.5px; color: var(--ink-3); letter-spacing: .03em; }

/* --- "add a full write-up" callout ---------------------------------------- */
.writeup-cta { margin-top: 4px; border: 1px dashed var(--gold); border-radius: var(--radius); background: var(--gold-soft); }
.writeup-cta > summary { cursor: pointer; list-style: none; padding: 12px 16px; font-weight: 600; color: #7a5f24; display: flex; align-items: baseline; gap: 8px; }
.writeup-cta > summary::-webkit-details-marker { display: none; }
.writeup-cta > summary span { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.writeup-cta[open] > summary { border-bottom: 1px solid #e6d6b3; }
.writeup-cta > div { padding: 0 16px 16px; }

/* published write-up on the review page */
.writeup-body { color: var(--ink-2); line-height: 1.75; white-space: pre-line; font-size: 15.5px; }
.writeup-body { max-width: 68ch; }

/* --- per-report submission blocks ----------------------------------------- */
.subblock { border: 1px solid var(--hair-2); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; background: var(--paper); }
.subblock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.subblock__n { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.subblock__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.subblock__public { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.subblock__public input { width: 15px; height: 15px; accent-color: var(--green); }
.submission-item { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.submission-item:last-child { border-bottom: 0; }
@media (max-width: 560px) { .subblock__grid { grid-template-columns: 1fr; } }

/* --- "add your program" callout ------------------------------------------- */
.addcta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 20px; padding: 20px 22px;
  border: 1px dashed var(--gold); border-radius: var(--radius); background: var(--gold-soft);
}
.addcta__title { font-family: var(--display); font-size: 19px; font-weight: 560; color: var(--ink); }
.addcta__sub { color: #6f571f; font-size: 14.5px; margin-top: 4px; max-width: 60ch; line-height: 1.5; }
@media (max-width: 560px) { .addcta { padding: 16px; } .addcta .btn { width: 100%; justify-content: center; } }

/* --- danger zone (GitHub-style) ------------------------------------------- */
.dangerzone { border: 1.5px solid var(--oxblood); border-radius: var(--radius); overflow: hidden; }
.dangerzone__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oxblood); font-weight: 600; padding: 12px 20px;
  background: var(--oxblood-soft); border-bottom: 1px solid var(--oxblood);
}
.dangerzone__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 20px; background: var(--card); }

/* --- footer --------------------------------------------------------------- */
.foot { border-top: 1px solid var(--hair-2); background: var(--paper-2); margin-top: 56px; }
/* Same gutter as the masthead, so the page's two bookends share a left edge.
   Columns rather than one flex row: on a wide screen space-between between two
   children strands the entire middle of the footer. */
.foot__in {
  display: grid; gap: 28px 40px; padding: 44px var(--edge) 40px;
  grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(120px, .8fr)) minmax(200px, 1.2fr);
  align-items: start;
}
.foot__brand { font-family: var(--display); font-weight: 620; font-size: 19px; }
.foot p { color: var(--ink-3); font-size: 13px; margin-top: 5px; max-width: 34ch; }
.foot__h {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.foot__col { display: flex; flex-direction: column; gap: 7px; }
.foot__col a { color: var(--ink-2); font-size: 13.5px; }
.foot__col a:hover { color: var(--ink); }
.foot__note { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); line-height: 1.65; }

/* --- misc ----------------------------------------------------------------- */
.breadcrumb { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: 18px; letter-spacing: .03em; }
.breadcrumb a { color: var(--ink-2); }
.prose { max-width: 68ch; }
.prose p { color: var(--ink-2); margin-top: 14px; line-height: 1.7; }
.prose h2 { margin-top: 32px; font-size: 22px; }
.empty { text-align: center; padding: 48px 24px; color: var(--ink-3); border: 1px dashed var(--hair-2); border-radius: var(--radius); }
.two-col { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.sticky { position: sticky; top: 24px; }

/* --- wide content: scroll inside its own box, never break the page -------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-wrap .table { margin: 0; }
/* No-JS fallback: let the table itself scroll on small screens. */
@media (max-width: 700px) {
  .table-wrap > .table { min-width: 520px; }
  .table:not(.table-wrap > .table) { display: block; overflow-x: auto; white-space: nowrap; }
}
/* Long unbreakable strings (tokens, URLs, handles) must never push the layout. */
body { overflow-wrap: break-word; }
.tokenbox, .plat, code, .mono a { overflow-wrap: anywhere; }

/* Leaderboards: real rows on desktop, readable stacked cards on phones. */
@media (max-width: 620px) {
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack { min-width: 0 !important; white-space: normal; }
  .table--stack thead { display: none; }
  .table--stack tbody { counter-reset: rank; }
  .table--stack tr { counter-increment: rank; position: relative; padding: 16px 16px 12px 46px; border-bottom: 1px solid var(--hair); }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack tr::before {
    content: counter(rank); position: absolute; left: 14px; top: 17px;
    font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-3);
  }
  .table--stack td { padding: 0; border: 0; text-align: left !important; }
  .table--stack .cell-rank { display: none; }
  .table--stack td[data-label] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 6px 0 0; font-size: 14px;
  }
  .table--stack td[data-label]::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3);
  }
}

/* --- mobile menu ---------------------------------------------------------- */
.mnav { display: none; position: relative; }
.mnav > summary { list-style: none; cursor: pointer; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav__btn {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--hair-2); border-radius: var(--radius); background: var(--card);
}
.mnav__bars, .mnav__bars::before, .mnav__bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; content: "";
}
.mnav__bars { position: relative; }
.mnav__bars::before { position: absolute; top: -6px; }
.mnav__bars::after  { position: absolute; top: 6px; }
.mnav[open] .mnav__bars { background: transparent; }
.mnav[open] .mnav__bars::before { top: 0; transform: rotate(45deg); }
.mnav[open] .mnav__bars::after  { top: 0; transform: rotate(-45deg); }
.mnav__dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--oxblood); }
.mnav__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 232px; padding: 8px; background: var(--card);
  border: 1px solid var(--hair-2); border-radius: 8px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.mnav__panel a, .mnav__panel button {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border-radius: var(--radius);
  font-size: 15px; color: var(--ink); text-align: left;
  background: none; border: 0; width: 100%; font-family: inherit;
}
.mnav__panel a:hover, .mnav__panel button:hover { background: var(--paper-2); text-decoration: none; }
.mnav__sep { height: 1px; background: var(--hair); margin: 6px 4px; }
.mnav__cta { justify-content: center; background: var(--ink) !important; color: var(--paper) !important; font-weight: 550; margin-top: 6px; }
.nav__badge--inline { position: static; margin-left: auto; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .foot__in { grid-template-columns: minmax(200px,1.4fr) repeat(3, minmax(110px,1fr)); }
  .foot__note { grid-column: 1 / -1; max-width: 70ch; }
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .two-col .sticky { position: static; } /* don't pin the scorecard over content */
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .nav { display: none; }
  .mnav { display: block; }
  .masthead__bar { gap: 12px; height: 68px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .scorecard__head { flex-wrap: wrap; }
  .scorecard__score { margin-left: 0; text-align: left; }
  /* keep grade · name · score on one compact row */
  .prow { grid-template-columns: 42px 1fr auto; gap: 12px; padding: 14px 16px; }
  .prow__grade { width: 40px; height: 40px; font-size: 18px; }
  .prow__name { font-size: 15.5px; }
  .prow__meta { font-size: 12.5px; gap: 6px; }
  .prow__num b { font-size: 16px; }
  .prow__num span { font-size: 10.5px; }

  /* tighter vertical rhythm so content isn't mostly whitespace */
  .section { padding: 36px 0; }
  .section--tight { padding: 24px 0; }
  .hero { padding: 40px 0 28px; }
  .hero__lede { font-size: 17px; margin-top: 16px; }
  .hero__actions { margin-top: 22px; }
  .hero__actions .btn { flex: 1; justify-content: center; }
  .card, .card--pad-lg { padding: 18px; }
  .shead h2 { font-size: 21px; }
  .tile { padding: 16px; }
  .tile__num { font-size: 30px; }
  .masthead__bar { height: 62px; }
  .brand__mark { font-size: 20px; }
  .foot__in { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding: 30px var(--edge); }
  .foot__brandcol, .foot__note { grid-column: 1 / -1; }

  /* full-width, comfortable tap targets on stacked forms */
  .field .btn, form > .btn { width: 100%; justify-content: center; }
  .segmented { width: 100%; }
  .segmented label { flex: 1; text-align: center; padding: 11px 10px; }
  .searchbar { flex-wrap: wrap; }
  .searchbar input { min-width: 0; flex: 1 1 100%; }
  .searchbar button { width: 100%; padding: 12px; }
  .modal { max-height: 92vh; border-radius: 8px; }
  .modal__head, .modal__body { padding-left: 18px; padding-right: 18px; }
  .modal__foot { padding: 14px 18px 20px; flex-wrap: wrap; }
  .modal__foot .btn { flex: 1; justify-content: center; }
}

/* Skill/segmented controls with many options must wrap, never overflow. */
@media (max-width: 700px) {
  .segmented { flex-wrap: wrap; }
  .segmented label { border-right: 0; border-bottom: 1px solid var(--hair); }
}

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

/* ==========================================================================
   UX POLISH — skeleton loaders, nav progress, pending states, micro-polish
   Appended section. Everything here is progressive enhancement: the site
   renders and works with JS disabled. Every animation honours
   prefers-reduced-motion (falling back to a static state, never a jarring one).
   ========================================================================== */

/* --- skeleton primitives -------------------------------------------------- */
/* A shimmer block in the paper palette (paper-2 base, hairline sweep). */
.skel {
  position: relative; overflow: hidden;
  background: var(--paper-2);
  border-radius: 3px;
  /* subtle paper-2 -> hair gradient underlay so a static fallback still reads */
  background-image: linear-gradient(100deg, var(--paper-2) 0%, var(--hair) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  background-position: 0 0;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(214,210,198,.55), transparent);
  animation: skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }

/* text/title/avatar/chip variants — explicit display so width/height always
   apply, regardless of whether the node is a flex/grid item or plain inline. */
.skel--text   { display: block; height: .72em; margin: .35em 0; }
.skel--text.is-short { width: 60%; }
.skel--title  { display: block; height: 1.1em; width: 55%; border-radius: 3px; }
.skel--avatar { display: inline-block; width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; }
.skel--chip   { display: inline-block; height: 22px; width: 68px; border-radius: 3px; vertical-align: middle; }

/* composed patterns — sized to visually match .card / .prow / .review */
.skel-card {
  background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 22px;
}
.skel-row {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 16px;
  align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--hair);
}
.skel-row:last-child { border-bottom: 0; }
.skel-row__grade { width: 46px; height: 46px; border-radius: 5px; }
.skel-row__body  { min-width: 0; }
.skel-row__num   { width: 48px; height: 34px; border-radius: 3px; }
.skel-review {
  border: 1px solid var(--hair); border-radius: var(--radius);
  background: var(--card); padding: 20px;
}
@media (max-width: 560px) {
  .skel-row { grid-template-columns: 42px 1fr auto; gap: 12px; padding: 14px 16px; }
  .skel-row__grade { width: 40px; height: 40px; }
}

/* reduced motion: hold a static tint, drop the moving sweep. */
@media (prefers-reduced-motion: reduce) {
  .skel { background-image: none; background: var(--paper-2); }
  .skel::after { display: none; }
}

/* --- import-modal skeletons (stat grid + program list) -------------------- */
.xstat .skel--text { height: 20px; width: 60%; margin: 2px auto; }
.xstat .skel--text.is-short { height: 9px; width: 42%; }
.ximport .skel--text { height: 15px; }

/* --- global navigation progress bar --------------------------------------- */
.navprog {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(169,131,59,.5), 0 0 3px rgba(169,131,59,.7);
  z-index: 200; pointer-events: none; opacity: 0;
  transition: width .18s ease, opacity .35s ease;
}
.navprog.is-active { opacity: 1; }
.navprog.is-done   { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  /* no trickle animation; JS shows a static bar instead (see app.js) */
  .navprog { transition: opacity .01s; box-shadow: none; }
}

/* --- button pending state (inline spinner, width held by JS) -------------- */
.btn.is-loading {
  color: transparent !important; pointer-events: none; position: relative;
}
.btn.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 15px; height: 15px; margin: -8px 0 0 -8px; box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite;
}
/* ghost/light buttons: ink spinner so it's visible on a pale face */
.btn--ghost.is-loading::after,
.copybtn.is-loading::after {
  border-color: rgba(20,29,43,.2); border-top-color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after { animation: none; }
}

/* inline helpful-vote spinner (sits where the count was) */
.helpful .skel--inline {
  display: inline-block; width: 1.4em; height: .8em;
  vertical-align: middle; border-radius: 3px;
}

/* verify-poll in-flight: a skeleton stands in for the status text */
.poll-skel {
  display: inline-block; height: .8em; width: 180px;
  border-radius: 3px; vertical-align: middle;
}

/* --- results list swapped for skeletons while a filter reloads ------------ */
.is-skeleton-swapping { position: relative; }

/* --- micro-polish --------------------------------------------------------- */
/* smooth press on buttons (movement only when motion is welcome) */
@media (prefers-reduced-motion: no-preference) {
  .btn:active:not(.is-loading) { transform: translateY(1px); }
}
/* gentle fade-in for flash banners */
.flash { animation: flash-in .3s ease both; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }
/* in-page anchors clear the sticky masthead + subbar */
h1, h2, h3, h4, [id] { scroll-margin-top: 90px; }

/* ==========================================================================
   SETTINGS AREA — sectioned account settings (sidebar + panel)
   HackerOne's information structure, Bugcrowd's breathing room, our palette.
   ========================================================================== */
.settings { display: grid; grid-template-columns: 232px 1fr; gap: 32px; align-items: start; }
.settings__nav { position: sticky; top: 24px; display: flex; flex-direction: column; }
.settings__group {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 10px 6px;
}
.settings__group:first-child { padding-top: 0; }
.settings__link {
  padding: 9px 12px; border-radius: var(--radius); font-size: 14.5px; color: var(--ink-2);
  border-left: 2px solid transparent; transition: background .12s, color .12s;
}
.settings__link:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.settings__link.is-active {
  background: var(--paper-2); color: var(--ink); font-weight: 550;
  border-left-color: var(--gold);
}
.settings__sep { height: 1px; background: var(--hair); margin: 12px 10px; }

/* content panels */
.spanel { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); }
.spanel + .spanel { margin-top: 20px; }
.spanel__head { padding: 18px 22px 14px; border-bottom: 1px solid var(--hair); }
.spanel__head h2 { font-size: 19px; font-weight: 570; }
.spanel__head p { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
.spanel__body { padding: 22px; }
.spanel__foot {
  padding: 14px 22px; border-top: 1px solid var(--hair); background: var(--paper);
  border-radius: 0 0 var(--radius) var(--radius); display: flex; justify-content: flex-end; gap: 10px;
}

/* field affordances that make it feel like a real settings console */
.fieldrow { position: relative; }
.fieldrow .counter {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); pointer-events: none;
}
.fieldrow .input, .fieldrow .textarea { padding-right: 52px; }
.fieldhint { color: var(--ink-3); font-size: 12.5px; margin-top: 5px; }
.fieldhint strong { color: var(--ink-2); font-weight: 600; }

/* info / warning callouts (the H1 touch) */
.callout { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.55; }
.callout__icon { flex: 0 0 auto; font-weight: 700; }
.callout--info { background: #eef2f8; color: #2b4a78; border: 1px solid #d8e2f0; }
.callout--warn { background: var(--gold-soft); color: #6f571f; border: 1px solid #e6d6b3; }
.callout--warn strong, .callout--info strong { display: block; margin-bottom: 2px; }

/* avatar picker */
.avatarpick { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatarpick__img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; }
.avatarpick__actions { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 900px) {
  .settings { grid-template-columns: 1fr; gap: 20px; }
  .settings__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--hair); padding-bottom: 12px; }
  .settings__group, .settings__sep { display: none; }
  .settings__link { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .settings__link.is-active { border-left: 0; border-bottom-color: var(--gold); }
}