/* 1449 / 1467 (owner, 7 Nov): the brand lockup (mixins/kit_plan_badge.pug +kBrand). One part, three homes: the desktop panel, the phone menu and the public bar.
 * FRANCHISE in the text colour (white in dark mode), HUB in the brand green, in the public header's wordmark face (Kanit 800 italic), one size up from the 20 px public header.
 * Tokens fall back to the public site's (--text, --brand, --f-disp), so the public bar can link this sheet and draw the same part. */
.k-brand-w {
  display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: .26em; white-space: nowrap; text-transform: uppercase;
  font: 800 italic 22px/1 var(--font-k-display, var(--f-disp, "Kanit", sans-serif)); letter-spacing: .01em; color: var(--color-k-text, var(--text, #fff));
}
.k-brand-f { color: var(--color-k-text, var(--text, #fff)); }
.k-brand-hub { color: var(--color-k-brand, var(--brand, #38e939)); }
html[data-theme="light"] .k-brand-hub { color: var(--color-k-brand-strong, var(--color-k-brand, var(--brand, #25b826))); }
@media (max-width: 1023px) { .k-brand-w { font-size: 24px; } }
@media (max-width: 359px) { .k-brand-w { font-size: 19px; } }
/* R7 (10 Nov): the mark is the same size in all three homes (24 px tall, as in the panel), and on the public bar the lockup keeps the panel's 12 px gap.
 * The public sheet's ".pb-brand img { height: 28px }" is beaten on purpose so the public bar matches the dashboard panel and the phone menu header. */
img.fh-logo.k-brand-mark { flex: none; width: auto; height: 24px; }
.pb-brand.k-brand-pub { gap: 12px; text-decoration: none; }
.k-brand-pub .tx { display: flex; flex-direction: column; justify-content: center; min-width: 0; }

/* SHELL picture fixes (11 Nov, owner's-eyes read): the third home of the lockup, the phone head row of My Leagues, Find a League, the after-remove page and Edit Listing
 * (layout_preline .k-head-brand). The .tx column and the plan badge (.n3-role, .k-plan) were only styled under the side panel (.n3-menu in kit_nav3.css), so up here the column was a
 * plain span: the wordmark rode the top edge and was cut, and the crown and "Elite Plan" stacked under the mark. The same column, badge and colours, scoped to this home.
 * 14 px, never smaller on a phone. The sweep keyframes (k-plan-sweep) are the panel's own. */
.k-head-brand .tx { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.k-head-brand .k-brand-w { max-width: 100%; }
.k-head-brand .n3-role { font: 600 14px/1 var(--font-k-heading, "Barlow", sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--color-k-muted, #94a3b8); white-space: nowrap; }
.k-head-brand .k-plan { align-self: flex-start; display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 6px; max-width: 100%; box-sizing: border-box; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--color-k-border); background: var(--color-k-surface); position: relative; overflow: hidden; isolation: isolate; }
.k-head-brand .k-plan-t { min-width: 0; white-space: nowrap; }
.k-head-brand .k-plan-ic { flex: none; width: 14px; height: 14px; }
.k-head-brand .k-plan--elite { color: #f3b72a; border-color: rgba(224, 162, 26, .7); background: linear-gradient(160deg, rgba(224, 162, 26, .22), rgba(224, 162, 26, .08)); box-shadow: 0 0 12px rgba(224, 162, 26, .22); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .k-head-brand .k-plan--elite .k-plan-t { background: linear-gradient(100deg, #ffe18a 0%, #f3b72a 45%, #d4860e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.k-head-brand .k-plan--elite .k-plan-ic { color: #f3b72a; }
html[data-theme="light"] .k-head-brand .k-plan--elite { color: #8a5a00; border-color: rgba(176, 112, 0, .6); background: linear-gradient(160deg, rgba(224, 162, 26, .26), rgba(224, 162, 26, .1)); }
html[data-theme="light"] .k-head-brand .k-plan--elite .k-plan-t { background: linear-gradient(100deg, #b87400 0%, #8a5a00 100%); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .k-head-brand .k-plan--elite .k-plan-ic { color: #a86a00; }
.k-head-brand .k-plan--elite::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 236, 170, 0), rgba(255, 236, 170, .55) 50%, rgba(255, 236, 170, 0));
  transform: translate3d(-120%, 0, 0) skewX(-16deg); animation: k-plan-sweep 6s ease-in-out infinite;
}