/* ============================================================
   welance.css — the welance DNA shared by the brief-bar pages
   Source of truth: welance.com (fonts, served with CORS *) and
   welance/Directory styles.css (tokens, logo, buttons). No font
   binaries live in this repo; if welance.com ever publishes a
   canonical tokens.css, this file shrinks to a link.
   ============================================================ */

@font-face {
  font-family: "Maison Neue";
  src: url("https://welance.com/fonts/MaisonNeue-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maison Neue";
  src: url("https://welance.com/fonts/MaisonNeue-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maison Neue";
  src: url("https://welance.com/fonts/MaisonNeue-Demi.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Maison Neue";
  src: url("https://welance.com/fonts/MaisonNeue-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Some surfaces are dark on purpose in both themes — the closing band's
     neighbour, the code block. They cannot be built from --ink/--paper, which
     swap: that is how the band ended up black-on-black in the dark. These
     three never move, and they agree with the Directory's --ink* set. */
  --slab: #0a0a0a;
  --on-slab: #f2f2ef;
  --on-slab-soft: #9a978d;
  /* the Directory's names for the same three, so its CSS pastes in as-is */
  --ink-fg: var(--on-slab);
  --ink-muted: var(--on-slab-soft);
  --ink-line: #262626;

  /* Directory tokens, mapped onto the token names these pages already use.
     Values are the Directory's, verbatim — assets/css/directory/directory.css */
  --maxw: 1320px;               /* Directory --maxw */

  /* --- type scale: the only font sizes on the site ------------------------
     Nine steps. Nothing is set below --fs-xs; the three hero sizes
     (.h-display, .h1, .h2) keep their own clamps. */
  /* 2026-09-04: seven sizes, not nine. xs folds into sm, the lead
     paragraph shares the card-title size. Fewer sizes read calmer. */
  --fs-xs:   13px;                      /* labels, badges (= sm)        */
  --fs-sm:   13px;                      /* secondary text, table cells  */
  --fs-md:   15px;                      /* UI text, buttons, nav        */
  --fs-base: 16px;                      /* body                         */
  --fs-lg:   18px;                      /* card titles, lead paragraphs */
  --fs-xl:   20px;                      /* figures, the wordmark        */
  --fs-lead: var(--fs-lg);              /* thesis / lead paragraphs     */
  --fs-2xl:  clamp(24px, 2.6vw, 30px);  /* section heads, big figures   */
  --fs-3xl:  clamp(30px, 4.5vw, 50px);  /* hero ratio, the score        */
  --pad-x: clamp(16px, 4vw, 56px);
  --radius: 999px;              /* the pill, everywhere something is rounded */
  --paper: #ffffff;
  --paper-2: #f7f7f5;           /* Directory --surface */
  --paper-3: #efefec;           /* Directory --surface-2 */
  --ink: #0a0a0a;
  --ink-soft: #4a4a4a;          /* Directory --muted (AA at small mono sizes) */
  --ink-soft-2: #6e6e6e;        /* Directory --muted-2: the lockup's slash */
  --rule: #e6e6e6;              /* Directory --line: the hairline */
  --rule-strong: #0a0a0a;       /* Directory --line-strong: black, for emphasis */
  /* welance accents = the house Lottie palette. Five, not four: --wl-b is the
     fifth bar of the rule under the header and had no token here before. */
  --wl-y: #eecc5d;
  --wl-c: #ff7b51;
  --wl-p: #8856cd;
  --wl-cy: #97dbe2;
  --wl-b: #b8c5d6;
  /* semantic colors (functional, not brand) retuned for white */
  --pass: #2d6a4f;    --pass-bg: #e7f3ec;
  --partial: #9c7415; --partial-bg: #f6edd5;
  --fail: #a8392c;    --fail-bg: #f7e4e0;
  /* the one accent is the Directory's coral. The light blue is the second
     voice: big grounds (the closing band), never small text. */
  --accent: var(--wl-c);    --accent-bg: #ffeee8; --accent-fg: #0a0a0a;
  --accent-2: var(--wl-cy); --accent-2-fg: #0a0a0a;
  --verified: #1d9bf0;
  /* type: Maison Neue from welance.com; the Mono cut is not published
     there yet, so mono degrades to the system stack */
  --disp: "Maison Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Maison Neue Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- the Directory's own token names, as aliases -----------------------
     Three rules below (.effortbar and its grip) already reached for
     --line-strong / --surface / --surface-2 and got nothing, because those
     names were never defined here: the bar has been drawing with no border
     and no ground since it was written. Defining the aliases fixes that and
     means Directory CSS can be copied across without a rename pass. */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--ink-soft);
  --muted-2: var(--ink-soft-2);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --surface: var(--paper-2);
  --surface-2: var(--paper-3);
  --ff-sans: var(--disp);
  --ff-mono: var(--mono);
  --y: var(--wl-y); --c: var(--wl-c); --p: var(--wl-p);
  --a: var(--wl-cy); --b: var(--wl-b);

  /* --- the vertical scale -------------------------------------------------
     One 4px ladder for every gap on the site. Before it, nine pages each
     invented their own near-misses — 12, 14, 16 and 18px doing the same job
     three lines apart — and that is what makes a page feel unsettled: not one
     wrong number, but four almost-equal ones the eye keeps trying to
     reconcile. The steps are far enough apart to read as deliberate, and the
     top three go fluid, so a section break on a phone is not the same 80px it
     is on a desk. */
  --sp-1: 4px;
  --sp-2: 8px;
  /* 2026-09-04: the whole scale stepped up. A page should breathe, not
     press; the old values read as a dense document, not a place to try. */
  --sp-3: 14px;
  --sp-4: 20px;
  --sp-5: 28px;
  --sp-6: 36px;
  --sp-7: clamp(36px, 4vw, 52px);
  --sp-8: clamp(52px, 6vw, 76px);
  --sp-9: clamp(72px, 8vw, 108px);
  /* the prose rhythm, named by job rather than by size: --flow is the gap
     between blocks in running text, --flow-tight the one under a heading,
     which stays closer to the text it owns than to the section above it. */
  --flow: var(--sp-6);
  --flow-tight: var(--sp-4);
}

:root[data-theme="dark"] {
  --paper: #0d0d0d;
  --paper-2: #171717;
  --paper-3: #1f1f1f;
  --ink: #f2f2f2;
  --ink-soft: #a2a2a2;
  --ink-soft-2: #8a8a8a;
  --rule: #2a2a2a;
  --rule-strong: #f2f2f2;
  --pass: #6fce9f;    --pass-bg: #12241a;
  --partial: #e0b95c; --partial-bg: #2a2113;
  --fail: #ef8a7c;    --fail-bg: #2b1614;
  /* coral holds its own on #0d0d0d; it only needs lifting a little so small
     text and hairlines keep AA against the dark paper */
  --accent: #ff8f6b;  --accent-bg: #2b1710; --accent-fg: #0a0a0a;
}
:root[data-theme="dark"] .band.cy,
:root[data-theme="dark"] .band.y { color: #0a0a0a; }
:root[data-theme="dark"] .code { border-color: var(--rule); }
:root[data-theme="dark"] img, :root[data-theme="dark"] .wl-asterisk { filter: none; }

/* --- the type scale, from the Directory -------------------------------
   Every page used to set its own h1 and its own .eyebrow in a <style>
   block, so there were eight nearly-identical scales and no way to change
   one. This is the Directory's scale (directory.css), and it is the only
   one now: weight 500 — not 600 — with the tracking that goes with it. */
.h-display { font-weight: 500; font-size: clamp(44px, 7vw, 116px);
  line-height: .98; letter-spacing: -.028em; margin: 0; }
.h1, h1 { font-family: var(--disp); font-weight: 500;
  font-size: clamp(32px, 4.2vw, 60px); line-height: 1.04;
  letter-spacing: -.022em; margin: 0; }
.h2, h2 { font-family: var(--disp); font-weight: 500;
  font-size: clamp(26px, 3vw, 42px); line-height: 1.08;
  letter-spacing: -.015em; margin: 0; }
.h3, h3 { font-family: var(--disp); font-weight: 500;
  font-size: var(--fs-lead); line-height: 1.2;
  letter-spacing: -.005em; margin: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.45; }
/* the underscore that ends a heading is the one place violet used to live
   in the type; it follows the accent now, like everything else */
h1 .b, h2 .b, .h1 .b, .h2 .b { color: var(--accent); }

/* the mono voice: eyebrows, counts, keys */
.mono { font-family: var(--mono); font-size: var(--fs-sm); }
.eyebrow { font-family: var(--disp); font-weight: 500; font-size: var(--fs-sm);
  letter-spacing: .04em; text-transform: uppercase; }
.mono-sm { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted);
  letter-spacing: .02em; }
/* Section label — asterisk-prefixed mono eyebrow. The asterisk replaces the
   hairline that used to run off the right of every eyebrow here: the
   Directory marks a section by naming it, not by ruling it off. */
.eyebrow, .sec-label { display: flex; align-items: baseline; gap: 12px;
  letter-spacing: .08em; color: var(--muted);
  margin: var(--sp-8) 0 var(--sp-5); }
.eyebrow::before, .sec-label::before { content: "*"; color: var(--accent);
  font-size: var(--fs-md); line-height: 1; }
.band .eyebrow { color: var(--ink); }

/* --- layout primitives, from the Directory ----------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.row-between { display: flex; justify-content: space-between;
  align-items: center; gap: var(--sp-6); }
@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* --- badge, from the Directory ----------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .07em; padding: 5px 10px; border: 1px solid currentColor; }
.badge.dot::before { content: ""; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%; }

/* three lines, and the panel they open — only where the nav cannot fit */
.wl-burger { display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 34px; height: 34px; padding: 0 6px; flex: none; cursor: pointer;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); }
.wl-burger span { display: block; height: 2px; background: currentColor; }
.wl-burger[aria-expanded="true"] { background: var(--ink); color: var(--paper);
  border-color: var(--ink); }
@media (max-width: 900px) { .wl-burger { display: flex; } }
.wl-menu { border-top: 1px solid var(--rule); background: var(--paper);
  max-height: 70vh; overflow-y: auto; }
.wl-menu-in { display: grid; gap: 22px; padding: 20px; }
.wl-menu-lang:empty { display: none; }
@media (min-width: 480px) { .wl-menu-lang { grid-column: 1 / -1; } }
.wl-menu-lang .wl-lang-select { width: auto; max-width: none; font-size: var(--fs-md); padding: 9px 8px; }
@media (min-width: 480px) { .wl-menu-in { grid-template-columns: 1fr 1fr; gap: 20px 28px; } }
.wl-menu-col { display: flex; flex-direction: column; gap: 2px; }
.wl-menu-h { font-family: var(--disp); font-weight: 500; font-size: var(--fs-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.wl-menu a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink);
  text-decoration: none; font-family: var(--disp); font-size: var(--fs-base); padding: 7px 0; }
.wl-menu a:hover { color: var(--accent); text-decoration: none; }
.wl-menu a[aria-current="page"] { font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--ink); }
.wl-menu .wl-gh { width: 15px; height: 15px; fill: currentColor; }

.wl-src { display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); padding: 6px; flex: none; }
.wl-src svg { width: 21px; height: 21px; fill: currentColor; }
.wl-src:hover { color: var(--accent); }
@media (min-width: 1180px) { .wl-src svg { width: 23px; height: 23px; } }
.wl-theme { display: inline-flex; align-items: center; cursor: pointer;
  background: transparent; color: var(--ink-soft); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 8px 9px; line-height: 0; }
.wl-theme svg { width: 15px; height: 15px; fill: currentColor; }
.wl-theme:hover { color: var(--ink); border-color: var(--ink); }

/* --- breadcrumbs: ✳ welance / brief bar / <page> ------------------ */
.crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.crumbs a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.crumbs a:hover { color: var(--accent); text-decoration: none; }
.crumbs .sep { color: var(--ink-soft); opacity: .5; }
.crumbs .cur { color: var(--ink-soft); }
.crumbs .gh { margin-left: auto; color: var(--ink-soft); }
.crumbs .gh:hover { color: var(--accent); }
.crumbs .gh svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* --- brand: the Directory's lockup, at two strengths -------------------
   The footer wears the full ✳ welance / brief bar_ — the same two
   static marks the Directory header uses (weLogo.svg, welanceLogo.svg),
   at the same sizes, with the same dim slash before the product name.
   The header wears only ✳ brief bar_. The ruleset is MIT and meant to
   be common property; co-branding it at the top of every page argues the
   opposite. The mark alone is enough — it recurs in the colour rule and
   the footer, so the pages still read as welance work.
   ------------------------------------------------------------------- */
.brand, .wl-brandline { display: inline-flex; align-items: center; flex: none;
  line-height: 1; text-decoration: none; color: var(--ink); min-width: 0; }
.brand:hover, .wl-brandline:hover { text-decoration: none; }

.wl-ast { display: block; width: 22px; height: 22px; flex: none;
  fill: currentColor; }
.wl-logo { display: block; width: 85px; height: auto; margin-inline-start: 4px;
  flex: none; color: currentColor; overflow: visible; }
/* In the footer the product name sits beside the wordmark and is greyed to
   match it, so the lockup reads as one thing. In the header there is no
   wordmark to defer to, so the product name IS the lockup: full ink. */
.wl-project { display: flex; align-items: baseline; gap: 8px;
  margin-inline-start: 8px; font-family: var(--disp); font-size: var(--fs-xl);
  font-weight: 500; line-height: 1; letter-spacing: -.01em;
  color: var(--ink-soft); min-width: 0; }
.wl-brandline .wl-project { color: var(--ink); }
.wl-project .slash { color: var(--ink-soft-2); flex: none; }
.wl-project .name { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.wl-project .b { color: var(--accent); }
@media (min-width: 1024px) {
  .wl-ast { width: 30px; height: 30px; }
  .wl-logo { width: 112px; margin-inline-start: 8px; }
  .wl-project { font-size: var(--fs-2xl); margin-inline-start: 12px; gap: 10px; }
}

/* --- buttons: Directory style ---------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg);
  font-family: var(--disp);
  font-weight: 500;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--fg); color: var(--bg); text-decoration: none; }
.btn.primary { background: var(--fg); color: var(--bg); }
.btn.primary:hover { background: transparent; color: var(--fg); }
/* the one warm button — the lead door, wherever a page has two */
.btn.accent { background: var(--accent); color: var(--accent-fg);
  border-color: var(--accent); }
.btn.accent:hover { background: transparent; color: var(--accent); }
.btn.lg { height: 56px; padding: 0 30px; font-size: var(--fs-base); }
.btn.sm { height: 36px; padding: 0 16px; font-size: var(--fs-sm); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); color: var(--fg); }

/* --- language switcher: one dropdown with flags (rendered by i18n.js) --- */
#langswitch { display: flex; align-items: center; }
.wl-lang-select { font-family: var(--disp); font-size: var(--fs-md); font-weight: 500;
  padding: 8px 14px; cursor: pointer; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius); max-width: 150px; }
@media (min-width: 1440px) { .wl-lang-select { max-width: 190px; } }
.wl-lang-select:hover { border-color: var(--ink); }
.wl-lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- the split bar (splitbar.js): shared by Price Split and Team Rate
   ------------------------------------------------------------------- */
/* the whole split, at a glance and under the thumb: one bar, one segment per
   role, and a handle on every boundary. Dragging a handle moves effort from
   one role to its neighbour, so the project stays whole by construction. */

/* --- site header, the Directory's (chrome.js) ---------------------------
   Two heights, not three — 76 / 106 at 1024, the same two the Directory
   uses. Its header is fixed with a matching body offset; ours is sticky,
   which gets the same result without a magic number to keep in sync.
   ------------------------------------------------------------------- */
.wl-head { position: sticky; top: 0; z-index: 99; background: var(--paper); }
.wl-head-in { height: 68px; padding: 0 20px; display: flex; align-items: center; gap: 16px; }
@media (min-width: 1024px) { .wl-head-in { height: 84px; padding: 0 48px; gap: 24px; } }

/* the welance colour rule, flush under the header: five bars, full width,
   the site's clearest signature. 3px on the landing page and 2px everywhere
   else — off-home it reads as chrome rather than as part of the page. */
.wl-rule { display: grid; grid-template-columns: repeat(5, 1fr); height: 3px; }
.wl-rule.is-thin { height: 2px; }
.wl-rule i { display: block; }

/* the mono status line — the header's quietest voice, and the first thing
   to go when the bar runs out of room */
.wl-status { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
  display: none; }
/* It leads the right-hand group, so it carries the auto margin that pushes
   everything after it over — and hands that job to the nav when it hides.
   It is the last thing to earn room: three nav names, a language select, the
   source mark and the pill are all ahead of it in the queue. */
@media (min-width: 1440px) {
  .wl-status { display: inline-block; margin-inline-start: auto; }
  .wl-status + .wl-nav { margin-inline-start: 0; }
}

.wl-nav { display: flex; align-items: center; gap: 26px; margin-inline-start: auto; }
@media (min-width: 1024px) { .wl-nav { gap: 28px; } }
.wl-nav-item { position: relative; font-family: var(--disp); font-size: var(--fs-lg);
  font-weight: 600; line-height: 1; color: var(--ink); text-decoration: none;
  padding: 8px 0; white-space: nowrap; }
/* the Directory's underline: a bar that grows from nothing rather than a
   colour change — the same gesture welance.com's own header makes */
.wl-nav-item::before { content: ""; position: absolute; display: block;
  width: 100%; height: 2px; bottom: .1em; inset-inline-start: 0;
  background: currentColor; transform: scaleX(0);
  transition: transform .2s ease; }
.wl-nav-item:hover, .wl-nav-item[aria-current="page"] { text-decoration: none; }
.wl-nav-item:hover::before,
.wl-nav-item[aria-current="page"]::before { transform: scaleX(1); }

.wl-head-right { display: flex; align-items: center; gap: 12px; margin-inline-start: 8px; }
@media (min-width: 1024px) { .wl-head-right { gap: 20px; } }
/* The way out is a destination, not an offer. It was a filled pill reading
   "Find a team" — this site asking the reader for something, at the top of
   a page arguing that the bar belongs to everyone. Now it names where it
   goes, in the nav's register but muted, with the same underline the nav
   items grow on hover. Nothing here shouts. */
.wl-out { position: relative; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--disp); font-size: var(--fs-md); font-weight: 500; line-height: 1;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  padding: 8px 0; transition: color 150ms ease; }
.wl-out::before { content: ""; position: absolute; display: block; width: 100%;
  height: 1px; bottom: .1em; inset-inline-start: 0; background: currentColor;
  transform: scaleX(0); transition: transform .2s ease; }
.wl-out:hover { color: var(--ink); text-decoration: none; }
.wl-out:hover::before { transform: scaleX(1); }

/* The awkward middle. welance.com carries three nav items and no language
   select; we carry three plus a select, the source mark and the pill, and the
   lockup ahead of them is now the Directory's full-size one. Between the
   tablet and the large laptop everything tightens rather than the navigation
   being dropped — the full Directory sizes only start once they genuinely
   fit on one line, which is not at 1024 and not at 1280. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .wl-head-in { padding: 0 24px; gap: 14px; }
  .wl-ast { width: 26px; height: 26px; }
  .wl-logo { width: 92px; margin-inline-start: 6px; }
  .wl-project { font-size: var(--fs-xl); margin-inline-start: 8px; gap: 7px; }
  .wl-nav { gap: 16px; }
  .wl-nav-item { font-size: var(--fs-md); }
  .wl-head-right { gap: 10px; }
  .wl-lang-select { max-width: 104px; font-size: var(--fs-sm); padding: 8px 10px; }
  .wl-out { font-size: var(--fs-md); }
}
@media (max-width: 1023px) {
  .wl-nav { display: none; }
  .wl-head-right { margin-inline-start: auto; }
  /* the switch shows the flag and the code from here down (see i18n.js), so it
     no longer needs room for "Português (BR)" */
  .wl-lang-select { width: 82px; max-width: 82px; font-size: var(--fs-sm); padding: 8px 10px; }
  .wl-out { font-size: var(--fs-md); }
}
/* small screens: the lockup gives way first — the asterisk and the wordmark
   are the brand, the product name is the part that can go. The header must
   never widen the document (the band test catches this). */
@media (max-width: 640px) {
  .wl-head-in { height: 58px; gap: 8px; padding: 0 12px; }
  .wl-project { font-size: var(--fs-md); margin-inline-start: 6px; gap: 6px; }
  .wl-head-right { gap: 6px; min-width: 0; }
  .wl-lang-select { max-width: 92px; font-size: var(--fs-sm); padding: 7px 8px; }
}
/* the pill is the one thing on the page that leads somewhere else: it earns
   its room on a phone, and the rest of the header gives way for it. Below
   here the lockup keeps the asterisk and the wordmark — the part that has to
   be right — and lets the product name go. */
@media (max-width: 560px) {
  .wl-logo { display: none; }
  .wl-project { display: flex; font-size: var(--fs-base); margin-inline-start: 5px; }
  .wl-out { font-size: var(--fs-xs); }
  /* an explicit width, or the select sizes itself to its longest option even
     though the closed label is now two letters */
  .wl-lang-select { width: 78px; max-width: 78px; font-size: var(--fs-sm); padding: 7px 6px; }
}
@media (max-width: 400px) {
  .wl-out { font-size: var(--fs-xs); letter-spacing: -.02em; }
  /* only the flag: the list still names every language when you open it */
  .wl-lang-select { width: 46px; max-width: 46px; font-size: var(--fs-sm); padding: 6px 0; }
  .wl-head-in { gap: 4px; padding: 0 8px; }
  /* the header has to hold in every language, not in English: "Encontre um
     time" is a third longer than "Find a team", and at 320px that decides it */
  .wl-src { padding: 2px; margin-inline: -2px; }
  .wl-src svg { width: 18px; height: 18px; }
}

/* --- breadcrumb line under the header ---------------------------------- */
.wl-crumb { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x);
  font-family: var(--mono); font-size: var(--fs-sm); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px; }
.wl-crumb a { color: var(--ink-soft); text-decoration: none; }
.wl-crumb a:hover { color: var(--accent); }
.wl-crumb .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.wl-crumb .sep { opacity: .5; }
.wl-crumb .cur { color: var(--ink); }

/* --- the close of every page: blue band on ink (chrome.js) --------------
   The Directory's two-tone close, verbatim in register: the brand's second
   voice (the light blue) as a big ground for the two doors in, sitting
   directly on the ink discovery band. Both are fixed brand surfaces — they
   do not swap with the theme, which is why they are built from literals
   and the never-moving --slab set rather than from --paper/--ink.
   ------------------------------------------------------------------- */
.wl-foot { display: block; margin-top: var(--sp-9); padding: 0; border: 0; max-width: none;
  font-family: var(--disp); font-size: var(--fs-base); }

.wl-close { position: relative; overflow: hidden; background: var(--accent-2);
  color: var(--accent-2-fg); padding: clamp(48px, 6vw, 72px) 0; }
/* the signature — an asterisk cropped by the band's own edge */
.wl-close-ast { position: absolute; right: -60px; top: -70px; opacity: .18;
  pointer-events: none; color: #0a0a0a; }
.wl-close-ast .wl-asterisk { width: 220px; height: 220px; }
html[dir=rtl] .wl-close-ast { right: auto; left: -60px; }
.wl-close-in { position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad-x); display: flex; align-items: center;
  justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.wl-close h2 { max-width: 18ch; margin: 0; color: #0a0a0a; }
.wl-close h2 .b { color: var(--wl-c); }
/* who made it and on what terms, said once, in the small voice — the band
   states a fact about the ruleset rather than making an offer */
.wl-close-note { max-width: 46ch; margin: var(--sp-4) 0 0; font-size: var(--fs-md);
  line-height: 1.5; color: #0a0a0a; opacity: .72; }
.wl-close .eyebrow { color: #0a0a0a; opacity: .75; margin: 0 0 var(--sp-4); }
.wl-close .eyebrow::before { color: #0a0a0a; }
.wl-close-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* on the blue ground the lead door wears the coral — warm on cool, the two
   brand voices in one band — and the second stays outlined ink */
.wl-close .btn { border-color: #0a0a0a; color: #0a0a0a; }
.wl-close .btn:hover { background: #0a0a0a; color: var(--accent-2); }
.wl-close .btn.accent { background: var(--wl-c); border-color: var(--wl-c); color: #0a0a0a; }
.wl-close .btn.accent:hover { background: #0a0a0a; border-color: #0a0a0a; color: var(--wl-c); }

.wl-foot-deep { background: var(--slab); color: var(--on-slab);
  padding: clamp(36px, 5vw, 64px) 0 28px; }
.wl-foot-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
/* Five columns: who we are, then the ways in, then everything else. The old
   footer split twelve links across two columns and buried the three doors
   among them; here they lead a column of their own. */
.wl-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 56px); }
@media (max-width: 1100px) { .wl-foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 900px) { .wl-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wl-foot-grid { grid-template-columns: 1fr; } }

.wl-foot-brand { color: var(--on-slab); }
.wl-foot-brand .wl-ast { width: 26px; height: 26px; }
.wl-foot-brand .wl-logo { width: 100px; }
/* the lockup is a link, and every page styles bare links with the accent —
   which turned the asterisk coral while the wordmark beside it stayed light.
   The mark is not a link colour; it is the brand. */
.wl-foot-lock { display: inline-flex; align-items: center; color: var(--on-slab); }
.wl-foot-lock:hover { color: var(--on-slab); text-decoration: none; }
.wl-foot-lock .wl-project { color: var(--on-slab-soft); font-size: var(--fs-xl); }
.wl-foot-lock .wl-project .slash { color: var(--on-slab-soft); opacity: .6; }
.wl-foot-blurb { color: var(--on-slab-soft); font-size: var(--fs-md); line-height: 1.55;
  margin: var(--sp-4) 0 var(--sp-3); max-width: 34ch; }
.wl-foot-contact { color: var(--on-slab-soft); margin: 0; }
.wl-asterisk { width: 72px; height: 72px; display: block; }

.wl-foot-k { font-family: var(--disp); font-weight: 500; color: var(--on-slab-soft); text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 var(--sp-3); }
.wl-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wl-foot-link { color: var(--on-slab); font-size: var(--fs-md); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; }
.wl-foot-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.wl-gh { width: 14px; height: 14px; fill: currentColor; flex: none; }
/* the repo link wears the open-blue — "this part you can change" */
.wl-foot-gh { padding: 5px 10px; border: 1px solid var(--wl-cy);
  background: color-mix(in oklab, var(--wl-cy), var(--slab) 82%); }
.wl-foot-op { color: var(--on-slab-soft); font-size: var(--fs-sm); margin: 0; line-height: 1.5; }

/* the three doors in, given a two-line block each rather than a list row */
.wl-foot-start { display: block; padding: 7px 0; text-decoration: none; }
.wl-foot-start-t { display: block; color: var(--on-slab); font-weight: 500;
  font-size: var(--fs-md); line-height: 1.25; }
.wl-foot-start:hover .wl-foot-start-t { text-decoration: underline;
  text-underline-offset: 3px; }
.wl-foot-start-s { display: block; margin-top: 2px; color: var(--on-slab-soft);
  font-size: var(--fs-sm); line-height: 1.4; }

.wl-foot-legal { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; color: var(--on-slab-soft);
  border-top: 1px solid color-mix(in oklab, var(--on-slab), transparent 82%);
  margin-top: var(--sp-8); padding-top: var(--sp-4); }
.wl-foot-legal p { margin: 0; }
/* the language select is the one control in an otherwise text-only row, so it
   leads — and wraps to its own line first on narrow */
.wl-foot-legal-lang { display: inline-flex; flex: none; }
.wl-foot-legal nav { display: inline-flex; gap: 14px; align-items: center; }
.wl-foot-legal a { color: var(--on-slab-soft); text-decoration: none; }
.wl-foot-legal a:hover { color: var(--on-slab); text-decoration: underline;
  text-underline-offset: 3px; }
/* the footer is a fixed dark surface in both themes, so its controls are
   styled against ink rather than against paper */
.wl-foot-deep .wl-theme { color: var(--on-slab-soft); border-color: var(--ink-line);
  padding: 5px 8px; }
.wl-foot-deep .wl-theme:hover { color: var(--on-slab); border-color: var(--on-slab); }
.wl-foot-deep .wl-lang-select { background: transparent; color: var(--on-slab);
  border-color: var(--ink-line); font-size: var(--fs-sm); }
.wl-foot-deep .wl-lang-select:hover { border-color: var(--on-slab); }
.wl-foot-deep .wl-lang-select option { background: var(--slab); color: var(--on-slab); }

/* --- the fine print: depth one click away --------------------------------- */
details.fineprint { border-left: 2px solid var(--rule); margin: 0 0 var(--flow); padding-left: 14px; }
html[dir=rtl] details.fineprint { border-left: 0; border-right: 2px solid var(--rule);
  padding-left: 0; padding-right: 14px; }
details.fineprint > summary { list-style: none; cursor: pointer; font-family: var(--mono);
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
details.fineprint > summary::-webkit-details-marker { display: none; }
details.fineprint > summary::before { content: "+ "; }
details.fineprint[open] > summary::before { content: "− "; }
details.fineprint > summary:hover { color: var(--accent); }
details.fineprint[open] > summary { margin-bottom: var(--sp-3); }

/* --- code blocks: tabs, copy, and a two-tone dark surface ----------------
   The modern docs pattern (tabs + copy + per-language colour), built from
   nothing: the highlighting lives in code.js, the markup stays plain text. */
.code { border: 1px solid var(--slab); background: var(--slab); margin: 0 0 var(--flow); overflow: hidden; }
.code-bar { display: flex; align-items: stretch; justify-content: space-between;
  gap: 12px; border-bottom: 1px solid #232323; }
.code-tabs { display: flex; }
.code-tabs button, .code-copy { font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .06em; background: transparent; border: 0; cursor: pointer;
  color: var(--on-slab-soft); padding: 10px 14px; }
.code-tabs button:hover, .code-copy:hover { color: var(--on-slab); }
.code-tabs button[aria-pressed="true"] { color: var(--on-slab); box-shadow: inset 0 -2px 0 var(--wl-c); }
.code-copy { white-space: nowrap; }
.code-copy.done { color: var(--wl-cy); }
.code-lang { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-slab-soft); padding: 10px 14px; }
.code pre { margin: 0; padding: 14px 16px 16px; background: transparent; border: 0;
  font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.75; color: #d7d7d7; overflow-x: auto; }
.code .s  { color: var(--wl-y); }      /* strings */
.code .k  { color: var(--wl-cy); }     /* json keys */
.code .n  { color: #b18cf0; }          /* numbers, booleans */
.code .kw { color: #ff9d78; }          /* keywords */
.code .u  { color: var(--wl-y); text-decoration: underline; text-underline-offset: .18em; }
.code .fl { color: #8a8a8a; }          /* -X -H -d */
.code .cm { color: #7d7d7d; font-style: italic; }
.code .p  { color: #8e8e8e; }          /* punctuation */

/* --- full-width bands: break the scroll with brand colour ----------------
   Paints beyond the container without touching layout width, so no page
   ever gains a horizontal scrollbar (the vw trick does). Content keeps the
   container's measure; only the colour runs edge to edge. */
.band { --bandbg: var(--paper-2); background: var(--bandbg);
  box-shadow: 0 0 0 100vmax var(--bandbg); clip-path: inset(0 -100vmax);
  padding: var(--sp-8) 0; margin: var(--sp-9) 0; }
.band > :first-child { margin-top: 0; }
.band > :last-child { margin-bottom: 0; }
.band.cy { --bandbg: var(--wl-cy); }
.band.y  { --bandbg: var(--wl-y); }
.band.c  { --bandbg: var(--wl-c); }
.band.ink { --bandbg: var(--ink); color: var(--paper); }
/* on a brand-colour ground the asterisk would vanish into it — it goes ink,
   the same treatment the Directory gives its closing band */
.band.cy .eyebrow::before, .band.y .eyebrow::before,
.band.c .eyebrow::before { color: #0a0a0a; }

/* --- air around the masthead --------------------------------------------
   Two rules used to space the breadcrumb — a padding here and a margin at the
   foot of the file — so its distance from the colour rule was a sum nobody
   could read off either one. It is one step now, and the masthead below it
   closes on the same step the section labels open on, which is what makes the
   top of every page land in the same place. */
.wl-crumb { margin-top: var(--sp-6); }
.wrap > header { margin-bottom: var(--sp-8); }
/* running text: one gap between blocks, one under a heading. The pages set
   these on their own elements too — these are the fallbacks for anything a
   page has not claimed. */
:where(.wrap) > :is(p, ul, ol, table) { margin-block: 0 var(--flow); }
:where(.wrap) > :last-child { margin-bottom: 0; }

/* --- what a finger needs ------------------------------------------------- */
@media (pointer: coarse) {
  input, select, textarea, button { font-size: max(16px, 1em) !important; }
  .role input, .role select, .comp input[type="number"],
  .role button, .comp button, .mode, .addbtn, .lang,
  .wl-theme, .code-copy, .code-tabs button { min-height: 44px; min-width: 44px; }
  a, button, summary, .chip, .mode, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
  button:active, .chip:active, .mode:active,
  a.btn:active, [role="button"]:active { opacity: .62; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}

/* --- the phone layer ----------------------------------------------------- */
html.wl-app body { padding-top: 70px; }
.wl-app .wl-head { position: fixed; inset: 0 0 auto; width: 100%; }
@media (max-width: 640px) {
  html.wl-app body { padding-top: 60px; }
}

.wl-app .wl-sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 101;
  display: flex; flex-direction: column; margin: 0;
  background: var(--paper); border-top: 2px solid var(--ink);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .16);
  will-change: transform; padding-bottom: env(safe-area-inset-bottom);
}
.wl-app .wl-sheet-flat { box-shadow: 0 -8px 24px rgba(0, 0, 0, .14); }
.wl-app .wl-grab {
  position: relative; z-index: 2; flex: none; cursor: grab; touch-action: none;
  padding: 7px 0 0; background: var(--paper);
}
.wl-app .wl-grab::before {
  content: ""; display: block; width: 36px; height: 4px;
  border-radius: 2px; background: var(--rule); margin: 0 auto 6px;
}
.wl-app .wl-sheet.is-open .wl-grab { cursor: grabbing; }
.wl-app .wl-dock {
  display: flex; align-items: baseline; gap: var(--sp-5);
  padding: 0 var(--sp-4) var(--sp-3);
}
.wl-app .wl-dock-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-app .wl-dock-k {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wl-app .wl-dock-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em;
}
.wl-app .wl-sheet-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 0 var(--sp-4) var(--sp-4);
  touch-action: pan-y;
}
.wl-app .wl-sheet .card { border: 0; background: transparent; padding: 0; }
.wl-app .wl-sheet .card + .card { margin-top: var(--sp-6); }
.wl-scrim {
  position: fixed; inset: 0; z-index: 100; background: rgba(10, 10, 10, .38);
  opacity: 0; pointer-events: none;
  transition: opacity 340ms cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion: reduce) {
  .wl-app .wl-sheet, .wl-scrim { transition: none !important; }
}