/* SkillsCoin — the public marketplace surface.
 *
 * app.css already carries the tokens, the fields, the buttons and the notes for
 * the account screens. This is the second layer the two public pages share:
 * the wide wrapper, the nav, the chips and the readiness meter. Keeping it in
 * one file is the only way discover and project stay the same product as they
 * both grow. Every colour comes from an app.css token, so nothing here has an
 * opinion about which theme is on. */

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* -------------------------------------------------------------- the nav --- */
nav{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
nav .in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 20px;max-width:1120px;margin:0 auto}
nav .nm{font-family:var(--fd);font-size:17px;font-weight:700;letter-spacing:-.035em}
nav .nm span{color:var(--gold)}
nav .lk{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
nav .lk a{font-size:13px;color:var(--ink-3);padding:7px 11px;border-radius:8px;font-weight:500}
nav .lk a:hover{background:var(--panel-2);color:var(--ink)}
nav .lk a[aria-current="page"]{color:var(--ink);background:var(--panel-2)}

/* ------------------------------------------------------------ the header --- */
.head{padding:38px 0 24px}
.head .lbl{font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);margin-bottom:11px}
.head h1{font-size:clamp(25px,4vw,36px);font-weight:800;letter-spacing:-.03em;
  text-wrap:balance;line-height:1.14}
.head .sub{color:var(--ink-2);font-size:16px;margin-top:12px;max-width:66ch;line-height:1.6}
.head .sub b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------- the chips --- */
.chip{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap;font-weight:500;display:inline-block}
.chip.ok{background:var(--pos-bg);color:var(--pos)}
.chip.wa{background:var(--warn-bg);color:var(--warn)}
.chip.no{background:var(--neg-bg);color:var(--neg)}
.chip.dr{background:var(--raise);color:var(--ink-3)}
.chip.in{background:var(--info-bg);color:var(--info)}

/* ----------------------------------------------------------- the filters --- */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.filters select{background:var(--panel);border:1px solid var(--rule);border-radius:9px;
  padding:8px 11px;font-size:13.5px;min-height:38px;color:var(--ink)}
.filters select:focus{border-color:var(--focus);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 18%,transparent)}
.filters .count{font-family:var(--fm);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-left:auto}

/* ------------------------------------------------------------ the meter --- */
/* The readiness bar. Gold reads as the platform's own mark rather than as a
   good/bad signal, which is right: a low score is not a warning about the
   business, it is a statement about how much has been checked so far. */
.meter-l .bar{height:6px;border-radius:4px;background:var(--raise);overflow:hidden}
.meter-l .bar i{display:block;height:100%;background:var(--gold);border-radius:4px;
  transition:width .3s}
@media(prefers-reduced-motion:reduce){ .meter-l .bar i{transition:none} }
.meter-l .cap{font-size:12px;color:var(--ink-3);margin-top:7px;line-height:1.45}
.meter-l .cap b{color:var(--ink-2)}

/* ------------------------------------------------------------ the footer --- */
.foot-l{border-top:1px solid var(--rule);padding:26px 0 48px;margin-top:20px}
.foot-l p{font-size:12.5px;color:var(--ink-3);line-height:1.6;max-width:74ch}

/* ------------------------------------------------------------- a11y bits --- */
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}