/* ============================================================================
   LEXUN CONTROL SYSTEM  —  css/ctl.css
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS

   Before this file, `.btn` was defined SEVEN different ways in seven different
   inline <style> blocks:

     group 1 (15 pages) display:inline-block; background:#fff; padding:12px 20px
     group 2 (4 pages)  display:inline-flex;  min-height:46px; padding:12px 22px
     group 3 (404)      display:inline-block;                  padding:13px 24px
     group 4 (index)    display:inline-flex;  min-height:46px; padding:12px 22px
     group 5 (join)                                            padding:15px 22px
     group 6 (platform) display:inline-flex;  min-height:var(--tap); padding:11px 20px
     group 7 (second)                          height:44px;    padding:0 18px

   Same class name, seven different heights and paddings. A user moving between
   two pages saw two different buttons and had no way of knowing they meant the
   same thing. That is the whole of "improve all the buttons and the style".

   HOW IT WINS THE CASCADE WITHOUT DELETING 24 INLINE BLOCKS

   On every page the main inline <style> block sits BEFORE the /css/ link tags
   (verified: about.html style@1689, lexun link@6288). So a stylesheet linked
   after lexun.css/hud.css beats those inline rules at equal specificity by
   source order, and beats them outright where this file uses a compound
   selector. Nothing has to be surgically removed from 24 documents, which is
   the lower-risk path: the old rules stay as a fallback if this file 404s.

   WHAT IS DELIBERATELY NOT HERE

   No gradients, no glows, no shimmer, no animated decoration. Motion happens
   only in response to a real user action (hover, press, load) and every piece
   of it is switched off under prefers-reduced-motion. A control that animates
   forever while nothing is happening is decoration pretending to be feedback.
   ==========================================================================*/

/* ---- control tokens ------------------------------------------------------
   Sizes are on the 8-point grid: 36 / 44 / 52. 44 is the default because it is
   the minimum comfortable touch target, so the default control is already
   accessible without a mobile-only override bolted on afterwards. */
:root{
  --ctl-h-sm:36px; --ctl-h:44px;  --ctl-h-lg:52px;
  --ctl-px-sm:14px; --ctl-px:20px; --ctl-px-lg:26px;
  --ctl-fs-sm:13px; --ctl-fs:15px; --ctl-fs-lg:16px;
  --ctl-r:4px;      --ctl-r-pill:999px;
  --ctl-dur:170ms;  --ctl-ease:cubic-bezier(.22,.61,.36,1);
  --ctl-ring:2px;
  --ctl-face:rgba(255,255,255,.045);   /* resting fill for bordered controls  */
  --ctl-face-h:rgba(255,255,255,.10);  /* hover fill                          */
  --ctl-face-a:rgba(255,255,255,.16);  /* active / pressed fill               */
  --ctl-danger:#e0736b;
}

/* ---- native element baseline --------------------------------------------
   76 controls across the site carry no class at all (39 <button>, 37
   <input>/<select>/<textarea>). They were inheriting the browser default:
   Arial, light grey chrome, 13px. On a black page that reads as broken rather
   than as minimal. These rules make an unclassed control look deliberate. */
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;color:inherit}
button:disabled{cursor:not-allowed}

/* One focus ring for the entire site. Previously each page invented its own or
   relied on the UA default, which is invisible on black in several browsers. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
[role="button"]:focus-visible,[role="tab"]:focus-visible{
  outline:var(--ctl-ring) solid var(--acc2,#fff);
  outline-offset:2px;
  border-radius:var(--ctl-r);
}
/* Never suppress the ring for keyboard users; only for pointer users, which is
   exactly what :focus-visible already encodes. */

/* ============================ BUTTONS ==================================== */

.btn,.btn-primary,.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-sizing:border-box;
  min-height:var(--ctl-h);
  padding:0 var(--ctl-px);
  border-radius:var(--ctl-r);
  border:1px solid transparent;
  background:none;
  font-family:inherit;
  font-size:var(--ctl-fs);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.005em;
  text-decoration:none;
  /* A control label wants to stay on one line — that is part of what makes a
     control read as one object rather than a paragraph with a border. But
     `nowrap` is a promise the viewport cannot always keep. At 320px a label
     like "Analyse a decision — free, in your browser" is wider than the page,
     and an unwrappable label does not clip: it pushes the whole document
     sideways, so every page carrying that control gets a horizontal scrollbar.
     `normal` plus a 100% cap gives the same single line wherever there is room
     — a shrink-to-fit box still sizes to its content — and folds onto a second
     line only at the widths where one line was never possible. No breakpoint
     needed: the behaviour is a consequence of the width the control is given. */
  white-space:normal;
  max-width:100%;
  text-align:center;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  transition:background var(--ctl-dur) var(--ctl-ease),
             border-color var(--ctl-dur) var(--ctl-ease),
             color var(--ctl-dur) var(--ctl-ease),
             transform var(--ctl-dur) var(--ctl-ease),
             opacity var(--ctl-dur) var(--ctl-ease);
}

/* --- primary: the one action this screen exists for ---------------------- */
.btn.primary,.btn-primary,.pcta.solid,.btn.solid{
  background:var(--acc,#fff);
  color:var(--ink-on-acc,#000);
  border-color:transparent;
  box-shadow:none;
}
/* Kill the inherited shimmer pseudo-element wherever it still exists. */
.btn.primary::after,.btn-primary::after,.btn.primary::before,.btn-primary::before{
  content:none!important;animation:none!important;background:none!important;
}
@media (hover:hover){
  .btn.primary:hover,.btn-primary:hover,.pcta.solid:hover,.btn.solid:hover{
    background:#e6e6e6;transform:translateY(-1px);box-shadow:none;filter:none;
  }
}
.btn.primary:active,.btn-primary:active,.pcta.solid:active,.btn.solid:active{
  background:#d2d2d2;transform:translateY(0);
}

/* --- secondary (.ghost): the other things you could reasonably do -------- */
.btn.ghost,.btn-ghost,.pcta,.btn.secondary{
  background:var(--ctl-face);
  border-color:var(--line2,rgba(255,255,255,.16));
  color:var(--ink,#f4f4f4);
  box-shadow:none;
}
@media (hover:hover){
  .btn.ghost:hover,.btn-ghost:hover,.pcta:hover,.btn.secondary:hover{
    background:var(--ctl-face-h);
    border-color:var(--acc,#fff);
    box-shadow:none;              /* the 16px white bloom is gone            */
  }
}
.btn.ghost:active,.btn-ghost:active,.pcta:active,.btn.secondary:active{
  background:var(--ctl-face-a);transform:translateY(0);
}

/* --- quiet: navigation-weight actions, no chrome until touched ----------- */
.btn.quiet{background:none;border-color:transparent;color:var(--mut,#a5a5a8)}
@media (hover:hover){
  .btn.quiet:hover{background:var(--ctl-face);color:var(--ink,#f4f4f4)}
}
.btn.quiet:active{background:var(--ctl-face-h)}

/* --- danger: destructive, and it has to LOOK destructive before you press
       it, not confirm afterwards ---------------------------------------- */
.btn.danger,.ebtn.danger{
  background:none;
  border-color:rgba(224,115,107,.42);
  color:var(--ctl-danger);
}
@media (hover:hover){
  .btn.danger:hover,.ebtn.danger:hover{
    background:rgba(224,115,107,.14);border-color:var(--ctl-danger);color:#f2a49e;
  }
}
.btn.danger:active,.ebtn.danger:active{background:rgba(224,115,107,.22)}

/* --- sizes -------------------------------------------------------------- */
.btn.sm{min-height:var(--ctl-h-sm);padding:0 var(--ctl-px-sm);font-size:var(--ctl-fs-sm);gap:6px}
.btn.lg{min-height:var(--ctl-h-lg);padding:0 var(--ctl-px-lg);font-size:var(--ctl-fs-lg);gap:10px}
.btn.block{display:flex;width:100%}
/* On touch devices even the small size gets a 44px target: the visual size
   stays 36 but the hit area does not, because a 36px target is a mis-tap. */
@media (hover:none){
  .btn.sm{min-height:40px}
  .btn.sm::before{content:"";position:absolute;inset:-4px 0;z-index:-1}
}

/* --- disabled ----------------------------------------------------------- */
.btn:disabled,.btn[aria-disabled="true"],.btn.is-disabled{
  opacity:.42;cursor:not-allowed;transform:none!important;
  pointer-events:auto;                 /* keep the tooltip/title reachable   */
}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{
  background:inherit;border-color:inherit;transform:none;
}

/* --- loading -------------------------------------------------------------
   A 2px bar that travels the width of the button. It exists only while
   aria-busy is true, so it is never ambient decoration, and screen readers get
   the state from aria-busy rather than from the animation. */
.btn[aria-busy="true"]{cursor:progress;color:transparent!important}
.btn[aria-busy="true"]>*{visibility:hidden}
.btn[aria-busy="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--acc,#fff);opacity:.85;
  transform-origin:left;animation:ctlLoad 1.1s var(--ctl-ease) infinite;
}
.btn.primary[aria-busy="true"]::after{background:var(--ink-on-acc,#000)}
@keyframes ctlLoad{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}

/* --- arrow affordance ---------------------------------------------------- */
.btn .ar{display:inline-block;transition:transform var(--ctl-dur) var(--ctl-ease)}
@media (hover:hover){.btn:hover .ar{transform:translateX(4px)}}

/* ============================ INPUTS ===================================== */

.input,.field input,.field select,.field textarea,
input[type="text"],input[type="email"],input[type="search"],input[type="url"],
input[type="tel"],input[type="number"],input[type="password"],input[type="date"],
select,textarea{
  box-sizing:border-box;
  width:100%;
  min-height:var(--ctl-h);
  padding:11px 14px;
  border-radius:var(--ctl-r);
  border:1px solid var(--line,rgba(255,255,255,.10));
  background:rgba(255,255,255,.03);
  color:var(--ink,#f4f4f4);
  font-family:inherit;
  font-size:var(--ctl-fs);
  /* 20px, not 1.4. A 15px font at 1.4 is a 21px line, and 21 + 11 + 11 + 2
     is 45 — one pixel over --ctl-h. Every single-line field on the site was
     therefore 45px tall while every button was 44px, so an input and its
     submit button sitting in the same row never quite lined up, and in a
     flex row the field dragged the button to 45px with it: the button
     silently broke the token it was meant to define. 20 + 11 + 11 + 2 is
     exactly 44, and the text sits exactly on centre. Textareas restore a
     proportional line-height below, where multiple lines make it matter. */
  line-height:20px;
  transition:border-color var(--ctl-dur) var(--ctl-ease),
             background var(--ctl-dur) var(--ctl-ease);
}
textarea{min-height:112px;padding-top:12px;resize:vertical;line-height:1.55}
select{
  /* the native arrow is a light-mode glyph and disappears on black, so it is
     replaced with a drawn chevron built from two gradients — no icon file, no
     SVG data-uri, consistent with the site-wide no-icons rule */
  appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--mut,#a5a5a8) 50%),
    linear-gradient(135deg,var(--mut,#a5a5a8) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
::placeholder{color:var(--dim,#6e6e73);opacity:1}
@media (hover:hover){
  .input:hover,input:hover,select:hover,textarea:hover{border-color:var(--line2,rgba(255,255,255,.16))}
}
.input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--acc,#fff);background:rgba(255,255,255,.055);
}
input:disabled,select:disabled,textarea:disabled{opacity:.45;cursor:not-allowed}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:rgba(224,115,107,.65);
}
/* Checkboxes and radios keep the native control but get the accent colour so
   they stop rendering as the browser's blue on an otherwise monochrome page. */
input[type="checkbox"],input[type="radio"]{
  accent-color:var(--acc,#fff);width:17px;height:17px;min-height:0;cursor:pointer;
}

/* --- field furniture ----------------------------------------------------- */
.field{display:block;margin:0 0 16px}
.field>.label,.label{
  display:block;margin:0 0 6px;
  font-size:13px;font-weight:500;color:var(--mut,#a5a5a8);letter-spacing:.005em;
}
.field>.hint,.hint{display:block;margin:6px 0 0;font-size:12.5px;color:var(--dim,#6e6e73);line-height:1.6}
.field>.err,.err{display:block;margin:6px 0 0;font-size:12.5px;color:var(--ctl-danger)}

/* ============================ CHIPS ====================================== */

.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-sizing:border-box;
  min-height:var(--ctl-h-sm);
  padding:0 14px;
  border-radius:var(--ctl-r-pill);
  border:1px solid var(--line,rgba(255,255,255,.10));
  background:var(--ctl-face);
  color:var(--mut,#a5a5a8);
  /* A chip is a label a person reads and presses, not something the engine
     printed. It was 11.5px uppercase mono at .10em tracking, which on
     /findmoney turned sentences like "I've had more than one job" into
     spaced capitals — the single clearest place the site read as a template
     rather than an instrument. Sentence case, in the text face, at a size
     that can hold a sentence. Mono stays for seeds, hashes and figures. */
  font-family:var(--sans,system-ui,sans-serif);
  font-size:12.5px;font-weight:500;
  letter-spacing:.01em;
  white-space:normal;max-width:100%;text-align:center;cursor:pointer;
  transition:color var(--ctl-dur) var(--ctl-ease),
             border-color var(--ctl-dur) var(--ctl-ease),
             background var(--ctl-dur) var(--ctl-ease);
}
@media (hover:hover){.chip:hover{color:var(--ink,#f4f4f4);border-color:var(--line2,rgba(255,255,255,.16))}}
.chip[aria-pressed="true"],.chip.on,.chip[aria-selected="true"]{
  border-color:var(--acc,#fff);color:var(--ink-on-acc,#000);background:var(--acc,#fff);
}
/* A chip that is a label rather than a control must not look pressable. */
.chip.static,.badge{cursor:default}
@media (hover:none){.chip{min-height:40px}}

/* ============================ SEGMENTED ================================== */

.seg{
  display:inline-flex;padding:3px;gap:3px;
  border:1px solid var(--line,rgba(255,255,255,.10));
  border-radius:var(--ctl-r);background:rgba(255,255,255,.03);
}
.seg>button,.seg>a{
  min-height:34px;padding:0 14px;border-radius:2px;border:0;background:none;
  color:var(--mut,#a5a5a8);font-size:13px;font-weight:500;text-decoration:none;
  display:inline-flex;align-items:center;cursor:pointer;
  transition:background var(--ctl-dur) var(--ctl-ease),color var(--ctl-dur) var(--ctl-ease);
}
@media (hover:hover){.seg>button:hover,.seg>a:hover{color:var(--ink,#f4f4f4);background:var(--ctl-face)}}
.seg>[aria-selected="true"],.seg>.on{background:var(--acc,#fff);color:var(--ink-on-acc,#000)}

/* ============================ TABS ======================================= */
/* css/hud.css styles [role="tab"] as a chip: mono, uppercase, letterspaced,
   pill. Page CSS then overrode its border-radius, background and font-size but
   not its font-family or case, so a tab rendered as a hybrid of the two — a
   square, sans-sized, uppercase-mono control that matched nothing else on the
   page. A tablist is a segmented control, not a filter chip, so it is set here
   in the control system's own type and loaded after hud.css to win cleanly.

   Scoped to [role="tablist"] > [role="tab"], which is the only valid place for
   a tab, so nothing that merely reuses the role in isolation is caught. */
[role="tablist"]{display:flex;gap:8px;flex-wrap:wrap}
[role="tablist"]>[role="tab"]{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;min-height:var(--ctl-h);padding:0 var(--ctl-px);
  border:1px solid var(--line2,rgba(255,255,255,.16));border-radius:var(--ctl-r);
  background:var(--ctl-face);
  font-family:inherit;font-size:var(--ctl-fs);font-weight:500;
  letter-spacing:-.005em;text-transform:none;line-height:1.2;
  color:var(--mut,#a5a5a8);white-space:normal;max-width:100%;text-align:center;cursor:pointer;
  transition:background var(--ctl-dur) var(--ctl-ease),
             border-color var(--ctl-dur) var(--ctl-ease),
             color var(--ctl-dur) var(--ctl-ease);
}
@media (hover:hover){
  [role="tablist"]>[role="tab"]:hover{
    background:var(--ctl-face-h);border-color:var(--line2,rgba(255,255,255,.28));
    color:var(--ink,#f4f4f4);transform:none;
  }
}
[role="tablist"]>[role="tab"][aria-selected="true"]{
  background:var(--acc,#fff);color:var(--ink-on-acc,#000);border-color:transparent;
}
@media (hover:hover){
  [role="tablist"]>[role="tab"][aria-selected="true"]:hover{
    background:var(--acc,#fff);color:var(--ink-on-acc,#000);border-color:transparent;
  }
}

/* ============================ MOTION OPT-OUT ============================= */
@media (prefers-reduced-motion:reduce){
  .btn,.chip,.input,input,select,textarea,.seg>button,.seg>a,.btn .ar,
  [role="tablist"]>[role="tab"]{
    transition:none!important;
  }
  .btn:hover,.btn.primary:hover,.btn-primary:hover{transform:none!important}
  .btn[aria-busy="true"]::after{animation:none;transform:scaleX(1);opacity:.5}
}

/* ============================ LIGHT CHAPTER ==============================
   The homepage inverts to paper for one chapter (html.lxpaper / .lxlight).
   Controls inside it must invert too, and they invert by REDEFINING TOKENS
   rather than by overriding each property, because several controls carry
   inline style="color:var(--ink)" which no class selector can outrank — the
   inline var() has to resolve to the paper value instead. */
.lxlight .btn.primary,html.lxpaper .btn.primary,
.lxlight .btn-primary,html.lxpaper .btn-primary{background:#0a0a0b;color:#fff}
@media (hover:hover){
  .lxlight .btn.primary:hover,html.lxpaper .btn.primary:hover{background:#2a2a2e}
}
.lxlight .btn.ghost,html.lxpaper .btn.ghost{
  background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.20);color:#0a0a0b;
}
@media (hover:hover){
  .lxlight .btn.ghost:hover,html.lxpaper .btn.ghost:hover{
    background:rgba(0,0,0,.06);border-color:#0a0a0b;
  }
}
.lxlight .chip,html.lxpaper .chip{border-color:rgba(0,0,0,.16);background:rgba(0,0,0,.03);color:#4f4f53}
.lxlight .chip[aria-pressed="true"],.lxlight .chip.on,
html.lxpaper .chip[aria-pressed="true"],html.lxpaper .chip.on{background:#0a0a0b;color:#fff;border-color:#0a0a0b}
.lxlight input,.lxlight select,.lxlight textarea,
html.lxpaper input,html.lxpaper select,html.lxpaper textarea{
  border-color:rgba(0,0,0,.18);background:rgba(0,0,0,.02);color:#0a0a0b;
}
.lxlight ::placeholder,html.lxpaper ::placeholder{color:#6e6e73}