/* Walkies (Page Lemon app template): Muddy Paws Walking Co., Ellerby Green.
   Sky and field. The page is an open sky over a field-green ground; the walk report is a drawn park map seen from
   above (flat trees, a pond, Mud paths) with a dotted Tennis Ball route that draws itself and ends on a big
   "58 min · 3.9 km" readout. Each dog is a round photo in a collar tag with a ball-yellow ring and a bone name tag.
   Palette: Sky, Field Green, Deep Field, Tennis Ball (the one loud colour), Mud, Chalk. Type: Bagel Fat One (display
   and every number) with Nunito Sans (text), from Google Fonts (one <link> per page). The map parts are symbols in
   art/park.svg that take their colour from the tokens below, so the dark scheme (a dusk park) recolours them.
   The kit (kit.css) gives behaviour and layout; everything visual is set here. */

:root {
  --wk-sky: #BFE3F2;
  --wk-sky-2: #E9F5FA;
  --wk-field: #1F5C3A;
  --wk-deep: #163F29;
  --wk-ball: #DDF45B;
  --wk-mud: #5A3D25;
  --wk-chalk: #FFFFFF;

  --wk-bg: #BFE3F2;            /* the sky */
  --wk-cloud: rgba(255, 255, 255, .75);
  --wk-ink: #163F29;           /* 8.7 on sky */
  --wk-muted: #2D4B3A;         /* 7.1 on sky */
  --wk-card: #FFFFFF;          /* chalk: tickets, tags, reports */
  --wk-card-2: #E9F5FA;
  --wk-card-ink: #163F29;      /* 11.8 on chalk */
  --wk-card-muted: #3F5A4A;    /* 7.6 on chalk */
  --wk-ground: #1F5C3A;        /* the field */
  --wk-ground-2: #194E31;
  --wk-ground-ink: #FFFFFF;    /* 7.9 */
  --wk-ground-muted: #D3EBDD;  /* 6.3 */
  --wk-ground-ball: #DDF45B;   /* 6.5 */
  --wk-btn: #DDF45B;
  --wk-btn-ink: #163F29;       /* 9.7 */
  --wk-btn-edge: #163F29;
  --wk-line: rgba(22, 63, 41, .16);
  --wk-line-strong: rgba(22, 63, 41, .34);
  --wk-shadow: rgba(22, 63, 41, .22);
  --wk-mudline: #5A3D25;
  --wk-mask: #FFFFFF;
  --wk-star: transparent;
  --wk-deep-shadow: rgba(0, 0, 0, .3);
  --wk-focus-glow: rgba(221, 244, 91, .4);
  --wk-form-divider: rgba(255, 255, 255, .22);
  --wk-phone-shadow: rgba(0, 0, 0, .35);
  --wk-placeholder: #5B7767;   /* 4.9 on white */
  --wk-readout-edge: rgba(221, 244, 91, .5);
  --wk-mask-opaque: #000;

  /* the park map */
  --wk-m-ground: #3F8F5C;
  --wk-m-meadow: #57A672;
  --wk-m-path: #6B4A2E;
  --wk-m-pond: #BFE3F2;
  --wk-m-ripple: #FFFFFF;
  --wk-m-tshadow: #2F7A4B;
  --wk-m-tree: #1F5C3A;
  --wk-m-tlight: #3F8F5C;
  --wk-m-daisy: #FFFFFF;
  --wk-m-gate: #5A3D25;
  --wk-m-paw: #FFFFFF;
  --wk-m-route: #DDF45B;
  --wk-m-route-shade: #163F29;

  --wk-display: "Bagel Fat One", "Arial Rounded MT Bold", "Nunito Sans", system-ui, sans-serif;
  --wk-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --k-brand: #1F5C3A;
  --k-brand-ink: #FFFFFF;
  --k-brand-soft: #E4F3C4;
  --k-hero: #1F5C3A;
  --k-hero-ink: #FFFFFF;
  --k-gold: #DDF45B;
  --k-bg: #BFE3F2;
  --k-surface: #FFFFFF;
  --k-surface-2: #E9F5FA;
  --k-line: rgba(22, 63, 41, .14);
  --k-line-strong: rgba(22, 63, 41, .3);
  --k-text: #163F29;
  --k-muted: #3F5A4A;
  --k-faint: #3F5A4A;
  --k-ok: #1F5C3A;
  --k-ok-soft: #E4F3C4;
  --k-warn: #5A3D25;
  --k-warn-soft: #F3E6D2;
  --k-info: #163F29;
  --k-info-soft: #DDF45B;
  --k-danger: #8A2A12;
  --k-font: var(--wk-text);
  --k-font-display: var(--wk-display);
  --k-r-s: 12px; --k-r-m: 18px; --k-r-l: 24px; --k-r-xl: 32px;
  --k-shadow-1: 0 2px 0 rgba(22, 63, 41, .12);
  --k-shadow-2: 0 10px 30px rgba(22, 63, 41, .18);
}
@media (prefers-color-scheme: dark) {
  :root {
    --wk-bg: #0F2A1C;          /* dusk field */
    --wk-cloud: transparent;
    --wk-ink: #EAF2E6;         /* 13.7 */
    --wk-muted: #A9C4B4;       /* 8.8 */
    --wk-card: #183D2B;
    --wk-card-2: #20503A;
    --wk-card-ink: #E3EFE6;    /* 12.1 */
    --wk-card-muted: #A8BFB0;  /* 7.3 */
    --wk-ground: #163F29;
    --wk-ground-2: #11331F;
    --wk-ground-ink: #E8F1E9;  /* 10.2 */
    --wk-ground-muted: #B8D3C1;/* 7.4 */
    --wk-btn-edge: #0B1A12;
    --wk-line: rgba(234, 242, 230, .12);
    --wk-line-strong: rgba(234, 242, 230, .26);
    --wk-shadow: rgba(0, 0, 0, .45);
    --wk-mudline: #8C6A4A;
    --wk-star: transparent;
    --wk-ground-input-line: rgba(184, 211, 193, .35);
    --wk-placeholder: #A8BFB0;

    --wk-m-ground: #1E4A33;
    --wk-m-meadow: #24573C;
    --wk-m-path: #3E2B1A;
    --wk-m-pond: #2B4A66;
    --wk-m-ripple: #5F82A3;
    --wk-m-tshadow: #133A26;
    --wk-m-tree: #0D2618;
    --wk-m-tlight: #1E4A33;
    --wk-m-daisy: #A9C4B4;
    --wk-m-gate: #8C6A4A;
    --wk-m-paw: #E8F1E9;
    --wk-m-route-shade: #0B1A12;

    --k-brand: #DDF45B;
    --k-brand-ink: #163F29;
    --k-brand-soft: rgba(221, 244, 91, .14);
    --k-hero: #163F29;
    --k-hero-ink: #E8F1E9;
    --k-bg: #0F2A1C;
    --k-surface: #183D2B;
    --k-surface-2: #20503A;
    --k-line: rgba(234, 242, 230, .12);
    --k-line-strong: rgba(234, 242, 230, .24);
    --k-text: #EAF2E6;
    --k-muted: #A9C4B4;
    --k-faint: #A9C4B4;
    --k-ok: #DDF45B;
    --k-ok-soft: rgba(221, 244, 91, .14);
    --k-warn: #E8C9A6;
    --k-warn-soft: rgba(232, 201, 166, .14);
    --k-info: #DDF45B;
    --k-info-soft: rgba(221, 244, 91, .16);
    --k-danger: #FFB39F;
    --k-shadow-1: 0 2px 0 rgba(0, 0, 0, .35);
    --k-shadow-2: 0 12px 32px rgba(0, 0, 0, .5);
  }
}

/* ---------- base: a sky with clouds by day, a moon and a few stars at dusk ---------- */
body.k-app { font-family: var(--wk-text); color: var(--wk-ink);
  background:
    radial-gradient(circle 1.6px at 18% 40px, var(--wk-star) 90%, transparent),
    radial-gradient(circle 1.4px at 46% 90px, var(--wk-star) 90%, transparent),
    radial-gradient(circle 1.8px at 70% 30px, var(--wk-star) 90%, transparent),
    var(--wk-bg);
  background-repeat: no-repeat; }
.k-app :is(h1, h2, h3) { font-family: var(--wk-display); font-weight: 400; letter-spacing: 0; line-height: 1.02; }
.k-app a { color: inherit; }
.k-app :focus-visible { outline: 3px solid var(--wk-ink); outline-offset: 3px; border-radius: 6px; }
.k-app .k-kicker, .wk-kicker, .wk-eyebrow { font: 900 .75rem/1.3 var(--wk-text); text-transform: uppercase; letter-spacing: .14em; color: var(--wk-muted); margin: 0 0 8px; }
.k-app .k-i { stroke-width: 2.2; }

/* Buttons: tennis balls with a deep edge that squash when pressed */
.k-app .k-btn, .wk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--wk-btn); color: var(--wk-btn-ink); font: 900 1rem/1.1 var(--wk-text); text-decoration: none; box-shadow: inset 0 0 0 2.5px var(--wk-btn-edge), 0 4px 0 var(--wk-btn-edge); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.k-app .k-btn:hover, .wk-btn:hover { filter: none; transform: translateY(-1px); }
.k-app .k-btn:active, .wk-btn:active { transform: translateY(3px) scale(.99, .97); box-shadow: inset 0 0 0 2.5px var(--wk-btn-edge), 0 1px 0 var(--wk-btn-edge); }
.k-app .k-btn-lg { min-height: 58px; padding: 0 30px; font-size: 1.0625rem; }
.k-app .k-btn-s { min-height: 44px; padding: 0 18px; font-size: .9375rem; box-shadow: inset 0 0 0 2px var(--wk-btn-edge), 0 3px 0 var(--wk-btn-edge); }
.k-app .k-btn-2, .k-app .k-btn-line, .wk-btn-line { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2.5px currentColor; }
.k-app .k-btn-2:active, .k-app .k-btn-line:active, .wk-btn-line:active { box-shadow: inset 0 0 0 2.5px currentColor; }
.k-app .wk-btn-deep { background: var(--wk-deep); color: var(--wk-ball); box-shadow: 0 4px 0 var(--wk-deep-shadow); }
.k-app .k-btn .k-i { width: 20px; height: 20px; }

/* ---------- the shell: header on the sky, a field-green nav ---------- */
.k-app .k-top { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; position: relative; }
.k-app .k-brand { color: var(--wk-ink); text-decoration: none; gap: 10px; }
.k-app .k-brand span { font: 400 1.0625rem/1.05 var(--wk-display); white-space: normal; overflow: visible; text-overflow: clip; }
.k-app .k-top .k-btn, .k-app .k-top a.k-signin { white-space: nowrap; }
.k-app .k-brand img { border-radius: 12px; }
.k-app .k-top a.k-signin { background: var(--wk-btn); color: var(--wk-btn-ink); font-weight: 900; box-shadow: inset 0 0 0 2px var(--wk-btn-edge), 0 3px 0 var(--wk-btn-edge); }
.k-app .k-avatar { background: var(--wk-ground); color: var(--wk-ground-ball); font-family: var(--wk-text); font-weight: 800; box-shadow: 0 0 0 3px var(--wk-ball); }
.k-app .wk-name { font-family: var(--wk-text); font-weight: 900; }
.wk-planlink { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: .9375rem; text-decoration: none; color: var(--wk-ink); }
.wk-planlink[aria-current="page"] { background: var(--wk-ground); color: var(--wk-ground-ball); }
.wk-planlink .k-i { width: 20px; height: 20px; }
@media (min-width: 480px) { .wk-planlink { display: inline-flex; } }

/* phones: a field-green bar along the bottom, the current stop a tennis-ball pill */
.wk-app .k-tabs { background: var(--wk-ground); border: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -6px 24px var(--wk-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; }
.wk-app .k-tabs a { color: var(--wk-ground-muted); font-weight: 800; border-radius: 16px; min-height: 54px; }
.wk-app .k-tabs a[aria-current="page"] { color: var(--wk-btn-ink); background: var(--wk-ball); }
.wk-app .k-tabs a[aria-current="page"] .k-i { stroke-width: 2.4; }
@media (min-width: 1024px) {
  body.wk-app[data-k-nav] .k-top { padding-top: 18px; padding-bottom: 14px; }
  body.wk-app[data-k-nav] .k-top .k-brand span { font-size: 1.375rem; }
  body.wk-app[data-k-nav] .k-tabs { position: sticky; top: 10px; z-index: 30; margin: 0 var(--k-gutter); padding: 6px; gap: 4px; border-radius: 999px; background: var(--wk-ground); border: 0; box-shadow: 0 8px 24px var(--wk-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.wk-app[data-k-nav] .k-tabs a { flex: 1; justify-content: center; min-height: 50px; padding: 0 18px; border-radius: 999px; color: var(--wk-ground-muted); font-size: 1rem; }
  body.wk-app[data-k-nav] .k-tabs a:hover { color: var(--wk-ground-ink); background: var(--wk-ground-2); }
  body.wk-app[data-k-nav] .k-tabs a[aria-current="page"] { color: var(--wk-btn-ink); background: var(--wk-ball); box-shadow: none; }
  body.wk-app[data-k-nav] .k-main { padding-top: 28px; padding-bottom: 0; }
}
.k-app .k-main { position: relative; }

/* page head */
.k-app .k-pagehead { align-items: flex-end; margin: 8px 0 22px; }
.k-app .k-pagehead h1 { font-family: var(--wk-display); font-weight: 400; font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4rem); line-height: .98; color: var(--wk-ink); }
.k-app .k-pagehead p { color: var(--wk-muted); }
.k-app .k-pagehead .k-kicker { color: var(--wk-muted); }

/* surfaces */
.k-app .k-card, .k-app .k-panel { background: var(--wk-card); color: var(--wk-card-ink); border-radius: 26px; box-shadow: 0 3px 0 var(--wk-line-strong); }
.k-app .k-card > p, .k-app .k-card .k-body, .k-app .k-card .k-help { color: var(--wk-card-muted); }
.k-app .k-card h2 { font-size: 1.5rem; }
.k-app .k-section-head h2 { font-size: 1.5rem; color: var(--wk-ink); }
.k-app .k-section-head a { font-weight: 800; color: var(--wk-ink); text-underline-offset: 3px; }
.k-app .k-help { color: var(--wk-card-muted); }

/* the field-green ground: a hill with a rounded top */
.wk-ground { position: relative; background: var(--wk-ground); color: var(--wk-ground-ink); border-radius: 36px; padding: 28px 22px; }
.wk-ground :is(h2, h3) { color: var(--wk-ground-ink); }
.wk-ground > h2 + p, .wk-ground > p + p { margin-top: 10px; }
.wk-ground p { line-height: 1.5; }
.k-app .k-plan .k-badge { align-self: flex-start; }
.wk-ground .k-kicker, .wk-ground .wk-eyebrow { color: var(--wk-ground-ball); }
.wk-ground a:not(.k-btn) { color: var(--wk-ground-ink); }
@media (min-width: 1024px) { .wk-ground { padding: 36px 40px; } }

/* badges: status as a tag */
.k-app .k-badge { font: 900 .75rem/1 var(--wk-text); letter-spacing: .04em; padding: 7px 12px; border-radius: 999px; }
.k-app [data-k-state="new"] .k-badge-state { background: var(--wk-ball); color: var(--wk-btn-ink); }
.k-app [data-k-state="ok"] .k-badge-state { background: var(--wk-field); color: var(--wk-ball); }
.k-app [data-k-state="done"] .k-badge-state { background: var(--wk-card-2); color: var(--wk-card-ink); box-shadow: inset 0 0 0 2px var(--wk-line-strong); }
.k-app [data-k-state="off"] .k-badge-state { background: var(--k-warn-soft); color: var(--k-danger); }
@media (prefers-color-scheme: dark) {
  .k-app [data-k-state="ok"] .k-badge-state { background: var(--wk-ball); color: var(--wk-btn-ink); }
  .k-app [data-k-state="new"] .k-badge-state { background: transparent; color: var(--wk-ball); box-shadow: inset 0 0 0 2px var(--wk-ball); }
}

/* ---------- the park map ---------- */
.wk-mapframe { position: relative; border-radius: 30px; overflow: hidden; background: var(--wk-m-ground); box-shadow: 0 0 0 4px var(--wk-card), 0 14px 34px var(--wk-shadow); isolation: isolate; }
.wk-map { display: block; width: 100%; height: auto; }
.wk-m-ground { fill: var(--wk-m-ground); }
.wk-m-meadow { fill: var(--wk-m-meadow); }
.wk-m-paths { stroke: var(--wk-m-path); }
.wk-m-pond { fill: var(--wk-m-pond); }
.wk-m-ripple { stroke: var(--wk-m-ripple); }
.wk-m-daisies { fill: var(--wk-m-daisy); }
.wk-m-tshadow { fill: var(--wk-m-tshadow); }
.wk-m-tree { fill: var(--wk-m-tree); }
.wk-m-tlight { fill: var(--wk-m-tlight); }
.wk-m-gate { fill: var(--wk-m-gate); }
.wk-paw { fill: var(--wk-m-paw); }
.wk-route, .wk-route-shade { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .01 20; }
.wk-route { stroke: var(--wk-m-route); stroke-width: 10; }
.wk-route-shade { stroke: var(--wk-m-route-shade); stroke-width: 16; }
.wk-reveal { fill: none; stroke: var(--wk-mask); stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; animation: wk-draw 2.6s cubic-bezier(.45, .05, .35, 1) .35s both; }
.wk-m-start { fill: var(--wk-m-paw); stroke: var(--wk-m-route-shade); stroke-width: 5; }
.wk-m-end { fill: var(--wk-m-route); stroke: var(--wk-m-route-shade); stroke-width: 6; }
.wk-anim .wk-paw { transform-box: fill-box; transform-origin: center; animation: wk-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.wk-anim .wk-paw:nth-of-type(1) { animation-delay: .9s; } .wk-anim .wk-paw:nth-of-type(2) { animation-delay: 1.4s; }
.wk-anim .wk-paw:nth-of-type(3) { animation-delay: 1.9s; } .wk-anim .wk-paw:nth-of-type(4) { animation-delay: 2.4s; }
.wk-anim .wk-m-end { transform-box: fill-box; transform-origin: center; animation: wk-pop .5s cubic-bezier(.3, 1.6, .5, 1) 2.8s both; }
@keyframes wk-draw { from { stroke-dashoffset: 1; } }
@keyframes wk-pop { from { transform: scale(0); } }
@keyframes wk-land { from { opacity: 0; transform: translateY(14px) scale(.9); } }
/* mini maps: one of three routes per card, so each walk has its own shape */
.wk-mini-map .wk-r { display: none; }
.wk-minis > :nth-child(3n+1) .wk-r1, .wk-minis > :nth-child(3n+2) .wk-r2, .wk-minis > :nth-child(3n) .wk-r3 { display: inline; }

/* the collar tag: a round photo, a ball-yellow ring and a bone name tag */
.wk-tag { --s: 112px; position: relative; display: inline-flex; min-width: 0; max-width: 100%; flex-direction: column; align-items: center; text-decoration: none; color: var(--wk-btn-ink); }
.wk-tag-ring { display: block; width: var(--s); height: var(--s); padding: calc(var(--s) * .07); border-radius: 50%; background: var(--wk-ball); box-shadow: 0 0 0 3px var(--wk-btn-edge), 0 8px 18px var(--wk-shadow); }
.wk-tag-ring img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--wk-btn-edge); background: var(--wk-card-2); }
.wk-bone { position: relative; z-index: 1; margin-top: -12px; padding: 5px 20px 6px; border-radius: 999px; background: var(--wk-ball); color: var(--wk-btn-ink); font: 400 1rem/1.1 var(--wk-display); max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; box-shadow: 0 0 0 2.5px var(--wk-btn-edge); }
.wk-bone::before, .wk-bone::after { content: ""; position: absolute; top: 50%; width: 20px; height: 34px; margin-top: -17px;
  background: radial-gradient(circle 8.5px at 50% 8.5px, var(--wk-ball) 92%, transparent 100%), radial-gradient(circle 8.5px at 50% 25.5px, var(--wk-ball) 92%, transparent 100%);
  filter: drop-shadow(0 0 0 var(--wk-btn-edge)) drop-shadow(1px 0 0 var(--wk-btn-edge)) drop-shadow(-1px 0 0 var(--wk-btn-edge)) drop-shadow(0 1px 0 var(--wk-btn-edge)) drop-shadow(0 -1px 0 var(--wk-btn-edge)); z-index: -1; }
.wk-bone::before { left: -9px; } .wk-bone::after { right: -9px; }
.wk-tag small { display: block; max-width: 100%; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--wk-card); color: var(--wk-card-ink); font: 800 .75rem/1.3 var(--wk-text); text-align: center; }
.wk-tag-lg { --s: 220px; }
.wk-tag-lg .wk-bone { font-size: 1.75rem; padding: 6px 30px 8px; margin-top: -18px; }
.wk-tag-lg .wk-bone::before, .wk-tag-lg .wk-bone::after { width: 26px; height: 46px; margin-top: -23px; background: radial-gradient(circle 11.5px at 50% 11.5px, var(--wk-ball) 92%, transparent 100%), radial-gradient(circle 11.5px at 50% 34.5px, var(--wk-ball) 92%, transparent 100%); }
.wk-tag-lg .wk-bone::before { left: -13px; } .wk-tag-lg .wk-bone::after { right: -13px; }

/* tags pinned on the map at the end of the route */
.wk-pin { position: absolute; z-index: 2; left: 80%; top: 23.6%; translate: -50% -40%; animation: wk-land .5s cubic-bezier(.3, 1.5, .5, 1) 3s both; }
.wk-pack-empty .k-btn { box-shadow: inset 0 0 0 2px var(--wk-btn-edge), 0 3px 0 var(--wk-btn-edge); }

/* the readout: a big Bagel number on the field */
.wk-readout { background: var(--wk-ground); color: var(--wk-ground-ink); border-radius: 30px; padding: 24px 22px 26px; display: grid; align-content: start; gap: 10px; }
.wk-ro-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font: 900 .75rem/1.3 var(--wk-text); text-transform: uppercase; letter-spacing: .14em; color: var(--wk-ground-ball); }
.wk-ro-dog { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); margin: 0; color: var(--wk-ground-ink); }
.wk-ro-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 2px 0 0; color: var(--wk-ground-ball); font-family: var(--wk-display); line-height: .9; }
.wk-ro-big b { font-weight: 400; font-size: clamp(3.4rem, 1.6rem + 5vw, 5.5rem); letter-spacing: -.01em; }
.wk-ro-big small { font-size: 1.5rem; margin-left: -4px; }
.wk-ro-big i { font-style: normal; font-size: 2.5rem; opacity: .7; }
.wk-ro-route { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-weight: 800; color: var(--wk-ground-ink); }
.wk-ro-route .k-i { color: var(--wk-ground-ball); width: 20px; height: 20px; }
.wk-readout .wk-went { color: var(--wk-ground-muted); margin: 0; font-size: 1rem; line-height: 1.5; }
.wk-readout .wk-acts { margin-top: 6px; }
.wk-readout-empty h3 { font-size: 1.75rem; }
.wk-readout-empty p { color: var(--wk-ground-muted); margin: 0; }
.wk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.wk-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; text-underline-offset: 3px; }
.wk-link .k-i { width: 20px; height: 20px; }

/* Home: the map and the readout side by side from 1024 px */
.wk-park { display: grid; gap: 18px; }
@media (min-width: 1024px) { .wk-park { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); align-items: stretch; gap: 24px; } .wk-park .wk-readout { padding: 32px 32px 34px; align-content: center; } .wk-park > [data-pl-view="cards"][data-pl-list="reports"] { display: flex; flex-direction: column; } .wk-park > [data-pl-view="cards"][data-pl-list="reports"] > .wk-readout { flex: 1; } }
.k-app .k-pagehead h1.wk-h1-home { font-size: clamp(3.25rem, 1.4rem + 3.2vw, 5.5rem); }

/* ---------- the next walk: a trip card with four stops along a path ---------- */
.wk-next { position: relative; background: var(--wk-card); color: var(--wk-card-ink); border-radius: 28px; padding: 22px 22px 24px; box-shadow: 0 3px 0 var(--wk-line-strong); }
.wk-next + .wk-next { margin-top: 18px; }
.wk-next-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wk-next-top .wk-eyebrow { margin: 0; color: var(--wk-card-muted); }
.wk-when { font-family: var(--wk-display); font-weight: 400; line-height: 1; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); margin: 12px 0 0; color: var(--wk-card-ink); }
.wk-slot { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-weight: 800; font-size: 1.0625rem; }
.wk-slot .k-i { width: 20px; height: 20px; color: var(--wk-card-muted); }
.wk-who { margin: 4px 0 0; color: var(--wk-card-muted); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wk-who span + span::before { content: " · "; }
.wk-notes { margin: 14px 0 0; padding-left: 14px; border-left: 4px solid var(--wk-line-strong); color: var(--wk-card-muted); font-style: italic; }
.wk-notes:empty { display: none; }
.wk-reply { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; }
.wk-reply:has(q:empty) { display: none; }
.wk-bea { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wk-ball); color: var(--wk-btn-ink); font: 800 1.125rem/1 var(--wk-text); }
.wk-reply q { display: block; padding: 12px 16px; border-radius: 4px 20px 20px 20px; background: var(--wk-sky); color: var(--wk-deep); font-weight: 600; quotes: none; }
.wk-reply q::before, .wk-reply q::after { content: none; }
.wk-next .wk-acts { margin-top: 14px; padding-top: 10px; border-top: 2px dashed var(--wk-line); }
.wk-next .wk-link { color: var(--wk-card-ink); }
.wk-next[data-k-state="off"] .wk-when { opacity: .75; }
.wk-off { display: none; }
.wk-next[data-k-state="off"] .wk-off { display: inline; }
.wk-next[data-k-state="off"] .wk-on { display: none; }
@media (prefers-color-scheme: dark) { .wk-reply q { background: var(--wk-card-2); color: var(--wk-card-ink); } }

/* the stops: a Mud path, ball-yellow paw stops behind you, a bouncing ball where the walk is now */
.k-app .k-steps.wk-stops { gap: 0; margin: 20px 0 0; }
.k-app .k-steps.wk-stops li { padding: 40px 2px 0; text-align: center; color: var(--wk-card-muted); font: 800 .75rem/1.2 var(--wk-text); letter-spacing: .02em; overflow-wrap: normal; hyphens: none; }
.k-app .k-steps.wk-stops li::before { top: 13px; left: 0; right: 0; height: 6px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--wk-mudline) 0 6px, transparent 6px 13px); opacity: .55; animation: none; }
.k-app .k-steps.wk-stops li:first-child::before { left: 50%; } .k-app .k-steps.wk-stops li:last-child::before { right: 50%; }
.k-app .k-steps.wk-stops li::after { content: ""; position: absolute; top: 2px; left: calc(50% - 14px); width: 28px; height: 28px; border-radius: 50%; background: var(--wk-card); box-shadow: inset 0 0 0 3px var(--wk-mudline); }
.k-app .k-steps.wk-stops li.k-done, .k-app .k-steps.wk-stops li.k-now { color: var(--wk-card-ink); }
.k-app .k-steps.wk-stops li.k-done::before, .k-app .k-steps.wk-stops li.k-now::before { background: var(--wk-mudline); opacity: 1; }
.k-app .k-steps.wk-stops li.k-now::before { right: 50%; }
.k-app .k-steps.wk-stops li.k-now:first-child::before { display: none; }
.k-app .k-steps.wk-stops li.k-done::after { background: var(--wk-ball) url("art/stop-paw.svg") center / 16px no-repeat; box-shadow: inset 0 0 0 3px var(--wk-btn-edge); }
.k-app .k-steps.wk-stops li.k-now::after { top: -4px; left: calc(50% - 20px); width: 40px; height: 40px; background: var(--wk-ball) url("art/stop-ball.svg") center / 100% no-repeat; box-shadow: 0 0 0 3px var(--wk-btn-edge), 0 6px 0 -2px var(--wk-line-strong); animation: wk-bounce 1.4s ease-in-out infinite; }
.k-app .k-steps.wk-stops li.k-now { font-weight: 900; }
@keyframes wk-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } 55% { transform: translateY(0) scale(1.06, .94); } }
.wk-next[data-k-state="off"] .k-steps.wk-stops { opacity: 1; }
.wk-ground .k-steps.wk-stops li { color: var(--wk-ground-muted); }
.wk-ground .k-steps.wk-stops li.k-done, .wk-ground .k-steps.wk-stops li.k-now { color: var(--wk-ground-ink); }
.wk-ground .k-steps.wk-stops li::after { background: var(--wk-ground); box-shadow: inset 0 0 0 3px var(--wk-ground-muted); }
.wk-ground .k-steps.wk-stops li::before { background: repeating-linear-gradient(90deg, var(--wk-ground-muted) 0 6px, transparent 6px 13px); }
.wk-ground .k-steps.wk-stops li.k-done::before { background: var(--wk-ground-ball); }

/* ---------- Home side column ---------- */
.wk-side .k-card h2 { font-size: 1.625rem; }
.wk-nudge { display: grid; gap: 10px; }
.wk-nudge p { margin: 0; }
.wk-nudge .k-btn { justify-self: start; }
.wk-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.wk-rules li { position: relative; padding-left: 30px; color: var(--wk-card-muted); }
.wk-rules li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--wk-ball) url("art/stop-paw.svg") center / 12px no-repeat; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--wk-btn-edge); }
.wk-ground .wk-rules li { color: var(--wk-ground-muted); }

/* empty states: a drawn tennis ball */
.k-app .k-empty .k-empty-art { width: 76px; height: 76px; background: var(--wk-ball) url("art/stop-ball.svg") center / 100% no-repeat; color: transparent; box-shadow: 0 0 0 3px var(--wk-btn-edge); }
.k-app .k-empty .k-empty-art .k-i { opacity: 0; }
.k-app .k-empty h3 { font-family: var(--wk-display); font-size: 1.5rem; color: var(--wk-card-ink); }
.k-app .k-empty p { color: var(--wk-card-muted); }

/* signed out: inner pages get a field gate */
.k-app .wk-gate { background: var(--wk-ground); color: var(--wk-ground-ink); border-radius: 36px; padding: 44px 24px; max-width: 640px; margin: 24px auto 0; }
.k-app .wk-gate h3 { color: var(--wk-ground-ink); font-size: 2.25rem; }
.k-app .wk-gate p { color: var(--wk-ground-muted); }
.k-app .wk-gate .k-empty-art { width: 96px; height: 96px; }

/* signed-out welcome on Home */
.k-app .k-welcome { align-items: center; padding-top: 8px; }
.k-app .k-welcome h1 { font-size: clamp(2.75rem, 1.6rem + 5vw, 5.5rem); line-height: .95; color: var(--wk-ink); letter-spacing: 0; }
.k-app .k-welcome .k-lead { color: var(--wk-muted); font-size: 1.125rem; }
.wk-welcome-map { position: relative; }
.k-app .k-perks li { color: var(--wk-ink); font-weight: 700; }
.k-app .k-perks .k-tile { background: var(--wk-ball); color: var(--wk-btn-ink); box-shadow: inset 0 0 0 2px var(--wk-btn-edge); border-radius: 50%; }
.k-app .k-welcome .k-help { color: var(--wk-muted); }
.k-app .k-welcome .k-help a { font-weight: 800; }
@media (min-width: 1024px) { .k-app .k-welcome { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; } .k-app .k-welcome > .wk-welcome-map { order: 2; } }

/* ---------- Walks ---------- */
.wk-cancel h2 { font-size: 1.75rem; }
.k-app .k-list { background: var(--wk-card); border-radius: 22px; box-shadow: 0 3px 0 var(--wk-line-strong); }
.k-app .k-row .k-tile { background: var(--wk-card-2); color: var(--wk-card-ink); border-radius: 50%; }
.k-app .k-row-title { color: var(--wk-card-ink); font-weight: 800; }
.k-app .k-row-sub { color: var(--wk-card-muted); }
[data-pl-view="cards"][data-pl-list="cancellations"] .k-row-title, [data-pl-view="cards"][data-pl-list="cancellations"] .k-row-sub { display: block; white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
.k-app .k-table { background: var(--wk-card); border-radius: 24px; box-shadow: 0 3px 0 var(--wk-line-strong); }
.k-app .k-thead { background: var(--wk-ground); color: var(--wk-ground-ink); }
.k-app .k-td { color: var(--wk-card-muted); }
.k-app .k-td-main { color: var(--wk-card-ink); font-weight: 800; }
.k-app a.k-tr:hover { background: var(--wk-card-2); }
.wk-cols { --k-cols: minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.8fr) minmax(0, .9fr); }
.wk-again { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; color: var(--wk-card-ink); white-space: nowrap; }
.wk-again .k-i { width: 18px; height: 18px; }
@media (max-width: 1023px) { .k-tr .k-td:nth-child(3) { order: 0; margin-left: auto; } .k-tr .k-td.wk-again { order: 3; flex-basis: 100%; margin-left: 0; text-align: left; min-height: 32px; } }

/* ---------- Reports: a grid of small park maps ---------- */
.wk-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 0 24px; padding: 18px 12px; border-radius: 28px; background: var(--wk-ground); color: var(--wk-ground-ink); text-align: center; }
.wk-metrics b { display: block; font: 400 clamp(2.25rem, 1.5rem + 3vw, 4rem)/1 var(--wk-display); color: var(--wk-ground-ball); }
.wk-metrics span { display: block; margin-top: 6px; font-weight: 800; font-size: .8125rem; color: var(--wk-ground-muted); }
.wk-minis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 700px) { .wk-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .wk-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wk-mini { display: flex; flex-direction: column; background: var(--wk-card); color: var(--wk-card-ink); border-radius: 28px; overflow: hidden; box-shadow: 0 3px 0 var(--wk-line-strong); }
.wk-mini-map { position: relative; }
.wk-mini-map .wk-map { aspect-ratio: 8 / 5; }
.wk-mini-num { position: absolute; left: auto; right: 14px; bottom: 12px; width: auto; height: 44px; max-width: calc(100% - 28px); display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 0 18px; border-radius: 999px; background: var(--wk-ball); color: var(--wk-btn-ink); font-family: var(--wk-display); line-height: 1; box-shadow: 0 0 0 2.5px var(--wk-btn-edge); }
.wk-mini-num b { font-weight: 400; font-size: 1.75rem; min-width: 0; overflow-wrap: anywhere; }
.wk-mini-num small { font-size: .9375rem; }
.wk-mini-body { display: grid; gap: 8px; padding: 18px 20px 20px; }
.wk-mini-body .wk-ro-meta { color: var(--wk-card-muted); }
.wk-mini-body h2 { font-size: 1.75rem; margin: 0; color: var(--wk-card-ink); min-width: 0; overflow-wrap: anywhere; }
.wk-mini-body .wk-ro-route { color: var(--wk-card-ink); }
.wk-mini-body .wk-ro-route .k-i { color: var(--wk-card-muted); }
.wk-mini-body .wk-went { margin: 0; color: var(--wk-card-muted); }
.wk-mini-body .wk-link { color: var(--wk-card-ink); }
.wk-mini .k-empty { grid-column: 1 / -1; }
.wk-mini-map .wk-mini-tag { position: absolute; top: 12px; right: 12px; z-index: 2; --s: 88px; }
@media (max-width: 699px) { .wk-mini-map .wk-mini-tag { --s: 64px; } }

/* ---------- Dogs: big collar tags ---------- */
.wk-dogs { display: grid; gap: 22px; }
.wk-dog { display: grid; gap: 18px; justify-items: center; padding: 28px 22px; background: var(--wk-card); color: var(--wk-card-ink); border-radius: 32px; box-shadow: 0 3px 0 var(--wk-line-strong); }
.wk-dog-body { width: 100%; display: grid; gap: 10px; }
.wk-dog-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; font-weight: 800; color: var(--wk-card-muted); }
.wk-dog .k-kv { margin: 0; }
.wk-dog .k-kv dt { color: var(--wk-card-muted); font-weight: 800; }
.wk-dog .k-kv dd { color: var(--wk-card-ink); font-weight: 700; }
.wk-dog .wk-went { margin: 0; padding: 12px 16px; border-radius: 4px 20px 20px 20px; background: var(--wk-sky); color: var(--wk-deep); font-weight: 600; }
@media (prefers-color-scheme: dark) { .wk-dog .wk-went { background: var(--wk-card-2); color: var(--wk-card-ink); } }
@media (min-width: 700px) { .wk-dog { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 32px; padding: 30px 34px; } .wk-dog-meta { justify-content: flex-start; } }
.wk-dogs .k-empty { background: var(--wk-card); border-radius: 32px; }

/* forms */
.k-app .k-field > label { color: inherit; font-weight: 800; font-size: .875rem; }
.k-app input[type="text"], .k-app input[type="email"], .k-app input[type="date"], .k-app input[type="number"], .k-app input[type="tel"], .k-app select, .k-app textarea { border-radius: 16px; border: 2px solid var(--wk-line-strong); background: var(--wk-card); color: var(--wk-card-ink); font-family: var(--wk-text); font-weight: 600; }
.k-app input:focus, .k-app select:focus, .k-app textarea:focus { border-color: var(--wk-ink); box-shadow: 0 0 0 4px var(--wk-ball); }
.wk-ground .k-field > label { color: var(--wk-ground-ink); }
.wk-ground .k-help { color: var(--wk-ground-muted); }
.wk-ground input[type="text"], .wk-ground input[type="date"], .wk-ground input[type="number"], .wk-ground select, .wk-ground textarea { border-color: transparent; background: var(--wk-chalk); color: var(--wk-deep); }
.wk-ground input:focus, .wk-ground select:focus, .wk-ground textarea:focus { border-color: var(--wk-ball); box-shadow: 0 0 0 4px var(--wk-focus-glow); }
.k-app input[type="file"] { color: var(--wk-card-ink); }

/* ---------- Book: the form on the field, day pills as tennis balls ---------- */
.wk-book h2 { font-size: 1.75rem; margin: 0 0 6px; }
.wk-book .k-form { gap: 18px; margin-top: 22px; padding-top: 22px; border-top: 2px dashed var(--wk-form-divider); }
.k-app .k-card > h2 + .wk-rules { margin-top: 12px; }
.wk-dogpick { display: flex; flex-wrap: wrap; gap: 18px 22px; margin-top: 14px; }
.wk-dogbtn { display: inline-flex; min-width: 0; max-width: 100%; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.wk-dogbtn .wk-tag-ring { --s: 92px; transition: transform .15s ease; }
.wk-dogbtn .wk-bone { font-size: .9375rem; padding: 4px 14px 5px; }
.wk-dogbtn[aria-pressed="false"] .wk-tag-ring { background: var(--wk-ground-2); box-shadow: 0 0 0 3px var(--wk-ground-muted); }
.wk-dogbtn[aria-pressed="false"] .wk-tag-ring img { opacity: .4; filter: grayscale(.6); }
.wk-dogbtn[aria-pressed="false"] .wk-bone { background: var(--wk-ground-2); color: var(--wk-ground-ink); box-shadow: 0 0 0 2px var(--wk-ground-muted); }
.wk-dogbtn[aria-pressed="false"] .wk-bone::before, .wk-dogbtn[aria-pressed="false"] .wk-bone::after { display: none; }
.wk-dogbtn:active .wk-tag-ring { transform: scale(.95); }
.wk-dogbtn .wk-tag-ring { position: relative; }
.wk-dogbtn[aria-pressed="true"] .wk-tag-ring::after { content: ""; position: absolute; top: 0; right: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--wk-field); box-shadow: 0 0 0 3px var(--wk-ball); }
.wk-dogbtn[aria-pressed="true"] .wk-tag-ring::before { content: ""; position: absolute; top: 7px; right: 12px; z-index: 1; width: 6px; height: 12px; border: solid var(--wk-chalk); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.wk-dogpick .k-empty { background: var(--wk-card); border-radius: 26px; width: 100%; }
.wk-book .k-day-chips { gap: 12px; padding: 6px 2px 10px; margin: 0; overflow-x: auto; flex-wrap: nowrap; }
.wk-book .k-day-chips .k-chip { flex: none; width: 80px; height: 80px; min-height: 80px; padding: 0; justify-content: center; border-radius: 50%; background: var(--wk-ground-2) url("art/chip-seam.svg") center / 100% no-repeat; color: var(--wk-ground-ink); font: 800 .8125rem/1.15 var(--wk-text); text-align: center; box-shadow: inset 0 0 0 3px var(--wk-ground-muted); white-space: normal; letter-spacing: -.01em; }
.wk-book .k-day-chips .k-chip[aria-current="true"] { background-color: var(--wk-ball); color: var(--wk-btn-ink); box-shadow: inset 0 0 0 3px var(--wk-btn-edge), 0 4px 0 var(--wk-btn-edge); }
.wk-prices { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.wk-prices li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; }
.wk-prices li + li { border-top: 2px dashed var(--wk-line); }
.wk-prices b { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--wk-ball); color: var(--wk-btn-ink); font: 400 1.25rem/1 var(--wk-display); box-shadow: inset 0 0 0 2.5px var(--wk-btn-edge); }
.wk-prices strong { display: block; font-weight: 900; color: var(--wk-card-ink); }
.wk-prices span { color: var(--wk-card-muted); font-size: .9375rem; }

/* ---------- Plan: two price tags ---------- */
.k-app .k-plans { gap: 22px; }
@media (min-width: 700px) { .k-app .k-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k-app .k-plan { background: var(--wk-card); color: var(--wk-card-ink); border-radius: 32px; padding: 28px 26px; box-shadow: 0 3px 0 var(--wk-line-strong); gap: 14px; }
.k-app .k-plan h3 { font-size: 1.875rem; color: var(--wk-card-ink); }
.k-app .k-plan .k-price { display: inline-flex; align-items: baseline; gap: 6px; font: 400 3.5rem/1 var(--wk-display); color: var(--wk-card-ink); letter-spacing: 0; }
.k-app .k-plan .k-price small { font: 800 1rem/1 var(--wk-text); color: var(--wk-card-muted); }
.k-app .k-plan ul { color: var(--wk-card-muted); }
.k-app .k-plan li .k-i { color: var(--wk-card-ink); }
.k-app .k-plan-feature { background: var(--wk-ground); color: var(--wk-ground-ink); box-shadow: 0 3px 0 var(--wk-btn-edge); outline: 0; }
.k-app .k-plan-feature h3, .k-app .k-plan-feature .k-price { color: var(--wk-ground-ball); }
.k-app .k-plan-feature .k-price small, .k-app .k-plan-feature ul { color: var(--wk-ground-muted); }
.k-app .k-plan-feature li .k-i { color: var(--wk-ground-ball); }
.k-app .k-plan .k-badge-brand { background: var(--wk-ball); color: var(--wk-btn-ink); }
.k-app .k-plan .k-badge-ok { background: var(--wk-sky); color: var(--wk-deep); }
.k-app .k-plan-feature .k-badge-ok { background: var(--wk-chalk); color: var(--wk-deep); }

/* ---------- Account ---------- */
.k-app .k-account > p:first-child, .k-app .k-account ul, .k-app .k-account form:last-of-type:has(input[type="checkbox"]) { background: var(--wk-card); color: var(--wk-card-ink); border-radius: 22px; box-shadow: 0 3px 0 var(--wk-line-strong); }
.k-app .k-account h3 { font-family: var(--wk-display); font-weight: 400; font-size: 1.25rem; color: var(--wk-ink); }
.k-app .k-account li { color: var(--wk-card-ink); }
.k-app .k-account button { background: var(--wk-ball); color: var(--wk-btn-ink); font-weight: 900; box-shadow: inset 0 0 0 2px var(--wk-btn-edge); }
.k-app .k-account form:has(input[type="checkbox"]) button { background: transparent; color: var(--k-danger); box-shadow: inset 0 0 0 2px currentColor; }
.k-app .k-account small, .k-app .k-account > p:last-child { color: var(--wk-muted); }
.wk-acct-tag { display: flex; align-items: center; gap: 18px; }

/* toast */
.k-app .k-toast, .k-app [data-pl-status]:not(:empty) { background: var(--wk-deep); color: var(--wk-ball); font-weight: 800; border-radius: 999px; }

/* footer: the deep field at the bottom of the page */
.k-app .k-foot { margin-top: 56px; padding: 28px; border: 0; border-radius: 28px; background: var(--wk-deep); color: var(--wk-ground-muted); font-weight: 700; }
.k-app .k-foot a { color: var(--wk-ground-ink); }
.k-app .k-foot span:first-child { font: 400 1.125rem/1 var(--wk-display); color: var(--wk-ground-ball); }
@media (prefers-color-scheme: dark) { .k-app .k-foot { background: var(--wk-ground-2); } }

/* ---------- public page: a poster of sky and field ---------- */
body.k-app.wk-pub { display: block; padding-bottom: 0; margin-bottom: 0; }
body.k-app.wk-pub { background: var(--wk-bg); background-repeat: no-repeat; }
.wk-pub .k-top .k-brand { display: flex; }
.wk-pub .k-top .k-brand span { font-size: 1.25rem; }
@media (max-width: 899px) { .wk-pub .k-top .k-brand span { font-size: 1.0625rem; } }
.wk-pub .k-main { max-width: none; padding: 0; }
.wk-pub .k-top { width: min(100%, 1360px); margin: 0 auto; padding: 14px 16px; }
.wk-pub-nav { display: none; gap: 4px; margin-left: auto; }
.wk-pub-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 800; text-decoration: none; color: var(--wk-ink); }
.wk-pub-nav a:hover { background: var(--wk-cloud); }
.wk-pub .k-top-end { margin-left: 12px; }
@media (min-width: 900px) { .wk-pub-nav { display: flex; } .wk-pub .k-top { padding: 20px 40px; } }
.wk-wrap { width: min(100%, 1360px); margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .wk-wrap { padding: 0 40px; } }

.wk-poster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 6px; padding-bottom: 40px; }
.wk-poster h1 { font-size: clamp(3.5rem, 15vw, 7.5rem); line-height: .86; color: var(--wk-ink); margin: 0 0 24px; letter-spacing: -.01em; }
.wk-poster h1 span { display: block; color: var(--wk-field); }
.wk-poster .k-lead { margin: 24px 0 0; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; color: var(--wk-muted); max-width: 34ch; font-weight: 600; }
.wk-poster .k-btn-row { margin-top: 24px; gap: 14px; }
.wk-poster .wk-fine { margin: 18px 0 0; font-weight: 700; color: var(--wk-muted); font-size: .9375rem; }
.wk-poster-map { position: relative; padding-bottom: 34px; }
.wk-poster-map .wk-mapframe { box-shadow: 0 0 0 5px var(--wk-card), 0 22px 50px var(--wk-shadow); }
.wk-poster-map .wk-tag { --s: 104px; }
.wk-ro-chip { position: absolute; z-index: 3; left: 5%; bottom: -34px; width: max-content; max-width: 90%; margin: 0; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding: 12px 20px 14px; border-radius: 26px; background: var(--wk-ground); color: var(--wk-ground-ball); font-family: var(--wk-display); line-height: .95; box-shadow: 0 0 0 4px var(--wk-card); animation: wk-land .5s cubic-bezier(.3, 1.5, .5, 1) 3.2s both; }
.wk-ro-chip b { font-weight: 400; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); }
.wk-ro-chip small { font-size: 1.125rem; }
.wk-ro-chip span { flex-basis: 100%; font: 800 .8125rem/1.3 var(--wk-text); color: var(--wk-ground-muted); letter-spacing: .02em; }
@media (min-width: 700px) { .wk-poster-map .wk-tag { --s: 140px; } .wk-poster-map .wk-tag .wk-bone { font-size: 1.25rem; } }
@media (min-width: 1024px) {
  .wk-poster { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; gap: 56px; padding-top: 20px; padding-bottom: 72px; min-height: min(780px, calc(100vh - 96px)); }
}
@media (min-width: 1024px) {
  .wk-poster h1 { font-size: clamp(4rem, 9vw, 8.5rem); }
  .wk-poster { grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); }
  .wk-poster-map .wk-mapframe { box-shadow: none; border-radius: 30px 0 0 30px; }
  .wk-poster-map { margin-top: 48px; }
}
@media (max-width: 699px) { .wk-poster-map { padding-bottom: 0; } .wk-ro-chip { position: relative; left: auto; bottom: auto; width: auto; max-width: none; margin: -30px 14px 0; } }

/* sections on the field: a hill with a rounded top */
.wk-field { position: relative; background: var(--wk-ground); color: var(--wk-ground-ink); border-radius: 50% 50% 0 0 / 56px 56px 0 0; padding: 72px 0 64px; }
.wk-field + .wk-field { border-radius: 0; padding-top: 24px; }
.wk-field h2, .wk-sky h2 { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem); line-height: .94; margin: 0; }
.wk-field h2 { color: var(--wk-ground-ink); }
.wk-field h2 em, .wk-sky h2 em { font-style: normal; color: var(--wk-ground-ball); }
.wk-sky h2 em { color: var(--wk-field); }
.wk-field .wk-intro, .wk-sky .wk-intro { margin: 16px 0 0; max-width: 52ch; font-size: 1.125rem; line-height: 1.5; font-weight: 600; }
.wk-field .wk-intro { color: var(--wk-ground-muted); }
.wk-sky { padding: 72px 0; }
.wk-sky .wk-intro { color: var(--wk-muted); }
@media (prefers-color-scheme: dark) {
  .wk-sky h2 em, .wk-poster h1 span { color: var(--wk-ball); }
  .wk-readout { box-shadow: inset 0 0 0 2px var(--wk-readout-edge); }
  .wk-ground input[type="text"], .wk-ground input[type="date"], .wk-ground input[type="number"], .wk-ground select, .wk-ground textarea { background: var(--wk-ground-2); color: var(--wk-ground-ink); border-color: var(--wk-ground-input-line); }
}

/* the app's screens at real scale */
.wk-screens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 40px; justify-items: center; }
@media (min-width: 1100px) { .wk-screens { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 28px; } }
.wk-phone { width: min(100%, 360px); min-width: 0; margin: 0; }
.wk-phone-in { padding: 14px 14px 18px; border-radius: 40px; background: var(--wk-bg); box-shadow: 0 0 0 8px var(--wk-deep), 0 0 0 10px var(--wk-ground-muted), 0 26px 50px var(--wk-phone-shadow); color: var(--wk-ink); overflow: hidden; }
.wk-phone-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 14px; font: 400 1rem/1 var(--wk-display); color: var(--wk-ink); }
.wk-phone-bar img { border-radius: 9px; }
.wk-phone-bar span { display: flex; align-items: center; gap: 8px; }
.wk-phone-bar i { font-style: normal; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wk-field); color: var(--wk-ball); font: 900 .8125rem/1 var(--wk-text); box-shadow: 0 0 0 2.5px var(--wk-ball); }
.wk-phone .wk-next { box-shadow: none; padding: 18px 16px 18px; }
.wk-phone .wk-when { font-family: var(--wk-display); font-weight: 400; line-height: 1; font-size: 2.5rem; }
.wk-phone .wk-mini { box-shadow: none; }
.wk-phone .wk-dog { box-shadow: none; padding: 22px 16px; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
.wk-phone .wk-dog .wk-dog-meta { justify-content: center; }
.wk-phone .wk-tag-lg { --s: 176px; }
.wk-phone .wk-tag-lg .wk-bone { font-size: 1.5rem; }
.wk-screen-cap { margin: 22px 0 0; text-align: center; font-weight: 700; color: var(--wk-ground-muted); max-width: 32ch; margin-left: auto; margin-right: auto; }
.wk-screen-cap b { display: block; font: 400 1.5rem/1.1 var(--wk-display); color: var(--wk-ground-ink); margin-bottom: 4px; }

/* prices: tennis-ball price tags */
.wk-pricegrid { display: grid; gap: 20px; margin-top: 36px; }
@media (min-width: 800px) { .wk-pricegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wk-price { position: relative; padding: 26px 24px 26px; border-radius: 32px; background: var(--wk-card); color: var(--wk-card-ink); box-shadow: 0 3px 0 var(--wk-line-strong); display: grid; gap: 10px; }
.wk-price-ball { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--wk-ball) url("art/stop-ball.svg") center / 100% no-repeat; box-shadow: 0 0 0 3px var(--wk-btn-edge), 0 6px 0 var(--wk-btn-edge); color: var(--wk-btn-ink); font: 400 2.375rem/1 var(--wk-display); }
.wk-price h3 { font-size: 1.875rem; margin: 6px 0 0; color: var(--wk-card-ink); }
.wk-price .wk-per { margin: 0; font-weight: 900; color: var(--wk-card-muted); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.wk-price p { margin: 0; color: var(--wk-card-muted); line-height: 1.5; }
.wk-plans { display: grid; gap: 20px; margin-top: 20px; }
@media (min-width: 800px) { .wk-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wk-plan-big { grid-column: span 2; } }
.wk-plan { padding: 24px 26px; border-radius: 32px; background: var(--wk-card); color: var(--wk-card-ink); box-shadow: 0 3px 0 var(--wk-line-strong); }
.wk-plan h3 { font-size: 1.625rem; margin: 0; color: var(--wk-card-ink); }
.wk-plan p { margin: 8px 0 0; color: var(--wk-card-muted); line-height: 1.5; }
.wk-plan-big { display: grid; gap: 16px; align-items: center; background: var(--wk-ground); color: var(--wk-ground-ink); }
.wk-plan-big h3 { color: var(--wk-ground-ink); }
.wk-plan-big p { color: var(--wk-ground-muted); }
.wk-plan-big .wk-plan-num { font: 400 clamp(3.5rem, 2.6rem + 3vw, 5.5rem)/.9 var(--wk-display); color: var(--wk-ground-ball); margin: 0; }
.wk-plan-big .wk-plan-num small { font: 800 1rem/1 var(--wk-text); color: var(--wk-ground-muted); margin-left: 6px; }
@media (min-width: 800px) { .wk-plan-big { grid-template-columns: auto minmax(0, 1fr); gap: 32px; } }

/* where we walk */
.wk-area { display: grid; gap: 22px; margin-top: 36px; }
@media (min-width: 900px) { .wk-area { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; } }
.wk-area figure { margin: 0; position: relative; border-radius: 32px; overflow: hidden; box-shadow: 0 0 0 4px var(--wk-card), 0 16px 34px var(--wk-shadow); min-height: 260px; }
.wk-area img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk-area figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: var(--wk-ball); color: var(--wk-btn-ink); font-weight: 900; font-size: .875rem; box-shadow: 0 0 0 2.5px var(--wk-btn-edge); }
.wk-area-side { display: grid; gap: 22px; }
.wk-area-side .wk-plan h3 { font-size: 1.5rem; }
.wk-area-side figure { min-height: 220px; }

/* meet and greet */
.wk-meet { display: grid; gap: 30px; margin-top: 36px; }
@media (min-width: 1024px) { .wk-meet { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 48px; } }
.wk-how .k-steps.wk-stops { margin: 0; }
.wk-how .k-steps.wk-stops li { font-size: .875rem; padding-top: 44px; }
.wk-how-text { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: wk; }
.wk-how-text li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--wk-ground-muted); line-height: 1.5; }
.wk-how-text li::before { counter-increment: wk; content: counter(wk); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wk-ball); color: var(--wk-btn-ink); font: 400 1.25rem/1 var(--wk-display); }
.wk-how-text b { display: block; color: var(--wk-ground-ink); font-weight: 900; }

/* the booking slot card (Page Lemon fills it on a live site) */
.slot { margin: 0; }
.pick, .book-card { display: grid; gap: 14px; padding: 26px 24px; border-radius: 32px; background: var(--wk-card); color: var(--wk-card-ink); box-shadow: 0 4px 0 var(--wk-btn-edge); }
.book-card > p { margin: 0; color: var(--wk-card-muted); line-height: 1.5; }
.pick h2 { font-size: 1.75rem; color: var(--wk-card-ink); }
.pick-group { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.pick-group legend { font-size: .875rem; font-weight: 800; color: var(--wk-card-muted); margin-bottom: 8px; }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-chip { position: relative; }
.pick-chip input { position: absolute; opacity: 0; }
.pick-chip span { display: inline-flex; flex-direction: column; min-height: 44px; justify-content: center; padding: 6px 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--wk-line-strong); font-weight: 800; }
.pick-chip small { font-weight: 600; color: var(--wk-card-muted); font-size: .8125rem; }
.pick-chip input:checked + span { box-shadow: inset 0 0 0 2.5px var(--wk-btn-edge); background: var(--wk-ball); color: var(--wk-btn-ink); }
.pick-chip input:checked + span small { color: var(--wk-btn-ink); }
.pick-chip input:focus-visible + span { outline: 3px solid var(--wk-card-ink); outline-offset: 2px; }
.pick-chip input:disabled + span { opacity: .4; }
.pick label, .book-card label { font-size: .875rem; font-weight: 800; color: var(--wk-card-muted); }
.pick input:not([type="radio"]), .pick select { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--wk-line-strong); background: var(--wk-card); color: var(--wk-card-ink); font: 600 1rem var(--wk-text); }
.pick .fine, .book-card .fine, .pick-alt { font-size: .875rem; color: var(--wk-card-muted); margin: 0; }
.book-card .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--wk-ball); color: var(--wk-btn-ink); font: 900 1rem/1.1 var(--wk-text); text-decoration: none; border: 0; box-shadow: inset 0 0 0 2.5px var(--wk-btn-edge), 0 4px 0 var(--wk-btn-edge); cursor: pointer; }
.btn-quiet { background: transparent; color: var(--wk-card-ink); box-shadow: inset 0 0 0 2.5px currentColor; }
.wk-bea-card { display: flex; gap: 16px; align-items: center; margin-top: 26px; }
.wk-bea-card .wk-bea { width: 64px; height: 64px; font-size: 1.75rem; background: var(--wk-ball); color: var(--wk-btn-ink); }
.wk-bea-card p { margin: 0; color: var(--wk-ground-muted); line-height: 1.5; }
.wk-bea-card b { color: var(--wk-ground-ink); }

/* the last band: a tennis-ball field */
.wk-final { background: var(--wk-ball); color: var(--wk-btn-ink); padding: 64px 0 72px; text-align: center; }
.wk-final h2 { font-size: clamp(2.75rem, 1.6rem + 5vw, 6rem); line-height: .9; margin: 0; color: var(--wk-btn-ink); }
.wk-final p { margin: 16px auto 0; max-width: 40ch; font-weight: 700; font-size: 1.125rem; }
.wk-final .k-btn { margin-top: 26px; }
.wk-pub .k-foot { margin: 0; border-radius: 0; padding: 30px max(16px, calc((100% - 1280px) / 2)) 36px; }

/* privacy notice */
.wk-prose { width: min(100%, 760px); margin: 0 auto; padding: 8px 16px 24px; }
.wk-prose h1 { font-size: clamp(2.75rem, 1.8rem + 4vw, 5rem); line-height: .95; margin: 16px 0 22px; color: var(--wk-ink); }
.wk-prose h2 { font-size: 1.75rem; margin: 34px 0 10px; color: var(--wk-ink); }
.wk-prose p, .wk-prose li { color: var(--wk-muted); margin-top: 8px; line-height: 1.6; font-weight: 600; }
.wk-prose a { font-weight: 800; }
.wk-prose .tip { padding: 14px 18px; border-radius: 20px; background: var(--wk-ground); color: var(--wk-ground-ink); }
.blank { background: var(--wk-ball); color: var(--wk-btn-ink); padding: 0 4px; border-radius: 4px; }
.wk-prose + .k-foot { margin-top: 48px; }

/* reduced motion: the route is drawn already, nothing bounces (the kit's own animations too) */
@media (prefers-reduced-motion: reduce) {
  .wk-reveal { animation: none; stroke-dashoffset: 0; }
  .wk-anim .wk-paw, .wk-anim .wk-m-end, .wk-pin, .wk-ro-chip, .k-app .k-steps.wk-stops li.k-now::after { animation: none; }
  .k-app *, .k-app *::before, .k-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* round 4: a tag with no photo shows the dog's name on the Tennis Ball ring (no blank paw) */
.wk-tag-named { display: grid; place-items: center; }
.wk-tag-initial { font: 400 calc(var(--s) * .42)/1 var(--wk-display); color: var(--wk-btn-ink); }

/* round 4: Home: the map tag is pinned inside the map, 16px from the top and right edges */
.wk-mapcol > .wk-mapframe { display: grid; grid-template-columns: minmax(0, 1fr); }
.wk-mapcol > .wk-mapframe > .wk-map { grid-area: 1 / 1; }
.wk-pin-home { position: relative; grid-area: 1 / 1; justify-self: end; align-self: start; left: auto; right: auto; top: auto; translate: none; margin: 16px; }
.wk-pin-home .wk-tag { --s: 88px; }
@media (max-width: 699px) { .wk-pin-home .wk-tag { --s: 64px; } }

/* round 4: Home: your dogs, a strip of collar tags under the map (in flow, never on it) */
.wk-mapcol { display: grid; gap: 18px; align-content: start; min-width: 0; }
.wk-dogstrip { display: grid; gap: 12px; }
.wk-dogstrip > .wk-eyebrow { margin: 0; color: var(--wk-muted); }
.wk-dogrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 20px; }
.wk-dogrow .wk-tag { --s: 84px; }
.wk-dogrow .wk-bone { font-size: .875rem; padding: 4px 14px 5px; }
@media (min-width: 700px) { .wk-dogrow .wk-tag { --s: 104px; } .wk-dogrow .wk-bone { font-size: 1rem; } }

/* round 4: long dynamic text wraps inside narrow cards */
.wk-ro-dog, .wk-ro-route, .wk-went, .wk-notes, .wk-reply q { min-width: 0; overflow-wrap: anywhere; }

/* round 4: public phone frames fill one height, so the captions share a baseline */
.wk-phone { display: flex; flex-direction: column; }
.wk-phone-in { flex: 1 1 auto; }

/* round 3: Home: a tag on the map sits at the route's end and is bigger than the others */
.wk-pin-home .wk-tag small { font-size: .8125rem; }

/* round 3: public home on phones: copy and map stack, the booking-hours line sits under the map, prices become one card */
@media (max-width: 1023px) {
  .wk-poster { gap: 0; }
  .wk-poster > .wk-copy { display: contents; }
  .wk-poster-map { order: 1; margin-top: 26px; }
  .wk-poster .wk-fine { order: 2; }
}
@media (max-width: 599px) {
  .wk-pricegrid { gap: 0; padding: 6px 22px; border-radius: 32px; background: var(--wk-card); box-shadow: 0 3px 0 var(--wk-line-strong); }
  .wk-price { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 0; border-radius: 0; background: none; box-shadow: none; }
  .wk-price + .wk-price { border-top: 2px dashed var(--wk-line); }
  .wk-price-ball { grid-row: 1 / span 3; width: 64px; height: 64px; font-size: 1.25rem; box-shadow: inset 0 0 0 2.5px var(--wk-btn-edge); }
  .wk-price h3 { grid-column: 2; margin: 0; font-size: 1.375rem; }
  .wk-price .wk-per, .wk-price p { grid-column: 2; }
}

/* round 3: Book: seven day chips, smaller on phones with a fade on the right edge */
@media (max-width: 699px) {
  .wk-book .k-day-chips { -webkit-mask-image: linear-gradient(90deg, var(--wk-mask-opaque) 78%, transparent); mask-image: linear-gradient(90deg, var(--wk-mask-opaque) 78%, transparent); }
  .wk-book .k-day-chips .k-chip { width: 80px; height: 80px; min-height: 80px; font-size: .75rem; }
}

/* round 3: Account: one 760px column, the street and phone note is helper text */
.wk-acct { width: min(100%, 760px); margin: 0 auto; display: grid; gap: 18px; }
.wk-acct-note { margin: 0; padding: 0 4px; color: var(--wk-muted); }

/* round 3: placeholders and the upload error keep contrast on the dark ground and the toast */
.k-app input::placeholder, .k-app textarea::placeholder { color: var(--wk-placeholder); opacity: 1; }
.k-app [data-pl-status][data-state="error"]:not(:empty)::after { color: var(--k-danger); white-space: normal; }

/* round 4: link colour rule no longer overrides button ink (public Call and Email buttons) */
.k-app a.btn { color: var(--wk-btn-ink); }
.k-app a.btn-quiet { color: var(--wk-card-ink); }