/* Streak (Page Lemon app template): Calle Uno Spanish practice club. Deep teal, warm paper and a marigold streak.
   The member pages use the shared app kit (kit.css); this file sets the brand tokens, the public page and a few
   practice pieces (week strip, goal bar, activities). Colours: edit the tokens below. */
:root {
  --k-brand: #0b5d57; --k-brand-ink: #ffffff; --k-brand-soft: #d9ece7; --k-hero: #12302e; --k-hero-ink: #fff7ea; --k-gold: #f2a516;
  --k-bg: #f2ecdf; --k-surface: #fffdf7; --k-surface-2: #ebe3d1; --k-line: rgba(18, 48, 46, .13); --k-line-strong: rgba(18, 48, 46, .24);
  --k-text: #14302d; --k-muted: #4f625d; --st-ink: #3b2502; --st-stamp: #f6b02a; --st-note: #fff1c4; --st-note-ink: #4a3500;
  --r-display: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --k-brand: #3ec7b6; --k-brand-ink: #04211e; --k-brand-soft: rgba(62, 199, 182, .16); --k-hero: #143b38; --k-bg: #0c1312; --k-surface: #151e1d; --k-surface-2: #1f2a28; --k-text: #f3efe6; --k-muted: #a4b3ae; --k-line: rgba(255, 255, 255, .11); --k-line-strong: rgba(255, 255, 255, .2); --st-note: #3a3010; --st-note-ink: #ffe9a8; }
}

/* ---------- member pages: gym pieces ---------- */
.r-plan-tag { display: inline-flex; align-items: center; gap: 6px; }
.r-stamp-note { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-top: var(--k-3); font-size: var(--k-t-sub); }
.r-stamp-note b { font-variant-numeric: tabular-nums; }
.k-hero-card .k-dots li.k-free::before { content: "Guest"; font-size: .5625rem; }
.k-dots-light li.k-free::before { content: "Guest"; font-size: .5625rem; }
.r-next { display: grid; gap: var(--k-3); }
.r-next .k-row { padding: 0; min-height: 0; }
.r-when { display: grid; place-items: center; width: 56px; height: 60px; flex: none; border-radius: 14px; background: var(--k-hero); color: var(--k-hero-ink); line-height: 1.1; text-align: center; }
.r-when b { font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.r-when span { font-size: .6875rem; opacity: .75; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.r-reply { display: block; margin-top: var(--k-3); padding: 10px 12px; border-radius: 12px; background: var(--k-surface-2); color: var(--k-text); font-size: var(--k-t-foot); font-style: normal; quotes: none; line-height: 1.4; }
.r-reply:empty { display: none; }
.r-reply::before { content: "Lucía · "; font-weight: 700; color: var(--k-muted); }
.r-booking { padding: var(--k-4) var(--k-4) var(--k-4); }
.r-booking + .r-booking { border-top: 1px solid var(--k-line); }
.r-booking-top { display: flex; gap: 14px; align-items: center; }
.r-booking .k-steps { margin-top: var(--k-3); }
.r-booking[data-k-state="off"] .k-steps, .r-booking[data-k-state="active"] .k-steps { display: none; }
.r-past .k-row-title { font-size: .9375rem; }
.r-info { display: flex; gap: 12px; align-items: flex-start; font-size: var(--k-t-foot); color: var(--k-muted); line-height: 1.45; }
.r-info .k-i { color: var(--k-brand); width: 20px; height: 20px; margin-top: 1px; }
.r-info b { color: var(--k-text); }
.r-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-3); }

/* Timetable (app/book.html, index.html): one section per day, today first (app.js). */
.r-days { display: grid; gap: var(--k-5); grid-template-columns: minmax(0, 1fr); }
.r-day h3 { display: flex; align-items: baseline; gap: 8px; font-size: 1.0625rem; margin: 0 0 var(--k-2) var(--k-1); }
.r-day h3 span { color: var(--k-muted); font-weight: 500; font-size: var(--k-t-sub); }
.r-day[data-today] h3 { color: var(--k-brand); }
.r-time { width: 48px; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--k-t-sub); }
.r-day .k-row + .k-row::before { left: 124px; }
.r-day .k-row[aria-current="true"] { background: var(--k-brand-soft); }
.r-day .k-row[data-past] { opacity: .45; }
.r-sum-art { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; flex: none; }
.r-sum-main { min-width: 0; }
.r-sum-main b { display: block; font-size: 1.125rem; }
.r-sum-main span { display: block; color: var(--k-muted); font-size: var(--k-t-foot); }

/* ---------- public page ---------- */
.pub .k-main { padding-bottom: 48px; }
.pub-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--k-bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); }
.pub-top-in { max-width: var(--k-max); margin: 0 auto; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 8px 16px; }
.pub-top nav { display: none; gap: 22px; margin-left: auto; font-size: var(--k-t-sub); font-weight: 600; }
.pub-top nav a { text-decoration: none; color: var(--k-muted); }
.pub-top nav a:hover { color: var(--k-text); }
.pub-top .k-btn { margin-left: auto; }
@media (min-width: 900px) { .pub-top nav { display: flex; } .pub-top nav + .k-btn { margin-left: 8px; } }
.pub-wrap { max-width: var(--k-max); margin: 0 auto; padding: 0 16px; }
.pub-hero { display: grid; gap: var(--k-5); padding: var(--k-4) 0 var(--k-6); }
.pub-hero h1 { font-family: var(--r-display); font-size: clamp(2.5rem, 1.6rem + 4.5vw, 4.6rem); font-weight: 800; letter-spacing: -.01em; line-height: .98; text-transform: uppercase; }
.pub-hero h1 em { font-style: normal; color: var(--k-brand); }
.pub-hero .k-lead { color: var(--k-muted); font-size: 1.125rem; margin-top: var(--k-4); max-width: 46ch; }
.pub-hero .k-btn-row { margin-top: var(--k-5); }
.pub-hero-art { position: relative; border-radius: var(--k-r-xl); overflow: hidden; aspect-ratio: 4 / 3.4; background: var(--k-hero); box-shadow: var(--k-shadow-2); }
.pub-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.pub-hero-art figcaption { position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.pub-hero-art figcaption span { background: rgba(17, 18, 20, .78); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: var(--k-t-foot); font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (min-width: 1024px) { .pub-hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; padding: var(--k-6) 0 var(--k-7); } .pub-hero-art { aspect-ratio: 4 / 4.2; } }
.pub-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-3); margin-top: var(--k-5); }
.pub-facts div { border-left: 3px solid var(--k-brand); padding-left: 10px; }
.pub-facts b { display: block; font-family: var(--r-display); font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.pub-facts span { color: var(--k-muted); font-size: var(--k-t-foot); }
.pub-sec { padding: var(--k-6) 0; }
.pub-sec .k-section-head { margin-bottom: var(--k-5); display: block; }
.pub-sec h2 { font-family: var(--r-display); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.pub-sec .k-section-head p { margin-top: 6px; max-width: 60ch; }
.pub-steps { display: grid; gap: var(--k-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pub-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pub-step { display: grid; gap: var(--k-3); align-content: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.pub-step .k-tile { width: 48px; height: 48px; border-radius: 14px; }
.pub-step h3 { font-size: 1.1875rem; }
.pub-step p { color: var(--k-muted); font-size: var(--k-t-sub); }
.pub-phone { grid-template-columns: minmax(0, 1fr); margin-top: var(--k-2); border-radius: 22px; background: var(--k-bg); padding: 12px; display: grid; gap: 8px; box-shadow: inset 0 0 0 1px var(--k-line); }
.pub-phone .k-row { min-height: 52px; padding: 10px 12px; border-radius: 14px; background: var(--k-surface); }
.pub-phone .k-row + .k-row::before { display: none; }
.pub-mini-card { border-radius: 16px; padding: 14px; background: var(--k-hero); color: var(--k-hero-ink); }
.pub-mini-card .k-dots { margin-top: 10px; gap: 5px; }
.pub-mini-card p { font-size: var(--k-t-foot); opacity: .8; }
.pub-mini-card b { font-size: 1.5rem; font-weight: 800; }
.pub-tt .r-days { gap: var(--k-4); }
@media (min-width: 720px) { .pub-tt .r-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pub-tt .r-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pub-tt .r-day .k-row + .k-row::before { left: 16px; }
.pub-coaches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-3); }
@media (min-width: 900px) { .pub-coaches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pub-coach { display: grid; gap: 6px; }
.pub-coach .k-avatar { width: 52px; height: 52px; font-size: 1.125rem; background: var(--k-brand-soft); color: var(--k-brand); }
.pub-coach b { font-size: 1rem; }
.pub-coach span { color: var(--k-muted); font-size: var(--k-t-foot); line-height: 1.35; }
.pub-visit { display: grid; gap: var(--k-4); }
@media (min-width: 900px) { .pub-visit { grid-template-columns: 1fr 1fr; } }
.pub-hours { width: 100%; border-collapse: collapse; font-size: var(--k-t-sub); }
.pub-hours th { text-align: left; font-weight: 500; color: var(--k-muted); padding: 8px 0; }
.pub-hours td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; padding: 8px 0; }
.pub-hours tr + tr th, .pub-hours tr + tr td { border-top: 1px solid var(--k-line); }
.pub-cta { margin: var(--k-6) 0 0; padding: var(--k-6) var(--k-5); border-radius: var(--k-r-xl); background: var(--k-hero); color: var(--k-hero-ink); text-align: center; display: grid; gap: var(--k-3); justify-items: center; }
.pub-cta h2 { font-family: var(--r-display); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); text-transform: uppercase; }
.pub-cta p { opacity: .8; max-width: 44ch; }
.pub-foot { max-width: var(--k-max); margin: 0 auto; padding: var(--k-5) 16px var(--k-6); color: var(--k-muted); font-size: var(--k-t-foot); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pub-foot a { color: var(--k-muted); }

/* Privacy notice */
.legal { max-width: 720px; margin: 0 auto; padding: var(--k-4) 16px var(--k-7); }
.legal h1 { font-size: var(--k-t-1); font-weight: 800; margin: var(--k-4) 0; }
.legal h2 { font-size: var(--k-t-3); margin: var(--k-6) 0 var(--k-2); }
.legal p, .legal li { color: var(--k-text); font-size: var(--k-t-sub); line-height: 1.6; }
.legal p + p { margin-top: var(--k-3); }
.legal .blank { background: var(--k-brand-soft); color: var(--k-text); padding: 0 4px; border-radius: 4px; }

/* Signed-out gate on inner screens, profile card, perks on the dark card (candidates for the kit). */
.k-gate { max-width: 520px; margin: var(--k-6) auto 0; display: grid; justify-items: center; gap: var(--k-3); }
.k-gate h1 { font-size: var(--k-t-2); font-weight: 800; color: var(--k-text); }
.k-gate .k-empty-art { margin-bottom: 0; }
.k-gate .k-btn { margin-top: var(--k-2); }
.k-list > p.k-empty { padding: var(--k-5); font-size: var(--k-t-sub); }
.r-profile { display: flex; align-items: center; gap: var(--k-4); }
.r-profile b { display: block; font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: 6px; }
.r-hero-perks { margin-top: var(--k-4); }
.r-hero-perks li { font-size: var(--k-t-sub); align-items: flex-start; }
.r-hero-perks .k-i { color: var(--k-gold); width: 20px; height: 20px; }
.r-past .k-row .k-btn { flex: none; }
@media (max-width: 1023px) { .k-split > * + * { margin-top: var(--k-5); } }
.k-card .k-stack-s p { color: var(--k-muted); font-size: var(--k-t-sub); }
.r-past .k-row-end { flex-direction: row; align-items: center; gap: 4px; }
.r-past .k-row-end .k-btn { padding: 0 8px; min-height: 44px; }
.r-mini { margin-top: 6px; height: 22px; font-size: .6875rem; }
@media (max-width: 1023px) { .r-acct { display: flex; flex-direction: column; } .r-acct > * + * { margin-top: 0; } .r-acct > .k-stack { margin-top: var(--k-5); } .r-acct > .k-aside { order: -1; } }
.r-acct { margin-top: var(--k-5); }
@media (min-width: 1024px) { .k-split .k-actions .k-action { flex-direction: column; justify-content: center; text-align: center; padding: 16px 8px; } }


/* Practice pieces */
.k-head h1, .k-welcome h1, .k-hero-card .k-big, .pub-hero h1 { font-family: var(--r-display); }
.pub-hero h1 { text-transform: none; font-weight: 800; letter-spacing: -.02em; line-height: 1.02; }
.pub-sec h2, .pub-cta h2 { text-transform: none; font-family: var(--r-display); }
.st-week { list-style: none; margin: var(--k-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.st-week li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: var(--k-t-foot); font-weight: 700; color: color-mix(in srgb, var(--k-hero-ink) 70%, transparent); }
.st-week li.on { background: var(--k-gold); color: #3b2502; }
.st-week li.today { box-shadow: inset 0 0 0 2px var(--k-hero-ink); }
.st-week li.later { opacity: .5; }
.st-mini .st-week li { background: var(--k-surface-2); color: var(--k-muted); }
.st-mini .st-week li.on { background: var(--k-gold); color: #3b2502; }
.st-mini .st-week li.today { box-shadow: inset 0 0 0 2px var(--k-brand); }
.st-goal { margin-top: var(--k-4); }
.st-goal .k-bar { margin-top: 8px; }
.st-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .st-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-act { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px; border-radius: var(--k-r-m); border: 0; background: var(--k-surface-2); color: var(--k-text); font: inherit; cursor: pointer; min-height: 60px; }
.st-act img { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; }
.st-act b { font-size: var(--k-t-sub); }
.st-act span { font-size: var(--k-t-cap); color: var(--k-muted); }
.st-act[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--k-brand); background: var(--k-brand-soft); }
.st-hidden-select { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; }
.st-mins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.st-mins .k-chip { justify-content: center; }
.st-mins .k-chip { border: 0; font: inherit; font-weight: 600; cursor: pointer; color: var(--k-text); }
.st-mins .k-chip[aria-pressed="true"] { background: var(--k-text); color: var(--k-bg); }
.st-q:empty { display: none; }
.st-q { margin-top: var(--k-3); font-size: var(--k-t-foot); color: var(--k-muted); }
.st-q::before { content: "You asked: "; font-weight: 700; }
.st-hw { margin-top: var(--k-3); width: 96px; height: 128px; object-fit: cover; border-radius: 10px; box-shadow: var(--k-shadow-1); }
.st-rows .k-row { padding: 10px 0; min-height: 0; }
.st-rows .k-row + .k-row::before { left: 0; }
.st-mix .k-row { min-height: 52px; }
.m-teacher { display: flex; gap: var(--k-5); align-items: center; }
.m-teacher .k-avatar { background: var(--k-brand-soft); color: var(--k-brand); flex: none; }
.r-booking .k-row-title, .r-booking .k-row-sub { white-space: normal; }
.r-acct > * { min-width: 0; }
.r-profile > div { min-width: 0; }
.r-plan-tag { flex-wrap: wrap; }
.pub-foot a, .pub-foot span { display: inline-block; padding: 10px 0; }
@media (max-width: 1023px) { .st-first { display: flex; flex-direction: column; } .st-first > .k-aside { order: -1; } .st-first > * + * { margin-top: 0; } .st-first > .k-stack { margin-top: var(--k-5); } }
.st-first > * { min-width: 0; }
.k-app input[type="file"] { width: 100%; padding: 12px; border-radius: var(--k-r-s); border: 1.5px dashed var(--k-line-strong); background: var(--k-surface-2); font: inherit; font-size: var(--k-t-sub); color: var(--k-muted); }
.k-app input[type="file"]::file-selector-button { margin-right: 12px; border: 0; border-radius: 999px; padding: 8px 14px; background: var(--k-brand); color: var(--k-brand-ink); font: inherit; font-weight: 600; cursor: pointer; }
@media (min-width: 1024px) { body.k-app.pub { display: block; } }
.st-det:not(:empty)::before { content: " · "; }
.st-stuck::before { content: "Stuck on: "; }
.pub-phone .k-row-title { white-space: normal; }
.k-top:has(a.k-signin) .k-avatar { display: none; }
.r-day .k-row-title, .k-list .k-row-title { white-space: normal; }
.r-weeks { margin-bottom: var(--k-4); }
.st-sum::before { content: "Your week: "; } .st-sent { color: var(--k-brand); font-weight: 600; } .pub-mini-card p { color: var(--k-hero-ink); opacity: .85; }
.r-booking[data-k-state="active"] .k-steps { display: grid; }
.pub-foot { align-items: baseline; }


/* ---------- Streak: the wall planner (local; "don't break the chain" paper calendar), teacher's note, ruled letter ---------- */
.k-app .k-pagehead h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); letter-spacing: -.025em; }
.st-days-n { display: inline-block; min-width: 1.5ch; margin-right: .18em; padding: 0 .22em; border-radius: .3em; background: var(--st-stamp); color: var(--st-ink); text-align: center; transform: rotate(-3deg); }
.st-planner { background: var(--k-surface); border: 1px solid var(--k-line-strong); border-radius: var(--k-r-l); padding: var(--k-5) var(--k-4) var(--k-4); position: relative; margin-top: var(--k-4); }
.st-planner::before { content: ""; position: absolute; left: 50%; top: -9px; width: 168px; height: 18px; transform: translateX(-50%); background: radial-gradient(circle at 12px 9px, var(--k-bg) 0 5px, var(--k-text) 5.5px 7px, transparent 7.5px) 0 0 / 24px 18px repeat-x; opacity: .85; }
.st-planner-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k-3); flex-wrap: wrap; border-bottom: 2px solid var(--k-brand); padding-bottom: var(--k-2); margin-bottom: var(--k-3); }
.st-planner-head h2 { font-size: 1.25rem; }
.st-month { color: var(--k-muted); font-size: var(--k-t-sub); font-weight: 600; font-variant-numeric: tabular-nums; }
.st-cal-days, .st-cal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.st-cal-days li { text-align: center; font-size: var(--k-t-cap); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k-muted); padding-bottom: 4px; }
.st-cal-grid li { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; background: var(--k-surface-2); display: grid; place-items: center; overflow: visible; font-variant-numeric: tabular-nums; }
.st-cal-grid li b { position: absolute; left: 7px; top: 5px; font-size: .6875rem; font-weight: 700; color: var(--k-muted); line-height: 1; }
.st-cal-grid li em { position: absolute; right: 6px; top: 5px; font-size: .625rem; font-style: normal; font-weight: 700; color: var(--k-brand); text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.st-cal-grid li span { display: grid; place-items: center; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--st-stamp); color: var(--st-ink); font-family: var(--r-display); font-weight: 800; font-size: clamp(.8125rem, .6rem + 1vw, 1.25rem); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--st-ink) 22%, transparent); transform: rotate(-4deg); margin-top: 15px; }
.st-cal-grid li.on + li.on::before { content: ""; position: absolute; left: -5px; top: calc(50% + 6px); width: 8px; height: 3px; background: var(--st-stamp); z-index: 1; }
.st-cal-grid li:nth-child(7n+1)::before { display: none; }
.st-cal-grid li.today { box-shadow: 0 0 0 2.5px var(--k-brand); background: var(--k-brand-soft); }
.st-cal-grid li.later { opacity: .45; background: transparent; box-shadow: inset 0 0 0 1px var(--k-line); }
.st-planner .st-goal { margin-top: var(--k-4); padding-top: var(--k-3); border-top: 1px dashed var(--k-line-strong); }
.st-planner .k-bar { height: 12px; }
.st-planner .k-bar > i { background: var(--st-stamp); }
.st-planner .k-note { color: var(--k-muted); margin-top: 6px; }
@media (min-width: 1024px) { .st-planner { padding: var(--k-5) var(--k-6) var(--k-5); } .st-cal-grid, .st-cal-days { gap: 6px; } .st-cal-grid li { aspect-ratio: 1.45 / 1; } .st-cal-grid li span { width: auto; height: 66%; margin-top: 14px; } .st-cal-grid li b { font-size: .8125rem; left: 10px; top: 8px; } }
/* Lucía's note: a yellow slip with her answer first. */
.st-note { background: transparent; box-shadow: none; border: 0; overflow: visible; }
.st-note .r-booking { padding: var(--k-3); background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-r-l); }
.st-note .r-reply { position: relative; margin: 0 0 var(--k-3); padding: 18px 16px 16px; background: var(--st-note); color: var(--st-note-ink); border-radius: 4px 4px 14px 4px; font-family: var(--r-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; box-shadow: 0 6px 14px -8px rgba(60, 40, 0, .45); transform: rotate(-.6deg); }
.st-note .r-reply::before { content: "Lucía"; display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: inherit; opacity: .7; }
.st-note .r-booking-top { padding: 0 2px; }
.st-note .r-booking .k-steps { margin-top: var(--k-3); }
.st-note .k-empty, .st-note .st-q { padding-left: 2px; }
.st-mix { border: 1px solid var(--k-line); }
.st-table { --k-cols: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 2.4fr); border: 1px solid var(--k-line); }
.st-table-h { --k-cols: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.8fr) 6.5rem; }
.st-act-img { width: 28px; height: 28px; border-radius: 9px; margin-right: 10px; vertical-align: middle; }
.st-table .k-td-main { font-weight: 700; display: flex; align-items: center; }
.st-td-note { color: var(--k-muted); }
.st-foot { margin-top: var(--k-4); }
.st-metrics { margin: var(--k-2) 0 var(--k-5); padding: var(--k-4) var(--k-5); background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-r-l); }
.st-metrics b { color: var(--k-brand); }
/* Ruled letter: the check-in form is writing paper. */
.st-first .k-sheet { background: var(--k-surface); border: 1px solid var(--k-line-strong); border-top: 6px solid var(--k-brand); border-radius: 6px var(--k-r-l) var(--k-r-l) var(--k-r-l); }
.st-first .k-sheet h2 { font-family: var(--r-display); }
.st-first textarea { background: repeating-linear-gradient(transparent 0 25px, var(--k-line-strong) 25px 26px) 0 6px / 100% 26px, var(--k-surface); line-height: 26px; padding-top: 6px; border-color: transparent; border-bottom: 1px solid var(--k-line-strong); border-radius: 0; }
.st-first .r-booking { padding: var(--k-4); background: var(--k-surface); border: 1px solid var(--k-line); border-radius: var(--k-r-l); }
.st-first .k-list { background: transparent; box-shadow: none; display: grid; gap: var(--k-3); }
.st-first .r-booking + .r-booking { border-top: 1px solid var(--k-line); }
.st-first .r-reply { background: var(--st-note); color: var(--st-note-ink); font-weight: 600; margin: 0 0 var(--k-3); }
.st-first .r-reply::before { color: inherit; opacity: .7; }
/* Log: practice picker */
.st-log .k-sheet { border: 1px solid var(--k-line-strong); }
@media (max-width: 559px) { .st-act { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; text-align: center; row-gap: 4px; padding: 10px 4px; } .st-act img { grid-row: auto; width: 36px; height: 36px; } .st-act span { display: none; } .st-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-act { border-radius: 16px; }
.st-mins .k-chip { min-height: 44px; }
@media (max-width: 559px) { .st-cal-grid li b { font-size: .5625rem; left: 5px; top: 4px; } .st-cal-grid li span { font-size: .75rem; } }

/* Round 2 */
.st-more { margin-top: var(--k-2); font-size: var(--k-t-sub); }
.st-more summary { cursor: pointer; color: var(--k-brand); font-weight: 600; padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.st-mix { display: flex; flex-wrap: wrap; gap: 8px; border: 0; background: transparent !important; box-shadow: none; overflow: visible; }
.st-mix .k-row { min-height: 0; padding: 8px 14px; flex: 0 1 auto; width: auto; border-radius: 999px; background: var(--k-surface); border: 1px solid var(--k-line-strong); gap: 8px; }
.st-mix .k-row::before, .st-mix .k-row + .k-row::before { display: none; }
.st-mix .k-row-main { flex: none; }
.st-mix .k-row-title { font-weight: 600; font-size: var(--k-t-sub); }
.st-mix .k-row-end b { color: var(--k-brand); font-variant-numeric: tabular-nums; }
.st-mix .k-empty { padding: 0; }
.st-member { background: var(--k-surface); border: 1px solid var(--k-line-strong); box-shadow: inset 0 5px 0 var(--k-brand); padding-top: var(--k-6); display: grid; gap: var(--k-4); }
.st-member .k-hero-top { color: var(--k-muted); text-transform: uppercase; letter-spacing: .06em; font-size: var(--k-t-cap); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.st-member .k-big { font-size: 3.25rem; color: var(--k-brand); }
.st-member .k-big small { color: var(--k-muted); font-size: 1.125rem; }
.st-member .r-hero-perks .k-i { color: var(--k-brand); }
.st-member .k-perks li { color: var(--k-text); }
.st-mini .st-week li.on { border-radius: 50%; }
.st-mini .st-week { gap: 8px; }
.k-list .k-row-sub { white-space: normal; }
.st-metrics > * { min-width: 0; flex: 1 1 0; padding: 0 var(--k-3); }
.st-metrics { padding: var(--k-4); }
.st-metrics b { font-size: 1.5rem; }
.st-first .k-list { border: 0; overflow: visible; }
.st-first .k-sheet { border-top-width: 1px; box-shadow: inset 0 5px 0 var(--k-brand); padding-top: var(--k-6); }
.st-first .k-sheet-grab { display: none; }
.st-first textarea { line-height: 26px; padding-top: 0; background-position: 0 0; }
.st-note .r-reply { background: var(--st-note); }
@media (prefers-color-scheme: dark) { :root { --st-note: #5a4712; --st-note-ink: #fff3c9; } .st-cal-grid li.later { box-shadow: inset 0 0 0 1px var(--k-line-strong); } }
.k-app .r-profile-col { margin-bottom: 0; }
.pub-hero-art figcaption { top: 16px; bottom: auto; }
.st-member h2 + *, .st-plan .r-rules { margin-top: 0; }
.st-plan .k-card h2 { margin-bottom: var(--k-3); }
.r-profile-col { flex-wrap: wrap; }
.r-profile-col .k-avatar { flex: none; }
.r-profile-col .k-help { flex-basis: 100%; margin: 0; }
.r-profile-col .k-badge { white-space: nowrap; }

/* Round 3 */
.st-member .k-big small { margin-left: 8px; }
.st-mini .st-week li { border-radius: 50%; }
.st-mini .st-week li.later { background: transparent; box-shadow: inset 0 0 0 1.5px var(--k-line-strong); }
.st-mini .st-week li.today:not(.on) { background: transparent; }
.st-first .k-sheet { overflow: hidden; }
.st-first .k-list > *::before, .st-first .k-list > *::after { display: none; }
.st-first .r-booking { border: 1px solid var(--k-line) !important; }
.st-table .k-td-end { align-self: center; }
@media (max-width: 1023px) {
  .st-table .k-td[data-label]::before { content: ""; display: none; }
  .st-table .k-td-num::before { content: "· "; display: inline; }
  .st-table .k-tr { gap: 2px 8px; padding: 12px 16px; }
  .st-table .k-td-main { flex-basis: 100%; }
  .st-table .st-td-note { flex-basis: 100%; }
}
@media (prefers-color-scheme: dark) { :root { --st-note: #3d3010; --st-note-ink: #fff0bd; } .st-note .r-reply::before { opacity: 1; color: #ffd25a; } }
.st-note .r-booking .k-row-main { min-width: 0; }

/* Round 4 */
.k-app .st-first .k-list { background: transparent !important; border-radius: 0; box-shadow: none; }
.st-first .k-sheet { border-radius: var(--k-r-l); border-top-width: 1px; }
@media (max-width: 1023px) {
  .st-table-h .k-tr { position: relative; padding-right: 100px; }
  .st-table-h .k-td-end { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
}

/* art direction 2026-10-25 */
/* Azulejo blue, tile white, marigold. Lilita One for headings and numerals, Nunito for text (loaded in every page's head). */
:root {
  --k-font-display: "Lilita One", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --k-font: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-display: var(--k-font-display);
  --k-brand: #1D4E89; --k-brand-ink: #FFFFFF; --k-brand-soft: #E4ECF6; --k-hero: #1D4E89; --k-hero-ink: #FBFBF8; --k-gold: #F5A623;
  --k-bg: #FBFBF8; --k-surface: #FFFFFF; --k-surface-2: #EEF3F9; --k-line: #D5DEEA; --k-line-strong: #AFC0D6;
  --k-text: #10202F; --k-muted: #3E5368; --k-faint: #56697F; --k-danger: #B4472F;
  --st-ink: #10202F; --st-stamp: #F5A623; --st-note: #FFF1D0; --st-note-ink: #10202F;
  --st-band-blue: #1D4E89; --st-band-gold: #F5A623; --st-lip-blue: #12345E; --st-lip-gold: #C4801A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-brand: #8FB4E8; --k-brand-ink: #0E1A2B; --k-brand-soft: rgba(143, 180, 232, .16); --k-hero: #173A69; --k-hero-ink: #EAF1FA;
    --k-bg: #0E1A2B; --k-surface: #16263D; --k-surface-2: #1E3150; --k-line: #2A3D5C; --k-line-strong: #41597D;
    --k-text: #EAF1FA; --k-muted: #A9BBD3; --k-faint: #A9BBD3; --k-danger: #F08A74;
    --st-note: #4A3B12; --st-note-ink: #FFF0C2; --st-band-blue: #173A69; --st-lip-blue: #4F78AD;
  }
}
:root[data-theme="dark"] {
  --k-brand: #8FB4E8; --k-brand-ink: #0E1A2B; --k-brand-soft: rgba(143, 180, 232, .16); --k-hero: #173A69; --k-hero-ink: #EAF1FA;
  --k-bg: #0E1A2B; --k-surface: #16263D; --k-surface-2: #1E3150; --k-line: #2A3D5C; --k-line-strong: #41597D;
  --k-text: #EAF1FA; --k-muted: #A9BBD3; --k-faint: #A9BBD3; --k-danger: #F08A74;
  --st-note: #4A3B12; --st-note-ink: #FFF0C2; --st-band-blue: #173A69; --st-lip-blue: #4F78AD;
}

body.k-app { font-family: var(--k-font); background: var(--k-bg); color: var(--k-text); }
.k-app :is(h1, h2, h3, .k-big, .k-price, .k-metrics b, .st-metrics b, .st-count) { font-family: var(--k-font-display); font-weight: 400; letter-spacing: 0; }
.k-app :is(h1, h2, h3, .k-big, .k-price, .k-metrics b, .st-metrics b, .st-count) em { font-style: normal; }
.k-app :is(.k-kicker, .k-thead, .st-cal-days li) { font-weight: 800; }
.k-app :focus-visible { outline: 3px solid var(--k-brand); outline-offset: 2px; }

/* Chunky pill buttons with a lip; press down. */
.k-app .k-btn { box-shadow: 0 4px 0 var(--st-lip-blue); transition: transform .08s ease, box-shadow .08s ease; }
.k-app .k-btn-lg { min-height: 56px; }
.k-app .k-btn:not(.k-btn-line):not(.k-btn-2):not(.k-btn-ghost):active { transform: translateY(4px); box-shadow: 0 0 0 var(--st-lip-blue); }
.k-app .k-btn-s { box-shadow: 0 3px 0 var(--st-lip-blue); }
.k-app .k-btn-2, .k-app .k-btn-ghost { box-shadow: none; }
.k-app .k-btn-line { box-shadow: inset 0 0 0 1.5px var(--k-line-strong); }
.k-app textarea { background: var(--k-surface); background-image: none; line-height: 1.5; padding: 10px 12px; border-radius: var(--k-r-s); }
.k-app input[type="file"]::file-selector-button { box-shadow: 0 3px 0 var(--st-lip-blue); }

/* Band colours */
.pub-band-blue { background: var(--st-band-blue); color: var(--k-hero-ink); }
.pub-band-blue :is(h1, h2, h3) { color: var(--k-hero-ink); }
.pub-band-blue .k-muted { color: var(--k-hero-ink); opacity: .85; }
.pub-band-gold { background: var(--st-band-gold); color: var(--st-ink); }
.pub-band-gold :is(h1, h2, h3) { color: var(--st-ink); }
.pub-band-gold .k-muted, .pub-band-gold p { color: var(--st-ink); }
.pub-band-gold .pub-step { background: transparent; border: 0; box-shadow: none; padding: 0; }
.pub-band-gold .pub-step .k-tile { background: var(--st-ink); color: var(--st-stamp); }
.pub-band-gold .pub-step p { color: var(--st-ink); }
.pub-band-gold .pub-step .k-row-sub { color: var(--k-muted); }

/* Hero: full-bleed blue band with a faint azulejo repeat */
.pub-band { position: relative; overflow: hidden; padding: 40px 0 56px; }
.pub-band::before { content: ""; position: absolute; inset: 0; background: url(art/tile-a.svg) 0 0 / 80px 80px; opacity: .12; pointer-events: none; }
.pub-band > .pub-wrap { position: relative; }
.pub-hero { display: grid; gap: 28px; padding: 16px 0 0; }
.pub-hero .k-kicker { color: var(--k-hero-ink); opacity: .85; margin: 0; }
.pub-hero h1 { font-family: var(--k-font-display); font-weight: 400; font-size: min(9vw, 8rem); line-height: .95; letter-spacing: 0; text-transform: none; color: var(--k-hero-ink); margin: 0; }
.pub-hero h1 em { font-style: normal; background: var(--st-stamp); color: var(--st-ink); padding: 0 .12em; border-radius: .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pub-hero-text { display: grid; gap: 20px; justify-items: start; }
.pub-hero .k-lead { color: var(--k-hero-ink); margin: 0; font-size: 1.125rem; opacity: .92; }
.pub-hero .k-btn-row { margin: 0; }
.pub-join { background: var(--st-stamp); color: var(--st-ink); box-shadow: 0 4px 0 var(--st-lip-gold); min-width: 180px; font-family: var(--k-font-display); font-size: 1.375rem; }
.pub-join:active { box-shadow: 0 0 0 var(--st-lip-gold); }
.pub-hero .pub-facts { margin: 0; }
.pub-hero .pub-facts div { border-left-color: var(--st-stamp); }
.pub-hero .pub-facts span { color: var(--k-hero-ink); opacity: .85; }
.pub-facts b { font-family: var(--k-font-display); font-weight: 400; }
.pub-hero-art { margin: 0; background: none; box-shadow: none; aspect-ratio: auto; border-radius: 0; overflow: visible; }
.pub-hero-art figcaption { position: static; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pub-hero-art figcaption span { background: var(--st-stamp); color: var(--st-ink); border-radius: 999px; padding: 4px 12px; font-size: var(--k-t-foot); font-weight: 800; backdrop-filter: none; -webkit-backdrop-filter: none; }
.st-wall { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.st-wall span { aspect-ratio: 1; border-radius: 8px; box-sizing: border-box; border: 1px dashed rgba(255, 255, 255, .45); }
.st-wall span.on { border: 0; background: #FBFBF8 url(art/tile-a.svg) center / cover no-repeat; }
.st-wall span.on:nth-child(3n+2) { background-image: url(art/tile-b.svg); }
@media (prefers-color-scheme: dark) { .st-wall span.on { filter: brightness(.88); } .pub-teacher-art img { opacity: .78; } }
@media (min-width: 1024px) {
  .pub-band { padding: 56px 0 64px; min-height: 640px; display: grid; align-items: center; }
  .pub-band > .pub-wrap { width: 100%; }
  .pub-hero { grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 40px; align-items: center; padding: 0; }
  .pub-hero > .k-kicker, .pub-hero > h1 { grid-column: 1 / -1; }
  .pub-hero-art { grid-column: 2; grid-row: 3; }
  .pub-hero-text { grid-column: 1; grid-row: 3; }
}

/* How it works: one strip of three steps on marigold */
.pub-steps { gap: 32px; }
@media (min-width: 900px) { .pub-steps { gap: 40px; } }
.pub-band-gold .k-section-head h2 { color: var(--st-ink); }

/* Teacher */
.pub-teacher { display: grid; gap: 28px; align-items: center; }
.pub-teacher-art { margin: 0; }
.pub-teacher-art img { width: 100%; height: auto; border-radius: var(--k-r-xl); display: block; }
@media (min-width: 900px) { .pub-teacher { grid-template-columns: 1fr 1fr; } }

/* Join: one plan card, centred, on blue; the questions link is plain text */
.pub-band-blue .k-plans { max-width: 480px; margin: 0 auto; grid-template-columns: minmax(0, 1fr); }
.pub-band-blue .k-plan { background: var(--k-surface); color: var(--k-text); }
.pub-band-blue .k-plan .k-price, .pub-band-blue .k-plan li { color: var(--k-text); }
.pub-ask { margin: 20px 0 0; text-align: center; color: var(--k-hero-ink); }
.pub-ask a { color: var(--k-hero-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 2px; }

/* Streak header: a marigold flower instead of the sticker */
.st-flower { display: inline-block; width: 48px; height: 48px; vertical-align: -12px; margin-right: 10px; }
.st-days-n { display: none; }

/* Wall planner: azulejo tiles, binder rings removed, minutes in a marigold coin */
.st-planner::before { content: none; display: none; }
.st-cal-days li { font-size: 11px; padding: 6px 0; letter-spacing: .04em; }
.st-cal-grid li { background: transparent; border: 0; box-shadow: none; outline: 1px dashed #C9D3E0; outline-offset: -1px; border-radius: 10px; }
@media (prefers-color-scheme: dark) { .st-cal-grid li { outline-color: #41597D; } }
.st-cal-grid li.on { outline: 0; background: #FBFBF8 url(art/tile-a.svg) center / cover no-repeat; }
.st-cal-grid li.on:nth-child(3n+2) { background-image: url(art/tile-b.svg); }
.st-cal-grid li.on + li.on::before { display: none; }
.st-cal-grid li.on > b { background: var(--k-surface); color: var(--k-text); border-radius: 6px; padding: 0 4px; }
.st-cal-grid li.on > span { position: absolute; right: 4px; top: 4px; width: auto; height: auto; aspect-ratio: auto; min-width: 26px; padding: 2px 6px; margin: 0; border-radius: 999px; background: var(--st-stamp); color: var(--st-ink); font-family: var(--k-font-display); font-size: .8125rem; line-height: 1.2; text-align: center; box-shadow: 0 0 0 2px var(--k-surface); transform: none; }
.st-cal-grid li.today { outline: 3px solid var(--st-stamp); outline-offset: 0; box-shadow: none; background-color: var(--k-brand-soft); }
.st-cal-grid li.later { opacity: .45; }
.st-cal-grid li.st-paint { animation: st-paint .6s ease-out both; }
@keyframes st-paint { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Check-in: the form hides once this week is sent; the ruled lines go, the numbers box fits four lines */
.st-first form[hidden], .st-sent[hidden] { display: none !important; }
.st-first textarea { background: var(--k-surface); background-image: none; line-height: 1.5; padding: 10px 12px; border-radius: var(--k-r-s); border: 1.5px solid var(--k-line-strong); }
.st-first textarea[readonly] { background: var(--k-surface-2); }

/* Log: equal insets on the latest rows */
.st-log .k-list .k-row + .k-row::before { left: 16px; right: 16px; }

/* Small phones: two activity picks across */
@media (max-width: 374px) { .st-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dark muted and faint text on the secondary surface */
@media (prefers-color-scheme: dark) { .k-app .k-muted, .k-app .k-help, .k-app .k-foot { color: var(--k-muted); } }

@media (prefers-reduced-motion: reduce) {
  .k-app *, .k-app *::before, .k-app *::after { transition: none !important; animation: none !important; }
  .st-cal-grid li.st-paint { animation: none !important; }
  .k-app .k-btn:active { transform: none; }
}
.pub-band-blue .k-plan h3 { color: var(--k-text); }

/* art direction round 2 (2026-10-25): the wall is the hero; tiles read whole; the log strip is mini tiles; public hero and teacher */
/* Home: greeting, then the azulejo band with the wall and the streak, then this week's goal bar under it */
.st-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.st-top .k-kicker { font-size: .8125rem; margin: 0; }
.st-band { background: var(--st-band-blue); color: #FBFBF8; padding: 16px; margin: 0 0 16px; }
.st-band-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.st-band-h { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; font-family: var(--k-font-display); font-weight: 400; font-size: 3rem; line-height: 1; letter-spacing: 0; color: #FBFBF8; }
.st-band-h .st-flower { width: 64px; height: 64px; margin: 0; vertical-align: middle; flex: none; }
.st-band .st-month { color: #FBFBF8; opacity: .85; font-size: .875rem; font-weight: 700; }
@media (min-width: 560px) { .st-band { padding: 32px; } }
@media (min-width: 1024px) { .st-band-h { font-size: 5.5rem; } }
.st-band .st-cal-days, .st-band .st-cal-grid { gap: 6px; max-width: 708px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.st-band .st-cal-days li { color: rgba(251, 251, 248, .85); font-size: 11px; padding: 0 0 4px; }
.st-band .st-cal-grid li { aspect-ratio: 1 / 1; border-radius: 6px; background: transparent; outline: 1px dashed rgba(251, 251, 248, .45); outline-offset: -1px; box-shadow: none; }
.st-band .st-cal-grid li.later { opacity: .45; }
.st-band .st-cal-grid li b { color: rgba(251, 251, 248, .9); }
.st-band .st-cal-grid li.on { outline: 0; }
.st-band .st-cal-grid li.today { outline: 3px solid var(--st-stamp); outline-offset: 0; background-color: transparent; }
/* Tiles: the pattern sits whole in the cell, the day number top-left, minutes in a small marigold coin bottom-right */
.st-cal-grid li { position: relative; }
.st-cal-grid li.on { background: #FBFBF8 url(art/tile-a.svg) center / 80% no-repeat; }
.st-cal-grid li.on:nth-child(3n+2) { background-image: url(art/tile-b.svg); }
.st-cal-grid li b { left: 4px; top: 4px; font-size: 9px; padding: 0 3px; border-radius: 4px; }
.st-cal-grid li.on > b { background: rgba(251, 251, 248, .9); color: #10202F; }
.st-cal-grid li.on > span { top: auto; bottom: 3px; right: 3px; min-width: 0; padding: 1px 4px; font-size: .6875rem; border-radius: 999px; box-shadow: none; }
.st-cal-grid li.today { outline: 3px solid var(--st-stamp); outline-offset: 0; }
@media (prefers-color-scheme: dark) { .st-cal-grid li.today { background: linear-gradient(rgba(14, 26, 43, .85), rgba(14, 26, 43, .85)), url(art/tile-a.svg) center / 80% no-repeat; } }
:root[data-theme="dark"] .st-cal-grid li.today { background: linear-gradient(rgba(14, 26, 43, .85), rgba(14, 26, 43, .85)), url(art/tile-a.svg) center / 80% no-repeat; }
/* Goal under the band: a marigold bar */
.st-goal { margin: 0 0 24px; }
.st-goal .r-stamp-note { margin-top: 0; font-weight: 700; }
.st-goal .k-bar { height: 14px; margin-top: 8px; background: var(--k-surface-2); }
.st-goal .k-bar > i { background: var(--st-stamp); }
.st-goal .k-note { color: var(--k-muted); margin-top: 6px; }
/* Log: the week as seven 40px mini tiles, painted when a day is saved */
.st-mini .st-week { grid-template-columns: repeat(7, 40px); justify-content: space-between; gap: 0; }
.st-mini .st-week li { width: 40px; height: 40px; aspect-ratio: auto; border-radius: 6px; background: var(--k-surface-2); color: var(--k-muted); }
.st-mini .st-week li.on { background: #FBFBF8 url(art/tile-a.svg) center / 80% no-repeat; color: #10202F; }
.st-mini .st-week li.on:nth-child(3n+2) { background-image: url(art/tile-b.svg); }
.st-mini .st-week li.later { background: transparent; box-shadow: inset 0 0 0 1px var(--k-line-strong); }
.st-mini .st-week li.today { box-shadow: none; outline: 2px dashed var(--k-brand); outline-offset: 2px; }
.st-mini .st-week li.st-paint { animation: st-paint-tile .4s ease-out both; }
@keyframes st-paint-tile { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* Practice club plan: no ~200px empty band under the home wall on desktop */
@media (min-width: 1024px) { .st-home { align-items: start; } }
/* Public hero: the wall, a drawn parrot, the headline and text start on the same line */
.pub-hero { row-gap: 32px; }
.pub-hero h1 { font-size: 2.75rem; line-height: 1; }
.pub-hero h1 em { display: table; margin-top: 8px; }
@media (min-width: 1024px) { .pub-hero h1 { font-size: min(9vw, 8rem); line-height: .95; } .pub-hero h1 em { margin-top: 8px; } .pub-hero { align-items: start; } .pub-hero-text { align-self: start; } .pub-hero .k-lead { margin-top: 0; } }
.pub-hero-art { position: relative; }
.pub-hero-art .st-wall { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.st-wall span { border-radius: 6px; }
.st-wall span:not(.on) { background: #FBFBF8; border: 0; }
.st-wall span.on { background-size: 80% auto; background-position: center; }
.st-wall span.today { box-shadow: 0 0 0 3px var(--st-stamp), 0 0 14px rgba(245, 166, 35, .6); }
.pub-parrot { position: absolute; right: -14px; bottom: -28px; width: 104px; height: auto; z-index: 1; }
.pub-hero-art figcaption { margin-top: 28px; }
/* Teacher: the card fills the height of the split and carries a reply promise; her portrait is drawn */
.pub-teacher > .m-teacher { align-self: stretch; align-items: center; }
.pub-teacher > .m-teacher > img.k-avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; object-fit: cover; }
@media (min-width: 900px) { .pub-teacher > .m-teacher { padding: 40px 36px; } }
/* Cards on the gold band in dark mode: dark surface, light text */
@media (prefers-color-scheme: dark) {
  .pub-band-gold .pub-step { background: var(--k-surface); border: 1px solid var(--k-line); box-shadow: none; padding: 20px; border-radius: var(--k-r-l); }
  .pub-band-gold .pub-step, .pub-band-gold .pub-step :is(h3, p, .k-row-sub, .k-row-title) { color: #E8EEF6; }
  .pub-band-gold .pub-step .k-tile { background: var(--st-stamp); color: var(--st-ink); }
}
:root[data-theme="dark"] .pub-band-gold .pub-step { background: var(--k-surface); border: 1px solid var(--k-line); box-shadow: none; padding: 20px; border-radius: var(--k-r-l); }
:root[data-theme="dark"] .pub-band-gold .pub-step, :root[data-theme="dark"] .pub-band-gold .pub-step :is(h3, p, .k-row-sub, .k-row-title) { color: #E8EEF6; }
/* "Keep your streak" label on the blue card */
.pub-mini-card p { color: rgba(255, 255, 255, .8); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .k-app .k-btn:active { transform: none !important; }
  .st-mini .st-week li.st-paint, .st-cal-grid li.st-paint { animation: none !important; }
}
/* parrot sits beside the wall, clear of the tiles and the caption */
.pub-parrot { position: relative; display: block; width: 88px; margin: 12px 0 0 auto; right: auto; bottom: auto; }
@media (min-width: 1024px) { .pub-parrot { position: absolute; right: -72px; bottom: -40px; width: 120px; margin: 0; } }
.pub-hero-art .pub-parrot { width: 88px; height: auto; object-fit: contain; }
@media (min-width: 1024px) { .pub-hero-art .pub-parrot { width: 120px; height: auto; } }
.st-mini .st-week li.on > span { background: rgba(251, 251, 248, .9); color: #10202F; border-radius: 4px; padding: 0 3px; }

/* art direction 2026-10-25, round 3: the wall in the band (tiles with minutes under them), a side column on desktop,
   marigold primary buttons and Lucía's note in dark, one tile signature per screen, public hero order and reply card */

/* Public hero: on phones the copy and Join come first, the wall below the stats */
@media (max-width: 1023px) {
  .pub-hero { display: flex; flex-direction: column; gap: 28px; }
  .pub-hero-text { order: 1; }
  .pub-hero-art { order: 2; }
}
/* Public wall: twelve painted days (the last one today), the two others outlined, no white blanks */
.pub-hero-art .st-wall span:not(.on) { background: transparent; border: 1.5px dashed rgba(251, 251, 248, .6); }
.pub-mini-card > p:last-child { color: #C9D8EE; }
.pub-band-gold .pub-step .pub-mini-card p { color: rgba(251,251,248,.85); }
/* Public: Lucía's card, a 120px portrait beside her text and a quoted reply on paper */
.pub-teacher > .m-teacher { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: center; }
.pub-teacher > .m-teacher > img.k-avatar { width: 72px; height: 72px; }
.pub-reply { margin: 8px 0 0; padding: 16px 18px; background: #FFF1C9; color: #10202F; border-radius: 4px 4px 14px 4px; font-family: var(--k-font-display); font-size: 1.125rem; line-height: 1.3; }
.k-card .pub-reply p, .pub-reply p { margin: 0; color: #10202F; }
.pub-reply cite { display: block; margin-top: 8px; font-family: var(--k-font); font-size: .8125rem; font-style: normal; font-weight: 800; color: #3E5368; }
@media (min-width: 900px) {
  .pub-teacher > .m-teacher { grid-template-columns: 120px minmax(0, 1fr); gap: 32px; padding: 48px; }
  .pub-teacher > .m-teacher > img.k-avatar { width: 120px; height: 120px; }
}
/* How it works: light cards on marigold, as in dark */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pub-band-gold .pub-step { background: #FBFBF8; border: 0; box-shadow: none; padding: 24px; border-radius: 20px; }
}
:root[data-theme="light"] .pub-band-gold .pub-step { background: #FBFBF8; border: 0; box-shadow: none; padding: 24px; border-radius: 20px; }

/* Home band: the streak line, See the month, the wall (phones: the last two weeks; desktop: the last three weeks) */
.st-band { overflow: hidden; }
.st-band-h { flex-wrap: wrap; white-space: normal; font-size: clamp(2rem, 8vw, 2.75rem); }
.st-band-h .st-flower { width: 40px; height: 40px; vertical-align: middle; }
a.st-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: #FBFBF8; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.pub-band-blue :focus-visible, .st-band :focus-visible { outline-color: #F5A623; }
.st-band .st-cal-grid li { position: relative; display: flex; flex-direction: column; background: none; outline: 0; box-shadow: none; border-radius: 0; aspect-ratio: auto; }
.st-band .st-cal-grid li::before { content: none; display: none; }
.st-band .st-cal-grid li, .st-band .st-cal-grid li.on, .st-band .st-cal-grid li.on:nth-child(3n+2) { align-self: start; background: none; }
.st-band .st-cal-grid li::after { content: ""; display: block; order: -1; flex: none; width: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 6px; background: none; outline: 1px dashed rgba(251, 251, 248, .45); outline-offset: -1px; }
.st-band .st-cal-grid li.on::after { outline: 0; background: #FBFBF8 url(art/tile-a.svg) center / 80% no-repeat; }
.st-band .st-cal-grid li.on:nth-child(3n+2)::after { background-image: url(art/tile-b.svg); }
.st-band .st-cal-grid li.today { outline: 0; background: none; }
.st-band .st-cal-grid li.today::after { outline: 3px dashed var(--st-stamp); outline-offset: 0; }
.st-band .st-cal-grid li.later { opacity: .45; }
.st-band .st-cal-grid li > b { position: absolute; left: 4px; top: 4px; z-index: 1; margin: 0; padding: 2px 3px; border-radius: 4px; background: none; color: #FBFBF8; font-size: 9px; line-height: 1; }
.st-band .st-cal-grid li.on > b { background: rgba(16, 32, 47, .78); }
.st-band .st-cal-grid li.on > span { position: static; top: auto; right: auto; min-width: 0; width: auto; height: auto; aspect-ratio: auto; margin: 3px 0 0; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: none; color: #FBFBF8; font-family: var(--k-font); font-size: 9px; font-weight: 800; line-height: 1.2; text-align: center; }
.st-band .st-cal-days, .st-band .st-cal-grid { max-width: none; }
@media (max-width: 1023px) {
  .st-band .st-cal-grid li:nth-last-child(n+15) { display: none; }
}
.st-side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.st-parrot { width: 88px; height: auto; flex: none; }
.st-side-text { display: grid; gap: 10px; justify-items: start; flex: 1 1 180px; }
.st-today { margin: 0; color: #FBFBF8; font-size: 1rem; font-weight: 800; }
.st-side .k-btn { background: var(--st-stamp); color: var(--st-ink); box-shadow: 0 4px 0 var(--st-lip-gold); justify-content: center; }
@media (min-width: 1024px) {
  .st-band { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 40px; align-items: start; }
  .st-band .st-band-top { grid-column: 1 / -1; }
  .st-band .st-cal { grid-column: 1; grid-row: 2; }
  .st-band .st-cal-grid li:nth-last-child(n+22) { display: none; }
  .st-band-h { font-size: 4.5rem; }
  .st-side { grid-column: 2; grid-row: 2; display: grid; gap: 16px; justify-items: start; align-content: start; margin-top: 0; padding-top: 4px; }
  .st-parrot { width: 120px; }
  .st-side-text { display: grid; gap: 14px; flex: none; width: 100%; }
  .st-today { font-size: 1.25rem; }
  .st-side .k-btn { width: 100%; }
}
/* Log: the week as mini tiles with the day letter as a caption under each */
.st-mini .st-week li { position: relative; }
.st-mini .st-week { padding-bottom: 24px; }
.st-mini .st-week li > span, .st-mini .st-week li.on > span { position: absolute; left: 50%; right: auto; top: 100%; min-width: 0; width: 40px; height: auto; margin-top: 4px; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: translateX(-50%); color: #5B6B7B; font-size: 11px; font-weight: 800; line-height: 1.2; text-align: center; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-mini .st-week li > span, :root:not([data-theme="light"]) .st-mini .st-week li.on > span { color: var(--k-muted); } }
:root[data-theme="dark"] .st-mini .st-week li > span, :root[data-theme="dark"] .st-mini .st-week li.on > span { color: var(--k-muted); }

/* Plan: the 4 x 7 wall strip, marigold dots for the club week, the card's blue top kept inside the radius */
.st-strip { display: grid; grid-template-columns: repeat(7, 10px); grid-template-rows: repeat(4, 10px); gap: 2px; height: 48px; align-content: center; justify-self: end; }
.st-strip span { display: block; border-radius: 3px; background: var(--k-surface-2); outline: 1px dashed var(--k-line-strong); outline-offset: -1px; }
.st-strip span.on { outline: 0; background: #FBFBF8 url(art/tile-a.svg) center / 80% no-repeat; }
.st-plan .k-steps-v li::before, .st-plan .k-steps-v li.k-done::before, .st-plan .k-steps-v li.k-now::before { background: var(--st-stamp); box-shadow: none; }
.st-member { overflow: hidden; }
.st-first .k-sheet { overflow: hidden; }

/* History: a 24px tile for each month; Check-in: a painted tile beside Answered */
.st-rows .k-row > .st-row-tile { flex: none; width: 24px; height: 24px; border-radius: 5px; margin-right: 10px; }
.st-answer-tile { flex: none; width: 20px; height: 20px; border-radius: 5px; }

/* Account on desktop: the side column stays in view */
@media (min-width: 1024px) { .r-acct > .k-aside { position: sticky; top: 16px; align-self: start; } }

/* Dark: primary buttons marigold with ink text and a darker lip; Lucía's note in ink with a marigold edge */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --st-note: #2A2410; --st-note-ink: #FFE3A8; }
  :root:not([data-theme="light"]) .k-app .k-btn:not(.k-btn-line):not(.k-btn-2):not(.k-btn-ghost) { background: #F5A623; color: #10202F; box-shadow: 0 3px 0 #C9861A; }
  :root:not([data-theme="light"]) .k-app .k-btn:not(.k-btn-line):not(.k-btn-2):not(.k-btn-ghost):active { box-shadow: 0 0 0 #C9861A; }
  :root:not([data-theme="light"]) .st-note .r-reply, :root:not([data-theme="light"]) .st-first .r-reply { border-left: 3px solid #F5A623; }
}
:root[data-theme="dark"] { --st-note: #2A2410; --st-note-ink: #FFE3A8; }
:root[data-theme="dark"] .k-app .k-btn:not(.k-btn-line):not(.k-btn-2):not(.k-btn-ghost) { background: #F5A623; color: #10202F; box-shadow: 0 3px 0 #C9861A; }
:root[data-theme="dark"] .k-app .k-btn:not(.k-btn-line):not(.k-btn-2):not(.k-btn-ghost):active { box-shadow: 0 0 0 #C9861A; }
:root[data-theme="dark"] .st-note .r-reply, :root[data-theme="dark"] .st-first .r-reply { border-left: 3px solid #F5A623; }
/* art direction 2026-10-25 */
.pub-foot a { display: inline-flex; align-items: center; min-height: 44px; }