/* UI-025: look-and-feel drift fixes back to the approved Higgsfield references (R1c-light lead, R6c-light, R3c-light,
   R1c-dark, 0-icons, 1-goals, 2-where-when, 3-home-dark) and the UI-025 concept frames for screens without one.
   Loaded after desk-wl024.css and before the partner theme tag, so a partner's own colours still win.
   Rules: calm warm neutral base; colour comes from the platform marks and the creatives; Brilliant Red only on +,
   the main action, the Live dot and big moments (#A50404 for small red). 4/8 grid, one radius family, MOTION.md timing.
   Remove the <link> (or run pkg/merge_025.sh revert) to roll back. */

/* 1. Type scale (MOTION.md 7: 12 / 14 body / 16 lead / 20 / 44, odometer clamp). The build had drifted to 16 body,
      34 headings and half-pixel sizes, which made every card taller than the references. */
.k56{font-size:15px;line-height:1.45}
.k56 h1{font-size:30px;line-height:1.08;margin:4px 0 8px}
@media(min-width:640px){.k56 h1{font-size:40px}}
@media(max-width:359px){.k56 h1{font-size:26px}}
.k56 h2{font-size:18px;line-height:1.25}
.k56 .k56-card>h2,.k56 .k56-race>h2,.k56 .k56-strip>h2,.k56 .k56-reel>h2,.k56 .k56-cr>h2,.k56 .k56-cht__h>h2{font:700 12px/1.3 var(--ft,"K Text","Open Sans",system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.k56 .k56-lead,.k56 .k56-wrap>p:not([class]){font-size:15px}
.k56 small,.k56 .tiny{font-size:12px}
.k56 :is(button,input,select,textarea){font-family:inherit}
/* the TRADING DESK caption was system-ui at 9 or 11px; it is set in K Text like the lockup */
.k56 .k56-brand__l{font-family:"K Text","Open Sans",system-ui,sans-serif;font-weight:600}
.k56 .k56-pin,.k56 .k56-lrv__pin{font-family:"K Text","Open Sans",system-ui,sans-serif}

/* 2. Spacing back on the 4/8 grid (MOTION.md 7: card padding 16 on phones, 24 from 768px, gap 16). */
.k56 .k56-card{padding:16px}
@media(min-width:768px){.k56 .k56-card{padding:24px}}
.k56 .k56-msg{padding:12px 16px 12px 44px;border-radius:12px;font-size:14px}
.k56 .k56-btn{padding:0 16px}
.k56 .k56-tier{padding:20px}
.k56 .k56-tier__tag{padding:2px 8px}
.k56 .k56-steps{margin:0 0 16px}

/* 3. One radius family: 999 pills, 30 capsules, 20 cards, 12 controls and notes, 8 small, 4 bars. */
.k56 .k56-card,.k56 .k56-tier,.k56 .k56-panel{border-radius:20px}
.k56 .k56-row__th{border-radius:12px}
.k56 .k56-fr__phone img{border-radius:8px}
.k56 .k56-fr__board{border-radius:8px}

/* 4. Elevation: the references float the capsules on a soft, short shadow; the build's was long and grey. */
.k56{--float-sh:0 6px 20px rgba(12,11,10,.08),0 0 0 1px rgba(12,11,10,.05)}
html[data-k56-theme=dark] .k56{--float-sh:0 8px 24px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent)}
@media(prefers-color-scheme:dark){html:not([data-k56-theme=light]) .k56{--float-sh:0 8px 24px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent)}}
html.k56-scrolled .k56-top::before{box-shadow:var(--float-sh)}

/* 5. Red back to its four jobs. Active nav is ink with a quiet neutral tint (3-home-dark, R1c-light), links and back
      links are ink, warnings are amber (not red), "needs your OK" is amber like 3-home-dark's "Awaiting approval". */
.k56 .k56-nav a.on{color:var(--text)}
.k56 .k56-nav a.on::after{background:color-mix(in srgb,var(--text) 8%,transparent)}
.k56 .k56-nav a[data-v=wizard]::after{background:var(--btn)}
.k56 .k56-link,.k56 a.k56-link,.k56 button.k56-link,.k56 .k56-back,.k56 .k56-auth__back,.k56 a.k56-onb__go,.k56 a.tiny,.k56 .k56-terms a{color:var(--text)}
.k56 .k56-link{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--text) 30%,transparent);text-underline-offset:3px}
.k56 .k56-reach--none,.k56 .k56-reachrow p.k56-count--bad,.k56 .k56-days.k56-count--bad,.k56 .k56-count--bad,.k56 #k56-file-msg.k56-count--bad{color:var(--warn)!important}
.k56 .k56-pill--needs{background:var(--warn-bg);color:var(--warn)}
.k56 .k56-adcard--action,.k56 .k56-adcard--action:hover{box-shadow:inset 3px 0 0 var(--warn),inset 0 0 0 1px var(--line)}

/* 6. Wallet: "Not available" is a fact, not a success, so it is muted and sized to fit at 390. */
.k56 .k56-w--avail.is-na .v,.k56 .k56-trio__i.is-na .v{color:var(--muted);font-size:22px;line-height:1.2}
.k56 .k56-walletstrip .is-na b{color:var(--muted);font-size:13px}

/* 7. Icons. Wizard channel tiles: tint tile with a red line glyph, like 1-goals (was a solid red block).
      Goal icons: line only, one red (1-goals). Inline glyphs replace emoji. */
.k56 .k56-choice:has(>input[name=channel]:checked)>span::before{background:var(--gtile)}
.k56 .k56-choice:has(>input[name=channel]:checked)::before{background:var(--hot)}
.k56 .k56-gi{color:var(--hot)}
.k56 .k56-gi .r,.k56 .k56-gi .d{fill:none;stroke:currentColor}
.k56 .k56-gi .n{fill:currentColor}
.k56 .k56-gi .dots{stroke:currentColor}
.k56 .k56-glyph{display:inline-block;vertical-align:-.15em;flex:none}
.k56 .k56-lockt{display:inline-flex;align-items:center;gap:6px}
.k56 .k56-holdic{display:grid;place-items:center;width:56px;height:56px;margin:0 0 16px;border-radius:16px;background:var(--panel2);color:var(--text)}

/* 8. Stray hard-coded colours become tokens (they did not follow dark/light or a partner theme). */
.k56{--frame:#2B2825;--frame2:#3A3633;--media-bg:#1C1A18}
.k56 .k56-row__th{background:var(--media-bg)}
.k56 .k56-fr__phone{border-color:var(--frame)}
.k56 .k56-fr__bar{background:var(--frame)}
.k56 .k56-fr__board{border-color:var(--frame2)}
.k56 .k56-fr__pole{background:var(--frame2)}

/* 9. Platform colours, one set everywhere (charts, race bars, rows, library). YouTube is softened so it never reads
      as an alert next to the Live dot (#B9584D keeps white labels on the bar at AA, 4.6:1); nothing on a chart is #FF0000 (MOTION.md 5). */
.k56 [data-ch=youtube_ctv]{--chc:#B9584D}
html[data-k56-theme=dark] .k56 [data-ch=youtube_ctv]{--chc:#E39A90}
@media(prefers-color-scheme:dark){html:not([data-k56-theme=light]) .k56 [data-ch=youtube_ctv]{--chc:#E39A90}}
.k56 .k56-race .k56-bar,.k56 .k56-row .k56-bar{height:6px}

/* 10. Dates: the native control shows US-style 11/02/2026; a formatted "Mon 2 Nov" label sits over it (2-where-when). */
.k56 .k56-datef{position:relative;display:block}
.k56 .k56-datef>input[type=date]{color:transparent}
.k56 .k56-datef>input[type=date]::-webkit-datetime-edit{color:transparent}
.k56 .k56-datef>output{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font:700 17px/1.2 var(--fd);color:var(--text);padding-left:2px}
.k56 .k56-datef>input[type=date]:focus{color:var(--text)}
.k56 .k56-datef>input[type=date]:focus+output{opacity:0}

/* 11. Guest share pages and the 404 use the same floating header capsule as the app. */
.k56 .k56-guest-top{display:flex;align-items:center;justify-content:space-between;margin:8px 0 20px;padding:10px 16px;border-radius:30px;background:var(--float-solid,var(--panel));box-shadow:var(--float-sh)}
.k56-404{max-width:420px;margin:12vh auto;text-align:left}
.k56-404 .k56-btn{margin-top:8px}

/* 12. Motion added by UI-025 (desk025.js), on MOTION.md tokens. Reveals say "content arriving"; counts say "a real
       number landed"; nothing loops but the Live dot. Reduced motion and Calm mode remove all of it. */
.k56 .k56-rv25{opacity:0;transform:translateY(8px)}
.k56 .k56-rv25.is-in{opacity:1;transform:none;transition:opacity var(--d3,400ms) var(--e-enter,ease),transform var(--d3,400ms) var(--e-enter,ease);transition-delay:calc(var(--i,0)*40ms)}
.k56 .k56-lib-thumb.is-playing .k56-lib-play{opacity:0;transition:opacity var(--d1,120ms) var(--e-exit,ease)}
.k56 .k56-snd25{display:inline-flex;align-items:center;justify-content:center;position:absolute;right:8px;bottom:8px;width:32px;height:32px;border:0;border-radius:999px;background:rgba(12,11,10,.6);color:#fff;cursor:pointer}
.k56 .k56-lib-thumb{position:relative}
@media(prefers-reduced-motion:reduce){.k56 .k56-rv25,.k56 .k56-rv25.is-in{opacity:1;transform:none;transition:none}}
html[data-k56-calm] .k56 .k56-rv25{opacity:1;transform:none;transition:none}

/* ---- UI-025 Part 2: Plans to concept C3 (calm cards, limits as a quiet icon row, red only on the popular plan) ---- */
.k56-plans .k56-plans__ex{display:block;padding:0;background:none;color:var(--muted);font-size:13px;font-weight:400;margin:-4px 0 16px}
.k56-plans .k56-seg{display:flex;width:100%;max-width:520px;box-shadow:0 0 0 1px var(--line)}
.k56-plans .k56-seg label{flex:1;justify-content:center}
.k56-plans #k56-per-m:checked~.k56-seg label[for=k56-per-m],.k56-plans #k56-per-y:checked~.k56-seg label[for=k56-per-y]{box-shadow:none;background:var(--panel2);color:var(--text)}
.k56-plans .k56-plans__grid{gap:16px}
.k56-plans .k56-tier{gap:8px;box-shadow:0 0 0 1px var(--line)}
.k56-plans .k56-tier.is-hi{box-shadow:0 0 0 1px var(--line),var(--float-sh)}
.k56-plans .k56-tier__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.k56-plans .k56-tier h2{font-family:var(--fd);font-size:22px;text-transform:none;letter-spacing:0;color:var(--text);display:flex;align-items:center;gap:8px}
.k56-plans .k56-tier__tag{font-family:"K Text",sans-serif;font-size:11px;font-weight:600;letter-spacing:0;padding:2px 8px}
.k56-plans .k56-tier__lims{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:12px;color:var(--muted)}
.k56-plans .k56-tier__lims>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.k56-plans .k56-tier__lims b{color:var(--text);font-weight:600}
.k56-plans .k56-tier__lims .k56-glyph{color:var(--text)}
.k56-plans .k56-sr-lbl{font-size:12px}
.k56-plans .k56-tier__price{font-family:var(--fd);font-size:40px;line-height:1.05;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0}
.k56-plans .k56-tier__price b{font-weight:700}
.k56-plans .k56-tier__price small{font-family:"K Text",sans-serif;font-size:15px}
.k56-plans .k56-tier__from{margin:0 4px 0 0!important}
.k56-plans .k56-tier__loc{display:block;font-family:"K Text",sans-serif;font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
.k56-plans .k56-tier__studio{margin:0;font-size:13px;color:var(--text)}
.k56-plans .k56-tier ul{border-top:1px solid var(--line);padding-top:12px;gap:8px}
.k56-plans .k56-tier li::before{content:"";display:inline-block;width:10px;height:5px;border:solid var(--text);border-width:0 0 1.6px 1.6px;transform:translateY(-3px) rotate(-45deg);margin-right:10px}
.k56-plans .k56-btn--soft{background:var(--panel2);color:var(--text);box-shadow:none;border:0}
.k56-plans .k56-btn[aria-disabled=true]{cursor:default}
.k56-plans .k56-yes{color:var(--text)}
.k56-lib-guest .k56-verify{display:grid;gap:8px;margin:0 0 12px;padding:12px;border-radius:12px;background:var(--panel2)}
.k56-plans .k56-seg label{white-space:nowrap;padding:0 12px;font-size:13px}

/* ---- UI-025 drift: goals to concept 1-goals (white rows with a hairline, compact type, quiet help, tint selected) ---- */
.k56-goals{gap:8px}
.k56-goal>.k56-choice>span,.k56-choice:has(>input[name=goal_key])>span{min-height:72px;padding:12px 88px 12px 76px;border-radius:16px;background-color:var(--panel);box-shadow:0 0 0 1px var(--line)}
.k56-goal>.k56-choice:hover>span{background-color:var(--panel)}
.k56-goals .k56-goal>.k56-choice>input:checked+span{background-color:var(--gtile);box-shadow:none}
.k56-goal>.k56-choice>span b{font-size:15px;font-weight:600;line-height:1.3}
.k56-goal>.k56-choice>span small{margin-top:2px;font-size:12.5px;line-height:1.35}
.k56-goals .k56-goal>.k56-choice>span::before{left:12px;width:48px;height:48px;margin-top:-24px;border-radius:12px}
.k56-goals .k56-goal>.k56-choice>input:checked+span::before{background:var(--panel)}
.k56-gi{left:24px;width:24px;height:24px;margin-top:-12px}
.k56-goals .k56-goal>.k56-choice>span::after{right:48px;width:22px;height:22px;margin-top:-11px}
.k56-goal>.k56-xbtn{right:4px;margin-top:-20px}
.k56-goal>.k56-xbtn .k56-xbtn__l{background:transparent;color:var(--muted);transform:scale(.82)}
@media(max-width:359px){.k56-goal>.k56-choice>span{padding-left:68px;padding-right:80px}.k56-goals .k56-goal>.k56-choice>span::before{left:8px;width:44px;height:44px;margin-top:-22px}.k56-gi{left:18px}}

/* ---- UI-025 drift: Settings on/off rows are switches (concept C4), Coal Black when on ---- */
.k56-choices>.k56-choice>input:is(#k56-calm,#k56-snd)+span{padding-right:76px}
.k56-choices>.k56-choice>input:is(#k56-calm,#k56-snd)+span::after,
.k56-choices>.k56-choice>input:is(#k56-calm,#k56-snd):checked+span::after{width:44px;height:26px;margin-top:-13px;border:0;border-radius:13px;
  background:radial-gradient(circle at 13px 50%,#fff 0 9px,transparent 9.5px),var(--tick);transition:background-color var(--d1) var(--ease)}
.k56-choices>.k56-choice>input:is(#k56-calm,#k56-snd):checked+span{background-color:var(--panel2)}
.k56-choices>.k56-choice>input:is(#k56-calm,#k56-snd):checked+span::after{background:radial-gradient(circle at 31px 50%,var(--panel) 0 9px,transparent 9.5px),var(--text)}
/* UI-025 drift: chart axis and labels used the generic sans-serif (--fb is not set in this chain); brand text face. */
.k56 .k56-cht__ax,.k56 .k56-cht__lb{font-family:var(--ft,"K Text","Open Sans",system-ui,sans-serif)}
/* UI-025: the reel deck fans three cards; a fourth and later card waits under the third instead of spilling past the screen edge at 390. */
.k56-reel__c:nth-child(n+4){left:42%}
/* UI-025 drift: last two paddings off the 4/8 grid (Track pulse card 18/18/12, My ads rows 14) back on it, like C10 and R1c-light. */
.k56 .k56-pulse__c{padding:16px 16px 12px!important}
.k56 a.k56-row{padding:16px!important;gap:16px}