/*
 * The kennel page (web/kennel.html) and the kennels index (leaderboard page, Kennels tab): dog cards, the "Build a dog"
 * card, the empty states, and the STUDIO drawer. Built on css/lh.css (the minimal skin and the avatar motion). Flat cards
 * with no border: a soft fill, space, a lift on hover. Phone: one column, and the studio becomes a full-height sheet.
 */

.kn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 6px; }
.kn-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lh-accent, #2FD07A); }
.kn-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- the cards -------------------------------------------------------------------------------------------- */
.kn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 14px; margin: 8px 0 32px; }
.kn-grid--quiet { margin-top: 12px; opacity: .8; }
.kn-card {
  position: relative; display: flex; gap: 16px; padding: 18px; min-width: 0; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .04);
  text-align: left; color: inherit; font: inherit; transition: transform var(--lh-t-base) var(--lh-ease, ease), background-color var(--lh-t-base);
}
.kn-card:hover { background: rgba(255, 255, 255, .065); transform: translateY(-2px); }
.kn-card__avatar { flex: none; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 18px; background: none; cursor: pointer; align-self: flex-start; }
.kn-card__avatar:focus-visible { outline: 2px solid var(--lh-accent, #2FD07A); outline-offset: 3px; }
.kn-card__main { flex: 1; min-width: 0; }
.kn-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kn-card__name { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-card__name a { color: inherit; text-decoration: none; }
.kn-card__name a:hover { text-decoration: underline; }
.kn-card__tag { margin: 2px 0 0; font-size: 13px; color: var(--lh-mute, #8D96A6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-pill { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: 12px; font-weight: 500; color: var(--lh-ink2, #C9D0DB); }
.kn-pill[data-status="live"] { background: rgba(47, 208, 122, .12); color: #5BE39A; }
.kn-pill[data-status="retired"], .kn-pill[data-status="idle"] { color: var(--lh-mute, #8D96A6); }
.kn-card[data-status="retired"] { opacity: .75; }

.kn-stats { display: flex; gap: 22px; margin: 12px 0 8px; }
.kn-stat dt { font-size: 11.5px; font-weight: 500; color: var(--lh-mute, #8D96A6); }
.kn-stat dd { margin: 1px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kn-stats--wide { gap: 34px; }
.kn-stats--wide .kn-stat dd { font-size: 26px; }
.kn-card__last { margin: 0 0 12px; font-size: 13px; color: var(--lh-mute, #8D96A6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-card[data-mood="happy"] .kn-card__last { color: #5BE39A; }
.kn-card[data-mood="slump"] .kn-card__last { color: #FF8A96; }

.kn-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kn-act {
  display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .07);
  color: var(--lh-ink, #EEF1F5); font: 600 13px/1 var(--font-body, 'Instrument Sans', system-ui, sans-serif); text-decoration: none; cursor: pointer;
  transition: background-color var(--lh-t-fast), transform var(--lh-t-fast);
}
.kn-act:hover { background: rgba(255, 255, 255, .13); }
.kn-act--primary { background: var(--lh-accent, #2FD07A); color: #04140B; }
.kn-act--primary:hover { background: #4BE08F; }
/* "Remove": always there, never the loudest thing on the card (a removal asks first and cannot be undone) */
.kn-act--quiet { background: transparent; color: var(--lh-mute, #9AA3B2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.kn-act--quiet:hover { background: rgba(255, 107, 122, .12); color: #FFD7DB; }
.kn-status { min-height: 1.2em; margin: 4px 0 8px; }
.kn-status[data-kind="error"] { color: #FFD7DB; }

.kn-card--build {
  flex-direction: column; align-items: center; justify-content: center; min-height: 190px; gap: 4px; cursor: pointer;
  background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); border-radius: 18px;
}
.kn-card--build:hover { background: rgba(47, 208, 122, .06); box-shadow: inset 0 0 0 1.5px var(--lh-accent, #2FD07A); }
.kn-build__plus { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .07); font-size: 26px; line-height: 1; color: var(--lh-accent, #2FD07A); margin-bottom: 6px; }
.kn-build__title { font-size: 16px; font-weight: 600; }
.kn-build__sub { font-size: 13px; color: var(--lh-mute, #8D96A6); }

.kn-retired { margin: 0 0 40px; }
.kn-retired summary { color: var(--lh-mute, #8D96A6); }

/* ---- empty and gate states ---------------------------------------------------------------------------------- */
.kn-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 56px 16px; }
.hounds-page .hd-wrap .kn-empty h2, .hounds-page .hd-wrap .kn-empty h3 { margin: 12px 0 0; font-size: 22px; }
.kn-empty .hd-lede { text-align: center; margin-bottom: 14px; }
.kn-empty__row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.kn-empty__cta { height: 44px; padding: 0 22px; font-size: 15px; }
.kn-empty__dog { opacity: .95; }

/* ---- the kennels index ------------------------------------------------------------------------------------- */
.kn-kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.kn-kcard {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04);
  color: inherit; text-decoration: none; transition: transform var(--lh-t-base) var(--lh-ease, ease), background-color var(--lh-t-base);
}
.kn-kcard:hover { background: rgba(255, 255, 255, .07); transform: translateY(-2px); }
.kn-stack { display: flex; flex: none; }
.kn-stack__dog { margin-left: -14px; border-radius: 12px; box-shadow: 0 0 0 2px #0B0D10; line-height: 0; }
.kn-stack__dog:first-child { margin-left: 0; }
.kn-kcard__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kn-kcard__name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-kcard__meta { font-size: 13px; color: var(--lh-mute, #8D96A6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-kcard__go { color: var(--lh-mute, #8D96A6); transition: transform var(--lh-t-base) var(--lh-ease, ease), color var(--lh-t-base); }
.kn-kcard:hover .kn-kcard__go { transform: translateX(3px); color: var(--lh-accent, #2FD07A); }
.hounds-page .hd-pagehead .btn { align-self: center; }

/* ---- the studio drawer -------------------------------------------------------------------------------------- */
.kn-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(5, 7, 9, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.kn-scrim[hidden], .kn-studio[hidden] { display: none; }
.kn-studio {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(620px, 100vw); display: flex; flex-direction: column;
  background: #0F1317; box-shadow: -1px 0 0 rgba(255, 255, 255, .07), -30px 0 60px rgba(0, 0, 0, .45);
}
.kn-studio__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 20px 12px; }
.kn-studio__remove { order: 5; margin-left: auto; }
.kn-studio__avatar { flex: none; line-height: 0; }
.kn-studio__who { flex: 1; min-width: 0; }
.kn-studio__who h2 { margin: 0; font-size: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-studio__who .hd-fine { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-studio__close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--lh-ink, #EEF1F5); font-size: 22px; line-height: 1; cursor: pointer; }
.kn-studio__close:hover { background: rgba(255, 255, 255, .14); }
.lh-tabs--studio { margin: 0; padding: 0 12px; }
.kn-studio__body { flex: 1; overflow-y: auto; padding: 22px 20px 40px; overscroll-behavior: contain; }
.kn-section { margin: 0 0 20px; padding: 0; background: none; border: 0; }
.kn-studio .bd-embedded__title { display: none; }
.kn-studio .bd-step { margin: 0 0 28px; }
.kn-studio .dk-locker { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: no-preference) {
  .kn-studio[data-open="true"] { animation: kn-slide 520ms var(--lh-spring) both; }
  .kn-scrim:not([hidden]) { animation: kn-scrim var(--lh-t-base) ease both; }
}
@keyframes kn-slide { from { transform: translateX(56px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kn-scrim { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  .kn-grid, .kn-kgrid { grid-template-columns: minmax(0, 1fr); }
  .kn-card { padding: 16px; gap: 14px; }
  .kn-card__last { white-space: normal; }
  .kn-card__avatar { width: 64px; height: 64px; }
  .kn-card__avatar svg { width: 64px; height: 64px; }
  .kn-stats { gap: 18px; }
  .kn-studio { width: 100vw; }
  .kn-studio__head .lh-btn { display: none; }
  .kn-studio__body { padding-bottom: 90px; }
  .kn-head__actions { width: 100%; }
}

/* ======================================================================================================================
 * THE CHARACTER CREATOR (web/js/dog-locker.js) and the dog faces in lists. Design system v2 tokens (css/lh.css).
 * ==================================================================================================================== */
.hounds-page .hd-dogface, .hounds-page .lbdog { display: inline-flex; flex: none; line-height: 0; }
.hounds-page .hd-modelcell { gap: var(--lh-s3); }
.hounds-page .hd-modelhead { align-items: center; gap: var(--lh-s4); }
.hounds-page .hd-modelhead .dk-badge { flex: none; }

.dk-stage {
  position: relative; display: grid; justify-items: center; gap: var(--lh-s3); padding: var(--lh-s5) var(--lh-s4) var(--lh-s4);
  border-radius: var(--lh-r-lg); overflow: hidden; box-shadow: var(--lh-e1);
  background: radial-gradient(110% 80% at 50% 0%, rgba(47, 208, 122, .12), transparent 62%), var(--lh-soft);
}
.dk-stage__spot { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; background: radial-gradient(60% 100% at 50% 100%, rgba(255, 255, 255, .07), transparent); }
.dk-stage__dog { position: relative; line-height: 0; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .42)); will-change: transform; }
.dk-stage__dog svg { width: min(200px, 56vw); height: auto; }
.dk-stage__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--lh-s3); width: 100%; font-size: var(--lh-fs-sm); color: var(--lh-ink2); }
.dk-stage__breed { margin: 0; }
.dk-dirty { color: var(--lh-pending); font-size: var(--lh-fs-xs); font-weight: 600; }
.dk-dirty[hidden] { display: none; }
.dk-posebar { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.dk-posebtn {
  height: 28px; padding: 0 var(--lh-s3); border: 0; border-radius: var(--lh-r-pill); background: rgba(255, 255, 255, .06); color: var(--lh-mute);
  font: 500 var(--lh-fs-xs)/1 var(--lh-font-text); cursor: pointer; transition: background-color var(--lh-t-fast) var(--lh-ease), color var(--lh-t-fast) var(--lh-ease);
}
.dk-posebtn:hover { color: var(--lh-ink); background: rgba(255, 255, 255, .11); }
.dk-posebtn[aria-pressed="true"] { background: var(--lh-ink); color: var(--lh-bg); font-weight: 600; }
.dk-dice {
  position: absolute; top: var(--lh-s3); right: var(--lh-s3); display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--lh-s3) 0 10px;
  border: 0; border-radius: var(--lh-r-pill); background: var(--lh-accent-soft); color: var(--lh-win); font: 600 var(--lh-fs-sm)/1 var(--lh-font-text); cursor: pointer;
  transition: background-color var(--lh-t-fast) var(--lh-ease), transform var(--lh-t-fast) var(--lh-ease);
}
.dk-dice:hover { background: rgba(47, 208, 122, .24); }
.dk-dice:active { transform: scale(.95); }
.dk-dice__icon { font-size: 17px; line-height: 1; }

.hounds-page .dk-fieldset { padding: 0; margin: 0 0 var(--lh-s4); }
.hounds-page .dk-fieldset legend { margin-bottom: var(--lh-s2); }
.hounds-page .dk-swatch { width: 36px; height: 36px; transition: transform var(--lh-t-base) var(--lh-spring), box-shadow var(--lh-t-fast) var(--lh-ease); }
.hounds-page .dk-swatch:hover { transform: scale(1.12); }
.hounds-page .dk-swatch[aria-pressed="true"] { transform: scale(1.08); }
.dk-optrow--swatch { gap: var(--lh-s2); }
.dk-optrow--thumb { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: var(--lh-s2); }
.hounds-page .dk-opt.dk-opt--thumb {
  display: grid; justify-items: center; gap: 2px; min-height: 0; padding: var(--lh-s2) 4px 6px; border-radius: var(--lh-r-md); background: var(--lh-soft);
  box-shadow: inset 0 0 0 1.5px transparent; color: var(--lh-ink2);
  transition: transform var(--lh-t-base) var(--lh-spring), background-color var(--lh-t-fast) var(--lh-ease), box-shadow var(--lh-t-fast) var(--lh-ease);
}
.hounds-page .dk-opt.dk-opt--thumb:hover { background: var(--lh-soft-2); transform: translateY(-2px); }
.hounds-page .dk-opt.dk-opt--thumb[aria-pressed="true"] { background: var(--lh-accent-soft); box-shadow: inset 0 0 0 1.5px var(--lh-accent); color: var(--lh-ink); transform: translateY(-2px); }
.dk-opt__dog { display: block; line-height: 0; }
.dk-opt__label { font-size: var(--lh-fs-xs); font-weight: 500; }
/* the art style (three big cards) and the breed (a scrolling grid of small hounds) */
.dk-optrow--style { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lh-s2); }
.dk-opt--style .dk-opt__label { font-weight: 600; color: var(--lh-ink); }
.dk-opt__blurb { font-size: 10.5px; line-height: 1.25; color: var(--lh-mute); text-align: center; }
.dk-optrow--breed { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 236px; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.hounds-page .dk-opt.dk-opt--breed { padding: 4px 2px 5px; gap: 1px; }
.dk-opt--breed .dk-opt__label { font-size: 10.5px; line-height: 1.15; text-align: center; }
.dk-actions--sticky { position: sticky; bottom: -40px; z-index: 3; margin: var(--lh-s3) 0 0; padding: var(--lh-s3) 0 var(--lh-s4); background: #0F1317; box-shadow: 0 -1px 0 var(--lh-line), 0 -14px 18px #0F1317; }
.dk-save[disabled] { opacity: .7; }

.kn-studio .dk-stage {
  position: sticky; top: 0; z-index: 4; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dog bar" "dog pose"; align-items: center; justify-items: start;
  column-gap: var(--lh-s5); padding: var(--lh-s4) var(--lh-s5);
}
.kn-studio .dk-stage__dog { grid-area: dog; }
.kn-studio .dk-stage__bar { grid-area: bar; align-self: end; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 34px; }
.kn-studio .dk-posebar { grid-area: pose; align-self: start; justify-content: flex-start; }
.kn-studio .dk-stage__dog svg { width: 148px; }
.kn-studio .dk-locker { gap: var(--lh-s4); }
@media (min-width: 760px) {
  .hounds-page:not(.kn-page) .dk-locker { grid-template-columns: 280px minmax(0, 1fr); }
  .hounds-page:not(.kn-page) .dk-stage { position: sticky; top: 76px; }
}
@media (max-width: 760px) {
  .kn-studio .dk-stage { position: relative; grid-template-columns: 1fr; grid-template-areas: "dog" "bar" "pose"; justify-items: center; }
  .kn-studio .dk-stage__bar { padding-top: 0; align-items: center; }
  .kn-studio .dk-posebar { justify-content: center; }
  .kn-studio .dk-stage__dog svg { width: 148px; }
}

/* ---- creator touch-ups, the builder's dog, and the phone studio ----------------------------------------------------- */
.hounds-page .dk-swatch { min-height: 0; min-width: 0; position: relative; }
.hounds-page .dk-swatch::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.kn-studio__body { --kn-pad: 40px; }
.dk-actions--sticky { bottom: calc(-1 * var(--kn-pad, 40px)); }
@media (max-width: 760px) {
  .kn-studio__body { --kn-pad: 90px; }
  .dk-dice { padding: 0 10px; }
  .dk-dice span:last-child { display: none; }
}
.hounds-page .bd-dog { display: flex; align-items: center; gap: var(--lh-s4); }
.bd-dog__dog { flex: none; line-height: 0; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); }
.bd-dog__face { flex: none; line-height: 0; }
.hounds-page .bd-dog__badge { flex: none; }
.hounds-page .bd-dogrow { display: flex; align-items: flex-start; gap: var(--lh-s3); }
.hounds-page .bd-dogcard, .hounds-page .bd-dog { min-width: 0; }

/* kennel cards: a bigger character and a calmer stat line */
.kn-card__avatar { width: 92px; height: 92px; border-radius: 22px; transition: transform var(--lh-t-base) var(--lh-spring); }
.kn-card:hover .kn-card__avatar { transform: scale(1.04) rotate(-1.5deg); }
.kn-stat dd { font-family: var(--lh-font-display); font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -.005em; }
.kn-stat dt { letter-spacing: .02em; }
.kn-card { border-radius: var(--lh-r-lg); box-shadow: var(--lh-e1); }
.kn-empty__dog { filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45)); }
@media (max-width: 760px) { .kn-card__avatar { width: 72px; height: 72px; } .kn-card__avatar svg { width: 72px; height: 72px; } .kn-stat dd { font-size: 24px; } }

/* ======================================================================================================================
 * ITERATION 1 (after the first self-score): the scoreboard KPIs, section heads with a real size, the builder's steps as cards,
 * the kennels index's way in.
 * ==================================================================================================================== */
.hounds-page .hd-panel > h2, .hounds-page .hd-panel__head > h2, .hounds-page .dk-panel > h2 {
  font-family: var(--lh-font-display); font-size: 26px; font-weight: 700; line-height: 1.05; letter-spacing: var(--lh-track-display);
}
.hounds-page .hd-panel__head h2 .hd-count { font-family: var(--lh-font-text); font-size: var(--lh-fs-sm); font-weight: 500; color: var(--lh-mute); letter-spacing: 0; }

/* the scoreboard: each figure is a card, the number in the display face */
.hounds-page .hd-kpis { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--lh-s3); }
.hounds-page .hd-kpi { background: var(--lh-soft); border-radius: var(--lh-r-md); padding: var(--lh-s3) var(--lh-s4); box-shadow: var(--lh-e1); transition: background-color var(--lh-t-fast) var(--lh-ease); }
.hounds-page .hd-kpi:hover { background: var(--lh-soft-2); }
.hounds-page .hd-kpi__label { margin-bottom: 2px; }
.hounds-page .hd-kpi__small { color: var(--lh-mute); }

/* the builder: one card per step, with the step in a pill */
.hounds-page .bd-step { background: var(--lh-soft); border-radius: var(--lh-r-lg); padding: var(--lh-s5); margin: 0 0 var(--lh-s4); box-shadow: var(--lh-e1); }
.hounds-page .bd-step + .bd-step { box-shadow: var(--lh-e1); }
.hounds-page .bd-step__no { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--lh-s3); border-radius: var(--lh-r-pill); background: var(--lh-accent-soft); color: var(--lh-win); letter-spacing: .04em; }
.hounds-page .bd-step h2 { font-family: var(--lh-font-display); font-size: 26px; font-weight: 700; line-height: 1.05; margin: var(--lh-s2) 0 var(--lh-s3); }
.hounds-page .bd-english { background: rgba(0, 0, 0, .25); border-radius: var(--lh-r-md); font-size: var(--lh-fs-md); }
.hounds-page .bd-preview, .hounds-page .bd-mine { box-shadow: var(--lh-e1); }
.kn-studio .bd-step { background: none; box-shadow: none; padding: 0; margin: 0 0 var(--lh-s6); }

/* the kennels index: the card that starts your own */
.kn-newkennel {
  display: flex; align-items: center; gap: var(--lh-s4); padding: var(--lh-s3) var(--lh-s4); border-radius: var(--lh-r-lg); color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--lh-line-2); transition: background-color var(--lh-t-fast) var(--lh-ease), box-shadow var(--lh-t-fast) var(--lh-ease), transform var(--lh-t-base) var(--lh-spring);
}
.kn-newkennel:hover { background: var(--lh-accent-soft); box-shadow: inset 0 0 0 1.5px var(--lh-accent); transform: translateY(-2px); }
.kn-newkennel__dog { flex: none; line-height: 0; }
.kn-newkennel__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kn-newkennel__title { font-size: var(--lh-fs-base); font-weight: 600; }
.kn-newkennel__sub { font-size: var(--lh-fs-sm); color: var(--lh-mute); }
.kn-newkennel__go { color: var(--lh-accent); font-size: var(--lh-fs-md); }

/* an empty chart is one calm line in a soft box, not a tiny caption inside a dashed frame */
.hounds-page .hd-chart[data-empty="true"] .hd-chart__svg { display: none; }
.hounds-page .hd-chart[data-empty="true"] .hd-chart__empty-note { display: block; margin: var(--lh-s2) 0 0; padding: var(--lh-s4); border-radius: var(--lh-r-md); background: var(--lh-soft); text-align: center; color: var(--lh-mute); font-size: var(--lh-fs-sm); }

/* the model page: every section under the tabs is a card, so the page reads as parts, not one long scroll of text */
.hounds-page [data-hook="hound-app"] [data-tabpanel] .hd-panel:not(.hd-scoreboard), .hounds-page [data-hook="hound-app"] [data-tabpanel] .hd-panel:not(.hd-scoreboard) + .hd-panel {
  background: var(--lh-soft); border-radius: var(--lh-r-lg); padding: var(--lh-s5); margin: 0 0 var(--lh-s4); box-shadow: var(--lh-e1);
}
.hounds-page [data-hook="hound-app"] .hd-scoreboard { margin-bottom: var(--lh-s5); }
@media (max-width: 760px) {
  .hounds-page [data-hook="hound-app"] [data-tabpanel] .hd-panel:not(.hd-scoreboard), .hounds-page [data-hook="hound-app"] [data-tabpanel] .hd-panel:not(.hd-scoreboard) + .hd-panel { padding: var(--lh-s4); }
}


/* ===== ROUND 2: the training camp at a glance, every section collapsed to a headline and one number ===== */
.cp-strip { list-style: none; margin: 0 0 var(--lh-s5); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lh-s3); }
.cp-stat { display: grid; gap: var(--lh-s1); padding: var(--lh-s4) var(--lh-s5); border-radius: var(--lh-r-lg); background: var(--lh-soft); box-shadow: inset 0 0 0 1px var(--lh-line); }
.cp-stat__n { font-family: var(--lh-font-display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--lh-ink); font-variant-numeric: tabular-nums; }
.cp-stat__l { font-size: var(--lh-fs-xs); font-weight: 500; letter-spacing: .02em; color: var(--lh-mute); }
@media (max-width: 760px) { .cp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-stat { padding: var(--lh-s3) var(--lh-s4); } }

.hounds-page .hd-panel:has(> .cp-sec) { padding: 0; margin-bottom: var(--lh-s3); }
.cp-sec__sum { display: flex; align-items: center; gap: var(--lh-s4); padding: var(--lh-s4) var(--lh-s5); cursor: pointer; list-style: none; border-radius: var(--lh-r-lg); }
.cp-sec__sum::-webkit-details-marker { display: none; }
.cp-sec__sum::after { content: "+"; flex: none; margin-left: var(--lh-s1); font: 600 22px/1 var(--lh-font-text); color: var(--lh-accent); }
.cp-sec[open] > .cp-sec__sum::after { content: "\2013"; }
.cp-sec__sum:hover { background: var(--lh-soft-2); }
.hounds-page .cp-sec__sum h2 { margin: 0; flex: 1 1 auto; font-size: var(--lh-fs-lg); line-height: 1.15; min-width: 0; }
.cp-sec__num { flex: none; font-family: var(--lh-font-display); font-size: var(--lh-fs-lg); font-weight: 700; color: var(--lh-ink); font-variant-numeric: tabular-nums; text-align: right; }
.cp-sec__body { padding: 0 var(--lh-s5) var(--lh-s5); }
@media (max-width: 560px) { .cp-sec__sum { padding: var(--lh-s4); gap: var(--lh-s3); flex-wrap: wrap; } .cp-sec__num { order: 3; flex: 1 1 100%; text-align: left; font-size: var(--lh-fs-md); } .cp-sec__sum::after { margin-left: auto; } .cp-sec__body { padding: 0 var(--lh-s4) var(--lh-s4); } }
.hounds-page [data-hook="learning-app"] .hd-panel:has(> .cp-sec), .hounds-page [data-hook="learning-app"] .hd-panel + .hd-panel:has(> .cp-sec) { padding: 0; margin: 0 0 var(--lh-s3); box-shadow: inset 0 0 0 1px var(--lh-line); }
@media (max-width: 760px) { .hounds-page [data-hook="learning-app"] .hd-panel:has(> .cp-sec) { padding: 0; } }
.hounds-page [data-hook="learning-app"] .cp-sec__sum h2 { font-size: var(--lh-fs-lg); margin: 0; }

/* ===== ROUND 2: the model page. Fire now is a full-width action bar; the bankroll is the one hero tile; the rest is one tidy row ===== */
.hounds-page .dk-top { grid-template-columns: minmax(0, 1fr); }
.hounds-page .dk-top [data-hook="dog-fire-section"] {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--lh-s2) var(--lh-s5);
  padding: var(--lh-s4) var(--lh-s5); margin-bottom: var(--lh-s5); border-radius: var(--lh-r-lg);
  background: linear-gradient(100deg, rgba(47, 208, 122, .13), var(--lh-soft) 62%); box-shadow: inset 0 0 0 1px var(--lh-line);
}
.hounds-page .dk-top [data-hook="dog-fire-section"][hidden] { display: none; }
.hounds-page .dk-top [data-hook="dog-fire-section"] h2 { margin: 0; font-size: var(--lh-fs-lg); }
.hounds-page .dk-top [data-hook="dog-fire"] { display: contents; }
.hounds-page .dk-top [data-hook="dog-fire"] > p { margin: 0; font-size: var(--lh-fs-sm); }
.hounds-page .dk-top [data-hook="dog-fire"] > .dk-actions { margin: 0; justify-content: flex-end; }
.hounds-page .dk-top [data-hook="dog-fire"] > .dk-result { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .hounds-page .dk-top [data-hook="dog-fire-section"] { grid-template-columns: minmax(0, 1fr); padding: var(--lh-s4); }
  .hounds-page .dk-top [data-hook="dog-fire"] > .dk-actions { justify-content: flex-start; }
}

.hounds-page .hd-kpis--v2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lh-s3); }
.hd-bankhero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--lh-s3) var(--lh-s7); align-items: center;
  padding: var(--lh-s5) var(--lh-s6); border-radius: var(--lh-r-lg); box-shadow: inset 0 0 0 1px var(--lh-line), var(--lh-e1);
  background: radial-gradient(70% 140% at 0% 0%, rgba(47, 208, 122, .10), transparent 65%), var(--lh-soft);
}
.hounds-page .hd-bankhero .hd-kpi { background: none; box-shadow: none; padding: 0; }
.hounds-page .hd-bankhero .hd-kpi:hover { background: none; }
.hounds-page .hd-bankhero .hd-kpi[data-slot="bankroll"] .hd-kpi__big { font-size: clamp(44px, 6vw, 68px); }
.hounds-page .hd-bankhero .hd-kpi[data-slot="bankroll"] .hd-kpi__label { font-size: var(--lh-fs-sm); }
.hounds-page .hd-bankhero .hd-kpi[data-slot="return"] { justify-self: end; text-align: right; align-items: flex-end; min-width: 0; }
.hounds-page .hd-bankhero .hd-kpi[data-slot="return"] .hd-kpi__big { font-size: clamp(30px, 3.6vw, 44px); }
.hounds-page .hd-bankhero .hd-kpitabs { order: 3; margin: var(--lh-s2) 0 0; gap: 2px; }
.hounds-page .hd-bankhero .hd-kpitab { height: 26px; padding: 0 10px; border: 0; border-radius: var(--lh-r-pill); background: var(--lh-soft-2); color: var(--lh-mute); font: 600 12px/1 var(--lh-font-text); cursor: pointer; }
.hounds-page .hd-bankhero .hd-kpitab[aria-selected="true"] { background: var(--lh-ink); color: var(--lh-bg); }
.hounds-page .hd-bankhero .hd-kpi[data-slot="return"] .hd-kpi__label { order: 0; }
.hounds-page .hd-bankhero .hd-kpi[data-slot="return"] .hd-kpi__big { order: 1; }
.hounds-page .hd-bankhero .hd-kpi[data-slot="return"] .hd-kpi__small { order: 2; max-width: 22em; }

.hd-kpirow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--lh-s2); }
.hounds-page .hd-kpirow .hd-kpi { padding: var(--lh-s3); }
.hounds-page .hd-kpirow .hd-kpi__big { font-size: clamp(20px, 2.1vw, 26px); }
.hounds-page .hd-kpirow .hd-kpi__small { font-size: 11px; line-height: 1.3; }
@media (max-width: 1080px) { .hd-kpirow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .hd-bankhero { grid-template-columns: minmax(0, 1fr); padding: var(--lh-s4); gap: var(--lh-s4); }
  .hounds-page .hd-bankhero .hd-kpi[data-slot="return"] { justify-self: start; text-align: left; align-items: flex-start; }
  .hd-kpirow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== ROUND 2: the leaderboard table fits. Under 1500px the low-value columns (7d, 24h, average price, last 10) are hidden; the page widens
   to 1360px to show all 13 from 1500px; and a table that is still too wide (a phone) scrolls INSIDE its card with the rank and model columns pinned ===== */
.hounds-page .hd-table--board { min-width: 0; }
.hounds-page .hd-tablewrap { border-radius: var(--lh-r-lg); }
@media (max-width: 1499px) {
  .hounds-page .hd-table--board .hd-col-d7, .hounds-page .hd-table--board .hd-col-h24,
  .hounds-page .hd-table--board .hd-col-price, .hounds-page .hd-table--board .hd-col-last10 { display: none; }
}
@media (min-width: 1500px) {
  .hounds-page .hd-wrap:has([data-hook="hounds-table"]) { max-width: 1360px; }
}
@media (max-width: 1079px) { .hounds-page .hd-table--board { min-width: 760px; } }
.hounds-page .hd-table--board th.hd-col-rank, .hounds-page .hd-table--board td.hd-col-rank { position: sticky; left: 0; z-index: 2; width: 44px; min-width: 44px; max-width: 44px; background: var(--lh-bg); }
.hounds-page .hd-table--board th.hd-col-model, .hounds-page .hd-table--board td.hd-col-model { position: sticky; left: 44px; z-index: 2; background: var(--lh-bg); }
.hounds-page .hd-table--board tbody tr:hover td.hd-col-rank, .hounds-page .hd-table--board tbody tr:hover td.hd-col-model { background: var(--lh-bg-2, #14181d); }
.hd-qual__none { margin: var(--lh-s3) 0 0; }
/* a model's meta line ("MLB, NFL . moneyline, spread, total . by Handler 21E8's kennel") may wrap: it was nowrap and held the model column at 430px */
.hounds-page .hd-table--board td.hd-col-model, .hounds-page .hd-table--board th.hd-col-model { white-space: normal; min-width: 0; max-width: 300px; }
.hounds-page .hd-table--board .hd-col-model { width: 300px; }

/* ===== ROUND 2: a quiet kennel is filled with a featured dog, the latest tickets from member dogs, and a thinking dog when there is nothing ===== */
.kn-feat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--lh-s6); align-items: center; margin: 0 0 var(--lh-s5); padding: var(--lh-s6); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--lh-line), var(--lh-e1);
  background: radial-gradient(60% 140% at 0% 0%, rgba(47, 208, 122, .12), transparent 65%), var(--lh-soft); }
.kn-feat__dog { line-height: 0; border-radius: 28px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.kn-feat__kicker { margin: 0 0 var(--lh-s1); font: 600 var(--lh-fs-xs)/1 var(--lh-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--lh-accent); }
.hounds-page .hd-wrap .kn-feat__name { margin: 0; font-family: var(--lh-font-display); font-size: var(--lh-fs-2xl); font-weight: 700; line-height: 1; letter-spacing: var(--lh-track-display); }
.hounds-page .hd-wrap .kn-feat__name a { color: var(--lh-ink); text-decoration: none; }
.kn-feat__sub { margin: var(--lh-s2) 0 0; }
.kn-feat__stats { display: flex; flex-wrap: wrap; gap: var(--lh-s2) var(--lh-s6); margin: var(--lh-s4) 0 var(--lh-s2); }
.kn-feat__stat dt { font-size: 13px; font-weight: 500; color: var(--lh-ink2); }
.kn-feat__stat dd { margin: 2px 0 0; font: 700 28px/1 var(--lh-font-display); font-variant-numeric: tabular-nums; color: var(--lh-ink); }
.kn-feat__note { margin: 0 0 var(--lh-s4); }
.kn-feat__actions { display: flex; flex-wrap: wrap; gap: var(--lh-s2); }
@media (max-width: 760px) { .kn-feat { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: var(--lh-s5); gap: var(--lh-s4); } .kn-feat__dog svg { width: 104px; height: 104px; } }

.kn-activity { margin: var(--lh-s6) 0 var(--lh-s4); }
.hounds-page .hd-wrap .kn-activity__title { margin: 0 0 var(--lh-s3); font-size: var(--lh-fs-md); font-weight: 600; }
.kn-activity__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lh-s2); }
.kn-act-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--lh-s3); align-items: center; padding: var(--lh-s3) var(--lh-s4); border-radius: var(--lh-r-md); background: var(--lh-soft); }
.kn-act-row__dog { line-height: 0; }
.kn-act-row__main { display: grid; gap: 2px; min-width: 0; }
.kn-act-row__who { font-weight: 600; color: var(--lh-ink); text-decoration: none; }
.kn-act-row__pick { font-size: var(--lh-fs-sm); color: var(--lh-ink2); overflow-wrap: anywhere; }
.kn-act-row__game { overflow-wrap: anywhere; }
.kn-act-row__res { white-space: nowrap; }

.kn-quiet { display: grid; justify-items: center; gap: var(--lh-s3); padding: var(--lh-s7) var(--lh-s4); margin: var(--lh-s5) 0; border-radius: var(--lh-r-lg); background: var(--lh-soft); text-align: center; }
.kn-quiet__dog { line-height: 0; border-radius: 26px; }
.kn-quiet__text { margin: 0; max-width: 32em; color: var(--lh-mute); font-size: var(--lh-fs-base); line-height: 1.5; }
.kn-empty .kn-quiet { background: none; padding: var(--lh-s4); }

/* my kennel: the four actions are a 2x2 grid on a phone (the fourth, Open, was an orphan on a line of its own); stat labels are bigger and brighter */
.kn-stat dt { font-size: 13px; color: var(--lh-ink2, #C3C9D3); }
@media (max-width: 760px) {
  .kn-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lh-s2); width: 100%; }
  .kn-card__actions .kn-act { width: 100%; justify-content: center; text-align: center; min-height: 44px; }
}
.kn-act-row__res { justify-self: end; padding: 3px 10px; border-radius: var(--lh-r-pill); background: var(--lh-soft-2); color: var(--lh-ink2); font: 600 11px/1.4 var(--lh-font-text); letter-spacing: .06em; text-transform: uppercase; }
.kn-act-row[data-status="pending"] .kn-act-row__res { color: #F2B84B; background: rgba(242, 184, 75, .12); }
.kn-act-row[data-status="won"] .kn-act-row__res, .kn-act-row[data-status="win"] .kn-act-row__res { color: var(--lh-win); background: rgba(47, 208, 122, .12); }
.kn-act-row[data-status="lost"] .kn-act-row__res, .kn-act-row[data-status="loss"] .kn-act-row__res { color: var(--lh-loss); background: rgba(255, 107, 122, .12); }

/* ===== ROUND 2: the builder. A big live dog, pickers drawn in the dog's own palette, sidebar cards with a dog each ===== */
@media (min-width: 700px) { .hounds-page .bd-identity { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--lh-s6); } }
.hounds-page .bd-dogcard { position: sticky; top: var(--lh-s5); padding: var(--lh-s5); border: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--lh-line), var(--lh-e1);
  background: radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--dog, #2FD07A) 22%, transparent), transparent 70%), var(--lh-soft); }
.hounds-page .bd-dog--stage { flex-direction: column; align-items: center; text-align: center; gap: var(--lh-s3); padding-left: 0; }
.hounds-page .bd-dog--stage .bd-dog__dog { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.hounds-page .bd-dog--stage .bd-dog__dog svg { width: 176px; height: 176px; border-radius: 28px; }
.hounds-page .bd-dog--stage .bd-dog__badge { left: calc(50% + 52px); top: var(--lh-s2); width: 40px; height: 40px; padding: 7px; background: var(--dog, #FF7A45); }
.hounds-page .bd-dog--stage .bd-dog__name { font-family: var(--lh-font-display); font-size: var(--lh-fs-xl); line-height: 1.05; letter-spacing: var(--lh-track-display); }
.hounds-page .bd-dog--stage .bd-dog__tag { font-size: var(--lh-fs-base); color: var(--lh-mute); }
.hounds-page .bd-dog__breed { margin: var(--lh-s2) 0 0; }
@media (max-width: 699px) { .hounds-page .bd-dogcard { position: static; } }

/* the pickers are the dog's backdrop tiles: same rounded-square shape and gradients as the dog, the chart colour as the ring */
.hounds-page .bd-swatches, .hounds-page .bd-badges { gap: var(--lh-s2); }
.hounds-page .bd-swatch { width: 44px; height: 44px; border: 0; border-radius: 14px; background: linear-gradient(180deg, var(--bg1, #1B3157), var(--bg2, #0C1730));
  box-shadow: inset 0 0 0 3px var(--sw), inset 0 0 0 4px rgba(0, 0, 0, .25); transition: transform var(--lh-t-base) var(--lh-spring), box-shadow var(--lh-t-fast) var(--lh-ease); }
.hounds-page .bd-swatch:hover { transform: translateY(-2px); }
.hounds-page .bd-swatch[aria-checked="true"] { transform: scale(1.08); box-shadow: inset 0 0 0 3px var(--sw), 0 0 0 3px var(--lh-bg), 0 0 0 5px var(--lh-ink); }
.hounds-page .bd-badge { width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--lh-soft-2); color: var(--lh-ink2); transition: transform var(--lh-t-base) var(--lh-spring), background-color var(--lh-t-fast) var(--lh-ease); }
.hounds-page .bd-badge:hover { transform: translateY(-2px); }
.hounds-page .bd-badge[aria-checked="true"] { background: var(--lh-accent); color: var(--lh-accent-ink); box-shadow: 0 0 0 3px var(--lh-bg), 0 0 0 5px var(--lh-accent); transform: scale(1.06); }

/* the sidebar cards are not flat: each has a dog, a heading, and room */
.hounds-page .bd-side .hd-panel { position: relative; padding: var(--lh-s5); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--lh-line), var(--lh-e1); min-height: 148px; }
.bd-side__dog { position: absolute; top: var(--lh-s4); right: var(--lh-s4); line-height: 0; border-radius: 18px; }
.bd-side__dog svg { width: 60px; height: 60px; }
.hounds-page .bd-side .hd-panel h2 { padding-right: 72px; min-height: 56px; }  /* the 60px badge sits beside the heading only: the line under it wrapped beneath the badge at 390px */

/* the seventh tile of the secondary row spans the line on a phone instead of sitting alone */
@media (max-width: 760px) { .hd-kpirow .hd-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* "Take them out back" on a kennel card: the burial. Outlined in the bad colour, never the loudest thing on the card, and the sheet asks twice. */
.kn-act--danger { background: transparent; color: #FF8A96; box-shadow: inset 0 0 0 1px rgba(255, 107, 122, .55); }
.kn-act--danger:hover { background: rgba(255, 107, 122, .16); color: #fff; }

/* ======================================================================================================================
 * KENNEL-FIRST (owner ruling 2026-10-20, docs/design/KENNEL_FIRST_BRIEF.md): My Kennel is the home. Big quiet cards, one accent
 * (the green Unleash), no card borders, space instead of boxes, a "Tonight" strip, an upgrade card only when it is earned.
 * Loaded last on the kennel page so it sits on top of the older card rules above; the class names are unchanged.
 * ==================================================================================================================== */
.kn-main { max-width: 1120px; }
.kn-head { align-items: center; margin: var(--lh-s2) 0 var(--lh-s5); }
.kn-eyebrow:empty { display: none; }
.hounds-page .kn-main .kn-head h1 { margin: 0; font-family: var(--lh-font-display); font-size: var(--lh-fs-2xl); font-weight: 700; letter-spacing: var(--lh-track-display); line-height: 1; }
.kn-sub { margin: var(--lh-s3) 0 0; font-size: var(--lh-fs-base); color: var(--lh-mute); }
.kn-sub:empty { display: none; }
.kn-money-line { margin: var(--lh-s2) 0 var(--lh-s5); }
.kn-status { min-height: 0; margin: 0; }
.kn-status:empty { display: none; }

/* ---- Tonight ----------------------------------------------------------------------------------------------- */
.kn-tonight { margin: 0 0 var(--lh-s5); padding: var(--lh-s4) var(--lh-s5); border-radius: var(--lh-r-lg); background: var(--lh-soft); }
.kn-tonight--quiet { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--lh-s1) var(--lh-s4); padding: var(--lh-s3) var(--lh-s5); }
.kn-tonight__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--lh-s1) var(--lh-s4); }
.hounds-page .kn-main .kn-tonight__title, .hounds-page .kn-main .kn-camp__title, .hounds-page .kn-main .kn-graveyard__title {
  margin: 0; font: 600 var(--lh-fs-xs)/1.2 var(--lh-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--lh-mute);
}
.kn-tonight__next { margin: 0; font-size: var(--lh-fs-base); font-weight: 600; color: var(--lh-accent); font-variant-numeric: tabular-nums; }
.kn-tonight__line { margin: 0; font-size: var(--lh-fs-base); color: var(--lh-ink2); }
.kn-tonight__list { list-style: none; margin: var(--lh-s2) 0 0; padding: 0; display: grid; }
.kn-tix { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--lh-s3); align-items: center; padding: var(--lh-s3) 0; }
.kn-tix__dog { line-height: 0; border-radius: 10px; }
.kn-tix__main { display: grid; gap: 2px; min-width: 0; }
.kn-tix__pick { font-size: var(--lh-fs-base); color: var(--lh-ink2); overflow-wrap: anywhere; }
.kn-tix__pick strong { color: var(--lh-ink); font-weight: 600; }
.kn-tix__game { font-size: var(--lh-fs-sm); color: var(--lh-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-tix__lock { font-size: var(--lh-fs-sm); font-weight: 600; color: var(--lh-ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kn-tix[data-ahead="false"] .kn-tix__lock { color: var(--lh-mute); font-weight: 500; }
.kn-tonight__more { margin: var(--lh-s1) 0 0; }
@media (max-width: 520px) { .kn-tix { grid-template-columns: auto minmax(0, 1fr); } .kn-tix__lock { grid-column: 2; } }

/* ---- the hound cards --------------------------------------------------------------------------------------- */
.kn-grid { grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); gap: var(--lh-s4); margin: 0 0 var(--lh-s5); }
.kn-card {
  flex-direction: column; gap: var(--lh-s4); padding: var(--lh-s5); border-radius: 22px; background: rgba(255, 255, 255, .04); box-shadow: none;
}
.kn-card:hover { background: rgba(255, 255, 255, .055); transform: none; }
.kn-card__head { display: flex; align-items: center; gap: var(--lh-s4); min-width: 0; }
.kn-card__avatar { width: 104px; height: 104px; border-radius: 26px; }
.kn-card__avatar svg { width: 104px; height: 104px; }
.kn-card:hover .kn-card__avatar { transform: none; }
.kn-card__id { flex: 1; min-width: 0; }
.kn-card__name { font-family: var(--lh-font-display); font-size: 30px; font-weight: 700; letter-spacing: var(--lh-track-display); line-height: 1.05; }
.hounds-page .kn-main .kn-card__name { margin: 0; font-size: 30px; }
.kn-card__tag { margin: var(--lh-s1) 0 0; font-size: var(--lh-fs-base); }
.kn-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lh-s2); margin-top: var(--lh-s3); }
.kn-card__main { display: grid; gap: var(--lh-s3); min-width: 0; }
.kn-card__today { margin: 0; font-size: var(--lh-fs-base); font-weight: 500; color: var(--lh-ink); }
.kn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lh-s3); margin: 0; }
.kn-stat dt { font-size: var(--lh-fs-xs); letter-spacing: .04em; color: var(--lh-mute); }
.kn-stat dd { margin: var(--lh-s1) 0 0; font-size: 28px; white-space: nowrap; }
.kn-card__last { margin: 0; font-size: var(--lh-fs-sm); white-space: normal; }
.kn-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lh-s2); margin-top: var(--lh-s1); }
.kn-act { justify-content: center; height: 44px; padding: 0 var(--lh-s3); border-radius: var(--lh-r-md); font-size: var(--lh-fs-base); font-weight: 600; white-space: nowrap; }
.kn-act--edit { background: rgba(255, 255, 255, .07); }
/* "Analyze" is the card's fifth button, not a rite: it sits on a row of its own under the four, full width, so the 2 x 2 grid above it stays intact at 400px */
.kn-act--wide { grid-column: 1 / -1; }
/* the burial is a different kind of act: a quiet red word, no fill and no border until it is hovered or focused */
.kn-act--danger { background: transparent; box-shadow: none; color: var(--lh-loss); }
.kn-act--danger:hover, .kn-act--danger:focus-visible { background: var(--lh-loss-soft); color: #FFD7DB; }
.kn-act:focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 2px; }
.kn-pill { height: 26px; padding: 0 var(--lh-s3); font-size: var(--lh-fs-sm); }
@media (max-width: 760px) {
  .kn-card { padding: var(--lh-s4); gap: var(--lh-s3); border-radius: 20px; }
  .kn-card__avatar, .kn-card__avatar svg { width: 84px; height: 84px; }
  .hounds-page .kn-main .kn-card__name { font-size: 26px; }
  .kn-stat dd { font-size: 22px; }
  .kn-stats { gap: var(--lh-s2); }
}

/* ---- the empty state and the gate: one button -------------------------------------------------------------- */
.kn-empty { padding: var(--lh-s8) var(--lh-s4); gap: var(--lh-s2); }
.hounds-page .hd-wrap .kn-empty h2 { margin: var(--lh-s4) 0 0; font-family: var(--lh-font-display); font-size: var(--lh-fs-xl); font-weight: 700; }
.kn-empty .hd-lede { margin: 0 0 var(--lh-s4); font-size: var(--lh-fs-md); color: var(--lh-mute); }
.kn-empty__cta { height: 52px; padding: 0 var(--lh-s6); border-radius: var(--lh-r-md); font-size: var(--lh-fs-md); }

/* ---- the quiet cards below the grid ------------------------------------------------------------------------ */
.kn-upgrade, .kn-camp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lh-s3) var(--lh-s5); margin: 0 0 var(--lh-s4); padding: var(--lh-s5); border-radius: var(--lh-r-lg); background: var(--lh-soft); }
.kn-upgrade { background: linear-gradient(135deg, var(--lh-accent-soft), rgba(255, 255, 255, .03) 70%); }
.kn-upgrade__text, .kn-camp__text { flex: 1 1 280px; min-width: 0; }
.hounds-page .kn-main .kn-upgrade__title { margin: 0 0 var(--lh-s1); font-family: var(--lh-font-display); font-size: var(--lh-fs-lg); font-weight: 700; }
.kn-upgrade__sub, .kn-camp__sub { margin: var(--lh-s1) 0 0; font-size: var(--lh-fs-base); color: var(--lh-ink2); }
.kn-upgrade__offer { margin: var(--lh-s2) 0 0; font-size: var(--lh-fs-base); font-weight: 600; color: var(--lh-accent); }
.kn-upgrade__fine { margin: var(--lh-s1) 0 0; max-width: 44em; }
.kn-more { display: flex; flex-wrap: wrap; gap: var(--lh-s1) var(--lh-s5); margin: var(--lh-s4) 0 0; }
.kn-more:empty { display: none; }
.kn-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: var(--lh-mute); font: 500 var(--lh-fs-base)/1 var(--lh-font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kn-link:hover { color: var(--lh-ink); }
.kn-link:focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 2px; }
.kn-graveyard { margin: var(--lh-s5) 0 var(--lh-s4); }
.kn-graveyard .hd-muted { margin: var(--lh-s2) 0 var(--lh-s1); }
.kn-page .hd-foot { border-top-color: var(--lh-line); }
.kn-legal { margin: 0; font-size: var(--lh-fs-sm); color: var(--lh-mute); }
.kn-activity { margin: var(--lh-s5) 0 var(--lh-s4); }
.kn-name.hd-panel, .kn-profile.hd-panel { border: 0; border-radius: var(--lh-r-lg); background: var(--lh-soft); }
/* The name prompt is a filled card: lh.css zeroes .hd-panel padding for the flat panels, so this one sets its own, and its
   field gets the same height and inset as every other input (it was 20px tall and flush against the card edge). */
.hounds-page .kn-name.hd-panel, .hounds-page .kn-profile.hd-panel { padding: var(--lh-s5); }
/* the name prompt is one compact line under the hounds (owner add-on 2026-10-21): a small heading, the field and its buttons, the rules behind a toggle */
.hounds-page .kn-name.hd-panel { padding: var(--lh-s3) var(--lh-s4); margin: var(--lh-s4) 0; }
.kn-nameform__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kn-nameform__head h2 { font-size: var(--lh-fs-md, 17px); margin: 0; }
.kn-nameform__rules summary { cursor: pointer; font-size: 13px; color: var(--lh-mute); }
.kn-nameform__rules p { margin: 6px 0 0; font-size: 13px; }
.hounds-page .kn-nameform__row { margin: 8px 0 0; }
.hounds-page .kn-nameform input.lh-input { min-height: 44px; padding: 0 var(--lh-s3); background: var(--lh-bg); border: 1px solid var(--lh-line); font: inherit; }

.kn-main[data-empty="true"] .kn-money-line, .kn-main[data-empty="true"] .kn-more { display: none; }
/* A member with no hound is asked to create one, not to name an empty kennel first: the name prompt (two buttons, one of
   them solid green) sat above "Create your first hound" (rebuild QA 2026-10-21). It comes back with the first hound. */
.kn-main[data-empty="true"] [data-hook="kennel-name-slot"] { display: none; }

/* ---- 2026-10-21 (owner: "My Kennel needs to feel like home"): the kennel's name big, the hounds big, "Create a hound" secondary. ---- */
.kn-page .kn-eyebrow { margin: 0 0 var(--lh-s1); font-size: var(--lh-fs-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lh-accent, #2FD07A); }
.hounds-page .kn-main .kn-head h1 { font-size: clamp(44px, 9vw, 76px); line-height: .98; overflow-wrap: anywhere; }
.kn-page .kn-sub { font-size: var(--lh-fs-md); }
.kn-page .kn-head { margin: var(--lh-s5) 0 var(--lh-s6); }
.kn-page .kn-grid { grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: var(--lh-s4); }
.kn-page .kn-card { padding: var(--lh-s5); gap: var(--lh-s5); }
.kn-page .kn-card__avatar { width: 112px; height: 112px; }
.kn-page .kn-card__avatar svg, .kn-page .kn-card__avatar .dk-badge { width: 112px; height: 112px; }
.kn-page .kn-card__name { font-size: 24px; font-family: var(--lh-font-display); letter-spacing: var(--lh-track-display); }
.kn-page .kn-stat dd { font-size: 24px; }
@media (max-width: 520px) { .kn-page .kn-card { flex-direction: column; } .kn-page .kn-card__avatar { width: 96px; height: 96px; } .kn-page .kn-card__avatar svg, .kn-page .kn-card__avatar .dk-badge { width: 96px; height: 96px; } }

/* ======================================================================================================================
 * THE HOUND SHEET (owner, 2026-10-26: "looks like trash"). One redesign of the studio drawer that every hound opens in (a member's own,
 * a house copy, Gematria, the Learner): a hero with the FULL name, one status line and the ticket counts; the destructive action in a
 * menu behind the three-dot button; a sticky segmented tab bar that scrolls sideways and keeps the chosen tab in view; a Record tab with
 * a clean 3 + 2 grid; the Rules tab leading with the current rule. Tokens only (css/lh.css); nothing here can widen the page.
 * ==================================================================================================================== */
.kn-studio { width: min(640px, 100vw); max-width: 100vw; }
.kn-studio__head { display: block; padding: var(--lh-s2) var(--lh-s4) var(--lh-s4); flex: none; }
.kn-studio__top { display: flex; align-items: center; justify-content: flex-end; gap: var(--lh-s2); min-height: 36px; }
.kn-studio__top .lh-btn { height: 32px; padding: 0 var(--lh-s3); font-size: var(--lh-fs-sm); }
.kn-studio__close, .kn-studio__more { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--lh-soft);
  color: var(--lh-ink); font: 400 20px/1 var(--lh-font-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kn-studio__more { font-size: 22px; padding-bottom: 6px; }
.kn-studio__more[hidden] { display: none; }
.kn-studio__close:hover, .kn-studio__more:hover { background: var(--lh-soft-2); }
.kn-studio__close:focus-visible, .kn-studio__more:focus-visible, .kn-studio__menuitem:focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 2px; }
.kn-studio__menuwrap { position: relative; }
.kn-studio__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; min-width: 230px; padding: var(--lh-s1); border-radius: var(--lh-r-md);
  background: var(--lh-bg-2); box-shadow: var(--lh-e3), 0 0 0 1px var(--lh-line-2); }
.kn-studio__menu[hidden], .kn-studio__menuitem[hidden] { display: none; }
.kn-studio__menuitem { display: block; width: 100%; min-height: 44px; padding: 0 var(--lh-s3); border: 0; border-radius: var(--lh-r-sm); background: none; text-align: left;
  color: var(--lh-loss); font: 600 var(--lh-fs-base)/1 var(--lh-font-text); cursor: pointer; }
.kn-studio__menuitem:hover { background: var(--lh-loss-soft); color: #FFD7DB; }

.kn-studio__hero { display: flex; align-items: flex-start; gap: var(--lh-s4); padding-top: var(--lh-s1); min-width: 0; }
.kn-studio__avatar { flex: none; line-height: 0; }
.kn-studio__avatar svg, .kn-studio__avatar .dk-badge { width: 80px; height: 80px; }
.kn-studio__who { flex: 1 1 0; min-width: 0; }
/* the FULL name over as many lines as it needs, and the whole record line: never an ellipsis */
.hounds-page .kn-studio .kn-studio__who h2 { margin: 0; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; hyphens: auto;
  font-family: var(--lh-font-display); font-size: 32px; font-weight: 700; line-height: 1.02; letter-spacing: var(--lh-track-display); }
.kn-studio__chips { display: flex; flex-wrap: wrap; gap: var(--lh-s1) var(--lh-s2); margin: var(--lh-s2) 0 0; }
.kn-studio__chips:empty { display: none; }
.kn-chip { display: inline-flex; align-items: center; max-width: 100%; height: 24px; padding: 0 var(--lh-s3); border-radius: var(--lh-r-pill); background: var(--lh-soft);
  color: var(--lh-ink2); font-size: var(--lh-fs-xs); font-weight: 600; letter-spacing: .02em; overflow-wrap: anywhere; }
.kn-studio__status { display: block; margin: var(--lh-s2) 0 0; font-size: var(--lh-fs-base); color: var(--lh-ink2); min-width: 0; }
.kn-studio__status:empty { display: none; }
.kn-studio__status strong { color: var(--lh-ink); font-weight: 600; }
.kn-studio__dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: var(--lh-accent); box-shadow: 0 0 0 3px var(--lh-accent-soft); }
.kn-studio__status[data-status="idle"] .kn-studio__dot { background: var(--lh-pending); box-shadow: 0 0 0 3px var(--lh-pending-soft); }
.kn-studio__status[data-status="retired"] .kn-studio__dot { background: var(--lh-faint); box-shadow: none; }
.kn-studio__who .kn-studio__sub { margin: var(--lh-s2) 0 0; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
  font-size: var(--lh-fs-sm); color: var(--lh-mute); }

/* the tab bar: a segmented control that sticks and scrolls sideways inside itself */
.lh-tabs--studio { position: sticky; top: 0; z-index: 4; flex: none; display: flex; gap: 2px; margin: 0 var(--lh-s4); padding: 4px; border-radius: var(--lh-r-md);
  background: var(--lh-soft); box-shadow: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; max-width: calc(100% - 2 * var(--lh-s4)); }
.lh-tabs--studio [role="tab"] { height: 38px; padding: 0 var(--lh-s4); border-radius: var(--lh-r-sm); font-size: var(--lh-fs-base); scroll-snap-align: center; white-space: nowrap; }
.lh-tabs--studio [role="tab"]::after { display: none; }
.lh-tabs--studio [role="tab"][aria-selected="true"] { background: var(--lh-soft-2); box-shadow: inset 0 0 0 1px var(--lh-line-2); color: var(--lh-ink); font-weight: 600; }
.lh-tabs--studio [role="tab"]:focus-visible { outline: 2px solid var(--lh-accent); outline-offset: -2px; }
.kn-studio__body { padding: var(--lh-s5) var(--lh-s4) 40px; min-width: 0; overflow-x: hidden; }

/* a long, unbroken word or example can never push the sheet wider than the phone */
.kn-studio__body p, .kn-studio__body li, .kn-studio__body h3, .kn-studio__body button { overflow-wrap: anywhere; }
.kn-studio .bd-step [data-hook="example-chips"] { flex-wrap: wrap; overflow-x: visible; }
.hounds-page .bd-chips .bd-chip.bd-chip--example { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; line-height: 1.35; border-radius: var(--lh-r-md); padding: var(--lh-s2) var(--lh-s3); }
.hounds-page .bd-step [data-hook="example-chips"] { flex-wrap: wrap; overflow-x: visible; }

/* RECORD: the open tickets and the settled ones, side by side, then a 3 + 2 grid of equal cards */
.kn-rec__counts { display: inline-flex; align-items: center; gap: var(--lh-s1); margin: 0 0 var(--lh-s4); padding: var(--lh-s2) var(--lh-s4); border-radius: var(--lh-r-pill);
  background: var(--lh-soft); font-size: var(--lh-fs-base); font-weight: 600; color: var(--lh-ink); }
.kn-rec__counts[data-open="0"] { color: var(--lh-ink2); }
.kn-stats--rec { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--lh-s2); margin: 0; }
.kn-stats--rec .kn-stat { grid-column: span 2; min-width: 0; padding: var(--lh-s3); border-radius: var(--lh-r-md); background: var(--lh-soft); }
.kn-stats--rec .kn-stat:nth-child(n + 4) { grid-column: span 3; }
.kn-stats--rec .kn-stat dt { font-size: var(--lh-fs-xs); letter-spacing: .04em; color: var(--lh-mute); }
.kn-stats--rec .kn-stat dd { margin: var(--lh-s1) 0 0; font-size: 26px; line-height: 1.05; white-space: normal; overflow-wrap: anywhere; }
.kn-spark { margin: var(--lh-s2) 0 0; padding: var(--lh-s3) var(--lh-s4); border-radius: var(--lh-r-md); background: var(--lh-soft); }
.kn-spark svg { display: block; width: 100%; height: auto; max-height: 64px; }
.kn-spark figcaption { margin: var(--lh-s1) 0 0; }
.kn-rec__note { margin: var(--lh-s3) 0 var(--lh-s5); color: var(--lh-mute); }
.kn-rec__more { margin: 0 0 var(--lh-s4); }
.kn-rec__more .lh-btn { min-height: 44px; }
.hounds-page .kn-rec__h { margin: var(--lh-s5) 0 var(--lh-s2); font-family: var(--lh-font-display); font-size: var(--lh-fs-lg); font-weight: 700; text-transform: none; letter-spacing: var(--lh-track-display); color: var(--lh-ink); }
/* "Grading 18 games..." is a quiet inline status here, not a dashed chip */
.kn-studio .hd-graded { margin: 0 0 var(--lh-s3); gap: var(--lh-s2); font-size: var(--lh-fs-sm); color: var(--lh-mute); }
.kn-studio .hd-graded__pill { padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--lh-fs-sm); font-weight: 500; letter-spacing: 0; color: var(--lh-pending); }
.kn-studio .hd-graded__pill::after { content: " \00b7"; color: var(--lh-faint); }
/* the sheet is never wider than 640px, so a ticket is always the stacked row, never the five-column grid that squeezes "Game / pick" to a letter wide */
.kn-studio .hd-tickets__head { display: none; }
.kn-studio .hd-ticket { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bet res" "when price" "rec rec"; gap: var(--lh-s1) var(--lh-s3); padding: var(--lh-s3) var(--lh-s4); }
.kn-studio .hd-ticket__bet { grid-area: bet; }
.kn-studio .hd-ticket__res { grid-area: res; flex-direction: column; align-items: flex-end; gap: 2px; }
.kn-studio .hd-ticket__when { grid-area: when; grid-auto-flow: column; justify-content: start; gap: var(--lh-s2); align-items: baseline; }
.kn-studio .hd-ticket__price { grid-area: price; justify-self: end; }
.kn-studio .hd-ticket__rec { grid-area: rec; }
.kn-studio .hd-tickets { border: 0; border-radius: var(--lh-r-md); background: var(--lh-soft); overflow: hidden; }

/* RULES: the current rule first, big, with the editor behind "Edit rules" */
.kn-rule { margin: 0 0 var(--lh-s5); padding: var(--lh-s5); border-radius: var(--lh-r-lg); background: var(--lh-soft); box-shadow: var(--lh-e1); }
.kn-rule[hidden] { display: none; }
.kn-rule__eyebrow { margin: 0; font-size: var(--lh-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lh-accent); }
.hounds-page .kn-rule__title { margin: var(--lh-s1) 0 var(--lh-s3); font-family: var(--lh-font-display); font-size: var(--lh-fs-lg); font-weight: 700; letter-spacing: var(--lh-track-display); color: var(--lh-mute); }
.kn-rule__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--lh-s3); }
.kn-rule__list li { font-size: var(--lh-fs-lg); line-height: 1.3; font-weight: 500; color: var(--lh-ink); }
.kn-rule__fixed, .kn-rule__note { margin: var(--lh-s3) 0 0; color: var(--lh-mute); }
.kn-rule__actions { margin: var(--lh-s4) 0 0; }
.kn-rule__edit { min-height: 44px; padding: 0 var(--lh-s5); }

/* UNLEASH, state-aware: what a hound that is already going shows */
.ul-state { margin: 0 0 var(--lh-s4); padding: var(--lh-s4); border-radius: var(--lh-r-md); background: var(--lh-soft); }
.ul-state__head { display: block; margin: 0; font-size: var(--lh-fs-md); color: var(--lh-ink2); }
.ul-state__head strong { color: var(--lh-ink); font-weight: 600; }
.ul-state__counts { margin: var(--lh-s2) 0 0; font-size: var(--lh-fs-base); color: var(--lh-ink2); }
.ul-now { margin: var(--lh-s4) 0; }

@media (max-width: 760px) {
  .kn-studio__head { padding: var(--lh-s2) var(--lh-s3) var(--lh-s3); }
  .kn-studio__top .lh-btn { display: none; }
  .hounds-page .kn-studio .kn-studio__who h2 { font-size: 28px; }
  .kn-studio__avatar svg, .kn-studio__avatar .dk-badge { width: 72px; height: 72px; }
  .lh-tabs--studio { margin: 0 var(--lh-s3); max-width: calc(100% - 2 * var(--lh-s3)); }
  .kn-studio__body { padding: var(--lh-s4) var(--lh-s3) 90px; }
  .kn-stats--rec .kn-stat dd { font-size: 24px; }
  .kn-rule { padding: var(--lh-s4); }
  .kn-rule__list li { font-size: 20px; }
}

/* the prompt after a settled loss in the studio's Record tab (kennel.js lossPrompt): Ask why, or Retune */
.kn-lossnext { margin: 0 0 var(--lh-s3, 12px); padding: var(--lh-s3, 12px) var(--lh-s4, 16px); border-radius: var(--lh-r-lg, 14px); background: var(--lh-soft, rgba(255, 255, 255, .05)); }
.kn-lossnext__text { margin: 0 0 var(--lh-s2, 8px); font-weight: 600; }
.kn-lossnext__row { display: flex; flex-wrap: wrap; gap: var(--lh-s2, 8px); }

/* ======================================================================================================================
 * THE STUDIO, REVAMPED (owner, 2026-10-29: "the whole hound menu ... needs an entire revamp functionally and for UI ... minimizing the
 * total number of forked options and menus"). A header with Unleash, Train and a ... menu, three tabs (Overview, Rules, Coach), the hound's
 * picture as the way into its Look. Phone first (about 400px): 16px gutters, three tabs that fit with no sideways strip, 44px touch targets.
 * ==================================================================================================================== */

/* the hound's picture is a button: tap it for the Look editor */
.kn-studio__avatar { position: relative; padding: 0; border: 0; border-radius: 22px; background: none; color: inherit; cursor: pointer; }
.kn-studio__avatar[disabled] { cursor: default; }
.kn-studio__avatar:focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 3px; }
.kn-studio__avatar-tag { position: absolute; right: -2px; bottom: -2px; padding: 2px 8px; border-radius: var(--lh-r-pill); background: var(--lh-bg-2);
  box-shadow: 0 0 0 1px var(--lh-line-2); color: var(--lh-ink2); font: 600 var(--lh-fs-xs)/1.4 var(--lh-font-text); letter-spacing: .02em; }
.kn-studio__avatar:hover .kn-studio__avatar-tag { color: var(--lh-ink); }

/* the buttons row: Unleash (the one accent), Train, and the ... menu; they wrap to a second line before they squeeze */
.kn-studio__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lh-s2); margin: var(--lh-s4) 0 0; }
.kn-studio__actions[hidden] { display: none; }
.kn-studio__act { flex: 1 1 120px; min-height: 44px; padding: 0 var(--lh-s4); justify-content: center; font-size: var(--lh-fs-base); font-weight: 600; }
.kn-studio__actions .kn-studio__more { width: 44px; height: 44px; font-size: 24px; }
.kn-studio__actions .kn-studio__menu { right: 0; left: auto; top: calc(100% + 6px); }
.kn-studio__menuitem--plain { color: var(--lh-ink); }
.kn-studio__menuitem--plain:hover { background: var(--lh-soft-2); color: var(--lh-ink); }
.kn-studio__top { justify-content: flex-end; }

/* three tabs, equal width, never a sideways strip */
.lh-tabs--studio { overflow: visible; scroll-snap-type: none; }
.lh-tabs--studio [role="tab"] { flex: 1 1 0; min-width: 0; height: 44px; padding: 0 var(--lh-s2); text-align: center; }

/* OVERVIEW and COACH blocks */
[data-hook="studio-fire"]:empty, [data-hook="studio-record"]:empty, [data-hook="studio-lessons"]:empty, [data-hook="studio-versions"]:empty { display: none; }
[data-hook="studio-fire"] { margin: 0 0 var(--lh-s5); }
.kn-analyze { margin: 0 0 var(--lh-s5); }
.kn-train { margin: var(--lh-s5) 0 0; padding: var(--lh-s4); border-radius: var(--lh-r-lg); background: var(--lh-soft); }
.kn-train .kn-rec__h { margin-top: 0; }
.kn-train__line { margin: 0 0 var(--lh-s3); }
.kn-train__btn { min-height: 44px; padding: 0 var(--lh-s5); }
[data-hook="studio-versions"] { margin: var(--lh-s5) 0 0; }

/* THE LOOK EDITOR: a sheet over the drawer */
.kn-look { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; background: var(--lh-bg-2, #10141A); }
.kn-look[hidden] { display: none; }
.kn-look__head { display: flex; align-items: center; justify-content: space-between; gap: var(--lh-s3); padding: var(--lh-s3) var(--lh-s4); flex: none; }
.hounds-page .kn-look .kn-look__title { margin: 0; font-family: var(--lh-font-display); font-size: var(--lh-fs-lg); font-weight: 700; letter-spacing: var(--lh-track-display); }
.kn-look__done { min-height: 44px; padding: 0 var(--lh-s5); }
.kn-look > [data-hook="studio-look"] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--lh-s4) 40px; overscroll-behavior: contain; }

/* RULES: one page. The sports row, the quick row, the rule in words, the "Past 14 days" line, the folds, the Save bar */
.bd-houndsports { margin: 0 0 var(--lh-s4); }
.bd-houndsports[hidden], .bd-quick-row[hidden] { display: none; }
.bd-houndsports__label { margin: 0 0 var(--lh-s2); }
.bd-houndsports__hint { margin: var(--lh-s2) 0 0; }
.hounds-page .bd-step .bd-chips.bd-houndchips { max-height: none; overflow: visible; margin: 0; }
.hounds-page .bd-houndchips .bd-chip { min-height: 44px; display: inline-flex; align-items: center; gap: var(--lh-s2); padding: 0 var(--lh-s4); }
/* a checkbox chip: filled when every rule bets the sport, half-filled (a dashed ring and a partial fill) when only some rules do */
.hounds-page .bd-houndchips .bd-chip[aria-checked="true"] { background: rgba(47, 208, 122, .16); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px var(--lh-accent); }
.hounds-page .bd-houndchips .bd-chip[aria-checked="mixed"] { background: linear-gradient(90deg, rgba(47, 208, 122, .16) 50%, var(--lh-soft) 50%); color: #fff; box-shadow: inset 0 0 0 1px var(--lh-accent); border-style: dashed; }
.hounds-page .bd-houndchips .bd-chip[aria-checked="true"]::before { content: "\2713"; font-weight: 700; color: var(--lh-accent); }
.hounds-page .bd-houndchips .bd-chip[aria-checked="mixed"]::before { content: "\2212"; font-weight: 700; color: var(--lh-accent); }
.hounds-page .bd-houndchips .bd-chip[disabled] { opacity: .45; }
.hounds-page .bd-houndchips .bd-chip[aria-checked="true"][disabled] { opacity: .8; }

.bd-quick-row { display: grid; gap: var(--lh-s4); margin: 0 0 var(--lh-s5); min-width: 0; }
.hounds-page .bd-quick-row .bd-chips { flex-wrap: wrap; overflow-x: visible; }
.bd-quick-row .bd-chip { min-height: 44px; }
.bd-quick-row select, .bd-quick-row input[type="number"] { min-height: 44px; }

/* the "Past 14 days with these rules" line: a quiet card that says it is a rehearsal */
.bd-livetest { margin: var(--lh-s4) 0; padding: var(--lh-s3) var(--lh-s4); border-radius: var(--lh-r-lg); background: var(--lh-soft); min-width: 0; }
.bd-livetest .bd-hind__line { margin: var(--lh-s1) 0; font-size: var(--lh-fs-md); font-weight: 600; line-height: 1.35; }
.bd-livetest[data-state="pending"] .bd-hind__line { color: var(--lh-mute); }
.bd-livetest[data-outcome="empty"] .bd-hind__line { color: var(--lh-ink2); font-weight: 500; }
.bd-livetest .dk-chip--hind { margin-bottom: var(--lh-s1); }
.kn-fulltest { margin: var(--lh-s3) 0 0; }
.kn-fulltest__toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--lh-ink2); font: 600 var(--lh-fs-base)/1 var(--lh-font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kn-fulltest__toggle:hover { color: var(--lh-ink); }
.kn-fulltest__toggle:focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 2px; }
.kn-fulltest__toggle::after { content: "\25BE"; margin-left: var(--lh-s2); }
.kn-fulltest__toggle[aria-expanded="true"]::after { content: "\25B4"; }
.kn-fulltest__panel[hidden] { display: none; }
.kn-fulltest__note { margin: 0 0 var(--lh-s3); }

/* "Advanced: edit each rule": the cards, folded */
.bd-fold { margin: var(--lh-s4) 0; }
.bd-fold > summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--lh-s4); border-radius: var(--lh-r-md); background: var(--lh-soft); color: var(--lh-ink); font: 600 var(--lh-fs-base)/1 var(--lh-font-text); cursor: pointer; list-style: none; }
.bd-fold > summary::-webkit-details-marker { display: none; }
.bd-fold > summary::after { content: "\25BE"; margin-left: auto; color: var(--lh-mute); }
.bd-fold[open] > summary::after { content: "\25B4"; }
.bd-fold > summary:focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 2px; }
.bd-fold[open] > summary { margin-bottom: var(--lh-s4); }

/* the live preview dock is no longer the sticky top bar of the drawer: the Rules page carries its own live line */
.kn-studio .bd-embedded > .bd-dock { position: static; margin: var(--lh-s4) 0; }

/* THE SAVE BAR: always in reach at the foot of the drawer while the page is long */
.bd-savebar { position: sticky; bottom: 0; z-index: 5; margin: var(--lh-s5) calc(-1 * var(--lh-s4)) 0; padding: var(--lh-s3) var(--lh-s4) calc(var(--lh-s3) + env(safe-area-inset-bottom, 0px));
  background: var(--lh-bg-2, #10141A); box-shadow: 0 -1px 0 var(--lh-line-2); }
.bd-savebar .bd-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lh-s2) var(--lh-s3); margin: 0; }
.bd-savebar .bd-save .btn { min-height: 44px; }
.bd-savebar .bd-save .btn--primary { flex: 1 1 180px; }

@media (max-width: 760px) {
  /* the old phone rule hid every header link; the Open page link stays hidden, the buttons row does not */
  .kn-studio__actions { margin-top: var(--lh-s3); }
  .kn-studio__head .kn-studio__actions .lh-btn { display: inline-flex; }
  .kn-studio__act { flex-basis: 0; }
  .bd-savebar { margin-left: calc(-1 * var(--lh-s3)); margin-right: calc(-1 * var(--lh-s3)); padding-left: var(--lh-s3); padding-right: var(--lh-s3); }
}

@media (prefers-reduced-motion: no-preference) {
  .kn-look:not([hidden]) { animation: kn-look-in var(--lh-t-base) var(--lh-ease, ease) both; }
  .bd-livetest[data-state="pending"] .bd-hind__line { animation: kn-pulse 1.4s ease-in-out infinite; }
}
@keyframes kn-look-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }