BODY {
    height: 100%;
    margin: 10px;
    font-weight: normal;
    color: #333333;
}

.GridViewScrollHeader TH, .GridViewScrollHeader TD {
    padding: 10px;
    font-weight: normal;
    white-space: nowrap;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    background-color: #F4F4F4;
    color: #999999;
    text-align: left;
    vertical-align: bottom;
}

.GridViewScrollItem TD {
    padding: 10px;
    white-space: nowrap;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    background-color: #FFFFFF;
    color: #444444;
}

.GridViewScrollItemFreeze TD {
    padding: 10px;
    white-space: nowrap;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    background-color: #FAFAFA;
    color: #444444;
}

.GridViewScrollFooterFreeze TD {
    padding: 10px;
    white-space: nowrap;
    border-right: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    background-color: #F4F4F4;
    color: #444444;
}
/* ============================================================================
   Klowns design tokens — added for the dashboard redesign.
   Color is spent on MEANING, not on identity. Before this, every section had
   its own gradient (seventeen on one screen), so nothing could stand out and
   the eye had nowhere to land. Sections are now all one neutral card; the only
   colored things on a page are the ones telling you something:
       green  you are up / you won / money coming to you   (also the one primary action)
       red    you are down / you lost / money you owe
       blue   this row is you
       amber  this needs you
   Anything that is merely a surface is grey.
   ========================================================================= */
:root {
    --kt-ink: #12171c;
    --kt-ink2: #4a545e;
    --kt-ink3: #8a939c;
    --kt-line: #e3e6ea;
    --kt-surface: #fff;
    --kt-canvas: #f4f5f7;
    --kt-accent: #1a6b2c;
    --kt-accent-soft: #eaf4ec;
    --kt-up: #1a6b2c;
    --kt-dn: #c62828;
    --kt-you: #0b5ea8;
    --kt-you-soft: #eef5fc;
    --kt-warn: #a06000;
    --kt-warn-soft: #fff8ec;
}

/* One card shape for every section on the dashboard. */
.kt-card { background: var(--kt-surface); border: 1px solid var(--kt-line);
           border-radius: 12px; margin-bottom: 9px; overflow: hidden; }
.kt-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px;
          padding: 11px 13px; cursor: pointer; background: none; border: none;
          width: 100%; text-align: left; font-family: inherit; }
.kt-hdr .kt-ttl { font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
                  text-transform: uppercase; color: var(--kt-ink3); }
.kt-hdr .kt-chev { color: #c4cad1; font-size: 12px; }
.kt-hdr .kt-note { font-size: 12px; color: var(--kt-ink3); font-weight: 600; }
.kt-bd { padding: 0 13px 12px; }
.kt-rule { height: 1px; background: var(--kt-line); margin: 0 13px; }

/* The one number that matters, whatever screen you are on. */
.kt-hero { background: var(--kt-surface); border: 1px solid var(--kt-line);
           border-radius: 12px; padding: 14px 15px; margin-bottom: 9px; }
.kt-hero .kt-who { font-size: 12px; color: var(--kt-ink3); font-weight: 700;
                   letter-spacing: .04em; text-transform: uppercase; }
.kt-hero .kt-row { display: flex; align-items: flex-end; justify-content: space-between;
                   gap: 12px; margin-top: 5px; }
.kt-hero .kt-big { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.kt-hero .kt-meta { font-size: 12.5px; color: var(--kt-ink2); text-align: right; line-height: 1.55; }
.kt-stat { display: flex; margin-top: 12px; border-top: 1px solid var(--kt-line); padding-top: 10px; }
.kt-stat > div { flex: 1; text-align: center; border-left: 1px solid var(--kt-line); min-width: 0; }
.kt-stat > div:first-child { border-left: none; }
.kt-stat .l { font-size: 10px; color: var(--kt-ink3); text-transform: uppercase; letter-spacing: .05em; }
.kt-stat .v { font-size: 17px; font-weight: 800; margin-top: 1px; }

/* Exactly one primary action per screen; everything else is quiet. */
.kt-btn { display: block; width: 100%; text-align: center; padding: 13px; border-radius: 10px;
          font-size: 15.5px; font-weight: 800; border: 1px solid transparent;
          margin-bottom: 8px; text-decoration: none; cursor: pointer; font-family: inherit; }
.kt-btn.primary { background: var(--kt-accent); color: #fff; }
.kt-btn.primary:hover, .kt-btn.primary:focus { color: #fff; text-decoration: none; }
.kt-btn.ghost { background: var(--kt-surface); color: var(--kt-ink);
                border-color: var(--kt-line); font-weight: 700; font-size: 14px; padding: 11px; }
.kt-btn.ghost:hover, .kt-btn.ghost:focus { color: var(--kt-ink); text-decoration: none; }
.kt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 9px; }
.kt-grid a, .kt-grid button { display: block; text-align: center; padding: 10px 4px;
          background: var(--kt-surface); border: 1px solid var(--kt-line); border-radius: 9px;
          font-size: 12px; font-weight: 700; color: var(--kt-ink2); text-decoration: none;
          font-family: inherit; cursor: pointer; }
.kt-grid a:hover, .kt-grid button:hover { color: var(--kt-ink); text-decoration: none; }

/* State. These four are the only colors with a job. */
.kt-up { color: var(--kt-up); }
.kt-dn { color: var(--kt-dn); }
.kt-lvl { color: var(--kt-ink2); }
.kt-warn { color: var(--kt-warn); }
.kt-me { background: var(--kt-you-soft); box-shadow: inset 3px 0 0 var(--kt-you); }
.kt-you-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: var(--kt-you);
              background: #fff; border: 1px solid #c9e0f5; border-radius: 999px;
              padding: 1px 5px; margin-left: 5px; }
.kt-final { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
            text-transform: uppercase; color: var(--kt-ink2); background: #eef0f3;
            border: 1px solid var(--kt-line); border-radius: 999px; padding: 2px 9px; }
.kt-crumb { font-size: 12px; color: var(--kt-ink3); font-weight: 700;
            letter-spacing: .05em; text-transform: uppercase; }
.kt-line { display: flex; justify-content: space-between; align-items: center;
           padding: 7px 0; border-top: 1px solid #f0f2f4; font-size: 13.5px; }
.kt-line:first-child { border-top: none; }

/* The collapsible dashboard sections. One shape, one weight, no gradient — the section a golfer
   wants is found by reading a word, not by remembering a color. */
.kt-sec { width:100%; margin:0 0 9px; padding:11px 13px; background:var(--kt-surface);
          color:var(--kt-ink2); border:1px solid var(--kt-line); border-radius:12px;
          font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
          cursor:pointer; display:flex; justify-content:space-between; align-items:center;
          gap:10px; text-align:left; font-family:inherit; }
.kt-sec:hover { background:#fafbfc; }
/* Counts and hints inside a title stay quiet; state badges carry their own inline color and win. */
.kt-sec > span:first-child span { font-weight:600; letter-spacing:0; text-transform:none;
                                  color:var(--kt-ink3); font-size:11px; }
.kt-sec span[id$="-arrow"] { color:#c4cad1; font-size:12px; text-transform:none; letter-spacing:0; }

/* ============================================================================
   Dashboard skins. Both directions sit on the SAME structure — scoreboard hero,
   game rail, pill groups, sticky action — and differ only in palette, so the skin
   is one class on the wrapper and swapping it is a one-line change.

       .kt-club   B — Clubhouse: warm cream, deep club green, brass accent
       .kt-dark   A — Broadcast: near-black, vivid green, high contrast

   Everything below reads from --ktb-*, so neither skin restates layout.
   ========================================================================= */
.kt-club, .kt-dark { min-height: 100vh; }

.kt-club {
    --ktb-canvas:#faf7f0; --ktb-surface:#ffffff; --ktb-line:#e7e0d2;
    --ktb-ink:#1b1a17;   --ktb-ink2:#6b6558;   --ktb-ink3:#8c8578;
    --ktb-hero-bg:#14361f; --ktb-hero-ink:#ffffff; --ktb-hero-dim:#bfe0cb; --ktb-hero-kick:#9fd6b3;
    --ktb-hero-glow:#ffffff0d; --ktb-hero-line:#ffffff26;
    --ktb-accent:#14361f; --ktb-accent-ink:#ffffff; --ktb-mark:#c9a227;
    --ktb-up:#12703a; --ktb-dn:#b3261e; --ktb-lvl:#6b6558;
    --ktb-surface2:#f3efe4; --ktb-acc2:#1d5fa8;
    --ktb-pill:#ffffff; --ktb-pill-ink:#8c8578; --ktb-pill-line:#e7e0d2;
    --ktb-cta-shadow:0 6px 18px #14361f2e;
    background:var(--ktb-canvas); color:var(--ktb-ink);
}
.kt-dark {
    --ktb-canvas:#0b0e13; --ktb-surface:#141a22; --ktb-line:#232c38;
    --ktb-ink:#eef3f8;   --ktb-ink2:#a9bcc9;   --ktb-ink3:#7d8fa0;
    --ktb-hero-bg:radial-gradient(120% 130% at 0% 0%,#14512b 0%,#0f2a1c 45%,#10141b 100%);
    --ktb-hero-ink:#eef3f8; --ktb-hero-dim:#a9bcc9; --ktb-hero-kick:#7fe0a3;
    --ktb-hero-glow:#2bd36e22; --ktb-hero-line:#ffffff26;
    --ktb-accent:#5fd68a; --ktb-accent-ink:#08140c; --ktb-mark:#5fd68a;
    --ktb-up:#5fd68a; --ktb-dn:#ff6b6b; --ktb-lvl:#9fb0c0;
    --ktb-surface2:#1c242e; --ktb-acc2:#66b2f5;
    --ktb-pill:#161c25; --ktb-pill-ink:#96a5b4; --ktb-pill-line:#232c38;
    --ktb-cta-shadow:0 8px 24px #5fd68a33;
    background:var(--ktb-canvas); color:var(--ktb-ink);
}
/* The round-1 neutral tokens follow whichever skin is on, so cards, section
   headers and buttons never fight the surface they sit on. */
.kt-club, .kt-dark {
    --kt-ink:var(--ktb-ink); --kt-ink2:var(--ktb-ink2); --kt-ink3:var(--ktb-ink3);
    --kt-line:var(--ktb-line); --kt-surface:var(--ktb-surface); --kt-canvas:var(--ktb-canvas);
    --kt-accent:var(--ktb-accent); --kt-up:var(--ktb-up); --kt-dn:var(--ktb-dn);
    /* These two were USED and never DEFINED, and both were written with a dark fallback:
       var(--kt-accent-ink, #08140c). In the dark skin the accent is a bright green, so
       near-black text on it looked deliberate and nobody noticed. In the light skin the accent
       is #14361f - almost black itself - so "Who is here" and "Needs you" became dark text on a
       dark pill. Unreadable, on the screen an admin runs the morning from.

       An alias family with a hole in it is a trap: the fallback hides the hole until the day a
       colour moves. Both are aliases now, like the rest. */
    --kt-accent-ink:var(--ktb-accent-ink); --kt-surface2:var(--ktb-surface2);
    --kt-you:var(--ktb-mark); --kt-warn:#a06000;
}
body:has(.kt-dark) { background:#0b0e13; }
body:has(.kt-club) { background:#faf7f0; }

/* The floating chrome -- the bottom bar, the back pill, the wait overlay, the spinner -- is
   fixed to the viewport and therefore sits OUTSIDE the div wearing the skin, so it cannot
   inherit a single --ktb-* from it. These two blocks republish the active skin at the root so
   that chrome reads the same tokens as everything else, and a light screen is light all the way
   to the bottom of the phone instead of stopping at the edge of the content. */
:root:has(.kt-dark) {
    --ktb-canvas:#0b0e13; --ktb-surface:#141a22; --ktb-line:#232c38;
    --ktb-ink:#eef3f8; --ktb-ink2:#a9bcc9; --ktb-ink3:#7d8fa0; --ktb-accent:#5fd68a;
}
:root:has(.kt-club) {
    --ktb-canvas:#faf7f0; --ktb-surface:#ffffff; --ktb-line:#e7e0d2;
    --ktb-ink:#1b1a17; --ktb-ink2:#6b6558; --ktb-ink3:#8c8578; --ktb-accent:#14361f;
}

/* The toggle itself. It is an icon button like the others; it only needs to not look pressed. */
/* The light/dark button, which carries a word as well as a glyph and so cannot be one of the
   34px squares the rest of this bar is made of.

   Written as .ktapp-icon.kt-skin-btn on purpose. The square is set further down this file, and
   two single-class rules of equal weight are settled by which comes last - so the plain
   .kt-skin-btn version of this lost every time and the word simply hung out of its pill. Two
   classes outrank one wherever either happens to sit.

   The margin keeps it clear of whatever is on its right: the account button on the dashboard,
   the edge of the header everywhere else. */
.ktapp-icon.kt-skin-btn { width:auto; min-width:0; flex:0 0 auto; padding:0 11px; gap:6px;
                          font-size:16px; line-height:1; white-space:nowrap;
                          display:inline-flex; align-items:center; justify-content:center;
                          margin-right:8px; }
.kt-skin-ico { font-size:15px; line-height:1; flex:0 0 auto; }
.kt-skin-word { font-size:12px; font-weight:800; letter-spacing:.01em; line-height:1;
                flex:0 0 auto; }
.kt-club a, .kt-dark a { color:var(--ktb-accent); }
.kt-club .kt-up, .kt-dark .kt-up { color:var(--ktb-up); }
.kt-club .kt-dn, .kt-dark .kt-dn { color:var(--ktb-dn); }
.kt-club .kt-lvl, .kt-dark .kt-lvl { color:var(--ktb-lvl); }

/* --- brand row ------------------------------------------------------------ */
.ktb-top { display:flex; justify-content:space-between; align-items:center; padding:2px 2px 10px; }
.ktb-brand { font-weight:900; letter-spacing:-.3px; font-size:15px; color:var(--ktb-ink); }
.ktb-brand span { color:var(--ktb-mark); }
.ktb-avatar { width:29px; height:29px; border-radius:50%; background:var(--ktb-accent);
              color:var(--ktb-accent-ink); display:flex; align-items:center;
              justify-content:center; font-weight:900; font-size:12px; }
.kt-club .ktb-avatar { border-radius:9px; }

/* --- the hero scoreboard: the one number you opened the app for ----------- */
/* SIZED TO FIT.
   The round you just played should be readable without scrolling: the money, the place, the
   four numbers under them and the top of the card, all on one screen. The money was 52px and
   the place 32px, which is a poster rather than a summary - both still lead the block at 40
   and 25, and the board itself lost five pixels of padding top and bottom. */
.ktb-board { border-radius:18px; padding:13px 16px 12px; position:relative; overflow:hidden;
             background:var(--ktb-hero-bg); color:var(--ktb-hero-ink);
             border:1px solid var(--ktb-line); margin-bottom:14px; }
.ktb-board:after { content:""; position:absolute; right:-40px; top:-40px; width:170px; height:170px;
                   border-radius:50%; background:radial-gradient(circle,var(--ktb-hero-glow),transparent 70%); }
.kt-club .ktb-board { border-color:#0e2716; }
.kt-club .ktb-board:after { right:-30px; top:auto; bottom:-60px; width:190px; height:190px;
                            background:none; border:26px solid var(--ktb-hero-glow); }
/* The state of the round, told as a marker rather than as the first word of a grey sentence. */
.ktb-state { display:inline-block; margin-right:9px; padding:3px 9px; border-radius:999px;
             font-size:10px; font-weight:900; letter-spacing:.12em; vertical-align:1px; }
.ktb-state.live { background:var(--ktb-accent); color:var(--ktb-accent-ink); }
/* Finished is not an alarm — solid enough to read at a glance, quiet enough not to compete
   with the number underneath it. */
/* Finished is not an alarm, but it has to survive being read at 10px under a white heading, so
   it is a filled marker rather than a tint. */
.ktb-state.done { background:var(--ktb-ink2); color:var(--ktb-canvas); }
/* In the header line it sits against the screen title, so it needs a little room of its own. */
.ktapp-hdr .sub .ktb-state { margin-right:7px; padding:2px 8px; font-size:9.5px;
                             letter-spacing:.1em; vertical-align:0; }
.ktb-crumb { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
             color:var(--ktb-hero-kick); font-weight:800; position:relative; z-index:1; }
.ktb-num { font-size:40px; font-weight:900; letter-spacing:-1.8px; line-height:1; margin-top:5px;
           font-variant-numeric:tabular-nums; position:relative; z-index:1; }
.ktb-num small { font-size:18px; letter-spacing:-.8px; vertical-align:4px; }
.ktb-sub { color:var(--ktb-hero-dim); font-size:12.5px; margin-top:5px; position:relative; z-index:1; }
.ktb-chips { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; position:relative; z-index:1; }
.ktb-chip { background:#ffffff14; border:1px solid var(--ktb-hero-line); border-radius:999px;
            padding:4px 10px; font-size:11px; font-weight:700; color:var(--ktb-hero-ink);
            white-space:nowrap; opacity:.92; }
.ktb-chip b { color:#fff; }
/* Inside the hero the up/down colors would vanish against the deep green, so the
   number keeps the hero palette and the sign carries the meaning. */
.ktb-board .ktb-num.kt-up { color:var(--ktb-hero-kick); }
.ktb-board .ktb-num.kt-dn { color:#ff9a9a; }

/* --- pill groups: navigation that also tells you where you stand ---------- */
.ktb-tabs { display:flex; gap:6px; margin:0 -10px 14px; padding:8px 10px; overflow-x:auto;
            -webkit-overflow-scrolling:touch; position:sticky; top:0; z-index:40;
            background:var(--ktb-canvas); scrollbar-width:none; }
.ktb-tabs::-webkit-scrollbar { display:none; }
.ktb-tab { white-space:nowrap; font-size:12.5px; font-weight:800; padding:8px 13px; border-radius:999px;
           background:var(--ktb-pill); border:1px solid var(--ktb-pill-line); color:var(--ktb-pill-ink);
           cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:7px;
           line-height:1.15; transition:transform .08s ease; }
.ktb-tab:active { transform:scale(.96); }
.ktb-tab.on { background:var(--ktb-accent); color:var(--ktb-accent-ink); border-color:var(--ktb-accent); }
.kt-club .ktb-tab.on { box-shadow:inset 0 -3px 0 var(--ktb-mark); }
/* The value each group is carrying — a count, or your money. Reads at a glance so
   the row answers "where do I stand" before you have tapped anything. */
.ktb-tab .v { font-size:11.5px; font-weight:900; font-variant-numeric:tabular-nums;
              padding:1px 6px; border-radius:999px; background:#00000012; color:inherit; }
.kt-dark .ktb-tab .v { background:#ffffff14; }
.ktb-tab.on .v { background:#00000024; }
.kt-dark .ktb-tab.on .v { background:#0000002e; }
.ktb-tab .v.up { color:var(--ktb-up); }
.ktb-tab .v.dn { color:var(--ktb-dn); }
.ktb-tab.on .v.up, .ktb-tab.on .v.dn { color:inherit; }

/* --- the game rail: your whole day in one glance -------------------------- */
.ktb-lbl { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ktb-ink3);
           font-weight:800; margin-bottom:8px; display:flex; justify-content:space-between; align-items:baseline; }
.ktb-lbl a { color:var(--ktb-accent); text-decoration:none; letter-spacing:0; text-transform:none;
             font-size:12px; font-weight:700; }
.ktb-rail { display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px;
            -webkit-overflow-scrolling:touch; }
.ktb-gcard { flex:0 0 152px; background:var(--ktb-surface); border:1px solid var(--ktb-line);
             border-radius:15px; padding:12px; text-decoration:none; display:block; }
.ktb-gcard .gn { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ktb-ink3); font-weight:800; }
.ktb-gcard .gv { font-size:29px; font-weight:900; letter-spacing:-1.2px; margin-top:5px; line-height:1;
                 color:var(--ktb-ink); }
.ktb-gcard .gm { font-size:11.5px; color:var(--ktb-ink3); margin-top:3px; }

/* --- sticky action, always in thumb reach --------------------------------- */
.ktb-cta { position:sticky; bottom:0; z-index:50; margin:16px -10px 0; padding:11px 10px 14px;
           background:linear-gradient(transparent,var(--ktb-canvas) 30%); }
.ktb-cta a, .ktb-cta button { display:block; width:100%; text-align:center; background:var(--ktb-accent);
           color:var(--ktb-accent-ink); font-weight:900; padding:15px; border-radius:14px; font-size:16px;
           text-decoration:none; border:none; font-family:inherit; cursor:pointer;
           box-shadow:var(--ktb-cta-shadow); }
.kt-club .ktb-cta a { border-radius:12px; }

/* --- the round-1 pieces, following whichever skin is on ------------------- */
.kt-club .kt-card, .kt-dark .kt-card,
.kt-club .kt-sec,  .kt-dark .kt-sec  { background:var(--ktb-surface); border-color:var(--ktb-line); }
.kt-club .kt-sec,  .kt-dark .kt-sec  { color:var(--ktb-ink2); }
.kt-club .kt-sec:hover { background:#fffdf7; }
.kt-dark .kt-sec:hover { background:#1a212b; }
.kt-club .kt-final, .kt-dark .kt-final { background:var(--ktb-pill); border-color:var(--ktb-line); color:var(--ktb-ink2); }
.kt-club .kt-crumb, .kt-dark .kt-crumb { color:var(--ktb-ink3); }
.kt-club .same-size-button, .kt-dark .same-size-button {
        background:var(--ktb-pill); border-color:var(--ktb-pill-line); color:var(--ktb-pill-ink); }
.kt-club .same-size-button:hover, .kt-dark .same-size-button:hover { color:var(--ktb-ink); }
.kt-club .kt-btn.ghost, .kt-dark .kt-btn.ghost {
        background:var(--ktb-pill); border-color:var(--ktb-line); color:var(--ktb-ink2); }
.kt-club .kt-btn.primary, .kt-dark .kt-btn.primary {
        background:var(--ktb-accent); color:var(--ktb-accent-ink); }
.kt-club .kt-stat, .kt-dark .kt-stat,
.kt-club .kt-stat > div, .kt-dark .kt-stat > div { border-color:var(--ktb-line); }

/* ============================================================================
   APP SHELL — step 1 of the native rebuild.
   The dashboard stops being a long web page inside a navbar and becomes an app:
   a fixed frame, one scrolling content region, and a bottom bar that switches
   between screens. Opted into per page with ViewData["AppShell"], so every other
   screen keeps the old chrome until it is converted.
   ========================================================================= */
.ktapp { position:fixed; inset:0; display:flex; flex-direction:column;
         background:var(--ktb-canvas); color:var(--ktb-ink); z-index:1; }
.ktapp-hdr { flex:0 0 auto; padding:calc(env(safe-area-inset-top) + 12px) 16px 10px;
             display:flex; align-items:center; justify-content:space-between; gap:10px;
             background:var(--ktb-canvas); border-bottom:1px solid var(--ktb-line); }
.ktapp-hdr h1 { font-size:20px; font-weight:800; letter-spacing:-.4px; margin:0; color:var(--ktb-ink); }
.ktapp-hdr .sub { font-size:11.5px; color:var(--ktb-ink3); font-weight:700;
                  letter-spacing:.06em; text-transform:uppercase; }
.ktapp-icon { width:34px; height:34px; border-radius:11px; background:var(--ktb-surface);
              border:1px solid var(--ktb-line); color:var(--ktb-ink2); display:flex;
              align-items:center; justify-content:center; font-size:15px; cursor:pointer;
              text-decoration:none; flex:0 0 auto; }
.ktapp-scroll { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
                padding:14px 12px calc(var(--ktb-bar-h, 62px) + var(--ktb-safe) + 24px); }

/* The bar. Fixed, blurred, safe-area aware — the thing that makes it read as an app. */
/* The gap the phone keeps for its home indicator, with a floor under it.

   env(safe-area-inset-bottom) is 0 in a browser tab and thin on some devices, so the bottom bar
   sat right on the strip the indicator owns: taps meant for a button were being taken as a swipe
   up. Never use the raw env() for bottom spacing — use this. */
:root {
    --ktb-safe: max(env(safe-area-inset-bottom, 0px), 14px);
    /* The height of the bottom bar itself. Half a dozen rules were already reaching for
       this with a 62px fallback and it had never been declared, so every one of them was
       quietly using the fallback. */
    --ktb-bar-h: 62px;
    /* And the same at the top, for the notch and the status bar. A card laid over the whole
       screen has to keep clear of both ends of it, not just the end with the bar on. */
    --ktb-safe-top: max(env(safe-area-inset-top, 0px), 12px);
}

.ktapp-bar { position:absolute; left:0; right:0; bottom:0;
             height:calc(var(--ktb-bar-h, 62px) + var(--ktb-safe));
             padding-bottom:var(--ktb-safe);
             background:color-mix(in srgb, var(--ktb-canvas) 88%, transparent);
             backdrop-filter:saturate(180%) blur(18px);
             -webkit-backdrop-filter:saturate(180%) blur(18px);
             border-top:1px solid var(--ktb-line); display:flex; z-index:60; }
.ktapp-bar button { flex:1; background:none; border:none; color:var(--ktb-ink3);
             font-family:inherit; display:flex; flex-direction:column; align-items:center;
             justify-content:center; gap:3px; font-size:10.5px; font-weight:700;
             cursor:pointer; padding-top:6px; position:relative; min-width:0;
             /* "My Round" is two words, and in a quarter of a phone's width it wrapped to two
                lines — which does not fit the bar's height, so the button rendered clipped. */
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
             max-width:100%; line-height:1.15; }
.ktapp-bar button .ic { font-size:19px; line-height:1; transition:transform .15s ease; }

/* "You are already here."
   A bar button whose screen is already showing has nothing to do, and with a slow tap there was
   no way to tell that from a broken one. A short nudge, no message, no sound. */
@keyframes ktnudge { 0%,100% { transform:translateY(0); } 35% { transform:translateY(-3px); }
                     70% { transform:translateY(1px); } }
.ktapp-bar button.ktnudge .ic { animation:ktnudge .38s ease; }
@media (prefers-reduced-motion: reduce) { .ktapp-bar button.ktnudge .ic { animation:none; } }

/* What just happened, said in the app's own voice.
   Replaces alert(): it does not block, it does not borrow the operating system's typeface, and
   it leaves on its own. */
.kt-toast { position:fixed; left:12px; right:12px; z-index:9800;
            bottom:calc(var(--ktb-safe, 14px) + 74px);
            display:flex; align-items:flex-start; gap:10px;
            padding:13px 12px 13px 15px; border-radius:13px;
            background:var(--ktb-surface); border:1px solid var(--ktb-line);
            box-shadow:0 10px 34px rgba(0,0,0,.34);
            opacity:0; transform:translateY(10px);
            transition:opacity .22s ease, transform .22s ease;
            max-width:520px; margin:0 auto; }
.kt-toast.on { opacity:1; transform:translateY(0); }
.kt-toast-t { flex:1; min-width:0; font-size:14px; font-weight:700; line-height:1.45;
              color:var(--ktb-ink); }
.kt-toast-x { flex:none; border:none; background:none; cursor:pointer; padding:0 2px;
              color:var(--ktb-ink3); font-size:20px; line-height:1; }

/* ANSWERING THE FINGER.
   =====================================================================================
   Every button in this app did its work and only then changed appearance, so a tap looked
   like nothing at all until whatever it triggered had finished. On a phone, on a course,
   that reads as a button that did not take - and a man presses it again, and again.

   Two separate problems, and both are fixed here rather than per-button:

   1. There was no :active state anywhere. A pressed state costs nothing and paints on
      TOUCHDOWN, before a line of script runs, so the acknowledgement is immediate no matter
      how slow the handler is.

   2. :active alone is unreliable inside a fixed bar on iOS, so a delegated pointer listener
      puts .press on whatever was pressed and takes it off again. See _Layout.

   touch-action:manipulation goes with it: without it the browser holds a tap for ~300ms
   waiting to see whether it is the first half of a double-tap zoom. */
.ktapp-bar button, .ktapp-bar a, .ktapp-fab,
.ktfield-chip, .ktapp-row, .kt-btn, .qs-go, .rd-btn, .rd-chip, .pr-go, .se-go,
.ktreg-go, .ktreg-more, .ktapp-icon, .qs-who-btn, .ktlb-more, .pr-tee-row, .pr-tee-pill,
.qs-score-btn, .qs-side-btn, .qs-shortcut, .qs-tog, .qs-grouppill, .qs-teepill,
.qs-modal-btn, .qs-sheet-done, .qs-panel-btn, .qs-delete-btn, .gm-groupbtn, .gm-pill {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* The press itself: a touch of ground under the thing and a hair of scale off it. Fast in,
   slower out, so it is felt rather than watched. */
/* THE BOTTOM BAR IS BUTTONS ON THE DASHBOARD AND LINKS EVERYWHERE ELSE.
   This list only ever named the buttons, so on every screen but the dashboard the bar had no
   pressed state at all - and tap-highlight is turned off above, so iOS drew nothing either.
   Pressing My Round from the score screen or Round day gave you precisely nothing to look at
   until the next page painted, which after a republish is the slowest it ever is. */
.ktapp-bar a:active, .ktapp-bar a.press,
.ktapp-fab:active, .ktapp-fab.press,
.qs-go:active, .qs-go.press,
.kt-btn:active, .kt-btn.press,
.rd-btn:active, .rd-btn.press,
.rd-chip:active, .rd-chip.press,
.pr-go:active, .pr-go.press,
.se-go:active, .se-go.press,
.qs-score-btn:active, .qs-score-btn.press,
.qs-side-btn:active, .qs-side-btn.press,
.qs-shortcut:active, .qs-shortcut.press,
.qs-tog:active, .qs-tog.press,
.qs-grouppill:active, .qs-grouppill.press,
.qs-teepill:active, .qs-teepill.press,
.qs-modal-btn:active, .qs-modal-btn.press,
.qs-sheet-done:active, .qs-sheet-done.press,
.qs-panel-btn:active, .qs-panel-btn.press,
.qs-delete-btn:active, .qs-delete-btn.press,
.gm-groupbtn:active, .gm-groupbtn.press,
.gm-pill:active, .gm-pill.press,
.ktapp-bar button:active, .ktapp-bar button.press,
.ktfield-chip:active, .ktfield-chip.press,
.ktapp-row:active, .ktapp-row.press,
.ktapp-icon:active, .ktapp-icon.press,
.ktreg-go:active, .ktreg-go.press,
.ktreg-more:active, .ktreg-more.press,
.qs-who-btn:active, .qs-who-btn.press,
.ktlb-more:active, .ktlb-more.press,
.pr-tee-row:active, .pr-tee-row.press,
.pr-tee-pill:active, .pr-tee-pill.press {
    background-color: color-mix(in srgb, var(--ktb-ink) 13%, transparent);
    transform: scale(.97);
    transition: transform .04s ease, background-color .04s ease;
}
/* The big accent actions dim rather than tint - a wash of ink over green reads as dirt. */
.kt-btn:active, .kt-btn.press,
.qs-go:active, .qs-go.press,
.rd-btn:active, .rd-btn.press,
.pr-go:active, .pr-go.press,
.se-go:active, .se-go.press {
    filter: brightness(.88);
    transform: scale(.985);
    transition: transform .04s ease, filter .04s ease;
}
/* Coming back up is slower than going down, which is what makes it feel like a button
   rather than a flicker. */
.ktapp-bar button, .ktfield-chip, .ktapp-row, .ktapp-icon, .kt-btn, .qs-go, .rd-btn,
.pr-go, .se-go, .ktreg-go, .ktreg-more, .qs-who-btn, .ktlb-more, .pr-tee-row, .pr-tee-pill {
    transition: transform .16s ease, background-color .16s ease, filter .16s ease;
}
@media (prefers-reduced-motion: reduce) {
    .ktapp-bar button, .ktfield-chip, .ktapp-row, .ktapp-icon, .kt-btn, .qs-go, .rd-btn,
    .pr-go, .se-go, .ktreg-go, .ktreg-more, .qs-who-btn, .ktlb-more, .pr-tee-row, .pr-tee-pill {
        transform: none !important;
    }
}
/* WHICH TAB YOU ARE ON.
   =====================================================================================
   A green word and a slightly bigger glyph. In bright sun, on a green-on-dark palette
   where a good deal else is also green, that is not enough to answer "where am I" at a
   glance - and with a tap that used to cost a page load, not knowing was the difference
   between waiting and pressing again.

   The icon now sits in a capsule that fills when the tab is current. It is the one filled
   shape on the bar, so the eye finds it without reading: a lit key on a dark keyboard.
   The word stays accent-coloured as well - two signals, not one, and the capsule survives
   being unable to tell green text from grey. */
.ktapp-bar button .ic { display:inline-flex; align-items:center; justify-content:center;
                        width:46px; height:26px; border-radius:999px;
                        transition:background-color .16s ease, transform .16s ease; }
.ktapp-bar button.on { color:var(--ktb-accent); }
.ktapp-bar button.on .ic { transform:translateY(-1px) scale(1.06);
                           background:color-mix(in srgb, var(--ktb-accent) 24%, transparent);
                           box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ktb-accent) 34%, transparent); }
.ktapp-bar button .dot { position:absolute; top:5px; right:calc(50% - 24px); min-width:17px;
             height:17px; border-radius:999px; background:var(--ktb-up); color:var(--ktb-accent-ink);
             font-size:9.5px; font-weight:900; display:flex; align-items:center;
             justify-content:center; padding:0 5px; }
.ktapp-bar button .dot.dn { background:var(--ktb-dn); color:#fff; }

/* Score entry belongs to your own round and nowhere else, so it rides above the bar
   rather than taking a slot in it. */
/* It gets out of the way while you are reading.
   A floating button covers whatever is under it, which is the price of having it always to
   hand - but on the scorecard that is a row of holes, and at the end of the card it was
   parked on top of the totals. So it slides off while you scroll DOWN through the card and
   comes back the moment you scroll up or stop, which is when you are looking for it. */
.ktapp-fab { transition:transform .18s ease, opacity .18s ease; }
.ktapp-fab.ktfab-away { transform:translateY(150%); opacity:0; pointer-events:none; }
.ktapp-fab { position:absolute; right:16px;
             bottom:calc(var(--ktb-bar-h, 62px) + var(--ktb-safe) + 16px);
             background:var(--ktb-accent); color:var(--ktb-accent-ink); font-weight:900;
             font-size:15px; padding:15px 22px; border-radius:999px; border:none;
             font-family:inherit; z-index:55; text-decoration:none;
             box-shadow:0 10px 26px rgba(0,0,0,.35); cursor:pointer; }
/* Enter Score is an anchor painted in the accent, so it is the same collision as the front door:
   ".kt-dark a" would give it accent text on an accent pill. Skin class in front. */
.kt-dark a.ktapp-fab, .kt-club a.ktapp-fab,
.kt-dark a.ktapp-fab:hover, .kt-club a.ktapp-fab:hover,
.kt-dark a.ktapp-fab:focus, .kt-club a.ktapp-fab:focus {
    color:var(--ktb-accent-ink); text-decoration:none; }
/* The card is a link; its own three lines set their colors, but the value line inherits. */
.kt-dark a.ktb-gcard, .kt-club a.ktb-gcard { color:var(--ktb-ink); text-decoration:none; }
/* The floating button sits ABOVE the bar, so clearing the bar is not enough — the last thing on a
   screen was ending up underneath it. */
body:has(.ktapp-fab) .ktapp-scroll {
    padding-bottom:calc(var(--ktb-bar-h, 62px) + var(--ktb-safe) + 96px); }

/* Screens. Only one is on at a time; everything else is still in the DOM, so the
   accordions, the ids and every data-live-region swap keep working untouched. */
.ktapp-screen { display:none; }
.ktapp-screen.on { display:block; animation:ktappIn .18s ease; }
@keyframes ktappIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* More: a real screen of grouped rows, which is what replaces the hamburger. */
.ktapp-grp { font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
             color:var(--ktb-ink3); font-weight:800; margin:20px 2px 9px; }
.ktapp-list { background:var(--ktb-surface); border:1px solid var(--ktb-line);
              border-radius:16px; overflow:hidden; margin-bottom:10px; }
.ktapp-row { display:flex; align-items:center; gap:11px; padding:13px 14px;
             border-top:1px solid var(--ktb-line); color:var(--ktb-ink);
             text-decoration:none; font-weight:700; font-size:14.5px; }
.ktapp-row:first-child { border-top:none; }
.ktapp-row:hover, .ktapp-row:focus { color:var(--ktb-ink); text-decoration:none;
             background:color-mix(in srgb, var(--ktb-ink) 4%, transparent); }
.ktapp-row .t { flex:1; min-width:0; }
.ktapp-row .t small { display:block; font-weight:600; color:var(--ktb-ink3); font-size:11.5px; }
.ktapp-row .chev { color:var(--ktb-ink3); font-size:16px; }
.ktapp-row.danger { color:var(--ktb-dn); }

/* ============================================================================
   Legacy light panels inside the dark shell.
   The shell sets a near-white text color on everything it contains, but the
   sections it now holds still carry hardcoded light backgrounds inline —
   background:white, #f5f5f5, Silver and friends — so their text inherited white
   ON white and vanished. The Money Tracker was the obvious casualty.

   Matching on the inline style itself is what makes this tractable: there are
   dozens of these panels across 3,600 lines and no shared class between them.
   Descendants inherit, so one rule per container fixes the whole block. Light
   hexes only (#d/#e/#f) — the dark ones (#2e7d32, #337ab7, #b71c1c) set their
   own white text and must keep it.

   This is a bridge, not the destination: as each screen is rebuilt in steps 2-5
   its panels become properly themed and drop out of here.
   ========================================================================= */
/* --- paper, converted ---------------------------------------------------------------------
   Every light background actually written into these pages, found by reading them rather than
   guessed at with a prefix — "#f" would have caught #f0ad4e and #ff9800, and an amber warning
   is not paper. Anything below a luminance of 205 is left alone: it is saying something.

   Neutral paper takes the surface. A tinted wash keeps its hue — a pale green means good, a
   pale red means trouble, a pale amber means wait — so it is mixed into the dark surface at a
   strength that still reads as that colour on this ground instead of being flattened away. */
.kt-dark [style*="background:white"], .kt-dark [style*="background-color:white"],
.kt-dark [style*="background: white"], .kt-dark [style*="background-color: white"],
.kt-dark [style*="background:#ddd"], .kt-dark [style*="background-color:#ddd"],
.kt-dark [style*="background:#e0e0e0"], .kt-dark [style*="background-color:#e0e0e0"],
.kt-dark [style*="background:#e8e8e8"], .kt-dark [style*="background-color:#e8e8e8"],
.kt-dark [style*="background:#eceff1"], .kt-dark [style*="background-color:#eceff1"],
.kt-dark [style*="background:#eee"], .kt-dark [style*="background-color:#eee"],
.kt-dark [style*="background:#eef1f0"], .kt-dark [style*="background-color:#eef1f0"],
.kt-dark [style*="background:#eef3f8"], .kt-dark [style*="background-color:#eef3f8"],
.kt-dark [style*="background:#eef7ee"], .kt-dark [style*="background-color:#eef7ee"],
.kt-dark [style*="background:#f0f0f0"], .kt-dark [style*="background-color:#f0f0f0"],
.kt-dark [style*="background:#f0f1f3"], .kt-dark [style*="background-color:#f0f1f3"],
.kt-dark [style*="background:#f0f4f0"], .kt-dark [style*="background-color:#f0f4f0"],
.kt-dark [style*="background:#f3f3f3"], .kt-dark [style*="background-color:#f3f3f3"],
.kt-dark [style*="background:#f4f4f4"], .kt-dark [style*="background-color:#f4f4f4"],
.kt-dark [style*="background:#f4f8f4"], .kt-dark [style*="background-color:#f4f8f4"],
.kt-dark [style*="background:#f4fbf4"], .kt-dark [style*="background-color:#f4fbf4"],
.kt-dark [style*="background:#f5f5f5"], .kt-dark [style*="background-color:#f5f5f5"],
.kt-dark [style*="background:#f5f6f7"], .kt-dark [style*="background-color:#f5f6f7"],
.kt-dark [style*="background:#f5fafd"], .kt-dark [style*="background-color:#f5fafd"],
.kt-dark [style*="background:#f6f8f6"], .kt-dark [style*="background-color:#f6f8f6"],
.kt-dark [style*="background:#f7f8fa"], .kt-dark [style*="background-color:#f7f8fa"],
.kt-dark [style*="background:#f8f8f8"], .kt-dark [style*="background-color:#f8f8f8"],
.kt-dark [style*="background:#f8f9fa"], .kt-dark [style*="background-color:#f8f9fa"],
.kt-dark [style*="background:#f9f9f9"], .kt-dark [style*="background-color:#f9f9f9"],
.kt-dark [style*="background:#faf7fc"], .kt-dark [style*="background-color:#faf7fc"],
.kt-dark [style*="background:#fafafa"], .kt-dark [style*="background-color:#fafafa"],
.kt-dark [style*="background:#fafbfc"], .kt-dark [style*="background-color:#fafbfc"],
.kt-dark [style*="background:#fcfaff"], .kt-dark [style*="background-color:#fcfaff"],
.kt-dark [style*="background:#fff"], .kt-dark [style*="background-color:#fff"],
.kt-dark [style*="background:#fff8f8"], .kt-dark [style*="background-color:#fff8f8"],
.kt-dark [style*="background:#fffdf5"], .kt-dark [style*="background-color:#fffdf5"] {
    background-color: var(--ktb-surface) !important;
    color: var(--ktb-ink) !important;
    border-color: var(--ktb-line) !important;
}

/* A won hole. The only green on this table, so it can afford to be read at a glance. */
.kt-dark [style*="background:#d4edda"], .kt-dark [style*="background-color:#d4edda"] {
    background-color: color-mix(in srgb, var(--ktb-up) 42%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; font-weight: 800 !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#d6ecff"], .kt-dark [style*="background-color:#d6ecff"] {
    background-color: color-mix(in srgb, #d6ecff 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#dfd"], .kt-dark [style*="background-color:#dfd"] {
    background-color: color-mix(in srgb, #dfd 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e3eefc"], .kt-dark [style*="background-color:#e3eefc"] {
    background-color: color-mix(in srgb, #e3eefc 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e3f2fd"], .kt-dark [style*="background-color:#e3f2fd"] {
    background-color: color-mix(in srgb, #e3f2fd 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e6f9e6"], .kt-dark [style*="background-color:#e6f9e6"] {
    background-color: color-mix(in srgb, #e6f9e6 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e7f3ff"], .kt-dark [style*="background-color:#e7f3ff"] {
    background-color: color-mix(in srgb, #e7f3ff 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e7f6ea"], .kt-dark [style*="background-color:#e7f6ea"] {
    background-color: color-mix(in srgb, #e7f6ea 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e8eef4"], .kt-dark [style*="background-color:#e8eef4"] {
    background-color: color-mix(in srgb, #e8eef4 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e8eefc"], .kt-dark [style*="background-color:#e8eefc"] {
    background-color: color-mix(in srgb, #e8eefc 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e8f3ff"], .kt-dark [style*="background-color:#e8f3ff"] {
    background-color: color-mix(in srgb, #e8f3ff 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e8f4fd"], .kt-dark [style*="background-color:#e8f4fd"] {
    background-color: color-mix(in srgb, #e8f4fd 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e8f5e9"], .kt-dark [style*="background-color:#e8f5e9"] {
    background-color: color-mix(in srgb, #e8f5e9 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#e8f5f0"], .kt-dark [style*="background-color:#e8f5f0"] {
    background-color: color-mix(in srgb, #e8f5f0 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#eaf5ea"], .kt-dark [style*="background-color:#eaf5ea"] {
    background-color: color-mix(in srgb, #eaf5ea 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#eef4fa"], .kt-dark [style*="background-color:#eef4fa"] {
    background-color: color-mix(in srgb, #eef4fa 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#eef4fb"], .kt-dark [style*="background-color:#eef4fb"] {
    background-color: color-mix(in srgb, #eef4fb 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f0f8ff"], .kt-dark [style*="background-color:#f0f8ff"] {
    background-color: color-mix(in srgb, #f0f8ff 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f0faff"], .kt-dark [style*="background-color:#f0faff"] {
    background-color: color-mix(in srgb, #f0faff 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f1ece0"], .kt-dark [style*="background-color:#f1ece0"] {
    background-color: color-mix(in srgb, #f1ece0 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f2dede"], .kt-dark [style*="background-color:#f2dede"] {
    background-color: color-mix(in srgb, #f2dede 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f2f8ff"], .kt-dark [style*="background-color:#f2f8ff"] {
    background-color: color-mix(in srgb, #f2f8ff 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f3e5f5"], .kt-dark [style*="background-color:#f3e5f5"] {
    background-color: color-mix(in srgb, #f3e5f5 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f3e8f9"], .kt-dark [style*="background-color:#f3e8f9"] {
    background-color: color-mix(in srgb, #f3e8f9 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f3e9f7"], .kt-dark [style*="background-color:#f3e9f7"] {
    background-color: color-mix(in srgb, #f3e9f7 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f5e6e6"], .kt-dark [style*="background-color:#f5e6e6"] {
    background-color: color-mix(in srgb, #f5e6e6 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f7edfb"], .kt-dark [style*="background-color:#f7edfb"] {
    background-color: color-mix(in srgb, #f7edfb 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#f8d7da"], .kt-dark [style*="background-color:#f8d7da"] {
    background-color: color-mix(in srgb, #f8d7da 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fbf1de"], .kt-dark [style*="background-color:#fbf1de"] {
    background-color: color-mix(in srgb, #fbf1de 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fcf8e3"], .kt-dark [style*="background-color:#fcf8e3"] {
    background-color: color-mix(in srgb, #fcf8e3 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fdd"], .kt-dark [style*="background-color:#fdd"] {
    background-color: color-mix(in srgb, #fdd 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fdeaea"], .kt-dark [style*="background-color:#fdeaea"] {
    background-color: color-mix(in srgb, #fdeaea 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fdecea"], .kt-dark [style*="background-color:#fdecea"] {
    background-color: color-mix(in srgb, #fdecea 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fdeeed"], .kt-dark [style*="background-color:#fdeeed"] {
    background-color: color-mix(in srgb, #fdeeed 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fdf0d5"], .kt-dark [style*="background-color:#fdf0d5"] {
    background-color: color-mix(in srgb, #fdf0d5 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fdf3f2"], .kt-dark [style*="background-color:#fdf3f2"] {
    background-color: color-mix(in srgb, #fdf3f2 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#ffe6e6"], .kt-dark [style*="background-color:#ffe6e6"] {
    background-color: color-mix(in srgb, #ffe6e6 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#ffe8cc"], .kt-dark [style*="background-color:#ffe8cc"] {
    background-color: color-mix(in srgb, #ffe8cc 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#ffebee"], .kt-dark [style*="background-color:#ffebee"] {
    background-color: color-mix(in srgb, #ffebee 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fff3c4"], .kt-dark [style*="background-color:#fff3c4"] {
    background-color: color-mix(in srgb, #fff3c4 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fff3cd"], .kt-dark [style*="background-color:#fff3cd"] {
    background-color: color-mix(in srgb, #fff3cd 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fff3e0"], .kt-dark [style*="background-color:#fff3e0"] {
    background-color: color-mix(in srgb, #fff3e0 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fff4e0"], .kt-dark [style*="background-color:#fff4e0"] {
    background-color: color-mix(in srgb, #fff4e0 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fff6d6"], .kt-dark [style*="background-color:#fff6d6"] {
    background-color: color-mix(in srgb, #fff6d6 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fff8e1"], .kt-dark [style*="background-color:#fff8e1"] {
    background-color: color-mix(in srgb, #fff8e1 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fff9c4"], .kt-dark [style*="background-color:#fff9c4"] {
    background-color: color-mix(in srgb, #fff9c4 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }
.kt-dark [style*="background:#fffde7"], .kt-dark [style*="background-color:#fffde7"] {
    background-color: color-mix(in srgb, #fffde7 22%, var(--ktb-surface)) !important;
    color: var(--ktb-ink) !important; border-color: var(--ktb-line) !important; }

/* Silver and light grey were headings, so they take the canvas and the quiet ink. */
.kt-dark [style*="background-color:Silver"], .kt-dark [style*="background-color:silver"],
.kt-dark [style*="background-color:lightgray"], .kt-dark [style*="background:lightgray"],
.kt-dark [style*="background-color:LightGray"], .kt-dark [style*="background-color:whitesmoke"] {
    background-color: var(--ktb-canvas) !important;
    color: var(--ktb-ink3) !important;
    border-color: var(--ktb-line) !important;
}

/* Why these are written three ways.

   An attribute selector is a substring match on the WHOLE style attribute, so [style*="color:#888"]
   also matches background-color:#888 - and every one of these ends in `!important`. The settled
   games on the settlement screen carry background-color:#888;color:white, so the rule meant for
   grey small print reached in and repainted the label the same grey as the button behind it. The
   word "View" was there the whole time, in #7d8fa0 on #888.

   A colour declaration is either the first thing in the attribute or it follows a semicolon.
   Matching those two positions - with and without the space - says what was always meant. */
/* The greys those panels wrote their small print in, all chosen against white. */
.kt-dark [style^="color:#333"],
.kt-dark [style*=";color:#333"],
.kt-dark [style*="; color:#333"],
.kt-dark [style^="color:#444"],
.kt-dark [style*=";color:#444"],
.kt-dark [style*="; color:#444"],
.kt-dark [style^="color:#555"],
.kt-dark [style*=";color:#555"],
.kt-dark [style*="; color:#555"],
.kt-dark [style^="color:#666"],
.kt-dark [style*=";color:#666"],
.kt-dark [style*="; color:#666"],
.kt-dark [style^="color:#777"],
.kt-dark [style*=";color:#777"],
.kt-dark [style*="; color:#777"],
.kt-dark [style^="color:#888"],
.kt-dark [style*=";color:#888"],
.kt-dark [style*="; color:#888"],
.kt-dark [style^="color:#999"],
.kt-dark [style*=";color:#999"],
.kt-dark [style*="; color:#999"],
.kt-dark [style^="color:#aaa"],
.kt-dark [style*=";color:#aaa"],
.kt-dark [style*="; color:#aaa"],
.kt-dark [style^="color:black"],
.kt-dark [style*=";color:black"],
.kt-dark [style*="; color:black"],
.kt-dark [style^="color:Black"],
.kt-dark [style*=";color:Black"],
.kt-dark [style*="; color:Black"],
.kt-dark [style^="color:#222"],
.kt-dark [style*=";color:#222"],
.kt-dark [style*="; color:#222"],
.kt-dark [style^="color:#111"],
.kt-dark [style*=";color:#111"],
.kt-dark [style*="; color:#111"] {
    color: var(--ktb-ink3) !important;
}
/* Tables, and the hairlines they are drawn with. */
.kt-dark .body-content table, .kt-dark .body-content td, .kt-dark .body-content th {
    border-color: var(--ktb-line) !important;
}
/* Fields. A light box on a dark page reads as a hole in it. */
.kt-dark input:not([type=checkbox]):not([type=radio]), .kt-dark select, .kt-dark textarea {
    background: var(--ktb-canvas) !important; color: var(--ktb-ink) !important;
    border-color: var(--ktb-line) !important;
}
/* Bootstrap panels and wells, which the older screens are built out of. */
.kt-dark .panel, .kt-dark .well, .kt-dark .panel-body, .kt-dark .list-group-item,
.kt-dark .card, .kt-dark .modal-content {
    background: var(--ktb-surface) !important; color: var(--ktb-ink) !important;
    border-color: var(--ktb-line) !important;
}
.kt-dark .panel-heading, .kt-dark .table > thead > tr > th {
    background: var(--ktb-canvas) !important; color: var(--ktb-ink3) !important;
    border-color: var(--ktb-line) !important;
}
/* Links inside a converted panel: the accent is tuned for this ground, so it works again. */
.kt-dark .body-content a { color: var(--ktb-accent); }



/* --- hero balance: the number left, the standing right, stats squaring the base --- */
.ktb-head { display:flex; align-items:flex-start; justify-content:space-between;
            gap:14px; position:relative; z-index:1; }
.ktb-head .ktb-num { margin-top:6px; }
/* The right-hand column earns its width: a label, the placing spelled out, and who it is
   out of. Three cramped fragments stacked in a corner made you do the work. */
.ktb-side { text-align:right; flex:1 1 auto; min-width:0; padding-top:4px; line-height:1.25; }
.ktb-side .k { font-size:10px; letter-spacing:.14em; text-transform:uppercase;
               color:var(--ktb-hero-kick); font-weight:800; }
.ktb-side b { display:block; font-size:25px; font-weight:900; letter-spacing:-.9px;
              color:var(--ktb-hero-ink); margin-top:2px; }
.ktb-side > span { display:block; font-size:12px; color:var(--ktb-hero-dim);
                   font-weight:700; margin-top:1px; }
.ktb-grid { display:flex; margin-top:16px; padding-top:13px; border-top:1px solid var(--ktb-hero-line);
            position:relative; z-index:1; }
.ktb-grid > div { flex:1; min-width:0; border-left:1px solid var(--ktb-hero-line); padding-left:12px; }
.ktb-grid > div:first-child { border-left:none; padding-left:0; }
.ktb-grid .k { font-size:10px; letter-spacing:.12em; text-transform:uppercase;
               color:var(--ktb-hero-kick); font-weight:800; }
.ktb-grid .v { font-size:18px; font-weight:900; margin-top:2px; letter-spacing:-.4px;
               color:var(--ktb-hero-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ktb-boardlink { position:relative; z-index:1; margin-top:13px; padding-top:11px;
                 border-top:1px solid var(--ktb-hero-line); font-size:12.5px; font-weight:800;
                 color:var(--ktb-hero-kick); cursor:pointer; }

/* --- the seam. Pages not yet rebuilt keep the old bar; it just wears the app's colors
       so stepping out of the shell is not stepping into a different product. Removed
       entirely once every screen is converted. --- */
.ktlegacy-nav .navbar-toggle { border-color:#39d67f; }
.ktlegacy-nav .navbar-toggle .icon-bar { background-color:#39d67f; }
.ktlegacy-nav .navbar-logged-in { color:#9aa8b6 !important; }
.ktlegacy-back { font-size:16px !important; }
.ktlegacy-back:hover, .ktlegacy-back:focus { color:#7fe8a8 !important; }

/* --- list rows used by the leaderboard and anything else that ranks people --- */
.ktapp-pos { width:30px; flex:0 0 auto; font-weight:900; font-size:13px;
             color:var(--ktb-ink3); font-variant-numeric:tabular-nums; }
.ktapp-amt { flex:0 0 auto; font-weight:900; font-size:17px;
             font-variant-numeric:tabular-nums; color:var(--ktb-ink); }
.ktapp-strokes { color:var(--ktb-dn); font-weight:800; font-size:12px; margin-left:5px; }
.ktapp-row.me { background:color-mix(in srgb, var(--ktb-accent) 14%, transparent);
                box-shadow:inset 3px 0 0 var(--ktb-accent); }

/* --- Field: one screen, chips instead of a stack of accordions --- */
/* Chips wrap rather than scroll sideways. A rail you swipe hides whatever is off the right edge,
   and what was off the edge was a chip nobody knew existed — Team, twice. One line when they fit,
   two when they do not, nothing out of sight either way. */
/* ONE LINE. The Field and Money chips are a switcher - a set of views where one is current -
   and a switcher that grows a second row when a live round adds "End round" makes the whole
   screen jump down by a row for a pill you did not ask for. It is a rail you swipe, which is
   what the rule below it has said all along; the base had been changed to wrap and .ktact was
   left overriding a nowrap that was no longer there. The round's ACTIONS still wrap - they are
   separate destinations and one off the right edge would never be found. */
/* IT WRAPS. IT DOES NOT RUN OFF THE EDGE.
   ==========================================================================================
   Measured on the live app: Results was 638px of pills in a 390px strip, with Par 3s, Klown
   Cup and Cup YTD entirely off the right-hand side, and Money was 429px in 390px with End
   round off - the one pill on that strip that DOES something rather than switching a view.

   It scrolled sideways, which is a real control and a real gesture, and on a phone in a
   pocket on a golf course it may as well not exist: nothing on the screen says there are
   three more pills over there, and nobody goes looking.

   Wrapping costs a second line when there are too many for one, and nothing when there are
   not. Every pill is reachable at any width, in any language, at any font size. */
.ktfield-chips { display:flex; flex-wrap:wrap; overflow:visible;
                 gap:7px; margin-bottom:12px; }
/* Nothing scrolls now, so there is nothing to fade out - and the fade would have dimmed the
   last pill of a wrapped row for no reason. Kept as a no-op for any script still adding it. */
.ktfield-chips.ktscroll { mask-image:none; -webkit-mask-image:none; }
.ktfield-chips::-webkit-scrollbar { display:none; }
.ktfield-chip { white-space:nowrap; background:var(--ktb-surface); border:1px solid var(--ktb-line);
                color:var(--ktb-ink2); border-radius:999px; padding:8px 14px; font-size:12.5px;
                font-weight:800; cursor:pointer; font-family:inherit; }
.ktfield-chip.on { background:var(--ktb-accent); color:var(--ktb-accent-ink); border-color:var(--ktb-accent); }
/* Some chips are links to another page rather than switches on this one; they have to sit on
   the same line as the buttons beside them and not carry an underline. */
a.ktfield-chip { text-decoration:none; display:inline-flex; align-items:center; }
/* Same trap as the front door: a chip that happens to be a link would otherwise take the accent
   from ".kt-dark a" — one class plus one element, more specific than a bare class — and read
   differently from the buttons beside it. */
.kt-dark a.ktfield-chip, .kt-club a.ktfield-chip,
.kt-dark a.ktfield-chip:hover, .kt-club a.ktfield-chip:hover,
.kt-dark a.ktfield-chip:focus, .kt-club a.ktfield-chip:focus {
    color:var(--ktb-ink2); text-decoration:none; }
.kt-dark .ktfield-chips.ktact a.ktfield-chip,
.kt-club .ktfield-chips.ktact a.ktfield-chip { color:var(--ktb-ink); }
/* The round's own actions. These WRAP where the Field and Money chips scroll: a scrolling rail
   is fine for switchers you swipe through, but these are separate destinations and one of them
   would sit off the right edge, never seen.
   They also STICK. They are the only controls on the screen and the screen is long — the
   scoreboard, the games rail, then eighteen holes of scorecard — so a row that scrolled away at
   the top left you with no way anywhere without scrolling all the way back. Negative margins so
   the stuck bar spans the full width and content passes underneath it rather than beside it. */
.ktfield-chips.ktact { position:sticky; top:0; z-index:6;
                       margin:0 -12px 12px; padding:11px 12px 10px;
                       flex-wrap:wrap; overflow-x:visible; row-gap:7px;
                       background:var(--ktb-canvas); border-bottom:1px solid var(--ktb-line);
                       box-shadow:0 6px 14px -10px rgba(0,0,0,.8); }
/* And they carry the accent, because they are the actions. The Field and Money chips are a set
   of views where one is current and the rest are grey; these are five equal doors and grey-on-
   grey made them read as labels rather than things to press. */
.ktfield-chips.ktact .ktfield-chip {
    background:color-mix(in srgb, var(--ktb-accent) 14%, var(--ktb-surface));
    border-color:color-mix(in srgb, var(--ktb-accent) 45%, var(--ktb-line));
    color:var(--ktb-ink); font-weight:800; }
/* The chosen one. The row's own accent tint would otherwise win over .on and the selected pill
   would look like all the others. */
.ktfield-chips.ktact .ktfield-chip.on {
    background:var(--ktb-accent); color:var(--ktb-accent-ink);
    border-color:var(--ktb-accent); }
.ktfield-chips.ktact .ktfield-chip:active {
    background:color-mix(in srgb, var(--ktb-accent) 26%, var(--ktb-surface)); }


/* ============================================================================
   Ranked list — the leaderboard, and the pattern the money board, game tallies
   and Ryder rosters follow. Columns rather than a stacked sub-line: numbers that
   line up down the page can be compared at a glance, and a row stays one line
   high instead of two, so twice as much of the field fits on a screen.
   ========================================================================= */
.ktlb { background:var(--ktb-surface); border:1px solid var(--ktb-line);
        border-radius:16px; overflow:hidden; margin-bottom:10px; }
.ktlb-hd, .ktlb-row { display:grid; grid-template-columns:26px minmax(0,1fr) 46px 44px 38px;
        align-items:center; gap:8px; padding:9px 12px; }
.ktlb-hd { font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
        color:var(--ktb-ink3); font-weight:800; border-bottom:1px solid var(--ktb-line);
        background:color-mix(in srgb, var(--ktb-ink) 4%, transparent); }
.ktlb-row { border-top:1px solid var(--ktb-line); cursor:pointer; }
.ktlb-row:first-of-type { border-top:none; }
.ktlb-row.me { background:color-mix(in srgb, var(--ktb-accent) 14%, transparent);
        box-shadow:inset 3px 0 0 var(--ktb-accent); }
.ktlb-pos { font-weight:900; font-size:12.5px; color:var(--ktb-ink3);
        font-variant-numeric:tabular-nums; }
.ktlb-nm { font-weight:700; font-size:14.5px; min-width:0; white-space:nowrap;
        overflow:hidden; text-overflow:ellipsis; }
.ktlb-row.me .ktlb-nm { font-weight:900; }
.ktlb-num { text-align:right; font-variant-numeric:tabular-nums; font-weight:800; }
.ktlb-net { font-size:16.5px; font-weight:900; color:var(--ktb-ink); }
.ktlb-dim { font-size:13px; color:var(--ktb-ink2); }
.ktlb-hcp { font-size:11.5px; font-weight:800; color:var(--ktb-ink3); margin-left:6px; }
.ktlb-hcp:empty { display:none; }

/* --- winners on a finished leaderboard. Brass, so it reads as a result rather than
       competing with the accent green that means "this is you". --- */
/* How deep the money goes, at a size that gets read. Small grey type is for
   footnotes, and this is the rule the board is scored by. */
.ktlb-cap-lg { font-size:14px !important; color:var(--ktb-ink2) !important;
               font-weight:800 !important; letter-spacing:0 !important;
               text-transform:none !important; }

.ktlb-cap { font-size:11.5px; color:var(--ktb-ink3); font-weight:700;
            margin:-2px 2px 8px; letter-spacing:.02em; }
/* The medal in the place column IS the marker now — a colored bar down the left saying
   the same thing was one signal too many, and it competed with the accent bar that means
   "this is you". The row keeps a faint tint so the paid places still read as a group. */
.ktlb-row.win { background:color-mix(in srgb, var(--ktb-mark) 9%, transparent); }
.ktlb-row.win .ktlb-nm { font-weight:900; }
.ktlb-medal { font-size:14px; margin-left:6px; line-height:1; }

/* --- money board: same ranked-row pattern, three columns instead of five --- */
.ktlb-hd-money, .ktlb-row-money { grid-template-columns:minmax(0,1fr) 44px 66px; }
.ktlb-take { font-size:16.5px; font-weight:900; }
/* Score details: six columns, none of them wide, all of them numbers. */
.ktlb-hd-detail, .ktlb-row-detail { grid-template-columns:minmax(0,1fr) 34px 34px 40px 30px 30px; }
/* Your foursome, inline on Round rather than in a sheet over it. */
.ktlb-hd-grp, .ktlb-row-grp { grid-template-columns:minmax(0,1fr) 30px 32px 32px 36px 34px; }
.ktlb-row-grp { cursor:default; }
.ktlb-row-grp.out .ktlb-nm { color:var(--ktb-ink3); font-weight:700; font-style:italic; }
.ktlb-row-grp.out .ktlb-num { opacity:.55; }
.ktgc-hd { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
           padding:11px 14px 9px; border-bottom:1px solid var(--ktb-line); }
.ktgc-hd .k { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
              color:var(--ktb-ink3); }
.ktgc-hd b { font-size:15px; font-weight:800; color:var(--ktb-ink); }
.ktgc-hd .t { font-size:12.5px; color:var(--ktb-ink2); font-weight:700; }
.ktgc-empty { padding:16px 14px; font-size:13px; color:var(--ktb-ink3); }
.ktgc-c { font-size:10px; font-weight:900; color:var(--ktb-accent); margin-left:5px;
          vertical-align:top; }
.ktgc-out { font-size:10px; font-weight:800; color:var(--ktb-dn); margin-left:6px;
            text-transform:uppercase; letter-spacing:.05em; }
.ktlb-hd-detail > span:not(:first-child) { font-size:9px; }
/* Where the money came from: one narrow column per pot that actually paid. Quieter than
   the Take beside them on purpose — they are the supporting detail, not the answer. */
.ktlb-src { font-size:12px; font-weight:700; color:var(--ktb-ink2); }
.ktlb-src.zero { color:var(--ktb-ink3); font-weight:600; }
.ktlb-hd-money > span:not(:first-child) { font-size:9px; }
.ktlb-legend { padding:7px 2px 0; font-size:11px; line-height:1.35; color:var(--ktb-ink3); }

/* More opens from the avatar, so it names the account it belongs to. */
.ktapp-me { display:flex; align-items:center; gap:11px; padding:4px 2px 14px; }
.ktapp-me .av { flex:0 0 auto; width:38px; height:38px; border-radius:50%;
                display:flex; align-items:center; justify-content:center;
                background:var(--ktb-accent); color:var(--ktb-accent-ink);
                font-weight:900; font-size:13.5px; letter-spacing:.02em; }
.ktapp-me .who { min-width:0; display:flex; flex-direction:column; gap:2px; }
.ktapp-me .who b { font-size:15.5px; font-weight:800; color:var(--ktb-ink);
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ktapp-me .who small { font-size:11.5px; color:var(--ktb-ink3); }


.ktlb-more { display:block; width:100%; text-align:center; background:var(--ktb-surface);
             border:1px solid var(--ktb-line); border-radius:12px; padding:11px;
             font-size:12.5px; font-weight:800; color:var(--ktb-ink2);
             font-family:inherit; cursor:pointer; margin-bottom:10px; }
.ktlb-more:hover { color:var(--ktb-ink); }

/* --- the top three told apart. Gold, silver, bronze on the place itself, so "who won" and
       "who else was up there" are two different reads rather than one block of brass. --- */
/* GOLD, SILVER, BRONZE - each its own, on the row as well as the number.
   ==========================================================================
   The winner's row carried a gold wash and second and third carried nothing, so the podium
   read as "the winner, and some other people". They are three different results and they
   look like it now: the row is tinted with its own metal and edged on the left with it, and
   the medal beside the name shows for all three rather than only for the places that pay.

   These come after .win on purpose. Being in the money is worth saying, but on the top three
   the metal is the better thing to say - and two golds side by side said neither. */
.ktlb-row.p1 { background:color-mix(in srgb, #f0c14b 15%, transparent);
               box-shadow:inset 3px 0 0 #f0c14b; }
.ktlb-row.p2 { background:color-mix(in srgb, #c3cbd4 14%, transparent);
               box-shadow:inset 3px 0 0 #c3cbd4; }
.ktlb-row.p3 { background:color-mix(in srgb, #d08a52 14%, transparent);
               box-shadow:inset 3px 0 0 #d08a52; }
/* Your own row still wins the left edge - finding yourself matters more than the podium. */
.ktlb-row.me.p1, .ktlb-row.me.p2, .ktlb-row.me.p3 {
    box-shadow:inset 3px 0 0 var(--ktb-accent); }

.ktlb-row.p1 .ktlb-pos { color:#f0c14b; }
.ktlb-row.p2 .ktlb-pos { color:#c3cbd4; }
.ktlb-row.p3 .ktlb-pos { color:#d08a52; }
.ktlb-row.p1 .ktlb-pos, .ktlb-row.p2 .ktlb-pos, .ktlb-row.p3 .ktlb-pos {
    font-size:14px; font-weight:900; }
/* Mid-round there is no medal yet, so the top three are told apart by the color of the
   number instead — see .p1/.p2/.p3 above. Your own row keeps its accent bar throughout,
   which is now the only bar in the list and so unambiguous. */

/* --- overlays written before the app shell existed ---------------------------------------
   Each one opens its card a fixed 30-50px from the top of the viewport. That was right when
   the page began at the top of the screen; with a fixed app header there, the card now lands
   on top of it and reads as a popup from the old site. Pushed below the header instead, and
   clear of the notch. Done here rather than in a dozen inline styles, and without touching the
   show/hide code — every one of these is opened from several places. */
#scorecardModal > div, #playerSelectModal > div, #groupingsModal > div {
    margin-top: calc(env(safe-area-inset-top, 0px) + 74px) !important;
    margin-bottom: 18px !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 100px) !important;
}
#rainoutModal > div, #completeModal > div {
    margin-top: calc(env(safe-area-inset-top, 0px) + 74px) !important;
}

/* The way back out of a page that has not been rebuilt yet. The navbar's brand link is the
   other way home, but it is a fixed bar at the very top of a home-screen app with no browser
   chrome around it — easy to miss, and nothing else on those pages goes anywhere. This sits in
   thumb reach, where the rebuilt screens put their controls. */
/* The way back from a detail view.

   It was a pill fixed to the bottom-left corner at z-index 900 - which is the bar's own strip at
   the bar's own z-index, so it covered the leftmost bar button. Bottom-left is also where a
   website puts Back and where an app puts nothing.

   In the header now, left of the title. Until the script has moved it there it is hidden rather
   than drawn in the wrong place, so it never flashes at the foot of the page first. */
.ktback { display:none; }
.ktback.inhdr { flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
                margin-right:10px; padding:0 11px 0 8px; height:34px; border-radius:11px;
                background:var(--ktb-surface2); color:var(--ktb-accent);
                border:1px solid var(--ktb-line); font-size:12.5px; font-weight:800;
                text-decoration:none; white-space:nowrap; max-width:44vw;
                overflow:hidden; text-overflow:ellipsis; }
.ktback.inhdr span { font-size:17px; line-height:1; }
.kt-dark a.ktback.inhdr, .kt-club a.ktback.inhdr,
.kt-dark a.ktback.inhdr:hover, .kt-club a.ktback.inhdr:hover { color:var(--ktb-accent);
                                                               text-decoration:none; }
.ktback:hover, .ktback:focus { text-decoration:none; }
@media print { .ktback { display:none; } }
/* Room for it. It floats over the page, so the last row of a long table or the final
   button of a form would otherwise sit underneath it. */
/* No longer a floating pill, so the page does not need a hole kept at its foot for it. */

/* --- the recap, wearing the app --------------------------------------------------------
   Fun Facts is still its own light page for anyone who opens it directly; what lands inside
   .ktrecap is the same markup dropped into a dark shell, so its whites and greys are remapped
   here rather than in the page. Overriding by class keeps the page honest: nothing there needs
   to know it is sometimes a block of the round.
   The accent colors it uses to mean something — birdie blue, bogey amber, the red of a triple —
   are left alone. They are the point of those numbers, and they read fine on a dark ground. */
/* Canvas, not surface: it is a wrapper full of cards, and if it shared their color they would
   vanish into it. */
/* The front door. In the stylesheet rather than inline because the screen switcher reveals a
   claimed element with style.display = '', which erases an inline display and would drop this
   back to an inline anchor — its block children then tear the green box into fragments. */
/* White on the accent was invisible: in the dark skin --kt-accent resolves to a pale green that
   is meant to carry DARK text — that is what --ktb-accent-ink is for. The card had been written
   for a light theme where the accent was a deep green, and nobody saw it because the box itself
   was broken until now. */
.ktfront { display:flex; align-items:center; gap:11px; margin:4px 0 9px; padding:13px 15px;
           background:var(--ktb-accent); border-radius:12px; text-decoration:none; }
/* The color needs the skin class in front of it, and this is why the words were invisible.
   ".kt-dark a" is one class plus one element — MORE specific than a bare ".ktfront" — so the
   anchor kept taking the accent color, and the card is painted IN the accent. Accent on accent
   is nothing at all. Before that it was an inline color:#fff, which won on specificity and was
   merely unreadable rather than absent: the card was written for a light theme, where the accent
   was a deep green. */
.kt-dark a.ktfront, .kt-club a.ktfront,
.kt-dark a.ktfront:hover, .kt-club a.ktfront:hover,
.kt-dark a.ktfront:focus, .kt-club a.ktfront:focus {
    color:var(--ktb-accent-ink); text-decoration:none; }

.ktrecap { padding:14px 12px 16px; background:var(--ktb-canvas); }
.ktrecap .ff-page { padding:0; }
.ktrecap .ff-header { text-align:left; margin-bottom:16px; }
.ktrecap .ff-header h3 { font-size:19px; font-weight:800; color:var(--ktb-ink); margin:0 0 3px; }
.ktrecap .ff-header .ff-sub { color:var(--ktb-ink3); font-size:12.5px; font-weight:700; }
.ktrecap .ff-section-title { color:var(--ktb-ink); font-size:11px; font-weight:800;
                             letter-spacing:.1em; text-transform:uppercase;
                             border-bottom:1px solid var(--ktb-line); padding-bottom:6px; }
.ktrecap .ff-card { background:var(--ktb-surface); border:1px solid var(--ktb-line); }
.ktrecap .ff-card-label { color:var(--ktb-ink3); }
.ktrecap .ff-card-name { color:var(--ktb-ink); }
.ktrecap .ff-card-value { color:var(--ktb-ink2); }
.ktrecap .ff-list-item { color:var(--ktb-ink2); }
.ktrecap .ff-stat-box { background:var(--ktb-surface); border:1px solid var(--ktb-line); }
.ktrecap .ff-stat-label { color:var(--ktb-ink3); }
.ktrecap .ff-stat-avg { color:var(--ktb-ink); }
/* The story panel was a pale green wash meant to lift off white; on a dark ground it has to do
   the opposite and sit slightly proud of it. */
.ktrecap .ff-story-box { background:var(--ktb-surface); border:1px solid var(--ktb-line);
                         color:var(--ktb-ink2); }
.ktrecap .ff-author-tab { background:var(--ktb-surface); color:var(--ktb-ink3);
                          border:1px solid var(--ktb-line); border-bottom:none; }
.ktrecap .ff-author-tab:hover:not(.active) { background:var(--ktb-surface); color:var(--ktb-ink2); }
/* It is already inside the round, so the link back out of it is not wanted here. */
.ktrecap .ff-cross, .ktrecap .ff-back { display:none; }
/* Anything the page draws with a hardcoded light background — a table, an inline-styled panel —
   still has to be readable. Same rule the other legacy panels get. */
.ktrecap table { color:var(--ktb-ink); }

/* --- the scorecard -----------------------------------------------------------------------
   Nine tiles to a row, one per hole: number, score, par, net. The color does the reading —
   you find your birdies without counting against the par line. Sized so nine fit across the
   narrowest phone with the score still large enough to read at arm's length on a tee box. */
.ktsc-nine { margin:0 0 14px; }
.ktsc-hd { display:flex; align-items:baseline; gap:8px; padding:0 2px 7px; }
.ktsc-hd b { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
             color:var(--ktb-ink); }
.ktsc-hd span { font-size:11px; color:var(--ktb-ink3); font-weight:700; }
.ktsc-hd em { margin-left:auto; font-style:normal; font-size:17px; font-weight:900;
              color:var(--ktb-ink); font-variant-numeric:tabular-nums; }
.ktsc-hd em i { font-style:normal; font-size:11px; font-weight:800; color:var(--ktb-ink3);
                margin-left:6px; }
.ktsc-row { display:grid; grid-template-columns:repeat(9, 1fr); gap:3px; }
.ktsc-t { display:flex; flex-direction:column; align-items:center; gap:1px;
          padding:5px 0 6px; border-radius:9px; background:var(--ktb-surface);
          border:1px solid var(--ktb-line); min-width:0; }
/* The hole number is what you scan the card BY, so it is not the faintest thing on it. */
.ktsc-t .h { font-size:11px; font-weight:800; color:var(--ktb-ink2); line-height:1; }
.ktsc-t .s { font-size:18px; font-weight:900; line-height:1.05; color:var(--ktb-ink);
             font-variant-numeric:tabular-nums; }
/* Par sits under the score, quieter than it and quieter than the hole number, so three
   numbers in a column of eighteen cells can still be told apart at a glance. */
.ktsc-t .p { font-size:9.5px; font-weight:700; color:var(--ktb-ink3); line-height:1.15; }

/* Nothing scored yet: the hole and its par, centred, and the cell steps back so the holes
   that HAVE been played are the ones your eye lands on. */
.ktsc-t.empty { justify-content:center; gap:3px; opacity:.62; }
.ktsc-t.empty .p { font-size:9px; letter-spacing:.02em; }
.ktsc-t .n { font-size:11px; font-weight:800; color:var(--ktb-ink2); line-height:1.1;
             font-variant-numeric:tabular-nums; }
.ktsc-t .n i { font-style:normal; font-size:10px; color:var(--ktb-accent); }

/* Score against par. Eagle and better take the same gold the medals use; a birdie is the
   accent; par stays plain, because most holes are pars and a card of colored squares says
   nothing. Over par warms up to red the further it goes. */
.ktsc-t.eag { background:color-mix(in srgb, var(--ktb-mark) 26%, var(--ktb-surface));
              border-color:color-mix(in srgb, var(--ktb-mark) 55%, var(--ktb-line)); }
.ktsc-t.eag .s { color:var(--ktb-mark); }
.ktsc-t.bir { background:color-mix(in srgb, var(--ktb-accent) 20%, var(--ktb-surface));
              border-color:color-mix(in srgb, var(--ktb-accent) 50%, var(--ktb-line)); }
.ktsc-t.bir .s { color:var(--ktb-accent); }
.ktsc-t.bog { background:color-mix(in srgb, #e8a33d 16%, var(--ktb-surface));
              border-color:color-mix(in srgb, #e8a33d 40%, var(--ktb-line)); }
.ktsc-t.dbl { background:color-mix(in srgb, var(--ktb-dn) 18%, var(--ktb-surface));
              border-color:color-mix(in srgb, var(--ktb-dn) 45%, var(--ktb-line)); }
.ktsc-t.dbl .s { color:var(--ktb-dn); }
.ktsc-t.tri { background:color-mix(in srgb, var(--ktb-dn) 30%, var(--ktb-surface));
              border-color:var(--ktb-dn); }
.ktsc-t.tri .s { color:var(--ktb-dn); }
.ktsc-t.non { opacity:.55; }
.ktsc-t.non .s { color:var(--ktb-ink3); }

.ktsc-tot { display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; margin:2px 0 10px; }
.ktsc-tot > div { text-align:center; padding:9px 4px 10px; border-radius:10px;
                  background:var(--ktb-surface); border:1px solid var(--ktb-line); }
.ktsc-tot .l { font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
               color:var(--ktb-ink3); }
.ktsc-tot .v { font-size:22px; font-weight:900; color:var(--ktb-ink); line-height:1.1;
               font-variant-numeric:tabular-nums; }
.ktsc-tot .n { font-size:11px; font-weight:800; color:var(--ktb-ink3); }
/* The tees, on the seam between the holes and the total. Quiet: it is a qualifier on the
   number below it, not a headline of its own. */
.ktsc-tee { display:flex; align-items:center; justify-content:center; gap:9px;
            margin:10px 0 0; padding:8px 12px; border-radius:10px;
            background:var(--ktb-surface2); border:1px solid var(--ktb-line); }
.ktsc-tee span { font-size:10.5px; font-weight:800; letter-spacing:.08em;
                 text-transform:uppercase; color:var(--ktb-ink3); }
.ktsc-tee b { font-size:14px; font-weight:800; color:var(--ktb-ink); }

/* THE SCORE BUTTON FLOATS, SO THE CARD HAS TO LEAVE IT ROOM.
   It is position:absolute over the scrolling area, which is right for a page - it should be
   reachable wherever you are on it - but the scorecard ends exactly where the button sits, so
   it was parked on top of the totals with TOTAL underneath it and no way to read it. The card
   ends far enough above the button that both are legible. */
#myScorecard { padding-bottom:78px; }

.ktsc-key { font-size:11px; line-height:1.4; color:var(--ktb-ink3); padding:0 2px 4px; }

/* --- Holes, Par 3s and Team --------------------------------------------------------------
   These three are the last of the printed-scorecard look: a blue 1px border round the whole
   table, a silver header row, white and light-grey stripes, and colors chosen to sit on paper.
   Rewriting them is not worth the risk — between them they carry the scat winners, the natural
   and eagle pills, the tie-breaker modals, the CTP editors and the team money, all wired
   through data attributes and rowspans. So they keep every row, every handler and every span,
   and change what they are made of: no frame, a hairline between rows, dark surfaces, numbers
   that line up.

   !important throughout, and not lightly: the backgrounds and colors these rules replace are
   inline style attributes written per row in Razor, and nothing else beats an inline style.
   ----------------------------------------------------------------------------------------- */
.kt-dark #holes-content table, .kt-dark #par3-content table, .kt-dark #team-content table {
    border:none !important; border-collapse:collapse; width:100%;
    font-size:13px; color:var(--ktb-ink); }
.kt-dark #holes-content table td, .kt-dark #par3-content table td, .kt-dark #team-content table td, .kt-dark #holes-content table th, .kt-dark #par3-content table th, .kt-dark #team-content table th {
    border:none !important; border-bottom:1px solid var(--ktb-line) !important;
    padding:8px 5px !important; font-variant-numeric:tabular-nums; }

/* The header row: silver and bold becomes the same quiet caption the ranked rows use. */
.kt-dark #holes-content tr[style*="lightgray"], .kt-dark #par3-content tr[style*="lightgray"], .kt-dark #team-content tr[style*="lightgray"] {
    background:transparent !important; }
.kt-dark #holes-content tr[style*="lightgray"] th, .kt-dark #par3-content tr[style*="lightgray"] th, .kt-dark #team-content tr[style*="lightgray"] th {
    background:transparent !important; color:var(--ktb-ink3) !important;
    font-size:9.5px !important; font-weight:800 !important; letter-spacing:.09em;
    text-transform:uppercase; border-bottom:1px solid var(--ktb-line) !important; }

/* Zebra striping does not survive the trip to a dark ground — the stripes end up either
   invisible or louder than the content. One flat surface, rows told apart by the hairline. */
.kt-dark #holes-content tr[style*="background-color:white"], .kt-dark #par3-content tr[style*="background-color:white"], .kt-dark #team-content tr[style*="background-color:white"], .kt-dark #holes-content tr[style*="#e0e0e0"], .kt-dark #par3-content tr[style*="#e0e0e0"], .kt-dark #team-content tr[style*="#e0e0e0"] {
    background:transparent !important; }

/* These two DO carry meaning and have to survive: green means every group has posted the hole,
   amber means somebody is still on it and the result could change. Same distinction, dark. */
.kt-dark #holes-content tr[style*="#e8f5e9"], .kt-dark #par3-content tr[style*="#e8f5e9"], .kt-dark #team-content tr[style*="#e8f5e9"] {
    background:color-mix(in srgb, var(--ktb-up) 9%, transparent) !important; }
.kt-dark #holes-content tr[style*="#fff8e1"], .kt-dark #par3-content tr[style*="#fff8e1"], .kt-dark #team-content tr[style*="#fff8e1"] {
    background:color-mix(in srgb, var(--ktb-mark) 10%, transparent) !important; }

/* Inline text colors, all of them picked against white. */
.kt-dark #holes-content [style^="color:green"],
.kt-dark #holes-content [style*=";color:green"],
.kt-dark #holes-content [style*="; color:green"],
.kt-dark #par3-content [style^="color:green"],
.kt-dark #par3-content [style*=";color:green"],
.kt-dark #par3-content [style*="; color:green"],
.kt-dark #team-content [style^="color:green"] { color:var(--ktb-up) !important; },
.kt-dark #team-content [style*=";color:green"] { color:var(--ktb-up) !important; },
.kt-dark #team-content [style*="; color:green"] { color:var(--ktb-up) !important; }
.kt-dark #holes-content [style^="color:red"],
.kt-dark #holes-content [style*=";color:red"],
.kt-dark #holes-content [style*="; color:red"],
.kt-dark #par3-content [style^="color:red"],
.kt-dark #par3-content [style*=";color:red"],
.kt-dark #par3-content [style*="; color:red"],
.kt-dark #team-content [style^="color:red"] { color:var(--ktb-dn) !important; },
.kt-dark #team-content [style*=";color:red"] { color:var(--ktb-dn) !important; },
.kt-dark #team-content [style*="; color:red"] { color:var(--ktb-dn) !important; }
.kt-dark #holes-content [style*="#996600"], .kt-dark #par3-content [style*="#996600"], .kt-dark #team-content [style*="#996600"] { color:var(--ktb-ink3) !important; }
.kt-dark #holes-content [style*="#1565c0"], .kt-dark #par3-content [style*="#1565c0"], .kt-dark #team-content [style*="#1565c0"] { color:var(--ktb-ink3) !important; }
.kt-dark #holes-content [style^="color:#666"],
.kt-dark #holes-content [style*=";color:#666"],
.kt-dark #holes-content [style*="; color:#666"],
.kt-dark #par3-content [style^="color:#666"],
.kt-dark #par3-content [style*=";color:#666"],
.kt-dark #par3-content [style*="; color:#666"],
.kt-dark #team-content [style^="color:#666"],
.kt-dark #team-content [style*=";color:#666"],
.kt-dark #team-content [style*="; color:#666"],
.kt-dark #holes-content [style^="color:#888"],
.kt-dark #holes-content [style*=";color:#888"],
.kt-dark #holes-content [style*="; color:#888"],
.kt-dark #par3-content [style^="color:#888"],
.kt-dark #par3-content [style*=";color:#888"],
.kt-dark #par3-content [style*="; color:#888"],
.kt-dark #team-content [style^="color:#888"],
.kt-dark #team-content [style*=";color:#888"],
.kt-dark #team-content [style*="; color:#888"] {
    color:var(--ktb-ink3) !important; }
.kt-dark #holes-content [style^="color:#6a3d7a"],
.kt-dark #holes-content [style*=";color:#6a3d7a"],
.kt-dark #holes-content [style*="; color:#6a3d7a"],
.kt-dark #par3-content [style^="color:#6a3d7a"],
.kt-dark #par3-content [style*=";color:#6a3d7a"],
.kt-dark #par3-content [style*="; color:#6a3d7a"],
.kt-dark #team-content [style^="color:#6a3d7a"] { color:var(--ktb-accent) !important; },
.kt-dark #team-content [style*=";color:#6a3d7a"] { color:var(--ktb-accent) !important; },
.kt-dark #team-content [style*="; color:#6a3d7a"] { color:var(--ktb-accent) !important; }

/* Links inside these tables are how you open a scorecard, a tie-breaker or a winner: they have
   to look tappable without turning every name into a color. */
.kt-dark #holes-content a, .kt-dark #par3-content a, .kt-dark #team-content a { color:var(--ktb-ink) !important;
    text-decoration-color:var(--ktb-ink3) !important; }
.kt-dark #holes-content a[style*="background"], .kt-dark #par3-content a[style*="background"], .kt-dark #team-content a[style*="background"] { color:#fff !important; }

/* The switcher above the hole column, and anything else that came dressed as a light pill. */
.kt-dark #holes-content table [style*="background-color:#f"], .kt-dark #par3-content table [style*="background-color:#f"], .kt-dark #team-content table [style*="background-color:#f"], .kt-dark #holes-content table [style*="background:#f"], .kt-dark #par3-content table [style*="background:#f"], .kt-dark #team-content table [style*="background:#f"] {
    background:var(--ktb-surface) !important; color:var(--ktb-ink2) !important;
    border-color:var(--ktb-line) !important; }

/* Net vs Match sits inside the Team block and came with its own white panel and slate header. */
.kt-dark .tm-panel { border-color:var(--ktb-line) !important;
    background:var(--ktb-surface) !important; }
.kt-dark .tm-panel > div:first-child { background:var(--ktb-canvas) !important;
    color:var(--ktb-ink) !important; }
.kt-dark .tm-body { background:var(--ktb-surface) !important; }
.kt-dark .tmgrid th, .kt-dark .tmgrid td, .kt-dark .tmmoney th, .kt-dark .tmmoney td {
    border-color:var(--ktb-line) !important; color:var(--ktb-ink); }

/* The Team block is not only tables: the standings and the tie-breaker notes are inline-styled
   panels in paper colors. Silver headings, white cards, a pale-green winner and a pale-red
   loser — each one has a job, so each is remapped rather than flattened. */
.kt-dark #holes-content [style*="background-color:Silver"],
.kt-dark #par3-content [style*="background-color:Silver"],
.kt-dark #team-content [style*="background-color:Silver"] {
    background:var(--ktb-canvas) !important; color:var(--ktb-ink3) !important; }
.kt-dark #holes-content [style*="background-color:white"],
.kt-dark #par3-content [style*="background-color:white"],
.kt-dark #team-content [style*="background-color:white"],
.kt-dark #holes-content [style*="background:#f9f9f9"],
.kt-dark #par3-content [style*="background:#f9f9f9"],
.kt-dark #team-content [style*="background:#f9f9f9"],
.kt-dark #holes-content [style*="background:#f5f5f5"],
.kt-dark #par3-content [style*="background:#f5f5f5"],
.kt-dark #team-content [style*="background:#f5f5f5"] {
    background:var(--ktb-surface) !important; color:var(--ktb-ink) !important; }
/* Winner, and the strip that says a team is up. */
.kt-dark #holes-content [style*="#d4edda"],
.kt-dark #par3-content [style*="#d4edda"],
.kt-dark #team-content [style*="#d4edda"],
.kt-dark #holes-content [style*="background-color:#2e7d32"],
.kt-dark #par3-content [style*="background-color:#2e7d32"],
.kt-dark #team-content [style*="background-color:#2e7d32"],
.kt-dark #holes-content [style*="background:#2e7d32"],
.kt-dark #par3-content [style*="background:#2e7d32"],
.kt-dark #team-content [style*="background:#2e7d32"] {
    background:color-mix(in srgb, var(--ktb-up) 20%, var(--ktb-surface)) !important;
    color:var(--ktb-ink) !important; }
/* Down, and the rain-out red. */
.kt-dark #holes-content [style*="#ffebee"],
.kt-dark #par3-content [style*="#ffebee"],
.kt-dark #team-content [style*="#ffebee"],
.kt-dark #holes-content [style*="background:#d9534f"],
.kt-dark #par3-content [style*="background:#d9534f"],
.kt-dark #team-content [style*="background:#d9534f"] {
    background:color-mix(in srgb, var(--ktb-dn) 20%, var(--ktb-surface)) !important;
    color:var(--ktb-ink) !important; }
/* The tie-breaker note. */
.kt-dark #holes-content [style*="#fff3e0"],
.kt-dark #par3-content [style*="#fff3e0"],
.kt-dark #team-content [style*="#fff3e0"] {
    background:color-mix(in srgb, var(--ktb-mark) 12%, var(--ktb-surface)) !important;
    color:var(--ktb-ink) !important; border-color:var(--ktb-line) !important; }

/* Absolute font-size keywords. These tables were sized with "x-large", "large" and "medium" —
   which are browser-defined steps, not part of any scale this app uses, and on a phone they
   land somewhere between a heading and a caption. The Par 3 rows in particular came out at a
   size that read as neither. Everything here is on the app's scale now; the small print inside
   a cell keeps its own explicit pixel size. */
.kt-dark #holes-content [style*="font-size:x-large"],
.kt-dark #par3-content [style*="font-size:x-large"],
.kt-dark #team-content [style*="font-size:x-large"],
.kt-dark #holes-content [style*="font-size:large"],
.kt-dark #par3-content [style*="font-size:large"],
.kt-dark #team-content [style*="font-size:large"],
.kt-dark #holes-content [style*="font-size:medium"],
.kt-dark #par3-content [style*="font-size:medium"],
.kt-dark #team-content [style*="font-size:medium"] { font-size:13.5px !important; }
.kt-dark #holes-content tr[style*="font-size:x-large"] th,
.kt-dark #par3-content tr[style*="font-size:x-large"] th,
.kt-dark #team-content tr[style*="font-size:x-large"] th { font-size:9.5px !important; }

/* The greys these rows use for "nothing here yet" were picked to sit on white and disappear on
   this ground. Same job, a color that can be read. */
.kt-dark #holes-content [style^="color:#777"],
.kt-dark #holes-content [style*=";color:#777"],
.kt-dark #holes-content [style*="; color:#777"],
.kt-dark #par3-content [style^="color:#777"],
.kt-dark #par3-content [style*=";color:#777"],
.kt-dark #par3-content [style*="; color:#777"],
.kt-dark #team-content [style^="color:#777"],
.kt-dark #team-content [style*=";color:#777"],
.kt-dark #team-content [style*="; color:#777"],
.kt-dark #holes-content [style^="color:#999"],
.kt-dark #holes-content [style*=";color:#999"],
.kt-dark #holes-content [style*="; color:#999"],
.kt-dark #par3-content [style^="color:#999"],
.kt-dark #par3-content [style*=";color:#999"],
.kt-dark #par3-content [style*="; color:#999"],
.kt-dark #team-content [style^="color:#999"],
.kt-dark #team-content [style*=";color:#999"],
.kt-dark #team-content [style*="; color:#999"],
.kt-dark #holes-content [style^="color:#555"],
.kt-dark #holes-content [style*=";color:#555"],
.kt-dark #holes-content [style*="; color:#555"],
.kt-dark #par3-content [style^="color:#555"],
.kt-dark #par3-content [style*=";color:#555"],
.kt-dark #par3-content [style*="; color:#555"],
.kt-dark #team-content [style^="color:#555"] { color:var(--ktb-ink3) !important; },
.kt-dark #team-content [style*=";color:#555"] { color:var(--ktb-ink3) !important; },
.kt-dark #team-content [style*="; color:#555"] { color:var(--ktb-ink3) !important; }
/* "Group stunk it up" is deep red on a pale red wash; the wash is already remapped, so the
   text only has to stop being darker than what it sits on. */
.kt-dark #holes-content [style^="color:#b71c1c"],
.kt-dark #holes-content [style*=";color:#b71c1c"],
.kt-dark #holes-content [style*="; color:#b71c1c"],
.kt-dark #par3-content [style^="color:#b71c1c"],
.kt-dark #par3-content [style*=";color:#b71c1c"],
.kt-dark #par3-content [style*="; color:#b71c1c"],
.kt-dark #team-content [style^="color:#b71c1c"] { color:var(--ktb-dn) !important; },
.kt-dark #team-content [style*=";color:#b71c1c"] { color:var(--ktb-dn) !important; },
.kt-dark #team-content [style*="; color:#b71c1c"] { color:var(--ktb-dn) !important; }

/* The stroke index in brackets beside each hole is painted in the color of the tee it belongs
   to — Purple tees give a purple number, and at 10px on this ground that is unreadable. The
   color was a second way of saying which tee you are looking at, and the tee pill above the
   column already says it in a place with room for the word. So the number goes quiet and the
   pill keeps the color. !important because the switcher writes the color back on every tap. */
.kt-dark [data-hole-hcp] { color:var(--ktb-ink3) !important; }

/* The unselected tee pills are white — a row of bright lozenges on a dark header. They take the
   surface instead and keep the tee color on their border, where it still reads. Matched on the
   inline value in both the forms it takes: as Razor writes it, and as the DOM re-serialises it
   after the switcher has set it. */
.kt-dark [data-tee-pill][style*="background:white"],
.kt-dark [data-tee-pill][style*="background: white"] {
    background:var(--ktb-surface) !important; color:var(--ktb-ink2) !important; }

/* --------------------------------------------------------------------------------------
   These sections are converted, so they have to be taken back off the legacy bridge.

   That bridge makes any element with a light inline background carry near-black text, so the
   old panels stay readable until their screen is rebuilt. It matches on the hex — and these
   tables stripe their rows with background-color:#e0e0e0. The bridge saw a light row and set
   the text to #1b1a17; the rule above turned the row transparent but colors are inherited
   from the nearest ancestor that sets one, and that is the <tr>. Result: every other row was
   near-black on near-black, which is exactly how it looked.

   Re-asserted on the rows and cells themselves. Anything with a meaning of its own — a winner,
   a red, a muted "nothing here yet" — is matched more specifically above and keeps its color.
   -------------------------------------------------------------------------------------- */
.kt-dark #holes-content tr,
.kt-dark #par3-content tr,
.kt-dark #team-content tr,
.kt-dark #holes-content td,
.kt-dark #par3-content td,
.kt-dark #team-content td,
.kt-dark #holes-content th,
.kt-dark #par3-content th,
.kt-dark #team-content th,
.kt-dark #holes-content tr > *,
.kt-dark #par3-content tr > *,
.kt-dark #team-content tr > * { color:var(--ktb-ink) !important; }

/* A golfer's two numbers, wherever the golfer is named: course handicap, then the strokes they
   get off the low man. Big enough to read — the old one was 11.5px in the dimmest ink the
   palette has, which is fine for a decoration and useless for a number people argue about. The
   strokes figure takes the accent because it is the one that decides the money. */
.kthcp { display:inline-flex; align-items:baseline; gap:5px; margin-left:8px;
         font-size:12px; font-weight:800; font-variant-numeric:tabular-nums;
         white-space:nowrap; letter-spacing:0; }
.kthcp b { font-weight:800; color:var(--ktb-ink2); }
.kthcp i { font-style:normal; font-weight:800; color:var(--ktb-accent); }
/* The separator is the character itself. It was written as a CSS escape and the tool that wrote
   this file read the CSS escape for it as an octal instead, leaving a control character and a
   box you see between the numbers. */
.kthcp i::before { content:"•"; color:var(--ktb-ink3); font-size:9px;
                   vertical-align:middle; margin-right:5px; font-weight:700; }
/* Inside the light legacy tables the accent is invisible, so the pair goes monochrome there and
   leans on weight instead. */
.kt-dark #holes-content .kthcp i, .kt-dark #par3-content .kthcp i,
.kt-dark #team-content .kthcp i { color:var(--ktb-accent) !important; }
.kt-dark #holes-content .kthcp b, .kt-dark #par3-content .kthcp b,
.kt-dark #team-content .kthcp b { color:var(--ktb-ink2) !important; }

/* --- what the recap and the stats block still had from the white page --------------------
   Both are drawn from the same .ff-* markup, so they share these.

   The bridge rule first: the same one that blacked out every other Par 3 row. These pages set
   light inline backgrounds all over — cards, stat boxes, the progress track — so the bridge
   gives their text near-black, and color inherits down from whichever ancestor it caught.
   Converted, so they come off it, and anything with a meaning of its own is matched below. */
.kt-dark .ktrecap, .kt-dark .ktrecap * { color:var(--ktb-ink) !important; }

/* The greys. Four of them, all picked to sit on white, all of them somewhere between faint and
   invisible on this ground. One muted ink, which is what they all meant. */
.kt-dark .ktrecap [style^="color:#888"],
.kt-dark .ktrecap [style*=";color:#888"],
.kt-dark .ktrecap [style*="; color:#888"],
.kt-dark .ktrecap [style^="color:#777"],
.kt-dark .ktrecap [style*=";color:#777"],
.kt-dark .ktrecap [style*="; color:#777"],
.kt-dark .ktrecap [style^="color:#666"],
.kt-dark .ktrecap [style*=";color:#666"],
.kt-dark .ktrecap [style*="; color:#666"],
.kt-dark .ktrecap [style^="color:#555"],
.kt-dark .ktrecap [style*=";color:#555"],
.kt-dark .ktrecap [style*="; color:#555"],
.kt-dark .ktrecap [style^="color:#999"],
.kt-dark .ktrecap [style*=";color:#999"],
.kt-dark .ktrecap [style*="; color:#999"],
.kt-dark .ktrecap .ff-card-label,
.kt-dark .ktrecap .ff-stat-label, .kt-dark .ktrecap .ff-sub {
    color:var(--ktb-ink3) !important; }
.kt-dark .ktrecap .ff-card-value, .kt-dark .ktrecap .ff-list-item {
    color:var(--ktb-ink2) !important; }

/* The progress bar was a light grey trough with a purple fill — the trough read as a solid bar
   in its own right here, brighter than the thing it was measuring. It becomes a groove. */
.kt-dark .ktrecap [style*="background:#e0e0e0"],
.kt-dark .ktrecap [style*="background-color:#e0e0e0"] {
    background:var(--ktb-line) !important; }

/* The purple that fills it, and the buttons in the same purple, are dark-on-dark: they keep
   their color but need their own text told, because everything above just claimed it. */
.kt-dark .ktrecap .ff-story-btn, .kt-dark .ktrecap .ff-play-btn,
.kt-dark .ktrecap .ff-author-tab.active, .kt-dark .ktrecap [style*="background:linear-gradient"],
.kt-dark .ktrecap [style*="background: linear-gradient"] { color:#fff !important; }

/* Colors that say something keep saying it. */
.kt-dark .ktrecap .ff-stat-birdie { color:#6ba8e8 !important; }
.kt-dark .ktrecap .ff-stat-par { color:var(--ktb-up) !important; }
.kt-dark .ktrecap .ff-stat-bogey { color:#e8a33d !important; }
.kt-dark .ktrecap .ff-stat-double, .kt-dark .ktrecap .ff-stat-triple {
    color:var(--ktb-dn) !important; }
.kt-dark .ktrecap [style^="color:#d9534f"] { color:var(--ktb-dn) !important; },
.kt-dark .ktrecap [style*=";color:#d9534f"] { color:var(--ktb-dn) !important; },
.kt-dark .ktrecap [style*="; color:#d9534f"] { color:var(--ktb-dn) !important; }
.kt-dark .ktrecap [style^="color:#7b1fa2"] { color:#c58ae0 !important; },
.kt-dark .ktrecap [style*=";color:#7b1fa2"] { color:#c58ae0 !important; },
.kt-dark .ktrecap [style*="; color:#7b1fa2"] { color:#c58ae0 !important; }

/* --- another player's scorecard ----------------------------------------------------------
   Tapping any name opens this, and it was the last white sheet in the app: the same printed
   card the round screen used to show, fetched as a partial and dropped into a modal.

   Restyled rather than redrawn, for the same reason as Holes and Team — the partial computes
   the Klown stroke allocation and the money tracker, and none of that wants disturbing to
   change a color. The score tints are matched to the tiles on My Round, so the same round
   reads the same way whether it is yours or somebody else's.
   ---------------------------------------------------------------------------------------- */
.kt-dark #scorecardModal > div { background:var(--ktb-surface) !important; color:var(--ktb-ink) !important;
    border:1px solid var(--ktb-line); border-radius:16px !important; }
/* Everything in this modal was drawn for a white page, so its buttons are forced to a dark
   ink here. NOT the Scorecard / Money Tracker pills though: this was painting the LIT one's
   text dim grey over its green fill - measured at 1.82:1, which is unreadable - because an
   !important blanket beat the pill's own colour. They opt out and set their own. */
.kt-dark #scorecardModal button:not(.ps-pills button) { color:var(--ktb-ink3) !important; }

/* The two pills, sized to be read. 13px was small for a control that names what you are
   looking at, and the lit one has to sit on the accent fill. */
.kt-dark #scorecardModal .ps-pills button { font-size:14px; color:var(--ktb-ink2) !important; }
.kt-dark #scorecardModal .ps-pills button.on { color:var(--ktb-accent-ink,#08140c) !important; }

/* Off the bridge, then dressed. */
.kt-dark #scorecardModalContent, .kt-dark #scorecardModalContent * { color:var(--ktb-ink) !important; }
.kt-dark #scorecardModalContent table { border-color:var(--ktb-line) !important; background:transparent !important; }
.kt-dark #scorecardModalContent td, .kt-dark #scorecardModalContent th { border-color:var(--ktb-line) !important;
    background:transparent !important; font-variant-numeric:tabular-nums; }
.kt-dark #scorecardModalContent [style*="background-color:Silver"], .kt-dark #scorecardModalContent [style*="background-color:silver"],
.kt-dark #scorecardModalContent [style*="background-color:lightgray"] {
    background:var(--ktb-canvas) !important; color:var(--ktb-ink3) !important; }
.kt-dark #scorecardModalContent [style*="background-color:white"], .kt-dark #scorecardModalContent [style*="background:white"] {
    background:transparent !important; }

/* The score cells. Same five states as the tiles on My Round, same colors. */
.kt-dark #scorecardModalContent [style*="#fff3c4"] { background:color-mix(in srgb, var(--ktb-mark) 26%, transparent) !important; }
.kt-dark #scorecardModalContent [style*="#e6f9e6"] { background:color-mix(in srgb, var(--ktb-accent) 20%, transparent) !important; }
.kt-dark #scorecardModalContent [style*="#ffe6e6"] { background:color-mix(in srgb, #e8a33d 16%, transparent) !important; }
.kt-dark #scorecardModalContent [style*="#ffe8cc"] { background:color-mix(in srgb, var(--ktb-dn) 18%, transparent) !important; }
.kt-dark #scorecardModalContent [style*="#f3e5f5"] { background:color-mix(in srgb, var(--ktb-dn) 30%, transparent) !important; }

/* And the ink those cells were written in. */
.kt-dark #scorecardModalContent [style*="#996515"] { color:var(--ktb-mark) !important; }
.kt-dark #scorecardModalContent [style^="color:green"] { color:var(--ktb-accent) !important; },
.kt-dark #scorecardModalContent [style*=";color:green"] { color:var(--ktb-accent) !important; },
.kt-dark #scorecardModalContent [style*="; color:green"] { color:var(--ktb-accent) !important; }
.kt-dark #scorecardModalContent [style^="color:red"] { color:var(--ktb-dn) !important; },
.kt-dark #scorecardModalContent [style*=";color:red"] { color:var(--ktb-dn) !important; },
.kt-dark #scorecardModalContent [style*="; color:red"] { color:var(--ktb-dn) !important; }
.kt-dark #scorecardModalContent [style*="#c65102"] { color:#e8a33d !important; }
.kt-dark #scorecardModalContent [style*="#6a1b9a"] { color:var(--ktb-dn) !important; }
.kt-dark #scorecardModalContent [style^="color:#888"],
.kt-dark #scorecardModalContent [style*=";color:#888"],
.kt-dark #scorecardModalContent [style*="; color:#888"],
.kt-dark #scorecardModalContent [style^="color:#666"],
.kt-dark #scorecardModalContent [style*=";color:#666"],
.kt-dark #scorecardModalContent [style*="; color:#666"],
.kt-dark #scorecardModalContent [style^="color:#777"],
.kt-dark #scorecardModalContent [style*=";color:#777"],
.kt-dark #scorecardModalContent [style*="; color:#777"],
.kt-dark #scorecardModalContent [style^="color:#999"],
.kt-dark #scorecardModalContent [style*=";color:#999"],
.kt-dark #scorecardModalContent [style*="; color:#999"] {
    color:var(--ktb-ink3) !important; }
.kt-dark #scorecardModalContent [style*="#1565c0"] { color:var(--ktb-ink3) !important; }

/* Absolute font keywords again, and the same treatment. */
.kt-dark #scorecardModalContent [style*="font-size:x-large"], .kt-dark #scorecardModalContent [style*="font-size:large"],
.kt-dark #scorecardModalContent [style*="font-size:medium"] { font-size:13.5px !important; }

/* --- the money tracker -------------------------------------------------------------------
   Your own accounting, chip by chip. Same treatment as everything else built for paper: off
   the bridge, then the colors it used to make sense on white are remapped. Its greens and reds
   are the point of it — what you won and what you lost — so those stay, in the app's versions. */
.kt-dark #mine-content, .kt-dark #mine-content * { color:var(--ktb-ink) !important; }
.kt-dark #mine-content [style*="background-color:white"], .kt-dark #mine-content [style*="background:white"],
.kt-dark #mine-content [style*="background:#fff"], .kt-dark #mine-content [style*="background-color:#fff"],
.kt-dark #mine-content [style*="background:#f5f5f5"] { background:var(--ktb-surface) !important; }
.kt-dark #mine-content [style*="background-color:Silver"], .kt-dark #mine-content [style*="background-color:silver"],
.kt-dark #mine-content [style*="background-color:lightgray"] {
    background:var(--ktb-canvas) !important; color:var(--ktb-ink3) !important; }
.kt-dark #mine-content table, .kt-dark #mine-content td, .kt-dark #mine-content th { border-color:var(--ktb-line) !important; }
.kt-dark #mine-content [style^="color:#888"],
.kt-dark #mine-content [style*=";color:#888"],
.kt-dark #mine-content [style*="; color:#888"],
.kt-dark #mine-content [style^="color:#999"],
.kt-dark #mine-content [style*=";color:#999"],
.kt-dark #mine-content [style*="; color:#999"],
.kt-dark #mine-content [style^="color:#666"],
.kt-dark #mine-content [style*=";color:#666"],
.kt-dark #mine-content [style*="; color:#666"],
.kt-dark #mine-content [style^="color:#777"],
.kt-dark #mine-content [style*=";color:#777"],
.kt-dark #mine-content [style*="; color:#777"] {
    color:var(--ktb-ink3) !important; }
.kt-dark #mine-content [style^="color:green"],
.kt-dark #mine-content [style*=";color:green"],
.kt-dark #mine-content [style*="; color:green"],
.kt-dark #mine-content [style^="color:#2e7d32"],
.kt-dark #mine-content [style*=";color:#2e7d32"],
.kt-dark #mine-content [style*="; color:#2e7d32"] {
    color:var(--ktb-up) !important; }
.kt-dark #mine-content [style^="color:red"] { color:var(--ktb-dn) !important; },
.kt-dark #mine-content [style*=";color:red"] { color:var(--ktb-dn) !important; },
.kt-dark #mine-content [style*="; color:red"] { color:var(--ktb-dn) !important; }
/* Its header is a green gradient with white on it, and so are its buttons: they keep both. */
.kt-dark #mine-content [style*="linear-gradient"], .kt-dark #mine-content [style*="linear-gradient"] * {
    color:#fff !important; }

/* --- Start a Klown round -----------------------------------------------------------------
   A white card with a blue gradient header, forty inline styles deep. Remapped rather than
   rewritten, the same way the recap was: off the bridge first, then each paper color given its
   dark equivalent. The green Start button keeps its gradient — it is the one thing on the page
   you are looking for. */
.sg-page { background:var(--ktb-canvas); min-height:100vh; }
.sg-page, .sg-page * { color:var(--ktb-ink) !important; }
.sg-page [style*="background:white"], .sg-page [style*="background-color:white"],
.sg-page [style*="background:#fff"] { background:var(--ktb-surface) !important;
    border-color:var(--ktb-line) !important; }
/* The blue banner across the top of the card. */
.sg-page [style*="linear-gradient(135deg,#2c5f8a"] { background:var(--ktb-canvas) !important;
    color:var(--ktb-ink) !important; }
/* Labels, and the grey unit prefixes inside the money boxes. */
.sg-page [style^="color:#444"],
.sg-page [style*=";color:#444"],
.sg-page [style*="; color:#444"],
.sg-page [style^="color:#666"],
.sg-page [style*=";color:#666"],
.sg-page [style*="; color:#666"],
.sg-page [style^="color:#888"],
.sg-page [style*=";color:#888"],
.sg-page [style*="; color:#888"],
.sg-page [style^="color:#999"],
.sg-page [style*=";color:#999"],
.sg-page [style*="; color:#999"] {
    color:var(--ktb-ink3) !important; }
/* Inputs and selects: a light box on a dark card reads as a hole in the page. */
.sg-page input, .sg-page select {
    background:var(--ktb-canvas) !important; color:var(--ktb-ink) !important;
    border-color:var(--ktb-line) !important; }
.sg-page [style*="border:2px solid #ccc"], .sg-page [style*="border: 2px solid #ccc"] {
    border-color:var(--ktb-line) !important; }
/* The pale panels: the note at the top and the options block lower down. */
.sg-page [style*="#e8f5e9"] { background:color-mix(in srgb, var(--ktb-accent) 14%, transparent) !important;
    border-color:color-mix(in srgb, var(--ktb-accent) 40%, var(--ktb-line)) !important; }
.sg-page [style*="background:#f5f5f5"], .sg-page [style*="background-color:#f5f5f5"] {
    background:var(--ktb-canvas) !important; }
/* Anything that came dressed in a strong color keeps it, and keeps its white text. */
.sg-page [style*="linear-gradient(135deg,#2e7d32"], .sg-page [style*="linear-gradient(135deg,#2e7d32"] * {
    color:#fff !important; }

/* Round day uses anchors as well as buttons for the actions that leave the page, and the skin
   would otherwise paint them in the accent — the same collision the front door had. */
.kt-dark a.rd-btn, .kt-club a.rd-btn { color:var(--ktb-accent-ink); text-decoration:none;
    display:inline-flex; align-items:center; justify-content:center; }
.kt-dark a.rd-btn.ghost, .kt-club a.rd-btn.ghost { color:var(--ktb-ink); }

/* The bottom bar on every page that is not the dashboard.

   Its colors are written out rather than taken from the --ktb-* tokens, because those only
   exist inside a .kt-dark or .kt-club wrapper and this bar has to work on pages that have not
   been converted yet — which is most of them. It is fixed rather than absolute for the same
   reason: there is no .ktapp frame around it to be absolute within. */
/* The plain header sticks.
   ==========================================================================================
   It carries the light/dark switch and, on a page with no bottom bar, the only way back to the
   round. On the scoring screen the page is nearly twice the height of the window, so both of
   them scrolled off the top and a man was stuck on it. A header you cannot reach is not a
   header. */
.ktapp-hdr-static { position:sticky; top:0; z-index:800;
                    background:var(--ktb-canvas); }

.ktapp-bar-static { position:fixed; left:0; right:0; bottom:0; z-index:900;
    height:calc(62px + var(--ktb-safe));
    padding-bottom:var(--ktb-safe);
    display:flex; background:var(--ktb-canvas,#0b0e13); border-top:1px solid var(--ktb-line,#232c38);
    box-shadow:0 -6px 20px rgba(0,0,0,.35); }
.ktapp-bar-static a { flex:1; display:flex; flex-direction:column; align-items:center;
                      justify-content:center; gap:3px; font-size:10.5px; font-weight:700;
                      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                      text-decoration:none; padding-top:6px; color:var(--ktb-ink3,#7d8fa0); }
.kt-dark .ktapp-bar-static a, .kt-club .ktapp-bar-static a,
a.ktapp-bar-static, .ktapp-bar-static a:hover, .ktapp-bar-static a:focus { color:var(--ktb-ink3,#7d8fa0); }
.ktapp-bar-static a .ic { font-size:19px; line-height:1; }
/* Room for it, or the last row of a table sits under it. */
body:has(.ktapp-bar-static) .container.body-content { padding-bottom:110px !important; }
body:has(.ktapp-bar-static) .ktback { bottom:calc(var(--ktb-safe) + 76px); }
@media print { .ktapp-bar-static { display:none; } }
/* The page inside the shell no longer paints its own ground — the shell does. */
.ktapp .sg-page { min-height:0; background:transparent; padding-top:4px !important; }
/* The card carried its own "Start Game" banner. The shell header two lines above now says the
   same thing in the app's own voice, so the banner is one heading too many. */
.ktapp .sg-page [style*="linear-gradient(135deg,#2c5f8a"] { display:none !important; }
.ktapp .sg-page > div { border:1px solid var(--ktb-line) !important; }

/* The wait. */
.kt-spin { width:38px; height:38px; margin:0 auto 14px; border-radius:50%;
           border:3px solid var(--ktb-line,#232c38); border-top-color:var(--ktb-accent,#5fd68a);
           animation:ktspin .9s linear infinite; }
@keyframes ktspin { to { transform:rotate(360deg); } }

/* The legacy pages carry the skin on their content wrapper now, which means it also sets a
   min-height of 100vh — right for a page, wrong for a wrapper that already sits inside one, so
   it is released here. The ground itself comes from body:has(.kt-dark). */
.container.body-content.kt-dark { min-height:0; background:transparent; }

/* --- the scorecards page ------------------------------------------------------------------
   Same treatment as Start a round: it is inside the shell now, so what is left is the paper it
   was drawn on. The blue banner over each player, the white money tracker, the pale stat
   panels. Off the bridge first, then each colour remapped. */
.sc-page .player-card-view, .sc-page .player-card-view * { color:var(--ktb-ink) !important; }
.sc-page [style*="background:linear-gradient(135deg,#2c5f8a"] {
    background:var(--ktb-canvas) !important; color:var(--ktb-ink) !important;
    border-bottom:1px solid var(--ktb-line) !important; }
/* The money tracker: its own green header stays, because that green means money here. */
.sc-page [style*="background:linear-gradient(135deg,#3a5a3a"] { color:#fff !important; }
.sc-page [style*="background-color:white"], .sc-page [style*="background:white"],
.sc-page [style*="background:#fff"], .sc-page [style*="background:#f0f8ff"],
.sc-page [style*="background:#e8eef4"], .sc-page [style*="background:#f5f5f5"] {
    background:var(--ktb-surface) !important; }
.sc-page [style*="background-color:Silver"], .sc-page [style*="background-color:silver"] {
    background:var(--ktb-canvas) !important; color:var(--ktb-ink3) !important; }
.sc-page [style^="color:#666"],
.sc-page [style*=";color:#666"],
.sc-page [style*="; color:#666"],
.sc-page [style^="color:#888"],
.sc-page [style*=";color:#888"],
.sc-page [style*="; color:#888"],
.sc-page [style^="color:#999"],
.sc-page [style*=";color:#999"],
.sc-page [style*="; color:#999"],
.sc-page [style^="color:#555"] { color:var(--ktb-ink3) !important; },
.sc-page [style*=";color:#555"] { color:var(--ktb-ink3) !important; },
.sc-page [style*="; color:#555"] { color:var(--ktb-ink3) !important; }
.sc-page [style^="color:green"] { color:var(--ktb-accent) !important; },
.sc-page [style*=";color:green"] { color:var(--ktb-accent) !important; },
.sc-page [style*="; color:green"] { color:var(--ktb-accent) !important; }
.sc-page [style^="color:red"] { color:var(--ktb-dn) !important; },
.sc-page [style*=";color:red"] { color:var(--ktb-dn) !important; },
.sc-page [style*="; color:red"] { color:var(--ktb-dn) !important; }
.sc-page [style*="border:1px solid #bbb"], .sc-page table, .sc-page td, .sc-page th {
    border-color:var(--ktb-line) !important; }
.sc-page select, .sc-page input { background:var(--ktb-canvas) !important;
    color:var(--ktb-ink) !important; border-color:var(--ktb-line) !important; }

/* The header on a page that has not been rebuilt into its own shell. It scrolls with the page
   and it sticks, because on a long page it is the only thing on screen that says which page you
   are on. Settlement's detail runs to hundreds of rows, and scrolling into the middle of it left
   nothing at the top at all. The bottom bar still does the navigating. */
.ktapp-hdr-static { position:sticky; top:0; z-index:850; padding:14px 16px 12px;
                    background:var(--ktb-canvas); border-bottom:1px solid var(--ktb-line); }
.ktapp-hdr-static h1 { font-size:21px; font-weight:800; letter-spacing:-.4px; margin:0;
                       color:var(--ktb-ink); }
/* Bootstrap left room at the top for a fixed navbar that is no longer rendered. */
body:has(.ktapp-hdr-static) { padding-top:0 !important; }
body:has(.ktapp-hdr-static) .container.body-content { padding-top:14px !important; }

/* The offer at the top of every screen, and the handle for pushing it away. */
/* The second and third things on offer. A slab each was how "start a pickup round" ended up
   with the front door on a morning somebody wanted to sign up for Thursday; these are lines. */
.ktfront-sub { display:block; padding:7px 2px 0; font-size:12.5px; font-weight:700;
               color:var(--ktb-ink3); text-decoration:none; }
.kt-dark a.ktfront-sub, .kt-club a.ktfront-sub,
.kt-dark a.ktfront-sub:hover, .kt-club a.ktfront-sub:hover,
.kt-dark a.ktfront-sub:focus, .kt-club a.ktfront-sub:focus {
    color:var(--ktb-ink3); text-decoration:underline; }
.ktfront-wrap:has(.ktfront-sub) { padding-bottom:8px; }

/* "You're in" on a scheduled round. Colour is state here, not decoration: accent means you are
   down for it, muted-red means the round is full and you are not. */
.kt-inpill { flex:none; font-size:11px; font-weight:800; letter-spacing:.03em; padding:3px 8px;
             border-radius:999px; white-space:nowrap;
             background:color-mix(in srgb, var(--ktb-accent) 18%, transparent);
             color:var(--ktb-accent);
             border:1px solid color-mix(in srgb, var(--ktb-accent) 40%, transparent); }
/* ---------------------------------------------------------------------------------------
   The registration strip. One row, every page, every screen.

   Colour is state, as everywhere else: accent when you are in, a warmer tone when the board is
   asking, muted red when the round is full. It is a strip and not a card on purpose - it rides
   above real content on every screen in the app and has to cost about one line to do it. */
.ktreg-host { display:block; }
.ktreg-host.pending { display:none; }
.ktreg { display:flex; align-items:stretch; gap:0; margin:0 0 10px; border-radius:11px;
         overflow:hidden; border:1px solid var(--ktb-line); background:var(--ktb-surface); }
.ktreg-go { flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:9px 4px 9px 11px;
            text-decoration:none; color:var(--ktb-ink); }
.ktreg-go:hover, .ktreg-go:focus { text-decoration:none; color:var(--ktb-ink); }
.kt-dark a.ktreg-go, .kt-club a.ktreg-go,
.kt-dark a.ktreg-go:hover, .kt-club a.ktreg-go:hover,
.kt-dark a.ktreg-go:focus, .kt-club a.ktreg-go:focus { color:var(--ktb-ink); text-decoration:none; }
.ktreg-mark { flex:none; width:22px; height:22px; border-radius:999px; display:flex;
              align-items:center; justify-content:center; font-size:13px; font-weight:900;
              line-height:1; color:#fff; }
.ktreg-t { flex:1; min-width:0; }
.ktreg-hd { display:block; font-size:13.5px; font-weight:800; line-height:1.25; }
.ktreg-sub { display:block; font-size:11.5px; font-weight:600; color:var(--ktb-ink3);
             margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ktreg-chev { flex:none; color:var(--ktb-ink3); font-size:17px; padding-right:4px; }
.ktreg-x { flex:none; width:34px; border:none; background:none; cursor:pointer;
           color:var(--ktb-ink3); font-size:19px; line-height:1; padding:0;
           border-left:1px solid var(--ktb-line); }

/* The rest of the board, folded away under the strip.

   The old interface had "show 2 more rounds" and it was not decoration: a man registers for
   Saturday on a Wednesday, and the round he wants is rarely the next one. */
/* A pill, centred under the strip, rather than a slab welded to its underside. The strip is a
   card and keeps its own four corners; this is a control, and controls in this app are pills. */
/* A pill under the strip, centred, saying what it opens.

   I folded this into the strip as a bare "+1" to save the row it sits on. The row was not the
   thing worth saving - the point of it is that a man can find Sunday, and "+1" is not something
   anybody reads as "there is another round". Compact, but it uses its words. */
.ktreg:has(+ .ktreg-more) { margin-bottom:7px; }
.ktreg-more { display:block; margin:0 auto 10px; padding:6px 14px;
              border:1px solid var(--ktb-line); border-radius:999px;
              background:var(--ktb-surface2); color:var(--ktb-ink2);
              font-size:12px; font-weight:800; letter-spacing:.02em;
              cursor:pointer; font-family:inherit; white-space:nowrap; }
.ktreg-more:hover, .ktreg-more:focus { color:var(--ktb-ink); border-color:var(--ktb-ink3); }
/* The board itself comes up from the bottom rather than opening in place. The strip is on
   every page: pushing Handicaps or Settlement down by however many rounds are scheduled is
   exactly the room it promised not to take. Same shape as the tee picker, so there is one
   idiom for "the screen is asking you something". */
.ktreg-rest { position:fixed; inset:0; z-index:9600; background:rgba(0,0,0,.55);
              display:flex; align-items:flex-end; justify-content:center;
              padding:max(14px, env(safe-area-inset-top)) 14px 14px; }
/* inset:0 on a phone is the LARGE viewport - the one that includes the browser toolbar that
   slides back in as you scroll. The foot of a bottom sheet, and with it the way out, ends up
   behind that toolbar: pressed, and nothing happens, which is what being stuck feels like.
   dvh is the viewport actually on the screen. */
@supports (height: 100dvh) { .ktreg-rest { height:100dvh; bottom:auto; } }
.ktreg-sheet { width:100%; max-width:460px; background:var(--ktb-surface);
               border:1px solid var(--ktb-line); border-radius:16px; overflow:hidden;
               margin-bottom:calc(var(--ktb-safe, 14px) + 4px);
               box-shadow:0 -6px 34px rgba(0,0,0,.45);
               display:flex; flex-direction:column; max-height:100%; }
.ktreg-sheet-hd { flex:none; padding:11px 10px 11px 16px; font-size:16px; font-weight:800;
                  color:var(--ktb-ink); border-bottom:1px solid var(--ktb-line);
                  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ktreg-sheet-x2 { flex:none; width:34px; height:34px; border-radius:10px; border:none;
                  background:var(--ktb-surface2); color:var(--ktb-ink2); font-size:20px;
                  line-height:1; cursor:pointer; }
/* The list shrinks first, so the header and the foot are always both on the screen. */
.ktreg-sheet-body { flex:1 1 auto; min-height:0; overflow-y:auto;
                    -webkit-overflow-scrolling:touch; }
.ktreg-sheet-x { flex:none; width:100%; padding:14px 14px calc(14px + var(--ktb-safe, 0px));
                 border:none; border-top:1px solid var(--ktb-line);
                 background:var(--ktb-surface); color:var(--ktb-ink3); font-size:13.5px;
                 font-weight:700; cursor:pointer; }
.ktreg-row { display:flex; align-items:center; gap:9px; padding:13px 14px;
             border-top:1px solid var(--ktb-line); text-decoration:none;
             color:var(--ktb-ink); }
.ktreg-row:first-child { border-top:none; }
.kt-dark a.ktreg-row, .kt-club a.ktreg-row,
.kt-dark a.ktreg-row:hover, .kt-club a.ktreg-row:hover,
.kt-dark a.ktreg-row:focus, .kt-club a.ktreg-row:focus { color:var(--ktb-ink);
                                                         text-decoration:none; }

.ktreg.in   { border-color:color-mix(in srgb, var(--ktb-accent) 40%, transparent);
              background:color-mix(in srgb, var(--ktb-accent) 10%, var(--ktb-surface)); }
.ktreg.in   .ktreg-mark { background:var(--ktb-accent); }
.ktreg.out  { border-color:color-mix(in srgb, var(--ktb-accent) 55%, transparent);
              background:color-mix(in srgb, var(--ktb-accent) 16%, var(--ktb-surface)); }
.ktreg.out  .ktreg-mark { background:var(--ktb-accent); }
.ktreg.out  .ktreg-hd { color:var(--ktb-accent); }
.ktreg.full { border-color:color-mix(in srgb, var(--ktb-dn) 38%, transparent);
              background:color-mix(in srgb, var(--ktb-dn) 10%, var(--ktb-surface)); }
.ktreg.full .ktreg-mark { background:var(--ktb-dn); }

/* A Klown Cup round.

   It is a different thing to sign up for - it counts for the Cup - and nothing on any screen
   said so, so a man reading "Saturday, 9:15, DiamondHead" had no way to know from the app that
   it mattered more than a Tuesday. The flag has been in the database the whole time.

   Gold, and used for nothing else, so the eye learns it in one round. */
.kt-cup { display:inline-flex; align-items:center; gap:4px; flex:none;
          font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
          padding:2px 7px; border-radius:999px; white-space:nowrap;
          color:#8a6300; background:#f6d97a; border:1px solid #d8b34a; }
.kt-dark .kt-cup { color:#1c1403; background:#e8c65f; border-color:#c9a63f; }
/* On a line of its own above the date, where it reads as a heading rather than an afterthought
   tacked onto the end of a course name. */
.kt-cup-line { display:block; margin-bottom:3px; }

/* Not registered, and not being asked about it. Every round past the next one is news rather
   than a question, so it gets the quiet treatment - the loud version lives on the strip and
   belongs to the one round that is imminent. */
.kt-inpill.out { background:transparent; color:var(--ktb-ink3);
                 border-color:var(--ktb-line); font-weight:700; }
.kt-inpill.full { background:color-mix(in srgb, var(--ktb-dn) 14%, transparent);
                  color:var(--ktb-dn);
                  border-color:color-mix(in srgb, var(--ktb-dn) 38%, transparent); }

.ktfront-wrap { position:relative; touch-action:pan-y; }
.ktfront-wrap .ktfront { margin:0 0 10px; padding-right:52px; }
/* The dismiss button.

   It was 30x30 with margin-top:-5px — under the 44px a fingertip needs, and shifted five pixels
   off the centre it appeared to sit on, so a tap aimed at the bottom half of it landed on the
   link underneath and opened Side games instead of closing the card. Full-size target, no
   offset, and it sits above the link rather than beside it. */
.ktfront-x { position:absolute; top:50%; right:4px; transform:translateY(-50%);
             z-index:2; width:44px; height:44px; border:none; border-radius:50%;
             display:flex; align-items:center; justify-content:center;
             background:rgba(0,0,0,.16); color:var(--ktb-accent-ink); font-size:20px;
             line-height:1; cursor:pointer; font-family:inherit; opacity:.75; }
.ktfront-x:active { opacity:1; background:rgba(0,0,0,.28); }

/* Which tee the stroke indexes are read off. A row of its own above the table it governs. */
.tee-switch { display:flex; gap:6px; flex-wrap:wrap; align-items:center;
              margin:2px 0 9px; }
.tee-switch button { flex:0 0 auto; }

/* --- getting out of a popup -----------------------------------------------------------------
   The close control on the player card was a bare 22px times-sign floated into the top-right
   corner: no surface, no border, and a tap target smaller than a fingertip, sitting at the end
   of the screen furthest from the thumb holding the phone. Two ways out instead, both of them
   things you can see. The pill rides along at the top as the card scrolls; the bar sits under
   the content, where a hand already is.

   Coloured, not black. A surface-on-surface button reads as part of the card rather than as the
   way out of it, and the whole complaint was that you could not find it. Red, because the accent
   green already means "won" everywhere else in here and a close button should not look like a
   result. --ktb-dn is the token that already carries "down" in both skins.
   -------------------------------------------------------------------------------------- */
.ktm-x { position:sticky; top:0; float:right; z-index:5; width:38px; height:38px;
         margin:-4px -4px 0 8px; border-radius:50%; font-size:23px; line-height:1; cursor:pointer;
         display:flex; align-items:center; justify-content:center; font-weight:700;
         background:var(--ktb-dn, #b3261e); color:#fff;
         border:1px solid var(--ktb-dn, #b3261e); box-shadow:0 1px 5px rgba(0,0,0,.3); }
.ktm-x:hover, .ktm-x:focus { filter:brightness(1.12); }

.ktm-close { display:block; width:100%; margin:14px 0 0; padding:13px; border-radius:10px;
             font-size:16px; font-weight:700; cursor:pointer;
             background:color-mix(in srgb, var(--ktb-dn, #b3261e) 14%, transparent);
             color:var(--ktb-dn, #b3261e);
             border:2px solid var(--ktb-dn, #b3261e); }
.ktm-close:hover, .ktm-close:focus {
             background:color-mix(in srgb, var(--ktb-dn, #b3261e) 24%, transparent); }

/* The way into Round day, from the top of My Round. Accent-edged rather than accent-filled:
   it is a door an admin uses every round day, not an alarm. */
.kt-rdcard { display:flex; align-items:center; gap:11px; margin:0 0 12px; padding:12px 14px;
             border-radius:14px; text-decoration:none;
             background:var(--ktb-surface); border:1px solid var(--ktb-accent); }
.kt-rdcard:hover, .kt-rdcard:focus { text-decoration:none; }
.kt-rdcard-l { flex:1; min-width:0; }
.kt-rdcard-l .k { display:block; font-size:15.5px; font-weight:800; color:var(--ktb-accent); }
.kt-rdcard-l .s { display:block; font-size:12px; font-weight:600; color:var(--ktb-ink3);
                  margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kt-rdcard-r { flex:0 0 auto; font-size:12px; font-weight:700; color:var(--ktb-ink2);
               white-space:nowrap; }
.kt-rdcard-go { flex:0 0 auto; font-size:20px; color:var(--ktb-ink3); }

/* --- the team card ---------------------------------------------------------------------
   One table per nine, holes then Won. It used to be four tables listing the same two teams,
   two of them carrying a single number each, drawn in Bootstrap's silver-on-white.
   ------------------------------------------------------------------------------------- */
.kt-teamtbl { width:100%; border-collapse:collapse; margin:0 0 6px;
              background:var(--ktb-surface); color:var(--ktb-ink);
              border:1px solid var(--ktb-line); border-radius:10px; overflow:hidden;
              font-size:13px; }
.kt-teamtbl th { background:var(--ktb-surface2); color:var(--ktb-ink2);
                 font-size:11px; font-weight:800; padding:6px 4px;
                 border-color:var(--ktb-line) !important; }
.kt-teamtbl td { padding:8px 4px; border-color:var(--ktb-line) !important; }
/* Two things are true about the winning row, and they were being said in the same colour.
   ==========================================================================================
   A green wash marked the team that won the nine, and a green cell marked a hole they won -
   so on the winner's row the cells they had actually won disappeared into their own row. On
   the losing row the same cells read perfectly, which is how you know the wash was the fault.

   Green now means one thing only: THIS TEAM WON THIS HOLE. Winning the nine is said by the
   trophy that was always there, a bar down the left, and the weight of the type - none of
   which competes with a cell. */
.kt-teamtbl tr.kt-teamwin { font-weight:800; }
.kt-teamtbl tr.kt-teamwin td:first-child {
    box-shadow: inset 3px 0 0 var(--ktb-up);
}
.kt-teamtbl tr.kt-teamwin td { color:var(--ktb-ink); }
.kt-teamname { text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* Nothing has happened yet, said once. */
.kt-nothing { padding:14px 4px; font-size:13px; font-weight:600; color:var(--ktb-ink3); }

/* The + Score button floats over the page, so the page has to end above it rather than
   underneath it -- it was sitting on top of a table row. */
.ktapp-scroll { scroll-padding-bottom:96px; }
.ktapp-scroll > *:last-child { margin-bottom:78px; }

/* While a card is open on top of the page, the page's floating button stands down. It was
   covering the Money Tracker's bottom line on the player card, and there is nothing it could
   usefully do from inside somebody else's scorecard anyway. */
body.kt-modal-open .ktapp-fab { display: none !important; }

/* --- the card laid over the page ------------------------------------------------------
   The Close button at the foot of the player card kept ending up behind the bottom bar. It was
   being solved by arithmetic — panel height = viewport minus a margin minus the bar minus the
   safe area — and arithmetic against a viewport is a guess on a phone, where the browser's own
   chrome comes and goes as you scroll.

   So the box model does it instead. The backdrop IS the viewport, padded at the bottom by
   exactly the bar it must not go behind, and the card can be at most the full height of what is
   left. There is no sum to get wrong.

   The inline display:none still hides it — an inline style beats this one — so display:flex
   here only applies once script clears that.
   ------------------------------------------------------------------------------------- */
#scorecardModal {
    display: flex; align-items: flex-start; justify-content: center;
    padding: calc(var(--ktb-safe-top, 12px) + 10px) 10px
             calc(var(--ktb-bar-h, 62px) + var(--ktb-safe, 14px) + 14px);
    box-sizing: border-box; overflow: hidden;
}
/* The card is a column: a close button, the card itself, and a Close bar at the foot. Only the
   MIDDLE one scrolls.

   Close used to be the last thing inside the scrolling area, which meant you could only see it
   if the height arithmetic came out exactly right — and every time it did not, the button was
   off the bottom of the screen. As a row of the panel it cannot be: the panel is capped at the
   height available, and a row of a flex column is always inside its parent. */
#scorecardModal > .ktm-panel {
    margin: 0 !important;
    max-height: 100% !important;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;              /* the panel does not scroll; its middle does */
}
#scorecardModal > .ktm-panel > .ktm-x {
    position: static; float: none; align-self: flex-end;
    flex: 0 0 auto; margin: -4px -4px 4px 0;
}
#scorecardModal > .ktm-panel > #scorecardModalContent {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    min-height: 0;                 /* without this a flex child refuses to shrink and overflows */
}
#scorecardModal > .ktm-panel > .ktm-close { flex: 0 0 auto; margin-top: 12px; }

/* The standing week, on Schedule a round. */
.rd-week { background:var(--ktb-surface); border:1px solid var(--ktb-line); border-radius:14px;
           padding:14px 15px; margin:0 0 16px; }
.rd-week-hd { font-size:16px; font-weight:800; color:var(--ktb-ink); }
.rd-week-sub { font-size:12.5px; color:var(--ktb-ink3); margin:3px 0 11px; }
.rd-week-form { display:flex; flex-wrap:wrap; gap:9px; align-items:flex-end; }
.rd-week-form label { display:flex; flex-direction:column; gap:3px; font-size:11px;
                      font-weight:800; letter-spacing:.08em; text-transform:uppercase;
                      color:var(--ktb-ink3); margin:0; }
.rd-week-form input[type="time"] { padding:9px 10px; border-radius:9px; font-size:15px;
                                   background:var(--ktb-surface2); color:var(--ktb-ink);
                                   border:1px solid var(--ktb-line); }
.rd-week-go { flex:1 1 100%; margin-top:4px; padding:12px; border:none; border-radius:11px;
              font-size:15px; font-weight:800; cursor:pointer;
              background:var(--ktb-accent); color:var(--ktb-accent-ink); }

/* --- The Chase: the year-end Klown Cup board ---------------------------------------------
   A race above a table. The table is the record; the strip is the answer to "am I catching
   him", which is the question being asked while the round is still going on.
   ------------------------------------------------------------------------------------- */
.kc-chase { background:var(--ktb-surface); border:1px solid var(--ktb-line);
            border-radius:16px; padding:15px 16px; margin:0 0 20px; }
.kc-chase-hd { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.kc-chase-t { font-size:21px; font-weight:900; letter-spacing:-.4px; color:var(--ktb-ink); }
.kc-chase-s { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
              color:var(--ktb-accent); }
.kc-chase-rule { font-size:12.5px; color:var(--ktb-ink3); margin:5px 0 12px; }
.kc-chase-note { font-size:13px; color:var(--ktb-ink2); background:var(--ktb-surface2);
                 border:1px solid var(--ktb-line); border-radius:10px;
                 padding:9px 11px; margin-bottom:12px; }

/* The race. */
.kc-track { margin:0 0 14px; }
.kc-lane { display:grid; grid-template-columns:88px 1fr; gap:9px; align-items:center;
           margin-bottom:7px; }
.kc-lane-n { font-size:12.5px; font-weight:700; color:var(--ktb-ink2);
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kc-lane-t { position:relative; height:22px; border-radius:999px;
             background:linear-gradient(to right,
                 color-mix(in srgb, var(--ktb-accent) 22%, transparent), transparent); }
/* Where he started the day, so you can see who has spent their head start. */
.kc-ghost { position:absolute; top:4px; width:2px; height:14px; border-radius:1px;
            background:var(--ktb-ink3); opacity:.5; }
.kc-dot { position:absolute; top:0; transform:translateX(-50%);
          min-width:30px; height:22px; padding:0 6px; border-radius:999px;
          display:flex; align-items:center; justify-content:center;
          font-size:11.5px; font-weight:800;
          background:var(--ktb-surface2); color:var(--ktb-ink);
          border:1px solid var(--ktb-line); }
.kc-dot.lead { background:var(--ktb-accent); color:var(--ktb-accent-ink);
               border-color:var(--ktb-accent); }
.kc-track-ends { display:flex; justify-content:space-between; font-size:10.5px;
                 font-weight:800; letter-spacing:.08em; text-transform:uppercase;
                 color:var(--ktb-ink3); margin-top:2px; }

/* The record. */
.tblwrap-x { overflow-x:auto; }
.kc-chase-tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.kc-chase-tbl th { text-align:right; font-size:10.5px; font-weight:800; letter-spacing:.07em;
                   text-transform:uppercase; color:var(--ktb-ink3);
                   padding:6px 7px; border-bottom:1px solid var(--ktb-line); }
.kc-chase-tbl th:nth-child(2) { text-align:left; }
.kc-chase-tbl td { padding:9px 7px; border-bottom:1px solid var(--ktb-line);
                   color:var(--ktb-ink); }
.kc-chase-tbl tr:last-child td { border-bottom:none; }
.kc-chase-tbl tr.kc-chase-lead td { background:color-mix(in srgb, var(--ktb-accent) 13%, transparent); }
.kc-chase-pos { width:26px; font-weight:900; color:var(--ktb-ink3); }
.kc-chase-nm { min-width:130px; font-weight:700; }
.kc-chase-was { display:block; font-size:11px; font-weight:600; color:var(--ktb-ink3); }
.kc-num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kc-total { font-weight:900; }
.kc-money { color:var(--ktb-ink2); }
.kc-out { color:var(--ktb-ink3); }
.kc-chase-foot { font-size:11.5px; color:var(--ktb-ink3); margin-top:11px; }

/* While the shell is still assembling. Set by script and only ever removed — see the note in
   Index.cshtml. visibility rather than display so the page keeps its height and does not jump
   when it appears, and the header stays put throughout so the app never looks absent. */
.kt-booting .ktapp-scroll { visibility: hidden; }

/* --- paper declared in a page's own <style> block --------------------------------------
   The remap above matches inline style attributes. Money Leaders, History and Handicaps do
   not use them: they declare .filter-label, .hcp-sechead and the rest in a <style> block at
   the top of the page, so every one of those rules went straight past it and those screens
   stayed white. Generated by reading what each page declares and darkening only what is
   paper — a light background, or text dark enough to have been written for one. Anything
   coloured on purpose is left alone, same rule as before.

   Generated, so regenerate rather than hand-edit: scratchpad/mk_classcolors.py.
   ------------------------------------------------------------------------------------- */
.kt-dark .settlement-table tr:nth-child(even) { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .settlement-table tr:hover { background-color:color-mix(in srgb, #e8f5e9 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .section-header { color:#7be080 !important; }
.kt-dark .progress-bar-container { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .summary-card { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .summary-card .label { color:var(--ktb-muted) !important; }
.kt-dark .alert-banner { background-color:color-mix(in srgb, #d4edda 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#7be092 !important; }
.kt-dark .collapsible-header { color:var(--ktb-ink) !important; }
.kt-dark .collapsible-header:hover { color:var(--ktb-ink) !important; }
.kt-dark .amount-owes { color:#e47777 !important; }
.kt-dark .amount-owed { color:#7be080 !important; }
.kt-dark .fs-card { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-mode-tabs { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-mode-tabs button { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:#7bb2e0 !important; }
.kt-dark .fs-team-bar { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-team-bar-view { color:var(--ktb-ink) !important; }
.kt-dark .fs-team-bar-view b { color:#7bb2e0 !important; }
.kt-dark .fs-hint { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .fs-hint b { color:var(--ktb-ink) !important; }
.kt-dark .fs-section-head { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:#7bb2e0 !important; }
.kt-dark .fs-section-head.fs-unassigned { background-color:color-mix(in srgb, #fff4e0 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#ffb85c !important; }
.kt-dark .fs-count-badge { color:#7bb2e0 !important; }
.kt-dark .fs-section-head.fs-unassigned .fs-count-badge { color:#ffb85c !important; }
.kt-dark .fs-row:nth-child(even) { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-player { color:var(--ktb-ink) !important; }
.kt-dark .fs-hcp { color:var(--ktb-muted) !important; }
.kt-dark .fs-chcp { color:#e47777 !important; }
.kt-dark .fs-pill { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .fs-pill:hover { color:var(--ktb-ink) !important; }
.kt-dark .fs-tee-chip { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-tee-chip:hover { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-team-cb { color:var(--ktb-ink) !important; }
.kt-dark .fs-klown-cb { background-color:color-mix(in srgb, #eaf5ea 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#7be080 !important; }
.kt-dark .fs-klown-cb.out { background-color:color-mix(in srgb, #f3e9f7 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#c57be0 !important; }
.kt-dark .fs-kc-cb { color:#c476e5 !important; }
.kt-dark .fs-kc-badge { background-color:color-mix(in srgb, #f3e5f5 60%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#bb74e7 !important; }
.kt-dark .fs-tee-picker { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-tee-picker button { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .fs-tee-picker button.selected { background-color:color-mix(in srgb, #e3eefc 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#7bb2e0 !important; }
.kt-dark .fs-search-wrap { background-color:color-mix(in srgb, #fff4e0 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-search-wrap input { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-empty { color:var(--ktb-muted) !important; }
.kt-dark .fs-readonly .fs-stats { color:var(--ktb-ink) !important; }
.kt-dark .fs-readonly .fs-place { background-color:color-mix(in srgb, #e3eefc 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#7bb2e0 !important; }
.kt-dark .fs-readonly .fs-used { color:#7be080 !important; }
.kt-dark .fs-readonly .fs-stats-header .fs-used-hdr { color:#7be080 !important; }
.kt-dark .fs-readonly .fs-stats-header { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-muted) !important; }
.kt-dark .fs-prepay-bar { background-color:color-mix(in srgb, #fff8e1 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-prepay-toggle strong { color:#ffbd5c !important; }
.kt-dark .fs-prepay-team-portion { color:var(--ktb-ink) !important; }
.kt-dark .fs-buyin-panel { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-buyin-header { background-color:color-mix(in srgb, #fff4e0 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-buyin-header > span:first-child { color:#ffb85c !important; }
.kt-dark .fs-buyin-totals { color:var(--ktb-ink) !important; }
.kt-dark .fs-buyin-totals b { color:#7be080 !important; }
.kt-dark .fs-buyin-row:nth-child(even) { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-buyin-name { color:var(--ktb-ink) !important; }
.kt-dark .fs-buyin-amount { color:#7bb2e0 !important; }
.kt-dark .fs-buyin-status.pending { background-color:color-mix(in srgb, #fff3e0 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#ffa65c !important; }
.kt-dark .fs-buyin-status.paid { background-color:color-mix(in srgb, #e8f5e9 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#7be080 !important; }
.kt-dark .fs-buyin-status.cash { background-color:color-mix(in srgb, #e3f2fd 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#6ca9ef !important; }
.kt-dark .fs-buyin-status.warn { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-muted) !important; }
.kt-dark .fs-buyin-actions button { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .fs-buyin-actions button:hover { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-buyin-actions button.primary { color:#7be080 !important; }
.kt-dark .fs-buyin-actions button.primary:hover { background-color:color-mix(in srgb, #e8f5e9 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-buyin-actions button.cash { color:#6ca9ef !important; }
.kt-dark .fs-buyin-actions button.cash:hover { background-color:color-mix(in srgb, #e3f2fd 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .fs-buyin-actions button.undo { color:var(--ktb-muted) !important; }
.kt-dark .fs-buyin-actions button.undo:hover { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .ff-header .ff-sub { color:var(--ktb-ink) !important; }
.kt-dark .ff-cross { color:#78e3a8 !important; }
.kt-dark .ff-section-title { color:var(--ktb-ink) !important; }
.kt-dark .ff-card { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .ff-card-label { color:var(--ktb-muted) !important; }
.kt-dark .ff-card-name { color:var(--ktb-ink) !important; }
.kt-dark .ff-card-value { color:var(--ktb-ink) !important; }
.kt-dark .ff-stat-box { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .ff-stat-label { color:var(--ktb-muted) !important; }
.kt-dark .ff-stat-birdie { color:#7bb1e0 !important; }
.kt-dark .ff-stat-par { color:#7be07b !important; }
.kt-dark .ff-stat-double { color:#e27c79 !important; }
.kt-dark .ff-stat-triple { color:#ff5c5c !important; }
.kt-dark .ff-stat-avg { color:var(--ktb-ink) !important; }
.kt-dark .ff-story-box { color:var(--ktb-ink) !important; }
.kt-dark .ff-list-item { color:var(--ktb-ink) !important; }
.kt-dark .ff-back { color:#7bb1e0 !important; }
.kt-dark .ff-author-tab { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .ff-author-tab:hover:not(.active) { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
/* ==========================================================================================
   THE PERIOD FILTERS
   Money Leaders and the ace-pot page both have them, and each carried its own copy of these
   rules inside the page. The copies drifted: one was converted to pills and the other carried
   on as a joined box with a hard border, cut off at the edge of a phone, because it never saw
   the change. Defined once, here.
   ========================================================================================== */
.filter-radio { display: none; }
.filter-group { display: flex; flex-wrap: wrap; gap: 6px; border: none; }
.filter-group .filter-label {
    display: inline-block;
    padding: 8px 14px;
    margin: 0;
    border: 1px solid var(--ktb-line);
    border-radius: 999px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 800;
    background: var(--ktb-surface);
    color: var(--ktb-ink2);
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
}
.filter-group .filter-label:hover { border-color: var(--ktb-accent); }
.filter-radio:checked + .filter-label {
    background: var(--ktb-accent);
    color: var(--ktb-accent-ink);
    border-color: var(--ktb-accent);
}

/* The filters were drawn for a white page, so they are forced to the dark surface here.
   NOT the selected one: this !important beat the :checked rule's background and left the lit
   pill with accent-coloured ink on the ordinary surface - measured at 1.08:1, which is
   invisible. Exactly the same fault as the scorecard pills. The chosen period opts out. */
.kt-dark .filter-group .filter-radio:not(:checked) + .filter-label { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .filter-group .filter-radio:not(:checked) + .filter-label:hover { background-color:var(--ktb-surface) !important; border-color:var(--ktb-accent) !important; }
.kt-dark .filter-group .filter-radio:checked + .filter-label { background-color:var(--ktb-accent) !important; border-color:var(--ktb-accent) !important; color:var(--ktb-accent-ink) !important; }
.kt-dark .filter-section-label { color:var(--ktb-muted) !important; }
.kt-dark #yearSelect { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .dash-stand.me-up { color:#7be091 !important; }
.kt-dark .dash-stand.me-dn { color:#e47777 !important; }
.kt-dark .dash-stand.lvl { color:#7ba6e0 !important; }
.kt-dark .kc-settle-table th { color:var(--ktb-ink) !important; }
.kt-dark .kc-table { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .kc-table th { color:var(--ktb-ink) !important; }
.kt-dark .kc-payout-2 { color:var(--ktb-muted) !important; }
.kt-dark .kc-payout-3 { color:#e0ad7b !important; }
.kt-dark .la-card { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .la-card .l { color:var(--ktb-ink) !important; }
.kt-dark .la-card.green .n { color:#7be080 !important; }
.kt-dark .la-card.blue .n { color:#6ca9ef !important; }
.kt-dark .la-card.amber .n { color:#ffa65c !important; }
.kt-dark .la-card.red .n { color:#e47777 !important; }
.kt-dark .la-h { color:var(--ktb-ink) !important; }
.kt-dark .la-tbl { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .la-tbl tr:nth-child(even) td { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .la-ua { color:var(--ktb-muted) !important; }
.kt-dark .la-day-btn { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:#7be080 !important; }
.kt-dark .la-day-btn:hover { background-color:color-mix(in srgb, #e8f5e9 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .muted { color:var(--ktb-muted) !important; }
.kt-dark .ms-dot-yellow { color:var(--ktb-ink) !important; }
.kt-dark .hcp-card { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .hcp-compare .hcp-sechead { background-color:color-mix(in srgb, #e8f3ff 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .hcp-rounds .hcp-sechead { background-color:color-mix(in srgb, #fbf1de 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .hcp-wrap select { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .hcp-me { background-color:color-mix(in srgb, #e7f3ff 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#66b2f5 !important; }
.kt-dark .hcp-top .hcp-sechead { background-color:color-mix(in srgb, #e7f6ea 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .hcp-bignum { color:#76e576 !important; }
.kt-dark .hcp-bignum.plus { color:#66b2f5 !important; }
.kt-dark .hcp-biglabel { color:var(--ktb-muted) !important; }
.kt-dark .hcp-meta { color:var(--ktb-ink) !important; }
.kt-dark .hcp-meta b { color:var(--ktb-ink) !important; }
.kt-dark .hcp-hint { color:var(--ktb-muted) !important; }
.kt-dark .hcp-idxlink { color:#7be07b !important; }
.kt-dark .hcp-idxlink:hover { color:#76e476 !important; }
.kt-dark .hcp-idxbox label { color:var(--ktb-ink) !important; }
.kt-dark .hcp-idxcancel { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .hcp-idxmsg.ok { color:#7be07b !important; }
.kt-dark .hcp-idxmsg.err { color:#ff5c5c !important; }
.kt-dark .hcp-legend { color:var(--ktb-ink) !important; }
.kt-dark .hcp-swatch { background-color:color-mix(in srgb, #d6ecff 60%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .hcp-tbl thead th { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .hcp-tbl tbody tr.counts { background-color:color-mix(in srgb, #d6ecff 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .hcp-tbl tbody tr:not(.counts) { color:#7ba2e0 !important; }
.kt-dark .hcp-adj { color:#76e576 !important; }
.kt-dark .hcp-pickup { background-color:color-mix(in srgb, #f3e9f7 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#c27be0 !important; }
.kt-dark .hcp-chk { color:#66b2f5 !important; }
.kt-dark .hcp-foot { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .hcp-empty { color:var(--ktb-muted) !important; }
.kt-dark .hcp-cmptee { color:var(--ktb-muted) !important; }
.kt-dark .hcp-ch { color:var(--ktb-ink) !important; }
.kt-dark .hcp-ch.plus { color:#66b2f5 !important; }
.kt-dark .hcp-str { color:#66b2f5 !important; }
.kt-dark .hcp-str.low { color:#76e576 !important; }
.kt-dark .hcp-str.na { color:#ff5c5c !important; }
.kt-dark .hcp-rm { color:#e07b7b !important; }
.kt-dark .hcp-rm:hover { color:#e97171 !important; }
.kt-dark .hcp-cmphead { color:var(--ktb-muted) !important; }
.kt-dark .hcp-add { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:#76e576 !important; }
.kt-dark .hcp-add[disabled] { color:var(--ktb-muted) !important; }
.kt-dark .hcp-warn { background-color:color-mix(in srgb, #fff8e1 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#ffdd5c !important; }
.kt-dark .pr-tee-pill { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .pr-tee-pill.selected { background-color:color-mix(in srgb, #e3eefc 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#7bb2e0 !important; }
.kt-dark .ra-note { color:var(--ktb-ink) !important; }
.kt-dark .ra-tile { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .ra-tile .l { color:#7ba2e0 !important; }
.kt-dark .ra-tile.warn .n { color:#e47777 !important; }
.kt-dark .ra-tile.after .n { color:#ffbb5c !important; }
.kt-dark .ra-card { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .ra-row.after { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .ra-row.blocked { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .ra-row.severe { background-color:color-mix(in srgb, #fdf3f2 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .ra-when { color:#7ba2e0 !important; }
.kt-dark .ra-chg { color:var(--ktb-ink) !important; }
.kt-dark .ra-chg .old { color:#7ba2e0 !important; }
.kt-dark .ra-chg .arrow { color:#7be0e0 !important; }
.kt-dark .ra-meta { color:#7bb0e0 !important; }
.kt-dark .ra-flag.after { background-color:color-mix(in srgb, #fdf0d5 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#ffdd5c !important; }
.kt-dark .ra-flag.blocked { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:#7bbfe0 !important; }
.kt-dark .ra-empty { color:#7ba2e0 !important; }
.kt-dark .rule-card { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .rule-title { color:#7be082 !important; }
.kt-dark .rule-text { color:var(--ktb-ink) !important; }
.kt-dark .rule-text .quote { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:#7be07b !important; }
.kt-dark .payout-cell { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .payout-cell .field { color:#7b7be0 !important; }
.kt-dark .payout-cell .places { color:#7be082 !important; }
.kt-dark .payout-cell .split { color:var(--ktb-ink) !important; }
.kt-dark .tie-box { background-color:color-mix(in srgb, #fff8e1 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .tie-box .tie-head { color:#ffbb5c !important; }
.kt-dark .tie-box li { color:#e0c77b !important; }
.kt-dark .tie-box .note { color:#e0c77b !important; }
.kt-dark .rules-msg.ok { background-color:color-mix(in srgb, #e8f5e9 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#7be082 !important; }
.kt-dark .rules-msg.err { background-color:color-mix(in srgb, #fdecea 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#e97171 !important; }
.kt-dark .sr-name-chip { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sr-tee-pill { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .sr-tee-pill.selected { background-color:color-mix(in srgb, #e3eefc 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#7bb2e0 !important; }
.kt-dark .sr-prereg-remove { color:#e47777 !important; }
.kt-dark .sr-prereg-remove:hover { color:#e57676 !important; }
.kt-dark .sg-card { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-head { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-amt { color:var(--ktb-ink) !important; }
.kt-dark .sg-status { color:#97e07b !important; }
.kt-dark .me-up { color:#7be091 !important; }
.kt-dark .me-dn { color:#e47777 !important; }
.kt-dark .lvl { color:#7ba6e0 !important; }
.kt-dark .sg-row.me { background-color:color-mix(in srgb, #f2f8ff 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-you { background-color:color-mix(in srgb, #e7f3ff 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#66b2f5 !important; }
.kt-dark .sg-note { background-color:color-mix(in srgb, #fff8e1 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#ffdd5c !important; }
.kt-dark .sg-side { background-color:color-mix(in srgb, #e8eefc 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#7b9de0 !important; }
.kt-dark .sg-side.b { background-color:color-mix(in srgb, #fdeaea 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#e07b7b !important; }
.kt-dark .sg-det { color:#7ba2e0 !important; }
.kt-dark .sg-money.up { color:#76e576 !important; }
.kt-dark .sg-money.dn { color:#e47777 !important; }
.kt-dark .sg-btn { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .sg-btn.dim { color:#e07b7b !important; }
.kt-dark .sg-steplbl { color:var(--ktb-ink) !important; }
.kt-dark .sg-grouplbl { color:var(--ktb-muted) !important; }
.kt-dark .sg-pick { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-pick.on { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-pickgrp { color:#7be0e0 !important; }
.kt-dark .sg-ab button { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-game { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-game.on { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-game .g-bl { color:#7ba2e0 !important; }
.kt-dark .sg-err { color:#ff5c5c !important; }
.kt-dark .sg-hole { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-tap { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-segline.press { color:#ad7be0 !important; }
.kt-dark .sg-segwho { color:#7be0e0 !important; }
.kt-dark .sg-btn.press-btn { background-color:color-mix(in srgb, #f3e9f7 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; color:#c27be0 !important; }
.kt-dark .sg-btn.press-btn:disabled { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .sg-pressct { color:#7be0e0 !important; }
.kt-dark .sg-segstake { color:#7be0e0 !important; }
.kt-dark .sg-presscfg label { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .sg-empty { color:#7ba2e0 !important; }
.kt-dark .pu-card { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .pu-lbl { color:var(--ktb-ink) !important; }
.kt-dark .pu-lbl .n { color:#c476e5 !important; }
.kt-dark .pu-sel { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .pu-game { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .pu-game .nm { color:var(--ktb-ink) !important; }
.kt-dark .pu-game.on { background-color:color-mix(in srgb, #f7edfb 22%, var(--ktb-surface)) !important; border-color:var(--ktb-line) !important; }
.kt-dark .pu-stake span { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; color:var(--ktb-ink) !important; }
.kt-dark .pu-side { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .pu-side h5 { color:#c476e5 !important; }
.kt-dark .pu-chip { background-color:var(--ktb-surface) !important; border-color:var(--ktb-line) !important; }
.kt-dark .pu-chip.me { color:#66b2f5 !important; }
.kt-dark .pu-vs { color:var(--ktb-muted) !important; }
.kt-dark .pu-h2h { color:#a770eb !important; }
.kt-dark .pu-hint { color:var(--ktb-muted) !important; }


/* THE TAP IS ACKNOWLEDGED IMMEDIATELY.
   ==========================================================================================
   A bar across the very top, three pixels of it, that goes up the moment a link is followed
   or a form is posted and creeps forward while the page is on its way. The full-screen wait
   still holds back 400ms so it never flashes on a fast navigation - but 400ms with NOTHING
   on screen is how a man ends up pressing a button twice, and the first paint of a page is
   exactly when that wait is longest. */
#ktProgress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: var(--ktb-accent, #5fd68a);
    box-shadow: 0 0 8px -1px var(--ktb-accent, #5fd68a);
    z-index: 3000; opacity: 0; pointer-events: none;
    transition: width .2s ease, opacity .3s ease;
}
#ktProgress.on { opacity: 1; }


/* THE GOLFER ROSTER, AS CARDS.
   ==========================================================================================
   It was a thirteen-column desktop table dropped into a phone app: you saw four columns and
   the rest ran off the right-hand edge - including Deactivate, which is why that button looked
   like it had never existed, and including the phone numbers, which were cut in half.

   One card per man, the whole card opens the editor, and the number is a link you can ring. */
#golferCards { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }

.gcard { border:1px solid var(--ktb-line); border-radius:12px; background:var(--ktb-surface);
         overflow:hidden; }
.gcard.inactive { opacity:.72; }
.gcard.archived { opacity:.6; border-style:dashed; }

/* The row IS the button. */
.gcard-open { display:flex; align-items:baseline; gap:10px; width:100%; cursor:pointer;
              padding:11px 13px 6px; background:none; border:none; text-align:left;
              font-family:inherit; color:var(--ktb-ink); }
.gcard-name { flex:1; min-width:0; font-size:15.5px; font-weight:800; letter-spacing:-.2px;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gcard-idx { flex:0 0 auto; font-size:15px; font-weight:800; color:var(--ktb-accent);
             font-variant-numeric:tabular-nums; }

.gcard-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
              padding:0 13px 11px; }

/* A NUMBER YOU CAN RING. Half of running a morning is chasing people, and a number you have to
   read out and retype is a number nobody uses. */
.gcard-tel { display:inline-flex; align-items:center; gap:5px; text-decoration:none;
             font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;
             color:var(--ktb-accent); padding:3px 9px 3px 7px; border-radius:999px;
             border:1px solid color-mix(in srgb, var(--ktb-accent) 40%, var(--ktb-line));
             background:color-mix(in srgb, var(--ktb-accent) 10%, transparent); }
.gcard-telicon { font-size:12px; }
.gcard-tel.dead { color:var(--ktb-ink3); border-color:var(--ktb-line); background:none;
                  font-weight:700; }
.kt-dark a.gcard-tel, .kt-club a.gcard-tel { color:var(--ktb-accent); text-decoration:none; }

.gcard-tag { font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
             color:var(--ktb-ink3); border:1px solid var(--ktb-line); border-radius:999px;
             padding:3px 8px; white-space:nowrap; }
.gcard-tag.inact { color:var(--ktb-ink2); border-color:var(--ktb-ink3); }
.gcard-tag.arch  { color:var(--ktb-dn); border-color:color-mix(in srgb, var(--ktb-dn) 50%, var(--ktb-line)); }
.gcard-tag.venmo { text-transform:none; letter-spacing:0; }

.gcard-restore { margin-left:auto; }
.gcard-restorebtn { cursor:pointer; font-family:inherit; font-size:12px; font-weight:800;
                    padding:6px 14px; border-radius:999px; border:none;
                    background:var(--ktb-accent); color:var(--ktb-accent-ink); }


/* The More screen's own strip. It reuses the Field/Money chips so it looks like them, and
   sits under the account card with a little air, because it switches what is beneath it.

   IT FITS. Six sections on a phone will not go at the Field/Money size: wrapping to a second
   row looks like a mistake, and a rail you swipe hides the ones on the end - which is exactly
   what was wrong with this screen in the first place. So the pills share the width evenly and
   the type comes down to suit. Nothing to scroll, nothing on a second line. */
/* PINNED, LIKE EVERY OTHER SCREEN'S RAIL.
   These were built to make More behave like the rest of the app, and then they were the one
   strip that scrolled away with the content: open a long section, scroll, and the pills were
   simply gone - which is what "the pills vanish" was. The other rails carry .ktact, which is
   where the sticky lives; this one has its own layout, so it takes the sticky on its own.
   Negative side margins so the pinned strip spans the full width and the rows pass underneath
   it rather than beside it, and an opaque canvas behind it so they do not show through. */
.ktmore-chips { margin: 4px -12px 12px; padding: 8px 12px 9px; flex-wrap: nowrap;
                overflow: visible; gap: 5px; position: sticky; top: 0; z-index: 6;
                background: var(--ktb-canvas); border-bottom: 1px solid var(--ktb-line);
                box-shadow: 0 6px 14px -10px rgba(0,0,0,.8);
                mask-image: none; -webkit-mask-image: none; }
.ktmore-chips .ktfield-chip {
    flex: 1 1 0; min-width: 0; padding: 8px 3px; font-size: 11.5px; text-align: center;
    letter-spacing: -.1px; overflow: hidden; text-overflow: ellipsis;
}
#ktMore .ktapp-list[data-msec] { margin-top: 0; }


/* The home-screen nudge, for iPhones running in a browser tab. Above the bottom bar so it does
   not sit on the thing people are trying to press, and quiet enough to ignore. */
#ktInstallBar {
    position: fixed; left: 10px; right: 10px;
    bottom: calc(var(--ktb-bar-h, 62px) + var(--ktb-safe, 14px) + 10px);
    z-index: 1100; display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; border-radius: 14px;
    background: var(--ktb-surface); border: 1px solid var(--ktb-accent);
    box-shadow: 0 12px 30px -12px rgba(0,0,0,.7);
}
#ktInstallBar a { flex: 1; min-width: 0; text-decoration: none; }
#ktInstallBar b { display: block; font-size: 14px; font-weight: 800; color: var(--ktb-ink); }
#ktInstallBar span { display: block; font-size: 11.5px; color: var(--ktb-ink3); line-height: 1.35; }
#ktInstallBar button { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--ktb-line); background: var(--ktb-surface2);
    color: var(--ktb-ink3); font-size: 17px; line-height: 1; cursor: pointer; }
.kt-dark #ktInstallBar a, .kt-club #ktInstallBar a { text-decoration: none; }


/* "Text everyone the app link" - the one message that gets a club onto their home screens. */
.gsend { margin: 16px 0 10px; }
.gsend-btn { width: 100%; padding: 13px; border-radius: 13px; border: 1px solid var(--ktb-accent);
             background: color-mix(in srgb, var(--ktb-accent) 14%, var(--ktb-surface));
             color: var(--ktb-ink); font-family: inherit; font-size: 14.5px; font-weight: 800;
             cursor: pointer; }
.gsend-note { text-align: center; font-size: 12px; color: var(--ktb-ink3); margin-top: 6px; }
.gsend-prev { white-space: pre-wrap; word-break: break-word; margin: 0 0 14px;
              background: var(--ktb-surface2); border: 1px solid var(--ktb-line);
              border-radius: 11px; padding: 12px; font: 12.5px/1.5 inherit;
              color: var(--ktb-ink2); max-height: 240px; overflow-y: auto; }

/* The build this device is running, said out loud. Quiet enough to ignore, there when it
   matters - which is every time a published change cannot be found on a phone. */
.ktapp-build { text-align: center; font-size: 11px; letter-spacing: .04em;
               color: var(--ktb-ink3); padding: 14px 0 4px; opacity: .75; }


/* ==========================================================================================
   THE MONEY TRACKER
   Two screens show it - the dashboard's Money pill and a player's scorecard - so the rules
   live here rather than inline on one of them. They were inline, on both, with two copies of
   the same arithmetic; the copies had already drifted.
   ========================================================================================== */
.ktmt { padding:10px 14px 12px; background:var(--ktb-surface,#171b19);
        color:var(--ktb-ink,#e9ece9); font-size:14px; }
.ktmt-h { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
          color:var(--ktb-ink3,#79838f); margin:10px 0 4px; }
.ktmt-h:first-child { margin-top:0; }
.ktmt-t { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.ktmt-t td { padding:3px 0; }
.ktmt-t td + td { text-align:right; font-weight:700; white-space:nowrap; }
.ktmt-t .in  { color:var(--ktb-up,#5fae86); }
.ktmt-t .out { color:var(--ktb-dn,#d4796d); }
.ktmt-t .nil { color:var(--ktb-ink3,#79838f); font-weight:600; }
.ktmt-sum td { border-top:1px solid var(--ktb-line,#252c35); padding-top:5px; font-weight:800; }
.ktmt-net td { border-top:2px solid var(--ktb-ink,#e9ece9); padding-top:7px;
               font-size:16px; font-weight:800; }
.ktmt-foot { margin-top:5px; font-size:11.5px; color:var(--ktb-ink3,#79838f); }

/* Scorecard / Money Tracker, one at a time, so eighteen holes and a full set of figures do
   not have to share a modal that is already as tall as the screen. */
.ps-pills { display:flex; gap:6px; margin:0 0 10px; }
.ps-pills button { flex:1; padding:10px 8px; border-radius:999px; cursor:pointer;
                   font-family:inherit; font-size:14px; font-weight:800;
                   border:1px solid var(--ktb-line,#232c38);
                   background:var(--ktb-surface2,#1e242c); color:var(--ktb-ink3,#79838f); }
.ps-pills button.on { background:var(--ktb-accent,#5fd68a); color:var(--ktb-accent-ink,#08140c);
                      border-color:var(--ktb-accent,#5fd68a); }

/* THE YARDAGE LINES UP, wherever a tee is offered.
   A tee reads "Blue/White - 5,962 yds", and down a list of ten men the numbers landed wherever
   the name happened to end: Gold's number sat four characters left of Blue/White's, so nothing
   could be compared at a glance. The name and the number are one string inside one <option>, and
   an option cannot be laid out in two columns - so the whole control is set to the right instead.
   The yardage is the last thing in the string, so every number now ends on the same edge. It is
   the names that go ragged, and names are read rather than compared.

   Tabular figures so the digits are the same width as each other too. */
.kt-teesel { text-align:right; font-variant-numeric:tabular-nums; }