* {
    -webkit-tap-highlight-color: transparent;
}
select:focus, textarea:focus, input:focus {
    outline: none;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--color-9);
    box-shadow: 0 0 100px 100px inset var(--mainBackground);
}

* :focus {
    outline-width: 0;
}

/* SURFACE TOKENS -- the start of a design system, set 2026-09-10 at the product
   owner's request.

   The colour tokens below are per theme. These are not: a card is the same
   shape in every theme, and only its colours change. They were hand-picked
   per component before this, so the head-to-head card was padded 12px 14px 10px
   and the result table 4px 12px 8px -- close enough to look like a mistake
   rather than a choice, which is exactly how it read.

   Anything that draws a panel spends these instead of inventing its own. New
   components always; existing ones as they are next opened, the same way the
   CSS-in-CSS rule is being applied. */
:root{
    --card-px:14px;          /* a card's left and right padding      */
    --card-py:12px;          /* its top and bottom                   */
    /* THESE TWO PREDATE THE SURFACE TOKENS AND WERE NOT WIRED TO THEM.
       Everything that reads --card-radius -- the match page result and compare
       panels, the standings table, the knockout bracket -- was universal in the
       sense that it read ONE variable, and that variable was a hardcoded 12px.
       So a square theme squared everything around those panels and left them
       round, which is exactly what the owner kept reporting. Universal is not
       the same as themed: the variable has to point AT the theme. */
    --card-radius:var(--surface-radius-lg, 12px);
    --card-line:var(--surface-border-w, 1px);
    --row-py:10px;           /* the breathing room in a table row    */
    --label-fs:12px;         /* a row label, a field name            */
    --figure-fs:15px;        /* a number the reader came for         */
    --eyebrow-fs:10px;       /* the small uppercase caption above it */

    /* A COMPARISON BAR. Two of them, one per side, growing out from a gap in
       the middle -- the gap is what says they are two bars and not one
       measure cut in half. Added 2026-09-11 with the Result tab's statistics;
       anything else that compares two sides spends these. */
    /* RATE MOVEMENT. These were six literals inside one page's stylesheet
       (#7ac201, #ff5050 and four rgba() built from them), which is why a rate
       going up was the one thing on the page that could not follow a theme.
       The soft pair is the wash; it is deliberately more transparent than the
       bar, which is a hairline and has to hold its own against the figure. */
    --rate-up:#7ac201;
    --rate-down:#ff5050;
    --rate-up-soft:rgba(122,194,1,.42);
    --rate-down-soft:rgba(255,80,80,.44);
    --rate-up-haze:rgba(122,194,1,.22);
    --rate-down-haze:rgba(255,80,80,.24);

    --bar-h:9px;
    --bar-radius:var(--surface-radius-sm, 5px);
    --bar-gap:7px;
}
/* ==========================================================================
   THE SURFACE, AS SOMETHING A THEME CAN CHANGE

   A theme can only change what has a name, and until now the only names were
   colours -- which is why 22 themes are one page with the accent swapped. These
   are the decisions that actually make a surface read as charcoal, or paper, or
   flat, or raised.

   Every value here is copied from the rule it replaces, so today's rendering is
   unchanged. A theme that wants a different feel overrides these instead of
   touching components:

       html[main-theme="themeN"]{
           --surface-sheen: none;          a flat theme
           --surface-elevation: none;
           --surface-radius: 4px;
       }

   Declared on bare html so every theme inherits; a theme block carries an
   attribute and outranks this whatever the source order.
   ========================================================================== */
html{
  /* the ground a panel sits on, and the one a raised part sits on */
  --surface-bg: var(--color-2);
  --surface-bg-raised: var(--color-3);

  /* the edge: width and colour separately, so a theme can keep the colour and
     drop the line, or the other way round */
  --surface-border: var(--color-4);
  --surface-border-w: 1px;

  /* HOW ROUND, IN FOUR STEPS.

     One step would flatten the design rather than theme it: a 2px chip and a
     10px panel mean different things. Four keeps the hierarchy and still lets a
     theme square everything -- or round everything -- in four declarations.

     Every site that reads these keeps its own value as a fallback, so a page
     that never sees this block looks exactly as it does today. */
  --surface-radius-xs: 2px;
  --surface-radius-2:  3px;
  --surface-radius-sm: 5px;
  --surface-radius-md: 8px;
  --surface-radius:    10px;
  --surface-radius-lg: 14px;

  /* A CAPSULE IS NOT A CARD WITH A BIG CORNER.
     It has to stay fully round in a round theme and go square in a square one,
     and no single value does both jobs -- so the pills have their own name.
     Circles are not here on purpose: an avatar and a loading ring are shapes,
     and nobody has asked for a square spinner. */
  --surface-radius-pill: 999px;

  /* AND A CIRCLE IS NOT A CAPSULE EITHER.
     A big radius on a box as tall as it is wide draws a circle -- a chip, an
     avatar, the hub in the middle of the wheel. Those are objects in the
     artwork, not surfaces, so every theme keeps them round; squaring one reads
     as a bug rather than as a style. */
  --surface-radius-circle: 50%;

  /* light falling across a surface. Two, because the match row and the page
     panels were drawn with different strengths and both are worth keeping. */
  --surface-sheen: linear-gradient(145deg, rgba(255,255,255, .075), rgba(0, 0, 0, .0));
  --surface-sheen-panel: linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,0,0,.06));

  /* whether it sits above the page or in it */
  --surface-elevation: 0 0 25px var(--color-2), 0px -25px 20px 0px var(--color-3) inset;

  /* CONTROLS, SO THE BUTTONS BELONG TO THE THEME TOO.
     The main button and its quiet twin carried their own wash and their own
     float, written into the component -- which is why they looked like
     themselves in all 22 themes rather than looking like the theme. */
  --surface-sheen-control: linear-gradient(135deg, rgba(255,255,255,.30), rgba(0,0,0,.30));
  --surface-elevation-control: 0 5px 18px 2px var(--color-1), 0px 6px 4px -2px var(--color-6), 0 5px 5px -3px var(--color-1);
}

html[main-theme="theme1"] {
    --mainColor: #ffcc00;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme2"] {
    --mainColor: #ecbb0d;
    --virtualColor: #79b93f;
    --mainBackground: #e5e5e5;
    --color-1: #eee;
    --color-2: #fff;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme3"] {
    --mainColor: #a1ff0a;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme4"] {
    --mainColor: #7dc2ff;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme5"] {
    --mainColor: #ff3636;
    --virtualColor: #79b93f;
    --mainBackground: #fff7f6;
    --color-1: #fffdfc;
    --color-2: #f4eceb;
    --color-3: #e3dbda;
    --color-4: #d2cac9;
    --color-5: #9f9796;
    --color-6: #6b6563;
    --color-7: #5a5452;
    --color-8: #383231;
    --color-9: #080000;

    /* FLAT. Geometric: square corners, a drawn edge, and no gradient anywhere
       -- including the page itself, which is one colour end to end. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: none;
    --surface-border-w: 1px;
    --surface-radius-xs: 0px;
    --surface-radius-2: 0px;
    --surface-radius-sm: 0px;
    --surface-radius-md: 0px;
    --surface-radius: 0px;
    --surface-radius-lg: 0px;
    --surface-radius-pill: 0px;
    --surface-sheen-control: none;
    --surface-elevation-control: none;
}

html[main-theme="theme6"] {
    --mainColor: #00ced1;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme7"] {
    --mainColor: #57ce57;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme8"] {
    --mainColor: #cddc39;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme9"] {
    --mainColor: #00ced1;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme10"] {
    --mainColor: #deb887;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme11"] {
    --mainColor: #b0ad8c;
    --virtualColor: #79b93f;
    --mainBackground: #131104;
    --color-1: #030100;
    --color-2: #131104;
    --color-3: #23221a;
    --color-4: #34332a;
    --color-5: #68665c;
    --color-6: #9b998f;
    --color-7: #acaaa0;
    --color-8: #ceccc1;
    --color-9: #fffff4;
    --mainGlow: rgba(176,173,140,.10);
    --mainGlow2: rgba(176,173,140,.07);

    /* PAPER. Printed rather than lit: a hairline edge, a 2px corner, and one
       dark line under each surface instead of a shadow -- what a printed card
       gives you, not a float. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: 0 1px 0 rgba(0,0,0,.20);
    --surface-border-w: 1px;
    --surface-radius-xs: 2px;
    --surface-radius-2: 2px;
    --surface-radius-sm: 2px;
    --surface-radius-md: 2px;
    --surface-radius: 2px;
    --surface-radius-lg: 2px;
    --surface-radius-pill: 2px;
    --surface-sheen-control: none;
    --surface-elevation-control: 0 1px 0 rgba(0,0,0,.20);
}

html[main-theme="theme12"] {
    --mainColor: #b0ad8c;
    --virtualColor: #79b93f;
    --mainBackground: #fbfaee;
    --color-1: #fffff4;
    --color-2: #f0efe3;
    --color-3: #dfddd2;
    --color-4: #ceccc1;
    --color-5: #9b998f;
    --color-6: #68665c;
    --color-7: #57554c;
    --color-8: #34332a;
    --color-9: #030100;
    --mainGlow: rgba(176,173,140,.10);
    --mainGlow2: rgba(176,173,140,.07);

    /* PAPER. Printed rather than lit: a hairline edge, a 2px corner, and one
       dark line under each surface instead of a shadow -- what a printed card
       gives you, not a float. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: 0 1px 0 rgba(0,0,0,.20);
    --surface-border-w: 1px;
    --surface-radius-xs: 2px;
    --surface-radius-2: 2px;
    --surface-radius-sm: 2px;
    --surface-radius-md: 2px;
    --surface-radius: 2px;
    --surface-radius-lg: 2px;
    --surface-radius-pill: 2px;
    --surface-sheen-control: none;
    --surface-elevation-control: 0 1px 0 rgba(0,0,0,.20);
}

html[main-theme="theme13"] {
    --mainColor: #35b7ff;
    --virtualColor: #79b93f;
    --mainBackground: #0e1114;
    --color-1: #000105;
    --color-2: #0e1114;
    --color-3: #202225;
    --color-4: #313336;
    --color-5: #646669;
    --color-6: #96999c;
    --color-7: #a7aaad;
    --color-8: #c9ccd0;
    --color-9: #fcffff;
    --mainGlow: rgba(53,183,255,.10);
    --mainGlow2: rgba(53,183,255,.05);

    /* CHARCOAL. Matte: no edge, no light across a surface, nothing floating.
       Panels separate by lightness alone. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: none;
    --surface-border-w: 0px;
    --surface-radius-xs: 2px;
    --surface-radius-2: 2px;
    --surface-radius-sm: 3px;
    --surface-radius-md: 4px;
    --surface-radius: 6px;
    --surface-radius-lg: 8px;
    --surface-radius-pill: 999px;
    --surface-sheen-control: none;
    --surface-elevation-control: none;
}

html[main-theme="theme14"] {
    --mainColor: #35b7ff;
    --virtualColor: #79b93f;
    --mainBackground: #f6f9fd;
    --color-1: #fcffff;
    --color-2: #ebeef2;
    --color-3: #dadde1;
    --color-4: #c9ccd0;
    --color-5: #96999c;
    --color-6: #646669;
    --color-7: #535558;
    --color-8: #313336;
    --color-9: #000105;
    --mainGlow: rgba(53,183,255,.10);
    --mainGlow2: rgba(53,183,255,.05);

    /* CHARCOAL. Matte: no edge, no light across a surface, nothing floating.
       Panels separate by lightness alone. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: none;
    --surface-border-w: 0px;
    --surface-radius-xs: 2px;
    --surface-radius-2: 2px;
    --surface-radius-sm: 3px;
    --surface-radius-md: 4px;
    --surface-radius: 6px;
    --surface-radius-lg: 8px;
    --surface-radius-pill: 999px;
    --surface-sheen-control: none;
    --surface-elevation-control: none;
}

html[main-theme="theme15"] {
    --mainColor: #a550a6;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme16"] {
    --mainColor: #e95a5c;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme17"] {
    --mainColor: #ff4040;
    --virtualColor: #79b93f;
    --mainBackground: #160f0e;
    --color-1: #080000;
    --color-2: #160f0e;
    --color-3: #272120;
    --color-4: #383231;
    --color-5: #6c6563;
    --color-6: #9f9796;
    --color-7: #b0a8a7;
    --color-8: #d2cac9;
    --color-9: #fffdfc;

    /* FLAT. Geometric: square corners, a drawn edge, and no gradient anywhere
       -- including the page itself, which is one colour end to end. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: none;
    --surface-border-w: 1px;
    --surface-radius-xs: 0px;
    --surface-radius-2: 0px;
    --surface-radius-sm: 0px;
    --surface-radius-md: 0px;
    --surface-radius: 0px;
    --surface-radius-lg: 0px;
    --surface-radius-pill: 0px;
    --surface-sheen-control: none;
    --surface-elevation-control: none;
}

html[main-theme="theme18"] {
    --mainColor: #8bc34a;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme19"] {
    --mainColor: #ac284f;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme20"] {
    /* Neutrals carried to the accent's hue at a constant Lab chroma of 3.5,
       every step's lightness untouched. Constant chroma rather than HSL
       saturation because saturation all but vanishes near black, and near
       black is where a dark theme lives: #111 stayed #111 under HSL and
       becomes a warm near-black here. First pair done this way. */
    --mainColor: #ec671e;
    --virtualColor: #79b93f;
    --mainBackground: #fff7f4;
    --mainGlow: rgba(236,103,30,.16);
    --mainGlow2: rgba(236,103,30,.09);
    --mainArc: rgba(236,103,30,.08);
    --color-1: #fffdfa;
    --color-2: #f5ece9;
    --color-3: #e4dbd8;
    --color-4: #d3cbc7;
    --color-5: #9f9894;
    --color-6: #6c6562;
    --color-7: #5a5451;
    --color-8: #38322f;
    --color-9: #090000;
}

html[main-theme="theme21"] {
    /* Neutrals carried to the accent's hue at a constant Lab chroma of 3.5,
       every step's lightness untouched. Constant chroma rather than HSL
       saturation because saturation all but vanishes near black, and near
       black is where a dark theme lives: #111 stayed #111 under HSL and
       becomes a warm near-black here. First pair done this way. */
    --mainColor: #ec671e;
    --virtualColor: #79b93f;
    --mainBackground: #16100c;
    --mainGlow: rgba(236,103,30,.22);
    --mainGlow2: rgba(236,103,30,.13);
    --mainArc: rgba(236,103,30,.10);
    --color-1: #090000;
    --color-2: #16100c;
    --color-3: #27211e;
    --color-4: #38322f;
    --color-5: #6c6562;
    --color-6: #9f9894;
    --color-7: #b0a9a5;
    --color-8: #d3cbc7;
    --color-9: #fffdfa;
}

html[main-theme="theme22"] {
    --mainColor: #d369bb;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[sport-theme="ca1"] {
    --sportColor: var(--mainColor);
}

html[sport-theme="ca2"] {
    --sportColor: var(--virtualColor);
}

body {
    background: linear-gradient(45deg , var(--mainBackground) 10%,transparent 11%, transparent 89% , var(--mainBackground) 90%),linear-gradient(135deg , var(--mainBackground) 10%,transparent 11%, transparent 89% , var(--mainBackground) 90%),radial-gradient(circle, transparent 25%, var(--color-1) 26%),linear-gradient(0deg, transparent 44%, var(--mainBackground) 45%, var(--mainBackground) 55%, transparent 56%), linear-gradient(90deg, transparent 44%, var(--mainBackground) 45%, var(--mainBackground) 55%, transparent 56%);
    background-size: 3em 3em;
    background-color: var(--color-1);
    opacity: 1;
    margin: 0 auto;
    font-family: DDIN, aller, ubuntu, tahoma;
    color: var(--color-9);
    cursor: default
}

p{font-family:Aller,tahoma;font-size:12px;padding:0 10px}
strong{color:var(--mainColor);font-weight:400}
a{text-decoration:none;color:var(--color-9)}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:5px auto;text-align:center}
input{padding:10px;font-family:DDIN;border-radius:var(--surface-radius-sm, 5px);width:200px;color:var(--color-9);border:1px solid var(--color-5);font-size:16px;box-shadow:0 0 0 20px inset var(--mainBackground);max-width:90%}
input:disabled{opacity:.5}

/* ─── A FIELD SHOWS WHEN IT IS FOCUSED ───────────────────────────────────
   The outline is removed at the top of this file, twice, and nothing was put
   back: until now no field on the site gave any sign of being the one you are
   typing into. This is the whole of that fix, and it reaches every field in the
   tree without a page being edited.

   The border rather than an outline, because the box already has one, moving its
   colour costs no layout, and it is how the .fld fields below do it. */
input:focus,textarea:focus,select:focus{border-color:var(--mainColor)}
input,textarea,select{transition:border-color .18s}
/* the label above it follows, so the pair reads as one thing. :has() is not
   load-bearing: without it the label stays grey and the border still moves. */
.fieldTitle:has(+ input:focus),.fieldTitle:has(+ textarea:focus),
.fieldTitle:has(+ select:focus),.fieldTitle:has(+ .passArea input:focus),
.fieldTitle:has(+ div select:focus){color:var(--mainColor)}
textarea{padding:10px;font-family:DDIN;background:var(--mainBackground);border-radius:var(--surface-radius-sm, 5px);width:200px;color:var(--color-9);border:1px solid var(--color-5);font-size:16px}
input[type="radio"]{display:inline-block;accent-color:var(--mainColor);width:auto;box-shadow:none}
label{cursor:pointer;display:table;margin:5px}
section{margin:10px;padding:10px}
select{padding:10px;border-radius:var(--surface-radius-sm, 5px);font-family:DDIN;width:220px;background:var(--mainBackground);color:var(--color-9);border:1px solid var(--color-5);font-size:16px}
select:disabled{opacity:.5}
.header{margin-bottom:60px}
.content{max-width:500px;margin:10px auto;position:relative;padding-bottom:20px}
.center{text-align:center;margin:5px auto 20px;display:block}
.hide{display:none}
.disabled{opacity:.3;filter: grayscale(1);}
.disabled:hover{transform:none!important}
.noCase{display:block;font-size:28px;margin:80px auto 0;text-align:center;font-family:DDIN}
.noCase video{max-width:90%;width:auto;max-height:500px;border:3px solid #fff;border-radius:var(--surface-radius, 10px)}
/* 2026-09-10: the mask runs the whole height of the label, not its bottom
   59%. The border below crosses half a pixel above where the paint used to
   begin, so the line ran through the words instead of stopping either side
   of them. Same two colours; only the geometry changed. Moving the -12px
   pull instead would have shifted the spacing of every field on the site. */
.fieldTitle{margin:0 auto -12px;display:table;border-radius:var(--surface-radius, 10px);z-index:1;position:relative;padding:0 7px;font-size:10px;color:var(--color-6);background-image:linear-gradient(0deg,var(--mainBackground) 0%,var(--color-2) 100%)}
.fieldDescription{width:220px;margin:0 auto 50px;display:table;font-family:'Aller';font-size:10px;color:var(--color-6)}

/* ─── THE FIELD ───────────────────────────────────────────────────────────
   The name starts inside the box and shrinks onto the border once there is
   something to show, so the question is never replaced by the answer.

   It needs no script: the markup carries placeholder=" " -- one space, present
   only while the box is empty -- and :placeholder-shown switches the label.

   Beside .fieldTitle rather than replacing it: 41 files carry inputs and they
   move one at a time. Markup is
       <div class="fld"><input placeholder=" " id="x"><label for="x">Email</label></div>
   and the label MUST follow the input, because the switch is a sibling rule. */
/* width:100% is not redundant beside auto margins: inside a flex column an
   auto side margin cancels the stretch and the field shrinks to its content,
   which is 150px of nothing. Stated, it fills its container in both layouts
   and stays centred in both. */
/* 222, not 300, for as long as the two patterns share the site: it is what
   the old input measures, so a converted field lands exactly where the one it
   replaces stood and a half-moved page shows no seam. They widen together
   later, by changing this number once. */
.fld{position:relative;width:100%;max-width:222px;margin:0 auto 12px}
/* width:100% and the generous inset both override the shared input rule above:
   its 200px would fight the container, and its 20px inset shadow -- the autofill
   defence -- leaves an uncovered stripe on a box this tall. */
/* border-box, stated: box-sizing is set nowhere else in this file, so an input
   adds its padding OUTSIDE the width it is given -- measured at 326 beside a
   298 button. Scoped here rather than on `input`, because the shared rule is
   200px plus 10px padding and every existing form would lose 20px. */
.fld input,.fld textarea{box-sizing:border-box;width:100%;max-width:none;height:50px;padding:17px 13px 4px;
  font-family:DDIN;font-size:15px;color:var(--color-9);background:var(--mainBackground);
  border:1px solid var(--color-4);border-radius:var(--surface-radius-sm, 5px);outline:none;
  /* --mainBackground, not --color-2: the card this sits in IS --color-2, and on
     every light theme the two differ, so a field painted with the card's own
     colour would be invisible on it. The site's own inputs have always used
     this token, and that is why a field reads as a field on theme2. */
  transition:border-color .2s;box-shadow:0 0 0 1000px inset var(--mainBackground)}
.fld textarea{height:auto;min-height:90px;padding-top:20px;resize:vertical}
.fld label{position:absolute;left:14px;top:15px;margin:0;display:block;font-size:15px;
  color:var(--color-5);pointer-events:none;transform-origin:left top;cursor:text;
  transition:transform .18s cubic-bezier(.4,0,.2,1),color .18s}
/* RIGHT TO LEFT: THE NAME BELONGS ON THE SIDE THE ANSWER STARTS FROM.
   translate.jsp adds .rtl to the body for Arabic and Persian -- direction:rtl
   and text-align:right on everything under it. The value followed; the name did
   not, because it is placed with a physical `left`. Measured live at 1440 in
   Arabic: field 652..874, name 666..745 against the left edge while the value
   sat right -- the two halves of one field on opposite sides of it.
   Physical properties with an override, not inset-inline-start: the 1M-install
   WebView renders these same pages and nothing here needs to depend on it. */
body.rtl .fld label{left:auto;right:14px;transform-origin:right top}

.fld input:focus + label,.fld input:not(:placeholder-shown) + label,
.fld textarea:focus + label,.fld textarea:not(:placeholder-shown) + label{transform:translateY(-9px) scale(.68)}
.fld input:focus + label,.fld textarea:focus + label{color:var(--mainColor)}
.fld input:focus,.fld textarea:focus{border-color:var(--mainColor)}
.fld input:disabled{opacity:.5}
/* two fields on one row, which is what a first and last name want */
.fld.pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fld.pair > .fld{margin:0;max-width:none}
/* the Show control a password field carries */
/* THE CONTROL IS THE WORD, NOT A CHIP -- and that is a measured decision.
   It was drawn as a plate in var(--color-3) on a field in var(--mainBackground).
   Contrast of every fill token against that field, read off the live page:

                 theme1   theme2   theme3   theme4
     --color-3    1.19     1.08     1.19     1.29
     --color-4    1.49     1.27     1.49     1.53

   Nothing fills. On the light families the plate is eight levels away from the
   box it sits in and simply is not there, which is exactly the fault that shipped
   a white Google button onto a white card. The word itself is the control: as
   TEXT, --color-6 measures 4.56 to 6.63 against the field on all four, and it
   takes the theme colour when pointed at. The underline says it is pressable
   without inventing a surface. Padding gives it a finger-sized target while the
   plate stays invisible. */
.fld .reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  margin:0;padding:8px;display:flex;align-items:center;justify-content:center;
  appearance:none;-webkit-appearance:none;border:0;font:inherit;
  --xi-size:17px;color:var(--color-6);
  background:none;cursor:pointer;z-index:2;
  border-radius:var(--surface-radius-2, 3px);
  -webkit-tap-highlight-color:transparent;transition:color .2s}
/* ONE GREY, NOT TWO COLOURS.
   The drawing is built in parts: the body takes currentColor, which is why
   setting a colour turned it grey -- but the iris carries .xi-mid, and that class
   mixes ITS colour from the accent rather than inheriting. Measured on the live
   page: .xi-eye rgb(153,153,153) beside .xi-eye.xi-mid rgb(194,155,0). Grey with
   a gold centre reads as unfinished rather than as a decision.

   xi-neutral is the library's own answer and it handles .xi-mid. Its two tones
   are hardcoded greys, so they are pointed at our tokens instead: the body at
   --color-6, and the detail at the field's OWN background so the pupil reads as
   a hole rather than as a second colour. Hover brightens within the same hue
   instead of reaching for the accent, because eight password boxes wanting one
   quiet grey was the point. */
.fld .reveal .xi{--xi-n-body:var(--color-6);--xi-n-detail:var(--mainBackground)}
.fld .reveal:hover .xi{--xi-n-body:var(--color-9)}
/* only the keyboard rings. That is the whole reason this is a button and not a
   span: Chrome shows a focus ring on a CLICKED span, and the owner photographed
   it. */
.fld .reveal:focus-visible{outline:2px solid var(--mainColor);outline-offset:1px}
/* BOTH DRAWINGS ARE IN THE MARKUP AND THE CLASS PICKS ONE.
   The script owns this element and would wipe anything written into it -- which
   is exactly what happened to the word it replaces. A class is the one thing a
   script and a stylesheet can pass between them without either destroying the
   other. The league chevrons on p-ga-6 are built the same way for the same
   reason. The library sets .xi{color:var(--xi-main,currentColor)} and nothing
   defines --xi-main, so the colour above is simply inherited. */
.fld .reveal [data-xi]{display:none}
.fld .reveal [data-xi="balance-show"]{display:block}
.fld .reveal.on [data-xi="balance-show"]{display:none}
.fld .reveal.on [data-xi="balance-hide"]{display:block}
/* and the box gives up the room the control stands in, so a long value never runs
   under it -- the security field does exactly this for its picture and its button.
   :has() is already what the focus rules further up this file are built on. */
.fld input:has(+ label + .reveal){padding-right:46px}
/* and the box gives up the room the control stands in, so a long value never runs
   under it -- the security field does exactly this for its picture and its button.
   :has() is already what the focus rules further up this file are built on. */
.fld input:has(+ label + .reveal){padding-right:56px}

/* ─── THE CHECKBOX ────────────────────────────────────────────────────────
   The site had no real one. The connect page draws `.su` as a div with a PNG
   background and a contrast filter, which cannot be focused, cannot be reached
   from the keyboard and does not follow the theme. This is a real input, so it
   tabs, it takes space, it announces itself, and the tick is drawn. */
input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;
  flex:none;margin:0;padding:0;box-shadow:none;border:2px solid var(--color-5);
  border-radius:var(--surface-radius-2, 3px);background:transparent;cursor:pointer;
  transition:background .18s,border-color .18s;position:relative;vertical-align:middle}
input[type="checkbox"]:checked{background:var(--mainColor);border-color:var(--mainColor)}
input[type="checkbox"]:checked::after{content:"";position:absolute;left:4px;top:0;
  width:5px;height:10px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type="checkbox"]:focus-visible{outline:2px solid var(--mainColor);outline-offset:2px}
input[type="checkbox"]:disabled{opacity:.4;cursor:default}
/* a checkbox and the words beside it are one target, and the words wrap under
   themselves rather than under the box */
.tick{display:flex;align-items:flex-start;gap:9px;width:100%;max-width:222px;margin:0 auto 12px;
  cursor:pointer;font-size:11px;color:var(--color-6);line-height:1.45;text-align:left}
.tick input[type="checkbox"]{margin-top:1px}
.icon{display:table;width:128px;margin:10px auto;opacity:0;animation:zoomIn .5s cubic-bezier(0,0,0,1.2) .25s forwards}
.dialog-icon{display:table;width:128px;margin:-10px auto 10px;opacity:0;animation:zoomIn .75s cubic-bezier(0,0,0,2) .25s forwards}
.audio{position:absolute;top:5px;right:5px;width:18px;height:18px;display:table;z-index:101;border-radius:var(--surface-radius-xs, 2px);cursor:pointer}
.audio[au="0"]{background:var(--mainColor) url(/images/sound_off_v1.png) no-repeat center / cover}
.audio[au="1"]{background:var(--mainColor) url(/images/sound_on_v1.png) no-repeat center / cover}
.help{position:absolute;top:5px;right:25px;width:18px;height:18px;background:var(--mainColor) url(/images/question_v1.png) no-repeat center / cover;border-radius:var(--surface-radius-xs, 2px);display:table;cursor:pointer;z-index:101}
.loading{margin:100px auto;display:table}
.main{display:none}
.p_ga_2_m[demo="0"] .demo{display:none}
.p_ga_2_m[demo="1"] .demo{margin:0;display:table;position:sticky;left:0;top:60px;color:var(--mainColor);font-size:22px;z-index:4}
.p_ga_2_m[demo="1"] .demo span{background:#fff;display:inline-block;color:#000;padding:0 10px;transform:scale(.8);margin-right:-13px;border-radius:var(--surface-radius-sm, 5px)}
.p_ga_2_m[demo="1"] .demo a{background:var(--mainColor);color:#000;display:inline-block;padding:3px 30px 3px 10px;border-radius:var(--surface-radius-sm, 5px);position:relative}
.p_ga_2_m[demo="1"] .demo a::before{content:"";position:absolute;width:12px;height:11px;top:50%;right:10px;background:url(/images/arrow_down_v1.png) no-repeat scroll center / contain;transform:translateY(-50%) rotate(-90deg) scale(.8)}
.round{background:var(--mainColor);color:#111;position:relative;cursor:pointer;display:table}
.round.dark{background:var(--color-4);border-radius:var(--surface-radius-pill, 110px);transform:scale(.7);width:auto;padding:10px 40px}
/* THE END OF A FLOW THAT SENDS AN EMAIL, ON THE PAGE THAT STARTED IT.
   Shared rather than written into p-u-7, because forgot-password, forgot-pin and
   send-activation all end the same way and all three end today by navigating
   somewhere else. It borrows .mediumBox, .icon and .button, so this is the whole
   of the new styling. */
.sent{display:none;text-align:center}
.sent p{margin:0 0 10px}
.sent .to{font-family:DDIN;font-size:15px;color:var(--color-9);margin:0 0 12px;
  word-break:break-all;direction:ltr}
.sent .button{text-decoration:none}

.mediumBox{margin:10px auto;border:2px solid var(--color-3);border-radius:var(--surface-radius, 10px);padding:20px;background:var(--color-2);width:calc(90% - 40px);max-width:300px;opacity:0;animation:zoomIn .5s cubic-bezier(0,0,0,1.2) .1s forwards;position:relative;z-index:1;overflow:hidden}
.mediumBox-title{margin:-20px auto 15px;color:var(--color-5);display:table;background:var(--color-3);padding:5px 30px 7px;border-radius:0 0 50% 50%;animation:fromTop 1s cubic-bezier(0,0,0,1) .9s forwards;opacity:0;text-align:center}
/* THE SCROLLBAR, DECLARED ONCE AT THE ROOT.
   scrollbar-color and scrollbar-width INHERIT, so declaring them on body
   reached the page and nothing nested inside it: on Firefox every inner
   list and dialog fell back to the browser's own bar. From html it reaches
   everything. The track is transparent so a bar over a card does not cut a
   grey channel through it, and both colours are tokens, so the bar belongs
   to whichever of the 22 themes is on. */
html{scrollbar-color:var(--color-4) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:9px;height:9px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
/* the border plus background-clip is what makes a 9px track carry a 5px
   thumb with air around it, which is the whole difference between a bar
   that reads as part of the design and one that reads as the browser's */
::-webkit-scrollbar-thumb{background:var(--color-4);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--color-5);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
.arrow{border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px}
.arrow.right{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
.arrow.left{transform:rotate(135deg);-webkit-transform:rotate(135deg)}
.arrow.up{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}
.arrow.down{transform:rotate(45deg);-webkit-transform:rotate(45deg)}
.button{transition:.3s;background:var(--mainColor);color:#000;padding:10px;border-radius:var(--surface-radius-pill, 100px);text-align:center;margin:5px auto;position:relative;cursor:pointer;display:flex;background-image:var(--surface-sheen-control);width:200px;justify-content:center;align-items:center;max-width:90%;border:none;box-shadow:var(--surface-elevation-control);top:-3px;z-index:1}
.button:active{transition:.3s;box-shadow:0 1px 5px 0 var(--color-1);transform:scale(.95) translate(0px,4px);filter:brightness(.9)}
.button.arrowRight{text-align:left}
.button.arrowRight::before{content:"";position:absolute;width:20px;height:20px;top:13px;right:10px;background:url(/images/arrow_down_v1.png) no-repeat scroll center / contain;transform:rotate(-90deg)}
.button.arrowRight::after{content:"";position:absolute;width:20px;height:47px;top:0;right:20px;border-left:5px solid var(--color-2)}
.button.dark{background:var(--mainBackground);transform:scale(.85);color:var(--color-5);border:var(--surface-border-w) solid var(--surface-border);transition:.3s;width:auto;padding:2px 20px;margin:10px auto;border-radius:var(--surface-radius-pill, 100px);max-width:max-content;min-width:auto;box-shadow:none;z-index:0;animation:fadeIn 1s cubic-bezier(0,0,0,1.2) 2s forwards;opacity:0}
.button.dark:active{transform:scale(.8);transition:.3s}
.button.dark.arrowRight::before{content:"";position:absolute;width:20px;height:20px;top:13px;right:10px;background:url(/images/arrow_down_v1.png) no-repeat scroll center / contain;transform:rotate(-90deg) scale(.75)}
.button.dark.arrowRight::after{display:none}
.backSmallButton{background:var(--mainColor);height:30px;width:30px;display:block;margin:10px;cursor:pointer;text-align:center;line-height:30px;color:var(--color-2);opacity:0;animation:fromRight .5s cubic-bezier(0,0,0,1.2) .5s forwards;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);border-radius:var(--surface-radius-2, 3px)}
.backSmallButton::before{content:"Back";color:var(--color-1);width:30px;text-align:center;display:block;padding-top:18px;font-size:9px;font-family:Aller;font-weight:700;display:none}
.button::after{content:'';display:block;width:1.2em;height:1.2em;position:absolute;left:calc(50% - 0.75em);top:calc(50% - 0.75em);border:3px solid transparent;border-right-color:#000;border-radius:50%;animation:none;opacity:0}
@keyframes button-anim {
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
.button.button-loading{color:transparent!important}
.button.button-loading::after{opacity:1;animation:button-anim .7s linear infinite}
.moreInfo{padding:5px 10px;border:1px solid var(--color-6);display:table;margin:50px auto 0 10px;border-radius:var(--surface-radius-sm, 5px);background:var(--color-1)}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.progressbar{counter-reset:step;padding:0;height:50px;margin-bottom:20px;opacity:0;animation:fromTop 1s cubic-bezier(0,0,0,1.5) .5s forwards}
.progressbar li{list-style-type:none;float:left;font-size:12px;position:relative;text-align:center;color:var(--color-5)}
.progressbar li:before{height:10px;aspect-ratio:1;content:counter(step);counter-increment:step;display:block;text-align:center;margin:5px auto 10px;background:var(--color-5);padding:5px;color:transparent;border-radius:var(--surface-radius-circle, 100px);line-height:11px;position:relative;z-index:2;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);box-shadow:0 0 5px var(--color-1)}
.progressbar li:after{width:100%;height:1px;content:'';position:absolute;background-color:var(--color-5);top:15px;left:-50%;z-index:-1}
.progressbar li:first-child:after{content:none}
.progressbar li.active a{color:#666}
.progressbar li.current{color:var(--color-9)}
.progressbar li.current a{color:var(--mainColor)}
.progressbar li.current:before{background-color:var(--color-9)}
.progressbar-close span{position:absolute;top:0;right:0;width:25px;height:25px;background:var(--mainColor) url(/images/main-close-8625.png) no-repeat scroll center / 40%;display:block}
/* HIDDEN MEANS HIDDEN, ANYWHERE.

   The browser's own rule is (0,1,0) and loses to any component rule that sets
   display, so the attribute only worked on elements nobody had styled -- and
   the tree grew two private copies of this line to get around that
   (.show[hidden] in p-ga-6-main-v2.css, .p_ga_8_post_list_v2[hidden] in its
   own file). Declared once, here, so the next one does not need a third.

   Audited before it was written: six elements in the tree carry the attribute,
   none of them is given a display by CSS while carrying it, and none is shown
   by jQuery. Nothing on screen changes. `type="hidden"` is a value, not this
   attribute, and is unaffected. */
[hidden]{display:none!important}
.tab *{transition:.2s}
.tab{background:var(--color-3);display:flex;padding:0;margin:0;font-size:13px;line-height:20px;opacity:0;animation:fromTop .5s cubic-bezier(0,0,0,1.1) .1s forwards;position:relative;z-index:2;overflow-x: clip;}
.tab ul{background:blue}
.tab li{display:flex;flex-grow:1;text-align:center;justify-content:center;cursor:pointer;padding:5px 0;background: linear-gradient(174deg, var(--color-3),  var(--color-4));overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])){--has-multi-tabs:initial}
.tab li.selected{background:var(--color-1);position:relative;border-radius:var(--surface-radius-sm, 5px);box-shadow: 0 33px 15px -38px inset var(--color-8),0 -33px 15px -38px inset var(--color-8),0 0 10px rgba(0,0,0, .1);border:none;
    /* NO SCALE. A transform moves paint, never layout, so a scaled tab in a flex
       row covers its neighbours -- measured at nine pixels each side -- and takes
       the clicks meant for them. The selected tab is already unmistakable: its
       own background, the inset highlight above and below, the accent underline
       from ::before, and accent text. */
    border-radius: var(--surface-radius-sm, 5px);position: relative;z-index: 2;}
.tab:not(:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"]))) li.selected{transform:none!important;box-shadow:none;border-radius: 0;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])) li:not([style*="display: none"]):first-child{transform-origin:left;border-bottom-left-radius: 0;border-top-left-radius: 0;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])) li:not([style*="display: none"]):not(:has(~ li:not([style*="display: none"]))){transform-origin:right;border-bottom-right-radius: 0;border-top-right-radius: 0;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])) li:not([style*="display: none"]):is(
:nth-child(2),:nth-child(3),:nth-child(4)
){}.tab li.selected::before{content:"";width: 50px;height:1.5px;position:absolute;left:50%;bottom:4px;transform:translateX(-50%);background-image: linear-gradient(135deg,transparent,var(--mainColor),transparent);}
.tab li.selected a{color:var(--color-9)}
/* THE WHOLE TAB IS THE CONTROL, NOT JUST THE WORD.

   Measured on /account/log/list/: the tab is 162x30 and the <a> inside it 34x20,
   because the li is a centring flex container and a block-level child in one
   shrinks to its content. Four fifths of every tab did nothing, which is the
   "only the title works" report.

   The anchor stretches instead, and keeps the li's own truncation so a long
   label still ellipses rather than escaping. Tab strips whose handler sits on
   the li have no anchor and are unaffected. */
.tab li > a{
    flex:1 1 auto;
    align-self:stretch;
    /* The li keeps its 5px of vertical padding because tab strips with no anchor
       -- the match page -- are sized by it. The anchor reaches over that padding
       instead, so the full height of the tab is the link and nothing moves. */
    margin:-5px 0;
    padding:5px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.tab li:last-child{}
.table .header{background:var(--mainColor);display:grid;margin-bottom:5px;grid-template-columns:1fr 1fr 1fr auto auto auto auto;position:sticky;top:49px;color:#000;z-index:1;opacity:0;animation:fromTop .5s cubic-bezier(0,0,0,1.1) .25s forwards;background-image:linear-gradient(135deg,#fff3,#0003)}
.table .cell{padding:10px;justify-self:normal;text-align:center}
.table .row{opacity:0;background:var(--color-2);display:grid;margin:2px auto;grid-template-columns:1fr 1fr 1fr auto auto auto auto;align-items:center;justify-content:center;align-content:center;justify-items:start;background-image:linear-gradient(135deg,#ffffff1a,#0000001a);border-radius:var(--surface-radius-sm, 5px)}
.table .row.animated{animation:fromBottom .5s cubic-bezier(0,0,0,1) 0s forwards}
.animated{animation:fromBottom .5s cubic-bezier(0,0,0,1) 0s forwards}
.table .row:nth-child(even){background-color:var(--color-3)}
.table .row.one{background:var(--color-3)}
.table .row.two{background:var(--color-2)}
.animatedRows{opacity:0}
.animatedRows.animated{animation:fromBottom .5s ease-in-out 0s forwards}
.am-bo{display:inline-flex;align-items:center;margin:0 5px}
.am-vc{display:flex;align-items:center}
.am-cus,.am-cut{transform:scale(0.9);opacity:.75;padding-right:2px}
.am-ic.coin{float:left;margin-right:3px;background:url(/images/coin_v1.png) no-repeat scroll center top / contain}
.am-ic.gem{float:left;margin-right:5px;background:url(/images/gem_v3.png) no-repeat scroll center top / contain}
.am-bo[am-ic="12"] .am-ic,.am-in-bo[am-ic="12"] .am-ic{width:12px;height:12px}
.am-bo[am-ic="15"] .am-ic,.am-in-bo[am-ic="15"] .am-ic{width:15px;height:15px}
.am-bo[am-ic="16"] .am-ic,.am-in-bo[am-ic="16"] .am-ic{width:16px;height:16px}
.am-bo[am-ic="18"] .am-ic,.am-in-bo[am-ic="18"] .am-ic{width:18px;height:18px}
.am-bo[am-ic="30"] .am-ic,.am-in-bo[am-ic="30"] .am-ic{width:30px;height:30px}
.am-bo[am-ic="40"] .am-ic,.am-in-bo[am-ic="40"] .am-ic{width:40px;height:40px}
.am-bo[am-ic="80"] .am-ic,.am-in-bo[am-ic="80"] .am-ic{width:80px;height:80px}
.am-in-bo{position:relative;padding:5px 35px 5px 15px;font-size:22px;border-radius:var(--surface-radius-sm, 5px);display:table;cursor:pointer;background:var(--mainColor);color:#000;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);margin:auto}
.am-in-bo.disabled{opacity:0!important}
.am-in-bo .am-vc{display:flex;align-items:center}
.am-in-bo .am-va{width:75px;height:30px;margin-left:10px;padding:0;font-family:DDIN;font-size:21px;background:none;border:none;border-radius:unset;box-shadow:none;text-align:left}
.am-in-bo .am-up{position:absolute;top:3px;right:3px;width:35px;height:calc(50% - 3px);background:url(/images/arrow_up_v1.png) no-repeat scroll center / 15px;transition:.8s}
.am-in-bo .am-up:active{transform:scale(1.5);transition:.2s}
.am-in-bo .am-do{position:absolute;bottom:3px;right:3px;width:35px;height:calc(50% - 3px);background:url(/images/arrow_down_v1.png) no-repeat scroll center / 15px;transition:.8s}
.am-in-bo .am-do:active{transform:scale(1.5);transition:.2s}
.chip{position:relative;display:inline-block;margin:5px;width:40px;height:40px;border-radius:50%;line-height:43px;text-align:center;color:#fff;font-size:14px;cursor:pointer;background-image:url(/images/UI-187WL-min.png);background-size:cover;font-family:DDIN;box-shadow:1px 1px 5px #333;transition:1s;z-index:1;transform:scale(.9);background-color:#673ab7}
.chip:hover{transform:scale(1.6) rotate(10deg);transition:.2s;position:relative;z-index:2}
.chip.selected{box-shadow:0 0 0 2px black,0 0 0 4px var(--mainColor);transform:scale(1.2);z-index:2}
.chip[am="0.10"]{background-color:#3f51b5}
.chip[am="0.1"]{background-color:#3f51b5}
.chip[am="0.50"]{background-color:#388e3c}
.chip[am="0.5"]{background-color:#388e3c}
.chip[am="1"]{background-color:#296821}
.chip[am="5"]{background-color:#4d9ed8}
.chip[am="10"]{background-color:#135f96}
.chip[am="25"]{background-color:#a2574b}
.chip[am="100"]{background-color:#c62828}
.chip[am="200"]{background-color:#5e35b1}
.chip[am="500"]{background-color:#9c27b0}
.game-result{position:absolute;right:0;left:0;width:0;height:0;margin:0 auto;opacity:0;background:#000000e6;text-align:center;display:table;padding-bottom:10px}
.game-result-close{position:absolute;top:5px;right:5px;width:30px;height:30px;background:url(/images/UI-197.png) no-repeat scroll center / cover;z-index:1;border-radius:var(--surface-radius-2, 3px);cursor:pointer}
.game-result-image{position:absolute;top:0;margin:0;z-index:-1}
.game-result-image::before{content:"";width:100%;height:60%;position:absolute;background:linear-gradient(0deg,#000 0%,#3330 100%);bottom:0;left:0}
.game-result-image img{width:100%}
.game-result-text{position:relative;background:var(--mainColor);padding:10px 0;color:#000;margin-bottom:50px}
.game-result-chip{position:relative;background-color:#870284;background-image:url(/images/UI-187-min.png);width:200px;height:200px;line-height:210px;margin:0 auto!important;display:table;font-size:52px;transform:scale(.5)}
.game-result-chip:hover{transform:rotate(5deg)}
.game-result-reward{margin:75px auto 25px;display:table;font-size:69px;color:#fff;transform:scale(.5)}
.game-result-reward:hover{transform:rotate(5deg)}
.game-result.game-result-win{animation-name:zoomOut;animation-duration:1s;background:#030106;border-radius:var(--surface-radius-sm, 5px);box-shadow:0 0 30px 70px #9c27b042}
.game-result.game-result-win .game-result-text{background:none;font-size:72px;margin:10px auto -20px;color:#fff;text-shadow:0 0 10px #aaa;opacity:0}
.game-result.game-result-win .game-result-image{background:url(/images/game-result-win-v297.jpg) no-repeat center / cover;border-radius:var(--surface-radius-sm, 5px);height:160px;width:100%}
.game-result.game-result-lose{animation-name:zoomIn;animation-duration:1s;background:#030106;border-radius:var(--surface-radius-sm, 5px);box-shadow:0 0 10px #000}
.game-result.game-result-lose .game-result-close{background:url(/images/UI-198.png) no-repeat scroll center / cover}
.game-result.game-result-lose .game-result-text{display:flex;align-items:center;justify-content:center;background:none;color:#eee;font-size:27px;top:160px}
.game-result.game-result-lose .game-result-image{background:url(/images/game-result-gameover.jpg) no-repeat center / cover;border-radius:var(--surface-radius-sm, 5px);height:160px;width:100%}
.game-result-inplace{font-size:16px;display:flex}
.game-result-inplace-text{margin-right:2px;color:var(--mainColor)}
.game-result-inplace-reward{color:#fff}
.game-reward{position:absolute;padding:5px 10px!important;background:var(--mainColor);box-shadow:0 0 10px #000;border-radius:var(--surface-radius-pill, 100px)!important;display:flex;z-index:1000;border:2px solid var(--color-4);min-width:30px;text-align:center;justify-content:center;color:#000}
.game-reward-reward{margin-left:2px;font-size:16px;color:#fff}
.game-reward-chip{position:absolute;width:30px;height:30px;line-height:30px;font-size:12px;background:#870284 url(/images/UI-187-min.png) no-repeat scroll center / cover;border-radius:100%!important;text-align:center;z-index:1000}
.copy-notification{position:absolute;background-color:var(--color-9);color:var(--color-1);padding:5px 10px;border-radius:var(--surface-radius-pill, 50px);font-size:12px;z-index:1000;transition:opacity .5s ease,display 0s 2s;transform:translate(10px,-50%);box-shadow:0 0 10px}
@keyframes zoomIn {
0%{opacity:0;transform:scale(0.3)}
100%{opacity:1}
}
@keyframes zoomOut {
0%{opacity:0;transform:scale(2)}
100%{opacity:1}
}
@keyframes fromTop {
0%{opacity:0;transform:translateY(-100%)}
100%{opacity:1}
}
@keyframes fromBottom {
0%{opacity:0;transform:translateY(100%) scale(.75)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeOut {
0%{opacity:1}
100%{opacity:0}
}
@keyframes fadeIn {
0%{opacity:0}
100%{opacity:1}
}
@keyframes fromLeft {
0%{opacity:0;transform:translateX(-100%) scale(.8)}
100%{opacity:1}
}
@keyframes fromRight {
0%{opacity:0;transform:translateX(100%) scale(.8)}
100%{opacity:1}
}
@keyframes pulse {
50%{transform:scale(1.2)}
}
@keyframes pulse-back {
50%{transform:scale(.75)}
}
.promoColumnLeft{width:150px;position:fixed;left:50%;border-radius:var(--surface-radius-sm, 5px);display:block;transform:translateX(calc(-50% - 340px));max-height:calc(100vh - 50px);overflow-y:auto;top:50px}
.promoColumnLeft2{width:200px;position:absolute;left:50%;border-radius:var(--surface-radius-sm, 5px);display:block;transform:translateX(calc(-50% - 525px));height:100%}
.promoColumnLeft2 img{max-width:100%;float:right;margin:10px auto;border-radius:var(--surface-radius, 10px);box-shadow:0 0 3px var(--sportColor);position:sticky;top:10px}
.promoColumnRight{width:150px;position:absolute;right:50%;transform:translateX(calc(50% + 340px));display:block;top:0}
.promoColumnRight2{width:200px;position:absolute;right:50%;border-radius:var(--surface-radius-sm, 5px);display:block;transform:translateX(calc(50% + 525px))}
.promoColumnRight2 img{max-width:100%;float:right;margin:10px auto;border-radius:var(--surface-radius, 10px);box-shadow:0 0 3px var(--sportColor)}
.promoColumnRight2 .indexMoreInfo{float:left;position:sticky;width:100%}
.promoColumnRight2 .indexMoreInfo a{display:block;margin-bottom:5px;transition:1.5s;padding:5px 10px;border:1px solid var(--color-4);border-radius:var(--surface-radius, 10px);background:var(--color-1)}
.promoColumnRight2 .indexMoreInfo a:hover{transition:.5s;color:var(--mainColor)}
.promoColumnRight2 .footer-license{display:table;font-family:aller;font-size:10px;opacity:.5;padding:10px}
.promoColumnRight2 .footer-lgs-main{display:flex;flex-wrap:wrap;padding:0 5px}
.promoColumnRight2 .footer-lgs{height:16px;background:#fff;margin:2px;padding:4px;border-radius:var(--surface-radius-xs, 2px);opacity:.5;transition:.4s;filter:grayscale(1)}
.promoColumnRight2 .footer-lgs:hover{opacity:.95;transition:.4s;transform:scale(1.2);box-shadow:0 0 10px var(--color-3);z-index:2}
.promoColumnRight2 .footer-lgs img{height:100%;margin:0;padding:0;box-shadow:none}
.promoColumnRight2 .official-logos p{opacity:.5;font-size:10px}
@media only screen and (max-width: 820px) {
.promoColumnLeft{position:relative;left:auto;transform:initial;top:auto;width:100%;overflow-x:scroll;padding:0;margin-bottom:-10px;display:none}
.promoColumnRight{right:auto;transform:none;text-align:center;width:100%;overflow:hidden;position:relative;margin-top:-10px;z-index:1;background:var(--color-1)}
}
@media only screen and (max-width: 1240px) {
.promoColumnLeft2{display:none}
.promoColumnRight2{display:none}
}
.ui-dialog .ui-widget-content{border:0}
.ui-dialog .ui-dialog-titlebar{display:none}
.ui-dialog .ui-dialog-content{padding:5px;font-family:Aller;font-size:13px;color:#141414;background:var(--mainColor)}
.ui-dialog .ui-dialog-buttonpane{margin:0;padding:0}
.ui-dialog .ui-dialog-buttonpane button{font-family:Aller;font-size:14px;color:#333;background:var(--mainColor);border-radius:var(--surface-radius-pill, 100px);padding:10px;margin:0 5px;border:none;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);min-width:75px;box-shadow:0 0 30px #eee}
.ui-button .ui-button-text{padding:0!important}
.mf_bg{position:fixed;top:0;left:0;width:100%;height:100%;background:#1b1b1cbf;display:inline-block;z-index:1000}
.mf_p{position:fixed;top:0;left:0;width:100%;height:100%;font-family:DDIN;font-size:16px;display:table;z-index:1000;color:var(--color-9)}
.mf_p .mf_p1{height:100%;vertical-align:middle;display:table-cell}
.mf_p .mf_p2{position:relative;width:70%;max-width:480px;height:80%;margin:0 auto;text-align:center;display:block}
.mf_p .mf_cl{position:absolute;top:-41px;right:0;width:38px;height:38px;background:var(--mainColor) url(/images/main-close-8625.png) no-repeat scroll center / 33%;display:inline-block;cursor:pointer;border-radius:var(--surface-radius-2, 4px)}
.mf_p .nano{width:100%;height:100%;background:var(--color-1);display:block;border-radius:var(--surface-radius-sm, 5px);box-shadow:0 0 30px #000}
.mf_p .nano-content{margin:0;padding:0;overflow-x:hidden;overflow-y:scroll;display:inline-block}
.mf_p .nano-pane{background:#ffffff1a none repeat scroll 0 0!important}
.mf_p .nano-slider{background:#fff3 none repeat scroll 0 0!important}
@media only screen and (max-width: 820px) {
.mf_p .mf_p2{width:90%}
}

/* 2026-09-10: body is a block formatting context so the header's top margin does not collapse through it;
   without this the body box moved 60px when pull-to-refresh prepended its bubble (a 0.07 layout shift on every page). */
body{display:flow-root}

/* A BACKDROP FOR A SITE PEOPLE PLAY ON.

   A tile was one motif and hairline diagonals were another; both are wallpaper,
   and wallpaper is the wrong idea behind dense data. Nothing here repeats.

   Three layers, all curved, all in the theme's own accent:

     - a wide bloom falling from the top left,
     - a second rising from the bottom right,
     - and between them a soft ARC: a radial gradient that is transparent in the
       middle and at the edge, so what is drawn is a band -- a curve sweeping
       across the page rather than a straight edge anywhere.

   Fixed, so they do not travel with the list, and stronger than the first pass:
   a backdrop nobody can see is a backdrop that does not do its job.

   The alphas live in their own tokens because a hex custom property cannot take
   one without color-mix, which this tree avoids -- the app runs on a million
   unaudited devices -- and it means every theme carries its own three. */

/* ==========================================================================
   THREE FEELS, EACH AS A DARK AND LIGHT PAIR

   charcoal  theme13 / theme14   matte, no edges, one fall of light
   paper     theme11 / theme12   printed, hairline edge, fibre mottle
   flat      theme17 / theme5    square, drawn edge, no gradient at all

   The surfaces themselves are set in each theme's own block above, as
   token overrides. These are only the page grounds, which cannot be a
   token because they are whole layer stacks.
   ========================================================================== */
html[main-theme="theme13"] body,
html[main-theme="theme14"] body {
    background:
        linear-gradient(180deg, var(--mainGlow), transparent 42%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--color-1);
}
html[main-theme="theme11"] body,
html[main-theme="theme12"] body {
    background:
        radial-gradient(52% 38% at 18% 12%, var(--mainGlow), transparent 60%),
        radial-gradient(44% 34% at 82% 44%, var(--mainGlow2), transparent 62%),
        radial-gradient(60% 42% at 46% 92%, var(--mainGlow), transparent 64%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--color-1);
}
html[main-theme="theme17"] body,
html[main-theme="theme5"] body {
    /* FLAT means flat. One colour, no layers. */
    background: none;
    background-color: var(--color-1);
}

html[main-theme="theme21"] body,
html[main-theme="theme20"] body {
    background:
        radial-gradient(100% 62% at 8% -12%, var(--mainGlow), transparent 56%),
        radial-gradient(78% 130% at 50% 118%, transparent 52%, var(--mainArc) 63%, transparent 74%),
        radial-gradient(90% 58% at 96% 106%, var(--mainGlow2), transparent 58%);
    background-attachment: fixed, fixed, fixed;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-color: var(--color-1);
}


/* TOOLTIP -- design system, 2026-09-11, at the product owner's request.

   The browser's own title= tooltip is unstyled, about a second late, and does
   not exist at all on a touch screen. This frontend is also a WebView app with
   over a million installs, so most of the people who see it have no pointer to
   hover with. This one shows on hover, on keyboard focus, and on press.

   Anything that wants one carries data-tip="the words"; nothing else changes.
   Add aria-label with the same words and do NOT also set title, or the browser
   draws its own bubble on top of this one.

   A bubble centred on something near the edge of the page hangs past it, and an
   absolutely positioned box that hangs past the edge makes the whole page
   scroll sideways. data-tip-x="start" or "end" aligns the bubble to that edge
   instead of centring it; the arrow stays on the thing it belongs to. */
[data-tip]{position:relative}
[data-tip]:before,[data-tip]:after{opacity:0;pointer-events:none;transition:opacity .12s ease-out;z-index:20}
[data-tip]:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%)}
/* THE BUBBLE ITSELF, ONCE. The attribute above draws it with ::after, which an
   SVG element does not have -- so a chart dot's name has to be a real element,
   and .xw_tip is that element wearing this same look rather than a second one.
   Anything else that cannot use the attribute joins this list; nothing copies
   the declarations. */
[data-tip]:after,
.xw_tip{width:max-content;max-width:min(62vw,190px);padding:5px 8px;border-radius:var(--surface-radius-sm, 6px);background:var(--color-4);color:var(--color-9);font-size:11px;line-height:1.35;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.xw_tip:after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--color-4)}
[data-tip]:before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--color-4)}
[data-tip][data-tip-x="start"]:after{left:0;transform:none}
[data-tip][data-tip-x="end"]:after{left:auto;right:0;transform:none}
[data-tip]:hover:before,[data-tip]:hover:after,
[data-tip]:focus-visible:before,[data-tip]:focus-visible:after,
[data-tip]:active:before,[data-tip]:active:after{opacity:1}
@media (prefers-reduced-motion:reduce){[data-tip]:before,[data-tip]:after{transition:none}}

/* PULL TO REFRESH -- an override, so the vendor file stays untouched.

   mk-pullfresh draws its indicator in hard-coded #aaa: a hairline ring, a
   hairline arrow, and -- while it is working -- a single 6px dot orbiting
   inside the ring, which reads as something broken rather than as something
   loading. On the dark themes the whole thing is washed out and on the light
   one it is barely there.

   Rewritten in the tokens, with the ring given the same surface, border and
   shadow as every other chip on the site, and the dot replaced by the arc
   that everybody already recognises as waiting. */
.mk-pullfresh-bubble .mkpf-indicator{box-sizing:border-box;border:1px solid var(--color-4);background:var(--color-2);box-shadow:0 2px 10px rgba(0,0,0,.28)}
/* THE ARROW, redrawn rather than recoloured.

   The vendor draws it as a 1px line twenty pixels tall inside a thirty-pixel
   circle, with a small square rotated onto the end. It reads as a skewer: too
   long, too thin for the weight of everything else on the site, and the head
   too small to be a head. Rebuilt at the same weight as the chevrons on the
   bracket -- a 2px stem twelve pixels long with a proper arrowhead under it --
   and both parts take currentColor, so the state change is one property. */
.mk-pullfresh-bubble .mkpf-indicator{color:var(--color-8)}
.mk-pullfresh-bubble .mkpf-arrow-down{border:0;background:currentColor;width:2px;height:12px;top:7px;left:14px;border-radius:var(--surface-radius-xs, 1px)}
.mk-pullfresh-bubble .mkpf-arrow-down:after{content:"";position:absolute;left:-4px;top:8px;width:9px;height:9px;border:2px solid currentColor;border-width:0 2px 2px 0;border-radius:0 0 var(--surface-radius-xs, 2px) 0;transform:rotate(45deg)}
/* Far enough to let go: the arrow turns the site's colour as well as turning
   over, so the state is not carried by rotation alone. */
[data-mkpf-state=ready] .mk-pullfresh-bubble .mkpf-indicator{color:var(--mainColor)}
/* The arc. The vendor's orbiting dot is switched off rather than restyled. */
.mk-pullfresh-bubble .mkpf-spinner{box-sizing:border-box;border:2px solid var(--color-4);border-top-color:var(--mainColor);background:none}
.mk-pullfresh-bubble .mkpf-spinner:after{display:none}
@media (prefers-reduced-motion:reduce){
    .mk-pullfresh-bubble .mkpf-spinner{animation-duration:2.4s}
    .mk-pullfresh-bubble .mkpf-icon-wrapper{transition:none}
}

/* IN-PAGE JUMPS EASE, AND THEY DO NOT LAND UNDER THE HEADER.
   -------------------------------------------------------------------------
   A link to an anchor on the same page used to teleport, which is the one
   place on this site where something still snapped. Site-wide, so every such
   link gets it without each page remembering to.

   scroll-padding-top is the other half and matters more than the easing: the
   header is position:fixed and 51px tall -- measured on the live country page,
   not guessed -- so without it a jump puts the heading it aimed at UNDER the
   header and the reader lands on the wrong thing. The extra 10px is so the
   target sits clear of the edge rather than flush against it.

   Two places must NOT ease and are handled in their own files: the scroll
   restores in p-ga-6-restore-v2.js and p-ga-8-restore-v2.js, which put the
   reader back where they were. Animating those would scroll the whole page
   down in front of them every time they come back. */
html{scroll-behavior:smooth;scroll-padding-top:61px}
/* ...except while something is driving the scroll itself.

   jQuery's .animate({scrollTop}) writes a new value every frame, and with
   smooth in force the browser answers each write with an eased scroll of its
   own -- two animations chasing each other down the same axis. p-ga-6-custom.js
   puts this on for the length of such an animation and takes it off after; the
   easing is still there, it just belongs to one of them. */
html.xw_scroll_instant{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================================
   THE PAGE DOES NOT MOVE WHEN A DIALOG OPENS

   A dialog locks the page behind it, the scrollbar goes with the scrolling, and
   the content widens by exactly the bar -- measured here at 15px -- so the text
   under the overlay jumps sideways the moment it appears, and jumps back when it
   closes. It reads as the page flinching.

   Reserving the gutter always means there is nothing to give back. One
   declaration, on the element that owns the scrollbar, for every page.

   Phones are unaffected: their scrollbars are overlays with no width, so no
   gutter is reserved and nothing changes.
   ========================================================================== */
html{scrollbar-gutter:stable}

/* ==========================================================================
   THE TRAIL AT THE TOP OF A SPORT PAGE

   Home > Baseball > United States > Il. Every step that goes somewhere should
   say so on hover; the one naming the page you are already on should not, and
   nor should a step the page rendered as plain text rather than a link.

   a[href] is exactly that test, and it needs no list of which crumb is a link on
   which page -- p-ga-13 renders .le_na as a div and p-ga-14 as an anchor, and
   this is right on both without knowing that.

   Written once for the three pages that carry the trail rather than three times
   in three stylesheets, which is how p-ga-12, p-ga-13 and p-ga-14 already hold
   three identical copies of the .bo_in rule.
   ========================================================================== */
/* THE TRAIL, WRITTEN ONCE.

   Three places print one: the header of the sport, country and league pages
   (.bo_in), the foot of the country page, and the match page's end card. They
   had three separators between them -- "/", ">" and a pill with a chevron -- so
   the same path read as three different things depending where you met it.

   The header is the reference and is not changed: it already starts at Home and
   already separates with "/". These declarations are measured off it -- links in
   --color-9 with no underline, the separator --color-6 with 5px either side,
   hover --mainColor with a 1px underline at 3px offset.

   THE RULES, and they are the same wherever it appears:
     * Home first, always
     * every rung that resolves is a link
     * a rung that will not resolve is left out, never printed dead
     * the page you are on is text, not a link -- the one item a trail must
       never link

   No box of any kind. A border says "these things are separate"; a trail is one
   path and the "/" is what says so.

   Declared here rather than in a page stylesheet for the same reason [hidden]
   is: every page loads this file, and a second copy is how two surfaces drift
   apart. */
.xw_trail{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  font-size:16px;
  color:var(--color-9);
}
.xw_trail a{
  color:var(--color-9);
  text-decoration:none;
  cursor:pointer;
  transition:color .16s ease;
}
.xw_trail a:hover,
.xw_trail a:focus-visible{
  color:var(--mainColor);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.xw_trail a:focus-visible{outline:2px solid var(--mainColor);outline-offset:2px}
.xw_trail [aria-current="page"]{color:var(--color-7)}
.xw_trail .divider{color:var(--color-6);margin:0 5px;user-select:none}

/* THE QUIET VOICE -- the foot of a page rather than the head of one. Loudness is
   the one thing that genuinely differs, so it is the only thing here. */
.xw_trail_q{font-size:11px;color:var(--color-7)}
.xw_trail_q a{color:var(--color-8)}

@media (prefers-reduced-motion:reduce){
  .xw_trail a{transition:none}
}

/* Nothing is declared at rest. A transparent underline waiting to be revealed
   was tried first and did not take -- measured, the colour computed white, so
   the trail would have carried a permanent white underline, worse than before.
   Only the hover state is written, so there is nothing to fail. */
.p_ga_12_m .bo .bo_in a[href],
.p_ga_13_m .bo .bo_in a[href],
.p_ga_14_m .bo .bo_in a[href]{
  transition:color .16s ease;
}
.p_ga_12_m .bo .bo_in a[href]:hover,
.p_ga_13_m .bo .bo_in a[href]:hover,
.p_ga_14_m .bo .bo_in a[href]:hover{
  color:var(--mainColor);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
@media (prefers-reduced-motion:reduce){
.p_ga_12_m .bo .bo_in a[href],
.p_ga_13_m .bo .bo_in a[href],
.p_ga_14_m .bo .bo_in a[href]{transition:none}
}
/* The separator is decoration and used to carry the same weight as the steps:
   measured, #fff at 16px, identical to the links beside it. Muted so the trail
   reads as steps with marks between them rather than one alternating line.
   #999 on this ground is 9.6:1, so it is quiet, not faint.

   Here rather than in the two page stylesheets, for the same reason the hover
   rule above is here. p-ga-12 carries the same trail markup but renders no
   divider at all, so it is not listed. */
.p_ga_12_m .bo .divider,
.p_ga_13_m .bo .divider,
.p_ga_14_m .bo .divider{color:var(--color-6)}


/* ===================== A NOTE IS NOT A DIALOG ===========================

   A message that belongs TO A FIELD stays with the field. "Invalid Current
   Pin" appears under the keypad while the reader's finger is still on it; a
   modal would make them close a window they have already read before they can
   type again, and would cut the sentence loose from the thing it is about.

   So this family exists on purpose and is named on purpose. If it shared the
   dialog's classes, the next person would have no way to tell which messages
   are interruptions and which are captions, and the two would drift into each
   other. .xw_note is the hook for designing inline messages properly when
   there is time: today it does the least that makes them read as one thing.

   THE CLASS IS ON AN INNER SPAN, not on the message div, because these are
   copied with msg.html($('#id').html()) -- which takes the children and leaves
   the div behind. A class on the div would never reach the slot it styles.

   The icon is a 24-grid drawing at 16px, sized with --xi-size as the library
   requires; the 128px spot pictures are for dialogs and only for dialogs. */
.xw_note{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:start;
}
.xw_note_i{
    --xi-size:16px;
    flex:0 0 auto;
    line-height:0;
}
/* the colour stays with whatever the page already gives the message: a note
   that repainted itself would fight the page it sits in */
.xw_note_bad .xw_note_i{color:var(--rate-down, #ff5050)}