/* Panel Kit core. One stylesheet for every panel: tokens, layout, components. Class prefix: pk-.
   css/pk.css is built from the parts in css/src (npm run css); edit the parts, never pk.css.
   Font paths are relative to css/pk.css. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable-latin-tr.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/GeistMono-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/GeistMono-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono's Cyrillic, for a page in Russian; a Latin or Turkish page never loads it */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/GeistMono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist 1.800, variable (weight 100–900): the reading face of the Tattoo brand theme, in Latin, Latin Extended and Cyrillic
   subsets; a page loads only the subsets its text uses */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* the face of the customer layer's brand themes (Healing) */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/Jost-300-600-latin-tr.woff2') format('woff2');
}
/* ---------- tokens ---------- */
/* modern is the default theme: its values sit on :root and need no attribute. corporate and technical
   override them in their own parts. Every colour that differs by mode is a light-dark() pair. */
:root {
  color-scheme: light;
  --pk-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pk-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* neutrals: the theme's grey family (12 anchors per mode) */
  --pk-canvas: light-dark(#eaebe6, #141413);
  --pk-card: light-dark(#ffffff, #1f1f1d);
  --pk-inset: light-dark(#f2f1ec, #292927);
  --pk-inset-2: light-dark(#e9e8e2, #333331);
  --pk-line: light-dark(#e7e6e0, #2e2e2b);
  --pk-line-strong: light-dark(#d6d5ce, #42423e);
  /* edge of a control that has no other boundary (checkbox, radio, switch, outlined field, a filled field's foot): at least 3:1
     on canvas, card, inset and the brand tint of any hue */
  --pk-line-control: light-dark(#898780, #797872);
  --pk-text: light-dark(#111111, #f2f2ee);
  --pk-text-2: light-dark(#54524c, #b2b1aa);
  --pk-text-3: light-dark(#6a6862, #999892);
  --pk-ink: light-dark(#111111, #f2f2ee);
  --pk-on-ink: light-dark(#ffffff, #111111);
  /* dark surface: dark block, bars, toast, tooltip */
  --pk-dark: light-dark(#111111, #2e2e2b);

  /* the brand colour, the one colour input; its other shades are derived below */
  --pk-accent: #f3cf3d;

  /* shared by every theme */
  --pk-on-bright: #111111;
  --pk-on-dark: #ffffff;
  --pk-on-dark-2: rgba(255, 255, 255, 0.62);
  --pk-dark-inset: rgba(255, 255, 255, 0.1);
  --pk-scrim: light-dark(rgba(17, 17, 17, 0.32), rgba(0, 0, 0, 0.6));
  --pk-success: #1fb25a; --pk-success-soft: light-dark(#daf3e3, #173826); --pk-success-text: light-dark(#0d6b35, #5fd38f);
  --pk-warning: #f8a11b; --pk-warning-soft: light-dark(#fdebcd, #3d2a10); --pk-warning-text: light-dark(#8a4a00, #f6b65a);
  --pk-danger: #ec5a3c; --pk-danger-soft: light-dark(#f5ded1, #3e1f18); --pk-danger-text: light-dark(#a12d14, #ff8a70);
  /* colour rule 6 as a switch for a brand shade's relative colour (its h and c): 1 within 25° of the danger or success hue or 20°
     of the warning hue, for a colour with chroma; 0 otherwise */
  --pk-near-status: min(1, max(clamp(0, (25 - max(h - 33.4, 33.4 - h)) * 1000, 1), clamp(0, (20 - max(h - 69.7, 69.7 - h)) * 1000, 1), clamp(0, (25 - max(h - 150.8, 150.8 - h)) * 1000, 1)) * clamp(0, (c - 0.06) * 1000, 1));
  /* text on a solid status fill (a pill, a check node, a badge); a brand theme with deep status colours sets its light ink */
  --pk-on-success: var(--pk-on-bright); --pk-on-warning: var(--pk-on-bright); --pk-on-danger: var(--pk-on-bright);
  --pk-ai: #c7b8f9; --pk-ai-soft: light-dark(#efeafe, #2a2540); --pk-ai-text: light-dark(#5a3fd1, #b9a8ff);
  /* people and chart series: one input each, soft and text shades derived below */
  --pk-p1: #13a295; --pk-p2: #e5649d; --pk-p3: #d87726; --pk-p4: #3b94e8; --pk-p5: #47a34e; --pk-p6: #8d9195;

  /* scales and sizes a theme changes (corners, density, figure size) */
  --pk-rs: 1;
  --pk-ds: 1;
  --pk-hero-k: 1;
  --pk-r-pill: 999px;
  --pk-r-control: 999px;
  --pk-r-tag: 999px;

  /* control sizes a theme sets; parts use the --pk-h-* heights worked out from them below */
  --pk-size-btn: 44px;
  --pk-size-btn-lg: 48px;
  --pk-size-btn-sm: 36px;
  --pk-size-nav: 48px;
  --pk-size-chip: 42px;
  /* touch floor: the hit area of every control on touch screens and in the phone shell (set below), none for a mouse.
     A scrolling row clips what leaves its box, so it keeps --pk-tap-room and --pk-focus-room around its controls for their rings */
  --pk-tap: 0px;
  --pk-tap-room: 0px;
  /* the shell's gutter around and beside the menu; 0 where a theme docks the menu to the window edge */
  --pk-app-gap: 16px;

  --pk-fs-body: 15px;
  --pk-fs-h1: 40px;
  --pk-fs-h2: 30px;
  --pk-fs-h3: 22px;
  --pk-fs-h4: 17px;
  --pk-fs-hero: 96px;
  --pk-fs-hero-md: 64px;
  --pk-fs-hero-sm: 48px;

  /* the rest of the type scale is the same in every theme; a theme changes what a part reads, not these steps */
  --pk-fs-micro: 10.5px;
  --pk-fs-tiny: 11px;
  --pk-fs-axis: 11.5px;
  --pk-fs-fine: 12px;
  --pk-fs-caption: 12.5px;
  --pk-fs-meta: 13px;
  --pk-fs-label: 13.5px;
  --pk-fs-small: 14px;
  --pk-fs-control: 14.5px;
  --pk-fs-item: 15px;
  --pk-fs-nav: 15.5px;
  --pk-fs-lead: 16px;
  --pk-fs-title: 17px;
  --pk-fs-title-lg: 18px;
  --pk-fs-title-xl: 19px;
  --pk-fs-figure-sm: 20px;
  --pk-fs-figure-md: 22px;
  --pk-fs-figure-lg: 24px;
  --pk-fs-figure-xl: 28px;
  --pk-fs-figure-2xl: 30px;

  --pk-fw-light: 300;
  --pk-fw-regular: 400;
  --pk-fw-book: 450;
  --pk-fw-medium: 500;
  --pk-fw-label: 550;
  --pk-fw-title: 560;
  --pk-fw-strong: 600;
  --pk-fw-bold: 650;
  --pk-fw-heavy: 700;
  --pk-fw-extrabold: 800;

  --pk-lh-hero: 0.95;
  --pk-lh-none: 1;
  --pk-lh-h1: 1.08;
  --pk-lh-tight: 1.1;
  --pk-lh-h2: 1.12;
  --pk-lh-snug: 1.2;
  --pk-lh-title: 1.25;
  --pk-lh-compact: 1.3;
  --pk-lh-cozy: 1.35;
  --pk-lh-text: 1.4;
  --pk-lh-body: 1.45;
  --pk-lh-relaxed: 1.5;
  --pk-lh-loose: 1.55;
  --pk-lh-prose: 1.65;

  /* spacing steps: --pk-space-n is 2n px. --pk-gap and --pk-pad follow the theme's density, these do not */
  --pk-space-1: 2px;
  --pk-space-2: 4px;
  --pk-space-3: 6px;
  --pk-space-4: 8px;
  --pk-space-5: 10px;
  --pk-space-6: 12px;
  --pk-space-7: 14px;
  --pk-space-8: 16px;
  --pk-space-9: 18px;
  --pk-space-10: 20px;
  --pk-space-11: 22px;
  --pk-space-12: 24px;
  --pk-space-14: 28px;
  --pk-space-16: 32px;
  --pk-space-18: 36px;
  --pk-space-20: 40px;
  --pk-space-24: 48px;

  /* corners that stay small in every theme: text highlights, legend keys, thin bars */
  --pk-r-mark: 3px;
  --pk-r-fine: 2px;

  --pk-dur-instant: 0.1s;
  --pk-dur-quick: 0.12s;
  --pk-dur-fast: 0.15s;
  --pk-dur-move: 0.18s;
  --pk-dur-base: 0.2s;
  --pk-dur-slow: 0.24s;
  --pk-dur-sheet: 0.32s;
  --pk-dur-spin: 0.7s;
  --pk-focus-offset: 2px;
  /* busy feedback (pk-loadbar, a delayed pk-veil) waits this long, so an answer that comes quickly never flashes it */
  --pk-busy-delay: 220ms;

  /* figures (amounts, counts, percentages, sizes, chart scales); codes, IDs and times keep --pk-mono */
  --pk-font-figures: var(--pk-mono);
  --pk-figures-size: 0.92em;

  /* a part raised a step off its track (the corporate segment); dark mode adds a hairline ring to the floating layers,
     shadows alone do not lift a layer off a dark page */
  --pk-raise-shadow: 0 1px 2px light-dark(rgba(17, 17, 17, 0.06), rgba(0, 0, 0, 0.5));
  --pk-float-shadow: var(--pk-raise-shadow), 0 16px 40px -12px light-dark(rgba(17, 17, 17, 0.22), rgba(0, 0, 0, 0.6)), 0 0 0 1px light-dark(transparent, rgba(255, 255, 255, 0.12));
  --pk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (pointer: coarse), (max-width: 1023px) {
  :root { --pk-tap: 44px; --pk-tap-room: 4px; }
}

/* values worked out from the theme and the brand colour; declared again on every element that carries one
   (data-accent marks a scope with its own --pk-accent), so that the scope recalculates them. Not on .pk: a nested
   .pk would reset its theme's assignments to these defaults */
:root, [data-theme], [data-accent] {
  /* text on the brand colour, by its luminance y: white on a dark colour, #111111 on a light one, and black in the narrow
     band between, where neither white nor #111111 reaches 4.5:1. The colour is clipped to sRGB first, as a screen shows it */
  --pk-accent-ink: color(from color(from var(--pk-accent) srgb clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1)) xyz-d65
    calc(0.00532 * clamp(0, (y - 0.21) * 100000, 1) + 0.95047 * clamp(0, (0.1791 - y) * 100000, 1))
    calc(0.0056 * clamp(0, (y - 0.21) * 100000, 1) + clamp(0, (0.1791 - y) * 100000, 1))
    calc(0.0061 * clamp(0, (y - 0.21) * 100000, 1) + 1.08883 * clamp(0, (0.1791 - y) * 100000, 1)));
  /* dark tint: yellows, limes and browns (hues near 95°) turn to mud on a near-black surface, so they keep almost no
     chroma there; blues, violets and pinks keep a visible tint. The lightness also keeps text-3 readable on teal tints */
  --pk-accent-soft: light-dark(oklch(from var(--pk-accent) 0.955 min(c, 0.045) h),
    oklch(from var(--pk-accent) 0.30 min(c, calc(0.045 - 0.033 * max(0, cos(calc((h - 95) * 0.8deg))))) h));
  /* the brand colour made dark enough for light surfaces and light enough for dark ones; a colour that already is keeps its chroma */
  --pk-accent-on-light: oklch(from var(--pk-accent) min(l, 0.46) min(c, calc(0.13 + max(0, 0.46 - l) * 3)) h);
  --pk-accent-on-dark: oklch(from var(--pk-accent) max(l, 0.78) min(c, calc(0.12 + max(0, l - 0.78) * 3)) h);
  --pk-accent-text: light-dark(var(--pk-accent-on-light), var(--pk-accent-on-dark));
  /* readable on the ink colour, which turns light in dark mode */
  --pk-accent-on-ink: light-dark(var(--pk-accent-on-dark), var(--pk-accent-on-light));
  /* logo disc: ink with the brand letter in light mode, the brand colour with its ink in dark mode */
  --pk-mark: light-dark(var(--pk-ink), var(--pk-accent));
  --pk-mark-ink: light-dark(var(--pk-accent-on-ink), var(--pk-accent-ink));
  /* the brand colour on a figure, a count or a dot: its text shade (on ink, its on-ink shade). A brand within 25° of the danger
     or success hue, or 20° of the warning hue, would read as a status there, so those take the title colour (on ink, the ink's
     own text) instead (--pk-near-status). The mix is the brand shade, or the other colour once the shade's alpha drops to 0 */
  --pk-accent-figure: light-dark(rgb(from color-mix(in srgb, oklch(from var(--pk-accent-on-light) l c h / calc(1 - var(--pk-near-status))) 99.99%, var(--pk-title-text)) r g b / 1),
    rgb(from color-mix(in srgb, oklch(from var(--pk-accent-on-dark) l c h / calc(1 - var(--pk-near-status))) 99.99%, var(--pk-title-text)) r g b / 1));
  --pk-accent-figure-on-ink: light-dark(rgb(from color-mix(in srgb, oklch(from var(--pk-accent-on-dark) l c h / calc(1 - var(--pk-near-status))) 99.99%, var(--pk-on-ink)) r g b / 1),
    rgb(from color-mix(in srgb, oklch(from var(--pk-accent-on-light) l c h / calc(1 - var(--pk-near-status))) 99.99%, var(--pk-on-ink)) r g b / 1));
  /* the danger drawn as a line (an error field's edge): 3:1 on the light canvas too */
  --pk-danger-edge: light-dark(oklch(from var(--pk-danger) min(l, 0.644) c h), var(--pk-danger));

  --pk-p1-soft: light-dark(oklch(from var(--pk-p1) 0.94 min(c, 0.05) h), oklch(from var(--pk-p1) 0.31 min(c, 0.05) h));
  --pk-p1-text: light-dark(oklch(from var(--pk-p1) 0.44 min(c, 0.11) h), oklch(from var(--pk-p1) 0.84 min(c, 0.11) h));
  --pk-p2-soft: light-dark(oklch(from var(--pk-p2) 0.94 min(c, 0.05) h), oklch(from var(--pk-p2) 0.31 min(c, 0.05) h));
  --pk-p2-text: light-dark(oklch(from var(--pk-p2) 0.44 min(c, 0.11) h), oklch(from var(--pk-p2) 0.84 min(c, 0.11) h));
  --pk-p3-soft: light-dark(oklch(from var(--pk-p3) 0.94 min(c, 0.05) h), oklch(from var(--pk-p3) 0.31 min(c, 0.05) h));
  --pk-p3-text: light-dark(oklch(from var(--pk-p3) 0.44 min(c, 0.11) h), oklch(from var(--pk-p3) 0.84 min(c, 0.11) h));
  --pk-p4-soft: light-dark(oklch(from var(--pk-p4) 0.94 min(c, 0.05) h), oklch(from var(--pk-p4) 0.31 min(c, 0.05) h));
  --pk-p4-text: light-dark(oklch(from var(--pk-p4) 0.44 min(c, 0.11) h), oklch(from var(--pk-p4) 0.84 min(c, 0.11) h));
  --pk-p5-soft: light-dark(oklch(from var(--pk-p5) 0.94 min(c, 0.05) h), oklch(from var(--pk-p5) 0.31 min(c, 0.05) h));
  --pk-p5-text: light-dark(oklch(from var(--pk-p5) 0.44 min(c, 0.11) h), oklch(from var(--pk-p5) 0.84 min(c, 0.11) h));
  --pk-p6-soft: light-dark(oklch(from var(--pk-p6) 0.94 min(c, 0.05) h), oklch(from var(--pk-p6) 0.31 min(c, 0.05) h));
  --pk-p6-text: light-dark(oklch(from var(--pk-p6) 0.44 min(c, 0.11) h), oklch(from var(--pk-p6) 0.84 min(c, 0.11) h));

  /* a second brand input for titles, record names and key figures (a product's navy): --pk-title-ink, one colour or a light-dark()
     pair, set where data-theme or data-accent is. It is moved dark enough for light surfaces and, in dark mode, light like the
     accent's dark shade; unset, the pair is invalid and title-text is the text colour */
  --pk-title-pair: light-dark(oklch(from var(--pk-title-ink) min(l, 0.46) min(c, 0.16) h), oklch(from var(--pk-title-ink) max(l, 0.92) min(c, 0.03) h));
  --pk-title-text: var(--pk-title-pair, var(--pk-text));
  /* text on a fill in the title colour, which is dark in light mode and light in dark mode, as ink is */
  --pk-on-title: var(--pk-on-ink);
  /* the menu's own surface: the card colour unless the theme gives the menu a grey of its own */
  --pk-side-bg: var(--pk-card);
  /* a card's own lift: none where cards lie flat on the page; a theme that lifts its cards (Portal) sets it */
  --pk-card-shadow: none;
  /* a row of a fixed table (pk-table--fixed): one line, the same height on every page and at the touch floor */
  --pk-row-h: max(calc(56px * var(--pk-ds)), var(--pk-tap));
  /* table headers: size and weight a theme sets without a rule of its own; --pk-th-track (their letter-spacing) is not declared,
     so a header keeps the spacing around it until a theme sets one. Nor is --pk-r-dialog: a dialog takes the card's corner
     unless the theme gives dialogs their own */
  --pk-th-size: var(--pk-fs-meta);
  --pk-th-weight: var(--pk-fw-medium);

  /* assignment: which colour acts (primary) and which marks the current or selected item; modern uses ink for both.
     primary-edge is the primary drawn as a line (focus ring, focused field, chosen ring): at least 3:1 for any brand */
  --pk-primary: var(--pk-ink);
  --pk-on-primary: var(--pk-on-ink);
  --pk-primary-edge: var(--pk-ink);
  --pk-current: var(--pk-ink);
  --pk-on-current: var(--pk-on-ink);
  --pk-current-count: var(--pk-accent-figure-on-ink);

  /* the theme's control sizes raised to the touch floor: buttons, fields and menu items 44, chips 40, small parts 36
     (their ring makes up the rest); mouse users keep the theme's density */
  --pk-h-btn: max(var(--pk-size-btn), var(--pk-tap));
  --pk-h-btn-lg: max(var(--pk-size-btn-lg), var(--pk-tap) + 4px);
  --pk-h-btn-sm: max(var(--pk-size-btn-sm), var(--pk-tap) - 8px);
  --pk-h-nav: max(var(--pk-size-nav), var(--pk-tap));
  --pk-h-chip: max(var(--pk-size-chip), var(--pk-tap) - 4px);

  --pk-r-card: calc(28px * var(--pk-rs));
  --pk-r-panel: calc(22px * var(--pk-rs));
  --pk-r-inset: calc(20px * var(--pk-rs));
  --pk-r-tile: calc(18px * var(--pk-rs));
  --pk-r-split: calc(16px * var(--pk-rs));
  --pk-r-field: calc(14px * var(--pk-rs));
  --pk-r-sm: calc(12px * var(--pk-rs));
  --pk-r-xs: calc(10px * var(--pk-rs));
  --pk-gap: calc(16px * var(--pk-ds));
  --pk-pad: calc(24px * var(--pk-ds));
  --pk-pad-inset: calc(18px * var(--pk-ds));
  /* table rows reach the touch floor with a 22px checkbox in them */
  --pk-cell-y: max(calc(14px * var(--pk-ds)), var(--pk-tap) / 4);
  --pk-row-y: calc(11px * var(--pk-ds));

  /* edges drawn as shadows (they take no room): rings inside a box, -out rings outside it, edge-* one side's hairline */
  --pk-ring: inset 0 0 0 1px var(--pk-line);
  --pk-ring-strong: inset 0 0 0 1px var(--pk-line-strong);
  --pk-ring-control: inset 0 0 0 1px var(--pk-line-control);
  --pk-ring-out: 0 0 0 1px var(--pk-line);
  --pk-ring-out-strong: 0 0 0 1px var(--pk-line-strong);
  /* an open mark (check, step, PIN dot), its hover or skipped state, today's or a key's ink edge, a mark in a status colour */
  --pk-ring-mark: inset 0 0 0 1.5px var(--pk-line-control);
  --pk-ring-mark-strong: inset 0 0 0 1.5px var(--pk-line-strong);
  --pk-ring-ink: inset 0 0 0 1.5px var(--pk-ink);
  --pk-ring-success: inset 0 0 0 1.5px var(--pk-success);
  --pk-ring-warning: inset 0 0 0 1.5px var(--pk-warning);
  --pk-ring-danger: inset 0 0 0 1.5px var(--pk-danger-edge);
  /* a filled field stays a plain filled shape (the owner's chosen look; its label and fill identify it); a theme or a
     product that wants a 3:1 boundary under filled fields sets inset 0 -1px 0 var(--pk-line-control) */
  --pk-field-foot: none;
  /* chosen: a picked card, day or slot; active: the current, next or dragged item; picked: a ring set off by a card-coloured gap */
  --pk-ring-chosen: inset 0 0 0 1.5px var(--pk-primary-edge);
  --pk-ring-active: inset 0 0 0 2px var(--pk-primary-edge);
  --pk-cutout: 0 0 0 2px var(--pk-card);
  --pk-ring-picked: var(--pk-cutout), 0 0 0 4px var(--pk-primary-edge);
  --pk-focus-halo: 0 0 0 3px color-mix(in srgb, var(--pk-primary) 22%, transparent);
  --pk-focus-outline: 2px solid var(--pk-primary-edge);
  /* what the ring takes outside its box (2px and the offset): a box that clips, such as a scrolling row, keeps this much inside */
  --pk-focus-room: calc(var(--pk-focus-offset) + 2px);
  --pk-edge-top: inset 0 1px 0 var(--pk-line);
  --pk-edge-right: inset -1px 0 0 var(--pk-line);
  --pk-edge-bottom: inset 0 -1px 0 var(--pk-line);
  --pk-edge-left: inset 1px 0 0 var(--pk-line);
  --pk-edge-top-strong: inset 0 1px 0 var(--pk-line-strong);
  --pk-edge-right-strong: inset -1px 0 0 var(--pk-line-strong);
  --pk-edge-bottom-strong: inset 0 -1px 0 var(--pk-line-strong);
  --pk-edge-left-strong: inset 1px 0 0 var(--pk-line-strong);
}

/* mode: light is the default, auto follows the device. Dark only ever comes from here */
[data-mode='light'] { color-scheme: light; }
[data-mode='dark'], :root:has(> body[data-mode='dark']) { color-scheme: dark; }
[data-mode='auto'], :root:has(> body[data-mode='auto']) { color-scheme: light dark; }
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.pk {
  font-family: var(--pk-font);
  font-size: var(--pk-fs-body);
  line-height: var(--pk-lh-body);
  color: var(--pk-text);
  background: var(--pk-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* :where() keeps these resets at zero class weight so every component class overrides them */
:where(.pk) a { color: inherit; text-decoration: none; }
:where(.pk) button { font: inherit; color: inherit; }
:where(.pk) img { max-width: 100%; display: block; }
:where(.pk) p { margin: 0; }
/* a field's hint text in every field, a part's own field included (the browser's grey falls under 4.5:1 on a filled field) */
:where(.pk) ::placeholder { color: var(--pk-text-3); opacity: 1; }
/* a part's own display must never undo the hidden attribute */
.pk [hidden] { display: none !important; }
.pk-icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pk-icon--sm { width: 16px; height: 16px; }
.pk-icon--lg { width: 22px; height: 22px; }
.pk-mono, .pk-num { font-size: 0.92em; letter-spacing: -0.01em; font-weight: var(--pk-fw-regular); }
.pk-mono { font-family: var(--pk-mono); }
/* an amount, count, percentage or size: the theme's figure font, digits of equal width */
.pk-num { font-family: var(--pk-font-figures); font-size: var(--pk-figures-size); font-variant-numeric: tabular-nums; }
.pk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.pk) :focus-visible { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
/* kit parts placed outside a .pk root (a host app's own chrome) keep the ring and drop the host's link underline; both
   rules weigh less than a part's own class with a state, so those still win */
:where([class^='pk-'], [class*=' pk-']):focus-visible { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
/* a visually hidden control (pk-sr) draws its ring on the part that shows it: a file input's button label, a radio's chip */
:where(.pk :has(> .pk-sr:focus-visible), [class^='pk-']:has(> .pk-sr:focus-visible), [class*=' pk-']:has(> .pk-sr:focus-visible)) { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
a:where([class^='pk-'], [class*=' pk-']):not(.pk-link) { text-decoration: none; }

/* ---------- type ---------- */
.pk-h1 { margin: 0; font-size: var(--pk-fs-h1); line-height: var(--pk-lh-h1); font-weight: var(--pk-fw-book); letter-spacing: -0.03em; }
.pk-h2 { margin: 0; font-size: var(--pk-fs-h2); line-height: var(--pk-lh-h2); font-weight: var(--pk-fw-medium); letter-spacing: -0.025em; }
.pk-h3 { margin: 0; font-size: var(--pk-fs-h3); line-height: var(--pk-lh-snug); font-weight: 520; letter-spacing: -0.02em; }
.pk-h4 { margin: 0; font-size: var(--pk-fs-h4); line-height: var(--pk-lh-compact); font-weight: var(--pk-fw-title); letter-spacing: -0.01em; }
.pk-h1, .pk-h2, .pk-h3, .pk-h4, .pk-hero { text-wrap: balance; }
/* running text never leaves one word alone on its last line */
:where(.pk) { text-wrap-style: pretty; }
/* a code, time, amount or size never breaks inside ('500 ₺', '14:00–17:00'); pk-nowrap keeps any other run together */
.pk-mono, .pk-num, .pk-nowrap { white-space: nowrap; }
/* an address or a long key may break anywhere; codes, numbers and times keep pk-mono's one line */
.pk-mono--wrap { white-space: normal; overflow-wrap: anywhere; }
.pk-body { font-size: var(--pk-fs-body); }
.pk-label { font-size: var(--pk-fs-label); color: var(--pk-text-2); }
.pk-meta { font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-strong { font-weight: var(--pk-fw-strong); }
.pk-muted { color: var(--pk-text-2); }
.pk-faint { color: var(--pk-text-3); }
.pk-hero { font-size: calc(var(--pk-fs-hero) * var(--pk-hero-k)); line-height: var(--pk-lh-hero); font-weight: var(--pk-fw-regular); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.pk-hero--md { font-size: calc(var(--pk-fs-hero-md) * var(--pk-hero-k)); }
.pk-hero--sm { font-size: calc(var(--pk-fs-hero-sm) * var(--pk-hero-k)); letter-spacing: -0.045em; }
.pk-unit { font-family: var(--pk-font); font-size: max(0.32em, var(--pk-fs-meta)); letter-spacing: 0; color: var(--pk-text-2); font-weight: var(--pk-fw-book); margin-left: var(--pk-space-2); }
.pk-delta { display: inline-flex; align-items: center; gap: var(--pk-space-2); font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); }
.pk-delta--up { color: var(--pk-success-text); }
.pk-delta--down { color: var(--pk-danger-text); }
.pk-delta--flat { color: var(--pk-text-2); }

/* ---------- app shell ---------- */
/* the menu column: the full menu from 1024px at one width in every theme, the phone shell below (18-responsive). The gutters
   add up to the same width in every theme, so a screen lands in the same content class whatever the theme. The menu and its
   gap put the content's centre half of them right of the window's centre; fixed bars and toasts follow it
   (--pk-content-shift). The body declares it too, so a layer rendered at body level (a portal) is centred the same way */
:is(body:has(.pk-app), .pk-app) { --pk-side-w: 248px; --pk-content-shift: calc((var(--pk-side-w) + var(--pk-app-gap)) / 2); }
.pk-app { display: grid; grid-template-columns: var(--pk-side-w) minmax(0, 1fr); gap: var(--pk-app-gap); padding: var(--pk-app-gap); min-height: 100vh; }
/* the content is capped and centred in the area right of the menu: 1440px, 1120px for forms and settings (pk-main--narrow),
   no cap for the calendar and dense tables (pk-main--full) */
.pk-main {
  --pk-main-max: 1440px; width: 100%; max-width: calc(var(--pk-main-max) + 2 * var(--pk-main-pad, 0px)); justify-self: center;
  min-width: 0; display: grid; gap: var(--pk-gap); align-content: start; container: pk-main / inline-size;
}
.pk-main--narrow { --pk-main-max: 1120px; }
.pk-main--full { max-width: none; }
/* sign-in: a brand panel beside the form; phones show the form only */
.pk-auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--pk-gap); min-height: 100vh; padding: var(--pk-gap); }
.pk-auth__panel { display: flex; flex-direction: column; gap: var(--pk-space-12); padding: var(--pk-space-14); }
.pk-auth__photo { flex: 1; min-height: 220px; }
/* a panel without a photo keeps its words at the foot, where the photo would have ended */
.pk-auth__panel:not(:has(.pk-auth__photo)) > .pk-stack { margin-top: auto; }
/* the photo takes the space left in the panel instead of stretching the page to its own height */
.pk-auth__photo img { position: absolute; inset: 0; }
.pk-auth__main { display: grid; place-items: center; padding: var(--pk-space-12) var(--pk-space-4); }
.pk-auth__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-9); width: min(420px, 100%); }
/* single column page without the menu: sign-in, public and tool pages */
.pk-page { max-width: 1320px; margin: 0 auto; padding: var(--pk-space-12) var(--pk-space-8) 64px; display: grid; gap: var(--pk-gap); align-content: start; container: pk-main / inline-size; }
/* public pages a customer opens (booking, its link, the status page): one reading width */
.pk-page--narrow { max-width: 960px; }

/* the menu is as wide as --pk-side-w (the shell's column, 248px elsewhere) and takes its form from that width: under 160px it
   is the icon rail (18-responsive), so a narrow column anywhere shows the rail. The inline padding is 12px in the full menu and
   6px in the 84px rail */
.pk-side {
  width: var(--pk-side-w, 248px); max-width: 100%; container: pk-side / inline-size;
  background: var(--pk-side-bg); border-radius: var(--pk-r-card); padding: var(--pk-space-9) clamp(var(--pk-space-3), (var(--pk-side-w, 248px) - 72px) / 2, var(--pk-space-6)) var(--pk-space-6);
  display: flex; flex-direction: column; gap: var(--pk-space-1);
  /* a menu taller than its box scrolls inside itself, so the account row is never out of reach; a part brought into view by
     the keyboard comes with room for its ring. No overscroll containment: on a menu that doesn't overflow (one without a fixed
     height, in a sheet or a host's own scroller) it would swallow the wheel and the swipe instead of passing them on */
  overflow-y: auto; scroll-padding-block: var(--pk-focus-room); scrollbar-width: none;
}
.pk-side::-webkit-scrollbar { display: none; }
.pk-app > .pk-side { position: sticky; top: var(--pk-app-gap); height: calc(100dvh - 2 * var(--pk-app-gap)); }
.pk-side > * { flex-shrink: 0; }
/* in a menu of fixed height (the shell's, a host's window-tall one) a long list scrolls by itself, so the brand, the promo and
   the account row stay in view; a menu that grows with its list never shrinks it */
/* a box that scrolls one way clips both: the list keeps room inside for its items' focus rings */
.pk-side > .pk-nav {
  flex-shrink: 1; min-height: 0; margin: calc(-1 * var(--pk-focus-room)); padding: var(--pk-focus-room); overflow-y: auto;
  scroll-padding-block: var(--pk-focus-room); scrollbar-width: none;
}
.pk-side > .pk-nav::-webkit-scrollbar { display: none; }
.pk-brand { display: flex; align-items: center; gap: var(--pk-space-6); padding: var(--pk-space-1) var(--pk-space-2) var(--pk-space-8); }
.pk-logo { width: 40px; height: 40px; border-radius: var(--pk-r-pill); background: var(--pk-mark); color: var(--pk-mark-ink); display: grid; place-items: center; font-weight: 750; font-size: var(--pk-fs-title); flex: none; }
/* a product's own mark as a picture in the circle */
.pk-logo > img { width: 62%; height: 62%; object-fit: contain; }
.pk-brand__name { font-size: var(--pk-fs-title-xl); font-weight: var(--pk-fw-strong); letter-spacing: -0.02em; }
.pk-brand .pk-icon-btn { margin-left: auto; }
/* the menu's head in a product: the product's mark with the workspace (its name, the product and the person's role) opens the
   workspace switcher, the bell beside it the notifications. A head without a switcher is the same row, not pressable */
.pk-sidehead { display: flex; align-items: center; gap: var(--pk-space-3); padding: var(--pk-space-1) 0 var(--pk-space-8); }
.pk-sidehead__org {
  display: flex; flex: 1 1 auto; align-items: center; gap: var(--pk-space-5); min-width: 0; padding: var(--pk-space-2);
  border: 0; border-radius: var(--pk-r-control); background: transparent; color: inherit; font: inherit; text-align: left;
}
button.pk-sidehead__org { cursor: pointer; }
button.pk-sidehead__org:hover { background: var(--pk-inset); }
.pk-sidehead__text { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.pk-sidehead__name { display: flex; align-items: center; gap: var(--pk-space-2); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); }
.pk-sidehead__name > span, .pk-sidehead__sub { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-sidehead__name > .pk-icon { flex: none; color: var(--pk-text-3); }
.pk-sidehead__sub { font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-sidehead__bell { position: relative; flex: none; }
/* the account row's avatar opens the account menu too; the menu opens above the row */
.pk-me > button.pk-avatar { padding: 0; border: 0; cursor: pointer; }
.pk-side > .pk-usermenu[popover]:popover-open { align-self: end; margin: 0 0 var(--pk-space-3); position-area: top span-right; position-try-fallbacks: flip-block; }
/* the workspace list's entries are submit buttons of a form, without the browser's button frame */
.pk-workspaces > button.pk-workspace { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.pk-menu form > button.pk-menu__item { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
/* a little air between items, so a current item and a hovered neighbour read as two pills */
.pk-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-2); }
.pk-nav__label { font-size: var(--pk-fs-meta); color: var(--pk-text-3); padding: var(--pk-space-9) var(--pk-space-7) var(--pk-space-3); }
.pk-nav__item {
  display: flex; align-items: center; gap: 13px; height: var(--pk-h-nav); padding: 0 var(--pk-space-8); border-radius: var(--pk-r-control);
  font-size: var(--pk-fs-nav); color: var(--pk-text); transition: background var(--pk-dur-fast) var(--pk-ease);
}
.pk-nav__item:hover { background: var(--pk-inset); }
/* an item carries its full label and a short one (at most 10 characters) for the rail and the phone tab bar */
.pk-nav__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-nav__short { display: none; }
/* section menu inside a page (settings); same current style as the main menu */
.pk-subnav { display: grid; gap: var(--pk-space-2); align-content: start; padding: var(--pk-space-4); border-radius: var(--pk-r-card); background: var(--pk-card); }
.pk-subnav__item { display: flex; align-items: center; gap: var(--pk-space-6); height: var(--pk-h-btn); padding: 0 var(--pk-space-7); border-radius: var(--pk-r-control); font-size: var(--pk-fs-item); color: var(--pk-text); white-space: nowrap; }
.pk-subnav__item:hover { background: var(--pk-inset); }
.pk-subnav__item[aria-current='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-subnav__item[aria-current='true'] .pk-meta { color: inherit; }
.pk-nav__count { margin-left: auto; font-size: var(--pk-fs-label); color: var(--pk-text-3); font-variant-numeric: tabular-nums; }
.pk-nav__item[aria-current='page'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-nav__item[aria-current='page'] .pk-nav__count { color: var(--pk-current-count); font-weight: var(--pk-fw-strong); }
.pk-side__spacer { flex: 1; }
/* sized so a two-word title ("Online randevu") stays on one line beside its switch in the 248px menu */
.pk-promo { background: var(--pk-accent); color: var(--pk-accent-ink); border-radius: var(--pk-r-panel); padding: var(--pk-space-6); display: grid; gap: var(--pk-space-6); }
.pk-promo__row { display: flex; align-items: center; gap: var(--pk-space-4); }
.pk-promo__icon { width: 32px; height: 32px; border-radius: var(--pk-r-pill); background: var(--pk-mark); color: var(--pk-mark-ink); display: grid; place-items: center; flex: none; }
.pk-promo__icon .pk-icon { width: 18px; height: 18px; }
.pk-promo .pk-toggle { width: 40px; height: 24px; }
.pk-promo .pk-toggle::after { width: 18px; height: 18px; }
.pk-promo .pk-toggle[aria-checked='true']::after { left: 19px; }
/* the ink track keeps an edge in the block's own ink, so it shows on a deep brand colour too */
.pk-promo .pk-toggle[aria-checked='true'] { box-shadow: inset 0 0 0 1px var(--pk-accent-ink); }
.pk-promo__title { font-weight: var(--pk-fw-bold); font-size: var(--pk-fs-control); line-height: var(--pk-lh-snug); }
.pk-promo__sub { font-size: var(--pk-fs-caption); }
.pk-promo__link { display: flex; align-items: center; height: calc(var(--pk-h-btn) - 4px); padding: 0 var(--pk-space-7); border-radius: var(--pk-r-control); background: var(--pk-card); color: var(--pk-ink); font-size: var(--pk-fs-label); font-weight: var(--pk-fw-strong); }
.pk-promo__link .pk-icon { margin-left: auto; }
.pk-me { display: flex; align-items: center; gap: var(--pk-space-4); padding: var(--pk-space-4); margin-top: var(--pk-space-5); background: var(--pk-inset); border-radius: var(--pk-r-control); }
/* a long name stays on its line (the full name is in the menu that opens) */
.pk-me__who { flex: 1; min-width: 0; }
.pk-me__name { font-weight: var(--pk-fw-strong); font-size: var(--pk-fs-small); line-height: var(--pk-lh-snug); }
.pk-me__role { font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
:is(.pk-me__name, .pk-me__role) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-me > .pk-icon-btn { margin-left: auto; }

/* top navigation variant */
.pk-topnav { display: inline-flex; gap: var(--pk-space-1); background: var(--pk-card); border-radius: var(--pk-r-control); padding: 5px; }
.pk-topnav a { height: calc(var(--pk-h-btn) - 2px); padding: 0 var(--pk-space-9); border-radius: calc(var(--pk-r-control) - 5px); display: grid; place-items: center; font-size: var(--pk-fs-item); color: var(--pk-text); }
.pk-topnav a[aria-current='page'] { background: var(--pk-current); color: var(--pk-on-current); }

/* page header */
.pk-header { display: flex; align-items: flex-start; gap: var(--pk-space-7) var(--pk-space-8); padding: var(--pk-space-3) var(--pk-space-2) var(--pk-space-2); flex-wrap: wrap; }
/* breadcrumb on its own line, pulled close to the title; on touch only as close as the ring of its links allows */
.pk-header > .pk-crumbs { flex-basis: 100%; margin-bottom: calc(2 * var(--pk-tap-room) - var(--pk-space-4)); }
/* the title block is as wide as its title row and fills the line, so the actions sit at its right end; when both do not fit,
   the actions drop under it as a group, from the left, and a status pill stays beside its title. The sub line wraps inside
   that width instead of widening it, but a block with a sub line keeps a reading width: many actions drop under it rather
   than squeeze the sub line into a column. A title that is one long word (a web address) breaks instead of leaving the page */
.pk-header__main { flex: 1 1 auto; min-width: 0; }
.pk-header__main:has(> .pk-header__sub) { min-width: min(100%, 22rem); }
.pk-header__title > .pk-h1 { min-width: 0; overflow-wrap: break-word; }
.pk-header__main > .pk-header__sub { contain: inline-size; }
/* title row and actions share one height, so the buttons line up with the heading */
.pk-header__title { display: flex; align-items: center; gap: var(--pk-space-7); flex-wrap: wrap; min-height: var(--pk-h-btn-lg); }
.pk-header__sub { margin-top: var(--pk-space-4); font-size: var(--pk-fs-label); color: var(--pk-text-2); }
/* a sub line set in mono ("Cuma, 2 Ekim · 9 randevu") is a sentence: it wraps between words on a narrow phone */
.pk-header__sub.pk-mono { white-space: normal; }
.pk-header__actions { display: flex; align-items: center; gap: var(--pk-space-5); flex-wrap: wrap; min-height: var(--pk-h-btn-lg); }
/* beside a page's title the search is the part that gives way, so a greeting, its badge and the actions keep one row */
.pk-header__actions .pk-search { min-width: 240px; }
.pk-crumbs { display: flex; align-items: center; gap: var(--pk-space-3); font-size: var(--pk-fs-small); color: var(--pk-text-3); }
.pk-crumbs .pk-icon { width: 14px; height: 14px; }
.pk-crumbs [aria-current='page'] { color: var(--pk-text); }
.pk-search { display: flex; align-items: center; gap: var(--pk-space-5); height: var(--pk-h-btn-lg); min-width: 280px; padding: 0 var(--pk-space-4) 0 var(--pk-space-8); border-radius: var(--pk-r-control); background: var(--pk-card); box-shadow: var(--pk-field-foot); color: var(--pk-text-3); font-size: var(--pk-fs-control); }
.pk-search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--pk-text); flex: 1; min-width: 0; }
.pk-search--soft { background: var(--pk-inset); }
/* the search a page starts from (who to ask, help): taller, with larger type */
.pk-search--lg { height: calc(var(--pk-h-btn-lg) + 8px); padding-left: var(--pk-space-9); font-size: var(--pk-fs-lead); }
.pk-kbd { margin-left: auto; font-family: var(--pk-mono); font-size: var(--pk-fs-fine); color: var(--pk-text); background: var(--pk-inset); border-radius: var(--pk-r-tag); padding: 5px 9px; }

/* ---------- surfaces ---------- */
.pk-card { background: var(--pk-card); border-radius: var(--pk-r-card); padding: var(--pk-pad); min-width: 0; }
.pk-card--flush { padding: var(--pk-space-5); }
.pk-card__head { display: flex; align-items: center; gap: var(--pk-space-5); flex-wrap: wrap; margin-bottom: calc(var(--pk-space-9) * var(--pk-ds)); }
.pk-card__count { color: var(--pk-text-3); font-weight: var(--pk-fw-book); }
/* controls that outgrow the head (a report's choices on a phone) wrap onto more lines instead of pushing the page sideways */
.pk-card__aside { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); min-width: 0; max-width: 100%; }
.pk-card__sub { width: 100%; margin-top: calc(-1 * var(--pk-space-2)); font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-stack > .pk-card__head { margin-bottom: 0; }
.pk-inset { background: var(--pk-inset); border-radius: var(--pk-r-inset); padding: var(--pk-pad-inset); min-width: 0; }
/* dark surfaces stay dark in both modes; small ink controls (buttons, selected items) turn light in dark mode instead */
.pk-card--ink, .pk-banner, .pk-bar, .pk-toast, .pk-tip { background: var(--pk-dark); color: var(--pk-on-dark); }
/* a floating dark layer lifts one step in dark mode, so it stands out from the cards it floats over */
.pk-bar, .pk-toast, .pk-tip { background: light-dark(var(--pk-dark), color-mix(in srgb, var(--pk-dark), var(--pk-on-dark) 12%)); }
/* on a surface that is dark in light mode too, the ring is drawn in its ink: the theme's ink ring would vanish on it */
.pk-card--ink, .pk-banner, .pk-bar, .pk-toast, .pk-sysbar--ink, .pk-scan, .pk-viewer, .pk-player__screen, .pk-zones { --pk-focus-outline: 2px solid var(--pk-on-dark); }
.pk-card--ink :is(.pk-label, .pk-meta, .pk-muted, .pk-kv__key) { color: var(--pk-on-dark-2); }
.pk-card--ink .pk-inset { background: var(--pk-dark-inset); }
.pk-card--ink .pk-logo { background: var(--pk-accent); color: var(--pk-accent-ink); }
/* coloured blocks: text on the fill takes the fill's own ink at full strength */
.pk-card--accent { background: var(--pk-accent); color: var(--pk-accent-ink); }
.pk-card--warning { background: var(--pk-warning); color: var(--pk-on-warning); padding: var(--pk-space-6); }
.pk-card--success { background: var(--pk-success); color: var(--pk-on-success); padding: var(--pk-space-6); }
.pk-card--ai { background: var(--pk-ai); color: var(--pk-on-bright); }
:is(.pk-card--accent, .pk-card--warning, .pk-card--success, .pk-card--ai) :is(.pk-label, .pk-meta, .pk-muted, .pk-unit) { color: inherit; }
/* a light action on the brand block takes the block's ink, which is white on a deep brand colour (the themes that draw the block
   as a plain card keep their button colours) */
.pk-card--accent:not(:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *) :is(.pk-btn--ghost, .pk-btn--tonal):not(:disabled, [aria-disabled='true'], :has(> :disabled)) { color: inherit; }
/* the inner panel is always light, so its text is the dark ink even in a block whose own ink is white (a dark brand colour) */
:is(.pk-card--accent, .pk-card--ai) .pk-inset { background: color-mix(in srgb, var(--pk-card) 55%, transparent); color: var(--pk-on-bright); }
/* a status block's inner panel is its soft tint, light too: its text is on-bright even where a brand theme's status ink is white */
.pk-card--warning > .pk-inset { background: var(--pk-warning-soft); color: var(--pk-on-bright); }
.pk-card--success > .pk-inset { background: var(--pk-success-soft); color: var(--pk-on-bright); }
/* coloured blocks keep their light-mode insides (muted text, insets, buttons) in dark mode */
.pk-card--accent, .pk-card--warning, .pk-card--success, .pk-card--ai, .pk-promo { color-scheme: light; }
.pk-card--soft-accent { background: var(--pk-accent-soft); color: var(--pk-text); }
.pk-card--soft-success { background: var(--pk-success-soft); color: var(--pk-text); }
/* plain-surface themes (corporate, technical, portal): coloured blocks become ordinary cards; the colour stays in their figures
   (Portal dresses its ink block again in its own part). The padding reset has no theme weight, so the phone padding of cards
   still wins on phones */
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--accent, .pk-card--ink, .pk-card--warning, .pk-card--success, .pk-card--ai, .pk-card--soft-accent, .pk-card--soft-success) { background: var(--pk-card); color: var(--pk-text); color-scheme: inherit; --pk-focus-outline: inherit; }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--warning, .pk-card--success) { padding: var(--pk-pad); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--accent .pk-hero { color: var(--pk-accent-figure); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--warning .pk-hero { color: var(--pk-warning-text); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--success .pk-hero { color: var(--pk-success-text); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--ai .pk-hero { color: var(--pk-ai-text); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--accent, .pk-card--ink, .pk-card--warning, .pk-card--success, .pk-card--ai) .pk-inset { background: var(--pk-inset); color: inherit; }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--accent, .pk-card--ink, .pk-card--warning, .pk-card--success, .pk-card--ai) :is(.pk-label, .pk-meta, .pk-muted, .pk-kv__key, .pk-unit) { color: var(--pk-text-2); }
/* a card-coloured pill on what is now a card would lose its shape */
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--accent, .pk-card--ink, .pk-card--warning, .pk-card--success, .pk-card--ai) .pk-pill--white { background: var(--pk-inset); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--accent .pk-spark__fill { fill: var(--pk-accent); opacity: 0.22; }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--accent .pk-spark__dot { stroke: var(--pk-card); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--ink .pk-btn--on-dark { background: var(--pk-inset); color: var(--pk-ink); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--ink .pk-logo { background: var(--pk-mark); color: var(--pk-mark-ink); }
.pk-band { display: flex; align-items: center; gap: var(--pk-space-5); padding: var(--pk-space-3) var(--pk-space-3) var(--pk-space-6); }
/* KPI card: figures on top, the chart or legend pinned to the bottom edge */
.pk-kpi { display: flex; flex-direction: column; gap: var(--pk-space-6); }
.pk-kpi__foot { margin-top: auto; display: grid; gap: var(--pk-space-7); }
/* a figure card with nothing to show yet keeps its height (a grid row stretches it) with the empty state in its middle */
.pk-kpi > .pk-empty { flex: 1; align-content: center; padding-block: var(--pk-space-8); }
.pk-legend { display: grid; gap: var(--pk-space-4); font-size: var(--pk-fs-small); }

.pk-tile__icon { width: 44px; height: 44px; border-radius: var(--pk-r-field); background: var(--pk-card); display: grid; place-items: center; flex: none; }
.pk-card > .pk-tile__icon { background: var(--pk-inset); }
/* a small icon tile in a table row */
.pk-tile__icon--sm { width: 32px; height: 32px; border-radius: var(--pk-r-xs); background: var(--pk-inset); }
.pk-tile__icon--sm > .pk-icon { width: 16px; height: 16px; }
.pk-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-5); }
/* a list of tiles that sits two or more abreast where there is room (the phone shell on a tablet) */
.pk-tiles--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* photo cover card: image fills the card, a white panel sits on the lower edge */
.pk-cover { position: relative; border-radius: var(--pk-r-card); overflow: hidden; min-height: calc(400px * var(--pk-ds)); background: var(--pk-inset); padding: var(--pk-space-6); display: flex; flex-direction: column; justify-content: flex-end; }
.pk-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* focal point for cropped photos: keep the upper or lower part of the image in view */
.pk-focus-top { object-position: 50% 10%; }
.pk-focus-bottom { object-position: 50% 90%; }
.pk-cover__top { position: absolute; top: var(--pk-space-7); left: var(--pk-space-7); right: var(--pk-space-7); display: flex; align-items: center; justify-content: space-between; gap: var(--pk-space-4); }
.pk-cover__panel { position: relative; background: var(--pk-card); border-radius: var(--pk-r-panel); padding: var(--pk-space-9) var(--pk-space-10); display: grid; gap: var(--pk-space-7); }

/* layout helpers */
.pk-grid { display: grid; gap: var(--pk-gap); align-items: start; }
/* panels side by side end at the same height: a grid of nothing but single panels stretches them to their row (their content
   stays at the top). A row that holds a column of panels, a photo or a mock-up keeps its own heights, so no frame is left
   mostly empty; pk-grid--stretch stretches any grid */
.pk-grid--stretch, .pk-grid:not(:has(> :not(.pk-card, .pk-cover))) { align-items: stretch; }
/* cols-2/3/4: at most N columns; one is dropped whenever a column would get narrower than its minimum. Each grid is a
   container, so the rules for a part-empty last row (below) follow the grid's own width, also inside a narrower box */
.pk-cols-2, .pk-cols-3, .pk-cols-4 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--pk-col-min), (100% - (var(--pk-cols) - 1) * var(--pk-gap)) / var(--pk-cols))), 1fr));
  container: pk-cols / inline-size;
}
.pk-cols-2 { --pk-cols: 2; --pk-col-min: 340px; }
/* three columns from 872px and four from 928px whatever the theme's gap, so the container queries can tell the column count */
.pk-cols-3 { --pk-cols: 3; --pk-col-min: calc((872px - 2 * var(--pk-gap)) / 3); }
.pk-cols-4 { --pk-cols: 4; --pk-col-min: calc((928px - 3 * var(--pk-gap)) / 4); }
/* page layouts by content class (container queries below): three columns on wide content (1040 and up), two on large and
   medium (700-1039), one under 700; the dashboard hero pairs its figure cards under its photo on compact content (560-699) */
/* the dashboard's two rows share their columns, so the blocks of both rows line up */
.pk-cols-hero, .pk-cols-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
.pk-cols-detail { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr) minmax(0, 0.95fr); }
/* a form or record with a side column (summary, help) */
.pk-cols-aside { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr); }
/* settings: a section menu on the left */
.pk-cols-nav { grid-template-columns: 248px minmax(0, 1fr); }
/* a sticky column never stretches to the row: it could not stick any more */
.pk-sticky { position: sticky; top: var(--pk-gap); align-self: start; }
.pk-span-2 { grid-column: span 2; }
.pk-span-all { grid-column: 1 / -1; }
.pk-stack { display: grid; gap: var(--pk-gap); align-content: start; min-width: 0; }
/* a card's action row (pk-card__foot) stays at its bottom when a row of cards stretches it: such a stack lays out as a column,
   where a part that only takes its own width (segments, tabs) keeps doing so */
.pk-stack:has(> .pk-card__foot) { display: flex; flex-direction: column; }
/* a figure card made with Card (which stacks by default) keeps its column, so its foot sits at the bottom */
.pk-stack.pk-kpi { display: flex; flex-direction: column; gap: var(--pk-space-6); }
.pk-stack > :is(.pk-seg, .pk-tabs) { align-self: flex-start; }
.pk-card__foot { margin-top: auto; }
/* a column of cards that sit side by side once the column is wide enough */
.pk-group { display: grid; gap: var(--pk-gap); align-content: start; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pk-row { display: flex; align-items: center; gap: var(--pk-space-5); flex-wrap: wrap; }
.pk-push { margin-left: auto; }
/* single-column grids: an implicit auto column grows to the widest child's content; this keeps it inside the parent */
.pk-main, .pk-page, .pk-stack, .pk-form, .pk-field, .pk-kpi__foot, .pk-dialog { grid-template-columns: minmax(0, 1fr); }
@container pk-main (max-width: 1039px) {
  .pk-cols-hero, .pk-cols-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .pk-cols-hero > :first-child { grid-row: span 2; }
  /* the two cards side by side end on one line; the third block runs under both */
  .pk-cols-main { align-items: stretch; }
  .pk-cols-main > :nth-child(3) { grid-column: 1 / -1; }
  .pk-cols-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  /* the first row hugs the first block, so a tall middle column leaves its spare height at the bottom, not between blocks */
  .pk-cols-detail { grid-template-rows: auto 1fr; }
  .pk-cols-detail > :nth-child(2) { grid-row: span 2; }
}
/* form + summary and settings stack under 840: a form of at least 524px, the 300px summary and the gap */
@container pk-main (max-width: 839px) {
  .pk-cols-aside, .pk-cols-nav { grid-template-columns: minmax(0, 1fr); }
  .pk-sticky { position: static; }
  .pk-subnav { display: flex; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: var(--pk-r-control); }
  .pk-subnav::-webkit-scrollbar { display: none; }
  .pk-subnav__item { flex: none; height: calc(var(--pk-h-btn) - 4px); }
}
@container pk-main (max-width: 699px) {
  .pk-cols-hero, .pk-cols-main, .pk-cols-detail { grid-template-columns: minmax(0, 1fr); }
  .pk-cols-hero > :first-child, .pk-cols-detail > :nth-child(2) { grid-row: auto; }
  .pk-cols-detail { grid-template-rows: none; }
  /* a grid here has one or two columns: a wide card takes the whole row (two columns of a pk-cols-3 still fit it) */
  .pk-span-2 { grid-column: 1 / -1; }
}
/* a last row left part-empty: its last card takes the rest of the row. pk-cols-3 in two columns (under 872px), pk-cols-4 in
   two (under 692px) and in three (692-927px) */
@container pk-cols (max-width: 871px) {
  .pk-cols-3:not(:has(> .pk-span-2, > .pk-span-all)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container pk-cols (max-width: 691px) {
  .pk-cols-4:not(:has(> .pk-span-2, > .pk-span-all)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container pk-cols (min-width: 692px) and (max-width: 927px) {
  .pk-cols-4:not(:has(> .pk-span-2, > .pk-span-all)) > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .pk-cols-4:not(:has(> .pk-span-2, > .pk-span-all)) > :last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@container pk-main (min-width: 560px) and (max-width: 699px) {
  .pk-cols-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-cols-hero > :first-child { grid-column: 1 / -1; }
}

/* ---------- controls ---------- */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-space-4); height: var(--pk-h-btn); padding: 0 var(--pk-space-9);
  border-radius: var(--pk-r-control); border: 0; font-weight: var(--pk-fw-strong); font-size: var(--pk-fs-control); white-space: nowrap; cursor: pointer;
  transition: background var(--pk-dur-fast) var(--pk-ease), transform var(--pk-dur-fast) var(--pk-ease);
}
/* a label that may be long goes in its own element: the button then stays inside its box and the label ends in an ellipsis.
   At no weight, so an app's own cap on a button wins with its one class */
:where(.pk-btn:has(> .pk-btn__label)) { max-width: 100%; }
.pk-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pk-btn:active { transform: scale(0.98); }
.pk-btn--lg { height: var(--pk-h-btn-lg); padding: 0 var(--pk-space-11); font-size: var(--pk-fs-item); }
.pk-btn--sm { height: var(--pk-h-btn-sm); padding: 0 var(--pk-space-7); font-size: var(--pk-fs-label); }
.pk-btn--block { width: 100%; }
.pk-btn--primary { background: var(--pk-primary); color: var(--pk-on-primary); }
.pk-btn--primary:hover { background: color-mix(in oklch, var(--pk-primary) 88%, var(--pk-card)); }
.pk-btn--accent { background: var(--pk-accent); color: var(--pk-accent-ink); }
.pk-btn--outline { background: var(--pk-card); color: var(--pk-ink); box-shadow: var(--pk-ring-strong); }
.pk-btn--soft { background: var(--pk-inset); color: var(--pk-ink); }
/* row actions (Onayla, Saat ver): one filled primary per region, the rows act in a light tint of the primary colour;
   the tint is see-through so it shows on cards and on grey tiles alike */
.pk-btn--tonal { background: color-mix(in srgb, var(--pk-primary) 9%, transparent); color: var(--pk-primary); }
.pk-btn--tonal:hover { background: color-mix(in srgb, var(--pk-primary) 15%, transparent); }
.pk-btn--danger { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-btn--on-dark { background: var(--pk-dark-inset); color: var(--pk-on-dark); }
.pk-btn--ghost { background: transparent; color: var(--pk-text); }
.pk-btn--ghost:hover { background: var(--pk-inset); }
/* a text action that lines up with the fields beside it ("Hesap ekle", "Şifremi unuttum"): no padding, so no fill either */
.pk-btn--text { padding-inline: 0; background: transparent; color: var(--pk-text); }
.pk-btn--text:hover { text-decoration: underline; text-underline-offset: 3px; }
/* busy: the app swaps the label ("Kaydediliyor…"); the spinner takes the text colour */
.pk-btn[aria-busy='true'] { cursor: progress; pointer-events: none; }
.pk-btn[aria-busy='true']::before { content: ''; width: 16px; height: 16px; flex: none; border-radius: var(--pk-r-pill); border: 2px solid currentColor; border-right-color: transparent; animation: pk-spin var(--pk-dur-spin) linear infinite; }
@keyframes pk-spin { to { transform: rotate(360deg); } }
.pk-icon-btn {
  width: var(--pk-h-btn); height: var(--pk-h-btn); border-radius: var(--pk-r-control); border: 0; display: inline-grid; place-items: center; flex: none;
  background: var(--pk-card); color: var(--pk-ink); cursor: pointer; position: relative;
}
.pk-icon-btn--lg { width: var(--pk-h-btn-lg); height: var(--pk-h-btn-lg); }
.pk-icon-btn--sm { width: var(--pk-h-btn-sm); height: var(--pk-h-btn-sm); }
.pk-icon-btn--soft { background: var(--pk-inset); }
/* the add (+) button: the primary action in icon form */
.pk-icon-btn--ink { background: var(--pk-primary); color: var(--pk-on-primary); }
.pk-icon-btn--on-dark { background: var(--pk-dark-inset); color: var(--pk-on-dark); }
/* icon buttons that stay on (featured star, pinned) */
.pk-icon-btn[aria-pressed='true'] { background: var(--pk-accent); color: var(--pk-accent-ink); }
/* an unread mark on an icon button sits where the count badge sits (pk-badge--dot), off the glyph's corner at any button size */
.pk-icon-btn__dot { position: absolute; top: calc(50% - var(--pk-space-6)); left: calc(50% + 5px); width: 9px; height: 9px; border-radius: var(--pk-r-pill); background: var(--pk-danger); box-shadow: var(--pk-cutout); }
/* disabled (or aria-disabled, which stays focusable to explain why, or a file picker's label whose input is off): the inset
   fill and faint text in every variant, never opacity, which took text under 4.5:1. A busy button keeps its look; text, ghost
   and on-dark parts keep their own ground */
.pk-btn:is(:disabled:not([aria-busy='true']), [aria-disabled='true'], :has(> :disabled)) { background: var(--pk-inset); color: var(--pk-text-3); box-shadow: none; transform: none; cursor: not-allowed; }
.pk-btn:is(.pk-btn--ghost, .pk-btn--text):is(:disabled, [aria-disabled='true'], :has(> :disabled)) { background: transparent; text-decoration: none; }
.pk-btn.pk-btn--on-dark:is(:disabled, [aria-disabled='true'], :has(> :disabled)) { background: var(--pk-dark-inset); color: var(--pk-on-dark-2); }
.pk-icon-btn:is(:disabled, [aria-disabled='true']) { color: var(--pk-text-3); cursor: not-allowed; }
.pk-icon-btn:is(.pk-icon-btn--ink, [aria-pressed='true']):is(:disabled, [aria-disabled='true']) { background: var(--pk-inset); }
.pk-icon-btn.pk-icon-btn--on-dark:is(:disabled, [aria-disabled='true']) { color: var(--pk-on-dark-2); }

/* segments and tabs wrap onto more rows instead of scrolling, so no item is cut and the chosen one always shows; wrapped
   rows are filled edge to edge, and the track's corner is concentric with its items (a pill on one row) */
.pk-seg { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: var(--pk-space-1); min-width: 0; max-width: 100%; padding: var(--pk-space-2); border-radius: min(var(--pk-r-control), var(--pk-h-btn) / 2); background: var(--pk-inset); }
.pk-seg--on-canvas { background: var(--pk-card); }
.pk-seg__item { flex: 1 0 auto; height: calc(var(--pk-h-btn) - 8px); padding: 0 var(--pk-space-8); border-radius: calc(var(--pk-r-control) - 4px); border: 0; background: transparent; display: inline-grid; place-items: center; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-medium); color: var(--pk-text-2); cursor: pointer; }
.pk-seg__item[aria-pressed='true'], .pk-seg__item[aria-selected='true'] { background: var(--pk-current); color: var(--pk-on-current); }
/* language tabs of translated fields: warning mark = missing, success = filled */
.pk-seg__mark { width: 6px; height: 6px; margin-left: var(--pk-space-3); border-radius: var(--pk-r-pill); background: var(--pk-warning); }
.pk-seg__mark--ok { background: var(--pk-success); }
.pk-seg__item:has(.pk-seg__mark) { display: inline-flex; align-items: center; justify-content: center; }

.pk-tabs { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: var(--pk-space-1); min-width: 0; max-width: 100%; padding: 5px; border-radius: min(var(--pk-r-control), var(--pk-h-btn) / 2 + 3px); background: var(--pk-inset); }
.pk-tabs--on-canvas { background: var(--pk-card); }
/* a tab may be a button: without the browser's frame, at no weight, so every tab state still wins */
:where(button.pk-tabs__item) { border: 0; background: none; font: inherit; cursor: pointer; }
.pk-tabs__item { flex: 1 0 auto; height: calc(var(--pk-h-btn) - 4px); padding: 0 var(--pk-space-8); border-radius: calc(var(--pk-r-control) - 5px); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: var(--pk-fs-control); color: var(--pk-text); }
.pk-tabs__count { font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-tabs__item[aria-selected='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-tabs__item[aria-selected='true'] .pk-tabs__count { color: var(--pk-current-count); }
/* corporate tabs run along a full-width hairline: they keep their own widths */
[data-theme='corporate'] .pk-tabs__item { flex-grow: 0; }

.pk-chip {
  display: inline-flex; align-items: center; gap: var(--pk-space-3); height: var(--pk-h-chip); padding: 0 var(--pk-space-7); border-radius: var(--pk-r-control);
  background: var(--pk-card); font-size: var(--pk-fs-small); white-space: nowrap; border: 0; cursor: pointer;
}
.pk-chip__label { color: var(--pk-text-3); }
.pk-chip__value { font-weight: var(--pk-fw-strong); }
.pk-chip > .pk-icon { color: var(--pk-text-3); width: 16px; height: 16px; }
.pk-chip--soft { background: var(--pk-inset); }
.pk-chip--accent { background: var(--pk-accent); color: var(--pk-accent-ink); font-weight: var(--pk-fw-strong); }
/* filter chips: one choice, the chosen one (or the current page of a chip menu) takes the current style;
   an applied filter (pk-chip--ink) is drawn the same way */
.pk-chip__count { font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-chip:is([aria-pressed='true'], [aria-current='page'], :has(> input:checked), .pk-chip--ink) { background: var(--pk-current); color: var(--pk-on-current); }
.pk-chip:is([aria-pressed='true'], [aria-current='page'], :has(> input:checked), .pk-chip--ink) .pk-chip__count { color: var(--pk-current-count); }
.pk-chip:is([aria-pressed='true'], [aria-current='page'], :has(> input:checked), .pk-chip--ink) :is(.pk-chip__label, .pk-icon) { color: inherit; }
/* single choice in a form: a native radio (pk-sr) inside a label chip, so arrow keys move the choice; a hint under the label
   ("10:30 · Berat"), and an option that cannot be chosen is struck through like a taken slot */
.pk-chip:has(> .pk-chip__hint) { flex-direction: column; justify-content: center; gap: 0; height: auto; min-height: var(--pk-h-chip); padding-block: var(--pk-space-2); line-height: var(--pk-lh-snug); }
.pk-chip__hint { font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-chip:is([aria-pressed='true'], :has(> input:checked)) .pk-chip__hint { color: inherit; }
/* an option that cannot be taken, a radio's chip or a chip button alike */
.pk-chip:is(:disabled, [aria-disabled='true'], :has(> input:disabled)) { background: transparent; color: var(--pk-text-3); text-decoration: line-through; box-shadow: var(--pk-ring); cursor: not-allowed; }

/* form fields: filled grey on white cards, white on grey insets, tiles and sortable cards drawn on the inset fill (every field
   kind follows the same list); the foot line in the control edge is the field's boundary (3:1), where the fill alone stands
   too close to the surface */
.pk-input {
  height: var(--pk-h-btn); width: 100%; padding: 0 var(--pk-space-7); border-radius: var(--pk-r-field); border: 1px solid transparent;
  background: var(--pk-inset); box-shadow: var(--pk-field-foot); font: inherit; color: var(--pk-text);
  transition: border-color var(--pk-dur-fast) var(--pk-ease), background var(--pk-dur-fast) var(--pk-ease);
}
.pk-input::placeholder { color: var(--pk-text-3); }
.pk-input:hover { border-color: var(--pk-line-strong); }
.pk-input:focus { outline: 0; border-color: var(--pk-primary-edge); background: var(--pk-card); box-shadow: none; }
:is(.pk-inset, .pk-tile, .pk-sortcards__item:not(:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *)) .pk-input { background: var(--pk-card); }
textarea.pk-input { height: auto; min-height: 112px; padding: var(--pk-space-6) var(--pk-space-7); line-height: var(--pk-lh-relaxed); resize: vertical; }
select.pk-input { appearance: none; padding-right: var(--pk-space-20); cursor: pointer; }
.pk-input::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
/* .pk-control wraps a field with an icon before it (calendar, search) or after it (select chevron) */
.pk-control { position: relative; display: block; min-width: 0; }
.pk-control > .pk-icon { position: absolute; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--pk-text-3); pointer-events: none; }
.pk-control > .pk-icon:first-child { left: var(--pk-space-7); }
.pk-control > .pk-icon:last-child { right: var(--pk-space-7); }
.pk-control > .pk-icon:first-child ~ .pk-input { padding-left: 42px; }
.pk-control__prefix { position: absolute; left: var(--pk-space-7); top: 50%; transform: translateY(-50%); font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-small); color: var(--pk-text-2); pointer-events: none; }
.pk-control__prefix ~ .pk-input { padding-left: 56px; }
/* a button inside a field: show password, clear search */
.pk-control__action { position: absolute; right: var(--pk-space-2); top: 50%; transform: translateY(-50%); }
.pk-control:has(> .pk-control__action) > .pk-input { padding-right: var(--pk-space-24); }
/* the time, the picker button and the padding grow with the text, which is 16px on touch screens */
.pk-input--time { width: max(108px, 4.1em + 50px); font-family: var(--pk-mono); font-size: var(--pk-fs-small); }
.pk-field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.pk-field__label { font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); }
.pk-field__hint { font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-field__error { font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-label); color: var(--pk-danger-text); }
.pk-field__foot { display: flex; justify-content: space-between; gap: var(--pk-space-6); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-field__count { flex: none; margin-left: auto; white-space: nowrap; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-fine); }
.pk-field--error .pk-input { border-color: var(--pk-danger-edge); box-shadow: none; }
.pk-field--error .pk-input:focus { box-shadow: var(--pk-ring-danger); }

.pk-checkbox, .pk-radio {
  appearance: none; margin: 0; width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; cursor: pointer;
  border: 1.5px solid var(--pk-line-control); background: var(--pk-card); transition: background var(--pk-dur-fast) var(--pk-ease), border-color var(--pk-dur-fast) var(--pk-ease);
}
.pk-checkbox { border-radius: 7px; }
.pk-radio { border-radius: var(--pk-r-pill); }
/* the fill is the primary; its edge stays at 3:1 on the card even when the brand colour is pale */
.pk-checkbox:checked, .pk-checkbox:indeterminate, .pk-radio:checked { background: var(--pk-primary); border-color: var(--pk-primary-edge); }
.pk-checkbox:checked::after { content: ''; width: 10px; height: 5px; margin-top: calc(-1 * var(--pk-space-1)); border: solid var(--pk-on-primary); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.pk-checkbox:indeterminate::after { content: ''; width: 10px; height: 2px; border-radius: var(--pk-r-fine); background: var(--pk-on-primary); }
.pk-radio:checked::after { content: ''; width: 8px; height: 8px; border-radius: var(--pk-r-pill); background: var(--pk-on-primary); }
.pk-option { display: flex; align-items: flex-start; gap: var(--pk-space-6); font-size: var(--pk-fs-item); cursor: pointer; }
.pk-option > .pk-checkbox, .pk-option > .pk-radio { margin-top: 1px; }
.pk-option__hint { display: block; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
/* choice cards sit abreast from 190px each; a last row that is not full is shared by its cards, so none is left alone */
.pk-choices { display: flex; flex-wrap: wrap; gap: var(--pk-space-5); }
.pk-choice {
  flex: 1 1 190px; display: flex; align-items: center; gap: var(--pk-space-6); padding: var(--pk-space-7) var(--pk-space-8); border-radius: var(--pk-r-tile); cursor: pointer; min-width: 0;
  background: var(--pk-inset); box-shadow: inset 0 0 0 1.5px transparent; transition: background var(--pk-dur-fast) var(--pk-ease), box-shadow var(--pk-dur-fast) var(--pk-ease);
}
.pk-choice:has(:checked) { background: var(--pk-card); box-shadow: var(--pk-ring-chosen); }
.pk-choice__body { flex: 1; min-width: 0; }
.pk-choice__title { display: block; font-weight: var(--pk-fw-strong); }
.pk-choice__meta { display: block; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
/* a choice that cannot be taken: no fill, a hairline, its words faint; its box keeps the control edge */
.pk-choice:has(> input:disabled) { background: transparent; box-shadow: var(--pk-ring); color: var(--pk-text-3); cursor: not-allowed; }
.pk-choice:has(> input:disabled) :is(.pk-choice__meta, .pk-icon) { color: inherit; }
.pk-choice > :is(.pk-checkbox, .pk-radio):disabled { background: var(--pk-inset); border-color: var(--pk-line-strong); cursor: not-allowed; }
.pk-choice > :is(.pk-checkbox, .pk-radio):disabled:checked { background: var(--pk-inset-2); }
.pk-choice > .pk-checkbox:disabled:checked::after { border-color: var(--pk-text-3); }
.pk-choice > .pk-radio:disabled:checked::after { background: var(--pk-text-3); }

.pk-form { display: grid; gap: calc(var(--pk-space-9) * var(--pk-ds)); }
.pk-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--pk-space-7); }
.pk-form__section { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); gap: var(--pk-space-8) var(--pk-space-16); padding: calc(var(--pk-space-12) * var(--pk-ds)) 0; border-top: 1px solid var(--pk-line); }
.pk-form__section:first-child { border-top: 0; padding-top: var(--pk-space-2); }
.pk-form__intro { display: grid; gap: var(--pk-space-2); align-content: start; }
.pk-form__intro p { font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-toggle { width: 48px; height: 28px; border-radius: var(--pk-r-pill); background: var(--pk-line-control); position: relative; border: 0; flex: none; cursor: pointer; }
.pk-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--pk-r-pill); background: var(--pk-on-dark); transition: left var(--pk-dur-move) var(--pk-ease); }
.pk-toggle[aria-checked='true'] { background: var(--pk-primary); }
.pk-toggle[aria-checked='true']::after { left: 23px; background: var(--pk-on-primary); }
.pk-toggle:disabled { opacity: 0.55; cursor: default; }
.pk-toggle[aria-busy='true'] { cursor: progress; }

/* ---------- pills ---------- */
/* pills and person chips keep their own width in a grid cell too (a board card, a flow) instead of stretching across it */
.pk-pill {
  display: inline-flex; align-items: center; justify-self: start; gap: var(--pk-space-3); height: 28px; padding: 0 11px; border-radius: var(--pk-r-tag);
  font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); white-space: nowrap; background: var(--pk-inset); color: var(--pk-text);
}
/* a long pill (an announcement, a studio name) is never wider than its box; its text ends in an ellipsis when it has its
   own element (pk-pill__text), as Badge renders it */
.pk-pill { max-width: 100%; }
.pk-pill__text { min-width: 0; overflow: clip; text-overflow: ellipsis; }
.pk-pill--lg { height: 34px; padding: 0 var(--pk-space-7); font-size: var(--pk-fs-label); }
.pk-pill--dot::before { content: ''; width: 6px; height: 6px; border-radius: var(--pk-r-pill); background: currentColor; flex: none; }
.pk-pill--soft-dot::before { content: ''; width: 7px; height: 7px; border-radius: var(--pk-r-pill); background: var(--pk-dot, var(--pk-text-3)); flex: none; }
.pk-pill--warning { background: var(--pk-warning); color: var(--pk-on-warning); }
.pk-pill--success { background: var(--pk-success); color: var(--pk-on-success); }
.pk-pill--danger { background: var(--pk-danger); color: var(--pk-on-danger); }
.pk-pill--accent { background: var(--pk-accent); color: var(--pk-accent-ink); }
.pk-pill--ink { background: var(--pk-ink); color: var(--pk-on-ink); }
.pk-pill--white { background: var(--pk-card); color: var(--pk-ink); }
.pk-pill--soft-success { background: var(--pk-success-soft); color: var(--pk-success-text); }
.pk-pill--soft-warning { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-pill--soft-danger { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-pill--soft-accent { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
.pk-pill--ai { background: var(--pk-ai); color: var(--pk-on-bright); }
.pk-pill--soft-ai { background: var(--pk-ai-soft); color: var(--pk-ai-text); }
.pk-pill .pk-icon { width: 14px; height: 14px; }

.pk-person { display: inline-flex; align-items: center; justify-self: start; gap: var(--pk-space-4); height: 40px; padding: 0 var(--pk-space-7) 0 var(--pk-space-2); border-radius: var(--pk-r-control); background: var(--pk-card); font-size: var(--pk-fs-control); font-weight: var(--pk-fw-medium); white-space: nowrap; }
.pk-person--soft { background: var(--pk-inset); }
.pk-avatar { width: 40px; height: 40px; border-radius: var(--pk-r-pill); display: inline-grid; place-items: center; font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-bold); flex: none; background: var(--pk-inset-2); color: var(--pk-text); overflow: hidden; }
.pk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pk-avatar--sm { width: 32px; height: 32px; font-size: var(--pk-fs-fine); }
.pk-avatar--lg { width: 48px; height: 48px; font-size: var(--pk-fs-item); }
.pk-avatar--p1 { background: var(--pk-p1-soft); color: var(--pk-p1-text); }
.pk-avatar--p2 { background: var(--pk-p2-soft); color: var(--pk-p2-text); }
.pk-avatar--p3 { background: var(--pk-p3-soft); color: var(--pk-p3-text); }
.pk-avatar--p4 { background: var(--pk-p4-soft); color: var(--pk-p4-text); }
.pk-avatar--p5 { background: var(--pk-p5-soft); color: var(--pk-p5-text); }
.pk-avatar--p6 { background: var(--pk-p6-soft); color: var(--pk-p6-text); }
.pk-avatar--white { background: var(--pk-card); }
.pk-avatars { display: inline-flex; align-items: center; }
.pk-avatars > .pk-avatar { box-shadow: 0 0 0 2.5px var(--pk-card); }
.pk-avatars > .pk-avatar + .pk-avatar { margin-left: calc(-1 * var(--pk-space-3)); }
.pk-who { display: inline-flex; align-items: center; gap: var(--pk-space-3); }
.pk-who::before { content: ''; width: 8px; height: 8px; border-radius: var(--pk-r-pill); background: var(--pk-who, var(--pk-text-3)); flex: none; }
.pk-who--p1 { --pk-who: var(--pk-p1); } .pk-who--p2 { --pk-who: var(--pk-p2); } .pk-who--p3 { --pk-who: var(--pk-p3); }
.pk-who--p4 { --pk-who: var(--pk-p4); } .pk-who--p5 { --pk-who: var(--pk-p5); } .pk-who--p6 { --pk-who: var(--pk-p6); }

/* ---------- data display ---------- */
/* split box: label-over-value cells side by side. A cell never gets narrower than 128px: the cells wrap to a new line and
   fill it, so a value is never cut. Each cell draws the hairline on its left and top; the box clips the outer ones */
.pk-split { --pk-split-line: var(--pk-line-strong); display: flex; flex-wrap: wrap; overflow: hidden; border: 1px solid var(--pk-split-line); border-radius: var(--pk-r-split); }
.pk-inset .pk-split, .pk-card--accent .pk-split { --pk-split-line: color-mix(in srgb, var(--pk-text) 14%, transparent); }
.pk-split__cell { flex: 1 1 128px; min-width: 0; margin: -1px 0 0 -1px; padding: 11px var(--pk-space-7); border-left: 1px solid var(--pk-split-line); border-top: 1px solid var(--pk-split-line); }
.pk-split__label { font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-split__value { margin-top: var(--pk-space-1); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); overflow-wrap: break-word; text-wrap: balance; }

/* key-value rows: the keys share one column, at least 96px and as wide as the longest key up to half the list, so the
   values line up. A long e-mail address or URL takes pk-kv__value--truncate and its full text in title. In a narrow list
   the key stands above its value */
.pk-kv { container: pk-kv / inline-size; display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); column-gap: var(--pk-space-6); }
.pk-kv__row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: var(--pk-row-y) 0; border-top: 1px solid var(--pk-line); font-size: var(--pk-fs-item); }
.pk-kv__row:first-child { border-top: 0; }
.pk-kv__key { min-width: 96px; color: var(--pk-text-2); }
.pk-kv__value { min-width: 0; font-weight: var(--pk-fw-medium); overflow-wrap: break-word; }
.pk-kv, .pk-kv__key, .pk-kv__value { margin: 0; }
:is(.pk-kv__value.pk-mono, .pk-kv__value .pk-mono):not(.pk-mono--wrap) { white-space: nowrap; }
.pk-kv__value--truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-kv--airy .pk-kv__row { border-top: 0; padding: calc(var(--pk-row-y) - var(--pk-space-1)) 0; }
@container pk-kv (width < 260px) {
  .pk-kv__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--pk-space-1); }
}

.pk-list { display: grid; }
/* a list or tile list written as ol or ul (the steps of a task) loses the browser's indent and markers */
:where(ol, ul):where(.pk-list, .pk-tiles) { margin: 0; padding: 0; list-style: none; }
.pk-list__item { display: flex; align-items: center; gap: var(--pk-space-6); padding: calc(var(--pk-row-y) + var(--pk-space-1)) 0; border-top: 1px solid var(--pk-line); min-width: 0; }
.pk-list__item:first-child { border-top: 0; padding-top: var(--pk-space-2); }
.pk-list__body { flex: 1; min-width: 0; }
.pk-list__title { display: block; font-weight: var(--pk-fw-title); font-size: var(--pk-fs-item); }
.pk-list__meta { display: block; font-size: var(--pk-fs-meta); color: var(--pk-text-2); margin-top: 1px; text-wrap: pretty; }
.pk-list__end { flex: none; display: flex; align-items: center; gap: var(--pk-space-5); color: var(--pk-text-3); }

.pk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--pk-fs-item); }
.pk-table th { text-align: left; font-weight: var(--pk-th-weight); font-size: var(--pk-th-size); color: var(--pk-text-2); padding: calc(var(--pk-cell-y) - var(--pk-space-1)) var(--pk-space-7); background: var(--pk-inset); }
/* at no weight, so a header marked as figures or a code (pk-num, pk-mono) keeps its own tracking */
:where(.pk-table th) { letter-spacing: var(--pk-th-track); }
.pk-table :where(thead) th:first-child { border-radius: var(--pk-r-field) 0 0 var(--pk-r-field); }
.pk-table :where(thead) th:last-child { border-radius: 0 var(--pk-r-field) var(--pk-r-field) 0; }
/* a body row's header cell (th scope=row) reads like the cells beside it */
.pk-table td, .pk-table th:where(tbody [scope='row']) { padding: var(--pk-cell-y) var(--pk-space-7); border-bottom: 1px solid var(--pk-line); vertical-align: middle; }
/* text cells wrap only when the table would not fit otherwise; headers, codes, times, amounts, statuses and actions keep one line */
.pk-table th, .pk-table :is(.pk-table__end, .pk-mono, .pk-num) { white-space: nowrap; }
/* an inline action form in the end column lines up with the column's buttons */
.pk-table__end > form.pk-row { justify-content: flex-end; }
.pk-table td { text-wrap: pretty; }
.pk-table th:where(tbody [scope='row']) { background: none; font-size: inherit; font-weight: var(--pk-fw-regular); color: var(--pk-text); white-space: normal; text-wrap: pretty; }
.pk-table .pk-row { flex-wrap: nowrap; }
.pk-table tr:last-child :is(td, th) { border-bottom: 0; }
.pk-table tbody tr:hover :is(td, th:where([scope='row'])) { background: color-mix(in srgb, var(--pk-inset) 55%, var(--pk-card)); }
.pk-table tr[aria-selected='true'] :is(td, th:where([scope='row'])) { background: var(--pk-accent-soft); }
.pk-table .pk-table__check { width: 48px; padding-right: 0; }
.pk-table .pk-table__end { text-align: right; }
/* a group header row inside a table (one tbody per day) */
.pk-table .pk-table__group th { padding: calc(var(--pk-cell-y) + var(--pk-space-4)) var(--pk-space-7) var(--pk-space-4); border-radius: 0; background: none; font-size: var(--pk-fs-control); font-weight: var(--pk-fw-strong); color: var(--pk-ink); }
.pk-table .pk-table__group:first-child th { padding-top: var(--pk-space-4); }
.pk-table__sort { display: inline-flex; align-items: center; gap: var(--pk-space-2); padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pk-table__sort .pk-icon { width: 14px; height: 14px; }
.pk-table th[aria-sort] { color: var(--pk-ink); }
/* a scrolling box clips what leaves it: it keeps room above and below for the touch rings of the header and last-row controls */
.pk-table-wrap { position: relative; overflow-x: auto; container: pk-table / inline-size; padding-block: var(--pk-tap-room); margin-block: calc(-1 * var(--pk-tap-room)); }
/* a table that still has to scroll shows it: overlay scrollbars stay hidden until someone scrolls */
.pk-table-wrap::-webkit-scrollbar { height: 6px; }
.pk-table-wrap::-webkit-scrollbar-thumb { border-radius: var(--pk-r-mark); background: var(--pk-line-strong); }
/* columns a table can do without leave before it has to scroll: pk-col-lg under 1160px of table box, then pk-col-md under
   1040px. A table in a narrow box tightens its cells and lets amounts and headers wrap too; codes, phone numbers and times
   (pk-mono) stay whole */
@container pk-table (max-width: 1159px) { .pk-col-lg { display: none; } }
@container pk-table (max-width: 1039px) { .pk-col-md { display: none; } }
/* a column only phones drop (pk-col-sm, under 560px of table box); there the pinned first cell keeps at most half the box,
   so the figures beside it stay readable. It breaks a word only when the word alone is wider (anywhere would let the table
   narrow the column to one letter) */
@container pk-table (max-width: 559px) {
  .pk-col-sm { display: none; }
  .pk-table .pk-table__pin { max-width: 50cqw; overflow-wrap: break-word; }
  .pk-table__pin .pk-row > * { min-width: 0; }
}
@container pk-table (max-width: 479px) {
  .pk-table :is(th, td) { padding-inline: var(--pk-space-5); }
  .pk-table :is(th, td, .pk-num) { white-space: normal; }
}
/* on touch the small pages sit far enough apart that their rings do not overlap */
.pk-pager { display: flex; align-items: center; gap: max(var(--pk-space-3), 2 * var(--pk-tap-room)); flex-wrap: wrap; padding-top: var(--pk-space-8); }
.pk-pager__info { margin-right: auto; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-pager__page {
  min-width: var(--pk-h-btn-sm); height: var(--pk-h-btn-sm); padding: 0 var(--pk-space-3); border: 0; border-radius: var(--pk-r-control); background: transparent;
  display: inline-grid; place-items: center; font-size: var(--pk-fs-label); font-variant-numeric: tabular-nums; color: var(--pk-text); cursor: pointer;
}
.pk-pager__page:hover { background: var(--pk-inset); }
.pk-pager__gap { font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-pager__page[aria-current='page'] { background: var(--pk-current); color: var(--pk-on-current); }

.pk-empty { display: grid; justify-items: center; gap: var(--pk-space-4); padding: var(--pk-space-18) var(--pk-space-8); text-align: center; }
.pk-empty__icon { width: 56px; height: 56px; margin-bottom: var(--pk-space-3); border-radius: var(--pk-r-pill); background: var(--pk-inset); display: grid; place-items: center; }
.pk-empty__icon .pk-icon { width: 24px; height: 24px; }
.pk-empty__title { font-size: var(--pk-fs-title); font-weight: var(--pk-fw-strong); }
.pk-empty__text { max-width: 380px; font-size: var(--pk-fs-small); color: var(--pk-text-2); text-wrap: pretty; }
.pk-empty .pk-btn { margin-top: var(--pk-space-4); }
.pk-empty--compact { padding: var(--pk-space-10) var(--pk-space-6); }
.pk-empty--compact .pk-empty__icon { width: 44px; height: 44px; }
.pk-empty--error .pk-empty__icon { background: var(--pk-danger-soft); color: var(--pk-danger-text); }

.pk-skeleton { display: block; height: 14px; border-radius: var(--pk-r-xs); background: var(--pk-inset-2); animation: pk-pulse 1.4s var(--pk-ease) infinite; }
@keyframes pk-pulse { 50% { opacity: 0.5; } }
.pk-skeleton + .pk-skeleton { margin-top: var(--pk-space-4); }
.pk-table__strong { font-weight: var(--pk-fw-title); }

.pk-check { display: flex; align-items: center; gap: var(--pk-space-6); padding: 7px 0; font-size: var(--pk-fs-item); }
.pk-check__mark { width: 26px; height: 26px; border-radius: var(--pk-r-pill); display: grid; place-items: center; flex: none; }
.pk-check__mark .pk-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.pk-check--ok .pk-check__mark { background: var(--pk-success); color: var(--pk-on-success); }
.pk-check--warn .pk-check__mark { background: var(--pk-warning); color: var(--pk-on-warning); }
.pk-check--todo .pk-check__mark { background: transparent; box-shadow: var(--pk-ring-mark); }

/* vertical timeline */
.pk-timeline { display: grid; position: relative; }
.pk-timeline__item { display: grid; grid-template-columns: 52px 36px minmax(0, 1fr); gap: var(--pk-space-6); padding: var(--pk-space-4) 0; position: relative; }
.pk-timeline__item::before { content: ''; position: absolute; left: 81px; top: 44px; bottom: calc(-1 * var(--pk-space-4)); width: 2px; background: var(--pk-ink); }
.pk-timeline__item:last-child::before { display: none; }
.pk-timeline__item--future::before { background: var(--pk-line-strong); }
.pk-timeline__when { font-family: var(--pk-mono); font-size: var(--pk-fs-caption); color: var(--pk-text-3); padding-top: var(--pk-space-4); }
.pk-timeline__node { width: 36px; height: 36px; border-radius: var(--pk-r-pill); display: grid; place-items: center; position: relative; z-index: 1; background: var(--pk-inset); color: var(--pk-text-2); }
.pk-timeline__node .pk-icon { width: 16px; height: 16px; stroke-width: 2.1; }
.pk-timeline__node--done { background: var(--pk-success); color: var(--pk-on-success); }
.pk-timeline__node--warn { background: var(--pk-warning); color: var(--pk-on-warning); }
.pk-timeline__node--bad { background: var(--pk-danger); color: var(--pk-on-danger); }
.pk-timeline__node--now { background: var(--pk-accent); color: var(--pk-accent-ink); }
.pk-timeline__node--ai { background: var(--pk-ai); color: var(--pk-on-bright); }
.pk-timeline__node--future { background: var(--pk-card); box-shadow: var(--pk-ring-mark-strong); }
.pk-timeline__title { font-weight: var(--pk-fw-title); font-size: var(--pk-fs-item); padding-top: var(--pk-space-3); }
.pk-timeline__meta { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-timeline__meta--warn { color: var(--pk-warning-text); font-weight: var(--pk-fw-strong); }
.pk-timeline__meta--bad { color: var(--pk-danger-text); font-weight: var(--pk-fw-strong); }
.pk-timeline__now { display: grid; grid-template-columns: 52px 36px minmax(0, 1fr); gap: var(--pk-space-6); align-items: center; padding: var(--pk-space-1) 0; position: relative; }
.pk-timeline__now::before { content: ''; position: absolute; left: 81px; top: 50%; bottom: calc(-1 * var(--pk-space-4)); width: 2px; background: var(--pk-line-strong); }
.pk-timeline__now span { font-family: var(--pk-mono); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); }
.pk-timeline__now i { width: 12px; height: 12px; border-radius: var(--pk-r-pill); background: var(--pk-accent); justify-self: center; box-shadow: 0 0 0 3px var(--pk-card), 0 0 0 4.5px var(--pk-ink); position: relative; z-index: 1; }
.pk-timeline__now b { border-top: 2px dashed var(--pk-line-strong); }

/* horizontal stepper: a column per step, 16px apart, the connector running across the gap. It stands upright, one step per
   row, by its own width: under 370px, and under 570px with five steps or more (longer processes carry longer labels) */
.pk-stepper { container: pk-stepper / inline-size; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--pk-space-8); }
.pk-stepper:has(> :nth-child(5)) { --pk-stepper-long: 1; }
.pk-step { position: relative; padding-top: 52px; }
.pk-step::before { content: ''; position: absolute; top: 21px; left: 44px; right: calc(-1 * var(--pk-space-8)); height: 2px; background: var(--pk-line-strong); }
.pk-step--done::before { background: var(--pk-success); }
.pk-step:last-child::before { display: none; }
.pk-step__node { position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: var(--pk-r-pill); display: grid; place-items: center; background: var(--pk-inset); color: var(--pk-text-2); }
.pk-step--done .pk-step__node { background: var(--pk-success-soft); color: var(--pk-success-text); }
.pk-step--now .pk-step__node { background: var(--pk-primary); color: var(--pk-on-primary); box-shadow: 0 0 0 4px var(--pk-accent-soft); }
/* a step that stopped the process (refused, sent back): its node in the danger tone, the steps after it wait */
.pk-step--error .pk-step__node { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-step__title { font-weight: var(--pk-fw-title); font-size: var(--pk-fs-item); text-wrap: balance; }
.pk-step__meta { font-size: var(--pk-fs-meta); color: var(--pk-text-2); text-wrap: balance; }
.pk-step--future .pk-step__title { color: var(--pk-text-3); }
/* upright (after the base rules so it wins) */
@container pk-stepper (width < 370px) or ((width < 570px) and style(--pk-stepper-long: 1)) {
  .pk-step { grid-column: 1; min-height: 56px; padding: 11px 0 var(--pk-space-6) 58px; }
  .pk-step::before { top: 44px; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; }
}

/* ---------- visualisation ---------- */
.pk-ticks { display: flex; gap: 5px; align-items: center; }
.pk-ticks i { width: 9px; height: 26px; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); flex: none; }
.pk-ticks--fluid { justify-content: space-between; }
/* fluid ticks share the row's width and narrow below their own width where a row of them would not fit */
.pk-ticks--fluid i { flex: 1 1 0; width: auto; min-width: 0; max-width: 22px; height: 40px; }
.pk-ticks--sm i { width: 6px; height: 16px; }
.pk-ticks i.on { background: var(--pk-ticks, var(--pk-success)); }
.pk-ticks i.now { background: var(--pk-accent); }
.pk-ticks i.bad { background: var(--pk-danger); }
.pk-ticks--success { --pk-ticks: var(--pk-success); }
.pk-ticks--warning { --pk-ticks: var(--pk-warning); }
.pk-ticks--danger { --pk-ticks: var(--pk-danger); }
.pk-ticks--accent { --pk-ticks: var(--pk-accent); }
/* a countdown is not a state: it counts in ink */
.pk-ticks--ink { --pk-ticks: var(--pk-ink); }

.pk-dashes { display: inline-flex; gap: var(--pk-space-2); align-items: center; }
.pk-dashes i { width: 18px; height: 6px; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); }
.pk-dashes i.on { background: var(--pk-ink); }
.pk-dashes--success i.on { background: var(--pk-success); }

/* the fill is currentColor, as a native <progress class="pk-progress"> draws it, so a place or a tone colours either */
.pk-progress { height: 8px; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); color: var(--pk-ink); overflow: hidden; }
.pk-progress > i { display: block; height: 100%; border-radius: var(--pk-r-pill); background: currentColor; }
/* beside its figure in a row the bar takes the room left */
.pk-row > .pk-progress:not(.pk-progress--cell) { flex: 1 1 60px; }
/* a toned bar: warning past a threshold, danger once used up */
.pk-progress--success { color: var(--pk-success); }
.pk-progress--warning { color: var(--pk-warning); }
.pk-progress--danger { color: var(--pk-danger); }

.pk-hatch { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 14%, transparent) 0 1.5px, transparent 1.5px 7px), var(--pk-inset); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pk-text) 16%, transparent); }
/* charts share one height (--pk-chart-h), so a chart widens with its card but never grows taller */
.pk-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--pk-space-4); align-items: end; height: var(--pk-chart-h, 120px); }
.pk-bars__bar { border-radius: var(--pk-r-sm); min-height: 10px; }
.pk-bars__bar--past, .pk-bars__bar--hatch { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 16%, transparent) 0 1.5px, transparent 1.5px 7px), var(--pk-card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pk-text) 18%, transparent); }
.pk-bars__bar--now { background: var(--pk-ink); }
.pk-bars__bar--accent { background: var(--pk-accent); }
.pk-bars__labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--pk-space-4); margin-top: var(--pk-space-4); text-align: center; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-axis); color: var(--pk-text-3); }
.pk-h10 { height: 10%; } .pk-h20 { height: 20%; } .pk-h30 { height: 30%; } .pk-h40 { height: 40%; } .pk-h50 { height: 50%; }
.pk-h60 { height: 60%; } .pk-h70 { height: 70%; } .pk-h80 { height: 80%; } .pk-h90 { height: 90%; } .pk-h100 { height: 100%; }
.pk-w10 { width: 10%; } .pk-w20 { width: 20%; } .pk-w30 { width: 30%; } .pk-w40 { width: 40%; } .pk-w50 { width: 50%; }
.pk-w60 { width: 60%; } .pk-w70 { width: 70%; } .pk-w80 { width: 80%; } .pk-w90 { width: 90%; } .pk-w100 { width: 100%; }

.pk-funnel { display: grid; gap: var(--pk-space-5); }
.pk-funnel__row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto 44px; gap: var(--pk-space-6); align-items: center; font-size: var(--pk-fs-item); }
.pk-funnel__bar { height: 36px; border-radius: var(--pk-r-sm); }
.pk-funnel__bar--accent { background: var(--pk-accent); }
.pk-funnel__value { font-size: var(--pk-fs-figure-sm); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.pk-segbar { display: flex; gap: 5px; }
.pk-segbar i { flex: 1; height: 8px; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); }
.pk-segbar i.accent { background: var(--pk-accent); }
.pk-segbar i.ai { background: var(--pk-ai); }
.pk-segbar i.warning { background: var(--pk-warning); }
.pk-segbar i.success { background: var(--pk-success); }

/* line chart: the plot (fill and line) is an inner svg with preserveAspectRatio="none" that stretches to the chart's box,
   its line keeps its width; the dot sits on the outer svg in percent, so it stays round */
.pk-spark { display: block; width: 100%; height: var(--pk-chart-h, 120px); overflow: visible; }
.pk-spark svg { overflow: visible; }
/* a spark still drawn in one svg with its own viewBox keeps its proportions */
.pk-spark[viewBox] { height: auto; }
.pk-spark__line { fill: none; stroke: var(--pk-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pk-spark__fill { fill: var(--pk-accent); opacity: 0.28; stroke: none; }
/* plan: the part still ahead (days to come, as booked so far), dashed and lighter than what happened */
.pk-spark__line--plan { stroke-dasharray: 2 7; opacity: 0.55; }
.pk-spark__dot { fill: var(--pk-ink); stroke: var(--pk-card); stroke-width: 3; }
.pk-axis { display: flex; justify-content: space-between; margin-top: var(--pk-space-4); font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-axis); color: var(--pk-text-3); }
.pk-card--accent .pk-axis { color: inherit; }
.pk-card--accent .pk-spark__dot { stroke: var(--pk-accent); }
.pk-card--accent .pk-spark__fill { fill: var(--pk-ink); opacity: 0.07; }

/* donut: shares of a whole. Circles use pathLength="100"; each segment's length and start are its
   stroke-dasharray and stroke-dashoffset, written by the code that draws the chart */
.pk-donut { position: relative; display: grid; place-items: center; width: 148px; aspect-ratio: 1; flex: none; }
.pk-donut--sm { width: 96px; }
.pk-donut > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pk-donut circle { fill: none; stroke-width: 14; }
.pk-donut__track { stroke: var(--pk-inset-2); }
.pk-donut__seg { stroke: var(--pk-seg, var(--pk-ink)); }
.pk-donut__value { position: relative; font-size: var(--pk-fs-figure-2xl); line-height: var(--pk-lh-none); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pk-donut--sm .pk-donut__value { font-size: var(--pk-fs-figure-sm); }
.pk-donut__caption { position: relative; margin-top: var(--pk-space-2); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-donut__label { display: grid; justify-items: center; text-align: center; }
/* donut with its legend beside it; small single-value rings in a row */
.pk-pie { display: flex; align-items: center; gap: var(--pk-space-10); flex-wrap: wrap; }
.pk-pie > .pk-legend { flex: 1 1 150px; }
.pk-rings { display: flex; justify-content: space-around; gap: var(--pk-space-8); flex-wrap: wrap; }
.pk-ring { display: grid; justify-items: center; gap: var(--pk-space-4); }
/* segment and legend colours */
.pk-seg--ink { --pk-seg: var(--pk-ink); } .pk-seg--accent { --pk-seg: var(--pk-accent); } .pk-seg--success { --pk-seg: var(--pk-success); }
.pk-seg--warning { --pk-seg: var(--pk-warning); } .pk-seg--danger { --pk-seg: var(--pk-danger); } .pk-seg--ai { --pk-seg: var(--pk-ai); }
.pk-seg--p1 { --pk-seg: var(--pk-p1); } .pk-seg--p2 { --pk-seg: var(--pk-p2); } .pk-seg--p3 { --pk-seg: var(--pk-p3); }
.pk-seg--p4 { --pk-seg: var(--pk-p4); } .pk-seg--p5 { --pk-seg: var(--pk-p5); } .pk-seg--p6 { --pk-seg: var(--pk-p6); }
.pk-key { display: inline-flex; align-items: center; gap: var(--pk-space-4); min-width: 0; }
.pk-key::before { content: ''; width: 10px; height: 10px; border-radius: var(--pk-r-mark); background: var(--pk-seg, var(--pk-ink)); flex: none; }

/* gauge: one value on a half ring, same pathLength rule as the donut */
.pk-gauge { position: relative; display: grid; justify-items: center; }
.pk-gauge, .pk-gauge__scale { width: 100%; max-width: 240px; margin-inline: auto; }
.pk-gauge > svg { width: 100%; height: auto; overflow: visible; }
.pk-gauge path { fill: none; stroke-width: 12; stroke-linecap: round; }
.pk-gauge__track { stroke: var(--pk-inset-2); }
.pk-gauge__bar { stroke: var(--pk-seg, var(--pk-accent)); }
.pk-gauge__label { position: absolute; inset: auto 0 0; display: grid; justify-items: center; text-align: center; }
.pk-gauge__scale { display: flex; justify-content: space-between; margin-top: var(--pk-space-3); padding: 0 5%; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-axis); color: var(--pk-text-3); }

/* heatmap: hours across, weekdays down; the first column holds the day names, five steps of the accent */
.pk-heat { display: grid; grid-template-rows: auto repeat(7, auto); grid-template-columns: auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--pk-space-2); align-items: center; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-tiny); color: var(--pk-text-3); }
.pk-heat__label { padding-right: var(--pk-space-3); white-space: nowrap; }
.pk-heat__hour { text-align: center; white-space: nowrap; }
.pk-heat__cell { height: calc(26px * var(--pk-ds)); border-radius: var(--pk-r-xs); background: var(--pk-inset); }
/* a light accent alone gives too narrow a range: in light mode the top step is ink, darkening the accent would turn it muddy */
.pk-heat__cell--1 { background: color-mix(in oklch, var(--pk-accent) 30%, var(--pk-inset)); }
.pk-heat__cell--2 { background: color-mix(in oklch, var(--pk-accent) 65%, var(--pk-inset)); }
.pk-heat__cell--3 { background: light-dark(var(--pk-accent), color-mix(in oklch, var(--pk-accent) 82%, var(--pk-inset))); }
.pk-heat__cell--4 { background: light-dark(var(--pk-ink), var(--pk-accent)); }
.pk-heat__cell--closed { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 10%, transparent) 0 1.5px, transparent 1.5px 6px), var(--pk-inset); }
.pk-heat-key { display: inline-flex; align-items: center; gap: var(--pk-space-2); font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-heat-key .pk-heat__cell { width: 16px; height: 16px; }

/* ---------- lists and states ---------- */
/* notice: a standing note inside a page; tone by soft background and icon, never a coloured edge. Its actions sit beside the
   text in a wide notice and under it, aligned with the text, in a narrow one */
.pk-notice { container: pk-notice / inline-size; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pk-space-5) var(--pk-space-6); padding: var(--pk-space-7) var(--pk-space-8); border-radius: var(--pk-r-tile); background: var(--pk-inset); font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-notice > .pk-icon { flex: none; margin-top: 1px; color: var(--pk-text); }
.pk-notice__body { flex: 1; min-width: 0; text-wrap: pretty; }
.pk-notice__title { display: block; font-weight: var(--pk-fw-strong); color: var(--pk-ink); }
.pk-notice__actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); align-self: center; }
@container pk-notice (width < 560px) {
  .pk-notice__actions { flex-basis: 100%; }
  .pk-notice > .pk-icon ~ .pk-notice__actions { margin-left: var(--pk-space-16); }
}
/* on a tinted notice or a tile a soft or danger button would vanish into the background */
:is(.pk-notice, .pk-tile) :is(.pk-btn--danger, .pk-btn--soft, .pk-icon-btn--soft) { background: var(--pk-card); }
/* slim: one line in the page's flow (a reminder, not a block): the title runs into its text, the action stays beside them */
.pk-notice--slim { align-items: center; padding: var(--pk-space-4) var(--pk-space-6) var(--pk-space-4) var(--pk-space-7); }
.pk-notice--slim > .pk-icon { margin-top: 0; }
.pk-notice--slim .pk-notice__title { display: inline; margin-right: var(--pk-space-2); }
.pk-notice--warning { background: var(--pk-warning-soft); }
.pk-notice--warning > .pk-icon { color: var(--pk-warning-text); }
.pk-notice--danger { background: var(--pk-danger-soft); }
.pk-notice--danger > .pk-icon { color: var(--pk-danger-text); }
.pk-notice--success { background: var(--pk-success-soft); }
.pk-notice--success > .pk-icon { color: var(--pk-success-text); }

/* banner and floating bar: one line as tall as a small button; a narrow one takes a second line, so its corners stop at the
   one-line radius instead of turning it into a blob */
.pk-banner, .pk-bar { border-radius: min(var(--pk-r-control), calc(var(--pk-h-btn-sm) / 2 + 8px)); }
.pk-banner { container: pk-banner / inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-6); padding: var(--pk-space-4); font-size: var(--pk-fs-small); }
.pk-banner > :first-child { margin-left: var(--pk-space-5); }
.pk-banner > .pk-icon { color: var(--pk-accent-on-dark); }
.pk-banner__text { flex: 1; min-width: 0; text-wrap: pretty; }
@container pk-banner (width < 440px) {
  .pk-banner__text { flex-basis: calc(100% - 42px); }
  .pk-banner > .pk-btn { margin-left: 42px; }
}

/* floating ink bar: bulk actions for selected rows, or unsaved changes. A narrow bar keeps the text (and the close button) on
   the first line and the actions together on the second */
.pk-bar { container: pk-bar / inline-size; display: flex; align-items: center; gap: var(--pk-space-4); flex-wrap: wrap; padding: var(--pk-space-4); box-shadow: var(--pk-float-shadow); }
.pk-bar__text { margin-right: auto; padding-left: var(--pk-space-5); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-label); }
@container pk-bar (width < 480px) {
  .pk-bar__text { flex: 1 0 100%; }
  .pk-bar__text:has(~ .pk-icon-btn) { flex-basis: calc(100% - var(--pk-h-btn-sm) - 8px); }
  .pk-bar > .pk-btn { order: 1; flex: 1 1 auto; }
}
.pk-bar--sticky { position: sticky; bottom: var(--pk-space-8); z-index: 15; }
/* leave room under the content for a fixed bar */
.pk-main:has(> .pk-bar--fixed) { padding-bottom: 96px; }
/* centred on the content, not the window: the shell sets the shift for its menu (0 in the phone shell) */
.pk-bar--fixed { position: fixed; left: calc(50% + var(--pk-content-shift, 0px)); bottom: calc(var(--pk-space-12) + env(safe-area-inset-bottom, 0px)); z-index: 25; width: min(680px, 100vw - 32px - 2 * var(--pk-content-shift, 0px)); transform: translateX(-50%); }

.pk-filterbar { display: flex; align-items: center; gap: var(--pk-space-4); flex-wrap: wrap; }
/* a filter that is a native select inside a chip: the chip draws the frame and the arrow, the select only its text */
.pk-chipselect { position: relative; cursor: pointer; }
.pk-chipselect__control { appearance: none; border: 0; background: transparent; color: var(--pk-text); font: inherit; font-weight: var(--pk-fw-strong); padding: 0; cursor: pointer; }
.pk-chipselect__control:focus-visible { outline: none; }
.pk-chipselect:has(.pk-chipselect__control:focus-visible) { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
/* a paragraph that keeps the line breaks it was written with */
.pk-lines { white-space: pre-line; }
.pk-filterbar > .pk-search { flex: 1 1 240px; min-width: 0; max-width: 380px; }
/* chips that share the search row on wide screens and become one swipeable line on phones */
.pk-filterbar__scroll { display: contents; }
/* an applied filter, drawn in the current style like the chosen chip */
.pk-tag { display: inline-flex; align-items: center; justify-self: start; gap: var(--pk-space-3); height: 32px; padding: 0 5px 0 var(--pk-space-6); border-radius: var(--pk-r-control); background: var(--pk-current); color: var(--pk-on-current); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-label); white-space: nowrap; }
/* a long tag keeps its remove button in view: the tag ends at its box's edge and its text (pk-tag__text) ends in an ellipsis */
.pk-tag { max-width: 100%; }
.pk-tag__text { min-width: 0; overflow: clip; text-overflow: ellipsis; }
/* its ring falls on the tag's own fill, so it takes the tag's text colour */
.pk-tag__remove { --pk-focus-outline: 2px solid currentColor; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--pk-r-pill); display: grid; place-items: center; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; cursor: pointer; }
.pk-tag__remove .pk-icon { width: 14px; height: 14px; }
.pk-tag--soft { background: var(--pk-inset); color: var(--pk-ink); }
.pk-tag--soft .pk-tag__remove { background: var(--pk-card); }

/* list section header: day groups ("Bugün", "Yarın"), categories */
.pk-listhead { display: flex; align-items: baseline; gap: var(--pk-space-5); padding: var(--pk-space-9) var(--pk-space-2) var(--pk-space-4); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); }
.pk-listhead:first-child { padding-top: 0; }
.pk-listhead__count { font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-regular); color: var(--pk-text-3); }
.pk-listhead__meta { margin-left: auto; font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-regular); color: var(--pk-text-3); }

/* tile: a row on a grey panel with a lead (avatar or icon), the body and an optional end (status or actions). The end stays
   beside the body and the meta wraps under the title; in a narrow tile the end moves under the body, the same for every tile
   of a list, and its buttons wrap there when they outgrow the row. An end with two parts or a labelled button needs a wider
   tile, one with three labelled buttons wider still; an end that is a single icon (a chevron) never moves */
.pk-tile {
  container: pk-tile / inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'lead body end';
  align-items: center; gap: 0; min-width: 0; padding: calc(var(--pk-space-6) * var(--pk-ds)) var(--pk-space-6) calc(var(--pk-space-6) * var(--pk-ds)) var(--pk-space-7);
  border-radius: var(--pk-r-tile); background: var(--pk-inset);
}
.pk-tile > :first-child:not(.pk-tile__body) { margin-right: var(--pk-space-6); }
.pk-tile__body { grid-area: body; min-width: 0; }
.pk-tile__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-4); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); }
.pk-tile__meta { display: block; margin-top: var(--pk-space-1); font-size: var(--pk-fs-meta); color: var(--pk-text-2); white-space: normal; overflow-wrap: break-word; text-wrap: pretty; }
.pk-tile__end { grid-area: end; display: flex; align-items: center; gap: var(--pk-space-4); margin: 0 0 0 var(--pk-space-6); }
.pk-tile:has(> .pk-tile__end > :is(:nth-child(2), .pk-btn)) { --pk-tile-wide-end: 1; }
.pk-tile:has(> .pk-tile__end > .pk-btn ~ .pk-btn ~ .pk-btn) { --pk-tile-wide-end: 2; }
/* plain tile: the same layout without the panel, for a person or record header in a card; its larger title needs the room
   of a two-part end */
.pk-tile--plain { --pk-tile-wide-end: 1; padding: 0; border-radius: 0; background: none; }
@container pk-tile (width < 280px) or ((width < 380px) and style(--pk-tile-wide-end: 1)) or ((width < 560px) and style(--pk-tile-wide-end: 2)) {
  .pk-tile__end:not(:has(> .pk-icon:only-child)) { grid-area: 2 / body; flex-wrap: wrap; margin: var(--pk-space-5) 0 0; }
}
/* a tile that is a button (a template to start from, a row to pick) drops the browser's button frame. One that cannot be
   taken reads as an option that cannot: no fill, a hairline, its words and marks faint */
:where(button.pk-tile) { width: 100%; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pk-tile:is(:disabled, [aria-disabled='true']) { background: transparent; box-shadow: var(--pk-ring); color: var(--pk-text-3); cursor: not-allowed; }
.pk-tile:is(:disabled, [aria-disabled='true']) :is(.pk-tile__meta, .pk-tile__icon, .pk-tile__end) { color: inherit; }

/* inbox: messages and requests; whole row is one link. In a narrow inbox the source moves under the name, so the name keeps
   its width */
.pk-inbox { container: pk-inbox / inline-size; display: grid; gap: var(--pk-space-1); }
.pk-inbox__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pk-space-1) var(--pk-space-7); padding: calc(var(--pk-space-7) * var(--pk-ds)); border-radius: var(--pk-r-tile); }
.pk-inbox__item:hover { background: var(--pk-inset); }
.pk-inbox__item > .pk-avatar { grid-row: span 3; }
.pk-inbox__top { display: flex; align-items: center; gap: var(--pk-space-4); min-width: 0; }
.pk-inbox__name { font-weight: var(--pk-fw-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-inbox__item[data-unread] .pk-inbox__name { font-weight: 680; }
.pk-inbox__item[data-unread] .pk-inbox__name::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 var(--pk-space-4) 1px 0; border-radius: var(--pk-r-pill); background: var(--pk-accent-figure); }
.pk-inbox__time { margin-left: auto; flex: none; font-family: var(--pk-mono); font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-inbox__preview { font-size: var(--pk-fs-small); color: var(--pk-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-inbox__meta { display: flex; align-items: center; gap: var(--pk-space-4); flex-wrap: wrap; margin-top: var(--pk-space-3); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
@container pk-inbox (width < 420px) {
  .pk-inbox__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pk-space-2) var(--pk-space-4); }
  .pk-inbox__top > .pk-pill { grid-row: 2; justify-self: start; }
}

/* thumbnails: reference images on requests and bookings */
.pk-thumbs { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); }
.pk-thumb { position: relative; width: 56px; height: 56px; flex: none; overflow: hidden; border-radius: var(--pk-r-sm); background: var(--pk-inset); }
.pk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pk-thumb--lg { width: 88px; height: 88px; border-radius: var(--pk-r-split); }
/* a veil on a photo has to darken it the same in both modes */
.pk-thumb__more { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--pk-on-bright) 60%, transparent); color: var(--pk-on-dark); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-strong); }

/* stat strip: one row of figures where each gets about 180px, else two per row (an odd last one takes the row), one under
   300px. Labels, values and notes line up across a row (subgrid), and each cell draws its own hairlines, so the strip never
   shows an empty grey cell */
.pk-stats { container: pk-stats / inline-size; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; overflow: hidden; border-radius: var(--pk-r-card); background: var(--pk-card); }
.pk-stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--pk-space-1); padding: calc(var(--pk-space-8) * var(--pk-ds)) var(--pk-space-10); background: var(--pk-card); box-shadow: var(--pk-ring-out); }
.pk-stat__label { font-size: var(--pk-fs-meta); color: var(--pk-text-2); text-wrap: pretty; }
/* a long figure (an amount) still fits half of a phone-wide strip */
.pk-stat__value { font-size: clamp(var(--pk-fs-figure-lg), 8cqi, var(--pk-fs-figure-2xl)); line-height: var(--pk-lh-tight); font-weight: var(--pk-fw-book); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
@container pk-stats (300px <= width < 720px) {
  .pk-stat:nth-child(odd) { grid-column: 1; }
  .pk-stat:nth-child(even) { grid-column: 2; }
  .pk-stat:nth-child(odd):last-child { grid-column: 1 / span 2; }
}
/* five or six figures do not fit one row of a tablet-wide strip: they take three columns */
@container pk-stats (720px <= width < 1040px) {
  .pk-stats:has(> :nth-child(5)) > .pk-stat:nth-child(3n + 1) { grid-column: 1; }
  .pk-stats:has(> :nth-child(5)) > .pk-stat:nth-child(3n + 2) { grid-column: 2; }
  .pk-stats:has(> :nth-child(5)) > .pk-stat:nth-child(3n) { grid-column: 3; }
}
@container pk-stats (width < 300px) {
  .pk-stat { grid-column: 1; }
}

/* accordion: native <details>, one question or group per row, rows split by a hairline */
.pk-acc + .pk-acc { border-top: 1px solid var(--pk-line); }
.pk-acc__head { display: flex; align-items: center; gap: var(--pk-space-6); min-height: max(calc(56px * var(--pk-ds)), var(--pk-tap)); padding: var(--pk-space-4) 0; list-style: none; font-weight: var(--pk-fw-title); cursor: pointer; }
.pk-acc__head::-webkit-details-marker { display: none; }
.pk-acc__meta { margin-left: auto; font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-regular); color: var(--pk-text-3); }
.pk-acc__chevron { margin-left: auto; color: var(--pk-text-3); transition: transform var(--pk-dur-move) var(--pk-ease); }
.pk-acc__meta + .pk-acc__chevron { margin-left: 0; }
.pk-acc[open] .pk-acc__chevron { transform: rotate(180deg); }
.pk-acc__body { padding: 0 0 var(--pk-space-9); font-size: var(--pk-fs-control); line-height: var(--pk-lh-loose); color: var(--pk-text-2); }
/* ---------- calendar ---------- */
.pk-weeknav { display: inline-flex; align-items: center; gap: var(--pk-space-3); }
.pk-weeknav__label { min-width: 150px; text-align: center; font-weight: var(--pk-fw-strong); font-size: var(--pk-fs-item); }

/* week grid: an hour gutter and seven days; rows are --pk-week-step minutes from the first hour shown (pk-r1 = first row;
   quarter hours unless pk-week--step5), a quarter hour --pk-week-q tall (taller on touch screens, 18-responsive). A box too
   narrow for seven days shows the days that fit whole and swipes a day at a time under the pinned hours, so no day is ever cut */
.pk-week-wrap { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; container: pk-week / inline-size; }
.pk-week {
  --pk-week-rows: 40; --pk-week-step: 15; --pk-week-q: 14px; --pk-week-gutter: 64px; --pk-week-day: minmax(108px, 1fr); --pk-lanes: 1;
  display: grid; grid-template-columns: var(--pk-week-gutter) repeat(7, var(--pk-week-day));
  grid-template-rows: auto auto repeat(var(--pk-week-rows), calc(var(--pk-week-q) * var(--pk-week-step) / 15));
  position: relative;
}
@container pk-week (max-width: 819px) {
  /* as wide as its days, so the pinned hours stay in place to the last day */
  .pk-week { --pk-week-days: 6; --pk-week-day: calc((100cqw - var(--pk-week-gutter)) / var(--pk-week-days)); width: max-content; }
  /* above the entries of every lane (pk-lane4 is 4) */
  .pk-week::before { content: ''; grid-column: 1; grid-row: 1 / -1; position: sticky; left: 0; z-index: 5; background: var(--pk-card); }
  .pk-week__label { position: sticky; left: 0; z-index: 6; }
  .pk-week__day { scroll-snap-align: start; scroll-margin-left: var(--pk-week-gutter); }
}
@container pk-week (max-width: 735px) { .pk-week { --pk-week-days: 5; } }
@container pk-week (max-width: 623px) { .pk-week { --pk-week-days: 4; } }
@container pk-week (max-width: 511px) { .pk-week { --pk-week-days: 3; } }
@container pk-week (max-width: 399px) { .pk-week { --pk-week-days: 2; } }
@container pk-week (max-width: 287px) { .pk-week { --pk-week-days: 1; } }
.pk-week__day { grid-row: 1; padding: 0 var(--pk-space-2) var(--pk-space-5); text-align: center; font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-week__day b { display: grid; place-items: center; width: 36px; height: 36px; margin: var(--pk-space-1) auto 0; border-radius: var(--pk-r-control); font-size: var(--pk-fs-title-xl); font-weight: var(--pk-fw-book); color: var(--pk-ink); }
.pk-week__day[aria-current='date'] b { background: var(--pk-current); color: var(--pk-on-current); }
.pk-week__allday { grid-row: 2; display: flex; align-items: flex-start; padding: var(--pk-space-2) 3px var(--pk-space-4); min-width: 0; }
.pk-week__label { grid-column: 1; padding-right: var(--pk-space-4); font-family: var(--pk-mono); font-size: var(--pk-fs-micro); line-height: var(--pk-lh-tight); color: var(--pk-text-3); text-align: right; white-space: nowrap; }
/* level with the all-day events; the room under it holds the upper half of the first hour label */
.pk-week__label--allday { grid-row: 2; align-self: start; margin: var(--pk-space-5) 0 var(--pk-space-4); font-family: var(--pk-font); font-size: var(--pk-fs-tiny); line-height: 1.15; white-space: normal; }
.pk-week__hour { transform: translateY(-50%); }
.pk-week__col { grid-row: 3 / -1; border-left: 1px solid var(--pk-line); background: repeating-linear-gradient(to bottom, var(--pk-line) 0 1px, transparent 1px calc(var(--pk-week-q) * 4)); }
.pk-week__col--closed { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 7%, transparent) 0 1.5px, transparent 1.5px 8px), repeating-linear-gradient(to bottom, var(--pk-line) 0 1px, transparent 1px calc(var(--pk-week-q) * 4)); }
/* today's column gets a neutral tint: an accent tint would swallow the events drawn in a similar colour */
.pk-week__col[aria-current='date'] { background-color: color-mix(in srgb, var(--pk-inset) 70%, transparent); }
/* the now line runs over the empty columns and under the events, so it never strikes through an event's text */
.pk-week__now { position: relative; z-index: 0; align-self: start; height: 2px; margin-left: -1px; background: var(--pk-ink); }
.pk-week__now::before { content: ''; position: absolute; left: -5px; top: calc(-1 * var(--pk-space-2)); width: 10px; height: 10px; border-radius: var(--pk-r-pill); background: var(--pk-ink); }
.pk-week__more { align-self: end; justify-self: start; margin: 0 var(--pk-space-2) var(--pk-space-1); padding: var(--pk-space-1) var(--pk-space-4); border: 0; border-radius: var(--pk-r-tag); background: var(--pk-card); font-size: var(--pk-fs-axis); font-weight: var(--pk-fw-strong); box-shadow: var(--pk-ring-out-strong); cursor: pointer; z-index: 2; }

/* event: soft person colour, no coloured edge; pending is dashed, closed time hatched. Names, times and services wrap in
   the room the event has instead of ending in an ellipsis */
.pk-event {
  --pk-ev: var(--pk-accent); --pk-ev-soft: var(--pk-accent-soft); --pk-ev-text: var(--pk-accent-text);
  position: relative; z-index: 1; min-width: 0; min-height: 0; margin: 1px var(--pk-space-2) 1px 3px; padding: 5px var(--pk-space-4); overflow: hidden; overflow-wrap: anywhere;
  border-radius: var(--pk-r-xs); background: var(--pk-ev-soft); color: var(--pk-ev-text); font-size: var(--pk-fs-fine); line-height: var(--pk-lh-title);
}
.pk-event__title { display: block; font-weight: var(--pk-fw-strong); color: var(--pk-ink); }
.pk-event__time { display: block; font-family: var(--pk-mono); font-size: var(--pk-fs-tiny); }
.pk-event__meta { display: block; }
/* in the grid an event is as big as its hours and shows what fits that box: a narrow one drops pk-event__end, the end of
   the range, which its length already shows */
.pk-week > .pk-event { container: pk-event / size; }
/* the grid swipes a day at a time, so a day's edge is often the box's edge: the grid's own parts draw their rings inside */
.pk-week :is(.pk-event, .pk-week__more, .pk-week__add):focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
@container pk-event (max-width: 73px) {
  .pk-event__end { display: none; }
}
.pk-event--p1 { --pk-ev: var(--pk-p1); --pk-ev-soft: var(--pk-p1-soft); --pk-ev-text: var(--pk-p1-text); }
.pk-event--p2 { --pk-ev: var(--pk-p2); --pk-ev-soft: var(--pk-p2-soft); --pk-ev-text: var(--pk-p2-text); }
.pk-event--p3 { --pk-ev: var(--pk-p3); --pk-ev-soft: var(--pk-p3-soft); --pk-ev-text: var(--pk-p3-text); }
.pk-event--p4 { --pk-ev: var(--pk-p4); --pk-ev-soft: var(--pk-p4-soft); --pk-ev-text: var(--pk-p4-text); }
.pk-event--p5 { --pk-ev: var(--pk-p5); --pk-ev-soft: var(--pk-p5-soft); --pk-ev-text: var(--pk-p5-text); }
.pk-event--p6 { --pk-ev: var(--pk-p6); --pk-ev-soft: var(--pk-p6-soft); --pk-ev-text: var(--pk-p6-text); }
/* the dashed edge is drawn over the box, so a pending event has the same room inside as the others */
.pk-event--pending { background: var(--pk-card); }
.pk-event--pending::after { content: ''; position: absolute; inset: 0; border: 1.5px dashed var(--pk-ev); border-radius: inherit; pointer-events: none; }
/* half-hour bookings: one line with the time first, which gives way to the name in a narrow column; in taller rows (touch
   screens) the name and the time take a line each */
.pk-event--short { display: flex; flex-wrap: wrap; align-items: center; align-content: center; column-gap: var(--pk-space-3); padding-block: var(--pk-space-1); }
.pk-event--short .pk-event__time { flex: none; }
.pk-event--short .pk-event__title { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container pk-event (max-width: 123px) and (max-height: 27px) {
  .pk-event--short .pk-event__time { display: none; }
}
@container pk-event (min-height: 28px) {
  .pk-event--short .pk-event__title { flex-basis: 100%; order: -1; }
}
.pk-event--blocked { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 10%, transparent) 0 1.5px, transparent 1.5px 7px), var(--pk-inset); color: var(--pk-text-2); }
.pk-event--blocked .pk-event__title { color: var(--pk-text-2); }
/* cancelled: struck-through title and a grey time, no opacity (it took the text under 4.5:1) */
.pk-event--cancelled { color: var(--pk-text-2); }
.pk-event--cancelled .pk-event__title { text-decoration: line-through; }
.pk-event--group { background: var(--pk-inset-2); color: var(--pk-text-2); }
.pk-week__allday .pk-event { flex: 1; margin: 0; }

/* placement utilities: day column (d1 = Monday), start row, length in quarter hours */
.pk-d1 { grid-column: 2; } .pk-d2 { grid-column: 3; } .pk-d3 { grid-column: 4; } .pk-d4 { grid-column: 5; } .pk-d5 { grid-column: 6; } .pk-d6 { grid-column: 7; } .pk-d7 { grid-column: 8; }
.pk-r1 { grid-row-start: 3; } .pk-r2 { grid-row-start: 4; } .pk-r3 { grid-row-start: 5; } .pk-r4 { grid-row-start: 6; } .pk-r5 { grid-row-start: 7; } .pk-r6 { grid-row-start: 8; } .pk-r7 { grid-row-start: 9; } .pk-r8 { grid-row-start: 10; }
.pk-r9 { grid-row-start: 11; } .pk-r10 { grid-row-start: 12; } .pk-r11 { grid-row-start: 13; } .pk-r12 { grid-row-start: 14; } .pk-r13 { grid-row-start: 15; } .pk-r14 { grid-row-start: 16; } .pk-r15 { grid-row-start: 17; } .pk-r16 { grid-row-start: 18; }
.pk-r17 { grid-row-start: 19; } .pk-r18 { grid-row-start: 20; } .pk-r19 { grid-row-start: 21; } .pk-r20 { grid-row-start: 22; } .pk-r21 { grid-row-start: 23; } .pk-r22 { grid-row-start: 24; } .pk-r23 { grid-row-start: 25; } .pk-r24 { grid-row-start: 26; }
.pk-r25 { grid-row-start: 27; } .pk-r26 { grid-row-start: 28; } .pk-r27 { grid-row-start: 29; } .pk-r28 { grid-row-start: 30; } .pk-r29 { grid-row-start: 31; } .pk-r30 { grid-row-start: 32; } .pk-r31 { grid-row-start: 33; } .pk-r32 { grid-row-start: 34; }
.pk-r33 { grid-row-start: 35; } .pk-r34 { grid-row-start: 36; } .pk-r35 { grid-row-start: 37; } .pk-r36 { grid-row-start: 38; } .pk-r37 { grid-row-start: 39; } .pk-r38 { grid-row-start: 40; } .pk-r39 { grid-row-start: 41; } .pk-r40 { grid-row-start: 42; }
.pk-r41 { grid-row-start: 43; } .pk-r42 { grid-row-start: 44; } .pk-r43 { grid-row-start: 45; } .pk-r44 { grid-row-start: 46; } .pk-r45 { grid-row-start: 47; } .pk-r46 { grid-row-start: 48; } .pk-r47 { grid-row-start: 49; } .pk-r48 { grid-row-start: 50; }
.pk-r49 { grid-row-start: 51; } .pk-r50 { grid-row-start: 52; } .pk-r51 { grid-row-start: 53; } .pk-r52 { grid-row-start: 54; } .pk-r53 { grid-row-start: 55; } .pk-r54 { grid-row-start: 56; } .pk-r55 { grid-row-start: 57; } .pk-r56 { grid-row-start: 58; }
.pk-l1 { grid-row-end: span 1; } .pk-l2 { grid-row-end: span 2; } .pk-l3 { grid-row-end: span 3; } .pk-l4 { grid-row-end: span 4; } .pk-l5 { grid-row-end: span 5; } .pk-l6 { grid-row-end: span 6; } .pk-l7 { grid-row-end: span 7; } .pk-l8 { grid-row-end: span 8; }
.pk-l9 { grid-row-end: span 9; } .pk-l10 { grid-row-end: span 10; } .pk-l11 { grid-row-end: span 11; } .pk-l12 { grid-row-end: span 12; } .pk-l13 { grid-row-end: span 13; } .pk-l14 { grid-row-end: span 14; } .pk-l15 { grid-row-end: span 15; } .pk-l16 { grid-row-end: span 16; }
.pk-l17 { grid-row-end: span 17; } .pk-l18 { grid-row-end: span 18; } .pk-l19 { grid-row-end: span 19; } .pk-l20 { grid-row-end: span 20; } .pk-l21 { grid-row-end: span 21; } .pk-l22 { grid-row-end: span 22; } .pk-l23 { grid-row-end: span 23; } .pk-l24 { grid-row-end: span 24; }
.pk-l25 { grid-row-end: span 25; } .pk-l26 { grid-row-end: span 26; } .pk-l27 { grid-row-end: span 27; } .pk-l28 { grid-row-end: span 28; } .pk-l29 { grid-row-end: span 29; } .pk-l30 { grid-row-end: span 30; } .pk-l31 { grid-row-end: span 31; } .pk-l32 { grid-row-end: span 32; }

/* day agenda: the phone form of the calendar */
.pk-agenda { display: grid; gap: var(--pk-space-4); }
.pk-agenda__row { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: var(--pk-space-5); align-items: start; }
.pk-agenda__time { padding-top: 7px; font-family: var(--pk-mono); font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-agenda .pk-event { margin: 0; padding: var(--pk-space-5) var(--pk-space-6); font-size: var(--pk-fs-meta); }
.pk-agenda .pk-event__title { font-size: var(--pk-fs-control); }
.pk-agenda__free { display: flex; align-items: center; gap: var(--pk-space-5); min-height: 44px; padding: 0 var(--pk-space-6); border-radius: var(--pk-r-xs); border: 1.5px dashed var(--pk-line-strong); color: var(--pk-text-2); font-size: var(--pk-fs-meta); }

/* month grid */
.pk-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--pk-space-3); container: pk-month / inline-size; }
.pk-month__dow { padding-bottom: var(--pk-space-1); text-align: center; font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-month__day { display: grid; align-content: start; gap: 3px; min-width: 0; min-height: 100px; padding: var(--pk-space-4); border-radius: var(--pk-r-field); background: var(--pk-inset); font-size: var(--pk-fs-fine); }
.pk-month__day[data-outside] { background: transparent; color: var(--pk-text-3); box-shadow: var(--pk-ring); }
.pk-month__num { display: grid; place-items: center; width: 26px; height: 26px; margin: -3px 0 var(--pk-space-1) -3px; border-radius: var(--pk-r-control); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; }
.pk-month__day[aria-current='date'] .pk-month__num { background: var(--pk-current); color: var(--pk-on-current); }
/* a booking line: the dot hangs in the indent, the name sits beside the time or under it when the day is narrow */
.pk-month__ev { display: flex; flex-wrap: wrap; align-items: center; column-gap: 5px; min-width: 0; padding-left: 13px; overflow-wrap: anywhere; }
.pk-month__ev > .pk-who { margin-left: -13px; }
.pk-month__ev .pk-mono { flex: none; color: var(--pk-text-2); }
.pk-month__more { color: var(--pk-text-3); font-weight: var(--pk-fw-label); }
.pk-month__day[data-closed] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 8%, transparent) 0 1.5px, transparent 1.5px 7px), var(--pk-inset); color: var(--pk-text-3); }
/* a month too narrow for booking lines shows a count per day */
.pk-month__count {
  display: none; place-items: center; width: 20px; height: 20px; border-radius: var(--pk-r-tag); background: var(--pk-card);
  font-size: var(--pk-fs-tiny); font-weight: var(--pk-fw-bold); font-variant-numeric: tabular-nums;
}
@container pk-month (max-width: 759px) {
  .pk-month__day { min-height: 54px; padding: var(--pk-space-3); }
  .pk-month__ev, .pk-month__more, .pk-month__day > .pk-meta { display: none; }
  .pk-month__count { display: grid; }
}

/* date picker: one month of day buttons in the theme's control shape */
.pk-datepick { --pk-range-band: var(--pk-inset); display: grid; gap: var(--pk-space-5); }
/* the corporate inset is almost white on its white cards, so its range band takes the next step */
[data-theme='corporate'] .pk-datepick { --pk-range-band: var(--pk-inset-2); }
.pk-datepick__head { display: flex; align-items: center; gap: var(--pk-space-3); }
.pk-datepick__title { flex: 1; text-align: center; font-weight: var(--pk-fw-strong); }
/* a head with one arrow keeps the title centred over the grid */
.pk-datepick__title:first-child { padding-left: var(--pk-h-btn-sm); }
.pk-datepick__title:last-child { padding-right: var(--pk-h-btn-sm); }
.pk-datepick__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--pk-space-1); text-align: center; }
.pk-datepick__dow { padding: var(--pk-space-2) 0; font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-datepick__day {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto; padding: 0; border: 0; border-radius: var(--pk-r-control);
  background: transparent; font: inherit; font-size: var(--pk-fs-small); font-variant-numeric: tabular-nums; color: var(--pk-ink); cursor: pointer;
}
.pk-datepick__day:hover { background: var(--pk-inset); }
.pk-datepick__day[aria-current='date'] { box-shadow: var(--pk-ring-ink); }
.pk-datepick__day[aria-pressed='true'] { background: var(--pk-current); color: var(--pk-on-current); }
/* a day with free time carries a dot, in the day's own ink once it is chosen */
.pk-datepick__day[data-state='free']::after { content: ''; position: absolute; bottom: var(--pk-space-2); width: 4px; height: 4px; border-radius: var(--pk-r-pill); background: var(--pk-success-text); }
.pk-datepick__day[data-state='free'][aria-pressed='true']::after { background: currentColor; }
.pk-datepick__day:disabled { color: var(--pk-text-3); cursor: default; background: transparent; }
.pk-datepick__day[data-outside] { visibility: hidden; }
/* range: whole-cell days on a gapless grid; the band is the cell background, the two ends are discs under the number */
.pk-datepick__grid--range { column-gap: 0; }
.pk-datepick__grid--range .pk-datepick__day { width: 100%; border-radius: 0; isolation: isolate; }
.pk-datepick__grid--range .pk-datepick__day::before { content: ''; position: absolute; z-index: -1; width: 38px; height: 38px; border-radius: var(--pk-r-control); }
.pk-datepick__grid--range .pk-datepick__day:hover { background-color: transparent; }
.pk-datepick__grid--range .pk-datepick__day:hover::before { background: var(--pk-inset); }
.pk-datepick__grid--range .pk-datepick__day[aria-current='date'] { box-shadow: none; }
.pk-datepick__grid--range .pk-datepick__day[aria-current='date']::before { box-shadow: var(--pk-ring-ink); }
.pk-datepick__grid--range .pk-datepick__day[data-range='in'] { background-color: var(--pk-range-band); }
.pk-datepick__day[data-range='start'] { background: linear-gradient(var(--pk-range-band), var(--pk-range-band)) right / 50% 100% no-repeat; }
.pk-datepick__day[data-range='end'] { background: linear-gradient(var(--pk-range-band), var(--pk-range-band)) left / 50% 100% no-repeat; }
.pk-datepick__day:is([data-range='start'], [data-range='end'], [data-range='single']) { color: var(--pk-on-current); }
.pk-datepick__grid--range .pk-datepick__day:is([data-range='start'], [data-range='end'], [data-range='single'])::before { background: var(--pk-current); }
/* date range pop-up: quick choices on the left, two months */
.pk-range { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--pk-space-4); }
.pk-range__presets { display: grid; align-content: start; gap: var(--pk-space-1); padding-right: var(--pk-space-4); border-right: 1px solid var(--pk-line); }
.pk-range__preset { display: flex; align-items: center; height: calc(var(--pk-h-btn) - 4px); padding: 0 var(--pk-space-6); border: 0; border-radius: var(--pk-r-field); background: transparent; font: inherit; font-size: var(--pk-fs-small); color: var(--pk-text); text-align: left; white-space: nowrap; cursor: pointer; }
.pk-range__preset:hover { background: var(--pk-inset); }
.pk-range__preset[aria-pressed='true'] { background: var(--pk-current); color: var(--pk-on-current); font-weight: var(--pk-fw-strong); }
.pk-range__months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-space-12); padding: var(--pk-space-2) var(--pk-space-4); }
/* the arrows between the two months; they come back on phones where one month shows */
.pk-range__inner { visibility: hidden; }

/* time slots and the day strip of booking forms */
.pk-slots { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); }
.pk-slot {
  display: inline-flex; align-items: center; gap: 7px; height: calc(var(--pk-h-btn) - 4px); padding: 0 var(--pk-space-7); border: 0; border-radius: var(--pk-r-control);
  background: var(--pk-inset); font-family: var(--pk-mono); font-size: var(--pk-fs-label); color: var(--pk-ink); cursor: pointer;
}
.pk-slot:hover { box-shadow: var(--pk-ring-mark-strong); }
.pk-slot[aria-pressed='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-slot:disabled { background: transparent; color: var(--pk-text-3); text-decoration: line-through; box-shadow: var(--pk-ring); cursor: default; }
/* the strip scrolls, so it keeps room inside for its days' focus rings */
.pk-days {
  display: flex; gap: var(--pk-space-4); margin: calc(-1 * var(--pk-focus-room)); padding: var(--pk-focus-room) var(--pk-focus-room) calc(var(--pk-focus-room) + var(--pk-space-1));
  overflow-x: auto; scroll-padding-inline: var(--pk-focus-room); scrollbar-width: none;
}
.pk-days::-webkit-scrollbar { display: none; }
/* a strip that fills its width where there is room (the day agenda on a tablet) */
.pk-days--fill > .pk-day { flex: 1 0 62px; }
.pk-day {
  flex: none; display: grid; justify-items: center; gap: var(--pk-space-1); width: 62px; padding: var(--pk-space-5) 0 var(--pk-space-4); border: 0; border-radius: var(--pk-r-tile);
  background: var(--pk-inset); font: inherit; color: var(--pk-ink); cursor: pointer;
}
.pk-day__dow { font-size: var(--pk-fs-fine); color: var(--pk-text-2); }
.pk-day__num { font-size: var(--pk-fs-figure-sm); font-weight: var(--pk-fw-medium); font-variant-numeric: tabular-nums; }
.pk-day__dot { width: 6px; height: 6px; border-radius: var(--pk-r-pill); background: var(--pk-success); }
.pk-day[aria-pressed='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-day[aria-pressed='true'] .pk-day__dow { color: inherit; }
.pk-day:disabled { cursor: default; opacity: 0.45; }
.pk-day:disabled .pk-day__dot { visibility: hidden; }

/* ---------- media ---------- */
/* tiles from 170px: a gallery in a record's side column has the same columns in every theme at tablet and laptop widths */
.pk-gallery { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: var(--pk-space-7); }
.pk-gtile { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--pk-space-4); min-width: 0; container: pk-gtile / inline-size; }
.pk-gtile__photo { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--pk-r-tile); background: var(--pk-inset); }
/* the photo whose details are open beside the gallery */
.pk-gtile[aria-current='true'] > .pk-gtile__photo { outline: 2.5px solid var(--pk-primary-edge); outline-offset: 2px; }
.pk-gtile__photo img { width: 100%; height: 100%; object-fit: cover; }
/* the parts laid over the photo share its grid cell, so they keep to the photo whatever the caption's height */
.pk-gtile > :is(.pk-gtile__photo, .pk-gtile__badges, .pk-gtile__handle, .pk-gtile__actions, .pk-checkbox) { grid-area: 1 / 1; }
.pk-gtile > :is(.pk-gtile__badges, .pk-gtile__handle, .pk-gtile__actions, .pk-checkbox) { position: relative; margin: var(--pk-space-4); }
.pk-gtile__badges { align-self: start; justify-self: start; display: flex; flex-wrap: wrap; gap: var(--pk-space-3); }
.pk-gtile__handle { align-self: start; justify-self: end; cursor: grab; }
.pk-gtile__actions { align-self: end; justify-self: end; display: flex; gap: max(var(--pk-space-3), 2 * var(--pk-tap-room)); opacity: 0; transition: opacity var(--pk-dur-fast) var(--pk-ease); }
.pk-gtile:hover .pk-gtile__actions, .pk-gtile:focus-within .pk-gtile__actions { opacity: 1; }
@media (hover: none) { .pk-gtile__actions { opacity: 1; } }
/* a tile under the gallery's minimum (two columns on a phone) shows its badges as icons beside the handle; the label stays
   for screen readers */
@container pk-gtile (max-width: 169px) {
  .pk-gtile > .pk-gtile__badges > .pk-pill { aspect-ratio: 1; justify-content: center; gap: 0; padding: 0; font-size: 0; }
}
.pk-gtile__caption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-1) var(--pk-space-4); min-width: 0; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
/* the person moves under a title that leaves no room for it; only a title wider than the tile is cut */
.pk-gtile__title { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-gtile[data-hidden] .pk-gtile__photo img { opacity: 0.4; }
/* the selection ring is drawn inside the photo, so two selected neighbours keep the gallery's gap between them */
.pk-gtile[data-selected] .pk-gtile__photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--pk-ring-active), inset 0 0 0 5px var(--pk-card); pointer-events: none; }
.pk-gtile--placeholder .pk-gtile__photo { background: transparent; border: 2px dashed var(--pk-line-strong); }
.pk-gtile > .pk-checkbox { align-self: start; justify-self: start; margin: var(--pk-space-6); }

/* a photo in a frame of its own shape: the picked item beside a gallery, a cover in a form */
.pk-photo { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--pk-r-tile); background: var(--pk-inset); }
.pk-photo > img { width: 100%; height: 100%; object-fit: cover; }
.pk-photo--square { aspect-ratio: 1; }
/* a screen's own shape, for screenshots of displays */
.pk-photo--wide { aspect-ratio: 16 / 9; }

/* image viewer: a dark stage with the image, a counter and the other images. In dark mode the stage takes the page colour
   with a hairline ring: the raised dark surface would grey the photos */
.pk-viewer { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--pk-space-7); padding: var(--pk-space-8); border-radius: var(--pk-r-card); background: light-dark(var(--pk-dark), var(--pk-canvas)); color: var(--pk-on-dark); box-shadow: 0 0 0 1px light-dark(transparent, var(--pk-line-strong)); }
.pk-viewer--fixed { position: fixed; inset: 0; z-index: 50; border-radius: 0; }
.pk-viewer__head { display: flex; align-items: center; gap: var(--pk-space-5); }
.pk-viewer__title { flex: 1; min-width: 0; font-weight: var(--pk-fw-title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* the image fills the stage box and keeps its shape; a percentage max-height would be ignored in an auto row */
.pk-viewer__stage { position: relative; min-height: 0; overflow: hidden; }
.pk-viewer__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pk-viewer__prev, .pk-viewer__next { position: absolute; top: 50%; transform: translateY(-50%); }
.pk-viewer__prev { left: var(--pk-space-4); }
.pk-viewer__next { right: var(--pk-space-4); }
.pk-viewer__strip { display: flex; justify-content: center; gap: var(--pk-space-4); overflow-x: auto; }
.pk-viewer__strip .pk-thumb { opacity: 0.55; }
.pk-viewer__strip .pk-thumb[aria-current='true'] { opacity: 1; box-shadow: 0 0 0 2px var(--pk-accent-on-dark); }

/* upload queue: one row per file, the state beside its name, the progress, the size or the reason it failed under both */
.pk-uploads { display: grid; gap: var(--pk-space-4); }
.pk-upload { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--pk-space-3) var(--pk-space-6); align-items: center; padding: var(--pk-space-5) var(--pk-space-6); border-radius: var(--pk-r-tile); background: var(--pk-inset); }
/* a file without a preview (queued, failed) shows its icon on the card colour, the row is the inset colour */
.pk-upload > .pk-thumb { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; background: var(--pk-card); color: var(--pk-text-3); }
.pk-upload__name { min-width: 0; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-upload__state { display: flex; align-items: center; gap: var(--pk-space-3); font-size: var(--pk-fs-meta); color: var(--pk-text-2); white-space: nowrap; }
.pk-upload__meta { grid-column: 2 / -1; display: flex; align-items: center; gap: var(--pk-space-5); min-width: 0; font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-upload__meta .pk-progress { flex: 1; height: 6px; background: var(--pk-card); }
.pk-upload[data-state='done'] .pk-upload__state { color: var(--pk-success-text); }
.pk-upload[data-state='error'] { background: var(--pk-danger-soft); }
.pk-upload[data-state='error'] :is(.pk-upload__meta, .pk-upload__state, .pk-thumb) { color: var(--pk-danger-text); }

/* ---------- settings ---------- */
.pk-settings { display: grid; grid-template-columns: minmax(0, 1fr); container: pk-settings / inline-size; }
.pk-setting { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-5) var(--pk-space-8); padding: calc(var(--pk-space-8) * var(--pk-ds)) 0; border-top: 1px solid var(--pk-line); }
.pk-setting:first-child { border-top: 0; padding-top: var(--pk-space-2); }
/* the text gives way before the control does, so a switch or a short select stays beside its title; a control that still
   does not fit takes the next line from the left, where a select runs the full width */
.pk-setting__body { flex: 1000 1 0; min-width: min(100%, 10rem); }
.pk-setting__title { display: block; font-weight: var(--pk-fw-title); }
.pk-setting__desc { display: block; margin-top: var(--pk-space-1); font-size: var(--pk-fs-label); color: var(--pk-text-2); }
.pk-setting__control { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); }
.pk-setting__control > .pk-control:has(> select) { flex: 1 1 auto; }
/* a line under the title and the control that takes the row's width (an uptime strip, a usage bar) */
.pk-setting__extra { flex: 1 1 100%; min-width: 0; }
/* on a narrow list every field goes under its text, so the rows read alike; switches stay beside their titles */
@container pk-settings (max-width: 479px) {
  .pk-setting__control:has(> .pk-control) { flex-basis: 100%; }
}

/* weekly hours: a switch and up to two time ranges per day */
.pk-hours { display: grid; }
.pk-hours__day { display: grid; grid-template-columns: 112px auto minmax(0, 1fr); gap: var(--pk-space-5) var(--pk-space-7); align-items: center; padding: calc(var(--pk-space-5) * var(--pk-ds)) 0; border-top: 1px solid var(--pk-line); }
.pk-hours__day:first-child { border-top: 0; padding-top: var(--pk-space-1); }
.pk-hours__name { font-weight: var(--pk-fw-title); }
.pk-hours__ranges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); min-width: 0; }
.pk-hours__range { display: inline-flex; align-items: center; gap: var(--pk-space-3); color: var(--pk-text-3); }
.pk-hours__closed { font-size: var(--pk-fs-small); color: var(--pk-text-3); }
/* when a day's ranges wrap, its name and switch stay level with the first range */
@container pk-main (min-width: 560px) {
  .pk-hours__day { grid-template-rows: var(--pk-h-btn) auto; row-gap: 0; }
  .pk-hours__ranges { grid-row: span 2; }
}
.pk-hours__day[data-invalid] .pk-input { border-color: var(--pk-danger-edge); box-shadow: none; }

.pk-repeat { display: grid; gap: var(--pk-space-4); }
.pk-repeat__row { display: flex; align-items: center; gap: var(--pk-space-4); }
.pk-repeat__row > .pk-control, .pk-repeat__row > .pk-input { flex: 1; min-width: 0; }

.pk-copy { display: flex; align-items: center; gap: var(--pk-space-4); min-width: 0; padding: var(--pk-space-2) var(--pk-space-2) var(--pk-space-2) var(--pk-space-7); border-radius: var(--pk-r-field); background: var(--pk-inset); }
/* a long address wraps to two lines rather than showing a few characters; the copy button carries the whole value */
.pk-copy__value { flex: 1; min-width: 0; font-family: var(--pk-mono); font-size: var(--pk-fs-meta); white-space: normal; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }

.pk-swatches { display: flex; flex-wrap: wrap; gap: var(--pk-space-6); }
.pk-swatch { position: relative; width: 36px; height: 36px; border-radius: var(--pk-r-pill); cursor: pointer; }
.pk-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pk-swatch:has(:checked) { box-shadow: 0 0 0 3px var(--pk-card), 0 0 0 5px var(--pk-primary-edge); }
.pk-swatch:has(:focus-visible) { outline: var(--pk-focus-outline); outline-offset: 6px; }
.pk-swatch--p1 { background: var(--pk-p1); } .pk-swatch--p2 { background: var(--pk-p2); } .pk-swatch--p3 { background: var(--pk-p3); }
.pk-swatch--p4 { background: var(--pk-p4); } .pk-swatch--p5 { background: var(--pk-p5); } .pk-swatch--p6 { background: var(--pk-p6); }
/* a preset of two brand colours: the brand colour on the left half, the title ink (--pk-swatch-title) on the right. The half is the
   swatch's ::before, since its ::after is the touch ring */
.pk-swatch--pair::before { content: ''; position: absolute; inset: 0 0 0 50%; border-radius: 0 var(--pk-r-pill) var(--pk-r-pill) 0; background: var(--pk-swatch-title); pointer-events: none; }

.pk-tagsinput { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3); min-height: var(--pk-h-btn); padding: 5px var(--pk-space-4); border-radius: var(--pk-r-field); border: 1px solid transparent; background: var(--pk-inset); box-shadow: var(--pk-field-foot); }
.pk-tagsinput:focus-within { border-color: var(--pk-primary-edge); background: var(--pk-card); box-shadow: none; }
.pk-tagsinput input { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; font: inherit; color: var(--pk-text); }
.pk-tagsinput .pk-tag--soft { background: var(--pk-card); }
.pk-tagsinput:focus-within .pk-tag--soft { background: var(--pk-inset); }
/* corporate fields are white at rest too, so their tags keep a grey of their own */
:is([data-theme='corporate'], [data-theme='portal']) .pk-tagsinput .pk-tag--soft { background: var(--pk-inset-2); }

/* ---------- record panels ---------- */
/* drawer: a side panel on wide screens and a bottom sheet on phones; also styles a native <dialog> */
.pk-drawer { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 480px; max-width: 100%; padding: 0; border: 0; border-radius: var(--pk-r-card); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-float-shadow); }
dialog.pk-drawer { position: fixed; inset: var(--pk-space-6) var(--pk-space-6) var(--pk-space-6) auto; height: auto; max-height: none; margin: 0; }
dialog.pk-drawer:not([open]) { display: none; }
/* a drawer holding a longer form or a table */
.pk-drawer--wide { width: 640px; }
.pk-drawer__head { display: flex; align-items: flex-start; gap: var(--pk-space-6); padding: var(--pk-space-10) var(--pk-space-10) var(--pk-space-6); }
.pk-drawer__head > .pk-icon-btn { margin-left: auto; }
/* rows keep their content height in a scrolling body, else a part with overflow hidden shrinks to the window and cuts its rows */
.pk-drawer__body { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: var(--pk-space-8); min-height: 0; padding: var(--pk-space-2) var(--pk-space-10) var(--pk-space-10); overflow-y: auto; scroll-padding-block: var(--pk-focus-room); }
.pk-drawer__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pk-space-5); padding: var(--pk-space-7) var(--pk-space-10); border-top: 1px solid var(--pk-line); }

/* activity: who changed what, field by field */
.pk-activity { display: grid; }
.pk-activity__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--pk-space-1) var(--pk-space-6); padding: var(--pk-space-6) 0; border-top: 1px solid var(--pk-line); }
.pk-activity__item:first-child { border-top: 0; padding-top: var(--pk-space-1); }
.pk-activity__item > .pk-avatar { grid-row: span 3; }
.pk-activity__line { font-size: var(--pk-fs-small); }
.pk-activity__time { font-family: var(--pk-mono); font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-diff { display: grid; gap: var(--pk-space-2); margin-top: var(--pk-space-3); padding: var(--pk-space-5) var(--pk-space-6); border-radius: var(--pk-r-sm); background: var(--pk-inset); font-size: var(--pk-fs-meta); }
.pk-diff__row { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); gap: var(--pk-space-5); }
/* the value cell (old value, arrow, new value) breaks between the values, not inside one */
.pk-diff__row > :last-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--pk-space-3); min-width: 0; }
.pk-diff__key { color: var(--pk-text-2); }
.pk-diff__old { color: var(--pk-text-3); text-decoration: line-through; }
.pk-diff__new { font-weight: var(--pk-fw-title); }
.pk-note { padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-field); background: var(--pk-accent-soft); font-size: var(--pk-fs-small); }
.pk-note__meta { margin-top: var(--pk-space-3); font-size: var(--pk-fs-fine); color: var(--pk-accent-figure); }

/* board: stages as grey columns, records as flat white cards */
.pk-board { display: flex; gap: var(--pk-space-6); align-items: flex-start; overflow-x: auto; padding-bottom: var(--pk-space-2); }
.pk-board__col { flex: 1 0 250px; display: grid; gap: var(--pk-space-4); align-content: start; padding: var(--pk-space-5); border-radius: var(--pk-r-panel); background: var(--pk-inset); }
.pk-board__head { display: flex; align-items: center; gap: var(--pk-space-4); padding: var(--pk-space-2) var(--pk-space-3) var(--pk-space-3); font-weight: var(--pk-fw-strong); }
.pk-board__card { display: grid; gap: var(--pk-space-4); padding: var(--pk-space-7); border-radius: var(--pk-r-split); background: var(--pk-card); }
.pk-board__card[data-dragging] { box-shadow: var(--pk-float-shadow); transform: rotate(-1.5deg); }
.pk-board__drop { min-height: 64px; border-radius: var(--pk-r-split); border: 2px dashed var(--pk-line-strong); }

/* ---------- customer flow ---------- */
.pk-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-9); width: 100%; max-width: 620px; margin: 0 auto; }
/* the flow sits on the page colour: its grey parts (choices, days, slots, summary, step dashes) take the colours
   they would have on a card. Surfaces inside the flow keep the normal ones */
.pk-flow > :not(.pk-card, .pk-dialog, .pk-pop, .pk-sheet) { --pk-inset: var(--pk-card); --pk-inset-2: var(--pk-line-strong); }
/* corporate, technical and portal paint the page and the card (nearly) alike, so those parts also take the hairline their other
   card-coloured parts on the page carry; :where() keeps the parts' own states (chosen, hover, disabled) on top */
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :where(.pk-flow > :not(.pk-card, .pk-dialog, .pk-pop, .pk-sheet)):is(
  .pk-inset, .pk-notice:not(:where(.pk-notice--warning, .pk-notice--danger, .pk-notice--success)), .pk-btn--soft, .pk-person),
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :where(.pk-flow > :not(.pk-card, .pk-dialog, .pk-pop, .pk-sheet)) :is(
  .pk-choice, .pk-day:not(:where([aria-pressed='true'])), .pk-slot:not(:where([aria-pressed='true'])), .pk-btn--soft, .pk-person) { box-shadow: var(--pk-ring-strong); }
.pk-flow__head { display: flex; align-items: center; gap: var(--pk-space-6); }
.pk-flow__step { flex: 1; min-width: 0; }
.pk-flow__count { display: block; font-family: var(--pk-mono); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-choice__end { margin-left: auto; text-align: right; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-label); color: var(--pk-text-2); white-space: nowrap; }
.pk-done { display: grid; justify-items: center; gap: var(--pk-space-5); padding: var(--pk-space-14) var(--pk-space-8); text-align: center; }
.pk-done__mark { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--pk-space-3); border-radius: var(--pk-r-pill); background: var(--pk-success); color: var(--pk-on-success); }
.pk-done__mark .pk-icon { width: 34px; height: 34px; stroke-width: 2.2; }

/* ---------- floating layers ---------- */
.pk-menu { background: var(--pk-card); border-radius: var(--pk-r-panel); padding: var(--pk-space-4); box-shadow: var(--pk-float-shadow); min-width: min(260px, 100%); display: grid; }
.pk-menu__item { display: flex; align-items: center; gap: var(--pk-space-6); height: calc(var(--pk-h-btn) + 2px); padding: 0 var(--pk-space-6); border-radius: var(--pk-r-field); font-size: var(--pk-fs-item); }
.pk-menu__item:hover { background: var(--pk-inset); }
.pk-menu__meta { margin-left: auto; font-family: var(--pk-mono); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-menu__sep { height: 1px; background: var(--pk-line); margin: var(--pk-space-3) var(--pk-space-2); }
.pk-menu__item--danger { color: var(--pk-danger-text); }
button.pk-menu__item { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }

.pk-sheet { background: var(--pk-card); border-radius: var(--pk-r-card) var(--pk-r-card) 0 0; padding: var(--pk-space-6) var(--pk-space-11) var(--pk-space-14); box-shadow: var(--pk-float-shadow); }
.pk-sheet__handle { width: 44px; height: 5px; border-radius: var(--pk-r-pill); background: var(--pk-line-strong); margin: 0 auto var(--pk-space-7); }

.pk-drop { border: 2px dashed var(--pk-line-strong); border-radius: var(--pk-r-panel); padding: var(--pk-space-14); display: grid; justify-items: center; gap: var(--pk-space-4); text-align: center; text-wrap: balance; }
/* files dragged over the drop zone */
.pk-drop[data-over] { border-color: var(--pk-accent); background: var(--pk-accent-soft); }
/* a file input over its whole row or slot: the row picks a file */
.pk-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pk-drop__icon { width: 52px; height: 52px; border-radius: var(--pk-r-pill); background: var(--pk-inset); display: grid; place-items: center; }
/* a drop zone whose picker is off (an upload under way, the limit reached): a quieter edge and a faint mark; its picker label
   takes the disabled button's look */
.pk-drop:is([aria-disabled='true'], :has(input[type='file']:disabled)) { border-color: var(--pk-line); }
.pk-drop:is([aria-disabled='true'], :has(input[type='file']:disabled)) .pk-drop__icon { color: var(--pk-text-3); }

.pk-bubble { max-width: 78%; padding: var(--pk-space-6) var(--pk-space-8); border-radius: var(--pk-r-inset); font-size: var(--pk-fs-item); line-height: var(--pk-lh-body); }
.pk-bubble--in { background: var(--pk-inset); }
.pk-bubble--ai { background: var(--pk-ai-soft); margin-left: auto; }
.pk-bubble--out { --pk-focus-outline: 2px solid var(--pk-on-ink); background: var(--pk-ink); color: var(--pk-on-ink); margin-left: auto; }

.pk-composer {
  display: flex; align-items: center; gap: var(--pk-space-4); padding: calc(var(--pk-space-3) - 1px) calc(var(--pk-space-3) - 1px) calc(var(--pk-space-3) - 1px) calc(var(--pk-space-9) - 1px);
  border: 1px solid transparent; border-radius: var(--pk-r-control); background: var(--pk-inset); box-shadow: var(--pk-field-foot);
}
.pk-composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--pk-text); }

/* dialog: also styles a native <dialog>; author display rules would show a closed one, hence the :not([open]) guard */
.pk-dialog { display: grid; gap: var(--pk-space-9); width: 520px; max-width: 100%; padding: var(--pk-space-12); border: 0; border-radius: var(--pk-r-dialog, var(--pk-r-card)); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-float-shadow); }
dialog.pk-dialog { max-width: calc(100vw - 32px); }
dialog.pk-dialog:not([open]) { display: none; }
.pk-drawer::backdrop, .pk-dialog::backdrop { background: var(--pk-scrim); }
.pk-dialog__head { display: flex; align-items: flex-start; gap: var(--pk-space-6); }
.pk-dialog__head > .pk-icon-btn { margin-left: auto; }
.pk-dialog__foot { display: flex; justify-content: flex-end; gap: var(--pk-space-5); flex-wrap: wrap; }

.pk-photo { position: relative; border-radius: var(--pk-r-panel); overflow: hidden; background: var(--pk-inset); }
.pk-photo img { width: 100%; height: 100%; object-fit: cover; }
.pk-photo--square { aspect-ratio: 1; }
.pk-photo--portrait { aspect-ratio: 3 / 4; }
.pk-photo__tag { position: absolute; top: var(--pk-space-5); left: var(--pk-space-5); }
.pk-photo__more { position: absolute; top: var(--pk-space-5); right: var(--pk-space-5); }
.pk-sticker { display: inline-grid; place-items: center; height: 40px; padding: 0 var(--pk-space-9); border-radius: var(--pk-r-tag); background: var(--pk-accent); color: var(--pk-accent-ink); font-style: italic; font-weight: var(--pk-fw-label); transform: rotate(12deg); }

/* ---------- search and pop-ups ---------- */
/* group title inside lists: "Bugün", "Randevular" */
.pk-caption { padding: var(--pk-space-5) var(--pk-space-5) var(--pk-space-2); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }

/* pop-up box under a trigger: option lists, notifications, date ranges */
.pk-pop { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-2); width: min(340px, 100%); padding: var(--pk-space-4); border-radius: var(--pk-r-panel); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-float-shadow); }
.pk-pop--wide { width: min(420px, 100%); }
/* under a select trigger the list is as wide as the field */
.pk-combo + .pk-pop { width: 100%; }
.pk-pop--range { width: min(780px, 100%); }
/* a pop-up or menu opened from a button (popovertarget): under the button with their right edges aligned (pk-pop--end: the
   left edges), flipping up or across near the window's edges. Taller than the room on both sides, it takes the room under
   the button when that is at least 240px (or 40% of the window), else the room above, less the gap and a gutter, and
   scrolls inside itself: it never runs off the window */
:is(.pk-pop, .pk-menu)[popover] { margin: 0; border: 0; color: var(--pk-text); }
:is(.pk-pop, .pk-menu)[popover]:not(:popover-open) { display: none; }
:is(.pk-pop, .pk-menu)[popover]:popover-open {
  position: fixed; inset: auto; margin-top: var(--pk-space-3); position-area: bottom span-left;
  position-try-fallbacks: flip-block, flip-inline, --pk-pop-room, --pk-pop-fit flip-block;
  max-height: min(70vh, 560px); overflow-y: auto;
}
@position-try --pk-pop-room { min-height: min(40vh, 240px); max-height: calc(100% - var(--pk-space-3) - var(--pk-space-4)); }
@position-try --pk-pop-fit { max-height: calc(100% - var(--pk-space-3) - var(--pk-space-4)); }
.pk-pop--end[popover]:popover-open { position-area: bottom span-right; }
.pk-pop__head { display: flex; align-items: center; gap: var(--pk-space-4); min-height: 40px; padding: var(--pk-space-1) var(--pk-space-1) var(--pk-space-1) var(--pk-space-5); }
.pk-pop__title { margin-right: auto; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); }
.pk-pop__search { display: flex; align-items: center; gap: var(--pk-space-5); height: var(--pk-h-btn); padding: 0 var(--pk-space-6); border-radius: var(--pk-r-field); background: var(--pk-inset); box-shadow: var(--pk-field-foot); color: var(--pk-text-3); }
.pk-pop__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--pk-text); }
/* a search field draws no ring of its own: the pill around it takes it */
:is(.pk-search, .pk-pop__search):focus-within { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
.pk-pop__text { margin: 0; padding: 0 var(--pk-space-5) var(--pk-space-2); font-size: var(--pk-fs-small); line-height: var(--pk-lh-relaxed); }
.pk-pop__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); margin-top: var(--pk-space-2); padding: var(--pk-space-5) var(--pk-space-2) var(--pk-space-1); border-top: 1px solid var(--pk-line); container: pk-pop-foot / inline-size; }
.pk-pop__foot > :first-child { margin-right: auto; }
/* in a narrow pop-up a summary ("28 Eyl – 4 Eki · 7 gün") takes its own line and the buttons stay together under it */
@container pk-pop-foot (max-width: 359px) {
  .pk-pop__foot > :first-child:not(.pk-btn) { flex-basis: 100%; }
  .pk-pop__foot > :first-child:not(.pk-btn) + * { margin-left: auto; }
}

/* select trigger: looks like a field, opens a listbox */
.pk-combo { display: flex; align-items: center; gap: var(--pk-space-5); width: 100%; height: var(--pk-h-btn); padding: 0 var(--pk-space-6) 0 var(--pk-space-7); border: 1px solid transparent; border-radius: var(--pk-r-field); background: var(--pk-inset); box-shadow: var(--pk-field-foot); font: inherit; color: var(--pk-text); text-align: left; cursor: pointer; }
.pk-combo:hover { border-color: var(--pk-line-strong); }
.pk-combo[aria-expanded='true'] { border-color: var(--pk-primary-edge); background: var(--pk-card); box-shadow: none; }
:is(.pk-inset, .pk-tile, .pk-sortcards__item:not(:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *)) .pk-combo { background: var(--pk-card); }
.pk-combo__value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-combo__placeholder { flex: 1; min-width: 0; color: var(--pk-text-3); }
.pk-combo > .pk-icon:last-child { color: var(--pk-text-3); transition: transform var(--pk-dur-fast) var(--pk-ease); }
.pk-combo[aria-expanded='true'] > .pk-icon:last-child { transform: rotate(180deg); }

/* option list of a select, combobox or multi-select; the chosen option shows its check */
/* it scrolls, so it keeps room inside for its rows' focus rings, takes it back with a negative margin and adds it to the cap */
.pk-listbox {
  display: grid; gap: var(--pk-space-1); max-height: calc(296px + 2 * var(--pk-focus-room)); margin: calc(-1 * var(--pk-focus-room)); padding: var(--pk-focus-room);
  overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--pk-focus-room);
}
.pk-listbox__item { display: flex; align-items: center; gap: var(--pk-space-6); min-height: var(--pk-h-btn); padding: var(--pk-space-3) var(--pk-space-5); border-radius: var(--pk-r-field); font-size: var(--pk-fs-control); cursor: pointer; }
.pk-listbox__item:hover, .pk-listbox__item[data-active] { background: var(--pk-inset); }
.pk-listbox__body { flex: 1; min-width: 0; }
.pk-listbox__meta { display: block; font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-listbox__check { visibility: hidden; }
.pk-listbox__item[aria-selected='true'] { font-weight: var(--pk-fw-strong); }
.pk-listbox__item[aria-selected='true'] .pk-listbox__check { visibility: visible; }
.pk-listbox__item[aria-disabled='true'] { background: transparent; color: var(--pk-text-3); cursor: default; }
.pk-listbox__empty { display: grid; justify-items: center; gap: var(--pk-space-3); padding: var(--pk-space-10) var(--pk-space-6); text-align: center; font-size: var(--pk-fs-small); color: var(--pk-text-3); }
.pk-listbox__empty .pk-h4 { color: var(--pk-text); }
/* the tint alone is faint for pale brand colours, so the match also takes the brand text colour */
/* a matched word: in option lists, the command palette and search results */
.pk mark { padding: 0 1px; border-radius: var(--pk-r-mark); background: var(--pk-accent-soft); color: var(--pk-accent-text); }

/* command palette (⌘K): one search for records, pages and actions */
.pk-cmd { display: grid; grid-template-columns: minmax(0, 1fr); width: min(620px, 100%); overflow: hidden; border-radius: var(--pk-r-card); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-float-shadow); }
.pk-cmd__search { display: flex; align-items: center; gap: var(--pk-space-6); height: 60px; padding: 0 var(--pk-space-8) 0 var(--pk-space-10); border-bottom: 1px solid var(--pk-line); color: var(--pk-text-3); }
.pk-cmd__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--pk-fs-title); color: var(--pk-text); }
/* the palette clips its corners, so its search shows the focus as a 2px line along its foot */
.pk-cmd__search:focus-within { border-bottom-color: var(--pk-primary-edge); box-shadow: inset 0 -1px 0 var(--pk-primary-edge); }
.pk-cmd__list { display: grid; gap: var(--pk-space-1); max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--pk-focus-room); padding: var(--pk-space-2) var(--pk-space-4) var(--pk-space-4); }
.pk-cmd__item { display: flex; align-items: center; gap: var(--pk-space-6); min-height: 48px; padding: var(--pk-space-3) var(--pk-space-6); border-radius: var(--pk-r-field); font-size: var(--pk-fs-item); cursor: pointer; }
.pk-cmd__item:hover, .pk-cmd__item[aria-selected='true'] { background: var(--pk-inset); }
.pk-cmd__item > .pk-icon:first-child { color: var(--pk-text-2); }
.pk-cmd__body { flex: 1; min-width: 0; }
.pk-cmd__meta { display: block; font-size: var(--pk-fs-caption); color: var(--pk-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-cmd__foot { display: flex; align-items: center; gap: var(--pk-space-8); flex-wrap: wrap; padding: var(--pk-space-5) var(--pk-space-10); border-top: 1px solid var(--pk-line); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-cmd__hint { display: inline-flex; align-items: center; gap: var(--pk-space-3); }
:is(.pk-cmd__search, .pk-cmd__foot, .pk-cmd__item) .pk-kbd { margin-left: 0; padding: 3px 7px; font-size: var(--pk-fs-axis); }

/* notifications under the bell; unread ones carry a dot */
.pk-notifs { display: grid; gap: var(--pk-space-1); }
/* in a pop-up the list scrolls inside a capped height; on its own page it runs the page's length */
.pk-pop .pk-notifs {
  max-height: calc(min(480px, 60vh) + 2 * var(--pk-focus-room)); margin: calc(-1 * var(--pk-focus-room)); padding: var(--pk-focus-room);
  overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--pk-focus-room);
}
.pk-notif { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pk-space-1) var(--pk-space-6); padding: var(--pk-space-5) 30px var(--pk-space-5) var(--pk-space-5); border-radius: var(--pk-r-field); }
.pk-notif:hover { background: var(--pk-inset); }
.pk-notif > :first-child { grid-row: span 2; }
.pk-notif__text { font-size: var(--pk-fs-small); line-height: var(--pk-lh-text); }
.pk-notif__time { font-family: var(--pk-mono); font-size: var(--pk-fs-fine); color: var(--pk-text-3); white-space: nowrap; }
/* a notification that can be answered in place (approve, sign) carries its buttons under the text */
.pk-notif__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--pk-space-4); margin-top: var(--pk-space-3); }
.pk-notif[data-unread]::after { content: ''; position: absolute; top: var(--pk-space-8); right: var(--pk-space-6); width: 8px; height: 8px; border-radius: var(--pk-r-pill); background: var(--pk-accent-figure); }
.pk-disc { width: 40px; height: 40px; border-radius: var(--pk-r-pill); display: grid; place-items: center; flex: none; background: var(--pk-inset); color: var(--pk-text); }
.pk-disc--success { background: var(--pk-success-soft); color: var(--pk-success-text); }
.pk-disc--warning { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-disc--danger { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-disc--ai { background: var(--pk-ai-soft); color: var(--pk-ai-text); }
.pk-disc--accent { background: var(--pk-accent-soft); color: var(--pk-accent-text); }

/* tooltip: a short dark label; inside .pk-tipped it shows on hover and keyboard focus */
.pk-tip { width: max-content; max-width: 240px; padding: var(--pk-space-3) var(--pk-space-5); border-radius: var(--pk-r-sm); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-medium); line-height: var(--pk-lh-cozy); box-shadow: var(--pk-float-shadow); }
.pk-tip .pk-kbd { margin-left: var(--pk-space-3); padding: 1px var(--pk-space-3); background: var(--pk-dark-inset); color: inherit; font-size: var(--pk-fs-tiny); }
.pk-tipped { position: relative; display: inline-flex; }
.pk-tipped > .pk-tip { position: absolute; left: 50%; bottom: calc(100% + var(--pk-space-4)); z-index: 40; transform: translateX(-50%); display: none; pointer-events: none; }
/* a hidden tip takes no room, so one near the screen edge cannot widen the page */
.pk-tipped:hover > .pk-tip, .pk-tipped:focus-within > .pk-tip { display: block; animation: pk-tip-in var(--pk-dur-fast) var(--pk-ease); }
@keyframes pk-tip-in { from { opacity: 0; } }
.pk-tipped--below > .pk-tip { top: calc(100% + var(--pk-space-4)); bottom: auto; }
.pk-tipped--right > .pk-tip { top: 50%; bottom: auto; left: calc(100% + var(--pk-space-4)); transform: translateY(-50%); }

/* toast: one short confirmation line above the content, centred on the content like the bulk bar. Its own width is the text's:
   a box placed from the centre would otherwise shrink to the space right of that centre and wrap */
.pk-toast {
  position: fixed; left: calc(50% + var(--pk-content-shift, 0px)); bottom: calc(var(--pk-space-12) + env(safe-area-inset-bottom, 0px)); z-index: 30; transform: translate(-50%, 16px);
  display: flex; align-items: center; gap: var(--pk-space-5); width: max-content; max-width: calc(100vw - 32px - 2 * var(--pk-content-shift, 0px)); padding: var(--pk-space-6) var(--pk-space-9); border-radius: var(--pk-r-control);
  font-size: var(--pk-fs-small); font-weight: var(--pk-fw-medium); box-shadow: var(--pk-float-shadow);
  opacity: 0; pointer-events: none; transition: opacity var(--pk-dur-base) var(--pk-ease), transform var(--pk-dur-base) var(--pk-ease);
}
.pk-toast[data-open] { opacity: 1; transform: translate(-50%, 0); }
.pk-toast .pk-icon { color: var(--pk-accent-on-dark); }
/* the toast lifts in dark mode, where the lighter danger shade keeps the icon at 3:1 */
.pk-toast--error .pk-icon { color: light-dark(var(--pk-danger), var(--pk-danger-text)); }

/* ---------- sizes ---------- */
/* Size classes by window width are the only media queries that change the shell: phone up to 599px and tablet 600-1023 share
   the phone shell (phone head, bottom bar, tiles instead of tables, the day agenda); from 1024 the full menu, at its one width
   in every theme. Page layouts follow the content width instead (container queries on pk-main): narrow under 560, compact
   560-699, medium 700-839, large 840-1039, wide from 1040 */

/* phone parts are styled here and only switched on in the phone shell, so they can be previewed anywhere. pk-only-phone and
   pk-only-desk only hide a block outside its shell, so a block keeps its own display (a grid of tiles stays a grid) */
.pk-phone-head, .pk-tabbar, .pk-actionbar { display: none; }
@media (min-width: 1024px) {
  .pk-only-phone { display: none !important; }
}
.pk-phone-head { align-items: center; gap: var(--pk-space-6); padding: var(--pk-space-8) var(--pk-space-1) var(--pk-space-1); }
.pk-phone-head__title { min-width: 0; }
.pk-phone-head__sub { font-size: var(--pk-fs-meta); color: var(--pk-text-2); line-height: var(--pk-lh-snug); }
.pk-phone-head__name { font-weight: var(--pk-fw-strong); font-size: var(--pk-fs-lead); }
.pk-phone-head .pk-row { margin-left: auto; flex-wrap: nowrap; }
/* the page's actions in the phone's head are round icon buttons: a button with an icon keeps its words for a screen reader
   only, so two labelled actions never push the head past the window */
.pk-phone-head .pk-btn:has(> .pk-icon) { width: var(--pk-h-btn); padding: 0; justify-content: center; flex: none; }
.pk-phone-head .pk-btn--lg:has(> .pk-icon) { width: var(--pk-h-btn-lg); }
.pk-phone-head .pk-btn:has(> .pk-icon) > .pk-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pk-phone-head .pk-row > * { flex: none; }
/* a swipeable row clips what leaves its box: it keeps room inside for the touch and focus rings of its chips, and takes as
   much back with a negative margin, so nothing moves (the side margins at no weight, so pk-push still places the row); a chip
   scrolled into view by the focus stops that far from the edge */
.pk-chips-scroll {
  display: flex; gap: var(--pk-space-4); margin-block: calc(-1 * max(var(--pk-tap-room), var(--pk-focus-room))); padding: max(var(--pk-tap-room), var(--pk-focus-room));
  overflow-x: auto; scroll-padding-inline: max(var(--pk-tap-room), var(--pk-focus-room)); scrollbar-width: none;
}
:where(.pk-chips-scroll) { margin-inline: calc(-1 * max(var(--pk-tap-room), var(--pk-focus-room))); }
/* a chip the focus reaches where the row is cut (more of the row past it) has no room outside: it draws its ring inside, in its
   own text colour (a chosen chip's fill can be the focus colour) */
.pk-chips-scroll .pk-chip { --pk-focus-outline: 2px solid currentColor; }
.pk-chips-scroll .pk-chip:focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
.pk-chips-scroll::-webkit-scrollbar { display: none; }
/* phone navigation: a floating bar on the card colour, centred and at most 560px wide; every item has a short label (at most
   10 characters) and the current page is a rounded rectangle that always holds it */
.pk-tabbar {
  position: fixed; inset-inline: 0; bottom: calc(var(--pk-space-7) + env(safe-area-inset-bottom, 0px)); z-index: 20; width: min(560px, 100% - 24px); margin-inline: auto;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--pk-space-2);
  padding: var(--pk-space-3); border-radius: var(--pk-r-control); background: var(--pk-card); box-shadow: var(--pk-float-shadow);
}
.pk-tabbar__item {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: var(--pk-space-2); height: 58px; min-width: 0; padding: 0 var(--pk-space-2);
  border-radius: min(calc(var(--pk-r-control) - 6px), 18px); font-size: clamp(var(--pk-fs-micro), 2.9vw, var(--pk-fs-axis)); font-weight: var(--pk-fw-label); color: var(--pk-text-2); white-space: nowrap;
}
.pk-tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* a tab that is a button (a tab that changes in place, the menu) without the browser's button frame */
button.pk-tabbar__item { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.pk-tabbar__item[aria-current='page'] { background: var(--pk-current); color: var(--pk-on-current); }
/* the one main action of a task page, at most 640px wide */
.pk-actionbar {
  position: fixed; inset-inline: 0; bottom: calc(var(--pk-space-8) + env(safe-area-inset-bottom, 0px)); z-index: 20; width: min(640px, 100% - 28px); margin-inline: auto;
  align-items: center; gap: var(--pk-space-5); padding: var(--pk-space-4); border-radius: var(--pk-r-control); background: var(--pk-card); box-shadow: var(--pk-float-shadow);
}

/* the rail: a menu under 160px wide (a parent that narrows --pk-side-w; the shell never does) shows its icons with the short
   labels under them (a touch screen never shows a tooltip). These rules outweigh a theme's menu sizes, which the theme parts
   write with :where() */
@container pk-side (max-width: 159px) {
  .pk-side > :not([popover]) { align-self: center; }
  .pk-side :is(.pk-brand__name, .pk-brand > .pk-icon-btn, .pk-nav__text, .pk-nav__count, .pk-promo, .pk-me > :not(.pk-avatar)) { display: none; }
  .pk-side .pk-brand { padding: 0 0 var(--pk-space-5); }
  .pk-side .pk-nav { justify-items: center; }
  .pk-side .pk-nav__item {
    flex-direction: column; justify-content: center; width: 72px; height: auto; min-height: 56px; padding: var(--pk-space-3) var(--pk-space-1); gap: var(--pk-space-2);
    border-radius: min(var(--pk-r-control), 16px); font-size: var(--pk-fs-tiny); font-weight: var(--pk-fw-label); line-height: 1.15;
  }
  .pk-side .pk-nav__short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pk-side .pk-nav__label { width: 28px; height: 1px; margin: var(--pk-space-4) 0; padding: 0; overflow: hidden; white-space: nowrap; text-indent: 100%; background: var(--pk-line-strong); }
  .pk-side .pk-me { padding: var(--pk-space-3); margin-top: var(--pk-space-4); }
  .pk-side .pk-sidehead { flex-direction: column; padding: 0 0 var(--pk-space-5); }
  .pk-side .pk-sidehead__text { display: none; }
}
/* short windows (a 13-inch laptop's browser is about 820px tall): the shell's menu tightens before it has to scroll; the rail's
   items lose some height, the full menu's items and section labels too, and the promo keeps its switch but not its link */
@media (min-width: 1024px) and (max-height: 940px) {
  .pk-app > .pk-side { padding-block: var(--pk-space-6) var(--pk-space-5); }
  .pk-app > .pk-side .pk-brand { padding-bottom: var(--pk-space-4); }
  @container pk-side (max-width: 159px) {
    .pk-app > .pk-side .pk-nav__item { min-height: 48px; }
  }
  /* the menu is the container, so the height goes on its list */
  @container pk-side (min-width: 160px) {
    .pk-app > .pk-side .pk-nav { --pk-h-nav: max(min(var(--pk-size-nav), 40px), var(--pk-tap)); }
    .pk-app > .pk-side .pk-nav__label { padding-block: var(--pk-space-5) var(--pk-space-2); }
    .pk-app > .pk-side .pk-promo__link { display: none; }
    .pk-app > .pk-side .pk-me { margin-top: var(--pk-space-3); }
  }
}

/* phone shell: phones and tablets. Only the shell's own menu hides; a menu shown elsewhere (a preview, a sheet) stays */
@media (max-width: 1023px) {
  :is(body:has(.pk-app), .pk-app) { --pk-content-shift: 0px; }
  .pk-app { grid-template-columns: minmax(0, 1fr); padding: 0 var(--pk-space-8) calc(120px + env(safe-area-inset-bottom, 0px)); }
  .pk-app > .pk-side, .pk-only-desk { display: none !important; }
  .pk-phone-head { display: flex; }
  .pk-tabbar { display: grid; }
  .pk-actionbar { display: flex; }
  /* floating layers clear the bottom bar, the tab bar or a task page's action bar */
  .pk:has(.pk-app :is(.pk-tabbar, .pk-actionbar)) :is(.pk-toast, .pk-bar--fixed, .pk-bar--sticky) { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  /* and the page scrolls what takes the focus clear of them */
  :root:has(.pk-app :is(.pk-tabbar, .pk-actionbar)) { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .pk-filterbar > .pk-search { flex-basis: 100%; max-width: none; }
  .pk-filterbar__scroll {
    display: flex; flex: 1 0 100%; gap: var(--pk-space-4); overflow-x: auto; scroll-padding-inline: var(--pk-focus-room); scrollbar-width: none;
    padding: max(var(--pk-tap-room), var(--pk-focus-room)); margin: calc(-1 * max(var(--pk-tap-room), var(--pk-focus-room)));
  }
  .pk-filterbar__scroll::-webkit-scrollbar { display: none; }
  .pk-chips-scroll { margin-inline: calc(-1 * var(--pk-space-8)); padding-inline: var(--pk-space-8); }
  /* tabs that do not fit swipe sideways instead of wrapping onto a second row */
  .pk-tabs, .pk-seg { flex-wrap: nowrap; overflow-x: auto; scroll-padding-inline: var(--pk-focus-room); scrollbar-width: none; max-width: 100%; }
  :is(.pk-tabs, .pk-seg)::-webkit-scrollbar { display: none; }
  .pk-seg > .pk-seg__item { flex: none; }
  /* a ring stays inside the scrolling track: inside the tab (a tab at the track's visible edge, with more past it, has no
     room outside) in the tab's text colour (a chosen tab's fill can be the focus colour), no further out than the track's
     padding for a segment */
  .pk-tabs__item { --pk-focus-outline: 2px solid currentColor; }
  .pk-tabs__item:focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
  .pk-seg__item:focus-visible { outline-offset: min(var(--pk-focus-offset), var(--pk-space-2) - 2px); }
  .pk-auth { grid-template-columns: minmax(0, 1fr); }
  .pk-auth__panel { display: none; }
  .pk-auth__main { align-content: start; padding-top: var(--pk-space-16); }
}

/* phones: tighter gaps and cards, the phone type scale (corporate and technical set their own, never larger than their desktop
   scale), the month as counts, the drawer as a bottom sheet */
@media (max-width: 599px) {
  :root { --pk-fs-h1: 38px; --pk-fs-hero: 72px; --pk-fs-hero-md: 54px; --pk-fs-hero-sm: 44px; }
  :root, [data-theme], [data-accent] { --pk-gap: calc(14px * var(--pk-ds)); }
  .pk-page { padding: var(--pk-space-8) var(--pk-space-8) var(--pk-space-24); }
  .pk-header__actions { width: 100%; }
  .pk-header__actions > .pk-btn { flex: 1 1 auto; }
  .pk-header__actions .pk-search { flex: 1; min-width: 0; }
  /* a search in its own form (SearchForm) fills the row through its form */
  .pk-header__actions > form:has(> .pk-search) { display: flex; flex: 1 1 100%; min-width: 0; }
  .pk-month { gap: var(--pk-space-2); }
  .pk-month__day { min-height: 54px; padding: var(--pk-space-3); }
  .pk-month__ev, .pk-month__more, .pk-month__day > .pk-meta { display: none; }
  .pk-month__count { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--pk-r-pill); background: var(--pk-card); font-size: var(--pk-fs-tiny); font-weight: var(--pk-fw-bold); font-variant-numeric: tabular-nums; }
  .pk-card { padding: calc(var(--pk-space-9) * var(--pk-ds)); }
  .pk-h1 { letter-spacing: -0.035em; }
  /* the bottom sheet: dvh, as a phone's toolbars make vh taller than what shows; the foot clears the home indicator */
  dialog.pk-drawer { inset: auto 0 0 0; width: 100%; max-height: 92dvh; border-radius: var(--pk-r-card) var(--pk-r-card) 0 0; }
  .pk-drawer__foot { padding-bottom: calc(var(--pk-space-7) + env(safe-area-inset-bottom, 0px)); }
  .pk-pager__page:not([aria-current='page']), .pk-pager__gap { display: none; }
  .pk-cover { min-height: 420px; }
  .pk-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-space-5); }
  .pk-split__value { white-space: normal; }
}
/* narrow phones (360px): the head's gaps tighten, so a greeting stays on one line beside three buttons */
@media (max-width: 379px) {
  .pk-phone-head { gap: var(--pk-space-4); }
  .pk-phone-head .pk-row { gap: var(--pk-space-3); }
}

/* parts that follow their own width: a form stacks its sections, the date range shows one month; weekly hours split their
   rows on narrow content */
.pk-form { container: pk-form / inline-size; }
@container pk-form (max-width: 639px) {
  .pk-form__section { grid-template-columns: minmax(0, 1fr); }
}
.pk-pop--range { container: pk-range / inline-size; }
/* the presets become a swipeable row above the months in a narrow pop-up, and on touch screens, where the months need the
   whole width for 44px days (two of them from 640px). Without style queries a browser keeps the presets beside the months */
@container pk-range (max-width: 639px) or style(not (--pk-tap: 0px)) {
  .pk-range { grid-template-columns: minmax(0, 1fr); }
  .pk-range__presets {
    display: flex; overflow-x: auto; scrollbar-width: none; padding: max(var(--pk-tap-room), var(--pk-focus-room)) max(var(--pk-tap-room), var(--pk-focus-room)) var(--pk-space-4);
    margin: calc(-1 * max(var(--pk-tap-room), var(--pk-focus-room))) calc(-1 * max(var(--pk-tap-room), var(--pk-focus-room))) 0; scroll-padding-inline: max(var(--pk-tap-room), var(--pk-focus-room));
    border-right: 0; border-bottom: 1px solid var(--pk-line);
  }
  .pk-range__months { padding-inline: 0; }
}
@container pk-range (max-width: 639px) {
  .pk-range__months { grid-template-columns: minmax(0, 1fr); }
  .pk-range__months > :nth-child(n+2) { display: none; }
  .pk-range__inner { visibility: visible; }
}
@container pk-main (max-width: 559px) {
  .pk-hours__day { grid-template-columns: minmax(0, 1fr) auto; }
  .pk-hours__ranges { grid-column: 1 / -1; }
}

/* touch screens and the phone shell: every control's hit area reaches --pk-tap (44 x 44). Heights rise through the h- tokens;
   small parts keep their look and get an invisible ring (after on buttons, whose before draws the busy spinner; before on
   checkboxes, radios and switches, whose after draws the mark). Rings must not meet: neighbours keep 2 x --pk-tap-room apart
   and scrolling rows keep --pk-tap-room inside. Fields take 16px text, so iOS does not zoom into them */
@media (pointer: coarse), (max-width: 1023px) {
  :is(.pk-btn, .pk-chip, .pk-seg__item, .pk-tabs__item, .pk-pager__page, .pk-slot, .pk-subnav__item, .pk-range__preset, .pk-topnav a, .pk-promo__link,
    .pk-crumbs a, .pk-table__sort, .pk-table__strong, .pk-week__more, .pk-tag__remove, .pk-checkbox, .pk-radio) { position: relative; }
  :is(.pk-btn, .pk-icon-btn, .pk-chip, .pk-seg__item, .pk-tabs__item, .pk-pager__page, .pk-slot, .pk-subnav__item, .pk-range__preset, .pk-topnav a,
    .pk-promo__link, .pk-crumbs a, .pk-table__sort, .pk-table__strong, .pk-week__more, .pk-tag__remove, .pk-swatch)::after,
  :is(.pk-checkbox, .pk-radio, .pk-toggle)::before { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
  /* the days touch, so a month of 44px days fits in 308px; a day shrinks to its column where even that does not fit (a card on
     a 360px phone) */
  .pk-datepick__grid { column-gap: 0; }
  .pk-datepick__day { width: min(max(38px, var(--pk-tap)), 100%); height: max(38px, var(--pk-tap)); }
  /* an option's label grows to the floor without moving anything, and a link in its text stays clickable */
  .pk-option { padding-block: 11px; margin-block: -11px; }
  /* a row with a switch, checkbox or radio is as tall as the floor, so the rings of stacked rows do not overlap */
  .pk-row:has(> :is(.pk-toggle, .pk-checkbox, .pk-radio)) { min-height: var(--pk-tap); }
  /* a half-hour booking is 34px tall: events cannot take a ring, their neighbours sit right against them */
  .pk-week { --pk-week-q: 18px; }
  .pk-table .pk-table__check { width: 56px; }
  /* a field inside a pill fills the pill's height, so a tap on it lands in the field */
  :is(.pk-search, .pk-pop__search, .pk-cmd__search, .pk-composer, .pk-tagsinput) input { align-self: stretch; min-height: 32px; }
  .pk :is(input, select, textarea):not([type='checkbox'], [type='radio'], [type='range'], [type='color']) { font-size: max(16px, 1em); }
}

@media (prefers-reduced-motion: reduce) {
  .pk *, .pk *::before, .pk *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
/* ---------- input fields ---------- */
/* a field whose box holds more than its text (the stepper, a suffix, an attached unit): the wrapper draws the field the way each
   theme draws .pk-input, and the input inside it is bare */
:is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))) {
  border: 1px solid transparent; border-radius: var(--pk-r-field); background: var(--pk-inset); box-shadow: var(--pk-field-foot); color: var(--pk-text);
  transition: border-color var(--pk-dur-fast) var(--pk-ease), background var(--pk-dur-fast) var(--pk-ease);
}
:is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):hover { border-color: var(--pk-line-strong); }
:is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):focus-within { border-color: var(--pk-primary-edge); background: var(--pk-card); box-shadow: none; }
:is(.pk-inset, .pk-tile, .pk-sortcards__item:not(:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *)) :is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))) { background: var(--pk-card); }
:is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):is(.pk-field--error *, :has(> [aria-invalid='true'])) { border-color: var(--pk-danger-edge); box-shadow: none; }
:is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):is(.pk-field--error *, :has(> [aria-invalid='true'])):focus-within { box-shadow: var(--pk-ring-danger); }
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))) { background: var(--pk-card); border-color: var(--pk-line-control); }
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):hover { border-color: var(--pk-text-3); }
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):focus-within { border-color: var(--pk-primary-edge); box-shadow: var(--pk-focus-halo); }
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):is(.pk-field--error *, :has(> [aria-invalid='true'])) { border-color: var(--pk-danger-edge); }
/* read-only: a hairline box without fill; disabled: the fill without a hover, the text faint */
:is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):has(> input[readonly]) { background: transparent; }
/* focused, a read-only field turns its edge to the primary edge like any field: the halo alone is no indicator */
:is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):has(> input[readonly]):not(:focus-within) { border-color: var(--pk-line-strong); }
:is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):has(> input:disabled) { border-color: transparent; color: var(--pk-text-3); cursor: not-allowed; }
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))):has(> input:disabled) { background: var(--pk-inset); border-color: var(--pk-line); }
:is(.pk-number, .pk-control:has(> :is(.pk-control__suffix, .pk-control__unit))) > input:disabled { color: inherit; cursor: not-allowed; }

/* number field: − value +. The input is a spinbutton; the buttons stay out of the tab order and repeat while held */
.pk-number {
  --pk-number-h: var(--pk-h-btn); --pk-number-disc: var(--pk-card);
  display: inline-flex; align-items: center; justify-self: start; max-width: 100%; height: var(--pk-number-h); vertical-align: middle;
}
.pk-number--sm { --pk-number-h: max(var(--pk-h-btn-sm), var(--pk-tap)); font-size: var(--pk-fs-label); }
.pk-number--lg { --pk-number-h: 56px; font-size: var(--pk-fs-figure-sm); font-weight: var(--pk-fw-medium); }
/* the discs are the card colour on the grey field and grey where the field turns white */
.pk-number:is(:focus-within, :is(.pk-inset, .pk-tile, .pk-sortcards__item:not(:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *)) *) { --pk-number-disc: var(--pk-inset); }
.pk-number__btn {
  position: relative; flex: none; display: grid; place-items: center; width: calc(var(--pk-number-h) - 2px); height: 100%; padding: var(--pk-space-2);
  border: 0; border-radius: var(--pk-r-control); background: var(--pk-number-disc) content-box; color: var(--pk-ink); cursor: pointer;
  transition: background-color var(--pk-dur-fast) var(--pk-ease), transform var(--pk-dur-fast) var(--pk-ease);
}
/* the hit area takes in the field's border: 44 x 44 on touch */
.pk-number__btn::after { content: ''; position: absolute; inset: -1px; }
.pk-number__btn > .pk-icon { width: 18px; height: 18px; }
.pk-number--sm .pk-number__btn > .pk-icon { width: 16px; height: 16px; }
.pk-number--lg .pk-number__btn > .pk-icon { width: 22px; height: 22px; }
.pk-number__btn:hover:not(:disabled) { background-color: color-mix(in srgb, var(--pk-number-disc), var(--pk-text) 8%); }
.pk-number__btn:active:not(:disabled) { transform: scale(0.94); }
.pk-number__btn:disabled { cursor: default; }
.pk-number__btn:disabled > .pk-icon { opacity: 0.35; }
.pk-number__input {
  flex: 1 1 auto; width: calc(3ch + 16px); min-width: 0; height: 100%; padding: 0 var(--pk-space-4); border: 0; background: transparent;
  font: inherit; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; color: inherit; text-align: center;
}
.pk-number__input:focus-visible { outline: 0; }
.pk-number__unit { flex: none; padding: 0 var(--pk-space-4) 0 var(--pk-space-3); color: var(--pk-text-2); white-space: nowrap; }
.pk-number:has(> .pk-number__unit) > .pk-number__input { padding-right: 0; text-align: right; }
.pk-number:has(> .pk-number__input[readonly]) > .pk-number__btn { display: none; }
.pk-number:has(> .pk-number__input[readonly]) > .pk-number__input { padding-left: 13px; }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-number__btn { padding: 0; border-radius: 0; background: transparent; }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-number__btn:first-child { border-radius: calc(var(--pk-r-field) - 1px) 0 0 calc(var(--pk-r-field) - 1px); box-shadow: var(--pk-edge-right-strong); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-number__btn:last-child { border-radius: 0 calc(var(--pk-r-field) - 1px) calc(var(--pk-r-field) - 1px) 0; box-shadow: var(--pk-edge-left-strong); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-number__btn:hover:not(:disabled) { background-color: color-mix(in srgb, var(--pk-text) 6%, transparent); }

/* amount and unit: right-aligned figures; a suffix (₺, dk, kg, adet) or an attached unit select sits in the field's own box */
.pk-input--amount { text-align: right; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; }
.pk-control:has(> :is(.pk-control__suffix, .pk-control__unit)) { display: flex; align-items: center; height: var(--pk-h-btn); }
.pk-control:has(> :is(.pk-control__suffix, .pk-control__unit)) > .pk-input { flex: 1 1 0; min-width: 0; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.pk-control:has(> .pk-control__suffix) > .pk-input { padding-right: 0; }
.pk-control__suffix { flex: none; padding: 0 var(--pk-space-7) 0 var(--pk-space-3); color: var(--pk-text-2); white-space: nowrap; }
.pk-control__unit { position: relative; flex: none; align-self: stretch; display: flex; align-items: center; border-left: 1px solid var(--pk-line-strong); }
.pk-control__unit > select {
  height: 100%; padding: 0 34px 0 var(--pk-space-6); border: 0; border-radius: 0 calc(var(--pk-r-field) - 1px) calc(var(--pk-r-field) - 1px) 0;
  background: transparent; font: inherit; color: var(--pk-text); cursor: pointer; appearance: none;
}
.pk-control__unit > select:focus-visible { outline-offset: -4px; }
.pk-control__unit > .pk-icon { position: absolute; right: var(--pk-space-6); width: 16px; height: 16px; color: var(--pk-text-3); pointer-events: none; }

/* slider: the slider box draws the track and its filled part, the native range inputs on top keep the keyboard and the value.
   The app writes the filled part as fractions from 0 to 1: --pk-slider-to, and --pk-slider-from on a two-thumb slider */
.pk-slider {
  --pk-slider-knob: 22px; --pk-slider-hit: max(var(--pk-slider-knob), var(--pk-tap)); --pk-slider-track: 6px;
  --pk-slider-from: 0; --pk-slider-to: 0; --pk-slider-end: calc((var(--pk-slider-hit) - var(--pk-slider-knob)) / 2);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--pk-space-3); min-width: 0;
}
.pk-slider::before, .pk-slider::after {
  content: ''; position: absolute; top: calc((var(--pk-slider-hit) - var(--pk-slider-track)) / 2); height: var(--pk-slider-track);
  border-radius: var(--pk-r-pill); pointer-events: none;
}
.pk-slider::before { left: var(--pk-slider-end); right: var(--pk-slider-end); background: var(--pk-inset-2); }
.pk-slider::after { left: var(--pk-slider-end); width: calc(var(--pk-slider-knob) / 2 + (100% - var(--pk-slider-hit)) * var(--pk-slider-to)); background: var(--pk-primary); }
.pk-slider--dual::after {
  left: calc(var(--pk-slider-hit) / 2 + (100% - var(--pk-slider-hit)) * var(--pk-slider-from));
  width: calc((100% - var(--pk-slider-hit)) * (var(--pk-slider-to) - var(--pk-slider-from)));
}
.pk-slider > input[type='range'] {
  position: relative; z-index: 1; grid-area: 1 / 1; width: 100%; height: var(--pk-slider-hit); margin: 0;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pk-slider > input[type='range']:focus-visible { outline: 0; }
.pk-slider > input[type='range']::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.pk-slider > input[type='range']::-moz-range-track { height: 100%; border: 0; background: transparent; }
/* the knob's box is the hit area (44px on touch); a transparent border leaves the drawn knob at its size */
.pk-slider > input[type='range']::-webkit-slider-thumb {
  box-sizing: border-box; width: var(--pk-slider-hit); height: var(--pk-slider-hit); border: var(--pk-slider-end) solid transparent; border-radius: var(--pk-r-pill);
  background: var(--pk-card) padding-box; box-shadow: var(--pk-ring-active); cursor: grab; -webkit-appearance: none; appearance: none;
}
.pk-slider > input[type='range']::-moz-range-thumb {
  box-sizing: border-box; width: var(--pk-slider-hit); height: var(--pk-slider-hit); border: var(--pk-slider-end) solid transparent; border-radius: var(--pk-r-pill);
  background: var(--pk-card) padding-box; box-shadow: var(--pk-ring-active); cursor: grab;
}
.pk-slider > input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: var(--pk-ring-active), var(--pk-ring-picked); }
.pk-slider > input[type='range']:focus-visible::-moz-range-thumb { box-shadow: var(--pk-ring-active), var(--pk-ring-picked); }
.pk-slider--dual > input[type='range'] { pointer-events: none; }
.pk-slider--dual > input[type='range']::-webkit-slider-thumb { pointer-events: auto; }
.pk-slider--dual > input[type='range']::-moz-range-thumb { pointer-events: auto; }
.pk-slider:has(> input:disabled)::after { background: var(--pk-line-control); }
.pk-slider > input[type='range']:disabled { cursor: not-allowed; }
.pk-slider > input[type='range']:disabled::-webkit-slider-thumb { box-shadow: inset 0 0 0 2px var(--pk-line-control); cursor: not-allowed; }
.pk-slider > input[type='range']:disabled::-moz-range-thumb { box-shadow: inset 0 0 0 2px var(--pk-line-control); cursor: not-allowed; }
.pk-slider__value { font-family: var(--pk-font-figures); font-size: var(--pk-fs-small); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-strong); white-space: nowrap; }
/* a pk-tip over the knob while it is dragged (data-dragging) or moved with the keyboard */
.pk-slider__bubble {
  position: absolute; z-index: 2; top: calc(var(--pk-slider-end) - var(--pk-space-4)); left: calc(var(--pk-slider-hit) / 2 + (100% - var(--pk-slider-hit)) * var(--pk-slider-to));
  transform: translate(-50%, -100%); font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--pk-dur-fast) var(--pk-ease);
}
.pk-slider__bubble--from { left: calc(var(--pk-slider-hit) / 2 + (100% - var(--pk-slider-hit)) * var(--pk-slider-from)); }
.pk-slider:is([data-dragging], :has(> input:focus-visible)) > .pk-slider__bubble { opacity: 1; }
/* steps: one mark per step under the track, centred under the knob's stops; min and max labels at the ends */
.pk-slider__ticks, .pk-slider__scale { display: flex; justify-content: space-between; font-family: var(--pk-font-figures); font-size: var(--pk-fs-fine); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
.pk-slider__ticks { padding-inline: calc(var(--pk-slider-hit) / 2); }
.pk-slider__ticks > * { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 0; white-space: nowrap; }
.pk-slider__ticks > *::before { content: ''; width: 1.5px; height: 6px; border-radius: 1px; background: var(--pk-line-control); }
.pk-slider__scale { gap: var(--pk-space-6); padding-inline: var(--pk-slider-end); }
/* a slider beside the number field it moves together with, or between two icons */
.pk-slider__pair { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-5) var(--pk-space-7); }
.pk-slider__pair > .pk-slider { flex: 1 1 180px; }
.pk-slider__pair > .pk-icon { color: var(--pk-text-2); }

/* signature pad: a field-like area with a baseline; the app draws the strokes on the canvas with pointer events */
.pk-sign { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-5); min-width: 0; }
.pk-sign__head { display: flex; align-items: center; gap: var(--pk-space-5); min-height: var(--pk-h-btn-sm); }
.pk-sign__head > :last-child:not(:first-child) { margin-left: auto; }
.pk-sign__pad {
  position: relative; height: 180px; overflow: hidden; border: 1px solid transparent; border-radius: var(--pk-r-field);
  background: var(--pk-inset); box-shadow: var(--pk-field-foot); color: var(--pk-ink); touch-action: none; user-select: none; -webkit-user-select: none;
}
:is(.pk-inset, .pk-tile, .pk-sortcards__item:not(:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *)) .pk-sign__pad { background: var(--pk-card); }
:where([data-theme='corporate'], [data-theme='portal']) .pk-sign__pad { background: var(--pk-card); border-color: var(--pk-line-control); }
.pk-sign__canvas, .pk-sign__image { position: absolute; inset: 0; width: 100%; height: 100%; }
.pk-sign__canvas { cursor: crosshair; }
.pk-sign__image { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pk-sign__image > * { vector-effect: non-scaling-stroke; }
.pk-sign__line { position: absolute; left: var(--pk-space-12); right: var(--pk-space-12); bottom: 30%; border-top: 1.5px solid color-mix(in srgb, var(--pk-text) 22%, transparent); pointer-events: none; }
.pk-sign__line::before { content: '×'; position: absolute; left: 0; bottom: var(--pk-space-3); font-size: var(--pk-fs-title-lg); line-height: var(--pk-lh-none); color: var(--pk-text-3); }
.pk-sign__hint { display: none; position: absolute; inset-inline: var(--pk-space-8); bottom: calc(30% + var(--pk-space-7)); text-align: center; font-size: var(--pk-fs-small); color: var(--pk-text-3); pointer-events: none; }
.pk-sign:is([data-empty], .pk-sign--disabled) .pk-sign__hint { display: block; }
.pk-sign__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); }
.pk-sign__who { flex: 1 1 auto; min-width: 0; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-sign__rotate { display: none; align-items: center; gap: var(--pk-space-4); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-sign--signed .pk-sign__pad { background: var(--pk-card); border-color: var(--pk-line); box-shadow: none; }
.pk-sign--disabled .pk-sign__pad {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 7%, transparent) 0 1.5px, transparent 1.5px 8px), var(--pk-inset);
  cursor: not-allowed;
}
/* full screen: the pad takes what the head and the actions leave; a phone held upright is asked to turn */
.pk-sign--full {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--pk-card);
  padding: max(var(--pk-space-6), env(safe-area-inset-top)) max(var(--pk-space-8), env(safe-area-inset-right)) max(var(--pk-space-6), env(safe-area-inset-bottom)) max(var(--pk-space-8), env(safe-area-inset-left));
}
.pk-sign--full > .pk-sign__pad { flex: 1; height: auto; min-height: 160px; }
@media (orientation: portrait) and (max-width: 599px) {
  .pk-sign--full > .pk-sign__rotate { display: flex; }
}

/* colour field: the system colour picker is the swatch, the hex code sits beside it; presets are swatches (pk-swatch) whose
   colour comes in --pk-swatch */
.pk-colorfield { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); min-width: 0; }
.pk-control:has(> .pk-colorfield__swatch) { width: 100%; max-width: 220px; }
.pk-control > .pk-colorfield__swatch {
  position: absolute; z-index: 1; top: 1px; left: 1px; width: calc(var(--pk-h-btn) - 2px); height: calc(100% - 2px); padding: 7px; border: 0;
  border-radius: var(--pk-r-field); background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pk-colorfield__swatch::-webkit-color-swatch-wrapper { padding: 0; }
.pk-colorfield__swatch::-webkit-color-swatch { border: 1px solid color-mix(in srgb, var(--pk-text) 16%, transparent); border-radius: var(--pk-r-control); }
.pk-colorfield__swatch::-moz-color-swatch { border: 1px solid color-mix(in srgb, var(--pk-text) 16%, transparent); border-radius: var(--pk-r-control); }
.pk-control:has(> .pk-colorfield__swatch) > .pk-input { padding-left: calc(var(--pk-h-btn) + var(--pk-space-1)); font-family: var(--pk-mono); }
.pk-colorfield__preset { background: var(--pk-swatch); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-text) 14%, transparent); }
/* a pair's right half keeps the preset's hairline on its three outer sides */
.pk-colorfield__preset.pk-swatch--pair::before {
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--pk-text) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--pk-text) 14%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--pk-text) 14%, transparent);
}
/* a message under a field that does not block saving (a colour that text cannot be read on) */
.pk-field__warning { display: flex; align-items: flex-start; gap: var(--pk-space-3); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-label); color: var(--pk-warning-text); }
.pk-field__warning > .pk-icon { width: 16px; height: 16px; margin-top: 1px; }

/* location: an address search (pk-control, pk-pop, pk-listbox) and a static map image from the app with a pin at its centre */
.pk-map__search { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-4); min-width: 0; }
.pk-map__search > .pk-pop { width: 100%; }
.pk-map__search .pk-listbox__item > .pk-icon:first-child { color: var(--pk-text-2); }
.pk-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-7); min-width: 0; container: pk-map / inline-size; }
.pk-map__preview { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--pk-r-tile); background: var(--pk-inset); }
.pk-map__preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the map image stays light, so dark mode dims it; every map keeps a hairline edge */
.pk-map__preview::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: light-dark(transparent, color-mix(in srgb, var(--pk-canvas) 30%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-text) 10%, transparent);
}
/* the tip of the drop sits on the centre of the map */
.pk-map__pin {
  position: absolute; z-index: 1; top: 50%; left: 50%; width: 34px; height: 34px; margin: -41px 0 0 -17px; border-radius: 50% 50% 50% 0;
  background: var(--pk-primary); box-shadow: 0 0 0 3px var(--pk-card), var(--pk-raise-shadow); transform: rotate(-45deg);
}
.pk-map__pin::after { content: ''; position: absolute; inset: 11px; border-radius: var(--pk-r-pill); background: var(--pk-on-primary); }
.pk-map__body { display: grid; gap: var(--pk-space-1); min-width: 0; }
.pk-map__title { font-weight: var(--pk-fw-strong); }
.pk-map__address { font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); }
@container pk-map (min-width: 560px) {
  .pk-map { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; column-gap: var(--pk-space-10); }
  .pk-map__preview { grid-row: span 3; }
}

/* form error summary: a pk-notice at the top of a long form; every line links to its field. It takes focus after a submit */
.pk-errors { --pk-errors-tone: var(--pk-danger-text); scroll-margin-top: 24px; }
.pk-notice--warning.pk-errors { --pk-errors-tone: var(--pk-warning-text); }
.pk-errors__list { display: grid; margin: var(--pk-space-3) 0 0; padding: 0; list-style: none; }
.pk-errors__list a {
  display: inline-flex; align-items: center; min-height: max(28px, var(--pk-tap)); font-weight: var(--pk-fw-label); color: var(--pk-errors-tone);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.pk-errors__list a:hover { text-decoration-thickness: 2px; }
/* ---------- date, time, duration and recurrence ---------- */
/* date field: a pk-control to type into that opens a pk-datepick, in a pk-pop on wide screens and a pk-sheet on phones.
   With a time list beside the month it picks a date and a time */
.pk-datefield { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-4); min-width: 0; }
.pk-datefield .pk-input { font-variant-numeric: tabular-nums; }
.pk-datefield .pk-input:disabled { color: var(--pk-text-3); cursor: not-allowed; }
.pk-datefield > .pk-pop { width: min(340px, 100%); }
.pk-datefield > .pk-pop:has(.pk-datefield__panel) { width: min(520px, 100%); }
.pk-datefield > .pk-pop:has(> .pk-timelist) { width: min(240px, 100%); }
/* the month and the times side by side; under about 400px the times go under the month */
.pk-datefield__panel { display: flex; flex-wrap: wrap; gap: var(--pk-space-6) var(--pk-space-8); min-width: 0; }
.pk-datefield__panel > .pk-datepick { flex: 3 1 260px; min-width: 0; }
.pk-datefield__panel > .pk-timelist { flex: 1 1 120px; max-height: 300px; }

/* time list: times in 15 or 30 minute steps; a free time carries a dot, a busy one is faint and says so */
.pk-timelist {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--pk-space-1); min-width: 0; max-height: 296px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--pk-r-field);
}
.pk-timelist:focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
.pk-timelist__item {
  display: flex; align-items: center; gap: var(--pk-space-4); min-height: max(calc(var(--pk-size-btn) - 4px), var(--pk-tap)); padding: 0 var(--pk-space-6); flex: none;
  border-radius: var(--pk-r-field); font-family: var(--pk-mono); font-size: var(--pk-fs-label); color: var(--pk-ink); cursor: pointer;
}
.pk-timelist__item:is(:hover, [data-active]) { background: var(--pk-inset); }
.pk-timelist__item[data-free]::after { content: ''; flex: none; width: 6px; height: 6px; margin-left: auto; border-radius: var(--pk-r-pill); background: var(--pk-success); }
.pk-timelist__meta { margin-left: auto; font-family: var(--pk-font); font-size: var(--pk-fs-fine); white-space: nowrap; }
.pk-timelist__item[aria-selected='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-timelist__item[aria-selected='true'][data-free]::after { background: currentColor; }
.pk-timelist__item[aria-disabled='true'] { background: transparent; color: var(--pk-text-3); cursor: default; }
.pk-timelist .pk-caption { padding-inline: var(--pk-space-6); }

/* duration: preset chips (pk-chip with aria-pressed), hour and minute steppers for anything else */
.pk-duration { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); min-width: 0; }
.pk-duration__presets { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); }
.pk-duration__custom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-6); }

/* recurrence: frequency, interval, weekdays, end, skipped dates and the rule in plain words */
.pk-recur { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--pk-space-10) * var(--pk-ds)); min-width: 0; container: pk-recur / inline-size; }
.pk-recur__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-6); }
.pk-recur__days { display: grid; grid-template-columns: repeat(7, max-content); gap: var(--pk-space-4); }
.pk-recur__day {
  display: grid; place-items: center; width: max(var(--pk-size-chip), var(--pk-tap)); height: max(var(--pk-size-chip), var(--pk-tap)); padding: 0;
  border: 0; border-radius: var(--pk-r-control); background: var(--pk-inset); font: inherit; font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); color: var(--pk-ink); cursor: pointer;
}
.pk-recur__day:hover { box-shadow: var(--pk-ring-mark-strong); }
.pk-recur__day[aria-pressed='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-recur__end { display: grid; gap: var(--pk-space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.pk-recur__end > legend { margin-bottom: var(--pk-space-2); padding: 0; }
.pk-recur__option { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-7); min-height: var(--pk-h-btn); }
.pk-recur__option > .pk-option { align-items: center; }
.pk-recur__option > .pk-control { flex: 0 1 200px; }
.pk-recur__except { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-6) var(--pk-space-4); }
.pk-recur__summary { display: flex; align-items: flex-start; gap: var(--pk-space-5); padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-inset); font-size: var(--pk-fs-small); }
.pk-recur__summary > .pk-icon { flex: none; margin-top: 1px; color: var(--pk-text-2); }
/* which sessions an edit changes: this one, this and the next, all */
.pk-recur__scope { display: grid; gap: var(--pk-space-4); }
@container pk-recur (max-width: 379px) {
  .pk-recur__days { grid-template-columns: repeat(4, max-content); }
}

/* the theme's selection grammar on the new chosen states: Kurumsal rings a tinted choice and both themes set it in semibold */
:where([data-theme='corporate'], [data-theme='portal']) .pk-recur__day { background: var(--pk-card); box-shadow: var(--pk-ring-strong); }
[data-theme='corporate'] :is(.pk-recur__day[aria-pressed='true'], .pk-timelist__item[aria-selected='true']) { font-weight: var(--pk-fw-strong); box-shadow: var(--pk-ring-chosen); }
[data-theme='technical'] :is(.pk-recur__day[aria-pressed='true'], .pk-timelist__item[aria-selected='true']) { font-weight: var(--pk-fw-strong); }
/* ---------- account and access ---------- */

/* one-time code: one real field lies over the cells (autocomplete="one-time-code", inputmode="numeric"), so typing, pasting
   and the phone's code suggestion fill every cell at once; the cells only draw what the field holds, and the next cell to fill
   carries data-active. A PIN draws the same kind of field as dots */
.pk-otp { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 52px); gap: var(--pk-space-4); width: fit-content; max-width: 100%; }
.pk-otp__input, .pk-pin__input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0;
  background: transparent; color: transparent; caret-color: transparent; font: inherit; letter-spacing: -1em; cursor: text;
}
.pk-otp__input:focus-visible, .pk-pin__input:focus-visible { outline: 0; }
.pk-otp__input::selection, .pk-pin__input::selection { background: transparent; }
/* the browser's autofill tint would cover the cells */
.pk-otp__input:autofill, .pk-pin__input:autofill { transition: background-color 0s 600000s, color 0s 600000s; }
.pk-otp__input:disabled, .pk-pin__input:disabled { cursor: default; }
.pk-otp__cell {
  display: grid; place-items: center; height: 56px; min-width: 0; border: 1px solid transparent; border-radius: var(--pk-r-field);
  background: var(--pk-inset); box-shadow: var(--pk-field-foot); font-family: var(--pk-mono); font-size: var(--pk-fs-figure-md); font-weight: var(--pk-fw-medium); color: var(--pk-text);
  transition: border-color var(--pk-dur-fast) var(--pk-ease), background var(--pk-dur-fast) var(--pk-ease);
}
:is(.pk-inset, .pk-tile, .pk-sortcards__item:not(:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *)) .pk-otp__cell { background: var(--pk-card); }
.pk-otp:focus-within .pk-otp__cell[data-active] { border-color: var(--pk-primary-edge); background: var(--pk-card); box-shadow: none; }
.pk-otp:focus-within .pk-otp__cell[data-active]:empty::after { content: ''; width: 1.5px; height: 24px; background: var(--pk-text); animation: pk-caret 1.1s steps(1) infinite; }
@keyframes pk-caret { 50% { opacity: 0; } }
.pk-otp[data-state='error'] .pk-otp__cell { border-color: var(--pk-danger-edge); box-shadow: none; }
.pk-otp[data-state='success'] .pk-otp__cell { background: var(--pk-success-soft); color: var(--pk-success-text); box-shadow: none; }
.pk-otp:is([data-state='verifying'], [data-state='locked']) .pk-otp__cell { color: var(--pk-text-3); }
.pk-otp[data-state='locked'] .pk-otp__cell { background: var(--pk-inset-2); }
/* the line under a code or PIN field: verifying (aria-busy), done, wrong code, locked */
.pk-otp__status { display: flex; align-items: center; gap: var(--pk-space-4); min-height: 20px; font-size: var(--pk-fs-label); color: var(--pk-text-2); }
.pk-otp__status > .pk-icon { width: 16px; height: 16px; }
.pk-otp__status[aria-busy='true'] > .pk-icon { animation: pk-spin 0.8s linear infinite; }
.pk-otp__status--success { font-weight: var(--pk-fw-label); color: var(--pk-success-text); }
.pk-otp__status--danger { font-weight: var(--pk-fw-label); color: var(--pk-danger-text); }
.pk-pin + .pk-otp__status { justify-content: center; text-align: center; }
/* resend: the link waits for its countdown ("0:45 sonra yeniden gönder") and is disabled until then */
.pk-otp__resend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-4); font-size: var(--pk-fs-label); color: var(--pk-text-2); }
.pk-otp__resend > button {
  position: relative; padding: 0; border: 0; background: none; font: inherit; font-weight: var(--pk-fw-strong); color: var(--pk-text);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pk-otp__resend > button:disabled { color: var(--pk-text-3); text-decoration: none; cursor: default; }
.pk-pin { position: relative; display: flex; justify-content: center; gap: var(--pk-space-9); padding: var(--pk-space-7) var(--pk-space-5); border-radius: var(--pk-r-control); }
.pk-pin:has(> .pk-pin__input:focus-visible) { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
.pk-pin__dot { width: 14px; height: 14px; flex: none; border-radius: var(--pk-r-pill); box-shadow: var(--pk-ring-mark); transition: background var(--pk-dur-quick) var(--pk-ease), box-shadow var(--pk-dur-quick) var(--pk-ease); }
.pk-pin__dot[data-filled] { background: var(--pk-primary); box-shadow: var(--pk-ring-chosen); }
.pk-pin[data-state='error'] .pk-pin__dot { box-shadow: var(--pk-ring-danger); }
.pk-pin[data-state='error'] .pk-pin__dot[data-filled] { background: var(--pk-danger); }
.pk-pin[data-state='success'] .pk-pin__dot { background: var(--pk-success); box-shadow: none; }

/* on-screen keypad for tills and tablets: 56px keys (at least 48 on phones), 72px with pk-keypad--lg (at least 64 on tills).
   The bottom row is [ ] 0 ⌫, or ⌫ 0 Tamam when the entry needs confirming */
.pk-keypad { --pk-key-h: 56px; --pk-key-fs: var(--pk-fs-figure-lg); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pk-space-5); width: min(100%, 300px); margin-inline: auto; }
.pk-keypad--lg { --pk-key-h: 72px; --pk-key-fs: var(--pk-fs-figure-xl); width: min(100%, 380px); gap: var(--pk-space-6); }
.pk-keypad__key {
  display: grid; place-items: center; height: var(--pk-key-h); min-width: 0; padding: 0; border: 0; border-radius: var(--pk-r-tile);
  background: var(--pk-inset); color: var(--pk-text); font-family: var(--pk-font); font-size: var(--pk-key-fs); font-weight: var(--pk-fw-book); font-variant-numeric: tabular-nums;
  cursor: pointer; touch-action: manipulation; user-select: none; transition: background var(--pk-dur-quick) var(--pk-ease), transform var(--pk-dur-quick) var(--pk-ease);
}
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-keypad__key { background: var(--pk-card); box-shadow: var(--pk-ring-strong); }
.pk-keypad__key--action { background: transparent; box-shadow: none; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-label); color: var(--pk-text-2); }
.pk-keypad__key--action .pk-icon { width: 24px; height: 24px; }
.pk-keypad__key--ok { background: var(--pk-primary); box-shadow: none; font-size: var(--pk-fs-lead); font-weight: var(--pk-fw-strong); color: var(--pk-on-primary); }
.pk-keypad__key:not(.pk-keypad__key--ok):active { background: var(--pk-inset-2); }
.pk-keypad__key:active { transform: scale(0.97); }
.pk-keypad__key--ok:hover { background: color-mix(in oklch, var(--pk-primary) 88%, var(--pk-card)); }
@media (hover: hover) {
  .pk-keypad__key:not(.pk-keypad__key--ok):hover { background: var(--pk-inset-2); }
}
/* an outlined white field, like the theme's other fields */
:where([data-theme='corporate'], [data-theme='portal']) .pk-otp__cell { background: var(--pk-card); border-color: var(--pk-line-control); }
:where([data-theme='corporate'], [data-theme='portal']) .pk-otp:focus-within .pk-otp__cell[data-active] { box-shadow: var(--pk-focus-halo); }

/* sign-in: provider buttons (outlined, full width, the provider's own mark at the start), a divider and the steps of the form */
.pk-sso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-5); }
.pk-sso__btn {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--pk-h-btn-lg); padding: 0 46px;
  border: 0; border-radius: var(--pk-r-control); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-ring-strong);
  font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); cursor: pointer; transition: background var(--pk-dur-fast) var(--pk-ease);
}
.pk-sso__btn:hover { background: var(--pk-inset); }
.pk-sso__mark { position: absolute; left: var(--pk-space-8); top: 50%; width: 20px; height: 20px; translate: 0 -50%; }
.pk-sso__btn[aria-busy='true'] { cursor: progress; pointer-events: none; color: var(--pk-text-2); }
.pk-sso__btn[aria-busy='true'] > .pk-sso__mark { visibility: hidden; }
.pk-sso__btn[aria-busy='true']::before { content: ''; position: absolute; left: var(--pk-space-9); top: 50%; width: 16px; height: 16px; margin-top: calc(-1 * var(--pk-space-4)); border-radius: var(--pk-r-pill); border: 2px solid currentColor; border-right-color: transparent; animation: pk-spin var(--pk-dur-spin) linear infinite; }
.pk-divider { display: flex; align-items: center; gap: var(--pk-space-6); font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-divider:empty { gap: 0; }
.pk-divider::before, .pk-divider::after { content: ''; flex: 1; height: 1px; background: var(--pk-line); }
.pk-auth__step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-9); align-content: start; }

/* account menu: who is signed in, their pages, the mode and the language, then sign out. It is a pk-menu on wide screens and the
   body of a sheet on phones; data-view="lang" swaps the items for the language list */
.pk-usermenu { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-1); }
.pk-menu.pk-usermenu { width: min(300px, 100%); }
.pk-usermenu__head { display: flex; align-items: center; gap: var(--pk-space-6); padding: var(--pk-space-3) var(--pk-space-5) var(--pk-space-5); }
.pk-usermenu__who { display: grid; min-width: 0; }
.pk-usermenu__name { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-compact); }
.pk-usermenu__mail { font-size: var(--pk-fs-meta); color: var(--pk-text-2); overflow-wrap: anywhere; }
.pk-usermenu__role { font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-usermenu__mode { display: grid; gap: var(--pk-space-4); padding: var(--pk-space-3) var(--pk-space-6) var(--pk-space-4); }
.pk-usermenu__label { display: flex; align-items: center; gap: var(--pk-space-6); font-size: var(--pk-fs-item); }
.pk-usermenu__mode .pk-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.pk-usermenu__mode .pk-seg__item { padding: 0 var(--pk-space-3); }
/* menu items written as buttons (Dil, Çıkış yap) look like the link items; :where() keeps the menu's hover on top */
.pk-usermenu :where(button.pk-menu__item) { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.pk-usermenu__value { margin-left: auto; font-size: var(--pk-fs-small); color: var(--pk-text-3); }
.pk-usermenu__lang > .pk-icon:last-child { color: var(--pk-text-3); }
.pk-usermenu[data-view='lang'] > :not(.pk-usermenu__langs), .pk-usermenu:not([data-view='lang']) > .pk-usermenu__langs { display: none; }
.pk-usermenu__langs { display: grid; gap: var(--pk-space-1); }

/* workspaces a person belongs to (studios, branches, companies), last used first; the current one in the current style */
/* it scrolls, so it keeps room inside for its rows' focus rings, takes it back with a negative margin and adds it to the cap */
.pk-workspaces {
  display: grid; gap: var(--pk-space-1); max-height: calc(360px + 2 * var(--pk-focus-room)); margin: calc(-1 * var(--pk-focus-room)); padding: var(--pk-focus-room);
  overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--pk-focus-room);
}
.pk-workspace { display: flex; align-items: center; gap: var(--pk-space-6); min-height: 56px; padding: var(--pk-space-4) var(--pk-space-5); border-radius: var(--pk-r-field); color: var(--pk-text); }
.pk-workspace:hover { background: var(--pk-inset); }
.pk-workspace__logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--pk-r-sm); background: var(--pk-inset-2); color: var(--pk-text); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-bold); }
.pk-workspace__logo img { width: 100%; height: 100%; object-fit: cover; }
.pk-workspace__meta { flex: 1; min-width: 0; display: grid; }
.pk-workspace__name { font-size: var(--pk-fs-control); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-compact); overflow-wrap: anywhere; }
.pk-workspace__role { font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-workspace__count { font-family: var(--pk-font-figures); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
.pk-workspace__check { visibility: hidden; }
/* a row, chip or empty line a search has filtered out */
.pk-workspace[aria-current='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-workspace[aria-current='true'] .pk-workspace__role { color: inherit; }
.pk-workspace[aria-current='true'] .pk-workspace__count { color: var(--pk-current-count); }
.pk-workspace[aria-current='true'] .pk-workspace__check { visibility: visible; }

/* people picker: one assignee, or several as person chips with a search field; the results list in a pk-pop (a large sheet on
   phones). Chips stay white on the grey field */
.pk-picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3); min-height: var(--pk-h-btn); padding: 5px var(--pk-space-4); min-width: 0;
  border: 1px solid transparent; border-radius: var(--pk-r-field); background: var(--pk-inset); box-shadow: var(--pk-field-foot); cursor: text;
}
.pk-picker:focus-within { border-color: var(--pk-primary-edge); background: var(--pk-card); box-shadow: none; }
:is(.pk-inset, .pk-tile, .pk-sortcards__item:not(:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *)) .pk-picker { background: var(--pk-card); }
.pk-picker__chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; max-width: 100%; padding: 0 var(--pk-space-2); border-radius: var(--pk-r-control);
  background: var(--pk-card); font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); white-space: nowrap;
}
.pk-picker__chip:not(:has(> .pk-picker__remove)) { padding-right: var(--pk-space-6); }
.pk-picker:focus-within .pk-picker__chip, :is(.pk-inset, .pk-tile, .pk-sortcards__item:not(:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *)) .pk-picker__chip { background: var(--pk-inset); }
.pk-picker__chip > .pk-avatar, .pk-picker__trigger > .pk-avatar { width: 24px; height: 24px; font-size: 10px; }
.pk-picker__remove {
  position: relative; width: 24px; height: 24px; flex: none; padding: 0; border: 0; border-radius: var(--pk-r-pill); display: grid; place-items: center;
  background: transparent; color: var(--pk-text-2); cursor: pointer;
}
.pk-picker__remove:hover { background: var(--pk-inset-2); color: var(--pk-text); }
.pk-picker__remove .pk-icon { width: 14px; height: 14px; }
.pk-picker__more { position: relative; height: 32px; padding: 0 var(--pk-space-4); border: 0; border-radius: var(--pk-r-control); background: transparent; font: inherit; font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); color: var(--pk-text-2); cursor: pointer; }
.pk-picker__more:hover { background: var(--pk-inset-2); color: var(--pk-text); }
.pk-picker__input { flex: 1; min-width: 120px; height: 32px; padding: 0 var(--pk-space-2); border: 0; outline: 0; background: transparent; font: inherit; color: var(--pk-text); }
.pk-picker__input::placeholder { color: var(--pk-text-3); }
.pk-picker--single { flex-wrap: nowrap; padding: 0 var(--pk-space-3) 0 var(--pk-space-5); cursor: pointer; }
.pk-picker__trigger {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--pk-space-5); align-self: stretch; padding: 0; border: 0; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.pk-picker__trigger:focus-visible { outline: 0; }
.pk-picker--single:has(> .pk-picker__trigger:focus-visible) { border-color: var(--pk-primary-edge); background: var(--pk-card); }
.pk-picker__value { flex: 1; min-width: 0; font-weight: var(--pk-fw-label); }
.pk-picker__placeholder { flex: 1; min-width: 0; color: var(--pk-text-3); }
.pk-picker__trigger > .pk-icon:last-child { color: var(--pk-text-3); }
/* the pinned row of chosen people above the results in a sheet */
.pk-picker__chips { display: flex; flex-wrap: wrap; gap: var(--pk-space-3); }
.pk-picker__chips .pk-picker__chip { background: var(--pk-inset); }
/* the chosen person in a single-choice list takes the theme's current style */
.pk-picker__results > .pk-listbox__item[aria-selected='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-picker__results > .pk-listbox__item[aria-selected='true'] .pk-listbox__meta { color: inherit; }
.pk-picker__invite { max-width: 100%; }
.pk-picker__email { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:where([data-theme='corporate'], [data-theme='portal']) .pk-picker { background: var(--pk-card); border-color: var(--pk-line-control); }
:where([data-theme='corporate'], [data-theme='portal']) .pk-picker:is(:focus-within) { border-color: var(--pk-primary-edge); box-shadow: var(--pk-focus-halo); }
:where([data-theme='corporate'], [data-theme='portal']) .pk-picker__chip { background: var(--pk-inset-2); }
:where([data-theme='technical']) .pk-picker__chip { box-shadow: var(--pk-ring-strong); }

/* invitations: rows of e-mail, role and remove, then the invitations still waiting */
.pk-invite { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-5); container: pk-invite / inline-size; }
.pk-invite__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 0.55fr) auto; gap: var(--pk-space-4); align-items: center; }
.pk-invite__pending { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-6); padding: calc(var(--pk-space-6) * var(--pk-ds)) 0; border-top: 1px solid var(--pk-line); }
.pk-invite__who { flex: 1 1 220px; min-width: 0; display: grid; }
.pk-invite__mail { font-size: var(--pk-fs-control); font-weight: var(--pk-fw-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-invite__meta { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-invite__actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-3); margin-left: auto; }
@container pk-invite (max-width: 479px) {
  .pk-invite__row { grid-template-columns: minmax(0, 1fr) auto; }
  .pk-invite__row > :first-child { grid-column: 1 / -1; }
  .pk-invite__actions { margin-left: 52px; }
}

/* permission and channel grid: rows (grouped by module) against roles or channels. Each cell holds a checkbox or switch
   labelled for screen readers, a lock (always on, reason in a tooltip) or, read-only, a mark; data-changed marks a cell until it
   is saved. A grid that fits its box (200px for the names and 112px a column) lets its header stick to the window; a wider one
   scrolls sideways under its first column. Under 560px of its own width every row becomes a card whose controls carry their
   column's name (data-label) */
.pk-matrix { container: pk-matrix / inline-size; min-width: 0; }
.pk-matrix__scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
@container pk-matrix (min-width: 560px) { .pk-matrix__scroll:not(:has(thead th:nth-child(5))) { overflow: visible; } }
@container pk-matrix (min-width: 648px) { .pk-matrix__scroll:not(:has(thead th:nth-child(6))) { overflow: visible; } }
@container pk-matrix (min-width: 760px) { .pk-matrix__scroll:not(:has(thead th:nth-child(7))) { overflow: visible; } }
@container pk-matrix (min-width: 872px) { .pk-matrix__scroll:not(:has(thead th:nth-child(8))) { overflow: visible; } }
.pk-matrix__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--pk-fs-control); }
.pk-matrix__table :is(th, td) { padding: var(--pk-cell-y) var(--pk-space-6); border-bottom: 1px solid var(--pk-line); background: var(--pk-card); }
.pk-matrix__table thead th { position: sticky; top: 0; z-index: 2; padding-block: calc(var(--pk-cell-y) - var(--pk-space-1)); vertical-align: bottom; border-bottom-color: var(--pk-line-strong); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-medium); color: var(--pk-text-2); text-align: center; }
.pk-matrix__table :is(thead th:first-child, th[scope='row'], th[scope='rowgroup']) { position: sticky; left: 0; z-index: 1; min-width: 200px; text-align: left; }
.pk-matrix__table thead th:first-child { z-index: 3; }
.pk-matrix__name { display: block; font-weight: var(--pk-fw-title); }
.pk-matrix__desc { display: block; font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-regular); color: var(--pk-text-2); }
.pk-matrix__cell { position: relative; width: 112px; text-align: center; }
.pk-matrix__cell > :is(.pk-checkbox, .pk-toggle) { vertical-align: middle; }
.pk-matrix__group > :is(th, td) { background: var(--pk-inset); font-weight: var(--pk-fw-strong); }
.pk-matrix__count { margin-left: var(--pk-space-4); font-family: var(--pk-font-figures); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-regular); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
.pk-matrix__cell[data-changed] { background: var(--pk-accent-soft); }
.pk-matrix__cell[data-changed]::after { content: ''; position: absolute; top: var(--pk-space-4); right: var(--pk-space-4); width: 6px; height: 6px; border-radius: var(--pk-r-pill); background: var(--pk-accent-figure); }
.pk-matrix__lock { position: relative; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--pk-r-pill); display: inline-grid; place-items: center; vertical-align: middle; background: var(--pk-inset); color: var(--pk-text-2); cursor: help; }
.pk-matrix__group .pk-matrix__lock { background: var(--pk-card); }
.pk-matrix__lock .pk-icon { width: 14px; height: 14px; }
.pk-matrix__on { color: var(--pk-text); vertical-align: middle; }
.pk-matrix__off { color: var(--pk-text-3); }
.pk-matrix__table tbody tr:last-child > :is(th, td) { border-bottom: 0; }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-matrix__table thead th { font-weight: var(--pk-fw-strong); }
@container pk-matrix (max-width: 559px) {
  .pk-matrix__scroll { overflow: visible; }
  .pk-matrix__table, .pk-matrix__table :is(tbody, tr, th, td) { display: block; }
  .pk-matrix__table thead { display: none; }
  .pk-matrix__table tbody { display: grid; gap: var(--pk-space-4); }
  .pk-matrix__table tbody + tbody { margin-top: var(--pk-space-8); }
  .pk-matrix__table tbody tr { padding: var(--pk-space-2) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-inset); }
  .pk-matrix__table tbody tr > :is(th, td) { position: static; width: auto; min-width: 0; padding: 0; border: 0; background: none; text-align: left; }
  .pk-matrix__table tbody tr > :is(th[scope='row'], th[scope='rowgroup']) { padding: var(--pk-space-5) 0 var(--pk-space-4); }
  .pk-matrix__table .pk-matrix__cell { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-space-6); min-height: max(44px, var(--pk-tap)); border-top: 1px solid var(--pk-line); }
  .pk-matrix__cell::before { content: attr(data-label); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-regular); color: var(--pk-text-2); }
  .pk-matrix__cell[data-changed] { margin-inline: calc(-1 * var(--pk-space-7)); padding-inline: var(--pk-space-7); }
  .pk-matrix__cell[data-changed]::after { display: none; }
  .pk-matrix__group { background: var(--pk-inset-2); }
  .pk-matrix__group .pk-matrix__lock { background: var(--pk-inset); }
}

/* copying: an ID with a copy button that shows on hover and focus (always on touch screens); data-copied marks the two seconds
   after a copy, when the button shows its check and the live text says so */
.pk-copyable { display: inline-flex; align-items: center; gap: var(--pk-space-1); max-width: 100%; vertical-align: middle; }
.pk-copyable__btn {
  position: relative; width: 28px; height: 28px; flex: none; padding: 0; border: 0; border-radius: var(--pk-r-pill); display: inline-grid; place-items: center;
  background: transparent; color: var(--pk-text-3); cursor: pointer; opacity: 0; transition: opacity var(--pk-dur-fast) var(--pk-ease), background var(--pk-dur-fast) var(--pk-ease);
}
.pk-copyable__btn .pk-icon { width: 15px; height: 15px; }
.pk-copyable__btn > .pk-icon + .pk-icon, .pk-copyable[data-copied] .pk-copyable__btn > .pk-icon:first-child { display: none; }
.pk-copyable[data-copied] .pk-copyable__btn > .pk-icon + .pk-icon { display: block; }
.pk-copyable:hover .pk-copyable__btn, .pk-copyable__btn:focus-visible, .pk-copyable[data-copied] .pk-copyable__btn { opacity: 1; }
.pk-copyable__btn:hover { background: var(--pk-inset); color: var(--pk-text); }
.pk-copyable[data-copied] .pk-copyable__btn { color: var(--pk-success-text); }
.pk-copyable__done { font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-label); color: var(--pk-success-text); }
.pk-copyable__done:empty { display: none; }
@media (hover: none) {
  .pk-copyable__btn { opacity: 1; }
}
/* a secret: masked to its last four characters until shown; it wraps instead of cutting a key short */
.pk-secret { display: flex; align-items: center; gap: var(--pk-space-2); min-width: 0; padding: var(--pk-space-2) var(--pk-space-2) var(--pk-space-2) var(--pk-space-7); border-radius: var(--pk-r-field); background: var(--pk-inset); }
.pk-secret__value { flex: 1; min-width: 0; padding-block: var(--pk-space-3); font-family: var(--pk-mono); font-size: var(--pk-fs-label); line-height: var(--pk-lh-text); overflow-wrap: anywhere; }
.pk-secret[data-masked] .pk-secret__value { letter-spacing: 0.08em; color: var(--pk-text-2); }
.pk-secret__actions { display: flex; gap: max(var(--pk-space-2), 2 * var(--pk-tap-room)); flex: none; align-self: center; }
/* recovery codes: numbered, two columns; a used code is struck through */
.pk-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-space-5) var(--pk-space-8); margin: 0; padding: var(--pk-space-9) var(--pk-space-10); list-style: none; counter-reset: pk-codes; border-radius: var(--pk-r-inset); background: var(--pk-inset); font-family: var(--pk-mono); font-size: var(--pk-fs-item); }
.pk-codes__item { display: flex; align-items: baseline; gap: var(--pk-space-5); min-width: 0; counter-increment: pk-codes; }
.pk-codes__item::before { content: counter(pk-codes, decimal-leading-zero); font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-codes__item[data-used] { color: var(--pk-text-3); text-decoration: line-through; }

/* touch screens and the phone shell: small parts get the invisible 44px ring, chips grow so stacked rings do not meet */
@media (pointer: coarse), (max-width: 1023px) {
  :is(.pk-picker__remove, .pk-picker__more, .pk-copyable__btn, .pk-matrix__lock, .pk-otp__resend > button)::after { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
  .pk-copyable__btn { opacity: 1; }
  .pk-picker { gap: var(--pk-space-4); }
  .pk-picker__chip { height: 36px; }
  .pk-picker input { align-self: stretch; min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-otp:focus-within .pk-otp__cell[data-active]:empty::after, .pk-otp__status[aria-busy='true'] > .pk-icon, .pk-sso__btn[aria-busy='true']::before { animation: none; }
}
/* ---------- phone patterns ---------- */

/* phone screen: a box that stands in for a phone's window (previews, a phone-sized pane). Fixed layers inside it (scrim, sheets,
   tab bar, action bar, toast) are placed in the box instead of the window (layout containment makes it their containing
   block), the phone parts show at any window width and its body scrolls on its own */
.pk-screen {
  --pk-content-shift: 0px;
  position: relative; container: pk-screen / inline-size; contain: layout; display: grid; grid-template-rows: minmax(0, 1fr); justify-self: center;
  width: min(390px, 100%); height: 720px; overflow: hidden; border: 1px solid var(--pk-line-strong); border-radius: 36px;
  background: var(--pk-canvas); color: var(--pk-text);
}
.pk-screen__body {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: var(--pk-space-7); min-height: 0; padding: 0 var(--pk-space-8) var(--pk-space-14);
  overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--pk-focus-room); scrollbar-width: none;
}
.pk-screen__body::-webkit-scrollbar { display: none; }
.pk-screen:has(:is(.pk-tabbar, .pk-actionbar)) .pk-screen__body { padding-bottom: 120px; }
/* a screen that holds one full-screen part (welcome, lock) gives it the whole height */
.pk-screen__body:has(> .pk-intro:only-child) { align-content: stretch; }
.pk-screen .pk-phone-head { display: flex; }
.pk-screen .pk-tabbar { display: grid; }
.pk-screen .pk-actionbar { display: flex; }
.pk-screen .pk-toast { max-width: calc(100% - 32px); }
.pk-screen:has(:is(.pk-tabbar, .pk-actionbar)) .pk-toast { bottom: 100px; }

/* the dimmed page behind a sheet; a native <dialog> draws it as its backdrop */
.pk-scrim { position: fixed; inset: 0; z-index: 40; background: var(--pk-scrim); }

/* sheet over the screen: fixed to the bottom edge (above the keyboard where the browser reports it), as tall as its content,
   half the screen (data-detent="medium") or all of it under the status bar ("large"). The handle and head drag it
   (--pk-sheet-drag, data-dragging); the body scrolls and the foot keeps the main action. Also styles a native <dialog>, which
   keeps focus inside. From 600px wide, outside a pk-screen, the same sheet opens as a centred pop-up */
.pk-sheet--fixed {
  --pk-sheet-top: calc(48px + env(safe-area-inset-top, 0px));
  position: fixed; inset: auto 0 env(keyboard-inset-height, 0px); z-index: 41; display: flex; flex-direction: column;
  width: auto; max-width: none; height: auto; max-height: calc(100% - var(--pk-sheet-top) - env(keyboard-inset-height, 0px));
  margin: 0; padding: var(--pk-space-4) 0 0; border: 0; overflow: hidden; color: var(--pk-text);
  transform: translateY(var(--pk-sheet-drag, 0px)); transition: transform var(--pk-dur-slow) var(--pk-ease);
}
.pk-sheet--fixed[data-detent='medium'] { height: 50%; }
.pk-sheet--fixed[data-detent='large'] { height: calc(100% - var(--pk-sheet-top) - env(keyboard-inset-height, 0px)); }
.pk-sheet--fixed[data-dragging] { transition: none; }
.pk-sheet--fixed > .pk-sheet__handle { flex: none; margin-bottom: var(--pk-space-3); cursor: grab; touch-action: none; }
.pk-sheet__head { flex: none; display: flex; align-items: center; gap: var(--pk-space-6); padding: var(--pk-space-2) var(--pk-space-8) var(--pk-space-6) var(--pk-space-11); touch-action: none; }
.pk-sheet__head > :is(.pk-h3, .pk-h4) { flex: 1; min-width: 0; }
/* a part that stays while the body scrolls: the search and the chosen chips of a picker */
.pk-sheet__pinned { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-5); padding: 0 var(--pk-space-11) var(--pk-space-6); }
.pk-sheet__body {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: var(--pk-space-7);
  padding: var(--pk-space-1) var(--pk-space-11) var(--pk-space-11); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--pk-focus-room);
}
.pk-sheet__foot { flex: none; display: flex; flex-wrap: wrap; gap: var(--pk-space-5); padding: var(--pk-space-6) var(--pk-space-11) calc(var(--pk-space-6) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pk-line); }
.pk-sheet--fixed > .pk-sheet__body:last-child { padding-bottom: calc(var(--pk-space-11) + env(safe-area-inset-bottom, 0px)); }
/* the body keeps less room at its top than a scrolling list takes out for its rings: a list that leads the body takes out only
   what is there */
.pk-sheet__body > .pk-workspaces:first-child { margin-top: calc(var(--pk-space-1) - var(--pk-focus-room)); }
dialog.pk-sheet--fixed:not([open]) { display: none; }
dialog.pk-sheet--fixed[open] { animation: pk-sheet-up var(--pk-dur-sheet) var(--pk-ease); }
dialog.pk-sheet--fixed[data-closing] { animation: pk-sheet-down var(--pk-dur-base) var(--pk-ease) forwards; }
dialog.pk-sheet--fixed::backdrop { background: var(--pk-scrim); animation: pk-scrim-in 0.24s var(--pk-ease); }
dialog.pk-sheet--fixed[data-closing]::backdrop { animation: pk-scrim-out 0.2s var(--pk-ease) forwards; }
@keyframes pk-sheet-up { from { transform: translateY(100%); } }
@keyframes pk-sheet-down { to { transform: translateY(100%); } }
@keyframes pk-sheet-pop { from { opacity: 0; transform: scale(0.97); } }
@keyframes pk-scrim-in { from { opacity: 0; } }
@keyframes pk-scrim-out { to { opacity: 0; } }

/* action sheet: the ⋮ actions of a row on phones, a destructive one in red, and a separate Vazgeç */
.pk-actionsheet__title { flex: none; padding: var(--pk-space-1) var(--pk-space-12) var(--pk-space-5); text-align: center; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-actionsheet__list { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: var(--pk-space-1); padding: var(--pk-space-2) var(--pk-space-5); overflow-y: auto; scroll-padding-block: var(--pk-focus-room); }
.pk-actionsheet__item {
  display: flex; align-items: center; gap: var(--pk-space-7); width: 100%; min-height: 52px; padding: 0 var(--pk-space-7); border: 0; border-radius: var(--pk-r-field);
  background: transparent; font: inherit; font-size: var(--pk-fs-lead); font-weight: var(--pk-fw-medium); color: var(--pk-text); text-align: left; cursor: pointer;
}
.pk-actionsheet__item > .pk-icon { color: var(--pk-text-2); }
.pk-actionsheet__item--danger, .pk-actionsheet__item--danger > .pk-icon { color: var(--pk-danger-text); }
.pk-actionsheet__cancel {
  flex: none; height: 52px; margin: var(--pk-space-3) var(--pk-space-5) calc(var(--pk-space-6) + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: var(--pk-r-control);
  background: var(--pk-inset); font: inherit; font-size: var(--pk-fs-lead); font-weight: var(--pk-fw-strong); color: var(--pk-text); cursor: pointer;
}
.pk-actionsheet__item:active { background: var(--pk-inset); }
.pk-actionsheet__cancel:active { background: var(--pk-inset-2); }
@media (hover: hover) {
  .pk-actionsheet__item:hover { background: var(--pk-inset); }
  .pk-actionsheet__cancel:hover { background: var(--pk-inset-2); }
}

@media (min-width: 600px) {
  .pk-sheet--fixed:not(.pk-screen *) {
    inset: 0; width: min(520px, 100% - 32px); height: fit-content; max-height: min(760px, 100% - 48px); margin: auto; padding-top: var(--pk-space-7);
    border-radius: var(--pk-r-card); transform: none;
  }
  .pk-actionsheet:not(.pk-screen *) { width: min(380px, 100% - 32px); }
  .pk-sheet--fixed:not(.pk-screen *) > .pk-sheet__handle { display: none; }
  dialog.pk-sheet--fixed[open]:not(.pk-screen *) { animation-name: pk-sheet-pop; }
  dialog.pk-sheet--fixed[data-closing]:not(.pk-screen *) { animation-name: pk-scrim-out; }
}

/* phone menu list ("Diğer", profile and settings screens): captioned groups of rows. A row is a link or button (a label when it
   holds a switch, so the whole row flips it) with an icon disc, a title and sub line, and a value, switch, pill or chevron at the
   end; it shows a pressed state rather than hover on touch. From 1024px the same rows make a compact card list */
.pk-menulist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-11); }
.pk-menulist__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-4); min-width: 0; }
.pk-menulist__caption { margin: 0; padding: 0 var(--pk-space-8); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-medium); color: var(--pk-text-3); }
.pk-menulist__items { display: grid; overflow: hidden; border-radius: var(--pk-r-panel); background: var(--pk-card); }
:is(.pk-card, .pk-sheet, .pk-menu, .pk-pop) .pk-menulist__items { background: var(--pk-inset); }
.pk-menulist__note { padding: 0 var(--pk-space-8); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-menulist__item {
  position: relative; display: flex; align-items: center; gap: var(--pk-space-7); width: 100%; min-height: max(calc(var(--pk-size-btn) + 8px), var(--pk-tap) + 8px);
  padding: var(--pk-space-4) var(--pk-space-8); border: 0; background: transparent; font: inherit; color: var(--pk-text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pk-menulist__item + .pk-menulist__item::before { content: ''; position: absolute; top: 0; right: 0; left: var(--pk-space-8); height: 1px; background: var(--pk-line); }
.pk-menulist__item:has(> .pk-menulist__icon) + .pk-menulist__item:has(> .pk-menulist__icon)::before { left: 66px; }
.pk-menulist__item:focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
.pk-menulist__item:not([aria-disabled='true']):active { background: color-mix(in srgb, var(--pk-text) 8%, transparent); }
@media (hover: hover) {
  .pk-menulist__item:is(a[href], button, label):not([aria-disabled='true']):hover { background: color-mix(in srgb, var(--pk-text) 4%, transparent); }
}
.pk-menulist__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--pk-r-pill); background: var(--pk-inset); color: var(--pk-text); }
:is(.pk-card, .pk-sheet, .pk-menu, .pk-pop) .pk-menulist__icon { background: var(--pk-card); }
.pk-menulist__icon .pk-icon { width: 18px; height: 18px; }
.pk-menulist__body { flex: 1; min-width: 0; display: grid; }
.pk-menulist__title { font-size: var(--pk-fs-nav); font-weight: var(--pk-fw-medium); line-height: var(--pk-lh-compact); }
.pk-menulist__sub { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-menulist__value { flex: 0 1 auto; min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pk-fs-item); color: var(--pk-text-3); }
.pk-menulist__chevron { flex: none; width: 18px; height: 18px; margin-right: calc(-1 * var(--pk-space-2)); color: var(--pk-text-3); }
.pk-menulist__item--account { padding-block: var(--pk-space-6); }
.pk-menulist__item--account .pk-menulist__title { font-size: var(--pk-fs-title); font-weight: var(--pk-fw-strong); }
.pk-menulist__item--danger { color: var(--pk-danger-text); }
.pk-menulist__item--danger .pk-menulist__icon { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-menulist__item[aria-disabled='true'] { cursor: default; }
.pk-menulist__item[aria-disabled='true'] :is(.pk-menulist__title, .pk-menulist__icon) { color: var(--pk-text-3); }
/* card-coloured blocks on the page take the hairline of the theme's other panels; an outline stays above the rows' fills */
:where([data-theme='corporate'], [data-theme='portal']) .pk-menulist__items { outline: 1px solid var(--pk-line); outline-offset: -1px; }
:where([data-theme='technical']) .pk-menulist__items { outline: 1px solid var(--pk-line-strong); outline-offset: -1px; }

/* swipe actions on a phone row: one to three behind the row (the first runs on a full swipe), shown while the row is dragged
   (--pk-swipe-x, data-dragging) or open (data-open="end" | "start" | "full"). The same actions are in the row's ⋮ menu for
   keyboards and screen readers */
.pk-swipe { --pk-swipe-w: 76px; position: relative; overflow: hidden; border-radius: var(--pk-r-tile); touch-action: pan-y; }
.pk-swipe:has(> .pk-swipe__actions:not(.pk-swipe__actions--start) > :nth-child(2)) { --pk-swipe-n: 2; }
.pk-swipe:has(> .pk-swipe__actions:not(.pk-swipe__actions--start) > :nth-child(3)) { --pk-swipe-n: 3; }
.pk-swipe:has(> .pk-swipe__actions--start > :nth-child(2)) { --pk-swipe-n-start: 2; }
.pk-swipe__content { position: relative; z-index: 1; transform: translateX(var(--pk-swipe-x, 0px)); transition: transform var(--pk-dur-slow) var(--pk-ease); }
.pk-swipe[data-dragging] > .pk-swipe__content { transition: none; }
.pk-swipe[data-open='end'] > .pk-swipe__content { --pk-swipe-x: calc(-1 * var(--pk-swipe-w) * var(--pk-swipe-n, 1)); }
.pk-swipe[data-open='start'] > .pk-swipe__content { --pk-swipe-x: calc(var(--pk-swipe-w) * var(--pk-swipe-n-start, 1)); }
.pk-swipe[data-open='full'] > .pk-swipe__content { --pk-swipe-x: -100%; }
.pk-swipe__actions { position: absolute; inset: 0; display: flex; justify-content: flex-end; }
.pk-swipe__actions--start { justify-content: flex-start; }
/* hidden actions are out of the tab order too */
.pk-swipe:not([data-open='end'], [data-open='full'], [data-dragging]) > .pk-swipe__actions:not(.pk-swipe__actions--start),
.pk-swipe:not([data-open='start'], [data-dragging]) > .pk-swipe__actions--start { visibility: hidden; }
.pk-swipe[data-open='full'] > .pk-swipe__actions > :first-child { flex: 1; }
.pk-swipe[data-open='full'] > .pk-swipe__actions > :not(:first-child) { display: none; }
.pk-swipe__action {
  width: var(--pk-swipe-w); flex: none; display: grid; place-content: center; justify-items: center; gap: var(--pk-space-2); padding: 0 var(--pk-space-2); border: 0;
  background: var(--pk-inset-2); color: var(--pk-text); font: inherit; font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); cursor: pointer;
}
/* the row clips what leaves it, so its parts draw their rings inside; an action's ring is in its text colour, on its own fill */
.pk-swipe__content > :focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
.pk-swipe__action { --pk-focus-outline: 2px solid currentColor; }
.pk-swipe__action:focus-visible { outline-offset: calc(-1 * var(--pk-focus-room)); }
.pk-swipe__action--primary { background: var(--pk-primary); color: var(--pk-on-primary); }
.pk-swipe__action--danger { background: var(--pk-danger); color: var(--pk-on-danger); }

/* pull to refresh at the top of a phone list: pulling (its height follows the finger, --pk-refresh-h), ready, refreshing, done */
.pk-refresh {
  display: flex; align-items: center; justify-content: center; gap: var(--pk-space-5); height: var(--pk-refresh-h, 56px); overflow: hidden;
  font-size: var(--pk-fs-meta); color: var(--pk-text-2); transition: height var(--pk-dur-base) var(--pk-ease);
}
.pk-refresh[data-state='idle'] { --pk-refresh-h: 0px; }
.pk-refresh[data-dragging] { transition: none; }
.pk-refresh__icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: var(--pk-r-pill); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-raise-shadow); }
.pk-refresh__icon .pk-icon { width: 18px; height: 18px; transition: transform var(--pk-dur-fast) var(--pk-ease); }
.pk-refresh[data-state='ready'] .pk-refresh__icon .pk-icon { transform: rotate(180deg); }
.pk-refresh[data-state='refreshing'] .pk-refresh__icon .pk-icon { animation: pk-spin 0.8s linear infinite; }
.pk-refresh[data-state='done'] .pk-refresh__icon { background: var(--pk-success-soft); color: var(--pk-success-text); box-shadow: none; }
:where([data-theme='corporate'], [data-theme='portal']) .pk-refresh__icon { box-shadow: var(--pk-ring); }
:where([data-theme='technical']) .pk-refresh__icon { box-shadow: var(--pk-ring-strong); }

/* welcome and permission screens of a phone app: a mark, a title, one sentence, then the permissions with their reasons or the
   steps to follow; the main action sits in the action bar. No illustrations */
.pk-intro { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: var(--pk-space-5); min-height: 100%; padding: var(--pk-space-12) var(--pk-space-2); text-align: center; }
.pk-intro__mark { width: 72px; height: 72px; margin-bottom: var(--pk-space-5); display: grid; place-items: center; border-radius: var(--pk-r-pill); background: var(--pk-card); color: var(--pk-text); }
.pk-intro__mark .pk-icon { width: 30px; height: 30px; stroke-width: 1.6; }
.pk-intro__text { max-width: 36ch; font-size: var(--pk-fs-item); color: var(--pk-text-2); }
.pk-intro__perms, .pk-intro__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-4); width: 100%; margin: var(--pk-space-7) 0 0; padding: 0; list-style: none; text-align: left; }
.pk-intro__perm, .pk-intro__step { display: flex; align-items: center; gap: var(--pk-space-7); min-width: 0; padding: var(--pk-space-7) var(--pk-space-8); border-radius: var(--pk-r-tile); background: var(--pk-card); }
.pk-intro__perm > .pk-disc { align-self: flex-start; }
.pk-intro__body { flex: 1; min-width: 0; display: grid; gap: var(--pk-space-1); }
.pk-intro__name { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); }
.pk-intro__why { font-size: var(--pk-fs-label); color: var(--pk-text-2); }
.pk-intro__state { flex: none; font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-intro__steps { counter-reset: pk-intro-step; }
.pk-intro__step { counter-increment: pk-intro-step; font-size: var(--pk-fs-item); }
.pk-intro__step::before {
  content: counter(pk-intro-step); width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--pk-r-pill);
  background: var(--pk-inset); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-bold); font-variant-numeric: tabular-nums;
}
.pk-intro__step .pk-icon { display: inline-block; width: 18px; height: 18px; margin-inline: var(--pk-space-1); vertical-align: -4px; }
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-intro__mark, .pk-intro__perm, .pk-intro__step) { box-shadow: var(--pk-ring); }
:where([data-theme='technical']) :is(.pk-intro__mark, .pk-intro__perm, .pk-intro__step) { box-shadow: var(--pk-ring-strong); }

/* large title of a phone list screen: it scrolls under the head, which then shows the short title (the page sets data-collapsed
   once the title has passed under the head); the segments in pk-phone-head__tabs stay under the head. Phone shell and pk-screen
   only, desktop keeps pk-header. The head's height follows the theme's head padding (18px, Kurumsal 24px) */
.pk-largetitle, .pk-phone-head__tabs { display: none; }
@media (max-width: 1023px) {
  .pk-largetitle { display: grid; }
  .pk-phone-head__tabs { display: block; }
}
.pk-screen .pk-largetitle { display: grid; }
.pk-screen .pk-phone-head__tabs { display: block; }
:is(.pk-phone-head, .pk-phone-head__tabs) { --pk-head-h: calc(max(40px, var(--pk-h-btn)) + 18px); }
:is([data-theme='corporate'], [data-theme='portal']) :is(.pk-phone-head, .pk-phone-head__tabs) { --pk-head-h: calc(max(40px, var(--pk-h-btn)) + 24px); }
.pk-largetitle { grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); padding: var(--pk-space-2) var(--pk-space-1) var(--pk-space-1); }
.pk-largetitle__title { font-size: min(var(--pk-fs-h1), 34px); }
.pk-phone-head:has(~ .pk-largetitle) { position: sticky; top: 0; z-index: 5; height: var(--pk-head-h); margin-inline: calc(-1 * var(--pk-space-8)); padding-inline: var(--pk-space-9); background: var(--pk-canvas); }
.pk-phone-head:has(~ .pk-largetitle) .pk-phone-head__title { opacity: 0; transition: opacity var(--pk-dur-fast) var(--pk-ease); }
.pk-phone-head:has(~ .pk-largetitle[data-collapsed]) .pk-phone-head__title { opacity: 1; }
.pk-phone-head__tabs { position: sticky; top: var(--pk-head-h); z-index: 4; margin-inline: calc(-1 * var(--pk-space-8)); padding: var(--pk-space-4) var(--pk-space-8); background: var(--pk-canvas); }
.pk-phone-head__tabs > :is(.pk-seg, .pk-tabs) { display: flex; width: 100%; }
.pk-phone-head__tabs .pk-seg__item { flex: 1; }
:is([data-theme='corporate'], [data-theme='portal']) .pk-phone-head__tabs { background: var(--pk-card); box-shadow: var(--pk-edge-bottom); }

/* the screens of a phone app laid side by side for review, each with a caption under it */
.pk-screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--pk-space-18) var(--pk-space-12); }
.pk-screens__item { display: grid; justify-items: center; align-content: start; gap: var(--pk-space-7); min-width: 0; margin: 0; }
.pk-screens__caption { display: grid; gap: var(--pk-space-1); max-width: 340px; font-size: var(--pk-fs-label); color: var(--pk-text-2); text-align: center; text-wrap: balance; }
.pk-screens__caption > b { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); color: var(--pk-text); }

@media (prefers-reduced-motion: reduce) {
  .pk-refresh[data-state='refreshing'] .pk-refresh__icon .pk-icon { animation: none; }
}
/* ---------- page states ---------- */
/* a screen of its own: not found, no access, server error, maintenance, offline, an expired link or session. Straight in <body> it
   fills the window inside the safe areas; as the content of the shell (pk-main) it fills what the menu, the phone head and the
   tab bar leave. The code line is a pk-hero, so it takes the theme's figure type */
.pk-empty--page { width: 100%; align-content: center; gap: var(--pk-space-6); padding: var(--pk-space-24) var(--pk-space-10); container: pk-state / inline-size; }
body > .pk-empty--page {
  min-height: 100dvh;
  padding: max(var(--pk-space-20), env(safe-area-inset-top)) max(var(--pk-space-10), env(safe-area-inset-right)) max(var(--pk-space-20), env(safe-area-inset-bottom)) max(var(--pk-space-10), env(safe-area-inset-left));
}
.pk-main:has(> .pk-empty--page) { display: flex; flex-direction: column; }
.pk-main > .pk-empty--page { flex: 1; }
.pk-empty--page > .pk-brand { padding: 0 0 var(--pk-space-8); }
.pk-empty__code { margin-bottom: var(--pk-space-3); }
.pk-empty--page .pk-empty__icon { width: 64px; height: 64px; margin-bottom: var(--pk-space-4); }
.pk-empty--page .pk-empty__icon .pk-icon { width: 28px; height: 28px; }
.pk-empty--page .pk-empty__text { max-width: 460px; font-size: var(--pk-fs-item); line-height: var(--pk-lh-relaxed); }
.pk-empty--warning .pk-empty__icon { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pk-space-5); margin-top: var(--pk-space-6); }
.pk-empty__actions .pk-btn { margin-top: 0; }
/* the signed-in account, a time window or a code to copy sit between the text and the actions */
.pk-empty--page > :is(.pk-person, .pk-copy, .pk-split) { max-width: 100%; margin-top: var(--pk-space-2); }
.pk-empty--page > .pk-split { min-width: min(320px, 100%); text-align: left; }
@container pk-state (max-width: 479px) {
  .pk-empty__actions { flex-direction: column; justify-self: stretch; }
}

/* ---------- loading ---------- */
/* placeholder shapes where content will appear; a text line is the base 14px bar with a pk-w width */
.pk-skeleton--title { height: calc(var(--pk-fs-h3) * 1.1); border-radius: var(--pk-r-sm); }
.pk-skeleton--figure { width: 40%; height: calc(var(--pk-fs-hero-sm) * var(--pk-hero-k)); border-radius: var(--pk-r-sm); }
.pk-skeleton--circle { width: 40px; height: 40px; flex: none; border-radius: var(--pk-r-pill); }
.pk-skeleton--block { height: auto; aspect-ratio: 4 / 3; border-radius: var(--pk-r-tile); }
/* a whole row or a calendar event */
.pk-skeleton--row { height: 52px; border-radius: var(--pk-r-xs); }
.pk-skeleton--btn { width: 112px; height: var(--pk-h-btn); flex: none; border-radius: var(--pk-r-control); }
.pk-skeleton--chip { width: 88px; height: var(--pk-h-chip); flex: none; border-radius: var(--pk-r-control); }
.pk-skeleton + :is(.pk-skeleton--title, .pk-skeleton--figure, .pk-skeleton--block, .pk-skeleton--row), :is(.pk-skeleton--title, .pk-skeleton--figure) + .pk-skeleton { margin-top: var(--pk-space-6); }
/* shapes side by side are not lines of one text */
:is(.pk-row, .pk-tile, .pk-list__item, .pk-agenda__row, .pk-field, .pk-kpi, .pk-kpi__foot) > .pk-skeleton { margin-top: 0; }
.pk-agenda__time > .pk-skeleton { width: 36px; margin-top: var(--pk-space-1); }

/* spinner: the busy button's turning arc on its own, in the text colour; give it role="status" and a label, or hide it next to
   a visible label */
.pk-spinner { display: inline-block; width: 20px; height: 20px; flex: none; border-radius: var(--pk-r-pill); border: 2px solid currentColor; border-right-color: transparent; animation: pk-spin var(--pk-dur-spin) linear infinite; }
.pk-spinner--sm { width: 16px; height: 16px; }
.pk-spinner--lg { width: 32px; height: 32px; border-width: 3px; }

/* "Yükleniyor…" in place of a list, and "Daha fazla yükleniyor" at its end */
.pk-loading { display: flex; align-items: center; justify-content: center; gap: var(--pk-space-5); min-height: 44px; padding: var(--pk-space-5) var(--pk-space-6); font-size: var(--pk-fs-small); color: var(--pk-text-2); }
/* a view that reloads keeps its old content under a see-through veil, its label staying in sight while the view scrolls by;
   mark the view aria-busy="true" */
:has(> .pk-veil) { position: relative; }
.pk-veil { position: absolute; inset: 0; z-index: 4; display: flex; justify-content: center; align-items: center; padding: var(--pk-space-6); border-radius: inherit; background: color-mix(in srgb, var(--pk-card) 62%, transparent); }
.pk-veil > .pk-loading { position: sticky; top: var(--pk-space-8); bottom: var(--pk-space-8); padding: var(--pk-space-4) var(--pk-space-9) var(--pk-space-4) var(--pk-space-7); border-radius: var(--pk-r-control); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-float-shadow); }

/* ---------- long jobs ---------- */
/* an export, an import, a bulk send or a device update: what runs, how far, what is left and its controls. A tile inside a card,
   pk-job--row in the notification list. The bar fills in the primary colour; done, failed and paused change it */
.pk-job { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-5); min-width: 0; padding: var(--pk-space-7) var(--pk-space-8); border-radius: var(--pk-r-tile); background: var(--pk-inset); }
.pk-job__head { display: flex; align-items: center; gap: var(--pk-space-6); min-width: 0; }
.pk-job__body { flex: 1; min-width: 0; }
.pk-job__title { display: block; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-compact); }
.pk-job__sub { display: block; margin-top: 1px; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-job__pct { flex: none; font-family: var(--pk-font-figures); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; }
.pk-job:not(.pk-job--row) :is(.pk-disc, .pk-btn--soft) { background: var(--pk-card); }
.pk-job__bar { background: var(--pk-card); }
.pk-job__bar > i { background: var(--pk-primary); }
.pk-job__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3) var(--pk-space-7); min-height: var(--pk-h-btn-sm); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-job__actions { display: flex; flex-wrap: wrap; gap: max(var(--pk-space-4), 2 * var(--pk-tap-room)); margin-left: auto; }
.pk-job--done .pk-job__bar > i { background: var(--pk-success); }
.pk-job--paused .pk-job__bar > i { background: var(--pk-text-3); }
.pk-job--error { background: var(--pk-danger-soft); }
.pk-job--error .pk-job__meta { color: var(--pk-danger-text); }
/* in the notification list: no tile, the bar and the line under the text */
.pk-job--row { gap: var(--pk-space-4); padding: var(--pk-space-5); border-radius: var(--pk-r-field); background: transparent; }
.pk-job--row > :not(.pk-job__head) { margin-left: 52px; }
.pk-job--row .pk-job__bar { height: 6px; background: var(--pk-inset-2); }
.pk-job--row .pk-job__meta { min-height: 0; }

/* a bar that knows no end: a segment runs along the track; with reduced motion it stands still as a hatch */
.pk-progress--indeterminate > i { width: 40%; animation: pk-indeterminate 1.5s var(--pk-ease) infinite; }
@keyframes pk-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- toast extras ---------- */
/* a message with an action (Geri al, Görüntüle) and an undo timer, a close button, a tone icon. Its text wraps, so the corners stop
   at 22px: a one-line toast still reads as a pill */
.pk-toast:has(> .pk-toast__text) { max-width: min(460px, 100vw - 32px - 2 * var(--pk-content-shift, 0px)); border-radius: min(var(--pk-r-control), 22px); }
.pk-toast__text { flex: 1; min-width: 0; line-height: var(--pk-lh-text); }
.pk-toast:has(> :is(.pk-toast__action, .pk-toast__close)) { padding: var(--pk-space-3) var(--pk-space-3) var(--pk-space-3) var(--pk-space-9); }
.pk-toast:has(> :is(.pk-toast__action, .pk-toast__close)) > .pk-toast__text { padding-block: var(--pk-space-3); }
.pk-toast__action {
  display: inline-flex; align-items: center; gap: var(--pk-space-4); flex: none; height: 32px; padding: 0 var(--pk-space-6); border: 0; border-radius: var(--pk-r-control);
  background: var(--pk-dark-inset); color: var(--pk-on-dark); font: inherit; font-weight: var(--pk-fw-strong); white-space: nowrap; cursor: pointer;
}
.pk-toast__action:hover { background: color-mix(in srgb, var(--pk-on-dark) 20%, transparent); }
.pk-toast__close { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--pk-r-control); background: transparent; color: var(--pk-on-dark-2); cursor: pointer; }
.pk-toast__close:hover { background: var(--pk-dark-inset); color: var(--pk-on-dark); }
.pk-toast :is(.pk-toast__action, .pk-toast__close) .pk-icon { color: inherit; }
/* undo timer: the ring empties over --pk-toast-time (the app removes the toast then); with reduced motion it stays full */
.pk-toast__timer { width: 18px; height: 18px; flex: none; border-radius: var(--pk-r-pill); box-shadow: inset 0 0 0 2px var(--pk-dark-inset); transform: rotate(-90deg); }
.pk-toast__timer circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 100; animation: pk-toast-timer var(--pk-toast-time, 5s) linear forwards; }
@keyframes pk-toast-timer { to { stroke-dashoffset: 100; } }
/* tone icons, lighter in dark mode, where the toast lifts */
.pk-toast--success > .pk-icon { color: light-dark(var(--pk-success), var(--pk-success-text)); }
.pk-toast--warning > .pk-icon { color: light-dark(var(--pk-warning), var(--pk-warning-text)); }
.pk-toast--info > .pk-icon { color: var(--pk-on-dark); }

/* stack: at most three, the newest at the bottom. Placed at page level (body, shell or content) it floats where a single toast
   does, centred on the content and above the phone bars; anywhere else it is a plain column */
.pk-toasts { display: grid; justify-items: center; gap: var(--pk-space-4); }
:is(body, .pk-app, .pk-main) > .pk-toasts {
  position: fixed; z-index: 30; left: calc(50% + var(--pk-content-shift, 0px)); bottom: calc(var(--pk-space-12) + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: calc(100vw - 32px - 2 * var(--pk-content-shift, 0px)); transform: translateX(-50%); pointer-events: none;
}
.pk-toasts > .pk-toast { position: static; transform: none; opacity: 1; pointer-events: auto; touch-action: pan-y; animation: pk-toast-in var(--pk-dur-base) var(--pk-ease); }
.pk-toasts > .pk-toast:nth-last-child(n + 4) { display: none; }
@keyframes pk-toast-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 1023px) {
  .pk:has(.pk-app :is(.pk-tabbar, .pk-actionbar)) :is(body, .pk-app, .pk-main) > .pk-toasts { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- system bars ---------- */
/* news for the whole app, above every page: the first part of pk-main, under the phone head on phones. One line; a long text ends
   in an ellipsis and "Daha fazla" (aria-expanded) opens it. Tone: none for an announcement, warning for maintenance, danger,
   success when the connection is back, ink for a lasting mode (offline, viewing as someone else) */
.pk-sysbar {
  --pk-sysbar-bg: var(--pk-card);
  display: flex; align-items: center; gap: var(--pk-space-5); min-width: 0; min-height: 44px; padding: 5px var(--pk-space-3) 5px var(--pk-space-8); container: pk-sysbar / inline-size;
  border-radius: min(var(--pk-r-control), 22px); background: var(--pk-sysbar-bg); color: var(--pk-text); font-size: var(--pk-fs-small);
}
.pk-sysbar > .pk-icon { color: var(--pk-text-2); }
.pk-sysbar > .pk-avatar { width: 28px; height: 28px; font-size: var(--pk-fs-tiny); }
/* one line on a wide screen; on a narrow one two lines, so a message is read and not guessed. The space around is a margin:
   a clamp clips at the padding edge, so padding would show the top of the third line */
.pk-sysbar__text { flex: 1; min-width: 0; margin-block: 7px; line-height: var(--pk-lh-cozy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023px) {
  .pk-sysbar__text { white-space: normal; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
.pk-sysbar__text b { font-weight: var(--pk-fw-strong); }
.pk-sysbar .pk-btn { flex: none; }
.pk-sysbar__more, .pk-sysbar__close {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-space-2); flex: none; height: 32px; border: 0; border-radius: var(--pk-r-control);
  background: transparent; color: inherit; font: inherit; font-weight: var(--pk-fw-strong); cursor: pointer;
}
.pk-sysbar__more { padding: 0 var(--pk-space-3) 0 var(--pk-space-5); }
.pk-sysbar__close { width: 32px; padding: 0; }
.pk-sysbar :is(.pk-sysbar__more, .pk-sysbar__close):hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.pk-sysbar__more .pk-icon { width: 16px; height: 16px; transition: transform var(--pk-dur-fast) var(--pk-ease); }
.pk-sysbar:has(.pk-sysbar__more[aria-expanded='true']) { align-items: flex-start; }
.pk-sysbar:has(.pk-sysbar__more[aria-expanded='true']) .pk-sysbar__text { display: block; white-space: normal; -webkit-line-clamp: none; line-clamp: none; }
.pk-sysbar:has(.pk-sysbar__more[aria-expanded='true']) > :is(.pk-icon, .pk-avatar) { margin-top: 7px; }
.pk-sysbar:has(.pk-sysbar__more[aria-expanded='true']) > :is(.pk-avatar) { margin-top: 3px; }
.pk-sysbar__more[aria-expanded='true'] .pk-icon { transform: rotate(180deg); }
/* on a narrow bar "Daha fazla" keeps its name for screen readers and shows the chevron only */
@container pk-sysbar (max-width: 479px) {
  .pk-sysbar__more { width: 32px; padding: 0; }
  .pk-sysbar__more > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.pk-sysbar :is(.pk-btn--soft) { background: var(--pk-inset); }
.pk-sysbar--warning { --pk-sysbar-bg: var(--pk-warning-soft); }
.pk-sysbar--warning > .pk-icon { color: var(--pk-warning-text); }
.pk-sysbar--danger { --pk-sysbar-bg: var(--pk-danger-soft); }
.pk-sysbar--danger > .pk-icon { color: var(--pk-danger-text); }
.pk-sysbar--success { --pk-sysbar-bg: var(--pk-success-soft); }
.pk-sysbar--success > .pk-icon { color: var(--pk-success-text); }
:is(.pk-sysbar--warning, .pk-sysbar--danger, .pk-sysbar--success) .pk-btn--soft { background: var(--pk-card); }
.pk-sysbar--ink { --pk-sysbar-bg: var(--pk-dark); color: var(--pk-on-dark); }
.pk-sysbar--ink > .pk-icon { color: var(--pk-on-dark); }
/* plain-surface themes: the announcement bar on a card-coloured page needs its edge */
:is([data-theme='corporate'], [data-theme='portal']) .pk-sysbar:not(.pk-sysbar--warning, .pk-sysbar--danger, .pk-sysbar--success, .pk-sysbar--ink) { box-shadow: var(--pk-ring-strong); }
[data-theme='technical'] .pk-sysbar:not(.pk-sysbar--warning, .pk-sysbar--danger, .pk-sysbar--success, .pk-sysbar--ink) { box-shadow: var(--pk-ring-strong); }
/* corporate docks its bars: under the phone head the bar runs to the screen edges, and in the shell from 1024px it is a band at
   the top of the content that runs to the window edge like the header band under it (the view-as bar stays at the bottom) */
:is([data-theme='corporate'], [data-theme='portal']) .pk-phone-head + .pk-sysbar { margin-inline: calc(-1 * var(--pk-space-8)); padding-left: var(--pk-space-8); border-radius: 0; box-shadow: var(--pk-edge-top), var(--pk-edge-bottom); }
@media (min-width: 1024px) {
  [data-theme='corporate'] .pk-main > .pk-sysbar:not(.pk-sysbar--bottom) { position: relative; margin: 0 calc(-1 * var(--pk-space-12)); padding-inline: var(--pk-space-12) var(--pk-space-9); border-radius: 0; background: transparent; box-shadow: none; }
  [data-theme='corporate'] .pk-main > .pk-sysbar:not(.pk-sysbar--bottom)::before { content: ''; position: absolute; z-index: -1; inset: 0 -100vmax; background: var(--pk-sysbar-bg); box-shadow: var(--pk-edge-bottom); }
}

/* ---------- dangerous actions ---------- */
/* danger zone: the last block of a settings page, framed by a faint danger hairline. Its rows are pk-setting rows (what the action
   does and what is lost) acting in danger soft buttons, never in the primary colour */
.pk-card.pk-danger { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-danger) 45%, transparent); }
/* what will be lost, as a list in the danger zone or the confirmation */
.pk-danger__list { display: grid; gap: var(--pk-space-4); margin: 0; padding: var(--pk-space-6) var(--pk-space-7); list-style: none; border-radius: var(--pk-r-tile); background: var(--pk-inset); font-size: var(--pk-fs-small); }
.pk-danger__list li { display: flex; align-items: flex-start; gap: var(--pk-space-5); }
.pk-danger__list .pk-icon { width: 18px; height: 18px; margin-top: 1px; color: var(--pk-text-2); }
/* confirmation: the dangerous button stands away from the primary action's place (left in a row, on top when the buttons stack),
   the safe one where the primary usually is. Works on a pk-dialog and on a pk-sheet; a native <dialog> is a bottom sheet on phones */
.pk-dialog--danger { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-9); container: pk-confirm / inline-size; }
.pk-dialog--danger .pk-dialog__head { align-items: center; }
.pk-dialog--danger .pk-dialog__foot > .pk-btn--danger { margin-right: auto; }
:is(.pk-dialog--danger, .pk-danger) .pk-btn:disabled { background: var(--pk-inset); color: var(--pk-text-3); cursor: not-allowed; }
.pk-sheet.pk-dialog--danger > .pk-sheet__handle { margin-bottom: calc(-1 * var(--pk-space-2)); }
@container pk-confirm (max-width: 459px) {
  .pk-dialog--danger .pk-dialog__foot { flex-direction: column; align-items: stretch; }
  .pk-dialog--danger .pk-dialog__foot > .pk-btn--danger { margin-right: 0; }
}
@media (max-width: 599px) {
  dialog.pk-dialog--danger {
    position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: 92dvh; margin: 0; overflow-y: auto;
    padding-bottom: calc(var(--pk-space-12) + env(safe-area-inset-bottom, 0px)); border-radius: var(--pk-r-card) var(--pk-r-card) 0 0;
  }
}

/* ---------- touch and motion ---------- */
@media (pointer: coarse), (max-width: 1023px) {
  :is(.pk-toast__action, .pk-toast__close, .pk-sysbar__more, .pk-sysbar__close) { position: relative; }
  :is(.pk-toast__action, .pk-toast__close, .pk-sysbar__more, .pk-sysbar__close)::after { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .pk-skeleton, .pk-spinner, .pk-toasts > .pk-toast, .pk-toast__timer circle { animation: none; }
  .pk-progress--indeterminate > i {
    width: 100%; animation: none;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 30%, transparent) 0 2px, transparent 2px 7px), var(--pk-inset-2);
  }
}
/* ---------- list and detail panes ---------- */
/* a list that scrolls on its own beside the open item (inbox and conversation, approvals and the request, documents and the
   preview), and an info column on wide content. Each pane is a pk-card with a head, a scrolling body and a foot. In the shell the
   panes fill the window under the page header; anywhere else they are --pk-panes-h tall. Under 640px of panes one pane shows at a
   time: the list, or with data-open the detail and its back button. Under 1100px the info column opens over the detail
   (data-aside) */
.pk-panes {
  --pk-panes-h: min(720px, 100dvh - 32px);
  position: relative; display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  grid-auto-columns: minmax(260px, 320px); gap: var(--pk-gap); height: var(--pk-panes-h); min-width: 0; container: pk-panes / inline-size;
}
.pk-main:has(> .pk-panes) { display: flex; flex-direction: column; height: calc(100dvh - 2 * var(--pk-app-gap)); }
.pk-main > .pk-panes { flex: 1 1 0; height: auto; min-height: 0; }
@media (max-width: 1023px) {
  .pk-main:has(> .pk-panes) { height: calc(100dvh - 120px - env(safe-area-inset-bottom, 0px)); }
}
.pk-panes__list, .pk-panes__detail, .pk-panes__aside { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; padding: 0; overflow: hidden; }
.pk-panes__list { grid-column: 1; }
.pk-panes__detail { grid-column: 2; }
.pk-panes__aside { grid-column: 3; display: none; }
.pk-panes__head { grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-5); min-width: 0; min-height: 68px; padding: var(--pk-space-6) var(--pk-space-7) var(--pk-space-6) var(--pk-space-9); border-bottom: 1px solid var(--pk-line); }
.pk-panes__head > .pk-search { flex: 1 1 100%; min-width: 0; }
/* the title keeps 8em; when the head's actions leave less, they wrap under it */
.pk-panes__title { flex: 1 1 8em; min-width: 0; }
.pk-panes__name { display: block; margin: 0; font-size: var(--pk-fs-lead); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-title); }
.pk-panes__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-1) var(--pk-space-4); margin-top: var(--pk-space-1); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
/* a row scrolled into view by the keyboard comes with room for its ring */
.pk-panes__scroll { grid-row: 2; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--pk-focus-room); }
/* a conversation opens at its newest message and sits on the foot while it is short */
.pk-panes__scroll:has(> .pk-thread) { display: flex; flex-direction: column-reverse; }
.pk-panes__list > .pk-panes__scroll { padding: var(--pk-space-4); }
.pk-panes__aside > .pk-panes__scroll { display: grid; align-content: start; gap: var(--pk-space-8); padding: var(--pk-space-9); }
/* a detail that is a record, not a conversation: its parts stacked with the pane's padding */
.pk-panes__body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--pk-space-9); padding: var(--pk-space-9) var(--pk-space-10) var(--pk-space-11); }
.pk-panes__foot { grid-row: 3; display: grid; gap: var(--pk-space-5); padding: var(--pk-space-6); border-top: 1px solid var(--pk-line); }
/* nothing open yet */
.pk-panes__detail > .pk-empty { grid-row: 1 / -1; align-content: center; }
.pk-panes__back { display: none; }
/* the open item takes the theme's current style; its text takes the current ink at full strength */
.pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true']) { background: var(--pk-current); color: var(--pk-on-current); }
.pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true']) :is(.pk-inbox__preview, .pk-inbox__meta, .pk-inbox__time, .pk-list__meta, .pk-meta, .pk-channel) { color: inherit; }
.pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true'])[data-unread] .pk-inbox__name::before { background: var(--pk-current-count); }
/* a tinted current item (corporate) keeps its quiet secondary text */
:is([data-theme='corporate'], [data-theme='portal']) .pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true']) :is(.pk-inbox__preview, .pk-inbox__meta, .pk-list__meta, .pk-meta, .pk-channel) { color: var(--pk-text-2); }
:is([data-theme='corporate'], [data-theme='portal']) .pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true']) .pk-inbox__time { color: var(--pk-text-3); }
@container pk-panes (min-width: 1100px) {
  .pk-panes > .pk-panes__aside { display: grid; }
  .pk-panes__info { display: none; }
}
@container pk-panes (max-width: 1099px) {
  .pk-panes[data-aside] > .pk-panes__aside { position: absolute; z-index: 5; inset: 0 0 0 auto; display: grid; width: min(340px, 100%); box-shadow: var(--pk-float-shadow); }
}
@container pk-panes (max-width: 639px) {
  .pk-panes > :is(.pk-panes__list, .pk-panes__detail) { grid-column: 1 / -1; }
  .pk-panes[data-open] > .pk-panes__list, .pk-panes:not([data-open]) > .pk-panes__detail { display: none; }
  .pk-panes__back { display: inline-grid; margin-left: calc(-1 * var(--pk-space-3)); }
  .pk-panes__head { padding-left: var(--pk-space-7); }
}

/* ---------- conversation ---------- */
/* a thread: day and "new" separators, runs of bubbles from one side grouped (4px apart, inner corners tightened), time and state
   under a run, system lines, photos and files, the typing dots */
.pk-thread { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pk-space-2); padding: var(--pk-space-8) var(--pk-space-8) var(--pk-space-10); }
.pk-thread > .pk-bubble { max-width: min(78%, 560px); }
.pk-thread > .pk-bubble--in + :is(.pk-bubble--out, .pk-bubble--ai), .pk-thread > :is(.pk-bubble--out, .pk-bubble--ai) + .pk-bubble--in { margin-top: var(--pk-space-6); }
.pk-thread > .pk-bubble--in:has(+ .pk-bubble--in) { border-bottom-left-radius: var(--pk-r-xs); }
.pk-thread > .pk-bubble--in + .pk-bubble--in { border-top-left-radius: var(--pk-r-xs); }
.pk-thread > :is(.pk-bubble--out, .pk-bubble--ai):has(+ :is(.pk-bubble--out, .pk-bubble--ai)) { border-bottom-right-radius: var(--pk-r-xs); }
.pk-thread > :is(.pk-bubble--out, .pk-bubble--ai) + :is(.pk-bubble--out, .pk-bubble--ai) { border-top-right-radius: var(--pk-r-xs); }
.pk-thread__day, .pk-thread__new { align-self: stretch; display: flex; align-items: center; gap: var(--pk-space-6); margin: var(--pk-space-7) 0 var(--pk-space-5); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-thread > :is(.pk-thread__day, .pk-thread__new):first-child { margin-top: 0; }
.pk-thread__day::before, .pk-thread__day::after, .pk-thread__new::before, .pk-thread__new::after { content: ''; flex: 1; height: 1px; background: var(--pk-line); }
.pk-thread__new { color: var(--pk-accent-text); font-weight: var(--pk-fw-strong); }
.pk-thread__new::before, .pk-thread__new::after { background: color-mix(in srgb, var(--pk-accent-text) 45%, transparent); }
.pk-thread__system { align-self: center; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--pk-space-2) var(--pk-space-4); max-width: 100%; margin: var(--pk-space-5) 0; padding: var(--pk-space-3) var(--pk-space-7); border-radius: min(var(--pk-r-control), 18px); background: var(--pk-inset); font-size: var(--pk-fs-meta); color: var(--pk-text-2); text-align: center; }
.pk-thread__system .pk-icon { width: 16px; height: 16px; }
/* time and state under a run of bubbles */
.pk-bubble__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-3); margin: var(--pk-space-1) var(--pk-space-3) var(--pk-space-4); font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-bubble__meta .pk-icon { width: 14px; height: 14px; }
.pk-thread > :is(.pk-bubble--out, .pk-bubble--ai) + .pk-bubble__meta { align-self: flex-end; }
/* a message that did not go: kept in place, tinted, with its retry under it */
.pk-bubble--failed { background: var(--pk-danger-soft); color: var(--pk-text); }
.pk-bubble--failed + .pk-bubble__meta { color: var(--pk-danger-text); }
.pk-bubble__retry {
  display: inline-flex; align-items: center; gap: var(--pk-space-3); height: 32px; padding: 0 var(--pk-space-6); border: 0; border-radius: var(--pk-r-control);
  background: var(--pk-danger-soft); color: var(--pk-danger-text); font: inherit; font-weight: var(--pk-fw-strong); cursor: pointer;
}
/* photos in a message: one to four in a grid (three put the first one tall), a tap opens the viewer; "+3" on the last */
.pk-bubble:has(> .pk-bubble__files) { padding: var(--pk-space-2); }
.pk-bubble:has(> .pk-bubble__files) > p { padding: var(--pk-space-4) var(--pk-space-6) var(--pk-space-3); }
.pk-bubble__files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; width: 300px; max-width: 100%; overflow: hidden; border-radius: max(var(--pk-r-inset) - 4px, 2px); }
.pk-bubble__files > :only-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.pk-bubble__files:has(> :nth-child(3):last-child) > :first-child { grid-row: span 2; aspect-ratio: auto; }
.pk-bubble__photo { position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; background: var(--pk-inset-2); cursor: zoom-in; }
.pk-bubble__photo img { width: 100%; height: 100%; object-fit: cover; }
/* the group's box rounds its outer corners and cuts what leaves it: a photo's ring is drawn inside the photo, with a
   card-coloured line inside the ring that parts it from the picture */
.pk-bubble__photo:focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
.pk-bubble__photo:focus-visible::after { content: ''; position: absolute; inset: var(--pk-focus-room); box-shadow: var(--pk-cutout); pointer-events: none; }
/* a file: type, name (a long name ends in an ellipsis), size; the chip itself downloads. In bubbles, comments and the composer */
.pk-attach { display: flex; align-items: center; gap: var(--pk-space-5); width: min(320px, 100%); min-width: 0; padding: var(--pk-space-4) var(--pk-space-5) var(--pk-space-4) var(--pk-space-4); border-radius: var(--pk-r-field); background: var(--pk-inset); color: var(--pk-text); }
.pk-attach__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--pk-r-sm); background: var(--pk-card); color: var(--pk-text-2); }
.pk-attach__icon .pk-icon { width: 18px; height: 18px; }
.pk-attach__body { flex: 1; min-width: 0; }
.pk-attach__name { font-size: var(--pk-fs-small); font-weight: var(--pk-fw-title); line-height: var(--pk-lh-compact); white-space: normal; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.pk-attach__meta { display: block; font-family: var(--pk-font-figures); font-size: var(--pk-fs-fine); font-variant-numeric: tabular-nums; color: var(--pk-text-2); }
.pk-attach > .pk-icon:last-child { color: var(--pk-text-2); }
:is(.pk-bubble, .pk-composer) .pk-attach { background: var(--pk-card); }
:is(.pk-bubble, .pk-composer) .pk-attach__icon { background: var(--pk-inset); }
.pk-bubble > .pk-attach { margin: var(--pk-space-1) 0; }
/* someone is typing */
.pk-typing { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 var(--pk-space-8); border-radius: var(--pk-r-inset); background: var(--pk-inset); }
.pk-typing > i { width: 7px; height: 7px; border-radius: var(--pk-r-pill); background: var(--pk-text-3); animation: pk-typing 1.2s var(--pk-ease) infinite; }
.pk-typing > i:nth-child(2) { animation-delay: 0.15s; }
.pk-typing > i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pk-typing { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
/* where a message came from: site form, WhatsApp, Instagram, e-mail */
.pk-channel { display: inline-flex; align-items: center; gap: 5px; font-size: var(--pk-fs-meta); color: var(--pk-text-2); white-space: nowrap; }
.pk-channel .pk-icon { width: 15px; height: 15px; }
/* saved replies: one line that scrolls sideways, with room for the chips' touch rings */
.pk-replies {
  display: flex; gap: var(--pk-space-4); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: max(var(--pk-tap-room), var(--pk-focus-room)); margin: calc(-1 * max(var(--pk-tap-room), var(--pk-focus-room)));
  scroll-padding-inline: max(var(--pk-tap-room), var(--pk-focus-room));
}
.pk-replies::-webkit-scrollbar { display: none; }
.pk-replies > * { flex: none; }
.pk-replies .pk-chip { height: var(--pk-h-btn-sm); }

/* ---------- message and comment boxes ---------- */
/* a field that grows with its text (about six lines, then it scrolls) over a row of tools; it looks and focuses like the theme's
   fields. A note above the field says why it cannot be used when it is disabled */
:is(.pk-composer--multi, .pk-commentbox) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-1); min-width: 0; padding: var(--pk-space-3); border: 1px solid transparent; border-radius: min(var(--pk-r-control), 22px);
  background: var(--pk-inset); box-shadow: var(--pk-field-foot); transition: border-color var(--pk-dur-fast) var(--pk-ease), background var(--pk-dur-fast) var(--pk-ease);
}
:is(.pk-composer, .pk-commentbox):focus-within { border-color: var(--pk-primary-edge); background: var(--pk-card); box-shadow: none; }
:is(.pk-inset, .pk-tile, .pk-sortcards__item:not(:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *)) :is(.pk-composer--multi, .pk-commentbox) { background: var(--pk-card); }
.pk-composer__input { display: block; width: 100%; min-height: 44px; max-height: 168px; padding: var(--pk-space-5) var(--pk-space-6); border: 0; outline: 0; resize: none; background: transparent; font: inherit; line-height: var(--pk-lh-body); color: var(--pk-text); field-sizing: content; }
.pk-composer__input:focus-visible { outline: 0; }
.pk-composer__input::placeholder { color: var(--pk-text-3); }
.pk-composer__files { display: flex; flex-wrap: wrap; gap: var(--pk-space-3); padding: var(--pk-space-2) var(--pk-space-2) var(--pk-space-1); }
.pk-composer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-3); min-width: 0; }
.pk-composer__end { display: flex; align-items: center; gap: var(--pk-space-5); margin-left: auto; }
.pk-composer__hint { font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-composer__tool { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--pk-r-control); background: transparent; color: var(--pk-text-2); cursor: pointer; }
.pk-composer__tool:hover { background: color-mix(in srgb, var(--pk-text) 7%, transparent); color: var(--pk-text); }
.pk-composer__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-5); padding: var(--pk-space-4) var(--pk-space-4) var(--pk-space-4) var(--pk-space-6); font-size: var(--pk-fs-label); color: var(--pk-text-2); }
.pk-composer__note > .pk-icon { color: var(--pk-text); }
.pk-composer__note > span { flex: 1 1 180px; min-width: 0; }
:is(.pk-composer--multi, .pk-commentbox) :is(.pk-composer__note .pk-btn--soft, .pk-seg) { background: var(--pk-card); }
:is(.pk-composer--multi, .pk-commentbox):has(.pk-composer__input:disabled) { border-color: transparent; background: var(--pk-inset); }
.pk-composer__input:disabled { color: var(--pk-text-3); cursor: not-allowed; }
:is(.pk-composer, .pk-commentbox) :is(.pk-composer__tool, .pk-icon-btn, .pk-btn):disabled { background: transparent; color: var(--pk-text-3); cursor: not-allowed; }
:is(.pk-composer, .pk-commentbox) :is(.pk-icon-btn--ink, .pk-btn--primary):disabled { background: var(--pk-inset-2); }
.pk-field--error :is(.pk-composer--multi, .pk-commentbox, .pk-editor) { border-color: var(--pk-danger-edge); box-shadow: none; }
.pk-field--error :is(.pk-composer--multi, .pk-commentbox, .pk-editor):focus-within { border-color: var(--pk-danger-edge); box-shadow: var(--pk-ring-danger); }
.pk-field--error .pk-field__count { color: var(--pk-danger-text); }
/* corporate fields are outlined white boxes with a brand focus ring */
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-composer, .pk-commentbox) { background: var(--pk-card); border-color: var(--pk-line-control); }
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-composer, .pk-commentbox):focus-within { border-color: var(--pk-primary-edge); box-shadow: var(--pk-focus-halo); }
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-composer--multi, .pk-commentbox):has(.pk-composer__input:disabled) { border-color: var(--pk-line); background: var(--pk-inset); }
:where([data-theme='corporate'], [data-theme='portal']) .pk-field--error :is(.pk-composer--multi, .pk-commentbox) { border-color: var(--pk-danger-edge); }
/* the comment box stays at the bottom of the screen on phones, clear of the phone bars */
@media (max-width: 599px) {
  .pk-commentbox { position: sticky; z-index: 3; bottom: calc(var(--pk-space-6) + env(safe-area-inset-bottom, 0px)); }
  .pk:has(.pk-app :is(.pk-tabbar, .pk-actionbar)) .pk-commentbox { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- comments ---------- */
/* who, when, the text with its @mentions, files; a comment the customer also sees is tinted and labelled, a resolved one folds
   away behind its toggle (aria-expanded) */
.pk-comments { display: grid; }
.pk-comment { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 var(--pk-space-6); padding: var(--pk-space-7) 0; border-top: 1px solid var(--pk-line); }
.pk-comment:first-child { border-top: 0; padding-top: var(--pk-space-1); }
.pk-comment > .pk-avatar { grid-row: span 3; }
.pk-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-1) var(--pk-space-4); min-width: 0; min-height: 32px; }
.pk-comment__name { font-size: var(--pk-fs-control); font-weight: var(--pk-fw-strong); }
.pk-comment__time { font-family: var(--pk-mono); font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-comment__edited { font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-comment__head > :is(.pk-icon-btn, .pk-btn):last-child { margin-left: auto; }
.pk-comment__body { font-size: var(--pk-fs-control); line-height: var(--pk-lh-loose); overflow-wrap: anywhere; }
.pk-comment__body > * + * { margin-top: var(--pk-space-3); }
.pk-comment__files { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); margin-top: var(--pk-space-5); }
.pk-comment--public .pk-comment__body { margin-top: var(--pk-space-2); padding: var(--pk-space-5) var(--pk-space-6); border-radius: var(--pk-r-field); background: var(--pk-accent-soft); }
.pk-comment--resolved :is(.pk-comment__name, .pk-comment__body) { color: var(--pk-text-2); }
.pk-comment--resolved:not(:has(.pk-comment__toggle[aria-expanded='true'])) :is(.pk-comment__body, .pk-comment__files) { display: none; }
/* @mention: the person it notifies */
.pk-mention { display: inline-block; padding: 0 5px; border-radius: min(var(--pk-r-xs), 6px); background: var(--pk-accent-soft); color: var(--pk-accent-text); font-weight: var(--pk-fw-title); white-space: nowrap; }

/* ---------- long text ---------- */
/* announcements, consent and privacy texts, help answers, descriptions: headings, paragraphs, lists, links, quotes, codes, images,
   small tables and fine print, at a readable measure; pk-prose--sm for side panels. Phones keep the text at 16px (15px small) */
.pk-prose { max-width: 68ch; font-size: calc(var(--pk-fs-body) + 1px); line-height: var(--pk-lh-prose); color: var(--pk-text); overflow-wrap: break-word; }
.pk-prose > * + * { margin-top: 0.85em; }
.pk-prose > :first-child { margin-top: 0; }
.pk-prose :is(h2, h3, h4, ul, ol, blockquote, figure, table, pre) { margin-bottom: 0; }
.pk-prose :is(h2, h3, h4) { line-height: var(--pk-lh-title); color: var(--pk-ink); text-wrap: balance; }
.pk-prose > :is(h2, h3, h4) { margin-top: 1.6em; }
.pk-prose > :is(h2, h3, h4) + * { margin-top: 0.5em; }
.pk-prose h2 { font-size: 1.45em; font-weight: 520; letter-spacing: -0.02em; }
.pk-prose h3 { font-size: 1.2em; font-weight: var(--pk-fw-title); letter-spacing: -0.01em; }
.pk-prose h4 { font-size: 1em; font-weight: var(--pk-fw-strong); }
.pk-prose :is(strong, b) { font-weight: var(--pk-fw-strong); }
.pk-prose :is(ul, ol) { padding-left: 1.35em; }
.pk-prose li + li, .pk-prose li > :is(ul, ol) { margin-top: 0.35em; }
.pk-prose li::marker { color: var(--pk-text-3); font-variant-numeric: tabular-nums; }
/* links in the text look like pk-link: the primary drawn as a line, always underlined */
.pk-prose a { color: var(--pk-primary-edge); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.pk-prose a:hover { text-decoration-color: currentColor; }
/* a quote hangs its mark in the margin; no bar on its left edge */
.pk-prose blockquote { position: relative; margin-inline: 0; padding-left: 1.4em; font-size: 1.06em; }
.pk-prose blockquote::before { content: '\201C'; position: absolute; left: 0; top: -0.1em; font-size: 2em; line-height: var(--pk-lh-none); color: var(--pk-text-3); }
.pk-prose blockquote > :is(footer, cite) { display: block; margin-top: 0.4em; font-size: 0.84em; font-style: normal; color: var(--pk-text-2); }
.pk-prose :is(code, kbd, samp) { padding: 0.1em 0.35em; border-radius: min(var(--pk-r-xs), 6px); background: var(--pk-inset); font-family: var(--pk-mono); font-size: 0.88em; }
.pk-prose pre { padding: var(--pk-space-6) var(--pk-space-7); overflow-x: auto; border-radius: var(--pk-r-sm); background: var(--pk-inset); font-family: var(--pk-mono); font-size: 0.86em; line-height: var(--pk-lh-loose); }
.pk-prose pre code { padding: 0; background: none; font-size: inherit; }
.pk-prose figure { margin-inline: 0; }
.pk-prose img { width: 100%; height: auto; max-height: min(60vh, 520px); object-fit: cover; border-radius: var(--pk-r-tile); }
.pk-prose figcaption { margin-top: 0.6em; font-size: 0.84em; color: var(--pk-text-2); }
.pk-prose table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.pk-prose :is(th, td) { padding: var(--pk-space-4) var(--pk-space-5); border-bottom: 1px solid var(--pk-line); text-align: left; vertical-align: top; }
.pk-prose :is(th, td):first-child { padding-left: 0; }
.pk-prose th { font-weight: var(--pk-fw-strong); color: var(--pk-text-2); border-bottom-color: var(--pk-line-strong); }
.pk-prose td { font-variant-numeric: tabular-nums; }
.pk-prose small { font-size: 0.84em; color: var(--pk-text-3); }
.pk-prose hr { height: 1px; margin-block: 2em; border: 0; background: var(--pk-line); }
.pk-prose mark { padding: 0 var(--pk-space-1); border-radius: var(--pk-r-mark); background: var(--pk-accent-soft); color: inherit; }
.pk-prose--sm { font-size: var(--pk-fs-body); line-height: var(--pk-lh-loose); }
.pk-prose--sm h2 { font-size: 1.3em; }
.pk-prose--sm h3 { font-size: 1.12em; }
[data-theme='corporate'] .pk-prose :is(h2, h3) { font-weight: var(--pk-fw-bold); letter-spacing: -0.01em; }
@media (max-width: 599px) {
  .pk-prose { font-size: max(var(--pk-fs-lead), var(--pk-fs-body) + 1px); }
  .pk-prose--sm { font-size: max(var(--pk-fs-item), var(--pk-fs-body)); }
}

/* ---------- rich text editor ---------- */
/* a field for formatted text: a toolbar that stays in sight while a long text scrolls by, an area styled as pk-prose and a foot
   with the count. It looks and focuses like the theme's fields; on phones the toolbar moves above the keyboard while typing */
.pk-editor { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; border: 1px solid transparent; border-radius: var(--pk-r-field); background: var(--pk-inset); box-shadow: var(--pk-field-foot); transition: border-color var(--pk-dur-fast) var(--pk-ease), background var(--pk-dur-fast) var(--pk-ease); }
.pk-editor:hover { border-color: var(--pk-line-strong); }
.pk-editor:focus-within { border-color: var(--pk-primary-edge); background: var(--pk-card); box-shadow: none; }
:is(.pk-inset, .pk-tile, .pk-sortcards__item:not(:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) *)) .pk-editor { background: var(--pk-card); }
.pk-editor__bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--pk-space-1); min-width: 0; padding: var(--pk-space-3); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--pk-line); border-radius: var(--pk-r-field) var(--pk-r-field) 0 0; background: inherit;
}
.pk-editor__bar::-webkit-scrollbar { display: none; }
.pk-editor__tool, .pk-editor__style {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-space-3); flex: none; height: 34px; padding: 0; border: 0;
  border-radius: min(var(--pk-r-control), 10px); background: transparent; color: var(--pk-text-2); font: inherit; cursor: pointer;
}
.pk-editor__tool { width: 34px; }
.pk-editor__tool .pk-icon { width: 18px; height: 18px; }
.pk-editor__style { padding: 0 var(--pk-space-3) 0 var(--pk-space-5); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-label); color: var(--pk-text); white-space: nowrap; }
.pk-editor__style .pk-icon { width: 16px; height: 16px; color: var(--pk-text-3); }
:is(.pk-editor__tool, .pk-editor__style):hover { background: color-mix(in srgb, var(--pk-text) 7%, transparent); color: var(--pk-text); }
.pk-editor__tool[aria-pressed='true'], .pk-editor__tool[aria-expanded='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-editor__tool:disabled { background: transparent; color: var(--pk-text-3); cursor: default; }
.pk-editor__sep { flex: none; width: 1px; height: 20px; margin: 0 var(--pk-space-3); background: var(--pk-line-strong); }
.pk-editor__area { min-height: 180px; max-width: none; padding: var(--pk-space-7) var(--pk-space-8); outline: 0; }
.pk-editor__area:focus-visible { outline: 0; }
.pk-editor__area:empty::before { content: attr(data-placeholder); color: var(--pk-text-3); pointer-events: none; }
.pk-editor__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-6); min-height: 36px; padding: var(--pk-space-3) var(--pk-space-7); border-top: 1px solid var(--pk-line); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-editor__foot > .pk-field__count { margin-left: auto; }
/* read-only: the text in a quiet frame, no tools */
.pk-editor--readonly, .pk-editor--readonly:hover { border-color: var(--pk-line); background: transparent; }
.pk-editor--readonly > :is(.pk-editor__bar, .pk-editor__foot) { display: none; }
.pk-editor--readonly > .pk-editor__area { min-height: 0; }
:where([data-theme='corporate'], [data-theme='portal']) .pk-editor { background: var(--pk-card); border-color: var(--pk-line-control); }
:where([data-theme='corporate'], [data-theme='portal']) .pk-editor:hover { border-color: var(--pk-text-3); }
:where([data-theme='corporate'], [data-theme='portal']) .pk-editor:focus-within { border-color: var(--pk-primary-edge); box-shadow: var(--pk-focus-halo); }
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-editor--readonly, .pk-editor--readonly:hover) { border-color: var(--pk-line); }
:where([data-theme='corporate'], [data-theme='portal']) .pk-field--error .pk-editor { border-color: var(--pk-danger-edge); }
@media (max-width: 599px) {
  .pk-editor:focus-within > .pk-editor__bar { order: 2; top: auto; bottom: 0; border-top: 1px solid var(--pk-line); border-bottom: 0; border-radius: 0; }
}

/* ---------- touch and motion ---------- */
@media (pointer: coarse), (max-width: 1023px) {
  .pk-composer__tool, .pk-editor__tool { width: 44px; height: 44px; }
  .pk-editor__style { height: 44px; }
  .pk-bubble__retry { position: relative; }
  .pk-bubble__retry::after { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .pk-typing > i { animation: none; opacity: 0.6; }
}
/* ---------- payment and amounts ---------- */
/* an amount in the theme's figures; the figure never breaks away from its currency */
.pk-amount { font-family: var(--pk-font-figures); font-size: var(--pk-figures-size); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
/* money or credits coming in carry their plus sign; the colour only repeats it */
.pk-amount--in { color: var(--pk-success-text); }
.pk-amount--lg { font-family: var(--pk-font); font-size: var(--pk-fs-figure-xl); line-height: var(--pk-lh-tight); font-weight: var(--pk-fw-book); letter-spacing: -0.03em; }
[data-theme='corporate'] .pk-amount--lg { font-size: var(--pk-fs-figure-lg); font-weight: 620; letter-spacing: -0.015em; }
[data-theme='technical'] .pk-amount--lg { font-size: var(--pk-fs-figure-lg); }

/* line items: the quantity and price columns keep one width on every row, so the figures line up; on a narrow box
   they drop under the name */
.pk-lineitems { display: grid; container: pk-lineitems / inline-size; }
.pk-lineitem {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(2 * var(--pk-h-btn-sm) + 44px) minmax(6em, auto) var(--pk-h-btn-sm);
  grid-template-areas: 'body qty price remove'; align-items: center; gap: var(--pk-space-4) var(--pk-space-8); padding: calc(var(--pk-row-y) + var(--pk-space-1)) 0; border-top: 1px solid var(--pk-line);
}
.pk-lineitem:first-child { border-top: 0; padding-top: var(--pk-space-2); }
.pk-lineitem:has(> .pk-lineitem__thumb) { grid-template-columns: auto minmax(0, 1fr) calc(2 * var(--pk-h-btn-sm) + 44px) minmax(6em, auto) var(--pk-h-btn-sm); grid-template-areas: 'thumb body qty price remove'; }
.pk-lineitem__thumb { grid-area: thumb; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: var(--pk-r-sm); background: var(--pk-inset); color: var(--pk-text-2); }
.pk-lineitem__thumb > img { width: 100%; height: 100%; object-fit: cover; }
.pk-lineitem__body { grid-area: body; min-width: 0; }
.pk-lineitem__name { display: block; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-title); }
.pk-lineitem__note { display: block; margin-top: 1px; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-lineitem__qty { grid-area: qty; display: flex; align-items: center; gap: var(--pk-space-2); font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-lineitem__count { min-width: 28px; text-align: center; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-title); color: var(--pk-text); }
.pk-lineitem__price { grid-area: price; display: grid; justify-items: end; text-align: right; font-weight: var(--pk-fw-title); }
.pk-lineitem__unit { font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-regular); color: var(--pk-text-3); }
.pk-lineitem__remove { grid-area: remove; justify-self: end; }
@container pk-lineitems (max-width: 479px) {
  .pk-lineitem { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'body remove' 'qty price'; }
  .pk-lineitem:has(> .pk-lineitem__thumb) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'thumb body remove' 'thumb qty price'; }
  .pk-lineitem__thumb { align-self: start; }
}

/* totals: label left, amount right; the total and the amount still due stand out, a zero row steps back */
.pk-sum { display: grid; margin: 0; font-size: var(--pk-fs-control); }
.pk-sum__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--pk-space-1) var(--pk-space-8); padding: 5px 0; }
.pk-sum__row > dt { min-width: 0; color: var(--pk-text-2); }
.pk-sum__row > dd { margin: 0 0 0 auto; text-align: right; }
.pk-sum__hint { margin-left: var(--pk-space-3); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
/* a calculation under a label ("12 gün × 75 $") or on its own line (the exchange rate) */
.pk-sum__formula { display: block; margin-top: var(--pk-space-1); font-family: var(--pk-font-figures); font-size: var(--pk-fs-caption); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
/* the same amount in a second currency, under the first */
.pk-sum__alt { display: block; margin-top: var(--pk-space-1); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-sum__row--zero, .pk-sum__row--zero > dt { color: var(--pk-text-3); }
.pk-sum__row--total { align-items: center; margin-top: var(--pk-space-3); padding-top: var(--pk-space-6); border-top: 1px solid var(--pk-line); }
.pk-sum__row--total > dt { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); color: var(--pk-text); }
.pk-sum__row--due { margin-top: var(--pk-space-4); padding: var(--pk-space-5) var(--pk-space-7); border-radius: var(--pk-r-field); background: var(--pk-inset); font-weight: var(--pk-fw-strong); }
.pk-sum__row--due > dt { color: var(--pk-text); }
:is(.pk-inset, .pk-tile) .pk-sum__row--due { background: var(--pk-card); }

/* the phone action bar of a payment carries the total beside its button: "Toplam 1.250 ₺ · Öde" */
.pk-actionbar__total { display: grid; flex: none; padding: 0 var(--pk-space-2) 0 var(--pk-space-5); line-height: var(--pk-lh-snug); }
.pk-actionbar__total .pk-amount { font-family: var(--pk-font); font-size: var(--pk-fs-title-xl); font-weight: var(--pk-fw-strong); letter-spacing: -0.02em; }
.pk-actionbar__total ~ .pk-btn { flex: 1; }

/* payment: the method choice (choice cards with the method's icon at the end) and the chosen method's details */
.pk-pay { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); }
.pk-pay__method > .pk-icon { color: var(--pk-text-2); }
/* an account number to transfer to is read whole: it wraps between its groups instead of ending in an ellipsis */
.pk-pay .pk-copy__value { white-space: normal; }

/* a payment's state on a record: what, when, how and its reference; the icon carries the state's colour */
.pk-payment { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-1) var(--pk-space-7); padding: var(--pk-space-7) var(--pk-space-8); border-radius: var(--pk-r-tile); background: var(--pk-inset); }
.pk-payment__icon { grid-row: span 2; align-self: start; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--pk-r-pill); background: var(--pk-card); color: var(--pk-text-2); }
.pk-payment__title { min-width: 0; font-weight: var(--pk-fw-strong); }
.pk-payment__amount { justify-self: end; text-align: right; font-weight: var(--pk-fw-strong); }
.pk-payment__meta { grid-column: 2 / -1; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-payment__bar { grid-column: 2 / -1; margin-top: var(--pk-space-4); }
.pk-payment__actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--pk-space-4); margin-top: var(--pk-space-5); }
.pk-payment--paid .pk-payment__icon { background: var(--pk-success-soft); color: var(--pk-success-text); }
.pk-payment--partial .pk-payment__icon { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-payment--failed { background: var(--pk-danger-soft); }
.pk-payment--failed .pk-payment__icon { color: var(--pk-danger-text); }
.pk-payment__reason { color: var(--pk-danger-text); font-weight: var(--pk-fw-label); }
/* on the grey or tinted block a soft or danger button would vanish into the background */
.pk-payment :is(.pk-btn--soft, .pk-btn--danger) { background: var(--pk-card); }

/* ---------- ledger ---------- */
/* dated movements with a sign and the balance after each line; a narrow box puts the amount beside the description and
   the reference and balance under them */
.pk-ledger { display: grid; font-size: var(--pk-fs-control); container: pk-ledger / inline-size; }
.pk-ledger__head, .pk-ledger__row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(6em, auto) minmax(6em, auto);
  grid-template-areas: 'time desc amount balance' 'time ref amount balance'; align-items: baseline; gap: var(--pk-space-1) var(--pk-space-8);
}
.pk-ledger__head { grid-template-areas: 'time desc amount balance'; padding-bottom: var(--pk-space-4); border-bottom: 1px solid var(--pk-line); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-ledger__head > :nth-child(3), .pk-ledger__head > :nth-child(4) { text-align: right; }
.pk-ledger__row { padding: calc(var(--pk-row-y) + 1px) 0; border-top: 1px solid var(--pk-line); }
.pk-ledger__day { margin: 0; padding: var(--pk-space-9) 0 var(--pk-space-3); font-size: var(--pk-fs-label); font-weight: var(--pk-fw-strong); }
:is(.pk-ledger__head, .pk-ledger__day, .pk-ledger__row--balance) + .pk-ledger__row { border-top: 0; }
.pk-ledger__time { grid-area: time; font-family: var(--pk-mono); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-ledger__desc { grid-area: desc; min-width: 0; font-weight: var(--pk-fw-medium); }
.pk-ledger__ref { grid-area: ref; min-width: 0; font-family: var(--pk-mono); font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-ledger__ref a { text-decoration: underline; text-underline-offset: 2px; }
/* on touch a link in a row grows to the floor without moving the line */
@media (pointer: coarse), (max-width: 1023px) {
  .pk-ledger__ref a { display: inline-block; padding-block: var(--pk-space-4); margin-block: calc(-1 * var(--pk-space-4)); }
}
.pk-ledger__amount { grid-area: amount; justify-self: end; text-align: right; font-weight: var(--pk-fw-title); }
.pk-ledger__balance { grid-area: balance; justify-self: end; text-align: right; font-family: var(--pk-font-figures); font-size: var(--pk-figures-size); font-variant-numeric: tabular-nums; color: var(--pk-text-2); white-space: nowrap; }
/* the word "Bakiye" before a balance: read out on a wide box (the column head says it), shown on a narrow one */
.pk-ledger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* opening and closing balance: a grey band whose columns still line up with the rows */
.pk-ledger__row--balance { margin: var(--pk-space-3) calc(-1 * var(--pk-space-6)); padding-inline: var(--pk-space-6); border-top: 0; border-radius: var(--pk-r-field); background: var(--pk-inset); }
.pk-ledger__row--balance :is(.pk-ledger__desc, .pk-ledger__balance) { font-weight: var(--pk-fw-strong); color: var(--pk-text); }
.pk-ledger__row--balance + .pk-ledger__day { padding-top: var(--pk-space-6); }
/* a reversed line stays readable and points to the line that reverses it */
.pk-ledger__row--reversed :is(.pk-ledger__desc, .pk-ledger__amount) { color: var(--pk-text-3); text-decoration: line-through; }
.pk-inset .pk-ledger__row--balance { background: var(--pk-card); }
@container pk-ledger (max-width: 479px) {
  .pk-ledger__head { display: none; }
  .pk-ledger__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'desc desc amount' 'time ref balance'; column-gap: var(--pk-space-5); }
  .pk-ledger__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ---------- packages and memberships ---------- */
/* a membership: credits left, valid until, its state, a check-in code and actions. Active it is the region's highlight
   block (pk-card--accent); frozen, expired and used-up passes are plain cards */
.pk-pass { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-8); align-content: start; }
/* the owner or kind and the state pill on one line, the title under them */
.pk-pass__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-1) var(--pk-space-6); }
.pk-pass__head > :is(h2, h3, h4) { grid-column: 1 / -1; }
.pk-pass__credits { display: grid; gap: var(--pk-space-6); }
.pk-pass__expiry { display: flex; align-items: flex-start; gap: var(--pk-space-4); font-size: var(--pk-fs-small); }
.pk-pass__expiry > .pk-icon { width: 18px; height: 18px; margin-top: 1px; }
.pk-pass__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); }
.pk-pass__foot > .pk-icon-btn:last-child { margin-left: auto; }
.pk-pass--frozen .pk-pass__credits, .pk-pass--expired .pk-pass__credits { color: var(--pk-text-3); }
.pk-pass--frozen .pk-ticks { --pk-ticks: var(--pk-line-control); }
/* credits lost with the expiry are hatched */
.pk-pass--expired .pk-ticks i.on { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 22%, transparent) 0 1.5px, transparent 1.5px 5px), var(--pk-inset-2); }

/* a package to buy: price, sessions, validity and the price per session. The featured one is the region's highlight
   block (pk-card--accent) with a pill, and the only one with a filled button */
.pk-plan { display: flex; flex-direction: column; gap: var(--pk-space-7); }
.pk-plan__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-5); }
.pk-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pk-space-2) var(--pk-space-5); }
.pk-plan__list { display: grid; gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--pk-fs-small); }
.pk-plan__list > li { display: flex; align-items: flex-start; gap: var(--pk-space-4); }
.pk-plan__list .pk-icon { width: 16px; height: 16px; margin-top: var(--pk-space-1); }
.pk-plan > .pk-btn:last-child { margin-top: auto; }

/* ---------- QR codes ---------- */
/* a QR code from the app: on white with its quiet zone in every mode, as a scanner needs, at least 200px wide */
.pk-qr { display: grid; justify-items: center; gap: var(--pk-space-5); margin: 0; text-align: center; }
.pk-qr__code { position: relative; display: block; width: min(240px, 100%); padding: 0; border: 0; border-radius: var(--pk-r-tile); background: var(--pk-on-dark); color: var(--pk-on-bright); box-shadow: var(--pk-ring-out); }
.pk-qr__code > :is(img, svg) { display: block; width: 100%; height: auto; border-radius: inherit; }
.pk-qr__caption { max-width: 320px; font-weight: var(--pk-fw-title); }
.pk-qr__key { font-family: var(--pk-mono); font-size: var(--pk-fs-lead); letter-spacing: 0.08em; }
.pk-qr__hint { display: inline-flex; align-items: center; gap: var(--pk-space-3); max-width: 320px; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-qr__hint > .pk-icon { width: 16px; height: 16px; }
/* an expired code fades; the whole code is the refresh button */
.pk-qr--expired .pk-qr__code { cursor: pointer; }
.pk-qr--expired .pk-qr__code > :is(img, svg) { opacity: 0.1; }
.pk-qr__refresh { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--pk-r-pill); background: var(--pk-on-bright); color: var(--pk-on-dark); }

/* scanner: the camera picture under a frame, a hint, the torch and manual entry; full screen on phones (pk-scan--fixed).
   In dark mode the stage takes the page colour with a hairline ring, like the image viewer */
.pk-scan {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--pk-space-8); min-height: 460px; padding: var(--pk-space-7); overflow: hidden;
  border-radius: var(--pk-r-card); background: light-dark(var(--pk-dark), var(--pk-canvas)); color: var(--pk-on-dark); box-shadow: 0 0 0 1px light-dark(transparent, var(--pk-line-strong));
}
.pk-scan--fixed { position: fixed; inset: 0; z-index: 50; min-height: 0; padding: max(var(--pk-space-7), env(safe-area-inset-top)) var(--pk-space-7) max(var(--pk-space-7), env(safe-area-inset-bottom)); border-radius: 0; }
.pk-scan__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.pk-scan__head { position: relative; display: flex; align-items: center; gap: var(--pk-space-5); }
.pk-scan__title { flex: 1; min-width: 0; font-weight: var(--pk-fw-title); text-align: center; }
.pk-scan__frame { position: relative; place-self: center; width: min(232px, 72%); aspect-ratio: 1; color: var(--pk-on-dark); }
.pk-scan__frame > i { position: absolute; width: 24%; aspect-ratio: 1; border: 0 solid currentColor; }
.pk-scan__frame > i:nth-child(1) { top: 0; left: 0; border-width: 4px 0 0 4px; border-top-left-radius: var(--pk-r-tile); }
.pk-scan__frame > i:nth-child(2) { top: 0; right: 0; border-width: 4px 4px 0 0; border-top-right-radius: var(--pk-r-tile); }
.pk-scan__frame > i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: var(--pk-r-tile); }
.pk-scan__frame > i:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: var(--pk-r-tile); }
/* a barcode needs a wide frame and a line to aim with */
.pk-scan--barcode .pk-scan__frame { width: min(320px, 86%); aspect-ratio: 2.4; }
.pk-scan--barcode .pk-scan__frame::after { content: ''; position: absolute; inset: 50% 6% auto; height: 2px; border-radius: var(--pk-r-pill); background: var(--pk-accent-on-dark); }
.pk-scan[data-state='success'] .pk-scan__frame { color: var(--pk-success); }
.pk-scan[data-state='error'] .pk-scan__frame { color: var(--pk-danger); }
.pk-scan__foot { position: relative; display: grid; justify-items: center; gap: var(--pk-space-6); }
.pk-scan__hint { padding: var(--pk-space-4) var(--pk-space-7); border-radius: var(--pk-r-control); background: var(--pk-dark-inset); font-size: var(--pk-fs-small); text-align: center; }
/* the result of a scan, or the manual entry: a card-coloured panel at the bottom of the stage */
/* the panel is light on the dark stage: its focus ring is the page's again */
.pk-scan__panel { --pk-focus-outline: 2px solid var(--pk-primary-edge); justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-5) var(--pk-space-6); padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-panel); background: var(--pk-card); color: var(--pk-text); }
.pk-scan__panel:has(> .pk-disc) { grid-template-columns: auto minmax(0, 1fr); align-items: center; row-gap: var(--pk-space-1); }
.pk-scan__panel > .pk-disc { grid-row: span 2; }
.pk-scan__panel > .pk-row { grid-column: 1 / -1; margin-top: var(--pk-space-4); }

/* ---------- print ---------- */
/* a document on screen in A4 proportions (it grows when its content is longer), with its toolbar above it */
.pk-print__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); width: 100%; max-width: 794px; margin-inline: auto; }
.pk-print__bar > :first-child { flex: 1 1 260px; min-width: 0; }
.pk-print {
  display: flex; flex-direction: column; gap: var(--pk-space-12); width: 100%; max-width: 794px; margin-inline: auto; aspect-ratio: 210 / 297; padding: var(--pk-space-24);
  border-radius: var(--pk-r-sm); background: var(--pk-card); color: var(--pk-text); font-size: var(--pk-fs-small);
}
.pk-print__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--pk-space-8) var(--pk-space-12); padding-bottom: var(--pk-space-10); border-bottom: 1px solid var(--pk-line-strong); }
.pk-print__org { display: grid; gap: var(--pk-space-1); font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-print__org > .pk-logo { margin-bottom: var(--pk-space-4); }
.pk-print__org > b { font-size: var(--pk-fs-item); color: var(--pk-text); }
.pk-print__title { display: grid; justify-items: end; gap: var(--pk-space-2); text-align: right; }
.pk-print__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 var(--pk-space-16); }
.pk-print__signs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--pk-space-12) var(--pk-space-16); margin-top: auto; padding-top: var(--pk-space-4); }
.pk-print__sign { display: grid; gap: var(--pk-space-1); font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-print__sign > b { font-size: var(--pk-fs-label); color: var(--pk-text); }
.pk-print__line { height: 52px; margin-bottom: var(--pk-space-4); border-bottom: 1px solid var(--pk-line-control); }
.pk-print__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pk-space-3) var(--pk-space-8); padding-top: var(--pk-space-6); border-top: 1px solid var(--pk-line); font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-print .pk-table { font-size: var(--pk-fs-label); }
@container pk-main (max-width: 599px) {
  .pk-print { padding: var(--pk-space-11) var(--pk-space-9); gap: var(--pk-space-9); }
  .pk-print__title { justify-items: start; text-align: left; }
}

/* receipt: an 80 mm slip in mono lines */
.pk-receipt { display: grid; gap: var(--pk-space-6); width: 100%; max-width: 320px; margin-inline: auto; padding: var(--pk-space-11) var(--pk-space-9) var(--pk-space-12); border-radius: var(--pk-r-sm); background: var(--pk-card); color: var(--pk-text); font-family: var(--pk-mono); font-size: var(--pk-fs-caption); line-height: var(--pk-lh-relaxed); }
.pk-receipt__head { display: grid; justify-items: center; gap: var(--pk-space-1); text-align: center; color: var(--pk-text-2); }
.pk-receipt__head > .pk-logo { margin-bottom: var(--pk-space-3); }
.pk-receipt__head > b { font-family: var(--pk-font); font-size: var(--pk-fs-item); color: var(--pk-text); }
.pk-receipt__lines { display: grid; gap: var(--pk-space-2); padding-block: var(--pk-space-5); border-block: 1px dashed var(--pk-line-strong); }
.pk-receipt__line { display: flex; justify-content: space-between; gap: var(--pk-space-6); }
.pk-receipt__line > :last-child { flex: none; text-align: right; }
.pk-receipt__line--sub { padding-left: var(--pk-space-6); color: var(--pk-text-3); }
.pk-receipt__total { display: flex; justify-content: space-between; gap: var(--pk-space-6); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-bold); }
.pk-receipt .pk-qr__code { width: 128px; }
.pk-receipt .pk-qr__caption { font-family: var(--pk-font); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-book); color: var(--pk-text-2); }

/* ---------- till ---------- */
/* a touch till: the products beside the cart. The cart drops under the products when they have less than 420px; the
   products are buttons with the name, price and stock, the count already in the cart in the corner */
.pk-till { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pk-gap); }
.pk-till__products { flex: 999 1 420px; display: grid; gap: var(--pk-space-7); min-width: 0; }
.pk-till__cart { flex: 1 1 320px; display: grid; gap: var(--pk-space-7); min-width: 0; position: sticky; top: var(--pk-gap); }
.pk-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); gap: var(--pk-space-5); }
.pk-product {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--pk-space-4); min-height: 124px; padding: var(--pk-space-6) var(--pk-space-7) var(--pk-space-7); border: 0;
  border-radius: var(--pk-r-tile); background: var(--pk-inset); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--pk-dur-fast) var(--pk-ease), scale var(--pk-dur-instant) var(--pk-ease);
}
.pk-product:hover { background: var(--pk-inset-2); }
.pk-product:active { scale: 0.98; }
.pk-product__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--pk-r-sm); background: var(--pk-card); color: var(--pk-text-2); }
.pk-product__icon > .pk-icon { width: 18px; height: 18px; }
.pk-product__name { align-self: start; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-title); overflow-wrap: anywhere; }
.pk-product__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--pk-space-1) var(--pk-space-4); }
.pk-product__price { font-family: var(--pk-font-figures); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-product__stock { font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-product__stock--low { color: var(--pk-warning-text); font-weight: var(--pk-fw-label); }
.pk-product__count {
  position: absolute; top: var(--pk-space-5); right: var(--pk-space-5); display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: var(--pk-r-pill); background: var(--pk-current); color: var(--pk-on-current); font-family: var(--pk-font-figures);
  font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-bold); font-variant-numeric: tabular-nums;
}
.pk-product:disabled { cursor: not-allowed; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 7%, transparent) 0 1.5px, transparent 1.5px 8px), var(--pk-inset); color: var(--pk-text-3); scale: none; }
.pk-product:disabled .pk-product__stock { color: var(--pk-danger-text); font-weight: var(--pk-fw-label); }

/* plain-surface themes edge the paper with their hairline */
:where([data-theme='corporate'], [data-theme='portal']) :is(.pk-print, .pk-receipt) { box-shadow: var(--pk-ring); }
:where([data-theme='technical']) :is(.pk-print, .pk-receipt) { box-shadow: var(--pk-ring-strong); }

@media screen {
  .pk-only-print { display: none !important; }
}
/* printing: light paper whatever the mode, no menus, bars or buttons, cards flattened to hairline boxes, link addresses
   written out, and rows, signatures and totals kept whole across page breaks */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  html, body { color-scheme: light !important; }
  body.pk { background: none; }
  .pk-no-print, .pk-app > .pk-side, .pk-tabbar, .pk-actionbar, .pk-phone-head, .pk-header__actions, .pk-bar, .pk-toast, .pk-print__bar,
  .pk-btn, .pk-icon-btn { display: none !important; }
  .pk-app { display: block; padding: 0; }
  .pk-main, .pk-page { max-width: none; padding: 0; }
  .pk-card { background: none !important; color: inherit !important; box-shadow: none !important; border: 1px solid var(--pk-line-strong); }
  .pk-inset, .pk-tile { background: none !important; color: inherit !important; }
  .pk-print, .pk-receipt { max-width: none; aspect-ratio: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .pk-receipt { max-width: 72mm; }
  .pk-print + .pk-print, .pk-print__break { break-before: page; }
  :is(.pk-main, .pk-page, .pk-print) a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.85em; color: var(--pk-text-2); overflow-wrap: anywhere; }
  :is(h1, h2, h3, h4, .pk-h1, .pk-h2, .pk-h3, .pk-h4) { break-after: avoid; }
  :is(tr, .pk-kv__row, .pk-sum, .pk-ledger__row, .pk-lineitem, .pk-print__signs, .pk-print__head, .pk-receipt) { break-inside: avoid; }
}
/* ---------- files ---------- */
/* file list: type, name, size, owner and last change per row. The owner and date give way first on a narrow list and their
   short form moves under the name; the name never gives way */
.pk-files { display: grid; container: pk-files / inline-size; }
/* the columns are set on the rows: a container query cannot change the container itself */
.pk-files__head, .pk-file {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 6.5em 11em 7.5em auto; grid-template-areas: 'lead name size owner date end';
  align-items: center; column-gap: var(--pk-space-7);
}
.pk-files__head { padding: 0 var(--pk-space-4) var(--pk-space-4); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-title); color: var(--pk-text-3); }
.pk-files__head > :first-child { grid-column: lead / name; }
.pk-files__head > [data-col='size'] { text-align: right; }
.pk-file { position: relative; min-height: max(56px, var(--pk-tap)); padding: var(--pk-space-4); border-top: 1px solid var(--pk-line); border-radius: var(--pk-r-sm); }
.pk-files__head + .pk-file, .pk-file:first-child { border-top-color: transparent; }
.pk-file:hover { background: var(--pk-inset); }
.pk-file[aria-selected='true'] { background: var(--pk-accent-soft); }
.pk-file:is(:hover, [aria-selected='true']) + .pk-file { border-top-color: transparent; }
.pk-file__lead { grid-area: lead; display: flex; align-items: center; gap: var(--pk-space-6); }
.pk-file__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--pk-r-sm); background: var(--pk-inset); color: var(--pk-text-2); }
.pk-file:is(:hover, [aria-selected='true']) .pk-file__icon { background: var(--pk-card); }
.pk-folder .pk-file__icon { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
.pk-file__body { grid-area: name; min-width: 0; }
/* the name is the row's link: its after covers the row, the controls sit above it */
.pk-file__name { display: block; overflow: hidden; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-title); white-space: nowrap; text-overflow: ellipsis; }
a.pk-file__name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pk-file :is(.pk-checkbox, .pk-file__end) { position: relative; z-index: 1; }
.pk-file__sub { display: none; margin-top: 1px; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-file__size, .pk-file__date { font-size: var(--pk-fs-label); color: var(--pk-text-2); white-space: nowrap; }
.pk-file__size { grid-area: size; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; text-align: right; }
.pk-file__owner { grid-area: owner; display: flex; align-items: center; gap: var(--pk-space-4); min-width: 0; font-size: var(--pk-fs-label); }
.pk-file__owner > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-file__date { grid-area: date; }
.pk-file__end { grid-area: end; display: flex; align-items: center; justify-content: flex-end; gap: max(var(--pk-space-3), 2 * var(--pk-tap-room)); }
/* a folder a file is dragged over */
.pk-folder[data-dragover] { background: var(--pk-accent-soft); box-shadow: var(--pk-ring-active); }
/* a narrow list keeps the name readable: size and date move under it (the sub line), the status leaves the end of the row
   for a line of its own under the name, and a long name wraps to two lines instead of shrinking to a few letters */
@container pk-files (max-width: 719px) {
  .pk-files__head { display: none; }
  .pk-file { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'lead name end' 'lead status end'; }
  .pk-file > :is(.pk-file__size, .pk-file__owner, .pk-file__date) { display: none; }
  .pk-file__sub { display: block; }
  .pk-file__name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
  .pk-file__end { display: contents; }
  .pk-file__end > :not(.pk-icon-btn) { grid-area: status; justify-self: start; margin-top: var(--pk-space-2); }
  .pk-file__end > .pk-icon-btn { grid-area: end; align-self: center; position: relative; z-index: 1; }
}
/* grid view: a tile per file, two abreast on a phone */
.pk-files--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--pk-space-5); }
.pk-files--grid > .pk-files__head { display: none; }
.pk-files--grid > .pk-file {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'lead end' 'name name'; align-items: start; row-gap: var(--pk-space-6);
  padding: var(--pk-space-6); border-top: 0; border-radius: var(--pk-r-tile); background: var(--pk-inset);
}
.pk-files--grid > .pk-file[aria-selected='true'] { background: var(--pk-accent-soft); }
.pk-files--grid .pk-file__icon { width: 48px; height: 48px; background: var(--pk-card); }
.pk-files--grid .pk-file__sub { display: block; }
.pk-files--grid > .pk-file > :is(.pk-file__size, .pk-file__owner, .pk-file__date) { display: none; }

/* folder tree beside the list on a wide browser */
.pk-filebrowser { display: flex; align-items: flex-start; gap: var(--pk-space-12); container: pk-filebrowser / inline-size; }
.pk-filebrowser > .pk-files { flex: 1; min-width: 0; }
.pk-tree { flex: 0 0 clamp(180px, 24%, 230px); display: grid; align-content: start; gap: var(--pk-space-1); font-size: var(--pk-fs-small); }
.pk-tree__item { display: flex; align-items: center; gap: var(--pk-space-5); min-height: max(36px, var(--pk-tap)); padding: 0 var(--pk-space-5); border-radius: var(--pk-r-xs); color: var(--pk-text-2); }
.pk-tree__item:hover { background: var(--pk-inset); color: var(--pk-text); }
.pk-tree__item[aria-current='page'] { background: var(--pk-current); color: var(--pk-on-current); font-weight: var(--pk-fw-title); }
.pk-tree__item > .pk-icon { width: 18px; height: 18px; }
.pk-tree__count { margin-left: auto; font-family: var(--pk-font-figures); font-size: var(--pk-fs-caption); font-variant-numeric: tabular-nums; }
.pk-tree__group { display: grid; gap: var(--pk-space-1); padding-left: var(--pk-space-9); }
@container pk-filebrowser (max-width: 699px) {
  .pk-filebrowser > .pk-tree { display: none; }
}

/* document preview: a bar with the name and the tools over a stage holding the pages; the paper stays white in both modes */
.pk-preview { --pk-preview-h: 620px; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; overflow: hidden; border-radius: var(--pk-r-panel); background: var(--pk-inset); }
.pk-preview__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-6); padding: var(--pk-space-5) var(--pk-space-6) var(--pk-space-5) var(--pk-space-8); border-bottom: 1px solid var(--pk-line); background: var(--pk-card); }
.pk-preview__name { flex: 1 1 12em; min-width: 0; font-weight: var(--pk-fw-strong); white-space: normal; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.pk-preview__pages { font-family: var(--pk-font-figures); font-size: var(--pk-fs-meta); font-variant-numeric: tabular-nums; color: var(--pk-text-2); white-space: nowrap; }
.pk-preview__tools { display: flex; align-items: center; gap: max(var(--pk-space-2), 2 * var(--pk-tap-room)); }
.pk-preview__stage { display: grid; justify-items: center; align-content: start; gap: var(--pk-space-8); max-height: var(--pk-preview-h); padding: var(--pk-space-12) var(--pk-space-8); overflow: auto; overscroll-behavior: contain; }
/* the preview cuts what leaves it: the stage, focused to scroll by keys, draws its ring inside */
.pk-preview__stage:focus-visible { outline-offset: calc(-1 * var(--pk-focus-room)); }
/* the page is paper in both modes: its fields take a dark ring */
.pk-preview__page { --pk-focus-outline: 2px solid var(--pk-on-bright); position: relative; width: min(100%, 520px); aspect-ratio: 210 / 297; background: #ffffff; box-shadow: var(--pk-ring-out), 0 6px 20px -8px light-dark(rgba(17, 17, 17, 0.25), rgba(0, 0, 0, 0.6)); }
.pk-preview__page > img { display: block; width: 100%; height: 100%; }
/* a value read by the assistant: an ai-coloured box on the page with its label above; the app sets its place in % */
.pk-preview__mark {
  position: absolute; left: var(--pk-x); top: var(--pk-y); width: var(--pk-w); height: var(--pk-h); border-radius: var(--pk-r-mark);
  background: color-mix(in srgb, var(--pk-ai) 22%, transparent); box-shadow: 0 0 0 2px var(--pk-ai);
}
.pk-preview__marklabel {
  position: absolute; left: calc(-1 * var(--pk-space-1)); bottom: calc(100% + var(--pk-space-2)); display: inline-flex; align-items: center; gap: var(--pk-space-2); padding: var(--pk-space-1) var(--pk-space-4);
  border-radius: var(--pk-r-tag); background: var(--pk-ai); color: var(--pk-on-bright); font-size: var(--pk-fs-axis); font-weight: var(--pk-fw-strong); white-space: nowrap;
}
.pk-preview__marklabel > .pk-icon { width: 12px; height: 12px; }
.pk-preview__none { display: grid; justify-items: center; align-content: center; gap: var(--pk-space-4); min-height: 280px; padding: var(--pk-space-16) var(--pk-space-8); text-align: center; }
.pk-preview__none > .pk-icon { width: 40px; height: 40px; color: var(--pk-text-3); stroke-width: 1.5; }

/* versions of a file, the newest first */
.pk-versions { display: grid; }
.pk-version { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-1) var(--pk-space-6); padding: var(--pk-space-6) 0; border-top: 1px solid var(--pk-line); }
.pk-version:first-child { border-top: 0; padding-top: var(--pk-space-1); }
.pk-version__tag { display: grid; place-items: center; min-width: 36px; height: 26px; padding: 0 var(--pk-space-4); border-radius: var(--pk-r-tag); background: var(--pk-inset); font-family: var(--pk-mono); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); }
.pk-version__body { min-width: 0; font-size: var(--pk-fs-small); }
.pk-version__meta { display: block; font-size: var(--pk-fs-caption); color: var(--pk-text-2); }

/* ---------- image crop and avatar sizes ---------- */
/* the frame stays, the photo moves and zooms under it; outside the frame a veil, inside thirds lines */
.pk-crop { --pk-crop-zoom: 1; --pk-crop-turn: 0deg; --pk-crop-x: 0px; --pk-crop-y: 0px; display: grid; gap: var(--pk-space-7); min-width: 0; }
.pk-crop__stage {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--pk-r-panel);
  background: light-dark(var(--pk-dark), var(--pk-canvas)); box-shadow: 0 0 0 1px light-dark(transparent, var(--pk-line)); touch-action: none; cursor: grab;
}
.pk-crop[data-dragging] .pk-crop__stage { cursor: grabbing; }
.pk-crop[data-dragging] .pk-crop__stage > img { transition: none; }
.pk-crop__stage > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none;
  transform: translate(var(--pk-crop-x), var(--pk-crop-y)) rotate(var(--pk-crop-turn)) scale(var(--pk-crop-zoom)); transition: transform var(--pk-dur-base) var(--pk-ease);
}
.pk-crop__frame {
  position: relative; z-index: 1; height: 78%; aspect-ratio: 1; pointer-events: none;
  box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--pk-on-bright) 58%, transparent), inset 0 0 0 1.5px var(--pk-on-dark);
}
.pk-crop__frame::before, .pk-crop__frame::after { content: ''; position: absolute; border: 0 solid color-mix(in srgb, var(--pk-on-dark) 40%, transparent); }
.pk-crop__frame::before { inset: 0 33.33%; border-inline-width: 1px; }
.pk-crop__frame::after { inset: 33.33% 0; border-block-width: 1px; }
.pk-crop__frame--circle { border-radius: 50%; }
.pk-crop__frame--circle::before, .pk-crop__frame--circle::after { display: none; }
.pk-crop__frame--portrait { aspect-ratio: 4 / 5; }
.pk-crop__frame--wide { width: 88%; height: auto; aspect-ratio: 16 / 9; }
.pk-crop__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-5) var(--pk-space-7); }
.pk-crop__tools > .pk-slider__pair { flex: 1 1 220px; }
.pk-crop__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-5); }
.pk-crop__foot > .pk-meta { margin-right: auto; }

.pk-avatar--xl { width: 72px; height: 72px; font-size: var(--pk-fs-figure-md); }
.pk-avatar--2xl { width: 96px; height: 96px; font-size: var(--pk-fs-figure-xl); }
/* logos are square */
.pk-avatar--square { border-radius: var(--pk-r-sm); }
.pk-avatar--square.pk-avatar--2xl { border-radius: var(--pk-r-tile); }
/* the camera badge sits on the edge, so the avatar shows what overflows and its photo keeps the round shape itself */
.pk-avatar:has(> .pk-avatar__edit) { position: relative; overflow: visible; }
.pk-avatar:has(> .pk-avatar__edit) > img { border-radius: inherit; }
.pk-avatar__edit {
  position: absolute; right: calc(-1 * var(--pk-space-1)); bottom: calc(-1 * var(--pk-space-1)); display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: var(--pk-r-pill); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-cutout), 0 1px 4px light-dark(rgba(17, 17, 17, 0.2), rgba(0, 0, 0, 0.6)); cursor: pointer;
}
.pk-avatar--2xl > .pk-avatar__edit { right: 0; bottom: 0; width: 34px; height: 34px; }
.pk-avatar__edit > .pk-icon { width: 16px; height: 16px; }

/* ---------- required documents ---------- */
/* one slot per named document; a missing one is an outlined drop target that takes its own file */
.pk-docs { display: grid; gap: var(--pk-space-4); container: pk-docs / inline-size; }
.pk-docs__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3) var(--pk-space-6); margin-bottom: var(--pk-space-2); }
.pk-docs__count { font-family: var(--pk-font-figures); font-size: var(--pk-fs-meta); font-variant-numeric: tabular-nums; color: var(--pk-text-2); }
.pk-doc {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'state body end';
  align-items: center; gap: var(--pk-space-3) var(--pk-space-7); min-height: 64px; padding: var(--pk-space-6) var(--pk-space-6) var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-inset);
}
.pk-doc__state { grid-area: state; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--pk-r-pill); background: var(--pk-card); color: var(--pk-text-2); }
.pk-doc__state > .pk-icon { width: 18px; height: 18px; }
.pk-doc__body { grid-area: body; min-width: 0; }
.pk-doc__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pk-space-1) var(--pk-space-4); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); }
.pk-doc__need { font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-book); color: var(--pk-text-3); }
.pk-doc__meta { display: block; margin-top: var(--pk-space-1); overflow-wrap: anywhere; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-doc__meta .pk-progress { margin-top: var(--pk-space-4); height: 6px; background: var(--pk-card); }
.pk-doc__end { grid-area: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--pk-space-4); }
/* the whole missing slot is the upload target: its file input covers it */
.pk-doc--missing { background: transparent; outline: 1.5px dashed var(--pk-line-strong); outline-offset: -1.5px; cursor: pointer; }
.pk-doc--missing:hover { background: var(--pk-inset); }
.pk-doc--missing .pk-doc__state { background: var(--pk-inset); }
.pk-doc__file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pk-doc:has(> .pk-doc__file:focus-visible) { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
.pk-doc--missing:has(> .pk-doc__file) .pk-doc__end { pointer-events: none; }
.pk-doc--overdue { outline-color: var(--pk-warning); }
.pk-doc--overdue .pk-doc__meta { color: var(--pk-warning-text); font-weight: var(--pk-fw-label); }
.pk-doc--approved .pk-doc__state { background: var(--pk-success); color: var(--pk-on-success); }
.pk-doc--rejected { background: var(--pk-danger-soft); }
.pk-doc--rejected .pk-doc__state { background: var(--pk-danger); color: var(--pk-on-danger); }
.pk-doc--rejected :is(.pk-doc__meta, .pk-doc__need) { color: var(--pk-danger-text); }
.pk-doc--rejected .pk-btn--soft { background: var(--pk-card); }
@container pk-docs (max-width: 459px) {
  .pk-doc { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'state body' '. end'; }
  .pk-doc__end { justify-content: flex-start; }
}

/* ---------- before and after ---------- */
/* two photos stacked, the after one cut at the divider; a hidden range input across the photo moves it, so dragging
   anywhere and the arrow keys both work */
.pk-beforeafter { --pk-split: 50%; position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--pk-r-panel); background: var(--pk-inset); user-select: none; }
.pk-beforeafter > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pk-beforeafter__after { clip-path: inset(0 0 0 var(--pk-split)); }
.pk-beforeafter__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pk-split); width: 2px; translate: -1px 0; pointer-events: none;
  background: var(--pk-on-dark); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pk-on-bright) 18%, transparent);
}
.pk-beforeafter__handle > .pk-icon {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; box-sizing: border-box; width: 44px; height: 44px; padding: 11px;
  border-radius: var(--pk-r-pill); background: var(--pk-on-dark); color: var(--pk-on-bright); box-shadow: 0 2px 10px color-mix(in srgb, var(--pk-on-bright) 30%, transparent);
}
.pk-beforeafter:has(> .pk-beforeafter__range:focus-visible) .pk-beforeafter__handle > .pk-icon { box-shadow: 0 0 0 3px var(--pk-on-bright), 0 0 0 5px var(--pk-on-dark); }
.pk-beforeafter__label {
  position: absolute; top: var(--pk-space-6); left: var(--pk-space-6); z-index: 1; display: grid; padding: 5px var(--pk-space-5); border-radius: var(--pk-r-tag); pointer-events: none;
  background: color-mix(in srgb, var(--pk-on-bright) 60%, transparent); color: var(--pk-on-dark); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-compact);
}
.pk-beforeafter__label > small { font-size: var(--pk-fs-axis); font-weight: var(--pk-fw-book); }
.pk-beforeafter__label--after { left: auto; right: var(--pk-space-6); text-align: right; }
.pk-beforeafter__range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }

/* ---------- set-up checklist ---------- */
/* what a new space still needs: the next step stands out with its action, finished ones say who did them */
.pk-setup { display: grid; gap: var(--pk-space-6); container: pk-setup / inline-size; }
.pk-setup__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-7); }
.pk-setup__head > .pk-btn { margin-left: auto; }
.pk-setup__progress { display: flex; align-items: center; gap: var(--pk-space-5); font-family: var(--pk-font-figures); font-size: var(--pk-fs-meta); font-variant-numeric: tabular-nums; color: var(--pk-text-2); }
.pk-setup__steps { display: grid; margin: 0; padding: 0; list-style: none; }
.pk-setup__step {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: 'mark title cta' 'mark why cta';
  align-items: center; gap: var(--pk-space-1) var(--pk-space-7); padding: var(--pk-space-7) var(--pk-space-6); border-top: 1px solid var(--pk-line);
}
.pk-setup__step:first-child { border-top-color: transparent; }
.pk-setup__mark {
  grid-area: mark; align-self: start; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px;
  border-radius: var(--pk-r-pill); box-shadow: var(--pk-ring-mark); color: var(--pk-text-3);
}
.pk-setup__mark > .pk-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.pk-setup__title { grid-area: title; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); }
.pk-setup__why { grid-area: why; font-size: var(--pk-fs-label); color: var(--pk-text-2); }
.pk-setup__cta { grid-area: cta; }
.pk-setup__step--next { border-radius: var(--pk-r-tile); border-top-color: transparent; background: var(--pk-inset); }
.pk-setup__step--next + .pk-setup__step { border-top-color: transparent; }
.pk-setup__step--next .pk-setup__mark { box-shadow: var(--pk-ring-active); }
.pk-setup__step--done .pk-setup__mark { background: var(--pk-success); color: var(--pk-on-success); box-shadow: none; }
.pk-setup__step:is(.pk-setup__step--done, .pk-setup__step--skipped, .pk-setup__step--blocked) .pk-setup__title { color: var(--pk-text-2); font-weight: var(--pk-fw-title); }
.pk-setup__step--skipped .pk-setup__mark { box-shadow: var(--pk-ring-mark-strong); }
.pk-setup__step--blocked .pk-setup__mark { box-shadow: none; background: var(--pk-inset); }
/* finished: one quiet line that can be hidden */
.pk-setup--finished .pk-setup__steps { display: none; }
.pk-setup--finished .pk-setup__mark { background: var(--pk-success); color: var(--pk-on-success); box-shadow: none; }
@container pk-setup (max-width: 479px) {
  .pk-setup__step { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: 'mark title' 'mark why' 'mark cta'; }
  .pk-setup__cta { justify-self: start; margin-top: var(--pk-space-4); }
}

/* ---------- step-by-step form ---------- */
/* steps listed beside the form; under 640px the list folds into "Adım 2 / 4" with dashes and the foot stays at the bottom */
.pk-wizard { container: pk-wizard / inline-size; }
.pk-wizard__layout { display: grid; grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); grid-template-areas: 'steps body' 'steps foot'; gap: 0 var(--pk-space-14); }
.pk-wizard__steps { grid-area: steps; display: grid; align-content: start; gap: var(--pk-space-2); margin: 0; padding: 0; list-style: none; }
.pk-wizard__step {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: var(--pk-space-6); width: 100%; min-height: max(52px, var(--pk-tap));
  padding: var(--pk-space-4) var(--pk-space-5); border: 0; border-radius: var(--pk-r-tile); background: transparent; color: var(--pk-text-2); font: inherit; text-align: left;
}
.pk-wizard__step:not([aria-disabled='true']) { cursor: pointer; }
.pk-wizard__step:not([aria-disabled='true'], [aria-current='step']):hover { background: var(--pk-inset); color: var(--pk-text); }
.pk-wizard__node {
  grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--pk-r-pill); background: var(--pk-inset);
  font-family: var(--pk-font-figures); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums;
}
.pk-wizard__node > .pk-icon { width: 15px; height: 15px; stroke-width: 2.4; }
.pk-wizard__label { font-size: var(--pk-fs-control); font-weight: var(--pk-fw-title); line-height: var(--pk-lh-compact); }
.pk-wizard__sub { font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-wizard__step[aria-current='step'] { background: var(--pk-inset); color: var(--pk-text); }
.pk-wizard__step[aria-current='step'] .pk-wizard__node { background: var(--pk-primary); color: var(--pk-on-primary); }
.pk-wizard__step[data-state='done'] .pk-wizard__node { background: var(--pk-success-soft); color: var(--pk-success-text); }
.pk-wizard__step[data-state='error'] .pk-wizard__node { background: var(--pk-danger); color: var(--pk-on-danger); }
.pk-wizard__step[data-state='error'] .pk-wizard__sub { color: var(--pk-danger-text); font-weight: var(--pk-fw-label); }
.pk-wizard__step[data-state='locked'] { color: var(--pk-text-3); cursor: not-allowed; }
.pk-wizard__compact { grid-area: compact; display: none; align-items: center; gap: var(--pk-space-6); margin-bottom: var(--pk-space-9); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-title); }
.pk-wizard__compact > .pk-dashes { margin-left: auto; }
.pk-wizard__body { grid-area: body; display: grid; align-content: start; gap: var(--pk-space-9); min-width: 0; }
.pk-wizard__panel { display: grid; gap: var(--pk-space-9); }
.pk-wizard__foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-5); margin-top: var(--pk-space-12); padding-top: var(--pk-space-8); border-top: 1px solid var(--pk-line); }
.pk-wizard__draft { margin-right: auto; font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
/* the review step: each section with a link back to its step */
.pk-review { display: grid; gap: var(--pk-space-6); }
.pk-review__section { padding: var(--pk-space-7) var(--pk-space-8); border-radius: var(--pk-r-tile); background: var(--pk-inset); }
.pk-review__head { display: flex; align-items: center; gap: var(--pk-space-5); margin-bottom: var(--pk-space-4); font-weight: var(--pk-fw-strong); }
.pk-review__head > .pk-link { margin-left: auto; font-size: var(--pk-fs-label); font-weight: var(--pk-fw-medium); }
@container pk-wizard (max-width: 639px) {
  .pk-wizard__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'compact' 'body' 'foot'; }
  .pk-wizard__steps { display: none; }
  .pk-wizard__compact { display: flex; }
  .pk-wizard__foot { position: sticky; bottom: 0; z-index: 2; margin-top: var(--pk-space-9); padding-bottom: calc(var(--pk-space-6) + env(safe-area-inset-bottom, 0px)); background: var(--pk-card); }
  .pk-wizard__draft { flex-basis: 100%; }
  .pk-wizard__foot > .pk-btn:last-child { flex: 1; }
}

/* ---------- import and export ---------- */
/* column mapping: the file's column with sample values, an arrow, the field it goes to and whether that works */
.pk-import { display: grid; gap: var(--pk-space-9); container: pk-import / inline-size; }
.pk-import__map { display: grid; }
.pk-import__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) minmax(9em, auto); grid-template-areas: 'col arrow field state';
  align-items: center; gap: var(--pk-space-3) var(--pk-space-7); padding: var(--pk-space-6) 0; border-top: 1px solid var(--pk-line);
}
.pk-import__row--head { padding-top: 0; border-top: 0; font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-title); color: var(--pk-text-3); }
.pk-import__col { grid-area: col; min-width: 0; }
.pk-import__name { display: block; font-size: var(--pk-fs-control); font-weight: var(--pk-fw-strong); }
.pk-import__sample { display: block; overflow: hidden; font-size: var(--pk-fs-caption); color: var(--pk-text-3); white-space: nowrap; text-overflow: ellipsis; }
.pk-import__arrow { grid-area: arrow; width: 18px; height: 18px; color: var(--pk-text-3); }
.pk-import__field { grid-area: field; min-width: 0; }
.pk-import__state { grid-area: state; display: inline-flex; align-items: center; gap: var(--pk-space-3); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-label); color: var(--pk-success-text); }
.pk-import__state > .pk-icon { width: 16px; height: 16px; }
.pk-import__row[data-state='missing'] .pk-import__state { color: var(--pk-danger-text); }
.pk-import__row[data-state='skip'] .pk-import__state { color: var(--pk-text-3); font-weight: var(--pk-fw-book); }
.pk-import__row[data-state='skip'] .pk-import__name { color: var(--pk-text-2); }
/* a row the import cannot read: tinted, with the reason in its own cell */
.pk-table tr.pk-import__bad td { background: color-mix(in srgb, var(--pk-danger-soft) 70%, transparent); }
.pk-import__issue { display: inline-flex; align-items: center; gap: var(--pk-space-3); color: var(--pk-danger-text); font-weight: var(--pk-fw-label); white-space: nowrap; }
.pk-import__issue > .pk-icon { width: 15px; height: 15px; }
@container pk-import (max-width: 559px) {
  .pk-import__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'col state' 'field field'; }
  .pk-import__row--head, .pk-import__arrow { display: none; }
}
.pk-export { display: grid; gap: var(--pk-space-9); }

/* ---------- connections ---------- */
/* a calendar feed, an e-mail sender, a messaging channel or a directory: whether it works, since when, and what it may do */
.pk-connects { display: grid; container: pk-connects / inline-size; }
.pk-connect {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'logo body end' 'logo detail detail';
  align-items: center; gap: var(--pk-space-2) var(--pk-space-7); padding: var(--pk-space-8) 0; border-top: 1px solid var(--pk-line);
}
.pk-connect:first-child { padding-top: var(--pk-space-2); border-top: 0; }
.pk-connect__logo { grid-area: logo; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--pk-r-sm); background: var(--pk-inset); color: var(--pk-text); }
.pk-connect__logo > img { width: 24px; height: 24px; }
.pk-connect__body { grid-area: body; min-width: 0; }
.pk-connect__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-5); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); }
.pk-connect__desc { display: block; margin-top: var(--pk-space-1); font-size: var(--pk-fs-label); color: var(--pk-text-2); }
.pk-connect__end { grid-area: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--pk-space-4); }
.pk-connect__detail { grid-area: detail; min-width: 0; margin-top: var(--pk-space-4); }
.pk-connect__detail:empty { display: none; }
.pk-connect__perms { display: flex; flex-wrap: wrap; gap: var(--pk-space-3) var(--pk-space-8); margin: 0; padding: 0; list-style: none; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-connect__perms > li { display: inline-flex; align-items: center; gap: var(--pk-space-3); }
.pk-connect__perms .pk-icon { width: 14px; height: 14px; color: var(--pk-success-text); }
@container pk-connects (max-width: 519px) {
  .pk-connect { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'logo body' 'logo end' 'logo detail'; }
  .pk-connect__end { justify-content: flex-start; margin-top: var(--pk-space-4); }
}

/* ---------- audit log ---------- */
/* who did what to which record, when and from where; a row opens to its field changes */
.pk-audit { display: grid; container: pk-audit / inline-size; }
.pk-audit__row {
  display: grid; grid-template-columns: 4.5em minmax(8em, 12em) minmax(0, 1fr) auto auto; grid-template-areas: 'time actor action device toggle';
  align-items: center; gap: var(--pk-space-2) var(--pk-space-7); min-height: 52px; padding: var(--pk-space-4) 0; border-top: 1px solid var(--pk-line); font-size: var(--pk-fs-small);
}
.pk-listhead + .pk-audit__row { border-top: 0; }
.pk-audit__time { grid-area: time; font-family: var(--pk-mono); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-audit__actor { grid-area: actor; display: flex; align-items: center; gap: var(--pk-space-4); min-width: 0; font-weight: var(--pk-fw-title); }
.pk-audit__actor > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-audit__actor--system { color: var(--pk-text-2); font-weight: var(--pk-fw-medium); }
.pk-audit__bot { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--pk-r-pill); background: var(--pk-inset); color: var(--pk-text-2); }
.pk-audit__bot > .pk-icon { width: 16px; height: 16px; }
.pk-audit__action { grid-area: action; min-width: 0; color: var(--pk-text-2); }
.pk-audit__target { color: var(--pk-text); font-weight: var(--pk-fw-title); }
a.pk-audit__target:hover { text-decoration: underline; }
.pk-audit__device { grid-area: device; font-family: var(--pk-mono); font-size: var(--pk-fs-fine); color: var(--pk-text-3); white-space: nowrap; }
.pk-audit__toggle { grid-area: toggle; }
.pk-audit__toggle[aria-expanded='true'] > .pk-icon { rotate: 180deg; }
.pk-audit__detail { grid-column: 3 / -1; padding-bottom: var(--pk-space-3); }
.pk-audit__detail > .pk-diff { margin-top: 0; }
.pk-audit__row[data-state='failed'] .pk-audit__action { color: var(--pk-danger-text); }
.pk-audit__reason { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-6); padding: var(--pk-space-5) var(--pk-space-6); border-radius: var(--pk-r-sm); background: var(--pk-danger-soft); color: var(--pk-danger-text); font-size: var(--pk-fs-meta); }
.pk-audit__reason > .pk-btn { margin-left: auto; background: var(--pk-card); }
@container pk-audit (max-width: 639px) {
  .pk-audit__row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'actor time toggle' 'action action action' 'device device device'; }
  .pk-audit__detail { grid-column: 1 / -1; }
}

/* ---------- board extras ---------- */
/* columns size like the grid did (equal, 250px at least, scrolling past the edge); a folded column keeps only its head */
.pk-board__count { margin-left: auto; font-family: var(--pk-font-figures); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-medium); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
.pk-board__col[data-over] .pk-board__count { color: var(--pk-warning-text); font-weight: var(--pk-fw-bold); }
.pk-board__col[data-over] { box-shadow: var(--pk-ring-warning); }
.pk-board__col--collapsed { flex: 0 0 56px; justify-items: center; align-self: stretch; padding: var(--pk-space-5) var(--pk-space-3); }
.pk-board__col--collapsed > :not(.pk-board__head) { display: none; }
.pk-board__col--collapsed > .pk-board__head { flex-direction: column; padding: 0; }
.pk-board__col--collapsed .pk-board__name { writing-mode: vertical-rl; }
.pk-board__col--collapsed .pk-board__count { margin: 0; }
.pk-board__add {
  display: flex; align-items: center; gap: var(--pk-space-4); width: 100%; min-height: max(40px, var(--pk-tap)); padding: 0 var(--pk-space-6); border: 1.5px dashed var(--pk-line-strong);
  border-radius: var(--pk-r-split); background: transparent; color: var(--pk-text-2); font: inherit; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-title); cursor: pointer;
}
.pk-board__add:hover { background: var(--pk-card); color: var(--pk-text); }
.pk-board__new { display: grid; gap: var(--pk-space-4); padding: var(--pk-space-5); border-radius: var(--pk-r-split); background: var(--pk-card); box-shadow: var(--pk-ring-chosen); }
.pk-board__new > textarea { min-height: 64px; padding: var(--pk-space-2) var(--pk-space-1); border: 0; background: transparent; color: inherit; font: inherit; resize: none; }
.pk-board__new > textarea:focus { outline: 0; }
.pk-board__new > .pk-row { justify-content: flex-end; }
.pk-board__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3) var(--pk-space-5); font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-board__meta > .pk-avatars { margin-left: auto; }
.pk-board__checks { display: inline-flex; align-items: center; gap: 5px; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; }
.pk-board__checks > .pk-icon { width: 14px; height: 14px; }
.pk-board__empty { padding: var(--pk-space-9) var(--pk-space-4); font-size: var(--pk-fs-meta); color: var(--pk-text-3); text-align: center; }
/* lanes: one row of columns per person */
.pk-board__lanes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-8); }
.pk-board__lane { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-5); }
.pk-board__lane + .pk-board__lane { padding-top: var(--pk-space-8); border-top: 1px solid var(--pk-line); }
.pk-board__lanehead { display: flex; align-items: center; gap: var(--pk-space-5); font-weight: var(--pk-fw-strong); }
/* on a phone one column at a time, chosen with the tabs above */
.pk-boardview { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); container: pk-boardview / inline-size; }
.pk-boardview > .pk-board__tabs { display: none; }
@container pk-boardview (max-width: 559px) {
  .pk-boardview > .pk-board__tabs { display: flex; }
  .pk-boardview > .pk-board > .pk-board__col:not([data-current]) { display: none; }
  .pk-boardview > .pk-board > .pk-board__col { flex-basis: 100%; }
}

/* touch: the small parts reach the 44px floor with an invisible ring */
@media (pointer: coarse), (max-width: 1023px) {
  .pk-avatar__edit::after { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
}
/* ---------- table extras ---------- */
/* sticky header: inside a height-capped box (pk-table-wrap--capped), or on page scroll in a box that does not scroll
   (pk-table-wrap--page; such a table has to fit, pk-col-md/lg still drop columns) */
.pk-table-wrap--capped { max-height: min(460px, 70vh); overflow: auto; overscroll-behavior: contain; scroll-padding-block: var(--pk-focus-room); }
.pk-table-wrap--page { overflow: visible; }
.pk-table--sticky thead th { position: sticky; top: var(--pk-sticky-top, 0px); z-index: 2; }
/* a sticky cell stops at the box's padding, which keeps the touch room: the capped box's header and totals sit on its edge */
.pk-table-wrap--capped > .pk-table--sticky thead th { top: calc(-1 * var(--pk-tap-room)); }
:is([data-theme='corporate'], [data-theme='portal']) .pk-table.pk-table--sticky thead th { background: var(--pk-card); }
/* first column pinned while a wide table scrolls sideways */
.pk-table .pk-table__pin { position: sticky; left: 0; z-index: 1; background: var(--pk-card); box-shadow: var(--pk-edge-right); }
.pk-table thead .pk-table__pin { z-index: 3; background: var(--pk-inset); }
:is([data-theme='corporate'], [data-theme='portal']) .pk-table thead th.pk-table__pin { background: var(--pk-card); box-shadow: var(--pk-edge-right), var(--pk-edge-bottom-strong); }
.pk-table .pk-table__num { text-align: right; white-space: nowrap; }
.pk-table td.pk-table__num { font-family: var(--pk-font-figures); font-size: var(--pk-figures-size); font-variant-numeric: tabular-nums; }
/* totals in tfoot (sticky at the bottom of a sticky table) and subtotals after a group */
.pk-table .pk-table__total > :is(th, td) {
  padding: var(--pk-cell-y) var(--pk-space-7); border-top: 1.5px solid var(--pk-line-strong); border-radius: 0; background: var(--pk-card);
  font-size: inherit; font-weight: var(--pk-fw-bold); color: var(--pk-text); text-align: left;
}
.pk-table tbody tr.pk-table__subtotal > :is(th, td) {
  padding: calc(var(--pk-cell-y) - 3px) var(--pk-space-7); border-bottom: 1px solid var(--pk-line); border-radius: 0;
  background: color-mix(in srgb, var(--pk-inset) 65%, var(--pk-card)); font-size: inherit; font-weight: var(--pk-fw-strong); color: var(--pk-text); text-align: left;
}
.pk-table tbody tr.pk-table__subtotal > th { font-weight: var(--pk-fw-label); color: var(--pk-text-2); }
.pk-table :is(.pk-table__total, .pk-table__subtotal) > .pk-table__num { text-align: right; }
.pk-table :is(.pk-table__total, .pk-table__subtotal) > td.pk-table__num { font-family: var(--pk-font-figures); font-size: var(--pk-figures-size); font-variant-numeric: tabular-nums; }
.pk-table--sticky .pk-table__total > :is(th, td) { position: sticky; bottom: 0; z-index: 2; }
.pk-table-wrap--capped > .pk-table--sticky .pk-table__total > :is(th, td) { bottom: calc(-1 * var(--pk-tap-room)); }
.pk-table .pk-table__total > .pk-table__pin { z-index: 3; }
/* row expansion: the toggle turns, the detail row runs under the row across every column */
.pk-table__toggle {
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--pk-h-btn-sm); height: var(--pk-h-btn-sm); margin-block: calc(-1 * var(--pk-space-3));
  padding: 0; border: 0; border-radius: var(--pk-r-control); background: transparent; color: var(--pk-text-2); cursor: pointer;
}
.pk-table__toggle:hover { background: var(--pk-inset); color: var(--pk-text); }
.pk-table__toggle > .pk-icon { width: 18px; height: 18px; transition: rotate var(--pk-dur-move) var(--pk-ease); }
.pk-table__toggle[aria-expanded='true'] > .pk-icon { rotate: 90deg; }
.pk-table tbody tr:has(.pk-table__toggle[aria-expanded='true']) > td,
.pk-table tbody tr.pk-table__detail > td { background: color-mix(in srgb, var(--pk-inset) 45%, var(--pk-card)); }
.pk-table tbody tr:has(.pk-table__toggle[aria-expanded='true']) > td { border-bottom-color: transparent; }
.pk-table tbody tr.pk-table__detail > td { padding: 0 var(--pk-space-7) var(--pk-cell-y); white-space: normal; }
.pk-table__detail .pk-diff { background: var(--pk-card); }
/* the whole row opens the record: the first cell's link covers the row, the row's own controls stay above it */
.pk-table tr:has(.pk-table__link) { position: relative; }
.pk-table tbody tr:has(.pk-table__link) { cursor: pointer; }
.pk-table__link { display: inline-block; padding-block: var(--pk-cell-y); margin-block: calc(-1 * var(--pk-cell-y)); font-weight: var(--pk-fw-title); color: inherit; }
.pk-table__link::after { content: ''; position: absolute; inset: 0; }
.pk-table__link:focus-visible { outline: 0; }
.pk-table__link:focus-visible::after { outline: var(--pk-focus-outline); outline-offset: calc(-1 * var(--pk-focus-offset)); border-radius: var(--pk-r-xs); }
.pk-table tr:has(.pk-table__link) :is(button, input, select, label, a:not(.pk-table__link)) { position: relative; z-index: 1; }
/* a long user string (file name, e-mail) cut to its column; focus shows all of it */
.pk-table__clip { display: block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--pk-r-fine); }
.pk-table__clip:focus { white-space: normal; overflow-wrap: anywhere; }
.pk-table--compact { --pk-cell-y: max(calc(8px * var(--pk-ds)), var(--pk-tap) / 4); font-size: var(--pk-fs-small); }
.pk-table--compact :is(th, td) { padding-inline: var(--pk-space-5); }
.pk-table tbody tr.pk-table__empty > td { padding: var(--pk-space-2) 0 0; border-bottom: 0; white-space: normal; background: none; }
.pk-table td > .pk-skeleton { min-width: 48px; }

/* inline edit (a table cell, a pk-kv value): the value is a button with a dashed underline; it turns into a field, Enter saves,
   Esc cancels. data-state: saving, saved, error */
.pk-edit {
  position: relative; display: inline-flex; align-items: center; gap: var(--pk-space-3); max-width: 100%; min-height: var(--pk-h-btn-sm); margin: calc(-1 * var(--pk-space-3)) calc(-1 * var(--pk-space-4));
  padding: 0 var(--pk-space-4); border: 0; border-radius: var(--pk-r-field); background: transparent; font: inherit; color: inherit; text-align: inherit; cursor: text;
}
.pk-edit:hover { background: var(--pk-inset); }
.pk-edit__value { min-width: 0; text-decoration: underline dashed var(--pk-line-control) 1px; text-underline-offset: 4px; }
.pk-edit__icon { width: 14px; height: 14px; color: var(--pk-text-3); opacity: 0; transition: opacity var(--pk-dur-fast) var(--pk-ease); }
.pk-edit:is(:hover, :focus-visible) .pk-edit__icon { opacity: 1; }
.pk-edit__mark { width: 16px; height: 16px; flex: none; }
.pk-edit__msg { font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-label); white-space: nowrap; }
.pk-edit[data-state='saving'] { cursor: progress; }
.pk-edit[data-state='saving']::before { content: ''; width: 12px; height: 12px; flex: none; border-radius: var(--pk-r-pill); border: 2px solid currentColor; border-right-color: transparent; animation: pk-spin var(--pk-dur-spin) linear infinite; }
.pk-edit[data-state='saved'] .pk-edit__mark { color: var(--pk-success-text); }
.pk-edit[data-state='error'] { color: var(--pk-danger-text); }
.pk-edit[data-state='error'] .pk-edit__value { text-decoration-color: var(--pk-danger); }
.pk-input.pk-edit__input { width: calc(8ch + 20px); height: max(var(--pk-h-btn-sm), var(--pk-tap)); margin-block: calc(-1 * var(--pk-space-3)); padding: 0 var(--pk-space-5); text-align: right; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; }
.pk-kv .pk-edit { justify-content: flex-start; }

/* column chooser: a pop-up on wide screens, a bottom sheet on phones; drag or the keyboard reorders, a locked column stays */
.pk-columns { width: min(320px, 100%); }
.pk-columns__list { display: grid; gap: var(--pk-space-1); margin: 0; padding: 0; list-style: none; }
.pk-columns__item { display: flex; align-items: center; gap: var(--pk-space-3); min-height: var(--pk-h-btn); padding: 0 var(--pk-space-4) 0 var(--pk-space-1); border-radius: var(--pk-r-field); }
.pk-columns__item:hover { background: var(--pk-inset); }
.pk-columns__item > .pk-option { flex: 1; align-items: center; min-width: 0; font-size: var(--pk-fs-control); }
.pk-columns__item > .pk-option > .pk-checkbox { margin-top: 0; }
/* the locked row lines up with the handles only when the list has them (a list that can't be reordered has none) */
.pk-columns__list:has(.pk-handle) > .pk-columns__item[data-locked] { padding-left: var(--pk-space-18); }
.pk-columns__item[data-locked] > .pk-option { color: var(--pk-text-2); cursor: default; }
.pk-columns__lock { width: 16px; height: 16px; color: var(--pk-text-3); }
.pk-columns .pk-checkbox:disabled { background: var(--pk-inset-2); border-color: var(--pk-line-strong); cursor: default; }
.pk-columns .pk-checkbox:disabled:checked::after { border-color: var(--pk-text-2); }

/* ---------- saved views and the filter panel ---------- */
/* one-tap views over a list; the current one takes the current style; the row scrolls sideways on phones */
/* it scrolls, so it keeps room inside for its items' touch and focus rings and takes it back with a negative margin (the side
   margins at no weight, so pk-push still places it) */
.pk-views {
  display: flex; align-items: center; gap: var(--pk-space-2); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: max(var(--pk-tap-room), var(--pk-focus-room));
  margin-block: calc(-1 * max(var(--pk-tap-room), var(--pk-focus-room))); scroll-padding-inline: max(var(--pk-tap-room), var(--pk-focus-room));
}
:where(.pk-views) { margin-inline: calc(-1 * max(var(--pk-tap-room), var(--pk-focus-room))); }
.pk-views::-webkit-scrollbar { display: none; }
.pk-views > * { flex: none; }
.pk-views__item {
  position: relative; display: inline-flex; align-items: center; gap: var(--pk-space-4); height: var(--pk-h-chip); padding: 0 var(--pk-space-7); border: 0; border-radius: var(--pk-r-control);
  background: transparent; font: inherit; font-size: var(--pk-fs-control); color: var(--pk-text-2); white-space: nowrap; cursor: pointer;
}
.pk-views__item:hover { background: var(--pk-inset); color: var(--pk-text); }
.pk-views__count { font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-views__item[aria-current='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-views__item[aria-current='true'] .pk-views__count { color: var(--pk-current-count); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-views__item[aria-current='true'] { font-weight: var(--pk-fw-strong); }
.pk-views__save { margin-left: auto; }
.pk-views__changed { display: inline-flex; align-items: center; gap: var(--pk-space-4); padding-left: var(--pk-space-3); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
/* the filter panel: groups of checkbox lists and ranges, applied with the result count; a pop-up on wide screens, a large
   bottom sheet on phones */
.pk-filters { display: grid; grid-template-columns: minmax(0, 1fr); }
.pk-filters__group { display: grid; gap: var(--pk-space-4); min-width: 0; padding: var(--pk-space-7) 0; border-top: 1px solid var(--pk-line); }
.pk-filters__group:first-child { border-top: 0; padding-top: var(--pk-space-2); }
.pk-filters__title { display: flex; align-items: center; gap: var(--pk-space-4); min-height: 24px; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-strong); }
.pk-filters__title > .pk-link { margin-left: auto; font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-medium); }
.pk-filters__options { display: grid; gap: var(--pk-space-5); }
.pk-filters__options > .pk-option { align-items: center; font-size: var(--pk-fs-control); }
.pk-filters__options > .pk-option > :is(.pk-checkbox, .pk-radio) { margin-top: 0; }
.pk-filters__count { margin-left: auto; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-filters__range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--pk-space-4); align-items: center; color: var(--pk-text-3); }
.pk-filters__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-5); padding-top: var(--pk-space-7); border-top: 1px solid var(--pk-line); }
.pk-filters__foot > .pk-btn--primary { margin-left: auto; }
.pk-sheet .pk-filters__foot { position: sticky; bottom: 0; z-index: 1; padding-bottom: var(--pk-space-2); background: var(--pk-card); }
.pk-sheet .pk-filters__foot > .pk-btn--primary { flex: 1; }
/* "Filtrele (3)": the count of applied filters in the current style */
.pk-filterbtn[aria-expanded='true'] { box-shadow: var(--pk-ring-chosen); }
.pk-filterbtn__count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--pk-space-3); border-radius: var(--pk-r-tag);
  background: var(--pk-current); color: var(--pk-on-current); font-family: var(--pk-font-figures); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-bold); font-variant-numeric: tabular-nums;
}

/* ---------- quick view ---------- */
/* the key facts of an event, person or record and two or three actions, opened on click (never on hover alone); on phones
   the same blocks sit in a medium bottom sheet */
.pk-pop--peek { position: relative; width: min(340px, 100%); gap: var(--pk-space-7); padding: var(--pk-space-8); }
.pk-pop__media { display: flex; align-items: center; gap: var(--pk-space-6); min-width: 0; }
.pk-pop__media > :is(.pk-avatar, .pk-disc) { flex: none; }
.pk-pop__media .pk-pop__title { display: block; margin: 0; font-size: var(--pk-fs-lead); line-height: var(--pk-lh-title); }
.pk-pop__lead { flex: 1; min-width: 0; }
.pk-pop__actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); }
.pk-sheet .pk-pop__actions > .pk-btn { flex: 1 1 auto; }
.pk-pop--peek .pk-kv__row { grid-template-columns: minmax(80px, 0.6fr) minmax(0, 1.4fr); font-size: var(--pk-fs-small); }
/* a pointer to the trigger above the box */
/* an event or a person chip that opens a quick view is a button */
button:is(.pk-event, .pk-person) { border: 0; font: inherit; text-align: left; cursor: pointer; }
button.pk-event { display: block; width: 100%; }
.pk-pop--peek[data-arrow]::before {
  content: ''; position: absolute; top: calc(-1 * var(--pk-space-3)); left: 26px; width: 12px; height: 12px; rotate: 45deg; border-radius: var(--pk-r-fine) 0 0 0; background: var(--pk-card);
  box-shadow: -1px -1px 0 light-dark(transparent, color-mix(in srgb, var(--pk-on-dark) 12%, transparent));
}

/* ---------- people ---------- */
/* team and directory cards: two to a row on phones, at most four */
.pk-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(150px, (100% - 3 * var(--pk-gap)) / 4)), 1fr)); gap: var(--pk-gap); }
.pk-card.pk-member { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: var(--pk-space-6); padding: var(--pk-space-5) var(--pk-space-5) 0; }
.pk-member__photo { position: relative; display: grid; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--pk-r-tile); background: var(--pk-inset); }
.pk-member__photo > img { width: 100%; height: 100%; object-fit: cover; }
.pk-member__photo > .pk-avatar { width: 100%; height: 100%; border-radius: 0; font-size: var(--pk-fs-figure-2xl); font-weight: var(--pk-fw-label); letter-spacing: -0.02em; }
.pk-member__photo > .pk-pill { position: absolute; top: var(--pk-space-4); left: var(--pk-space-4); }
.pk-member__body { display: grid; align-content: start; gap: var(--pk-space-1); min-width: 0; padding: 0 var(--pk-space-2); }
.pk-member__name { margin: 0; font-size: var(--pk-fs-nav); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-title); overflow-wrap: anywhere; }
/* a name that links to the profile makes the whole card its target; the contact actions stay above it */
.pk-card.pk-member:has(.pk-member__name > a) { position: relative; }
.pk-member__name > a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pk-member__name > a:focus-visible { outline: 0; }
.pk-card.pk-member:has(.pk-member__name > a:focus-visible) { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
.pk-member__name > a:hover { text-decoration: underline; }
.pk-member__role { font-size: var(--pk-fs-meta); color: var(--pk-text-2); overflow-wrap: anywhere; }
.pk-member__body > .pk-status { margin-top: var(--pk-space-3); white-space: normal; }
.pk-member__tags { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); margin-top: var(--pk-space-4); }
.pk-member__actions { position: relative; z-index: 1; display: flex; margin: 0 calc(-1 * var(--pk-space-5)); border-top: 1px solid var(--pk-line); }
.pk-member__action { flex: 1 1 0; display: grid; place-items: center; min-width: 0; height: var(--pk-h-btn); color: var(--pk-text-2); }
.pk-member__action + .pk-member__action { box-shadow: var(--pk-edge-left); }
.pk-member__action:hover { background: var(--pk-inset); color: var(--pk-text); }
.pk-member__action:first-child { border-bottom-left-radius: var(--pk-r-card); }
.pk-member__action:last-child { border-bottom-right-radius: var(--pk-r-card); }
.pk-member__action:focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
/* an inactive person: grey photo, muted name */
.pk-member[data-inactive] .pk-member__photo > img { filter: grayscale(1); opacity: 0.55; }
.pk-member[data-inactive] .pk-member__photo > .pk-avatar { background: var(--pk-inset-2); color: var(--pk-text-2); }
.pk-member[data-inactive] .pk-member__name { color: var(--pk-text-2); }
/* a directory row: avatar, name and role, status, contact buttons; rows split by a hairline */
.pk-member--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-7); padding: calc(var(--pk-row-y) + var(--pk-space-1)) 0; border-top: 1px solid var(--pk-line); }
.pk-member--row:first-child { border-top: 0; padding-top: var(--pk-space-2); }
.pk-member--row > .pk-member__body { flex: 1 1 180px; padding: 0; }
.pk-member--row > .pk-status { flex: none; }
.pk-member--row > .pk-member__actions { margin: 0 0 0 auto; border: 0; gap: max(var(--pk-space-3), 2 * var(--pk-tap-room)); }

/* profile header: big avatar, name and meta, contact actions, three small figures. It follows its own width */
.pk-profile {
  container: pk-profile / inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--pk-space-7) var(--pk-space-10); align-items: center;
}
.pk-profile__avatar.pk-avatar { grid-row: span 2; align-self: start; width: 88px; height: 88px; font-size: var(--pk-fs-figure-xl); font-weight: var(--pk-fw-label); }
.pk-profile__main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-3); }
.pk-profile__main > .pk-row { gap: var(--pk-space-4) var(--pk-space-5); }
/* a long status ("Görevde · Hamburg, 10 Eki'ye kadar") wraps under the name instead of running out of the card */
.pk-profile__main .pk-status { white-space: normal; }
.pk-profile__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pk-space-4); }
.pk-profile__stats { grid-column: 2 / -1; }

/* ---------- group sessions ---------- */
/* one row per session: time, session and teacher, places, the main action; the whole row opens the session */
.pk-sessions { display: grid; gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; container: pk-sessions / inline-size; }
.pk-session {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: var(--pk-space-1) var(--pk-space-8); align-items: center; min-width: 0;
  padding: calc(var(--pk-space-7) * var(--pk-ds)) var(--pk-space-7) calc(var(--pk-space-7) * var(--pk-ds)) var(--pk-space-8); border-radius: var(--pk-r-tile); background: var(--pk-inset);
}
.pk-session__time { display: grid; font-family: var(--pk-mono); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-label); line-height: var(--pk-lh-compact); }
.pk-session__time > span + span { font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-regular); color: var(--pk-text-3); }
.pk-session__body { min-width: 0; display: grid; gap: var(--pk-space-1); }
.pk-session__title { justify-self: start; display: inline-block; padding-block: var(--pk-space-3); margin-block: calc(-1 * var(--pk-space-3)); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); color: inherit; }
.pk-session__title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pk-session__title:focus-visible { outline: 0; }
.pk-session__title:focus-visible::after { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
.pk-session__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-1) var(--pk-space-4); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-session__seats { display: grid; justify-items: end; gap: var(--pk-space-1); font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); text-align: right; white-space: nowrap; }
.pk-session__seats > small { font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-regular); color: var(--pk-text-3); }
.pk-session > :is(.pk-btn, .pk-pill), .pk-session__end { position: relative; z-index: 1; }
.pk-session__end { display: flex; align-items: center; gap: var(--pk-space-4); justify-self: end; }
.pk-session--few .pk-session__seats { color: var(--pk-warning-text); }
.pk-session--full .pk-session__seats { color: var(--pk-text-2); }
.pk-session--booked { background: var(--pk-success-soft); }
.pk-session--booked .pk-session__seats { color: var(--pk-success-text); }
.pk-session--booked :is(.pk-session__seats > small, .pk-session__meta, .pk-session__time > span + span) { color: var(--pk-text-2); }
.pk-session--cancelled .pk-session__title { text-decoration: line-through; color: var(--pk-text-2); }
.pk-session--past { background: transparent; box-shadow: var(--pk-ring); }
.pk-session--past :is(.pk-session__title, .pk-session__time) { color: var(--pk-text-2); }
/* the session whose attendance is open beside the list */
.pk-session[aria-current='true'] { box-shadow: var(--pk-ring-active); }
/* attendance: a check per attendee, a no-show marked as such */
.pk-roll { display: grid; margin: 0; padding: 0; list-style: none; }
.pk-roll__item { display: flex; align-items: center; gap: var(--pk-space-6); min-height: max(52px, var(--pk-tap)); padding: var(--pk-space-2) 0; border-top: 1px solid var(--pk-line); }
.pk-roll__item:first-child { border-top: 0; }
.pk-roll__name { flex: 1; min-width: 0; font-weight: var(--pk-fw-label); }
.pk-roll__name > .pk-meta { display: block; font-weight: var(--pk-fw-regular); }
.pk-roll__item > .pk-option { flex: none; align-items: center; font-size: var(--pk-fs-small); }
.pk-roll__item > .pk-option > .pk-checkbox { margin-top: 0; }
.pk-roll__item[data-absent] .pk-roll__name { color: var(--pk-text-2); }

/* ---------- log and code ---------- */
/* log lines: time, level, source and message in fixed columns; long lines scroll sideways inside the box, or wrap */
.pk-log { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-5); min-width: 0; container: pk-log / inline-size; }
.pk-log__bar { display: flex; align-items: center; gap: var(--pk-space-4); flex-wrap: wrap; min-width: 0; }
.pk-log__bar > .pk-search { flex: 1 1 200px; min-width: 0; height: var(--pk-h-btn); }
.pk-log__tools { display: flex; align-items: center; gap: max(var(--pk-space-3), 2 * var(--pk-tap-room)); margin-left: auto; }
.pk-log__more { display: none; margin-left: auto; }
.pk-log__lines {
  position: relative; max-height: 340px; overflow: auto; overscroll-behavior: contain; padding: var(--pk-space-3) 0; border-radius: var(--pk-r-field);
  background: var(--pk-inset); font-family: var(--pk-mono); font-size: var(--pk-fs-caption); line-height: var(--pk-lh-loose);
}
.pk-log__line { position: relative; display: grid; grid-template-columns: 12.5ch 6.5ch 8ch minmax(max-content, 1fr) auto; gap: var(--pk-space-6); align-items: baseline; width: max-content; min-width: 100%; padding: var(--pk-space-1) var(--pk-space-3) var(--pk-space-1) var(--pk-space-7); white-space: pre; }
.pk-log__line:hover { background: color-mix(in srgb, var(--pk-text) 5%, transparent); }
.pk-log__time { color: var(--pk-text-3); font-variant-numeric: tabular-nums; }
.pk-log__level { justify-self: start; padding: 0 var(--pk-space-3); border-radius: var(--pk-r-tag); background: var(--pk-inset-2); color: var(--pk-text-2); font-size: var(--pk-fs-axis); font-weight: var(--pk-fw-strong); }
.pk-log__src { overflow: hidden; text-overflow: ellipsis; color: var(--pk-text-2); }
.pk-log__line[data-level='warning'] .pk-log__level { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-log__line[data-level='error'] { background: color-mix(in srgb, var(--pk-danger-soft) 70%, transparent); }
.pk-log__line[data-level='error'] .pk-log__time { color: var(--pk-text-2); }
.pk-log__line[data-level='error'] .pk-log__level { background: var(--pk-danger); color: var(--pk-on-danger); }
.pk-log mark { padding: 0 1px; border-radius: var(--pk-r-mark); background: var(--pk-accent-soft); color: var(--pk-accent-text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pk-accent-text) 35%, transparent); }
/* copy one line (mouse): shown on a hovered line, held at the visible right edge however far the line scrolls; touch uses the
   toolbar's copy */
.pk-log__copy {
  position: sticky; right: var(--pk-space-3); align-self: center; display: grid; place-items: center; width: 26px; height: 20px; padding: 0; border: 0;
  border-radius: var(--pk-r-xs); background: var(--pk-card); color: var(--pk-text-2); opacity: 0; cursor: pointer;
}
.pk-log__copy > .pk-icon { width: 14px; height: 14px; }
.pk-log__line:hover > .pk-log__copy, .pk-log__copy:focus-visible { opacity: 1; }
.pk-log[data-wrap] .pk-log__line { width: auto; grid-template-columns: 12.5ch 6.5ch 8ch minmax(0, 1fr) auto; white-space: pre-wrap; }
.pk-log[data-wrap] .pk-log__msg { overflow-wrap: anywhere; }
.pk-log__empty { display: grid; justify-items: center; gap: var(--pk-space-3); padding: var(--pk-space-14) var(--pk-space-8); font-family: var(--pk-font); font-size: var(--pk-fs-small); color: var(--pk-text-2); text-align: center; }
/* a code block (a JSON payload) with its copy button */
.pk-code { min-width: 0; margin: 0; border-radius: var(--pk-r-field); background: var(--pk-inset); }
.pk-code__head { display: flex; align-items: center; gap: var(--pk-space-4); min-height: 44px; padding: var(--pk-space-2) var(--pk-space-2) var(--pk-space-2) var(--pk-space-7); border-bottom: 1px solid var(--pk-line); font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-code__head > .pk-icon { width: 16px; height: 16px; }
.pk-code__head > :last-child { margin-left: auto; }
.pk-code pre { position: relative; max-height: 300px; margin: 0; padding: var(--pk-space-6) var(--pk-space-7); overflow: auto; font-family: var(--pk-mono); font-size: var(--pk-fs-caption); line-height: 1.6; tab-size: 2; color: var(--pk-text-2); }
.pk-code__key { color: var(--pk-text); font-weight: var(--pk-fw-label); }
.pk-code__val { color: var(--pk-text); }
.pk-code__punct { color: var(--pk-text-3); }

/* ---------- sortable rows ---------- */
/* a handle to drag (long press on touch), up and down buttons as the alternative, Space and the arrow keys on the handle */
.pk-sortable { display: grid; margin: 0; padding: 0; list-style: none; }
.pk-sortable__item {
  position: relative; display: flex; align-items: center; gap: var(--pk-space-5); min-height: max(calc(56px * var(--pk-ds)), var(--pk-tap)); padding: var(--pk-space-3) var(--pk-space-2);
  border-top: 1px solid var(--pk-line); background: var(--pk-card);
}
.pk-sortable__item:first-child { border-top-color: transparent; }
.pk-handle {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 28px; height: var(--pk-h-btn-sm); padding: 0; border: 0;
  border-radius: var(--pk-r-xs); background: transparent; color: var(--pk-text-3); cursor: grab; touch-action: none;
}
.pk-handle:hover { background: var(--pk-inset); color: var(--pk-text); }
.pk-handle > .pk-icon { width: 18px; height: 18px; }
.pk-sortable__body { flex: 1; min-width: 0; }
.pk-sortable__title { display: block; font-weight: var(--pk-fw-title); }
.pk-sortable__meta { display: block; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-sortable__move { display: inline-flex; gap: max(var(--pk-space-2), 2 * var(--pk-tap-room)); flex: none; }
.pk-sortable__move .pk-icon-btn:disabled { color: var(--pk-text-3); cursor: default; opacity: 0.6; }
.pk-sortable__item[data-dragging] { z-index: 2; border-radius: var(--pk-r-tile); border-top-color: transparent; box-shadow: var(--pk-float-shadow); scale: 1.015; cursor: grabbing; }
.pk-sortable__item[data-dragging] + .pk-sortable__item { border-top-color: transparent; }
.pk-sortable__item[data-dragging] .pk-handle { cursor: grabbing; color: var(--pk-text); }
.pk-sortable__item[data-grabbed] { z-index: 1; border-radius: var(--pk-r-sm); border-top-color: transparent; background: var(--pk-inset); box-shadow: var(--pk-ring-active); }
.pk-sortable__item[data-grabbed] + .pk-sortable__item { border-top-color: transparent; }
/* the row whose editor is open beside the list */
.pk-sortable__item[aria-current='true'] { border-radius: var(--pk-r-sm); border-top-color: transparent; background: var(--pk-accent-soft); }
.pk-sortable__item[aria-current='true'] + .pk-sortable__item { border-top-color: transparent; }
.pk-sortable__item[data-locked] .pk-handle { cursor: default; }
.pk-sortable__item[data-locked] .pk-handle:hover { background: transparent; color: var(--pk-text-3); }
/* where a dragged row will land: a line in the primary edge with a dot at its start */
.pk-sortable__drop { position: relative; height: 2px; margin: -1px 0 -1px var(--pk-space-9); border-radius: var(--pk-r-fine); background: var(--pk-primary-edge); list-style: none; }
.pk-sortable__drop::before { content: ''; position: absolute; left: calc(-1 * var(--pk-space-4)); top: -3px; width: 8px; height: 8px; border-radius: var(--pk-r-pill); box-shadow: var(--pk-ring-active); }

/* ---------- chart extras ---------- */
/* stacked bars: a bar's segments bottom up, each a share of it (pk-h10…100 of the bar); grouped bars: two or three thin bars a
   column. Series colours come from pk-seg--*. Columns never get thinner than 12px: the chart then scrolls inside pk-chart__scroll */
.pk-bars--stacked { grid-auto-columns: minmax(12px, 1fr); }
.pk-bars--stacked > .pk-bars__bar { display: flex; flex-direction: column-reverse; gap: var(--pk-space-1); overflow: hidden; }
.pk-bars__seg { flex: 0 1 auto; min-height: 3px; background: var(--pk-seg, var(--pk-ink)); }
.pk-bars--grouped { grid-auto-columns: minmax(28px, 1fr); gap: var(--pk-space-7); }
.pk-bars--grouped:has(.pk-bars__group > :nth-child(3)) { grid-auto-columns: minmax(42px, 1fr); }
.pk-bars__group { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; min-width: 0; }
.pk-bars__group > .pk-bars__bar { flex: 1 1 0; max-width: 22px; background: var(--pk-seg, var(--pk-ink)); }
.pk-bars__seg[data-off], .pk-bars__group > [data-off] { display: none; }
.pk-chart__scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
.pk-chart__scroll:has(> .pk-bars--stacked) > .pk-bars__labels { grid-auto-columns: minmax(12px, 1fr); }
.pk-chart__scroll:has(> .pk-bars--grouped) > .pk-bars__labels { grid-auto-columns: minmax(28px, 1fr); gap: var(--pk-space-7); }
.pk-chart__scroll:has(> .pk-bars--grouped .pk-bars__group > :nth-child(3)) > .pk-bars__labels { grid-auto-columns: minmax(42px, 1fr); }
/* legend whose keys switch a series off and on */
.pk-chart__legend { display: flex; flex-wrap: wrap; gap: var(--pk-space-2) var(--pk-space-8); }
.pk-chart__series { position: relative; height: var(--pk-h-btn-sm); padding: 0 var(--pk-space-1); border: 0; background: transparent; font: inherit; font-size: var(--pk-fs-label); color: var(--pk-text); cursor: pointer; }
.pk-chart__series[aria-pressed='false'] { color: var(--pk-text-3); text-decoration: line-through; }
.pk-chart__series[aria-pressed='false']::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pk-seg, var(--pk-ink)); }
/* ranked bars: label, value and share above a bar */
.pk-hbars { display: grid; gap: var(--pk-space-6); }
.pk-hbars__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--pk-space-3) var(--pk-space-6); align-items: baseline; font-size: var(--pk-fs-small); }
.pk-hbars__label { min-width: 0; overflow-wrap: anywhere; }
.pk-hbars__value { font-family: var(--pk-font-figures); font-size: var(--pk-figures-size); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-title); }
.pk-hbars__share { min-width: 4ch; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-caption); color: var(--pk-text-3); text-align: right; }
.pk-hbars__track { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); }
.pk-hbars__fill { display: block; height: 100%; border-radius: inherit; background: var(--pk-seg, var(--pk-ink)); }
/* line and area chart: y labels on the grid lines, a plot of columns that show a crosshair and the values on hover, on tap
   and for the column the keyboard is on (data-active, set by the arrow keys on the focused plot) */
.pk-chart { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); min-width: 0; margin: 0; }
.pk-chart__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pk-space-4) var(--pk-space-5); }
.pk-chart__y { display: flex; flex-direction: column; justify-content: space-between; margin-block: -0.5lh; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-axis); line-height: var(--pk-lh-text); color: var(--pk-text-3); text-align: right; }
.pk-chart__plot { position: relative; height: 180px; border-radius: var(--pk-r-fine); }
.pk-chart__grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.pk-chart__grid > i { height: 1px; background: var(--pk-line); }
.pk-chart__grid > i:last-child { background: var(--pk-line-strong); }
.pk-chart__x { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-axis); color: var(--pk-text-3); text-align: center; }
/* labels keep room on both sides, so neighbours never run together on a phone; one too wide for its column wraps between its
   words ("3" over "Eki") */
.pk-chart__x > span { padding-inline: var(--pk-space-2); }
.pk-area { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pk-area__line { fill: none; stroke: var(--pk-seg, var(--pk-ink)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pk-area__line--prev { stroke: var(--pk-text-3); stroke-width: 1.6; stroke-dasharray: 4 4; }
.pk-area__fill { fill: var(--pk-seg, var(--pk-ink)); opacity: 0.12; }
.pk-area__series[data-off] { display: none; }
/* the point of the active column: a zero-length path with round caps stays round however the plot stretches */
.pk-area__dot { fill: none; stroke: var(--pk-seg, var(--pk-ink)); stroke-width: 9; stroke-linecap: round; vector-effect: non-scaling-stroke; visibility: hidden; }
.pk-area__halo { fill: none; stroke: var(--pk-card); stroke-width: 15; stroke-linecap: round; vector-effect: non-scaling-stroke; visibility: hidden; }
:is(.pk-area__dot, .pk-area__halo)[data-active] { visibility: visible; }
.pk-chart__cols { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pk-chart__col { position: relative; min-width: 0; }
.pk-chart__col::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; background: var(--pk-line-control); opacity: 0; }
.pk-chart__col:is(:hover, [data-active])::before { opacity: 1; }
.pk-chart__tip {
  position: absolute; z-index: 5; bottom: calc(100% + var(--pk-space-4)); left: 50%; translate: -50% 0; display: none; gap: var(--pk-space-2); width: max-content; max-width: 220px; padding: var(--pk-space-4) var(--pk-space-5);
  border-radius: var(--pk-r-sm); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-float-shadow); font-size: var(--pk-fs-caption); line-height: var(--pk-lh-cozy); pointer-events: none;
}
.pk-chart__col:is(:hover, [data-active]) > .pk-chart__tip { display: grid; }
.pk-chart__col:nth-child(-n+2) > .pk-chart__tip { left: 0; translate: 0 0; }
.pk-chart__col:nth-last-child(-n+2) > .pk-chart__tip { left: auto; right: 0; translate: 0 0; }
.pk-chart__tip b { font-weight: var(--pk-fw-strong); }
.pk-chart__tip .pk-row { flex-wrap: nowrap; gap: var(--pk-space-6); }
.pk-chart__tip .pk-num { margin-left: auto; font-weight: var(--pk-fw-strong); }
.pk-chart__plot:focus-visible { outline-offset: 4px; }
.pk-chart__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--pk-space-2); padding: var(--pk-space-6); text-align: center; font-size: var(--pk-fs-label); color: var(--pk-text-2); }
.pk-chart__empty > .pk-strong { color: var(--pk-text); }
.pk-chart__plot > .pk-bars { position: absolute; inset: 0; height: auto; }
/* a sparkline in a table cell */
.pk-spark.pk-spark--cell { display: inline-block; width: 96px; height: 28px; vertical-align: middle; }
.pk-spark--cell .pk-spark__line { stroke-width: 1.8; }
.pk-spark--cell .pk-spark__dot { stroke-width: 2; }
/* a figure against the previous period and a target; the bullet bar draws the actual against the target mark */
.pk-compare { display: grid; gap: var(--pk-space-7); }
.pk-compare__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pk-space-2) var(--pk-space-6); }
.pk-bullet { position: relative; height: 12px; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); }
.pk-bullet__bar { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--pk-seg, var(--pk-ink)); }
.pk-bullet__target { position: absolute; top: -5px; bottom: -5px; left: 0; border-right: 2px solid var(--pk-text); pointer-events: none; }
.pk-bullet__scale { display: flex; justify-content: space-between; gap: var(--pk-space-4); margin-top: var(--pk-space-3); font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-axis); color: var(--pk-text-3); }

/* ---------- resources, timeline and year ---------- */
/* day by resource: the week grid with a column per person, room or device (pk-week--res-2…6). The time column stays in place
   while the columns scroll sideways */
.pk-week--resources { --pk-res: 4; grid-template-columns: 52px repeat(var(--pk-res), minmax(150px, 1fr)); min-width: calc(52px + var(--pk-res) * 150px); }
.pk-week--res-2 { --pk-res: 2; } .pk-week--res-3 { --pk-res: 3; } .pk-week--res-4 { --pk-res: 4; } .pk-week--res-5 { --pk-res: 5; } .pk-week--res-6 { --pk-res: 6; }
.pk-week--res-1 { --pk-res: 1; }
.pk-week--resources::before { content: ''; grid-column: 1; grid-row: 1 / -1; position: sticky; left: 0; z-index: 5; background: var(--pk-card); }
.pk-week--resources .pk-week__label { position: sticky; left: 0; z-index: 6; }
.pk-week--resources .pk-week__now { grid-column: 2 / -1; }
.pk-week__res { grid-row: 1; display: grid; justify-items: center; align-content: start; gap: var(--pk-space-2); min-width: 0; padding: 0 var(--pk-space-3) var(--pk-space-5); text-align: center; }
.pk-week__res-name { max-width: 100%; font-size: var(--pk-fs-label); font-weight: var(--pk-fw-strong); overflow-wrap: anywhere; }
.pk-week__res-meta { font-size: var(--pk-fs-fine); color: var(--pk-text-3); }

/* timeline: people down the side, days across. Bars sit on a row's day grid (pk-from1…31, pk-for1…31); bars that overlap stack.
   Weekends are shaded, a line marks today. On phones the label column narrows and the days scroll a week at a time */
:is(.pk-sched-wrap, .pk-sched) { --pk-sched-label: 184px; --pk-sched-min: 40px; }
.pk-sched-wrap { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline-start: var(--pk-sched-label); }
.pk-sched {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: calc(var(--pk-sched-label) + var(--pk-sched-days, 14) * var(--pk-sched-min));
}
.pk-sched--14 { --pk-sched-days: 14; } .pk-sched--28 { --pk-sched-days: 28; } .pk-sched--31 { --pk-sched-days: 31; }
.pk-sched__head, .pk-sched__row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--pk-sched-label) minmax(0, 1fr); }
.pk-sched__row { border-top: 1px solid var(--pk-line); }
.pk-sched__days, .pk-sched__track, .pk-sched__under { display: grid; grid-template-columns: repeat(var(--pk-sched-days, 14), minmax(0, 1fr)); }
.pk-sched__day { display: grid; justify-items: center; gap: var(--pk-space-1); padding: 0 0 var(--pk-space-4); font-size: var(--pk-fs-axis); color: var(--pk-text-2); scroll-snap-align: none; }
.pk-sched__day b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--pk-r-pill); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-medium); font-variant-numeric: tabular-nums; color: var(--pk-ink); }
.pk-sched__day[data-weekend] { color: var(--pk-text-3); }
.pk-sched__day[data-weekend] b { color: var(--pk-text-2); }
.pk-sched__day[aria-current='date'] b { background: var(--pk-current); color: var(--pk-on-current); }
.pk-sched__day[data-week] { scroll-snap-align: start; }
.pk-sched__label { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: var(--pk-space-5); min-width: 0; padding: var(--pk-space-4) var(--pk-space-6) var(--pk-space-4) 0; background: var(--pk-card); }
.pk-sched__head > .pk-sched__label { padding-block: 0 var(--pk-space-4); font-size: var(--pk-fs-caption); color: var(--pk-text-3); align-items: flex-end; }
.pk-sched__who { min-width: 0; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-title); line-height: var(--pk-lh-title); overflow-wrap: anywhere; }
.pk-sched__who > .pk-meta { display: block; font-weight: var(--pk-fw-regular); }
.pk-sched__track { grid-auto-rows: 30px; row-gap: var(--pk-space-2); align-content: center; padding: var(--pk-space-4) 0; }
.pk-sched__bar.pk-event { container: pk-bar / inline-size; display: flex; align-items: center; gap: var(--pk-space-3); min-width: 0; height: 30px; margin: 0 var(--pk-space-1); padding: 0 var(--pk-space-4); font-size: var(--pk-fs-caption); }
.pk-sched__bar .pk-event__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the days scroll and a bar can run to the last one: bars draw their rings inside */
.pk-sched__bar:focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
.pk-sched__bar .pk-pill { margin-left: auto; flex: none; height: 20px; padding: 0 var(--pk-space-3); font-size: var(--pk-fs-tiny); }
/* a short bar keeps its title and drops the tag */
@container pk-bar (max-width: 150px) { .pk-sched__bar .pk-pill { display: none; } }
/* the shading and the today line run under every row */
.pk-sched__under { position: absolute; z-index: 0; inset: 0 0 0 var(--pk-sched-label); pointer-events: none; }
.pk-sched__under > i { box-shadow: var(--pk-edge-left); }
.pk-sched__under > i[data-weekend] { background: color-mix(in srgb, var(--pk-inset) 80%, transparent); }
.pk-sched__under > i[aria-current='date'] { position: relative; }
.pk-sched__under > i[aria-current='date']::after { content: ''; position: absolute; top: var(--pk-space-12); bottom: 0; left: calc(50% - 1px); width: 2px; background: var(--pk-ink); }
.pk-from1 { grid-column-start: 1; } .pk-from2 { grid-column-start: 2; } .pk-from3 { grid-column-start: 3; } .pk-from4 { grid-column-start: 4; }
.pk-from5 { grid-column-start: 5; } .pk-from6 { grid-column-start: 6; } .pk-from7 { grid-column-start: 7; } .pk-from8 { grid-column-start: 8; }
.pk-from9 { grid-column-start: 9; } .pk-from10 { grid-column-start: 10; } .pk-from11 { grid-column-start: 11; } .pk-from12 { grid-column-start: 12; }
.pk-from13 { grid-column-start: 13; } .pk-from14 { grid-column-start: 14; } .pk-from15 { grid-column-start: 15; } .pk-from16 { grid-column-start: 16; }
.pk-from17 { grid-column-start: 17; } .pk-from18 { grid-column-start: 18; } .pk-from19 { grid-column-start: 19; } .pk-from20 { grid-column-start: 20; }
.pk-from21 { grid-column-start: 21; } .pk-from22 { grid-column-start: 22; } .pk-from23 { grid-column-start: 23; } .pk-from24 { grid-column-start: 24; }
.pk-from25 { grid-column-start: 25; } .pk-from26 { grid-column-start: 26; } .pk-from27 { grid-column-start: 27; } .pk-from28 { grid-column-start: 28; }
.pk-from29 { grid-column-start: 29; } .pk-from30 { grid-column-start: 30; } .pk-from31 { grid-column-start: 31; }
.pk-for1 { grid-column-end: span 1; } .pk-for2 { grid-column-end: span 2; } .pk-for3 { grid-column-end: span 3; } .pk-for4 { grid-column-end: span 4; }
.pk-for5 { grid-column-end: span 5; } .pk-for6 { grid-column-end: span 6; } .pk-for7 { grid-column-end: span 7; } .pk-for8 { grid-column-end: span 8; }
.pk-for9 { grid-column-end: span 9; } .pk-for10 { grid-column-end: span 10; } .pk-for11 { grid-column-end: span 11; } .pk-for12 { grid-column-end: span 12; }
.pk-for13 { grid-column-end: span 13; } .pk-for14 { grid-column-end: span 14; } .pk-for15 { grid-column-end: span 15; } .pk-for16 { grid-column-end: span 16; }
.pk-for17 { grid-column-end: span 17; } .pk-for18 { grid-column-end: span 18; } .pk-for19 { grid-column-end: span 19; } .pk-for20 { grid-column-end: span 20; }
.pk-for21 { grid-column-end: span 21; } .pk-for22 { grid-column-end: span 22; } .pk-for23 { grid-column-end: span 23; } .pk-for24 { grid-column-end: span 24; }
.pk-for25 { grid-column-end: span 25; } .pk-for26 { grid-column-end: span 26; } .pk-for27 { grid-column-end: span 27; } .pk-for28 { grid-column-end: span 28; }
.pk-for29 { grid-column-end: span 29; } .pk-for30 { grid-column-end: span 30; } .pk-for31 { grid-column-end: span 31; }

/* year overview: twelve small months with marked days (closed: hatched; a person's leave: their colour; today: current) */
.pk-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--pk-space-10) var(--pk-space-12); }
.pk-year__month { display: grid; align-content: start; gap: var(--pk-space-3); min-width: 0; }
.pk-year__title { font-size: var(--pk-fs-label); font-weight: var(--pk-fw-strong); }
.pk-year__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--pk-space-1); text-align: center; }
.pk-year__dow { font-size: var(--pk-fs-micro); color: var(--pk-text-3); }
.pk-year__day { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: var(--pk-r-xs); font-size: var(--pk-fs-tiny); font-variant-numeric: tabular-nums; color: var(--pk-text-2); }
.pk-year__day[data-outside] { visibility: hidden; }
.pk-year__day[data-closed] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 14%, transparent) 0 1.5px, transparent 1.5px 5px), var(--pk-inset); color: var(--pk-text); }
.pk-year__day--p1 { background: var(--pk-p1-soft); color: var(--pk-p1-text); } .pk-year__day--p2 { background: var(--pk-p2-soft); color: var(--pk-p2-text); }
.pk-year__day--p3 { background: var(--pk-p3-soft); color: var(--pk-p3-text); } .pk-year__day--p4 { background: var(--pk-p4-soft); color: var(--pk-p4-text); }
.pk-year__day--p5 { background: var(--pk-p5-soft); color: var(--pk-p5-text); } .pk-year__day--p6 { background: var(--pk-p6-soft); color: var(--pk-p6-text); }
.pk-year__day[aria-current='date'] { background: var(--pk-current); color: var(--pk-on-current); font-weight: var(--pk-fw-bold); }
.pk-year__legend { display: flex; flex-wrap: wrap; gap: var(--pk-space-4) var(--pk-space-9); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-year__legend > span { display: inline-flex; align-items: center; gap: var(--pk-space-4); }
.pk-year__legend .pk-year__day { width: 16px; }

/* ---------- widths ---------- */
@container pk-profile (max-width: 599px) {
  /* top-aligned: a long line of badges wraps under the name and would leave a centred avatar floating */
  .pk-profile__avatar.pk-avatar { grid-row: auto; align-self: start; width: 64px; height: 64px; font-size: 21px; }
  .pk-profile__main { grid-column: 2 / -1; }
  .pk-profile__actions, .pk-profile__stats { grid-column: 1 / -1; justify-content: flex-start; }
  .pk-profile__actions > .pk-btn { flex: 1 1 auto; }
}
@container pk-sessions (max-width: 519px) {
  .pk-session { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: var(--pk-space-6); }
  .pk-session__time { grid-row: span 2; align-self: start; }
  .pk-session__seats { grid-column: 2; grid-row: 2; justify-items: start; text-align: left; }
  .pk-session > :is(.pk-btn, .pk-pill, .pk-session__end) { grid-column: 3; grid-row: 1 / span 2; }
}
@container pk-log (max-width: 559px) {
  .pk-log__tools { display: none; }
  .pk-log__more { display: inline-grid; }
  .pk-log__line { grid-template-columns: 8.5ch 6.5ch minmax(max-content, 1fr) auto; }
  .pk-log__src, .pk-log__ms { display: none; }
  .pk-log[data-wrap] .pk-log__line { grid-template-columns: 8.5ch 6.5ch minmax(0, 1fr) auto; }
}
@container pk-main (max-width: 559px) {
  :is(.pk-sched-wrap, .pk-sched) { --pk-sched-label: 112px; --pk-sched-min: 32px; }
  .pk-sched__who > .pk-meta { display: none; }
  .pk-sched__label > .pk-avatar { display: none; }
}

/* touch: the small parts reach the 44px floor with an invisible ring; hover-only cues show at all times */
@media (pointer: coarse), (max-width: 1023px) {
  .pk-filters__title > .pk-link, .pk-sched__bar { position: relative; }
  :is(.pk-table__toggle, .pk-edit, .pk-handle, .pk-views__item, .pk-chart__series, .pk-filters__title > .pk-link, .pk-sched__bar)::after { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
  /* stacked options become tap-tall rows instead of overlapping rings */
  .pk-filters__options { gap: 0; }
  .pk-filters__options > .pk-option { margin-block: 0; }
  .pk-sched__track { row-gap: max(var(--pk-space-2), var(--pk-tap) - 30px); }
  .pk-edit__icon { opacity: 1; }
  .pk-log__copy { display: none; }
}
/* ---------- text links ---------- */
/* a link in a sentence keeps the text size and always shows its underline; it takes the primary drawn as a line, so ink in
   Yenilikçi and Teknik and the brand's text shade in Kurumsal */
.pk-link {
  color: var(--pk-primary-edge); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); border-radius: var(--pk-r-fine); cursor: pointer;
  transition: text-decoration-color var(--pk-dur-fast) var(--pk-ease), color var(--pk-dur-fast) var(--pk-ease);
}
.pk-link:hover { text-decoration-color: currentColor; }
/* a button that reads as a link in a sentence ("başa dön") */
button.pk-link { padding: 0; border: 0; background: transparent; font: inherit; }
.pk-link > .pk-icon { width: 1em; height: 1em; vertical-align: -0.14em; }
.pk-link--external > .pk-icon:last-of-type { margin-left: 0.15em; }
.pk-link--muted { color: var(--pk-text-2); }
.pk-link--muted:hover { color: var(--pk-text); }
/* dark surfaces: the banner, bars, toasts and tooltips stay dark in every theme */
.pk-link--on-dark, :is(.pk-banner, .pk-bar, .pk-toast, .pk-tip) .pk-link { color: var(--pk-on-dark); }
.pk-link[aria-disabled='true'] { color: var(--pk-text-3); text-decoration-style: dotted; cursor: default; pointer-events: none; }
/* on its own line ("Tümünü gör", "Şifremi unuttum"): an icon beside the text and, on touch, a 44px hit area */
.pk-link--standalone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-space-3); min-height: var(--pk-tap); min-width: var(--pk-tap);
  font-size: var(--pk-fs-small); font-weight: var(--pk-fw-strong); white-space: nowrap;
}
.pk-link--standalone > .pk-icon { width: 16px; height: 16px; vertical-align: 0; }
/* in a table or a key-value list a link is a target of its own: its box grows to the row without moving the text */
:is(.pk-table, .pk-kv) .pk-link:not(.pk-link--standalone) { position: relative; display: inline-block; padding-block: var(--pk-space-3); margin-block: calc(-1 * var(--pk-space-3)); }
/* a clipped link keeps the cell's width, so its ellipsis can show */
:is(.pk-table, .pk-kv) .pk-link.pk-table__clip { display: block; }

/* ---------- counts and status ---------- */
/* a count is neutral; only a count of errors takes the danger colour. On a part it sits at the icon's top corner, cut out of
   the part by a ring of the card colour, and never takes the tap itself */
.pk-badge, .pk-tabbar__badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--pk-space-3); border-radius: var(--pk-r-tag);
  background: var(--pk-ink); color: var(--pk-on-ink); font-family: var(--pk-font-figures); font-size: var(--pk-fs-axis); font-weight: var(--pk-fw-bold);
  font-variant-numeric: tabular-nums; line-height: var(--pk-lh-none); white-space: nowrap; pointer-events: none;
}
.pk-badge--danger { background: var(--pk-danger); color: var(--pk-on-danger); }
.pk-badge--dot { min-width: 0; width: 9px; height: 9px; padding: 0; border-radius: var(--pk-r-pill); }
.pk-icon-btn > .pk-badge, .pk-tabbar__badge { position: absolute; box-shadow: var(--pk-cutout); }
.pk-icon-btn > .pk-badge { top: calc(50% - var(--pk-space-9)); left: calc(50% + var(--pk-space-1)); }
.pk-icon-btn > .pk-badge--dot { top: calc(50% - var(--pk-space-6)); left: calc(50% + 5px); }
.pk-tabbar__item:has(> .pk-tabbar__badge) { position: relative; }
.pk-tabbar__badge { top: 5px; left: calc(50% + var(--pk-space-1)); }
.pk-nav__item > .pk-badge { margin-left: auto; }
/* on a current item the badge turns to the item's own ink, so it stays visible on an ink or lime fill */
:is(.pk-nav__item[aria-current='page'], .pk-tabbar__item[aria-current='page']) > :is(.pk-badge, .pk-tabbar__badge):not(.pk-badge--danger) {
  background: var(--pk-on-current); color: var(--pk-current); box-shadow: 0 0 0 2px var(--pk-current);
}
/* Kurumsal's current item is a light tint: its count reads as card on the brand text shade */
[data-theme='corporate'] :is(.pk-nav__item[aria-current='page'], .pk-tabbar__item[aria-current='page']) > :is(.pk-badge, .pk-tabbar__badge):not(.pk-badge--danger) { color: var(--pk-card); }

/* status: a dot and always a label (or pk-sr text); online, away, offline (hollow), error and live are the same in every theme */
.pk-status { --pk-status: var(--pk-text-3); display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--pk-fs-label); color: var(--pk-text); white-space: nowrap; }
.pk-status::before, .pk-avatar__status { content: ''; width: 8px; height: 8px; flex: none; border-radius: var(--pk-r-pill); background: var(--pk-status); }
.pk-status__time { color: var(--pk-text-3); }
.pk-status--online, .pk-status--live { --pk-status: var(--pk-success); }
.pk-status--away { --pk-status: var(--pk-warning); }
.pk-status--error { --pk-status: var(--pk-danger); }
.pk-status--error { color: var(--pk-danger-text); font-weight: var(--pk-fw-label); }
.pk-status--offline { --pk-status: transparent; }
.pk-status--offline::before, .pk-avatar__status.pk-status--offline { box-shadow: inset 0 0 0 1.5px var(--pk-text-3); }
.pk-status--live::before { animation: pk-live 1.6s var(--pk-ease) infinite; }
@keyframes pk-live {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pk-success) 55%, transparent); }
  to { box-shadow: 0 0 0 7px color-mix(in srgb, var(--pk-success) 0%, transparent); }
}
/* presence on an avatar: the avatar stops clipping so the dot can sit on its edge; a photo keeps the avatar's shape */
.pk-avatar:has(> .pk-avatar__status) { position: relative; overflow: visible; }
.pk-avatar:has(> .pk-avatar__status) > img { border-radius: inherit; }
.pk-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; box-shadow: var(--pk-cutout); }
.pk-avatar__status.pk-status--offline { background: var(--pk-card); box-shadow: inset 0 0 0 1.5px var(--pk-text-3), var(--pk-cutout); }
.pk-avatar--lg > .pk-avatar__status { width: 13px; height: 13px; }

/* ---------- pager variants ---------- */
/* previous and next with the range; rows per page; jump to a page; "Daha fazla yükle" and the end of a list */
.pk-pager :is(.pk-btn, .pk-icon-btn):disabled { color: var(--pk-text-3); cursor: default; }
.pk-pager__size, .pk-pager__jump { display: inline-flex; align-items: center; gap: var(--pk-space-4); font-size: var(--pk-fs-meta); color: var(--pk-text-2); white-space: nowrap; }
.pk-pager__size .pk-input, .pk-pager__jump .pk-input { height: max(var(--pk-h-btn-sm), var(--pk-tap)); font-size: var(--pk-fs-label); }
.pk-pager__size .pk-input { width: auto; padding: 0 34px 0 var(--pk-space-6); }
.pk-pager__size .pk-control > .pk-icon:last-child { right: var(--pk-space-5); width: 16px; height: 16px; }
.pk-pager__jump .pk-input { width: 64px; padding: 0 var(--pk-space-4); text-align: center; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; }
.pk-more { display: grid; justify-items: center; gap: var(--pk-space-4); padding-top: var(--pk-space-8); text-align: center; }
.pk-more__info { font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-more__count { font-weight: var(--pk-fw-book); color: var(--pk-text-2); }
.pk-more--end { display: flex; align-items: center; gap: var(--pk-space-6); font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-more--end::before, .pk-more--end::after { content: ''; flex: 1; height: 1px; background: var(--pk-line); }
@container pk-main (max-width: 559px) {
  .pk-more > .pk-btn { width: 100%; }
  .pk-pager--simple .pk-pager__label { display: none; }
}

/* ---------- menu groups ---------- */
/* a group is a toggle drawn as a menu item and its sub-items, indented under its label. A current sub-item marks its group;
   a closed group with the current page in it takes the current style itself */
.pk-nav__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-1); }
.pk-nav__toggle { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.pk-nav__toggle > .pk-icon:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--pk-text-3); transition: rotate var(--pk-dur-move) var(--pk-ease); }
.pk-nav__toggle[aria-expanded='false'] > .pk-icon:last-child { rotate: -90deg; }
.pk-nav__group:has(.pk-nav__item[aria-current='page']) > .pk-nav__toggle { color: var(--pk-text); font-weight: var(--pk-fw-strong); }
.pk-nav__group:has(.pk-nav__item[aria-current='page']) > .pk-nav__toggle[aria-expanded='false'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-nav__group:has(.pk-nav__item[aria-current='page']) > .pk-nav__toggle[aria-expanded='false'] > .pk-icon { color: inherit; }
.pk-nav__sub { display: grid; gap: var(--pk-space-2); }
/* the list carries the popover attribute for the rail; in the full menu it stays in the flow */
.pk-nav__sub[popover]:not(:popover-open) { position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; overflow: visible; background: none; color: inherit; }
/* the sub-items' text starts under the group's label: item padding, icon and gap of the theme */
.pk-nav__sub > .pk-nav__item { height: max(calc(var(--pk-h-nav) - 4px), var(--pk-tap)); padding-left: 49px; font-size: var(--pk-fs-control); }
:where([data-theme='corporate'], [data-theme='portal']) .pk-nav__sub > .pk-nav__item { padding-left: 41px; font-size: var(--pk-fs-label); }
.pk-nav__subhead { display: none; }
/* the rail opens a group as a flyout beside it (a popover, so the rail's scrolling does not clip it); pk-nav__sub--flyout
   shows that look on its own */
.pk-nav__sub--flyout, .pk-nav__sub:popover-open {
  min-width: 220px; max-width: 280px; padding: var(--pk-space-4); border: 0; border-radius: var(--pk-r-panel); background: var(--pk-card); color: var(--pk-text);
  box-shadow: var(--pk-float-shadow);
}
.pk-nav__sub:popover-open { position: fixed; inset: auto; margin: 0 0 0 var(--pk-space-4); position-area: right span-bottom; position-try-fallbacks: flip-block; }
:is(.pk-nav__sub--flyout, .pk-nav__sub:popover-open) > .pk-nav__subhead { display: block; padding: var(--pk-space-3) var(--pk-space-6) var(--pk-space-4); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); color: var(--pk-text-3); }
.pk-nav__sub--flyout > .pk-nav__item { padding-left: var(--pk-space-6); }
@container pk-side (max-width: 159px) {
  .pk-side .pk-nav__toggle > .pk-icon:last-child { display: none; }
  .pk-side .pk-nav__group:has(.pk-nav__item[aria-current='page']) > .pk-nav__toggle { background: var(--pk-current); color: var(--pk-on-current); }
  .pk-side .pk-nav__sub:not(:popover-open) { display: none; }
  .pk-side .pk-nav__sub:popover-open > .pk-nav__item {
    flex-direction: row; justify-content: flex-start; width: auto; height: var(--pk-h-nav); min-height: 0; padding: 0 var(--pk-space-6); gap: var(--pk-space-6);
    border-radius: var(--pk-r-control); font-size: var(--pk-fs-control); font-weight: var(--pk-fw-book); line-height: var(--pk-lh-body);
  }
  .pk-side .pk-nav__sub:popover-open .pk-nav__text { display: block; }
  .pk-side .pk-nav__sub:popover-open .pk-nav__count { display: inline; }
  .pk-side .pk-nav__item { position: relative; }
  .pk-side .pk-nav__item > .pk-badge { position: absolute; top: var(--pk-space-2); left: calc(50% + var(--pk-space-1)); margin: 0; box-shadow: var(--pk-cutout); }
}

/* ---------- breadcrumb overflow ---------- */
/* middle levels fold into "…", which opens a menu; a long last level ends in an ellipsis. With an up link the path turns into
   that one link when it is narrow (the crumbs are then a container of their own: give them a width, as the header does) */
.pk-crumbs:has(> .pk-crumbs__fold, > .pk-crumbs__up) { min-width: 0; }
.pk-crumbs:has(> .pk-crumbs__fold, > .pk-crumbs__up) > * { flex: none; }
.pk-crumbs:has(> .pk-crumbs__fold, > .pk-crumbs__up) > [aria-current='page'] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-crumbs__fold { position: relative; display: inline-flex; }
.pk-crumbs__more {
  display: inline-grid; place-items: center; width: 30px; height: 24px; padding: 0; border: 0; border-radius: var(--pk-r-xs);
  background: transparent; color: inherit; cursor: pointer;
}
.pk-crumbs__more:hover, .pk-crumbs__more[aria-expanded='true'] { background: var(--pk-inset); color: var(--pk-text); }
.pk-crumbs .pk-crumbs__more .pk-icon { width: 16px; height: 16px; }
.pk-crumbs__fold > .pk-menu { position: absolute; top: calc(100% + var(--pk-space-3)); left: 0; z-index: 30; }
.pk-crumbs__up { display: none; align-items: center; gap: var(--pk-space-2); color: var(--pk-text-2); font-weight: var(--pk-fw-label); }
.pk-crumbs:has(> .pk-crumbs__up) { container: pk-crumbs / inline-size; }
@container pk-crumbs (max-width: 479px) {
  .pk-crumbs > :not(.pk-crumbs__up) { display: none; }
  .pk-crumbs > .pk-crumbs__up { display: inline-flex; }
}

/* ---------- keyboard shortcuts ---------- */
/* a dialog of the shortcuts, grouped, with a search; touch-only devices never offer it */
.pk-dialog.pk-shortcuts { width: 720px; }
.pk-shortcuts__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--pk-space-4) var(--pk-space-14); align-items: start; }
.pk-shortcuts__group { display: grid; }
.pk-shortcuts__title { padding: var(--pk-space-3) 0 var(--pk-space-4); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-strong); color: var(--pk-text-2); }
.pk-shortcuts__row { display: flex; align-items: center; gap: var(--pk-space-6); min-height: 42px; padding: var(--pk-space-3) 0; border-top: 1px solid var(--pk-line); font-size: var(--pk-fs-small); }
.pk-shortcuts__keys { display: inline-flex; align-items: center; gap: var(--pk-space-2); margin-left: auto; flex: none; font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-shortcuts__keys .pk-kbd { min-width: 26px; margin-left: 0; text-align: center; }
.pk-shortcuts__empty { padding: var(--pk-space-6) 0; font-size: var(--pk-fs-small); color: var(--pk-text-2); }
@media (hover: none) and (pointer: coarse) {
  .pk-shortcuts { display: none; }
}

/* touch: the small parts here reach the 44px floor with an invisible ring */
@media (pointer: coarse), (max-width: 1023px) {
  .pk-crumbs__more { position: relative; }
  .pk-crumbs__more::after, :is(.pk-table, .pk-kv) .pk-link:not(.pk-link--standalone)::after { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
}

@media (prefers-reduced-motion: reduce) {
  .pk-status--live::before { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-success) 30%, transparent); }
}
/* ---------- reports ---------- */
/* ranking: one row per person (place, avatar, name with a bar of their share, value and the move since the last period); the
   leader's place is filled and the viewer's own row (aria-current) is tinted */
.pk-rank { display: grid; gap: var(--pk-space-1); margin: 0; padding: 0; list-style: none; }
.pk-rank__row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-6); padding: var(--pk-space-5); border-radius: var(--pk-r-tile); }
.pk-rank__row[aria-current='true'] { background: var(--pk-accent-soft); }
.pk-rank__pos {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--pk-r-pill); background: var(--pk-inset-2);
  font-family: var(--pk-font-figures); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums;
}
.pk-rank__row:first-child .pk-rank__pos { background: var(--pk-ink); color: var(--pk-on-ink); }
.pk-rank__body { display: grid; gap: var(--pk-space-4); min-width: 0; }
.pk-rank__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-4); font-size: var(--pk-fs-control); font-weight: var(--pk-fw-strong); }
.pk-rank__end { display: grid; justify-items: end; gap: var(--pk-space-1); }
.pk-rank__value { font-weight: var(--pk-fw-strong); }
.pk-rank__move { display: inline-flex; align-items: center; gap: 3px; font-size: var(--pk-fs-fine); color: var(--pk-text-3); white-space: nowrap; }
.pk-rank__move--flat { color: var(--pk-text-3); }
.pk-rank__move--up { color: var(--pk-success-text); }
.pk-rank__move--down { color: var(--pk-danger-text); }
/* a bar inside a table cell, beside its figure */
.pk-progress--cell { width: 72px; height: 6px; flex: none; }
/* the current period's row of a summary table */
.pk-table tr[aria-current='true'] > * { background: var(--pk-inset); font-weight: var(--pk-fw-strong); }
/* legend key of a comparison drawn as a dashed line */
.pk-key--prev::before { height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--pk-text-3); width: 14px; }
/* ---------- organisation chart ---------- */
/* a tree of people drawn top-down: each level is a row of branches joined by hairline connectors; a node is a small card
   (avatar, name, role, team size) and the selected person carries the chosen ring. The chart scrolls inside its box and
   scales with --pk-org-zoom; under 700px of box it turns into an indented list with lines down its left side */
.pk-org { container: pk-org / inline-size; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: var(--pk-space-2) var(--pk-space-2) var(--pk-space-6); }
.pk-org__tree { zoom: var(--pk-org-zoom, 1); width: max-content; min-width: 100%; }
.pk-org ul { display: flex; justify-content: center; margin: 0; padding: var(--pk-space-14) 0 0; list-style: none; position: relative; }
.pk-org__tree > ul { padding-top: 0; }
.pk-org li { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--pk-space-14) var(--pk-space-3) 0; }
.pk-org__tree > ul > li { padding-top: 0; }
/* connectors: each branch draws half of the bar above it and its own drop; the outer halves of the row's ends are left out */
.pk-org li::before, .pk-org li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 28px; border-top: 1px solid var(--pk-line-strong); }
.pk-org li::after { right: auto; left: 50%; border-left: 1px solid var(--pk-line-strong); }
.pk-org li:only-child::before, .pk-org li:only-child::after { display: none; }
.pk-org li:only-child { padding-top: 0; }
.pk-org li:first-child::before, .pk-org li:last-child::after { border: 0; }
.pk-org li:last-child::before { border-right: 1px solid var(--pk-line-strong); border-top-right-radius: 6px; }
.pk-org li:first-child::after { border-top-left-radius: 6px; }
.pk-org ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 28px; border-left: 1px solid var(--pk-line-strong); }
.pk-org__tree > ul > li > ul::before { display: block; }
.pk-org li[aria-expanded='false'] > ul { display: none; }

.pk-org__node {
  position: relative; display: grid; justify-items: center; gap: var(--pk-space-1); width: 148px; padding: var(--pk-space-7) var(--pk-space-4) var(--pk-space-6); border-radius: var(--pk-r-tile);
  background: var(--pk-card); box-shadow: var(--pk-ring-out-strong); text-align: center; color: var(--pk-text);
}
.pk-org__node > .pk-avatar { margin-bottom: var(--pk-space-3); }
.pk-org__node[aria-current='true'] { box-shadow: 0 0 0 2px var(--pk-primary-edge); }
.pk-org__name { font-size: var(--pk-fs-small); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-title); color: inherit; }
/* the name's link covers the whole node; the branch toggle sits above it */
.pk-org__name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pk-org__node:has(.pk-org__name:hover) { background: var(--pk-inset); }
.pk-org__node:has(.pk-org__name:focus-visible) { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
.pk-org__role { font-size: var(--pk-fs-caption); color: var(--pk-text-2); line-height: var(--pk-lh-compact); }
.pk-org__team { margin-top: var(--pk-space-3); display: inline-flex; align-items: center; gap: var(--pk-space-2); font-size: var(--pk-fs-fine); color: var(--pk-text-3); font-variant-numeric: tabular-nums; }
.pk-org__team > .pk-icon { width: 13px; height: 13px; }
/* a vacant seat: dashed, no avatar colour */
.pk-org__node--vacant { background: transparent; box-shadow: none; outline: 1px dashed var(--pk-line-control); outline-offset: -1px; }
/* a collapsed branch shows its hidden size under the node; the toggle sits on the node's lower edge */
.pk-org__toggle {
  position: absolute; left: 50%; bottom: calc(-1 * var(--pk-space-6)); translate: -50% 0; z-index: 1; display: inline-flex; align-items: center; gap: var(--pk-space-1); height: 24px; padding: 0 var(--pk-space-4);
  border: 0; border-radius: var(--pk-r-pill); background: var(--pk-ink); color: var(--pk-on-ink); font: inherit; font-size: var(--pk-fs-axis); font-weight: var(--pk-fw-strong);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.pk-org__toggle > .pk-icon { width: 13px; height: 13px; transition: rotate var(--pk-dur-move) var(--pk-ease); }
.pk-org__toggle[aria-expanded='true'] > .pk-icon { rotate: 45deg; }
.pk-org__tools { display: flex; align-items: center; gap: var(--pk-space-3); }
.pk-org__zoom { min-width: 44px; text-align: center; font-family: var(--pk-font-figures); font-size: var(--pk-fs-meta); font-variant-numeric: tabular-nums; color: var(--pk-text-2); }

/* narrow box: an indented list, each level stepped in with a line down its left and a short tick to every node */
@container pk-org (max-width: 699px) {
  .pk-org__tree { zoom: 1; width: auto; }
  .pk-org ul { display: grid; justify-content: stretch; gap: var(--pk-space-4); padding: var(--pk-space-4) 0 0 var(--pk-space-11); }
  .pk-org__tree > ul { padding-left: 0; }
  .pk-org li, .pk-org li:only-child { align-items: stretch; padding: 0; }
  .pk-org li::before, .pk-org li::after { display: none; }
  .pk-org ul ul::before { display: block; left: var(--pk-space-5); top: 0; bottom: 26px; height: auto; border-left: 1px solid var(--pk-line-strong); }
  .pk-org ul ul > li::before { display: block; left: calc(-1 * var(--pk-space-6)); right: auto; top: 26px; width: 12px; height: 0; border: 0; border-top: 1px solid var(--pk-line-strong); }
  .pk-org__node { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'avatar name team' 'avatar role team'; justify-items: start; align-items: center; column-gap: var(--pk-space-6); width: auto; padding: var(--pk-space-5) var(--pk-space-6); text-align: left; }
  .pk-org__node > .pk-avatar { grid-area: avatar; margin: 0; }
  .pk-org__name { grid-area: name; }
  .pk-org__role { grid-area: role; }
  .pk-org__team { grid-area: team; margin: 0; }
  .pk-org__toggle { position: static; translate: none; grid-column: 1 / -1; justify-self: start; margin-top: var(--pk-space-3); }
}
/* the list form does not zoom: its tools go */
@container pk-main (max-width: 739px) {
  .pk-org__tools { display: none; }
}
/* ---------- learning: courses, exams, certificates, rating scales ---------- */
/* course outline: modules with their lessons; a lesson is done (check), current (aria-current) or locked until the one
   before it is finished */
.pk-lessons { display: grid; gap: var(--pk-space-7); }
.pk-lessons__head { display: flex; align-items: baseline; gap: var(--pk-space-5); padding: 0 var(--pk-space-2) var(--pk-space-3); font-size: var(--pk-fs-label); font-weight: var(--pk-fw-strong); }
.pk-lessons__head > .pk-meta { margin-left: auto; font-weight: var(--pk-fw-regular); }
.pk-lessons__list { display: grid; gap: var(--pk-space-1); margin: 0; padding: 0; list-style: none; }
.pk-lesson { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-6); padding: 9px var(--pk-space-5); border-radius: var(--pk-r-sm); color: var(--pk-text); }
a.pk-lesson:hover { background: var(--pk-inset); }
.pk-lesson__mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--pk-r-pill); box-shadow: var(--pk-ring-mark); color: var(--pk-text-3); }
.pk-lesson__mark > .pk-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.pk-lesson--done .pk-lesson__mark { background: var(--pk-success); box-shadow: none; color: var(--pk-on-success); }
.pk-lesson[aria-current='step'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-lesson[aria-current='step'] .pk-lesson__mark { background: var(--pk-on-current); box-shadow: none; color: var(--pk-current); }
.pk-lesson[aria-current='step'] .pk-lesson__meta { color: inherit; }
.pk-lesson--locked { color: var(--pk-text-3); }
.pk-lesson--locked .pk-lesson__mark { box-shadow: none; }
.pk-lesson__title { font-size: var(--pk-fs-small); line-height: var(--pk-lh-compact); }
.pk-lesson__meta { font-family: var(--pk-font-figures); font-size: var(--pk-fs-caption); font-variant-numeric: tabular-nums; color: var(--pk-text-3); white-space: nowrap; }

/* lesson stage: a video or slide area at 16:9 with its controls under it */
.pk-player { display: grid; gap: var(--pk-space-5); }
.pk-player__screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: var(--pk-r-panel); background: var(--pk-dark); color: var(--pk-on-dark); display: grid; place-items: center; }
.pk-player__screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.pk-player__play { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border: 0; border-radius: var(--pk-r-pill); background: var(--pk-on-dark); color: var(--pk-on-bright); cursor: pointer; }
.pk-player__play > .pk-icon { width: 26px; height: 26px; }
.pk-player__caption { position: absolute; left: var(--pk-space-8); bottom: var(--pk-space-7); right: var(--pk-space-8); font-size: var(--pk-fs-meta); color: var(--pk-on-dark-2); }
.pk-player__bar { display: flex; align-items: center; gap: var(--pk-space-6); font-family: var(--pk-font-figures); font-size: var(--pk-fs-caption); font-variant-numeric: tabular-nums; color: var(--pk-text-2); }
.pk-player__bar > .pk-progress { flex: 1; }

/* exam: the question with its number and points; its answers are choice cards (pk-choices). After grading a choice shows
   whether it was right (correct, wrong, missed) */
.pk-question { display: grid; gap: var(--pk-space-8); }
.pk-question__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-6); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-question__text { font-size: var(--pk-fs-title-lg); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-text); letter-spacing: -0.01em; text-wrap: pretty; }
.pk-question__figure { max-width: 100%; border-radius: var(--pk-r-sm); box-shadow: var(--pk-ring-out); }
.pk-question .pk-choices { display: grid; grid-template-columns: minmax(0, 1fr); }
.pk-choice__key { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); font-family: var(--pk-font-figures); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-strong); }
.pk-choice:has(:checked) .pk-choice__key { background: var(--pk-primary); color: var(--pk-on-primary); }
/* graded states outrank a theme's choice card (Kurumsal draws every card with its own edge) */
.pk-question .pk-choice.pk-choice--correct { background: var(--pk-success-soft); box-shadow: var(--pk-ring-success); }
.pk-question .pk-choice.pk-choice--wrong { background: var(--pk-danger-soft); box-shadow: var(--pk-ring-danger); }
.pk-question .pk-choice.pk-choice--missed { box-shadow: var(--pk-ring-success); outline: 1px dashed var(--pk-success); outline-offset: 3px; }
.pk-question .pk-choice:is(.pk-choice--correct, .pk-choice--wrong) > .pk-icon { color: var(--pk-success-text); }
.pk-question .pk-choice.pk-choice--wrong > .pk-icon { color: var(--pk-danger-text); }
/* an answer being written in the question editor: the right-answer mark, its letter, the text and a remove button */
.pk-answerrow { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-5); }
.pk-question__explain { padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-sm); background: var(--pk-inset); font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-question__explain b { color: var(--pk-text); }

/* question map: one square per question; answered ones are filled, a flagged one carries a dot, the current one the ring */
.pk-qnav { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: var(--pk-space-3); }
.pk-qnav__item {
  position: relative; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--pk-r-sm); background: var(--pk-inset);
  color: var(--pk-text); font: inherit; font-family: var(--pk-font-figures); font-size: var(--pk-fs-label); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; cursor: pointer;
}
.pk-qnav__item[data-answered] { background: var(--pk-ink); color: var(--pk-on-ink); }
.pk-qnav__item[aria-current='step'] { box-shadow: var(--pk-ring-picked); }
.pk-qnav__item[data-flagged]::after { content: ''; position: absolute; top: var(--pk-space-2); right: var(--pk-space-2); width: 7px; height: 7px; border-radius: var(--pk-r-pill); background: var(--pk-warning); }
.pk-qnav__key { display: flex; flex-wrap: wrap; gap: var(--pk-space-3) var(--pk-space-7); font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-qnav__key > span { display: inline-flex; align-items: center; gap: var(--pk-space-3); }
.pk-qnav__swatch { width: 12px; height: 12px; border-radius: var(--pk-r-mark); background: var(--pk-inset); box-shadow: var(--pk-ring-strong); }
.pk-qnav__swatch--answered { background: var(--pk-ink); box-shadow: none; }
.pk-qnav__swatch--flagged { width: 8px; height: 8px; border-radius: var(--pk-r-pill); background: var(--pk-warning); box-shadow: none; }

/* time left: mono figures with a clock; under five minutes it takes the warning colours and, in the last one, the danger */
.pk-timer { display: inline-flex; align-items: center; gap: var(--pk-space-4); height: var(--pk-h-btn); padding: 0 var(--pk-space-7); border-radius: var(--pk-r-control); background: var(--pk-inset); font-family: var(--pk-mono); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; }
.pk-timer > .pk-icon { width: 17px; height: 17px; }
.pk-timer--low { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-timer--out { background: var(--pk-danger-soft); color: var(--pk-danger-text); }

/* rating scale: equal steps in a row (1-5 agreement, 0-10 likelihood); the chosen step is filled, the words name the ends */
.pk-rating { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--pk-space-3); }
.pk-rating__item { position: relative; display: grid; place-items: center; height: max(44px, var(--pk-h-btn)); border-radius: var(--pk-r-sm); background: var(--pk-inset); font-family: var(--pk-font-figures); font-size: var(--pk-fs-control); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; cursor: pointer; }
.pk-rating__item > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pk-rating__item:has(:checked) { background: var(--pk-current); color: var(--pk-on-current); }
.pk-rating__item:has(:focus-visible) { box-shadow: var(--pk-ring-picked); }
.pk-rating__ends { display: flex; justify-content: space-between; gap: var(--pk-space-6); margin-top: var(--pk-space-3); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
/* eleven steps of a 0-10 scale do not fit a phone row: they wrap into two rows of six */
@container pk-main (max-width: 459px) {
  .pk-rating--11 { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* certificate: a landscape sheet in a ruled frame, white in both modes and when printed */
.pk-cert {
  color-scheme: light; position: relative; width: min(100%, 880px); aspect-ratio: 297 / 210; margin-inline: auto; container: pk-cert / inline-size;
  background: #ffffff; color: #111111; box-shadow: var(--pk-ring-out), 0 10px 30px -12px light-dark(rgba(17, 17, 17, 0.3), rgba(0, 0, 0, 0.7));
}
.pk-cert__frame { position: absolute; inset: 3.2cqi; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 4.5cqi 6cqi 3.6cqi; border: 0.25cqi solid #111111; outline: 0.1cqi solid #111111; outline-offset: -0.9cqi; text-align: center; }
.pk-cert__brand { display: flex; align-items: center; gap: 1.2cqi; font-size: 1.8cqi; font-weight: var(--pk-fw-heavy); letter-spacing: 0.04em; }
.pk-cert__brand .pk-logo { width: 4cqi; height: 4cqi; font-size: 1.9cqi; }
.pk-cert__body { display: grid; align-content: center; justify-items: center; gap: 1.4cqi; }
.pk-cert__kind { font-size: 1.7cqi; letter-spacing: 0.16em; color: #54524c; }
.pk-cert__name { font-size: 5.2cqi; font-weight: var(--pk-fw-strong); letter-spacing: -0.02em; line-height: 1.05; }
.pk-cert__text { max-width: 62cqi; font-size: 1.9cqi; line-height: var(--pk-lh-relaxed); color: #333333; }
.pk-cert__course { font-weight: var(--pk-fw-bold); color: #111111; }
.pk-cert__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 4cqi; width: 100%; font-size: 1.5cqi; }
.pk-cert__sign { display: grid; gap: 0.6cqi; padding-top: 1cqi; border-top: 0.12cqi solid #111111; text-align: center; }
.pk-cert__sign b { font-weight: var(--pk-fw-bold); }
.pk-cert__seal { display: grid; justify-items: center; gap: 0.6cqi; font-family: var(--pk-mono); font-size: 1.3cqi; color: #54524c; }
.pk-cert__seal svg { width: 9cqi; height: 9cqi; }
.pk-cert__note { text-align: center; }
@media print {
  .pk-cert { width: 100%; box-shadow: none; }
}
/* ---------- signing ---------- */
/* fields placed on a document page (the app sets their place in %, like pk-preview__mark): the viewer's own field to sign
   is outlined in the primary and labelled, a signed field shows the signature and its time, another signer's field is grey */
.pk-sigfield {
  position: absolute; left: var(--pk-x); top: var(--pk-y); width: var(--pk-w); height: var(--pk-h); display: grid; place-items: center;
  border: 0; border-radius: var(--pk-r-mark); padding: 0; font: inherit; color: #111111;
}
button.pk-sigfield { cursor: pointer; }
.pk-sigfield--todo { background: color-mix(in srgb, var(--pk-warning) 22%, transparent); box-shadow: 0 0 0 2px var(--pk-warning); }
/* the label hangs under the field, where it does not cover the role and name printed above the box */
.pk-sigfield--todo::before {
  content: attr(data-label); position: absolute; left: calc(-1 * var(--pk-space-1)); top: calc(100% + var(--pk-space-2)); padding: var(--pk-space-1) var(--pk-space-4); border-radius: var(--pk-r-tag);
  background: var(--pk-warning); color: var(--pk-on-warning); font-size: var(--pk-fs-axis); font-weight: var(--pk-fw-bold); white-space: nowrap;
}
.pk-sigfield--done { background: color-mix(in srgb, var(--pk-success) 10%, transparent); box-shadow: inset 0 -1px 0 #111111; }
.pk-sigfield--other { background: rgba(17, 17, 17, 0.05); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.25); color: #54524c; font-size: var(--pk-fs-tiny); }
/* a drawn signature: a handwriting stroke in the upper part of the field, the signer and time along its foot (outside the box
   they would cover what the page prints under it) */
.pk-sigfield__ink { align-self: start; width: 86%; height: 58%; margin-top: 3%; fill: none; stroke: #1b3a8a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pk-sigfield__meta { position: absolute; left: 0; right: 0; bottom: 3px; font-family: var(--pk-mono); font-size: 9px; color: #54524c; text-align: center; white-space: nowrap; }

/* envelope progress: signer avatars in order, joined by a line that is solid as far as the signing has come */
.pk-signflow { display: flex; align-items: center; min-width: 0; }
.pk-signflow > .pk-avatar { position: relative; flex: none; box-shadow: var(--pk-cutout); }
.pk-signflow__link { width: 14px; height: 2px; flex: none; background: var(--pk-line-strong); }
.pk-signflow__link--done { background: var(--pk-success); }
.pk-signflow > .pk-avatar[data-signed]::after {
  content: ''; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: var(--pk-r-pill);
  background: var(--pk-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 8px no-repeat;
  box-shadow: var(--pk-cutout);
}
.pk-signflow > .pk-avatar[data-waiting] { outline: 2px solid var(--pk-warning); outline-offset: 1px; }
/* a document being signed shows its whole page, so every field is in view */
.pk-preview--tall { --pk-preview-h: 880px; }
/* ---------- shifts ---------- */
/* a shift in a roster cell: a small block coloured by its kind with its hours; a swap waiting for approval is dashed */
.pk-shift {
  display: grid; gap: 1px; min-width: 0; padding: 5px var(--pk-space-4); border-radius: var(--pk-r-xs); background: var(--pk-inset-2); color: var(--pk-text);
  font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-title); text-align: left;
}
.pk-shift__time { font-family: var(--pk-mono); font-size: var(--pk-fs-tiny); font-weight: var(--pk-fw-regular); color: var(--pk-text-2); white-space: nowrap; }
.pk-shift--morning { background: var(--pk-p4-soft); color: var(--pk-p4-text); }
.pk-shift--evening { background: var(--pk-p3-soft); color: var(--pk-p3-text); }
/* night: the dark block in light mode; a night blue in dark mode, where the dark surface is the page itself */
.pk-shift--night { background: light-dark(var(--pk-dark), oklch(0.34 0.07 270)); color: var(--pk-on-dark); }
.pk-shift--night .pk-shift__time { color: var(--pk-on-dark-2); }
.pk-shift--oncall { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-shift--off { background: transparent; box-shadow: var(--pk-ring-strong); color: var(--pk-text-3); font-weight: var(--pk-fw-medium); }
.pk-shift--swap { outline: 1.5px dashed var(--pk-warning); outline-offset: 1px; }
:is(.pk-shift--morning, .pk-shift--evening, .pk-shift--oncall) .pk-shift__time { color: inherit; }
/* roster table: equal day columns wide enough for a shift, the person column pinned; the cover row counts each day */
.pk-roster { table-layout: fixed; min-width: 860px; }
.pk-roster :is(th, td):not(:first-child) { width: 12%; }
.pk-roster :is(td, th[scope='row']) { padding-block: var(--pk-space-3); vertical-align: top; }
.pk-roster td:not(:first-child) { padding-inline: var(--pk-space-2); }
.pk-roster td > .pk-shift + .pk-shift { margin-top: var(--pk-space-2); }
.pk-roster [aria-current='date'] { background: color-mix(in srgb, var(--pk-accent-soft) 60%, transparent); }
/* ---------- quality and safety ---------- */
/* risk matrix: likelihood down the side (5 at the top), severity along the foot; a cell takes the colour of its score (low,
   medium, high) and shows how many reports sit in it; the chosen cell carries the chosen ring */
.pk-riskmatrix { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: var(--pk-space-2); align-items: stretch; }
.pk-riskmatrix__axis { display: flex; align-items: center; justify-content: flex-end; padding-right: var(--pk-space-3); font-size: var(--pk-fs-fine); color: var(--pk-text-3); white-space: nowrap; }
.pk-riskmatrix__axis--foot { justify-content: center; padding: var(--pk-space-2) 0 0; }
.pk-riskmatrix__cell {
  display: grid; place-items: center; min-height: 44px; border: 0; border-radius: var(--pk-r-xs); font: inherit; font-family: var(--pk-font-figures);
  font-size: var(--pk-fs-small); font-weight: var(--pk-fw-bold); font-variant-numeric: tabular-nums; color: var(--pk-text); cursor: pointer;
}
.pk-riskmatrix__cell--low { background: var(--pk-success-soft); color: var(--pk-success-text); }
.pk-riskmatrix__cell--mid { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-riskmatrix__cell--high { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-riskmatrix__cell:empty { opacity: 0.55; }
.pk-riskmatrix__cell[aria-pressed='true'] { box-shadow: var(--pk-ring-picked); }
.pk-riskmatrix__titles { display: flex; justify-content: space-between; gap: var(--pk-space-6); margin-top: var(--pk-space-3); font-size: var(--pk-fs-fine); color: var(--pk-text-2); }
/* a risk level beside a report: the same three colours as a small square with the score */
.pk-risk { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 var(--pk-space-3); border-radius: var(--pk-r-tag); font-family: var(--pk-font-figures); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-bold); font-variant-numeric: tabular-nums; }
.pk-risk--low { background: var(--pk-success-soft); color: var(--pk-success-text); }
.pk-risk--mid { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-risk--high { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
/* ---------- approval flow editor ---------- */
/* the steps of a flow down a line: the start, approval steps (who, how long they have), conditions that skip or add a step,
   a button between steps to insert one, and the end. A step being edited carries the chosen ring */
.pk-wf { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pk-wf > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-6); padding: var(--pk-space-5) 0; }
.pk-wf > li + li::before { content: ''; position: absolute; left: 19px; top: calc(-1 * var(--pk-space-5)); height: 20px; border-left: 2px solid var(--pk-line-strong); }
.pk-wf__icon { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); color: var(--pk-text-2); }
.pk-wf__icon > .pk-icon { width: 18px; height: 18px; }
.pk-wf__body { display: grid; gap: var(--pk-space-1); min-width: 0; padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-inset); }
.pk-wf__title { font-weight: var(--pk-fw-strong); font-size: var(--pk-fs-control); }
.pk-wf__meta { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-wf__chips { display: flex; flex-wrap: wrap; gap: var(--pk-space-3); margin-top: var(--pk-space-3); }
.pk-wf__tools { display: flex; gap: var(--pk-space-2); }
.pk-wf__step--start .pk-wf__icon { background: var(--pk-ink); color: var(--pk-on-ink); }
.pk-wf__step--end .pk-wf__icon { background: var(--pk-success); color: var(--pk-on-success); }
.pk-wf__step[aria-current='true'] .pk-wf__body { background: var(--pk-card); box-shadow: var(--pk-ring-active); }
/* a condition: a diamond on the line and a warning-tinted rule */
.pk-wf__cond .pk-wf__icon { border-radius: 6px; rotate: 45deg; width: 30px; height: 30px; margin: 5px; background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-wf__cond .pk-wf__icon > .pk-icon { rotate: -45deg; width: 15px; height: 15px; }
.pk-wf__cond .pk-wf__body { background: transparent; box-shadow: var(--pk-ring-strong); }
/* insert a step: a small round button on the line */
.pk-wf__add { padding-block: var(--pk-space-1); }
.pk-wf__add .pk-wf__plus { position: relative; z-index: 1; justify-self: center; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: var(--pk-r-pill); background: var(--pk-card); box-shadow: var(--pk-ring-control); color: var(--pk-text-2); cursor: pointer; }
.pk-wf__add .pk-wf__plus > .pk-icon { width: 14px; height: 14px; }
.pk-wf__add .pk-wf__hint { font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
/* a narrow box puts a step's tools under its body, so the body keeps the width */
@container pk-main (max-width: 559px) {
  .pk-wf > li { grid-template-columns: 40px minmax(0, 1fr); }
  .pk-wf__tools { grid-column: 2; justify-self: end; margin-top: calc(-1 * var(--pk-space-2)); }
}
/* ---------- gift cards, loyalty, reviews ---------- */
/* a gift card as the customer receives it: a card-shaped block in the brand colour with the value, the receiver and the code */
.pk-giftcard {
  color-scheme: light; display: grid; align-content: space-between; gap: var(--pk-space-5); aspect-ratio: 1.6; max-width: 100%; padding: var(--pk-space-11);
  border-radius: max(var(--pk-r-panel), 6px); background: var(--pk-accent); color: var(--pk-accent-ink);
}
.pk-giftcard__brand { display: flex; align-items: center; gap: var(--pk-space-5); font-weight: var(--pk-fw-bold); }
.pk-giftcard__brand .pk-logo { width: 32px; height: 32px; font-size: var(--pk-fs-small); background: var(--pk-accent-ink); color: var(--pk-accent); }
.pk-giftcard__value { font-size: clamp(32px, 9cqi, 44px); font-weight: var(--pk-fw-strong); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pk-giftcard__to { font-weight: var(--pk-fw-strong); }
.pk-giftcard__code { font-family: var(--pk-mono); font-size: var(--pk-fs-caption); }

/* stamp card: ten rounds, the earned ones filled, the reward round last */
.pk-stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--pk-space-5); max-width: 360px; }
.pk-stamp {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--pk-r-pill); box-shadow: var(--pk-ring-mark);
  font-family: var(--pk-font-figures); font-size: var(--pk-fs-meta); color: var(--pk-text-3);
}
.pk-stamp > .pk-icon { width: 45%; height: 45%; }
.pk-stamp--on { background: var(--pk-ink); box-shadow: none; color: var(--pk-on-ink); }
.pk-stamp:last-child:not(.pk-stamp--on) { box-shadow: inset 0 0 0 1.5px var(--pk-accent-text); color: var(--pk-accent-text); }

/* star rating shown (not chosen): five small stars, the given ones filled */
.pk-stars { display: inline-flex; gap: var(--pk-space-1); }
.pk-stars > i {
  width: 14px; height: 14px; background: var(--pk-inset-2);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.pk-stars > i.on { background: var(--pk-warning); }
/* a customer review: who, where and when, the stars, the text and the studio's reply or the reply buttons */
.pk-reviewcards { display: grid; }
.pk-reviewcard { display: grid; gap: var(--pk-space-5); padding: var(--pk-space-8) 0; border-top: 1px solid var(--pk-line); }
.pk-reviewcard:first-child { border-top: 0; padding-top: 0; }
.pk-reviewcard > p { line-height: var(--pk-lh-relaxed); text-wrap: pretty; }

/* ---------- a person's record ---------- */
/* the header band of a full record: a large avatar beside the name, the status, the short facts and the actions */
.pk-profile-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-9) var(--pk-space-12); }
.pk-profile-band > .pk-stack { flex: 1 1 280px; gap: var(--pk-space-4); }
/* ---------- shelf labels ---------- */
/* a sheet of labels as they print: name, price large, a barcode drawn as stripes and the code; white in both modes */
.pk-label-sheet { color-scheme: light; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--pk-space-4); padding: var(--pk-space-6); border-radius: var(--pk-r-sm); background: var(--pk-inset); }
.pk-label-card { display: grid; gap: var(--pk-space-2); padding: var(--pk-space-5) var(--pk-space-6); border-radius: 4px; background: #ffffff; color: #111111; box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.12); }
.pk-label-card__name { font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-title); }
.pk-label-card__price { font-size: var(--pk-fs-figure-md); font-weight: var(--pk-fw-heavy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pk-label-card__barcode { height: 28px; background: repeating-linear-gradient(90deg, #111111 0 2px, transparent 2px 3px, #111111 3px 4px, transparent 4px 7px, #111111 7px 10px, transparent 10px 11px); }
.pk-label-card__code { font-family: var(--pk-mono); font-size: var(--pk-fs-micro); text-align: center; color: #54524c; }
/* ---------- signage ---------- */
/* a day in half hours (a broadcast schedule from early to late) instead of quarter hours */
.pk-week--halfhours { --pk-week-rows: 32; --pk-week-q: 16px; }

/* screen layout: the screen's frame split into zones; a zone is a button that picks what plays in it. Mini zones draw a
   template's shape in a choice card */
.pk-zones { display: grid; gap: var(--pk-space-3); aspect-ratio: 16 / 9; max-width: 100%; padding: var(--pk-space-3); border-radius: var(--pk-r-sm); background: var(--pk-dark); }
.pk-zones--full { grid-template: 'a' 1fr / 1fr; }
.pk-zones--side { grid-template: 'a b' 1fr 'c c' auto / 3fr 1fr; }
.pk-zones--ticker { grid-template: 'a' 1fr 'c' auto / 1fr; }
.pk-zones--portrait { aspect-ratio: 9 / 16; max-height: 320px; grid-template: 'a' 2fr 'b' 1fr 'c' auto / 1fr; }
.pk-zones > :nth-child(1) { grid-area: a; }
.pk-zones > :nth-child(2) { grid-area: b; }
.pk-zones > :nth-child(3) { grid-area: c; }
.pk-zones--full > :nth-child(n + 2), .pk-zones--ticker > :nth-child(2) { display: none; }
.pk-zones__zone {
  display: grid; align-content: center; justify-items: center; gap: var(--pk-space-2); min-height: 44px; padding: var(--pk-space-5); border: 0; border-radius: 4px;
  background: var(--pk-dark-inset); color: var(--pk-on-dark); font: inherit; font-size: var(--pk-fs-meta); text-align: center; cursor: pointer;
}
.pk-zones__zone > span { font-size: var(--pk-fs-fine); color: var(--pk-on-dark-2); }
.pk-zones__zone[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--pk-accent); }
.pk-zones--mini { flex: none; width: 64px; padding: 3px; gap: var(--pk-space-1); border-radius: 4px; }
.pk-zones--mini.pk-zones--portrait { width: 30px; }
.pk-zones--mini > i { min-height: 4px; border-radius: 1px; background: var(--pk-dark-inset); }
.pk-zones--mini > i:first-child { background: var(--pk-accent); }

/* ---------- check-in screen (the Display at a studio's door) ---------- */
/* full window, large type, readable from a step away: the code to scan beside the next class and its people */
.pk-checkin { display: grid; grid-template-rows: auto 1fr auto; gap: var(--pk-space-12); min-height: 100vh; padding: var(--pk-space-14) clamp(var(--pk-space-8), 4vw, var(--pk-space-24)); background: var(--pk-canvas); }
.pk-checkin__head { display: flex; align-items: center; gap: var(--pk-space-7); }
.pk-checkin__clock { margin-left: auto; font-size: var(--pk-fs-figure-xl); font-weight: var(--pk-fw-strong); }
.pk-checkin__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--pk-space-12); align-items: center; }
.pk-checkin__scan { display: grid; justify-items: center; gap: var(--pk-space-7); padding: var(--pk-space-16); border-radius: var(--pk-r-card); background: var(--pk-card); text-align: center; }
.pk-checkin__scan > img { width: min(220px, 60vw); height: auto; }
.pk-checkin__next { display: grid; gap: var(--pk-space-4); padding: var(--pk-space-14); border-radius: var(--pk-r-card); background: var(--pk-card); }
.pk-checkin__next > .pk-tiles { margin-top: var(--pk-space-5); }
.pk-checkin__foot { text-align: center; }
/* Colour touches. <body data-tone> sets how much colour a panel shows; the default (no attribute) is "Hafif renk":
   a category shows its hue where the markup marks it with data-hue="1".."6" (the person and series palette) or
   "brand", menu counters take the brand's text shade and trend arrows their status colour. data-tone="lively" ("Canlı")
   adds tinted icon wells, the brand tint on the current menu item and the brand's text shade on the page title. The markup
   is the same under every tone. */
[data-hue='1'] { --pk-hue-soft: var(--pk-p1-soft); --pk-hue-text: var(--pk-p1-text); }
[data-hue='2'] { --pk-hue-soft: var(--pk-p2-soft); --pk-hue-text: var(--pk-p2-text); }
[data-hue='3'] { --pk-hue-soft: var(--pk-p3-soft); --pk-hue-text: var(--pk-p3-text); }
[data-hue='4'] { --pk-hue-soft: var(--pk-p4-soft); --pk-hue-text: var(--pk-p4-text); }
[data-hue='5'] { --pk-hue-soft: var(--pk-p5-soft); --pk-hue-text: var(--pk-p5-text); }
[data-hue='6'] { --pk-hue-soft: var(--pk-p6-soft); --pk-hue-text: var(--pk-p6-text); }
[data-hue='brand'] { --pk-hue-soft: var(--pk-accent-soft); --pk-hue-text: var(--pk-accent-text); }

:is(.pk-pill, .pk-tag, .pk-chip, .pk-badge)[data-hue] { background: var(--pk-hue-soft); color: var(--pk-hue-text); border-color: transparent; }
.pk-avatar[data-hue] { background: var(--pk-hue-soft); color: var(--pk-hue-text); }
:is(.pk-pill, .pk-tag)[data-hue].pk-pill--soft-dot { --pk-dot: var(--pk-hue-text); }
.pk-who[data-hue] { --pk-who: var(--pk-hue-text); }
:is(.pk-tile__icon, .pk-card__icon, .pk-nav__icon)[data-hue] > .pk-icon,
.pk-icon[data-hue] { color: var(--pk-hue-text); }

.pk-nav__count { color: var(--pk-accent-figure); font-weight: var(--pk-fw-strong); }

:where([data-tone='lively']) :is(.pk-tile__icon, .pk-card__icon)[data-hue] { background: var(--pk-hue-soft); }
:where([data-tone='lively']) :is(.pk-nav__item[aria-current='page'], .pk-subnav__item[aria-current='true']) {
  background: var(--pk-accent-soft); color: var(--pk-accent-text);
}
:where([data-tone='lively']) .pk-nav__item[aria-current='page'] .pk-nav__count { color: var(--pk-accent-figure); }
/* the page title takes the title colour when the product sets one (--pk-title-ink), else the brand's text shade */
:where([data-tone='lively']) .pk-h1 { color: var(--pk-title-pair, var(--pk-accent-text)); }
/* ---------- list extras ---------- */
/* filter chips that are links, one list per filter (the current chip carries aria-current); with pk-chips-scroll they form one
   swipeable row */
.pk-chiplist { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); }
:where(.pk-chiplist) { margin-block: 0; padding: 0; list-style: none; }
.pk-chiplist.pk-chips-scroll { flex-wrap: nowrap; }
/* labelled filter rows (Dönem, Durum, Kişi): the label in a column beside its chips, above them on narrow content */
.pk-filterrow { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--pk-space-3) var(--pk-space-8); }
.pk-filterrow__label { font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-label); color: var(--pk-text-2); }
@container pk-main (max-width: 559px) {
  .pk-filterrow { grid-template-columns: minmax(0, 1fr); }
}

/* waiting counts ("Onay bekleyen 3", "Yeni mesaj 2"): a pill link per queue, tinted while something waits (data-waiting); the
   group glows three times when a number rises (data-rising), never when it falls. Labels give way to the icons under 1360 px */
.pk-waiting { display: flex; align-items: center; gap: var(--pk-space-3); }
.pk-waiting__item {
  display: inline-flex; align-items: center; gap: var(--pk-space-3); height: var(--pk-h-btn-sm); padding: 0 var(--pk-space-3) 0 var(--pk-space-5);
  border-radius: var(--pk-r-control); background: var(--pk-card); box-shadow: var(--pk-ring); color: var(--pk-text-2); font-size: var(--pk-fs-label);
  font-weight: var(--pk-fw-medium); white-space: nowrap; transition: box-shadow var(--pk-dur-fast) var(--pk-ease);
}
.pk-waiting__item:hover { box-shadow: var(--pk-ring-strong); color: var(--pk-text); }
.pk-waiting__count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--pk-space-3); border-radius: var(--pk-r-pill); background: var(--pk-inset);
  font-family: var(--pk-font-figures); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-bold); font-variant-numeric: tabular-nums;
}
.pk-waiting__item[data-waiting] { background: var(--pk-accent-soft); box-shadow: none; color: var(--pk-accent-text); }
.pk-waiting__item[data-waiting] .pk-waiting__count { background: var(--pk-accent); color: var(--pk-accent-ink); }
.pk-waiting[data-rising] .pk-waiting__item[data-waiting] { animation: pk-rise calc(4 * var(--pk-dur-slow)) var(--pk-ease) 3; }
@keyframes pk-rise { 50% { box-shadow: var(--pk-focus-halo); } }
@media (max-width: 1359px) {
  .pk-waiting__label { display: none; }
}

/* rows as labelled cards: under 480 px of table box a pk-table--cards turns each row into a card, each cell shows its column
   (data-label), pk-table__title heads the card and pk-table__media is its picture */
@container pk-table (max-width: 479px) {
  .pk-table.pk-table--cards, .pk-table.pk-table--cards tbody { display: grid; gap: var(--pk-space-4); }
  .pk-table.pk-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pk-table.pk-table--cards tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--pk-space-2) var(--pk-space-6); padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-inset); }
  .pk-table.pk-table--cards tbody :is(td, th) {
    position: static; grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--pk-space-5); min-width: 0; max-width: none; padding: 0; border: 0;
    background: none; box-shadow: none; text-align: left; white-space: normal;
  }
  .pk-table.pk-table--cards tbody :is(td, th)[data-label]:not(.pk-table__title, .pk-table__media)::before { content: attr(data-label); flex: none; width: 88px; font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-regular); color: var(--pk-text-3); }
  .pk-table.pk-table--cards tbody .pk-table__title { grid-column: 1; order: -2; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-title); }
  .pk-table.pk-table--cards tbody .pk-table__media { grid-column: 2; grid-row: 1 / span 2; order: -1; }
  .pk-table.pk-table--cards tbody tr:hover :is(td, th) { background: none; }
  .pk-table.pk-table--cards tbody tr[aria-selected='true'] { background: var(--pk-accent-soft); }
  .pk-table.pk-table--cards tbody tr[aria-selected='true'] :is(td, th) { background: none; }
}

/* a row or card whose main link covers it (pk-stretch__link); its other controls stay above the link */
.pk-stretch { position: relative; }
.pk-stretch__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
/* at no weight: a control with a place of its own (a field's action button, a swatch's radio) keeps it */
:where(.pk-stretch :is(button, input, select, textarea, label, a:not(.pk-stretch__link))) { position: relative; z-index: 1; }
.pk-stretch__link:focus-visible { outline: 0; }
.pk-stretch:has(.pk-stretch__link:focus-visible) { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }

/* a kit screen inside another app's layout, with no pk-main or pk-page around it: only the container the page grids read */
.pk-embed { container: pk-main / inline-size; }
/* ---------- calendar extras ---------- */
/* week grid of any span: pk-week--hours1…24 is how many hours it shows, pk-week--step5 makes a row five minutes (bookings that
   start at :05); the hour lines stay every hour. pk-r and pk-l count rows of the step, up to a whole day of five minutes */
.pk-week--step5 { --pk-week-step: 5; }
.pk-week--hours1 { --pk-week-rows: calc(1 * 60 / var(--pk-week-step)); } .pk-week--hours2 { --pk-week-rows: calc(2 * 60 / var(--pk-week-step)); } .pk-week--hours3 { --pk-week-rows: calc(3 * 60 / var(--pk-week-step)); } .pk-week--hours4 { --pk-week-rows: calc(4 * 60 / var(--pk-week-step)); } .pk-week--hours5 { --pk-week-rows: calc(5 * 60 / var(--pk-week-step)); } .pk-week--hours6 { --pk-week-rows: calc(6 * 60 / var(--pk-week-step)); } .pk-week--hours7 { --pk-week-rows: calc(7 * 60 / var(--pk-week-step)); } .pk-week--hours8 { --pk-week-rows: calc(8 * 60 / var(--pk-week-step)); } .pk-week--hours9 { --pk-week-rows: calc(9 * 60 / var(--pk-week-step)); } .pk-week--hours10 { --pk-week-rows: calc(10 * 60 / var(--pk-week-step)); } .pk-week--hours11 { --pk-week-rows: calc(11 * 60 / var(--pk-week-step)); } .pk-week--hours12 { --pk-week-rows: calc(12 * 60 / var(--pk-week-step)); }
.pk-week--hours13 { --pk-week-rows: calc(13 * 60 / var(--pk-week-step)); } .pk-week--hours14 { --pk-week-rows: calc(14 * 60 / var(--pk-week-step)); } .pk-week--hours15 { --pk-week-rows: calc(15 * 60 / var(--pk-week-step)); } .pk-week--hours16 { --pk-week-rows: calc(16 * 60 / var(--pk-week-step)); } .pk-week--hours17 { --pk-week-rows: calc(17 * 60 / var(--pk-week-step)); } .pk-week--hours18 { --pk-week-rows: calc(18 * 60 / var(--pk-week-step)); } .pk-week--hours19 { --pk-week-rows: calc(19 * 60 / var(--pk-week-step)); } .pk-week--hours20 { --pk-week-rows: calc(20 * 60 / var(--pk-week-step)); } .pk-week--hours21 { --pk-week-rows: calc(21 * 60 / var(--pk-week-step)); } .pk-week--hours22 { --pk-week-rows: calc(22 * 60 / var(--pk-week-step)); } .pk-week--hours23 { --pk-week-rows: calc(23 * 60 / var(--pk-week-step)); } .pk-week--hours24 { --pk-week-rows: calc(24 * 60 / var(--pk-week-step)); }
.pk-r57 { grid-row-start: 59; } .pk-r58 { grid-row-start: 60; } .pk-r59 { grid-row-start: 61; } .pk-r60 { grid-row-start: 62; } .pk-r61 { grid-row-start: 63; } .pk-r62 { grid-row-start: 64; } .pk-r63 { grid-row-start: 65; } .pk-r64 { grid-row-start: 66; }
.pk-r65 { grid-row-start: 67; } .pk-r66 { grid-row-start: 68; } .pk-r67 { grid-row-start: 69; } .pk-r68 { grid-row-start: 70; } .pk-r69 { grid-row-start: 71; } .pk-r70 { grid-row-start: 72; } .pk-r71 { grid-row-start: 73; } .pk-r72 { grid-row-start: 74; }
.pk-r73 { grid-row-start: 75; } .pk-r74 { grid-row-start: 76; } .pk-r75 { grid-row-start: 77; } .pk-r76 { grid-row-start: 78; } .pk-r77 { grid-row-start: 79; } .pk-r78 { grid-row-start: 80; } .pk-r79 { grid-row-start: 81; } .pk-r80 { grid-row-start: 82; }
.pk-r81 { grid-row-start: 83; } .pk-r82 { grid-row-start: 84; } .pk-r83 { grid-row-start: 85; } .pk-r84 { grid-row-start: 86; } .pk-r85 { grid-row-start: 87; } .pk-r86 { grid-row-start: 88; } .pk-r87 { grid-row-start: 89; } .pk-r88 { grid-row-start: 90; }
.pk-r89 { grid-row-start: 91; } .pk-r90 { grid-row-start: 92; } .pk-r91 { grid-row-start: 93; } .pk-r92 { grid-row-start: 94; } .pk-r93 { grid-row-start: 95; } .pk-r94 { grid-row-start: 96; } .pk-r95 { grid-row-start: 97; } .pk-r96 { grid-row-start: 98; }
.pk-r97 { grid-row-start: 99; } .pk-r98 { grid-row-start: 100; } .pk-r99 { grid-row-start: 101; } .pk-r100 { grid-row-start: 102; } .pk-r101 { grid-row-start: 103; } .pk-r102 { grid-row-start: 104; } .pk-r103 { grid-row-start: 105; } .pk-r104 { grid-row-start: 106; }
.pk-r105 { grid-row-start: 107; } .pk-r106 { grid-row-start: 108; } .pk-r107 { grid-row-start: 109; } .pk-r108 { grid-row-start: 110; } .pk-r109 { grid-row-start: 111; } .pk-r110 { grid-row-start: 112; } .pk-r111 { grid-row-start: 113; } .pk-r112 { grid-row-start: 114; }
.pk-r113 { grid-row-start: 115; } .pk-r114 { grid-row-start: 116; } .pk-r115 { grid-row-start: 117; } .pk-r116 { grid-row-start: 118; } .pk-r117 { grid-row-start: 119; } .pk-r118 { grid-row-start: 120; } .pk-r119 { grid-row-start: 121; } .pk-r120 { grid-row-start: 122; }
.pk-r121 { grid-row-start: 123; } .pk-r122 { grid-row-start: 124; } .pk-r123 { grid-row-start: 125; } .pk-r124 { grid-row-start: 126; } .pk-r125 { grid-row-start: 127; } .pk-r126 { grid-row-start: 128; } .pk-r127 { grid-row-start: 129; } .pk-r128 { grid-row-start: 130; }
.pk-r129 { grid-row-start: 131; } .pk-r130 { grid-row-start: 132; } .pk-r131 { grid-row-start: 133; } .pk-r132 { grid-row-start: 134; } .pk-r133 { grid-row-start: 135; } .pk-r134 { grid-row-start: 136; } .pk-r135 { grid-row-start: 137; } .pk-r136 { grid-row-start: 138; }
.pk-r137 { grid-row-start: 139; } .pk-r138 { grid-row-start: 140; } .pk-r139 { grid-row-start: 141; } .pk-r140 { grid-row-start: 142; } .pk-r141 { grid-row-start: 143; } .pk-r142 { grid-row-start: 144; } .pk-r143 { grid-row-start: 145; } .pk-r144 { grid-row-start: 146; }
.pk-r145 { grid-row-start: 147; } .pk-r146 { grid-row-start: 148; } .pk-r147 { grid-row-start: 149; } .pk-r148 { grid-row-start: 150; } .pk-r149 { grid-row-start: 151; } .pk-r150 { grid-row-start: 152; } .pk-r151 { grid-row-start: 153; } .pk-r152 { grid-row-start: 154; }
.pk-r153 { grid-row-start: 155; } .pk-r154 { grid-row-start: 156; } .pk-r155 { grid-row-start: 157; } .pk-r156 { grid-row-start: 158; } .pk-r157 { grid-row-start: 159; } .pk-r158 { grid-row-start: 160; } .pk-r159 { grid-row-start: 161; } .pk-r160 { grid-row-start: 162; }
.pk-r161 { grid-row-start: 163; } .pk-r162 { grid-row-start: 164; } .pk-r163 { grid-row-start: 165; } .pk-r164 { grid-row-start: 166; } .pk-r165 { grid-row-start: 167; } .pk-r166 { grid-row-start: 168; } .pk-r167 { grid-row-start: 169; } .pk-r168 { grid-row-start: 170; }
.pk-r169 { grid-row-start: 171; } .pk-r170 { grid-row-start: 172; } .pk-r171 { grid-row-start: 173; } .pk-r172 { grid-row-start: 174; } .pk-r173 { grid-row-start: 175; } .pk-r174 { grid-row-start: 176; } .pk-r175 { grid-row-start: 177; } .pk-r176 { grid-row-start: 178; }
.pk-r177 { grid-row-start: 179; } .pk-r178 { grid-row-start: 180; } .pk-r179 { grid-row-start: 181; } .pk-r180 { grid-row-start: 182; } .pk-r181 { grid-row-start: 183; } .pk-r182 { grid-row-start: 184; } .pk-r183 { grid-row-start: 185; } .pk-r184 { grid-row-start: 186; }
.pk-r185 { grid-row-start: 187; } .pk-r186 { grid-row-start: 188; } .pk-r187 { grid-row-start: 189; } .pk-r188 { grid-row-start: 190; } .pk-r189 { grid-row-start: 191; } .pk-r190 { grid-row-start: 192; } .pk-r191 { grid-row-start: 193; } .pk-r192 { grid-row-start: 194; }
.pk-r193 { grid-row-start: 195; } .pk-r194 { grid-row-start: 196; } .pk-r195 { grid-row-start: 197; } .pk-r196 { grid-row-start: 198; } .pk-r197 { grid-row-start: 199; } .pk-r198 { grid-row-start: 200; } .pk-r199 { grid-row-start: 201; } .pk-r200 { grid-row-start: 202; }
.pk-r201 { grid-row-start: 203; } .pk-r202 { grid-row-start: 204; } .pk-r203 { grid-row-start: 205; } .pk-r204 { grid-row-start: 206; } .pk-r205 { grid-row-start: 207; } .pk-r206 { grid-row-start: 208; } .pk-r207 { grid-row-start: 209; } .pk-r208 { grid-row-start: 210; }
.pk-r209 { grid-row-start: 211; } .pk-r210 { grid-row-start: 212; } .pk-r211 { grid-row-start: 213; } .pk-r212 { grid-row-start: 214; } .pk-r213 { grid-row-start: 215; } .pk-r214 { grid-row-start: 216; } .pk-r215 { grid-row-start: 217; } .pk-r216 { grid-row-start: 218; }
.pk-r217 { grid-row-start: 219; } .pk-r218 { grid-row-start: 220; } .pk-r219 { grid-row-start: 221; } .pk-r220 { grid-row-start: 222; } .pk-r221 { grid-row-start: 223; } .pk-r222 { grid-row-start: 224; } .pk-r223 { grid-row-start: 225; } .pk-r224 { grid-row-start: 226; }
.pk-r225 { grid-row-start: 227; } .pk-r226 { grid-row-start: 228; } .pk-r227 { grid-row-start: 229; } .pk-r228 { grid-row-start: 230; } .pk-r229 { grid-row-start: 231; } .pk-r230 { grid-row-start: 232; } .pk-r231 { grid-row-start: 233; } .pk-r232 { grid-row-start: 234; }
.pk-r233 { grid-row-start: 235; } .pk-r234 { grid-row-start: 236; } .pk-r235 { grid-row-start: 237; } .pk-r236 { grid-row-start: 238; } .pk-r237 { grid-row-start: 239; } .pk-r238 { grid-row-start: 240; } .pk-r239 { grid-row-start: 241; } .pk-r240 { grid-row-start: 242; }
.pk-r241 { grid-row-start: 243; } .pk-r242 { grid-row-start: 244; } .pk-r243 { grid-row-start: 245; } .pk-r244 { grid-row-start: 246; } .pk-r245 { grid-row-start: 247; } .pk-r246 { grid-row-start: 248; } .pk-r247 { grid-row-start: 249; } .pk-r248 { grid-row-start: 250; }
.pk-r249 { grid-row-start: 251; } .pk-r250 { grid-row-start: 252; } .pk-r251 { grid-row-start: 253; } .pk-r252 { grid-row-start: 254; } .pk-r253 { grid-row-start: 255; } .pk-r254 { grid-row-start: 256; } .pk-r255 { grid-row-start: 257; } .pk-r256 { grid-row-start: 258; }
.pk-r257 { grid-row-start: 259; } .pk-r258 { grid-row-start: 260; } .pk-r259 { grid-row-start: 261; } .pk-r260 { grid-row-start: 262; } .pk-r261 { grid-row-start: 263; } .pk-r262 { grid-row-start: 264; } .pk-r263 { grid-row-start: 265; } .pk-r264 { grid-row-start: 266; }
.pk-r265 { grid-row-start: 267; } .pk-r266 { grid-row-start: 268; } .pk-r267 { grid-row-start: 269; } .pk-r268 { grid-row-start: 270; } .pk-r269 { grid-row-start: 271; } .pk-r270 { grid-row-start: 272; } .pk-r271 { grid-row-start: 273; } .pk-r272 { grid-row-start: 274; }
.pk-r273 { grid-row-start: 275; } .pk-r274 { grid-row-start: 276; } .pk-r275 { grid-row-start: 277; } .pk-r276 { grid-row-start: 278; } .pk-r277 { grid-row-start: 279; } .pk-r278 { grid-row-start: 280; } .pk-r279 { grid-row-start: 281; } .pk-r280 { grid-row-start: 282; }
.pk-r281 { grid-row-start: 283; } .pk-r282 { grid-row-start: 284; } .pk-r283 { grid-row-start: 285; } .pk-r284 { grid-row-start: 286; } .pk-r285 { grid-row-start: 287; } .pk-r286 { grid-row-start: 288; } .pk-r287 { grid-row-start: 289; } .pk-r288 { grid-row-start: 290; }
.pk-l33 { grid-row-end: span 33; } .pk-l34 { grid-row-end: span 34; } .pk-l35 { grid-row-end: span 35; } .pk-l36 { grid-row-end: span 36; } .pk-l37 { grid-row-end: span 37; } .pk-l38 { grid-row-end: span 38; } .pk-l39 { grid-row-end: span 39; } .pk-l40 { grid-row-end: span 40; }
.pk-l41 { grid-row-end: span 41; } .pk-l42 { grid-row-end: span 42; } .pk-l43 { grid-row-end: span 43; } .pk-l44 { grid-row-end: span 44; } .pk-l45 { grid-row-end: span 45; } .pk-l46 { grid-row-end: span 46; } .pk-l47 { grid-row-end: span 47; } .pk-l48 { grid-row-end: span 48; }
.pk-l49 { grid-row-end: span 49; } .pk-l50 { grid-row-end: span 50; } .pk-l51 { grid-row-end: span 51; } .pk-l52 { grid-row-end: span 52; } .pk-l53 { grid-row-end: span 53; } .pk-l54 { grid-row-end: span 54; } .pk-l55 { grid-row-end: span 55; } .pk-l56 { grid-row-end: span 56; }
.pk-l57 { grid-row-end: span 57; } .pk-l58 { grid-row-end: span 58; } .pk-l59 { grid-row-end: span 59; } .pk-l60 { grid-row-end: span 60; } .pk-l61 { grid-row-end: span 61; } .pk-l62 { grid-row-end: span 62; } .pk-l63 { grid-row-end: span 63; } .pk-l64 { grid-row-end: span 64; }
.pk-l65 { grid-row-end: span 65; } .pk-l66 { grid-row-end: span 66; } .pk-l67 { grid-row-end: span 67; } .pk-l68 { grid-row-end: span 68; } .pk-l69 { grid-row-end: span 69; } .pk-l70 { grid-row-end: span 70; } .pk-l71 { grid-row-end: span 71; } .pk-l72 { grid-row-end: span 72; }
.pk-l73 { grid-row-end: span 73; } .pk-l74 { grid-row-end: span 74; } .pk-l75 { grid-row-end: span 75; } .pk-l76 { grid-row-end: span 76; } .pk-l77 { grid-row-end: span 77; } .pk-l78 { grid-row-end: span 78; } .pk-l79 { grid-row-end: span 79; } .pk-l80 { grid-row-end: span 80; }
.pk-l81 { grid-row-end: span 81; } .pk-l82 { grid-row-end: span 82; } .pk-l83 { grid-row-end: span 83; } .pk-l84 { grid-row-end: span 84; } .pk-l85 { grid-row-end: span 85; } .pk-l86 { grid-row-end: span 86; } .pk-l87 { grid-row-end: span 87; } .pk-l88 { grid-row-end: span 88; }
.pk-l89 { grid-row-end: span 89; } .pk-l90 { grid-row-end: span 90; } .pk-l91 { grid-row-end: span 91; } .pk-l92 { grid-row-end: span 92; } .pk-l93 { grid-row-end: span 93; } .pk-l94 { grid-row-end: span 94; } .pk-l95 { grid-row-end: span 95; } .pk-l96 { grid-row-end: span 96; }
.pk-l97 { grid-row-end: span 97; } .pk-l98 { grid-row-end: span 98; } .pk-l99 { grid-row-end: span 99; } .pk-l100 { grid-row-end: span 100; } .pk-l101 { grid-row-end: span 101; } .pk-l102 { grid-row-end: span 102; } .pk-l103 { grid-row-end: span 103; } .pk-l104 { grid-row-end: span 104; }
.pk-l105 { grid-row-end: span 105; } .pk-l106 { grid-row-end: span 106; } .pk-l107 { grid-row-end: span 107; } .pk-l108 { grid-row-end: span 108; } .pk-l109 { grid-row-end: span 109; } .pk-l110 { grid-row-end: span 110; } .pk-l111 { grid-row-end: span 111; } .pk-l112 { grid-row-end: span 112; }
.pk-l113 { grid-row-end: span 113; } .pk-l114 { grid-row-end: span 114; } .pk-l115 { grid-row-end: span 115; } .pk-l116 { grid-row-end: span 116; } .pk-l117 { grid-row-end: span 117; } .pk-l118 { grid-row-end: span 118; } .pk-l119 { grid-row-end: span 119; } .pk-l120 { grid-row-end: span 120; }
.pk-l121 { grid-row-end: span 121; } .pk-l122 { grid-row-end: span 122; } .pk-l123 { grid-row-end: span 123; } .pk-l124 { grid-row-end: span 124; } .pk-l125 { grid-row-end: span 125; } .pk-l126 { grid-row-end: span 126; } .pk-l127 { grid-row-end: span 127; } .pk-l128 { grid-row-end: span 128; }
.pk-l129 { grid-row-end: span 129; } .pk-l130 { grid-row-end: span 130; } .pk-l131 { grid-row-end: span 131; } .pk-l132 { grid-row-end: span 132; } .pk-l133 { grid-row-end: span 133; } .pk-l134 { grid-row-end: span 134; } .pk-l135 { grid-row-end: span 135; } .pk-l136 { grid-row-end: span 136; }
.pk-l137 { grid-row-end: span 137; } .pk-l138 { grid-row-end: span 138; } .pk-l139 { grid-row-end: span 139; } .pk-l140 { grid-row-end: span 140; } .pk-l141 { grid-row-end: span 141; } .pk-l142 { grid-row-end: span 142; } .pk-l143 { grid-row-end: span 143; } .pk-l144 { grid-row-end: span 144; }
.pk-l145 { grid-row-end: span 145; } .pk-l146 { grid-row-end: span 146; } .pk-l147 { grid-row-end: span 147; } .pk-l148 { grid-row-end: span 148; } .pk-l149 { grid-row-end: span 149; } .pk-l150 { grid-row-end: span 150; } .pk-l151 { grid-row-end: span 151; } .pk-l152 { grid-row-end: span 152; }
.pk-l153 { grid-row-end: span 153; } .pk-l154 { grid-row-end: span 154; } .pk-l155 { grid-row-end: span 155; } .pk-l156 { grid-row-end: span 156; } .pk-l157 { grid-row-end: span 157; } .pk-l158 { grid-row-end: span 158; } .pk-l159 { grid-row-end: span 159; } .pk-l160 { grid-row-end: span 160; }
.pk-l161 { grid-row-end: span 161; } .pk-l162 { grid-row-end: span 162; } .pk-l163 { grid-row-end: span 163; } .pk-l164 { grid-row-end: span 164; } .pk-l165 { grid-row-end: span 165; } .pk-l166 { grid-row-end: span 166; } .pk-l167 { grid-row-end: span 167; } .pk-l168 { grid-row-end: span 168; }
.pk-l169 { grid-row-end: span 169; } .pk-l170 { grid-row-end: span 170; } .pk-l171 { grid-row-end: span 171; } .pk-l172 { grid-row-end: span 172; } .pk-l173 { grid-row-end: span 173; } .pk-l174 { grid-row-end: span 174; } .pk-l175 { grid-row-end: span 175; } .pk-l176 { grid-row-end: span 176; }
.pk-l177 { grid-row-end: span 177; } .pk-l178 { grid-row-end: span 178; } .pk-l179 { grid-row-end: span 179; } .pk-l180 { grid-row-end: span 180; } .pk-l181 { grid-row-end: span 181; } .pk-l182 { grid-row-end: span 182; } .pk-l183 { grid-row-end: span 183; } .pk-l184 { grid-row-end: span 184; }
.pk-l185 { grid-row-end: span 185; } .pk-l186 { grid-row-end: span 186; } .pk-l187 { grid-row-end: span 187; } .pk-l188 { grid-row-end: span 188; } .pk-l189 { grid-row-end: span 189; } .pk-l190 { grid-row-end: span 190; } .pk-l191 { grid-row-end: span 191; } .pk-l192 { grid-row-end: span 192; }
.pk-l193 { grid-row-end: span 193; } .pk-l194 { grid-row-end: span 194; } .pk-l195 { grid-row-end: span 195; } .pk-l196 { grid-row-end: span 196; } .pk-l197 { grid-row-end: span 197; } .pk-l198 { grid-row-end: span 198; } .pk-l199 { grid-row-end: span 199; } .pk-l200 { grid-row-end: span 200; }
.pk-l201 { grid-row-end: span 201; } .pk-l202 { grid-row-end: span 202; } .pk-l203 { grid-row-end: span 203; } .pk-l204 { grid-row-end: span 204; } .pk-l205 { grid-row-end: span 205; } .pk-l206 { grid-row-end: span 206; } .pk-l207 { grid-row-end: span 207; } .pk-l208 { grid-row-end: span 208; }
.pk-l209 { grid-row-end: span 209; } .pk-l210 { grid-row-end: span 210; } .pk-l211 { grid-row-end: span 211; } .pk-l212 { grid-row-end: span 212; } .pk-l213 { grid-row-end: span 213; } .pk-l214 { grid-row-end: span 214; } .pk-l215 { grid-row-end: span 215; } .pk-l216 { grid-row-end: span 216; }
.pk-l217 { grid-row-end: span 217; } .pk-l218 { grid-row-end: span 218; } .pk-l219 { grid-row-end: span 219; } .pk-l220 { grid-row-end: span 220; } .pk-l221 { grid-row-end: span 221; } .pk-l222 { grid-row-end: span 222; } .pk-l223 { grid-row-end: span 223; } .pk-l224 { grid-row-end: span 224; }
.pk-l225 { grid-row-end: span 225; } .pk-l226 { grid-row-end: span 226; } .pk-l227 { grid-row-end: span 227; } .pk-l228 { grid-row-end: span 228; } .pk-l229 { grid-row-end: span 229; } .pk-l230 { grid-row-end: span 230; } .pk-l231 { grid-row-end: span 231; } .pk-l232 { grid-row-end: span 232; }
.pk-l233 { grid-row-end: span 233; } .pk-l234 { grid-row-end: span 234; } .pk-l235 { grid-row-end: span 235; } .pk-l236 { grid-row-end: span 236; } .pk-l237 { grid-row-end: span 237; } .pk-l238 { grid-row-end: span 238; } .pk-l239 { grid-row-end: span 239; } .pk-l240 { grid-row-end: span 240; }
.pk-l241 { grid-row-end: span 241; } .pk-l242 { grid-row-end: span 242; } .pk-l243 { grid-row-end: span 243; } .pk-l244 { grid-row-end: span 244; } .pk-l245 { grid-row-end: span 245; } .pk-l246 { grid-row-end: span 246; } .pk-l247 { grid-row-end: span 247; } .pk-l248 { grid-row-end: span 248; }
.pk-l249 { grid-row-end: span 249; } .pk-l250 { grid-row-end: span 250; } .pk-l251 { grid-row-end: span 251; } .pk-l252 { grid-row-end: span 252; } .pk-l253 { grid-row-end: span 253; } .pk-l254 { grid-row-end: span 254; } .pk-l255 { grid-row-end: span 255; } .pk-l256 { grid-row-end: span 256; }
.pk-l257 { grid-row-end: span 257; } .pk-l258 { grid-row-end: span 258; } .pk-l259 { grid-row-end: span 259; } .pk-l260 { grid-row-end: span 260; } .pk-l261 { grid-row-end: span 261; } .pk-l262 { grid-row-end: span 262; } .pk-l263 { grid-row-end: span 263; } .pk-l264 { grid-row-end: span 264; }
.pk-l265 { grid-row-end: span 265; } .pk-l266 { grid-row-end: span 266; } .pk-l267 { grid-row-end: span 267; } .pk-l268 { grid-row-end: span 268; } .pk-l269 { grid-row-end: span 269; } .pk-l270 { grid-row-end: span 270; } .pk-l271 { grid-row-end: span 271; } .pk-l272 { grid-row-end: span 272; }
.pk-l273 { grid-row-end: span 273; } .pk-l274 { grid-row-end: span 274; } .pk-l275 { grid-row-end: span 275; } .pk-l276 { grid-row-end: span 276; } .pk-l277 { grid-row-end: span 277; } .pk-l278 { grid-row-end: span 278; } .pk-l279 { grid-row-end: span 279; } .pk-l280 { grid-row-end: span 280; }
.pk-l281 { grid-row-end: span 281; } .pk-l282 { grid-row-end: span 282; } .pk-l283 { grid-row-end: span 283; } .pk-l284 { grid-row-end: span 284; } .pk-l285 { grid-row-end: span 285; } .pk-l286 { grid-row-end: span 286; } .pk-l287 { grid-row-end: span 287; } .pk-l288 { grid-row-end: span 288; }

/* lanes: entries that overlap share the day's width, each with the group's count (pk-lanes2…4) and its own place (pk-lane1…4).
   pk-event--wide runs on to the right edge when nothing beside its title needs the room; the later lanes lie on top of it,
   parted by a card-coloured edge */
.pk-lanes1 { --pk-lanes: 1; } .pk-lanes2 { --pk-lanes: 2; } .pk-lanes3 { --pk-lanes: 3; } .pk-lanes4 { --pk-lanes: 4; }
.pk-lane1 { --pk-lane: 0; } .pk-lane2 { --pk-lane: 1; } .pk-lane3 { --pk-lane: 2; } .pk-lane4 { --pk-lane: 3; }
.pk-week > :is(.pk-lane1, .pk-lane2, .pk-lane3, .pk-lane4) {
  z-index: calc(1 + var(--pk-lane));
  margin-left: calc(var(--pk-lane) * 100% / var(--pk-lanes) + 1px);
  margin-right: calc((var(--pk-lanes) - var(--pk-lane) - 1) * 100% / var(--pk-lanes) + 1px);
}
.pk-week > .pk-event:is(.pk-lanes2, .pk-lanes3, .pk-lanes4) { padding: var(--pk-space-2) calc(var(--pk-space-1) + 1px); }
.pk-week > .pk-event:is(.pk-lanes2, .pk-lanes3, .pk-lanes4) :is(.pk-event__title, .pk-event__time, .pk-event__meta) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-week > .pk-event--wide { margin-right: var(--pk-space-2); }
.pk-week > :is(.pk-lane2, .pk-lane3, .pk-lane4) { box-shadow: var(--pk-cutout); }
/* "+n": the entries that found no lane, as a box in the last lane that lists them */
.pk-week > .pk-week__more:is(.pk-lane1, .pk-lane2, .pk-lane3, .pk-lane4) {
  align-self: stretch; justify-self: stretch; display: flex; align-items: flex-start; justify-content: center; min-width: 0; min-height: 0;
  margin-block: 1px; padding: var(--pk-space-1); overflow: hidden; border-radius: var(--pk-r-xs); box-shadow: var(--pk-ring-strong), var(--pk-cutout);
}
.pk-week > .pk-week__more:hover { background: var(--pk-inset); }
/* the studio's closed hours: a hatched band behind the day's entries, its reason in small type (a whole closed day is
   pk-week__col--closed) */
.pk-week__closed {
  position: relative; z-index: 0; min-width: 0; min-height: 0; margin-left: 1px; padding: var(--pk-space-2) var(--pk-space-4); overflow: hidden;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 7%, transparent) 0 1.5px, transparent 1.5px 8px);
  font-size: var(--pk-fs-tiny); line-height: var(--pk-lh-title); color: var(--pk-text-3);
}
/* a day's own add button (+) in the corner of its head */
.pk-week__day:has(> .pk-week__add) { position: relative; }
.pk-week__add { position: absolute; top: 0; right: 0; }

/* date leaf: a day's number over its short weekday, the date column of a list of sessions */
.pk-dateleaf {
  display: inline-grid; justify-items: center; align-content: center; flex: none; min-width: 52px; padding: var(--pk-space-3) var(--pk-space-4);
  border-radius: var(--pk-r-sm); background: var(--pk-inset); line-height: var(--pk-lh-tight);
}
.pk-dateleaf__day { font-size: var(--pk-fs-figure-sm); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; color: var(--pk-ink); }
.pk-dateleaf__dow { font-size: var(--pk-fs-fine); color: var(--pk-text-2); }
.pk-dateleaf[aria-current='date'] { background: var(--pk-current); }
.pk-dateleaf[aria-current='date'] :is(.pk-dateleaf__day, .pk-dateleaf__dow) { color: var(--pk-on-current); }

/* time-bound pill: how long something has waited or how soon it is due ("3 gündür yanıtsız", "10 dk sonra", "5 gün kaldı");
   data-due says how urgent it is: now (due or overdue), soon, later */
.pk-due { font-variant-numeric: tabular-nums; }
.pk-due[data-due='now'] { --pk-dot: var(--pk-danger-text); background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-due[data-due='soon'] { --pk-dot: var(--pk-warning-text); background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-due[data-due='later'] { --pk-dot: var(--pk-text-3); background: var(--pk-inset); color: var(--pk-text-2); }

/* weekly hours editor: the copy action above the days, one range marked as wrong */
.pk-hours__copy { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); padding-bottom: var(--pk-space-4); }
.pk-hours__range[data-invalid] .pk-input { border-color: var(--pk-danger-edge); box-shadow: none; }
/* ---------- feedback extras ---------- */
/* done in a sheet: once its form is saved, a success notice, what was stored (pk-kv) and the next steps, aligned like the
   form they replace (pk-done alone is the customer's centred done screen) */
.pk-done--sheet { justify-items: stretch; gap: var(--pk-space-8); padding: 0; text-align: left; }
.pk-done__next { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); }

/* a native <progress> drawn as the kit's bar (seats taken, an upload); the bar's own background is the track */
progress.pk-progress { display: block; width: 100%; border: 0; appearance: none; }
.pk-row > progress.pk-progress:not(.pk-progress--cell) { width: auto; }
progress.pk-progress::-webkit-progress-bar { background: inherit; border-radius: inherit; }
progress.pk-progress::-webkit-progress-value { background: currentColor; border-radius: inherit; }
progress.pk-progress::-moz-progress-bar { background: currentColor; border-radius: inherit; }

/* the image viewer as a modal <dialog> over the whole window; the bar clears the home indicator */
dialog.pk-viewer { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding-bottom: calc(var(--pk-space-8) + env(safe-area-inset-bottom, 0px)); }
dialog.pk-viewer:not([open]) { display: none; }
dialog.pk-viewer::backdrop { background: var(--pk-scrim); }
button.pk-thumb { padding: 0; border: 0; cursor: zoom-in; }

/* the copy of a photo that follows the finger while it is dragged (the script sets --pk-drag-x, -y and -w); its place in the
   gallery shows pk-gtile--placeholder */
.pk-gtile--dragging { position: fixed; top: 0; left: 0; z-index: 60; width: var(--pk-drag-w); translate: var(--pk-drag-x) var(--pk-drag-y); scale: 1.03; pointer-events: none; }
.pk-gtile--dragging .pk-gtile__photo { box-shadow: var(--pk-float-shadow); }
/* a finger on the handle drags the photo instead of scrolling the page */
.pk-gtile__handle { touch-action: none; }

/* a drop zone with files over it */
.pk-drop[data-dropping] { border-color: var(--pk-primary-edge); background: var(--pk-inset); }
.pk-drop[data-dropping] .pk-drop__icon { background: var(--pk-card); }
/* ---------- customer layer: tokens and shell ---------- */
/* A studio's public pages: <body class="pk pk-site">. The layer declares its own tokens (the site's unit and rhythm,
   tracked labels, pictures, lift, motion) with defaults taken from the active panel theme, so a customer page works in
   every panel theme; a brand theme (93-theme-healing) gives them the brand's values. The defaults hold on panel pages too,
   where the shared parts (eyebrow, seats, seal, day states) also show. Its breakpoints are its own: 640 (phone), 860 (one
   column), 1100 (the header folds into the menu button), 1360 (the sister link leaves the header) */
:root, [data-theme], .pk-site {
  /* the unit the whole site counts in; a brand makes it fluid */
  --pk-site-u: calc(8px + 8px * var(--pk-ds));
  --pk-site-space-1: calc(var(--pk-site-u) * 0.5);
  --pk-site-space-2: calc(var(--pk-site-u) * 0.75);
  --pk-site-space-3: var(--pk-site-u);
  --pk-site-space-4: calc(var(--pk-site-u) * 1.5);
  --pk-site-space-5: calc(var(--pk-site-u) * 2.25);
  --pk-site-space-6: calc(var(--pk-site-u) * 3.5);
  --pk-site-space-7: calc(var(--pk-site-u) * 5.25);
  --pk-site-space-8: calc(var(--pk-site-u) * 8);
  --pk-site-space-9: calc(var(--pk-site-u) * 12);
  --pk-site-gutter: clamp(var(--pk-site-space-5), 6vw, var(--pk-site-space-8));
  --pk-site-max: 74rem;
  --pk-site-aside: 21rem;
  --pk-site-wide: 84rem;
  --pk-site-text: var(--pk-text);
  --pk-site-header-bg: var(--pk-card);
  --pk-site-brand-h: calc(var(--pk-site-u) * 3);
  --pk-site-header-pad: var(--pk-site-space-3);
  /* the room the sticky header takes: the height SiteHeader measures into --pk-site-header-h (on the pk-site element or
     above it), else the header's height by its parts */
  --pk-site-header-room: var(--pk-site-header-h, calc(var(--pk-site-brand-h) + 2 * var(--pk-site-header-pad) + 1px));
  /* tracked labels (eyebrow, menu, buttons): plain sentence case in the panel themes, a brand may set capitals */
  --pk-site-fs-caps: var(--pk-fs-meta);
  --pk-site-fs-tiny: var(--pk-fs-tiny);
  --pk-site-caps-case: none;
  --pk-site-caps-track: 0em;
  --pk-site-label-track: 0em;
  /* the step of the layer's other letter-spacing (counts, references, small labels), used in multiples */
  --pk-site-track: 0em;
  /* the studio's brand mark (lockup, account circle, the menu's underline); a text-strength colour in every panel theme */
  --pk-site-brand: var(--pk-primary-edge);
  --pk-site-dot: var(--pk-accent-figure);
  --pk-site-dot-halo: 0 0 0 4px color-mix(in srgb, var(--pk-site-dot) 14%, transparent);
  --pk-site-seat: var(--pk-text-2);
  --pk-site-sister: var(--pk-text-2);
  --pk-site-link: var(--pk-primary-edge);
  --pk-site-link-hover: var(--pk-primary-edge);
  --pk-site-link-line: color-mix(in srgb, currentColor 45%, transparent);
  /* what is chosen drawn as a line or a mark (the done arcs, the seal, a chosen card's ring and tag): the current colour
     where it reads on the page, its text shade where the current item is a pale tint */
  --pk-site-chosen: var(--pk-current);
  --pk-site-chosen-soft: color-mix(in srgb, var(--pk-primary-edge) 8%, var(--pk-card));
  --pk-site-r-image: var(--pk-r-tile);
  --pk-site-r-thumb: var(--pk-r-sm);
  --pk-site-ratio-card: 3 / 2;
  --pk-site-ratio-wide: 16 / 9;
  /* the panel themes keep the page flat: only a brand theme lifts cards off the page */
  --pk-site-lift-shadow: 0 0 0 0 transparent;
  --pk-site-lift-shadow-hover: var(--pk-site-lift-shadow);
  --pk-site-pick-shadow: var(--pk-site-lift-shadow);
  --pk-site-pick-shadow-hover: var(--pk-site-lift-shadow);
  --pk-site-chosen-shadow: var(--pk-site-lift-shadow);
  --pk-site-leaf-shadow: var(--pk-site-lift-shadow);
  --pk-site-card-shadow: var(--pk-site-lift-shadow);
  --pk-site-action-shadow: 0 0 0 0 transparent;
  --pk-site-action-shadow-hover: var(--pk-site-action-shadow);
  --pk-site-action-shadow-pressed: var(--pk-site-action-shadow);
  --pk-site-menu-shadow: var(--pk-float-shadow);
  --pk-site-lift: 0px;
  /* a brand theme's own page background (gradients, grain); none in the panel themes */
  --pk-site-backdrop: none;
  --pk-site-ease: var(--pk-ease);
  --pk-site-ease-soft: var(--pk-ease);
  --pk-site-dur-enter: var(--pk-dur-slow);
  --pk-site-dur-rise: var(--pk-dur-slow);
  --pk-site-dur-draw: var(--pk-dur-slow);
  --pk-site-dur-tick: var(--pk-dur-base);
  --pk-site-dur-pulse: 1.2s;
  --pk-site-stagger: 0s;
  --pk-site-lh-step: var(--pk-lh-h2);
  /* a brand may set its titles and its controls in faces of their own (the reading text keeps --pk-font), track its page
     title and step titles wide and let the page title glow */
  --pk-site-font-display: var(--pk-font);
  --pk-site-font-ui: var(--pk-font);
  --pk-site-display-track: -0.03em;
  --pk-site-step-track: -0.025em;
  --pk-site-title-glow: none;
  /* the eyebrow's mark (a dot unless a brand draws a dash); label-mark puts the same mark before every field label */
  --pk-site-dot-w: 7px;
  --pk-site-dot-h: 7px;
  --pk-site-dot-r: var(--pk-r-pill);
  --pk-site-label-mark: none;
  /* a brand's own surfaces: a texture (background images) on cards, controls and floating layers, and a stitched inner edge
     (an outline drawn inside the box, stitch-inset in from its edge); none in the panel themes */
  --pk-site-surface: none;
  --pk-site-control-surface: none;
  --pk-site-layer-surface: none;
  --pk-site-stitch: none;
  --pk-site-control-stitch: none;
  --pk-site-layer-stitch: none;
  --pk-site-stitch-inset: 0px;
  /* a centred page's column, the rule under its head, a floating layer's own colour (a flow in a dialog) and how far a link's
     underline sits under its text */
  --pk-site-measure: calc(var(--pk-site-u) * 39);
  --pk-site-rule: var(--pk-line-strong);
  --pk-site-layer-bg: var(--pk-card);
  --pk-site-link-offset: 0.22em;
}
@media (max-width: 599px) {
  :root, [data-theme], .pk-site { --pk-site-display-track: -0.035em; }
}
/* Kurumsal's current item is a pale tint, Teknik's is lime: a chosen line takes their text shade (Teknik keeps lime in dark mode) */
[data-theme='corporate'], [data-theme='corporate'] .pk-site, [data-theme='portal'], [data-theme='portal'] .pk-site, [data-theme='technical'], [data-theme='technical'] .pk-site { --pk-site-chosen: var(--pk-accent-text); }

/* a stacking context of its own, so the page background (z-index -1) paints over the body's colour and under the content */
body.pk-site { color: var(--pk-site-text); isolation: isolate; }
/* the page background stays still while the page scrolls */
body.pk-site::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--pk-site-backdrop); }
:where(.pk-site) :is(.pk-h1, .pk-h2, .pk-h3, .pk-h4) { color: var(--pk-text); }
.pk-site-skip {
  position: absolute; top: var(--pk-site-space-3); left: var(--pk-site-space-3); z-index: 80; padding: var(--pk-site-space-2) var(--pk-site-space-3);
  border: 1px solid var(--pk-line-strong); background: var(--pk-site-header-bg); color: var(--pk-text); transform: translateY(-300%);
}
.pk-site-skip:focus { transform: none; }

/* tracked capitals in the page's language; a label with words of another language is written in capitals and takes
   pk-cased, because text-transform follows the page language (Turkish turns an English i into İ) */
.pk-site .pk-cased { text-transform: none; }
.pk-eyebrow {
  display: inline-flex; align-items: center; gap: calc(var(--pk-space-4) + 1px); font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-medium);
  line-height: var(--pk-lh-none); letter-spacing: var(--pk-site-caps-track); text-transform: var(--pk-site-caps-case); color: var(--pk-text-3);
}
.pk-eyebrow::before { content: ''; flex: none; width: var(--pk-site-dot-w); height: var(--pk-site-dot-h); border-radius: var(--pk-site-dot-r); background: var(--pk-site-dot); box-shadow: var(--pk-site-dot-halo); }
.pk-eyebrow--plain::before { content: none; }

/* buttons and links on a customer page: the brand's label case and the site's link colours */
.pk-site .pk-btn { letter-spacing: var(--pk-site-label-track); text-transform: var(--pk-site-caps-case); }
.pk-site .pk-link { color: var(--pk-site-link); text-decoration-color: var(--pk-site-link-line); text-underline-offset: var(--pk-site-link-offset); }
.pk-site .pk-link:hover { color: var(--pk-site-link-hover); text-decoration-color: var(--pk-site-link-hover); }
/* a small action inside a card (Kaydol, Sıraya gir): sentence case, its arrow nudges when the card is hovered */
.pk-btn.pk-btn--cue {
  height: auto; padding: var(--pk-space-4) var(--pk-space-7) var(--pk-space-4) var(--pk-space-8); gap: var(--pk-space-3);
  background: var(--pk-primary); color: var(--pk-on-primary); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-medium);
  letter-spacing: var(--pk-site-track); text-transform: none; box-shadow: none;
}
.pk-btn--cue > .pk-icon { width: 14px; height: 14px; transition: transform var(--pk-dur-slow) var(--pk-site-ease); }
:is(a, button):hover .pk-btn--cue > .pk-icon, .pk-btn--cue:hover > .pk-icon { transform: translateX(3px); }

/* the brand's faces and title tracking: the panel themes keep the reading face and their own tracking, which their theme
   parts set after these rules */
.pk-site :is(.pk-h1, .pk-h2, .pk-h3) { font-family: var(--pk-site-font-display); }
.pk-site .pk-h1 { letter-spacing: var(--pk-site-display-track); text-shadow: var(--pk-site-title-glow); }
.pk-site .pk-h2 { letter-spacing: var(--pk-site-step-track); }
.pk-site :is(.pk-eyebrow, .pk-btn, .pk-chip, .pk-seg__item, .pk-field__label, .pk-field__hint, .pk-input:not(.pk-input--time, .pk-input--amount, .pk-mono), .pk-day, .pk-kv, .pk-ref,
  .pk-site-nav a, .pk-site-sister, .pk-site-header__cta, .pk-site-section__title, .pk-site-footer__title) { font-family: var(--pk-site-font-ui); }
/* the brand's mark before a field's label */
.pk-site .pk-field__label::before {
  content: var(--pk-site-label-mark); display: inline-block; width: var(--pk-site-dot-w); height: var(--pk-site-dot-h); margin-inline-end: var(--pk-space-4);
  border-radius: var(--pk-site-dot-r); background: var(--pk-site-dot); vertical-align: middle;
}
/* the brand's surfaces: textures on cards, controls and layers; the stitch gives way to the focus ring */
.pk-site :is(.pk-card, .pk-site-card, .pk-pickcard, .pk-chosen, .pk-site-panel, .pk-review, .pk-wayin__option, .pk-site-booking) { background-image: var(--pk-site-surface); }
.pk-site :is(.pk-btn:not(.pk-btn--ghost, .pk-btn--text), .pk-chip, .pk-day, .pk-slot, .pk-datepick__nav, .pk-site-sister, .pk-held__add) { background-image: var(--pk-site-control-surface); }
.pk-site :is(.pk-dialog, .pk-drawer, .pk-site-menu) { background-image: var(--pk-site-layer-surface); }
:where(.pk-site :is(.pk-card, .pk-site-card, .pk-pickcard, .pk-chosen, .pk-site-panel, .pk-review, .pk-wayin__option, .pk-site-booking)):not(:focus-visible) { outline: var(--pk-site-stitch); outline-offset: var(--pk-site-stitch-inset); }
:where(.pk-site :is(.pk-btn:not(.pk-btn--ghost, .pk-btn--text), .pk-chip, .pk-day, .pk-slot, .pk-datepick__nav, .pk-site-sister, .pk-held__add)):not(:focus-visible, :has(> .pk-sr:focus-visible)) { outline: var(--pk-site-control-stitch); outline-offset: var(--pk-site-stitch-inset); }
:where(.pk-site :is(.pk-dialog, .pk-drawer, .pk-site-menu)):not(:focus-visible) { outline: var(--pk-site-layer-stitch); outline-offset: var(--pk-site-stitch-inset); }

/* ---------- header ---------- */
/* the band at the top: brand, the main menu in tracked capitals, the message action, the account and a sister brand. It
   stays at the top while the page scrolls; at 1100px and below the menu and actions fold into the menu button */
.pk-site-header { position: sticky; top: 0; z-index: 40; background: var(--pk-site-header-bg); border-bottom: 1px solid var(--pk-line-strong); }
/* the page scrolls what takes the focus (or a step, or a link's target) clear of the sticky header and of the focus ring */
:root:has(.pk-site-header) { scroll-padding-top: calc(var(--pk-site-header-room) + var(--pk-focus-room)); }
.pk-site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--pk-site-space-4); max-width: var(--pk-site-wide); margin-inline: auto;
  padding: var(--pk-site-header-pad) var(--pk-site-space-5);
}
.pk-site-brand {
  justify-self: start; display: inline-grid; justify-items: center; align-content: center; height: var(--pk-site-brand-h); color: var(--pk-site-brand);
  transition: color var(--pk-dur-slow) var(--pk-site-ease);
}
.pk-site-brand:hover { color: var(--pk-text); }
.pk-site-brand__name { font-size: calc(var(--pk-site-brand-h) * 0.5); font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-none); letter-spacing: calc(var(--pk-site-track) / 2); }
.pk-site-brand__sub {
  margin-top: calc(var(--pk-site-brand-h) * 0.08); padding-top: calc(var(--pk-site-brand-h) * 0.06); border-top: 1px solid currentColor;
  font-size: calc(var(--pk-site-brand-h) * 0.14); font-weight: var(--pk-fw-medium); line-height: var(--pk-lh-none); letter-spacing: calc(var(--pk-site-track) * 8);
}
.pk-site-brand__logo { height: 100%; width: auto; }
.pk-site-nav { display: flex; align-items: center; gap: var(--pk-site-space-1); }
.pk-site-nav a {
  position: relative; padding: var(--pk-site-space-2) var(--pk-site-space-3); color: var(--pk-text-3); font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-medium);
  letter-spacing: var(--pk-site-label-track); text-transform: var(--pk-site-caps-case); white-space: nowrap; transition: color var(--pk-dur-base) var(--pk-site-ease);
}
.pk-site-nav a::after {
  content: ''; position: absolute; right: var(--pk-site-space-3); bottom: var(--pk-space-1); left: var(--pk-site-space-3); height: 1px; background: var(--pk-site-brand);
  scale: 0 1; transform-origin: left; transition: scale var(--pk-dur-slow) var(--pk-site-ease);
}
.pk-site-nav a:hover, .pk-site-nav a[aria-current='page'] { color: var(--pk-text); }
.pk-site-nav a:hover::after { scale: 0.4 1; }
.pk-site-nav a[aria-current='page']::after { scale: 1 1; }
.pk-site-header__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--pk-site-space-3); }
.pk-site-header__cta {
  padding: var(--pk-site-space-2) var(--pk-site-space-3); border: 0; border-radius: var(--pk-r-pill); background: transparent; color: var(--pk-accent-text);
  font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-medium); letter-spacing: var(--pk-site-label-track); text-transform: var(--pk-site-caps-case);
  white-space: nowrap; cursor: pointer; transition: background var(--pk-dur-base) var(--pk-site-ease);
}
.pk-site-header__cta:hover { background: color-mix(in srgb, var(--pk-accent) 10%, transparent); }
.pk-site-header__account {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--pk-site-brand) 34%, transparent);
  border-radius: var(--pk-r-pill); color: var(--pk-site-brand); transition: color var(--pk-dur-base) var(--pk-site-ease), border-color var(--pk-dur-base) var(--pk-site-ease);
}
.pk-site-header__account:hover, .pk-site-header__account[aria-current='page'] { border-color: var(--pk-accent-text); color: var(--pk-accent-text); }
.pk-site-header__account > .pk-icon { stroke-width: 1.6; }
/* a sister brand's site; written as typed, never in capitals */
.pk-site-sister {
  display: inline-flex; align-items: center; gap: var(--pk-space-3); padding: calc(var(--pk-site-space-2) - 1px) var(--pk-site-space-3); border: 1px solid color-mix(in srgb, var(--pk-site-sister) 34%, transparent);
  border-radius: var(--pk-r-pill); color: var(--pk-site-sister); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-medium); letter-spacing: var(--pk-site-track); white-space: nowrap;
  transition: color var(--pk-dur-base) var(--pk-site-ease), border-color var(--pk-dur-base) var(--pk-site-ease), background var(--pk-dur-base) var(--pk-site-ease);
}
.pk-site-sister:hover { border-color: color-mix(in srgb, var(--pk-site-sister) 62%, transparent); background: color-mix(in srgb, var(--pk-site-sister) 10%, transparent); color: var(--pk-text); }
.pk-site-sister > .pk-icon { width: 0.85em; height: 0.85em; }
/* the menu button and the menu it opens; both styled at every width and switched on at 1100px, so previews show them */
.pk-site-header__menu {
  display: none; place-content: center; gap: calc(var(--pk-space-2) + 1px); width: 40px; height: 40px; padding: 0; border: 1px solid color-mix(in srgb, var(--pk-text) 16%, transparent);
  border-radius: var(--pk-r-xs); background: transparent; color: var(--pk-text); cursor: pointer;
}
.pk-site-header__menu > span { display: block; width: 17px; height: 1.5px; border-radius: var(--pk-r-fine); background: currentColor; transition: translate var(--pk-dur-slow) var(--pk-site-ease), rotate var(--pk-dur-slow) var(--pk-site-ease); }
.pk-site-header[data-open] .pk-site-header__menu > span:first-child { translate: 0 3.25px; rotate: 45deg; }
.pk-site-header[data-open] .pk-site-header__menu > span:last-child { translate: 0 -3.25px; rotate: -45deg; }
.pk-site-menu {
  position: absolute; top: 100%; right: 0; left: 0; z-index: 2; display: grid; gap: var(--pk-site-space-4); padding: var(--pk-site-space-3) var(--pk-site-space-4) var(--pk-site-space-5);
  border-block: 1px solid var(--pk-line-strong); background: var(--pk-canvas); box-shadow: var(--pk-site-menu-shadow);
  opacity: 0; translate: 0 -10px; visibility: hidden; transition: opacity var(--pk-site-dur-enter) var(--pk-site-ease-soft), translate var(--pk-site-dur-enter) var(--pk-site-ease), visibility 0s linear var(--pk-site-dur-enter);
}
.pk-site-header[data-open] .pk-site-menu { opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }
.pk-site-header::after {
  content: ''; position: fixed; inset: 0; z-index: -1; background: color-mix(in srgb, var(--pk-canvas) 78%, transparent); opacity: 0; visibility: hidden;
  pointer-events: none; transition: opacity var(--pk-site-dur-enter) var(--pk-site-ease-soft), visibility 0s linear var(--pk-site-dur-enter);
}
.pk-site-header[data-open]::after { opacity: 1; visibility: visible; transition-delay: 0s; }
.pk-site-menu__nav { display: grid; }
.pk-site-menu__nav a {
  padding: var(--pk-site-space-3) var(--pk-site-space-1); border-bottom: 1px solid color-mix(in srgb, var(--pk-text) 7%, transparent); color: var(--pk-text);
  font-size: var(--pk-fs-body); letter-spacing: calc(var(--pk-site-track) / 4);
}
.pk-site-menu__nav a[aria-current='page'] { color: var(--pk-accent-text); }
.pk-site-menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-site-space-4); }
@media (max-width: 1360px) {
  .pk-site-header__end .pk-site-sister { display: none; }
}
@media (max-width: 1100px) {
  .pk-site-header__inner { grid-template-columns: 1fr auto; }
  .pk-site-header__inner > :is(.pk-site-nav, .pk-site-header__end) { display: none; }
  .pk-site-header__menu { display: grid; }
}
@media (min-width: 1101px) {
  .pk-site-menu, .pk-site-header::after { display: none; }
}
@media (max-width: 720px) {
  :root, [data-theme], .pk-site {
    --pk-site-header-pad: var(--pk-site-space-2);
    --pk-site-header-room: var(--pk-site-header-h, calc(var(--pk-site-brand-h) + 2 * var(--pk-site-header-pad) + var(--pk-site-space-3) + var(--pk-site-space-2) + 1px));
  }
  .pk-site-header { padding: var(--pk-site-space-3) var(--pk-site-space-3) var(--pk-site-space-2); }
  .pk-site-header__inner { gap: var(--pk-site-space-2); padding: var(--pk-site-header-pad) var(--pk-site-space-3); }
}

/* ---------- page ---------- */
/* an inner page: a head column (eyebrow, title, intro, actions) that stays in view beside the body; one column at 860px */
.pk-site-main { min-height: calc(100svh - var(--pk-site-header-room)); padding: var(--pk-site-space-7) var(--pk-site-space-5); }
.pk-site-page {
  display: grid; grid-template-columns: minmax(0, var(--pk-site-aside)) minmax(0, 1fr); align-items: start; gap: var(--pk-site-gutter);
  max-width: var(--pk-site-max); margin-inline: auto;
}
.pk-site-page__head { position: sticky; top: calc(var(--pk-site-header-room) + var(--pk-site-space-5)); min-width: 0; }
.pk-site-page__head > .pk-h1 { margin-top: var(--pk-site-space-3); }
.pk-site-page__intro { max-width: 24rem; margin-top: var(--pk-site-space-3); font-size: var(--pk-fs-lead); line-height: var(--pk-lh-relaxed); color: var(--pk-text-2); }
.pk-site-page__intro--wide { max-width: 62ch; }
.pk-site-page__actions { display: flex; flex-wrap: wrap; gap: var(--pk-site-space-3); margin-top: var(--pk-site-space-5); }
.pk-site-page__body { display: grid; gap: var(--pk-site-space-6); min-width: 0; padding-top: var(--pk-site-space-2); }
.pk-site-page__body > p { max-width: 38rem; }
/* a page without the head column (the schedule): one wide column under a head of its own */
.pk-site-page--wide { grid-template-columns: minmax(0, 1fr); gap: var(--pk-site-space-5); }
.pk-site-page--wide > .pk-site-page__head { position: static; }
/* a named part of a page: its label in a narrow column beside it, a hairline above */
.pk-site-section {
  display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: var(--pk-site-space-4); padding-top: var(--pk-site-space-5);
  border-top: 1px solid color-mix(in srgb, var(--pk-text) 10%, transparent);
}
.pk-site-section__title {
  margin: 0; font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-medium); line-height: var(--pk-lh-loose); letter-spacing: var(--pk-site-label-track);
  text-transform: var(--pk-site-caps-case); color: var(--pk-text-3);
}
.pk-site-section__body { display: grid; gap: var(--pk-site-space-3); max-width: 38rem; min-width: 0; }
/* label and value rows: contact details, opening hours */
.pk-site-rows { display: grid; margin: 0; }
.pk-site-rows > div {
  display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--pk-site-space-3); padding-block: var(--pk-site-space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--pk-text) 8%, transparent);
}
.pk-site-rows > div:first-child { padding-top: 0; }
.pk-site-rows dt { font-size: var(--pk-fs-body); letter-spacing: var(--pk-site-track); color: var(--pk-text-3); }
.pk-site-rows dd { margin: 0; color: var(--pk-text); }
/* a page or a section coming in: a short rise; the class is dropped when it ends, so no transform stays on the box */
.pk-site-enter { animation: pk-site-rise var(--pk-site-dur-enter) var(--pk-site-ease) backwards; }
@keyframes pk-site-rise { from { opacity: 0; translate: 0 8px; } }
@media (max-width: 860px) {
  .pk-site-main { padding: var(--pk-site-space-5) var(--pk-site-space-4); }
  .pk-site-page { grid-template-columns: minmax(0, 1fr); gap: var(--pk-site-space-5); }
  .pk-site-page__head { position: static; }
  .pk-site-section { grid-template-columns: minmax(0, 1fr); gap: var(--pk-site-space-3); }
  .pk-site-rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-1); }
}

/* ---------- footer ---------- */
/* five columns (brand, studio, pages, social, sister brands) that become two at 860px, and the legal row */
.pk-site-footer { padding-block: var(--pk-site-space-6) var(--pk-site-space-5); border-top: 1px solid var(--pk-line); font-size: var(--pk-fs-item); }
.pk-site-footer__inner { width: min(78rem, 100% - 2 * var(--pk-site-space-6)); margin-inline: auto; }
.pk-site-footer__grid { display: grid; grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr)); align-items: start; gap: var(--pk-site-space-5) var(--pk-site-space-6); }
.pk-site-footer .pk-site-brand { --pk-site-brand-h: calc(var(--pk-site-u) * 2.6); margin-bottom: var(--pk-site-space-4); }
.pk-site-footer__title { margin: 0 0 var(--pk-site-space-3); font-size: var(--pk-site-fs-tiny); font-weight: var(--pk-fw-medium); letter-spacing: calc(var(--pk-site-track) * 3.5); color: var(--pk-text-3); }
/* an e-mail address or a long street breaks inside its column */
.pk-site-footer__list { display: grid; gap: var(--pk-space-3); margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; }
.pk-site-footer :is(li, p) { line-height: var(--pk-lh-loose); color: var(--pk-text-3); }
.pk-site-footer a { color: var(--pk-text-3); transition: color var(--pk-dur-fast) var(--pk-site-ease); }
.pk-site-footer a:hover { color: var(--pk-text); }
.pk-site-footer a.pk-site-footer__sister { color: var(--pk-site-sister); }
.pk-site-footer__social { display: inline-flex; align-items: center; gap: var(--pk-space-4); }
.pk-site-footer__social > .pk-icon { width: 1.05em; height: 1.05em; stroke-width: 1.6; }
.pk-site-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--pk-site-space-5); margin-top: var(--pk-site-space-5); padding-top: var(--pk-site-space-3); border-top: 1px solid var(--pk-line);
  font-size: var(--pk-fs-meta); color: var(--pk-text-3);
}
@media (max-width: 860px) {
  .pk-site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-site-space-4) var(--pk-site-space-5); }
  .pk-site-footer__grid > .pk-site-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .pk-site-footer__inner { width: min(70rem, 100% - 2 * var(--pk-site-space-4)); }
}
/* ---------- customer layer: the booking flow ---------- */
/* step ring: one arc per step cut from one circle, the steps done in the chosen colour, the current one in the brand's mark
   colour ("02 / 04" beside it) */
.pk-stepring { width: 2.4rem; height: 2.4rem; flex: none; }
.pk-stepring__arc { fill: none; stroke: var(--pk-line-strong); stroke-width: 3; stroke-linecap: round; transition: stroke var(--pk-dur-slow) var(--pk-site-ease); }
.pk-stepring__arc[data-state='done'] { stroke: var(--pk-site-chosen); }
.pk-stepring__arc[data-state='now'] { stroke: var(--pk-site-dot); }

/* the wizard's head block: eyebrow, title and intro above the steps (any wizard) */
.pk-wizard__head { display: grid; justify-items: start; gap: var(--pk-space-2); min-width: 0; }
/* the customer's flow: the head column holds the head, the ring with "02 / 04" and the steps with what each holds; the body
   holds the step. At 860px the steps fold into the ring line, which then names the step, and the intro shows on the first
   step only */
/* the parts sit in the page grid, not in the wizard's own areas; the head is a block, so the eyebrow sits on a text line */
.pk-wizard--site :is(.pk-wizard__body, .pk-wizard__steps, .pk-wizard__compact, .pk-wizard__foot) { grid-area: auto; }
.pk-wizard--site .pk-wizard__head { display: block; }
.pk-wizard--site .pk-wizard__progress { width: 100%; margin-top: var(--pk-site-space-5); }
.pk-wizard--site .pk-wizard__compact { display: flex; gap: var(--pk-site-space-2); margin: 0; font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-regular); color: var(--pk-text-2); }
.pk-wizard__count { font-weight: var(--pk-fw-medium); letter-spacing: calc(var(--pk-site-track) * 4); font-variant-numeric: tabular-nums; color: var(--pk-text); }
.pk-wizard__name { color: var(--pk-text-3); }
.pk-wizard__name::before { content: '·'; margin-right: var(--pk-site-space-2); }
.pk-wizard--site .pk-wizard__compact > .pk-wizard__name { display: none; }
.pk-wizard--site .pk-wizard__steps { gap: var(--pk-space-1); margin-top: var(--pk-site-space-4); border-top: 1px solid var(--pk-line); }
.pk-wizard--site .pk-wizard__step {
  grid-template-columns: 2.2rem minmax(0, 1fr); align-items: start; column-gap: var(--pk-site-space-2); row-gap: var(--pk-space-1); min-height: 0;
  padding: var(--pk-site-space-2) 0; border-radius: 0; border-bottom: 1px solid var(--pk-line); background: transparent; color: var(--pk-text); cursor: default;
}
.pk-wizard--site .pk-wizard__step:hover { background: transparent; }
.pk-wizard--site .pk-wizard__node {
  grid-row: span 2; display: block; width: auto; height: auto; padding-top: calc(var(--pk-fs-meta) * 0.15); border-radius: 0; background: transparent; font-family: inherit;
  font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-medium); letter-spacing: calc(var(--pk-site-track) * 3); color: var(--pk-text-3);
}
.pk-wizard--site .pk-wizard__step:is([aria-current='step'], [data-state='done']) .pk-wizard__node { background: transparent; color: var(--pk-text-3); }
.pk-wizard--site .pk-wizard__step[aria-current='step'] .pk-wizard__node { color: var(--pk-accent-figure); }
.pk-wizard--site .pk-wizard__label { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-body); color: var(--pk-text); }
.pk-wizard--site .pk-wizard__step:not([aria-current='step'], [data-state='done']) .pk-wizard__label { color: var(--pk-text-3); }
.pk-wizard--site a.pk-wizard__label {
  justify-self: start; text-decoration: underline; text-decoration-color: var(--pk-site-link-line); text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
.pk-wizard--site a.pk-wizard__label:hover { color: var(--pk-site-link-hover); }
.pk-wizard--site .pk-wizard__sub { font-size: var(--pk-fs-meta); line-height: var(--pk-lh-body); color: var(--pk-text-3); overflow-wrap: anywhere; }
/* the step: its title takes the focus when the step changes and clears the header when scrolled to */
.pk-wizard--site .pk-wizard__body { gap: var(--pk-site-space-4); }
.pk-wizard--site .pk-wizard__panel { gap: var(--pk-site-space-4); min-width: 0; scroll-margin-top: calc(var(--pk-site-space-5) - var(--pk-focus-room)); animation: pk-site-rise var(--pk-site-dur-enter) var(--pk-site-ease) backwards; }
.pk-wizard--site .pk-wizard__panel > .pk-h2:focus { outline: 0; }
.pk-wizard__note { margin: 0; max-width: 46ch; font-size: var(--pk-fs-item); line-height: var(--pk-lh-relaxed); color: var(--pk-text-3); }
.pk-wizard--site .pk-wizard__foot {
  justify-content: space-between; gap: var(--pk-site-space-3); margin-top: var(--pk-site-space-2); padding-top: var(--pk-site-space-4); border-top: 1px solid var(--pk-line);
}
.pk-wizard__main { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--pk-site-space-3); margin-left: auto; }
.pk-wizard__hint { font-size: var(--pk-fs-meta); color: var(--pk-danger-text); }
.pk-wizard--site .pk-wizard__foot > .pk-btn--ghost { padding-inline: var(--pk-site-space-1); text-transform: none; letter-spacing: 0; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-regular); color: var(--pk-text-2); box-shadow: none; }
.pk-wizard--site .pk-wizard__foot > .pk-btn--ghost:hover { background: transparent; color: var(--pk-site-link-hover); }
@media (max-width: 860px) {
  .pk-wizard--site .pk-wizard__progress { margin-top: var(--pk-site-space-3); }
  .pk-wizard--site .pk-wizard__steps { display: none; }
  .pk-wizard--site .pk-wizard__compact > .pk-wizard__name { display: inline; }
  .pk-wizard--site .pk-wizard__intro[data-later] { display: none; }
  /* the continue button stays in reach while a long list or calendar scrolls */
  .pk-wizard--site .pk-wizard__foot {
    position: sticky; bottom: 0; z-index: 3; margin-inline: calc(-1 * var(--pk-site-space-4));
    padding: var(--pk-site-space-3) var(--pk-site-space-4) max(var(--pk-site-space-3), env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--pk-canvas) 94%, transparent); backdrop-filter: blur(8px);
  }
  /* and the page scrolls what takes the focus clear of it (the foot is a button and its padding tall) */
  :root:has(.pk-wizard--site .pk-wizard__foot) { scroll-padding-bottom: calc(var(--pk-h-btn) + 2 * var(--pk-site-space-3) + var(--pk-focus-room)); }
}

/* ---------- choosing a service ---------- */
.pk-site-search { display: block; max-width: 30rem; }
.pk-site-search > .pk-input { border-radius: var(--pk-r-pill); padding-inline: var(--pk-site-space-4); }
.pk-pickgroup { display: grid; gap: var(--pk-site-space-2); }
.pk-pickgroup__title {
  display: flex; align-items: baseline; gap: calc(var(--pk-site-u) * 0.6); margin: 0; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-medium);
  letter-spacing: calc(var(--pk-site-track) / 2); color: var(--pk-text-2);
}
.pk-pickgroup__count { font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-regular); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
/* the cards of the customer layer (a service to pick, a session, a session's tile) lift and change their edge alike, and a
   card's picture (a service, a session) is cropped alike and grows a little on hover */
:is(.pk-pickcard, .pk-sessioncard, .pk-sessiontile) {
  transition: transform var(--pk-dur-sheet) var(--pk-site-ease), box-shadow var(--pk-dur-sheet) var(--pk-site-ease), border-color var(--pk-dur-base) var(--pk-site-ease);
}
:is(.pk-pickcard__media, .pk-sessioncard__media) { position: relative; display: block; aspect-ratio: var(--pk-site-ratio-card); overflow: hidden; background: var(--pk-inset); }
:is(.pk-pickcard__media, .pk-sessioncard__media) > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--pk-site-dur-rise) var(--pk-site-ease); }
:is(.pk-pickcard, a.pk-sessioncard):hover :is(.pk-pickcard__media, .pk-sessioncard__media) > img { transform: scale(1.05); }
/* picture cards: a 3:2 picture, the name and a quiet line; the chosen one is ringed and tagged. The ring gives way to the focus
   ring, which would hide under it */
.pk-pickcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--pk-site-space-3); margin: 0; padding: 0; list-style: none; }
.pk-pickcard {
  display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; padding: 0; border: 1px solid var(--pk-line); border-radius: var(--pk-r-tile);
  background: var(--pk-card); color: var(--pk-text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--pk-site-pick-shadow);
}
.pk-pickcard:hover { transform: translateY(var(--pk-site-lift)); border-color: color-mix(in srgb, var(--pk-accent) 35%, transparent); box-shadow: var(--pk-site-pick-shadow-hover); }
.pk-pickcard[aria-pressed='true'] { border-color: var(--pk-site-chosen); }
.pk-pickcard[aria-pressed='true']:not(:focus-visible) { outline: 1px solid var(--pk-site-chosen); outline-offset: 0; }
/* no picture: the studio's mark, contained */
.pk-pickcard__media > img.pk-site-mark { object-fit: contain; padding: 18%; }
/* neither a picture nor a mark: the card is its text, the chosen tag at its top */
.pk-pickcard--plain .pk-pickcard__body { padding-top: var(--pk-site-space-3); }
.pk-pickcard--plain .pk-pickcard__tag { position: static; justify-self: start; }
.pk-pickcard__tag {
  position: absolute; top: var(--pk-site-space-2); left: var(--pk-site-space-2); padding: var(--pk-space-1) var(--pk-space-5); border-radius: var(--pk-r-pill);
  background: var(--pk-current); color: var(--pk-on-current); font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-medium); letter-spacing: var(--pk-site-track);
}
.pk-pickcard__body { display: grid; align-content: start; gap: var(--pk-space-2); padding: var(--pk-site-space-2) var(--pk-site-space-3) var(--pk-site-space-3); }
.pk-pickcard__title { font-size: var(--pk-fs-title); line-height: var(--pk-lh-title); transition: color var(--pk-dur-base) var(--pk-site-ease); }
.pk-pickcard:hover .pk-pickcard__title { color: var(--pk-accent-text); }
.pk-pickcard__meta { font-size: var(--pk-fs-meta); line-height: var(--pk-lh-text); color: var(--pk-text-3); }
.pk-pickcard__badge {
  justify-self: start; margin-top: var(--pk-space-1); padding: 1px var(--pk-space-4); border-radius: var(--pk-r-pill); background: var(--pk-site-chosen-soft);
  color: var(--pk-site-chosen); font-size: var(--pk-site-fs-caps); letter-spacing: var(--pk-site-track);
}
.pk-pickempty { display: grid; justify-items: start; gap: var(--pk-site-space-3); font-size: var(--pk-fs-item); color: var(--pk-text-2); }
@media (max-width: 640px) {
  .pk-pickcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-site-space-2); }
  .pk-pickcard__body { padding: var(--pk-site-space-2); }
}

/* ---------- what was chosen ---------- */
/* the service or session being booked, kept in sight on the later steps, with a way back to change it */
.pk-chosen {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--pk-site-space-2) var(--pk-site-space-4);
  padding: var(--pk-site-space-2) var(--pk-site-space-4) var(--pk-site-space-2) var(--pk-site-space-2); border: 1px solid var(--pk-line); border-radius: var(--pk-r-tile);
  background: var(--pk-card); box-shadow: var(--pk-site-chosen-shadow);
}
.pk-chosen__media { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--pk-site-r-thumb); background: var(--pk-inset); }
.pk-chosen__media.pk-site-mark { object-fit: contain; padding: 14%; }
/* neither a picture nor a mark: the text and the change link alone */
.pk-chosen--plain { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--pk-site-space-4); }
.pk-chosen__body { display: grid; gap: var(--pk-space-1); min-width: 0; }
.pk-chosen__title { font-size: var(--pk-fs-title); font-weight: var(--pk-fw-medium); color: var(--pk-text); }
.pk-chosen__line { font-size: var(--pk-fs-item); font-variant-numeric: tabular-nums; color: var(--pk-text-2); }
.pk-chosen__meta { font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-chosen__body > .pk-seats { margin-top: var(--pk-space-2); }
.pk-chosen__change { align-self: start; padding-block: var(--pk-site-space-2); }
@media (max-width: 640px) {
  .pk-chosen { grid-template-columns: 4.5rem minmax(0, 1fr); padding-right: var(--pk-site-space-3); }
  .pk-chosen__change { grid-column: 2; justify-self: start; padding-block: 0; }
  .pk-chosen--plain { grid-template-columns: minmax(0, 1fr); }
  .pk-chosen--plain .pk-chosen__change { grid-column: 1; }
}

/* ---------- places left ---------- */
/* one dot per place (up to 20), the taken ones filled, and the places left in words; few left and full are marked */
.pk-seats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3) var(--pk-site-space-2); font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-seats__dots { display: inline-flex; flex-wrap: wrap; gap: calc(var(--pk-space-1) + 1px); }
.pk-seats__dots > i { width: 7px; height: 7px; border: 1px solid color-mix(in srgb, var(--pk-site-seat) 75%, transparent); border-radius: var(--pk-r-pill); }
.pk-seats__dots > i.on { border-color: var(--pk-site-seat); background: var(--pk-site-seat); }
.pk-seats--few .pk-seats__text { font-weight: var(--pk-fw-medium); color: var(--pk-warning-text); }
.pk-seats--full .pk-seats__text { font-weight: var(--pk-fw-medium); color: var(--pk-danger-text); }
.pk-seats--full .pk-seats__dots > i { border-color: var(--pk-line-control); background: var(--pk-line-control); }

/* ---------- day and time ---------- */
/* the day picker's day states besides free (11-calendar): full, still loading, out of the bookable window; a day that cannot
   be chosen stays focusable and answers with the line under the grid */
.pk-datepick__day:is([data-state='full'], [data-state='unknown'], [data-state='out']) { color: var(--pk-text-3); }
.pk-datepick__day[data-state='out'] { cursor: default; }
.pk-datepick__day[data-state='out']:hover { background: transparent; }
.pk-datepick__day[data-state='unknown'] { animation: pk-site-pulse var(--pk-site-dur-pulse) var(--pk-site-ease-soft) infinite; }
.pk-datepick__nav { flex: none; }
.pk-datepick__message { min-height: 1.4em; margin: 0; font-size: var(--pk-fs-meta); color: var(--pk-danger-text); }
@keyframes pk-site-pulse { 50% { opacity: 0.45; } }
/* the slot step: the month beside the day's free starts from 1100px */
.pk-when { display: grid; align-items: start; gap: var(--pk-site-space-5); }
.pk-when > .pk-datepick { max-width: 26rem; }
.pk-when__times { display: grid; align-content: start; gap: var(--pk-site-space-3); min-width: 0; }
.pk-when__title { margin: 0; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-medium); letter-spacing: calc(var(--pk-site-track) / 4); color: var(--pk-text); }
@media (min-width: 1100px) {
  .pk-when { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: var(--pk-site-space-6); }
}
/* suggested starts after a refused one: wider chips with the day, each on one line */
.pk-slots--wide > .pk-slot { justify-content: flex-start; max-width: 100%; white-space: nowrap; }

/* ---------- group sessions as a choice ---------- */
/* a session as a radio: day and time, who leads it, places left or "Dolu · sıraya gir" */
.pk-sessions--pick { gap: var(--pk-site-space-2); }
.pk-session--pick { grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; transition: box-shadow var(--pk-dur-fast) var(--pk-site-ease), background var(--pk-dur-fast) var(--pk-site-ease); }
.pk-session--pick:hover { box-shadow: var(--pk-ring-mark-strong); }
.pk-session--pick:has(> input:checked) { background: var(--pk-site-chosen-soft); box-shadow: var(--pk-ring-chosen); }
.pk-session--pick .pk-session__seats { color: var(--pk-text-2); font-weight: var(--pk-fw-regular); }
.pk-session--pick .pk-session__seats > small { color: var(--pk-text-3); }
.pk-session--pick.pk-session--full .pk-session__seats > small { font-weight: var(--pk-fw-medium); color: var(--pk-danger-text); }

/* ---------- when it suits (a request) ---------- */
/* pressed tiles in fixed columns: the days, then the parts of the day, each with an optional line icon */
.pk-picktiles { display: grid; gap: var(--pk-site-space-1); }
.pk-picktiles__label { font-size: var(--pk-fs-meta); letter-spacing: var(--pk-site-track); color: var(--pk-text-3); }
.pk-picktiles__row { display: grid; gap: var(--pk-site-space-2); }
.pk-picktiles__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 26rem; }
.pk-picktiles__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 39rem; }
.pk-picktile {
  display: grid; justify-items: center; align-content: center; gap: var(--pk-space-2); min-height: var(--pk-h-btn); padding: var(--pk-site-space-2) var(--pk-site-space-1);
  border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-tile); background: var(--pk-card); color: var(--pk-text); font: inherit; font-size: var(--pk-fs-item);
  text-align: center; cursor: pointer; transition: border-color var(--pk-dur-base) var(--pk-site-ease), background var(--pk-dur-base) var(--pk-site-ease), color var(--pk-dur-base) var(--pk-site-ease);
}
.pk-picktile:hover { border-color: var(--pk-primary-edge); }
.pk-picktile[aria-pressed='true'] { border-color: var(--pk-site-chosen); background: var(--pk-current); color: var(--pk-on-current); }
.pk-picktile > .pk-icon { width: 22px; height: 22px; stroke-width: 1.5; color: var(--pk-accent-text); }
.pk-picktile[aria-pressed='true'] > .pk-icon { color: inherit; }

/* ---------- details ---------- */
/* the actions under a customer form: a way back or a quiet link at the start, the main action at the end */
.pk-site-formfoot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pk-site-space-3); margin-top: var(--pk-site-space-2);
  padding-top: var(--pk-site-space-4); border-top: 1px solid var(--pk-line);
}
/* a group of choices is a fieldset without the browser's frame */
:where(.pk-site) fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
:where(.pk-site) legend { padding: 0; }
/* the studio's cancellation terms under a summary */
.pk-site-policy { display: grid; gap: var(--pk-site-space-1); }
.pk-site-policy__title { font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-medium); color: var(--pk-text-2); }
.pk-site-policy > p { margin: 0; font-size: var(--pk-fs-meta); color: var(--pk-text-3); white-space: pre-line; }
/* the mark after a required field's label; screen readers hear the word beside it */
.pk-field__required { margin-left: var(--pk-space-2); color: var(--pk-danger-text); }
/* a password field with its own show button beside it */
.pk-field__pair { display: flex; align-items: stretch; gap: var(--pk-site-space-1); }
.pk-field__pair > .pk-input { flex: 1; min-width: 0; }
.pk-field__pair > .pk-btn { flex: none; height: auto; padding-inline: var(--pk-site-space-3); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-regular); letter-spacing: 0; text-transform: none; }
/* fields of a customer form keep a reading width */
.pk-site-form { display: grid; gap: var(--pk-site-space-5); }
.pk-site-form > :is(.pk-field, .pk-option, .pk-notice) { max-width: 34rem; }
/* a filled honeypot refuses the form: off screen, out of the tab order and of the accessibility tree */
.pk-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- done ---------- */
/* the customer's done screen at the start of the column: a drawn seal, the status, thanks, the reference, what happens next */
.pk-done--start { justify-items: start; gap: var(--pk-site-space-4); padding: 0; text-align: left; }
.pk-seal { width: 3.6rem; height: 3.6rem; }
.pk-seal__ring {
  fill: none; stroke: var(--pk-site-chosen); stroke-width: 1.5; stroke-dasharray: 183; stroke-dashoffset: 183;
  animation: pk-site-draw var(--pk-site-dur-draw) var(--pk-site-ease-soft) var(--pk-dur-quick) forwards;
}
.pk-seal__tick {
  fill: none; stroke: var(--pk-site-dot); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: pk-site-draw var(--pk-site-dur-tick) var(--pk-site-ease) var(--pk-site-dur-draw) forwards;
}
.pk-seal--cancelled .pk-seal__ring { stroke: var(--pk-line-control); }
.pk-seal--cancelled .pk-seal__tick { stroke: var(--pk-danger-text); }
@keyframes pk-site-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pk-seal__ring, .pk-seal__tick { animation: none; stroke-dashoffset: 0; }
  .pk-datepick__day[data-state='unknown'] { animation: none; }
}
/* the booking's reference: a pill that selects whole */
.pk-ref {
  display: inline-block; padding: calc(var(--pk-fs-item) * 0.3) calc(var(--pk-fs-item) * 0.9); border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-pill); background: var(--pk-card);
  font-weight: var(--pk-fw-medium); letter-spacing: calc(var(--pk-site-track) * 3.5); font-variant-numeric: tabular-nums; color: var(--pk-text); white-space: nowrap; user-select: all;
}
.pk-done__ref { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-site-space-2); margin: 0; font-size: var(--pk-fs-item); color: var(--pk-text-2); }
.pk-done__summary { width: 100%; max-width: 36rem; padding-block: var(--pk-site-space-3); border-block: 1px solid var(--pk-line); }
.pk-done__actions { display: flex; flex-wrap: wrap; gap: var(--pk-site-space-2); margin-top: var(--pk-site-space-2); }
.pk-done__more { display: grid; justify-items: start; gap: var(--pk-site-space-2); width: 100%; margin-top: var(--pk-site-space-3); padding-top: var(--pk-site-space-3); border-top: 1px solid var(--pk-line); }
/* numbered next steps */
.pk-nextsteps { display: grid; gap: var(--pk-site-space-4); max-width: 40rem; margin: 0; padding: 0; list-style: none; counter-reset: pk-nextstep; }
.pk-nextsteps__title { margin-top: var(--pk-site-space-2); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-medium); color: var(--pk-text); }
.pk-nextsteps > li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--pk-site-space-3); font-size: var(--pk-fs-item); color: var(--pk-text-2); counter-increment: pk-nextstep; }
.pk-nextsteps > li::before {
  content: counter(pk-nextstep, decimal-leading-zero); padding-top: calc(var(--pk-site-fs-caps) * 0.32); font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-medium); letter-spacing: calc(var(--pk-site-track) * 2.5);
  color: var(--pk-accent-text);
}
.pk-nextsteps b { display: block; font-weight: var(--pk-fw-medium); color: var(--pk-text); }
/* undo while the cancel window is open: the question and a confirmation that opens in place */
.pk-undo { display: grid; gap: var(--pk-site-space-3); width: 100%; }
.pk-undo > p { margin: 0; font-size: var(--pk-fs-item); color: var(--pk-text-3); }
.pk-confirm {
  display: grid; gap: var(--pk-site-space-2); max-width: 34rem; padding: var(--pk-site-space-4); border: 1px solid color-mix(in srgb, var(--pk-danger) 32%, transparent);
  border-radius: var(--pk-r-tile); background: color-mix(in srgb, var(--pk-danger) 5%, var(--pk-card));
}
.pk-confirm__title { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-medium); color: var(--pk-text); }
.pk-confirm > p { margin: 0; font-size: var(--pk-fs-item); color: var(--pk-text-2); }
.pk-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--pk-site-space-2); margin-top: var(--pk-site-space-1); }
/* ---------- customer layer: schedule, packages, service, contact, account, legal ---------- */
/* a page head across the width with figures at its end (the schedule) */
.pk-site-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--pk-site-space-5) var(--pk-site-space-7); }
.pk-site-head .pk-h1 { margin-top: var(--pk-site-space-2); }
.pk-site-head .pk-site-page__intro { max-width: 62ch; }
.pk-site-head__more { justify-self: start; margin-top: var(--pk-site-space-3); }
/* a link to more of the same (Programın tamamı, Bütün paketler): in the brand's text colour */
.pk-site .pk-link.pk-site-more { color: var(--pk-accent-text); text-decoration-color: color-mix(in srgb, var(--pk-accent-text) 40%, transparent); }
.pk-site .pk-link.pk-site-more:hover { text-decoration-color: currentColor; }
/* big light figures in a row: a count over its label */
.pk-figures { display: flex; gap: var(--pk-site-space-6); margin: 0; }
.pk-figures > div { display: flex; flex-direction: column-reverse; gap: var(--pk-site-space-1); }
.pk-figures dd { margin: 0; font-size: var(--pk-fs-figure-xl); font-weight: var(--pk-fw-light); line-height: var(--pk-lh-none); font-variant-numeric: tabular-nums; color: var(--pk-text); }
.pk-figures dt { font-size: var(--pk-fs-meta); letter-spacing: calc(var(--pk-site-track) * 1.5); color: var(--pk-text-3); }
/* a quiet panel on the page: the schedule's controls; quiet: a filled note without an edge (how to buy), its text at a reading
   width beside the actions while both fit, the actions under it when they do not */
.pk-site-panel {
  display: grid; gap: var(--pk-site-space-3); padding: var(--pk-site-space-3) var(--pk-site-space-4); border: 1px solid var(--pk-line); border-radius: var(--pk-r-card);
  background: color-mix(in srgb, var(--pk-card) 72%, transparent);
}
.pk-site-panel--quiet {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-site-space-4) var(--pk-site-space-7); padding: var(--pk-site-space-5) var(--pk-site-space-6);
  border: 0; background: var(--pk-inset);
}
.pk-site-panel--quiet > :first-child { flex: 1 1 18rem; min-width: 0; }
.pk-site-panel--quiet > :last-child:not(:first-child) { flex: 0 1 auto; }
.pk-site-panel__title { margin: 0; font-size: var(--pk-fs-h3); font-weight: var(--pk-fw-regular); }
.pk-site-panel__text { max-width: 60ch; margin-top: var(--pk-site-space-2); color: var(--pk-text-2); }
/* the day strip of a schedule: the month where it starts, "Tümü", up to three dots for the day's sessions */
.pk-days__month { flex: none; align-self: center; padding-inline: var(--pk-site-space-2) var(--pk-space-1); font-size: var(--pk-fs-meta); letter-spacing: var(--pk-site-track); color: var(--pk-accent-text); }
.pk-day--all { width: auto; padding-inline: var(--pk-site-space-3); align-content: center; font-size: var(--pk-fs-meta); }
.pk-day__dots { display: flex; gap: calc(var(--pk-space-1) + 1px); height: 5px; }
.pk-day__dots > i { width: 5px; height: 5px; border-radius: var(--pk-r-pill); background: var(--pk-accent-figure); }
.pk-day[aria-pressed='true'] .pk-day__dots > i { background: currentColor; }
/* filters with a label beside their chips; a chip may carry a round picture or initials */
.pk-site-filters { display: flex; flex-wrap: wrap; gap: var(--pk-site-space-2) var(--pk-site-space-6); }
.pk-site-filter { display: flex; align-items: center; gap: var(--pk-site-space-2); }
.pk-site-filter__label { font-size: var(--pk-fs-meta); letter-spacing: calc(var(--pk-site-track) * 1.5); color: var(--pk-text-3); }
.pk-site-filter__chips { display: flex; flex-wrap: wrap; gap: var(--pk-site-space-1); }
/* the schedule's cards */
.pk-sessioncards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--pk-site-space-4); margin: 0; padding: 0; list-style: none; }
.pk-sessioncard {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--pk-line); border-radius: var(--pk-r-card); background: var(--pk-card); color: inherit;
  box-shadow: var(--pk-site-lift-shadow); animation: pk-site-rise var(--pk-site-dur-rise) var(--pk-site-ease) backwards;
}
.pk-sessioncards > li:nth-child(2) > * { animation-delay: var(--pk-site-stagger); }
.pk-sessioncards > li:nth-child(3) > * { animation-delay: calc(var(--pk-site-stagger) * 2); }
.pk-sessioncards > li:nth-child(n + 4) > * { animation-delay: calc(var(--pk-site-stagger) * 3); }
.pk-sessioncard__media > .pk-dateleaf { position: absolute; top: var(--pk-site-space-3); left: var(--pk-site-space-3); box-shadow: var(--pk-site-leaf-shadow); }
.pk-sessioncard__clock {
  position: absolute; top: var(--pk-site-space-3); right: var(--pk-site-space-3); padding: var(--pk-space-2) var(--pk-space-6); border-radius: var(--pk-r-pill);
  background: color-mix(in srgb, var(--pk-card) 90%, transparent); box-shadow: var(--pk-site-leaf-shadow); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-medium);
  font-variant-numeric: tabular-nums; color: var(--pk-text);
}
.pk-sessioncard__body { flex: 1; display: flex; flex-direction: column; gap: var(--pk-site-space-2); padding: var(--pk-site-space-4); }
.pk-sessioncard__when { font-size: var(--pk-fs-meta); letter-spacing: var(--pk-site-track); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
.pk-sessioncard__title { margin: 0; font-size: var(--pk-fs-h3); font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-snug); transition: color var(--pk-dur-base) var(--pk-site-ease); }
a.pk-sessioncard:hover .pk-sessioncard__title { color: var(--pk-accent-text); }
.pk-sessioncard__who { display: flex; align-items: center; gap: var(--pk-site-space-1); font-size: var(--pk-fs-item); color: var(--pk-text-2); }
.pk-sessioncard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pk-site-space-2); margin-top: auto; padding-top: var(--pk-site-space-3); border-top: 1px solid var(--pk-line); }
.pk-sessioncard--full .pk-sessioncard__media > img { filter: grayscale(0.8); opacity: 0.55; }
.pk-sessioncard--full :is(.pk-sessioncard__title, .pk-dateleaf__dow, .pk-dateleaf__day) { color: var(--pk-text-3); }
/* the date leaf's month line */
.pk-dateleaf__month { font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
/* nothing in the schedule: the studio's mark over a line, in a dashed frame */
.pk-site-empty {
  display: grid; justify-items: center; gap: var(--pk-site-space-4); margin-top: var(--pk-site-space-3); padding: var(--pk-site-space-7) var(--pk-site-space-4);
  border: 1px dashed var(--pk-line-strong); border-radius: var(--pk-r-card); text-align: center;
}
.pk-site-empty > img { width: 7rem; height: auto; }
.pk-site-empty > p { max-width: 40ch; margin: 0; color: var(--pk-text-2); }
@media (max-width: 860px) {
  .pk-site-head { grid-template-columns: minmax(0, 1fr); gap: var(--pk-site-space-3); }
  .pk-figures { gap: var(--pk-site-space-4); }
  .pk-figures > div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: var(--pk-space-3); }
  .pk-figures dd { font-size: var(--pk-fs-h3); }
}
@media (max-width: 640px) {
  .pk-site-panel { gap: var(--pk-site-space-2); padding: var(--pk-site-space-2); border-radius: var(--pk-r-tile); }
  /* one swipeable row that keeps room inside for its chips' focus rings */
  .pk-site-filters {
    flex-wrap: nowrap; margin: calc(-1 * var(--pk-focus-room)); padding: calc(var(--pk-focus-room) + var(--pk-space-1)); overflow-x: auto;
    scroll-padding-inline: var(--pk-focus-room); scrollbar-width: none;
  }
  .pk-site-filter, .pk-site-filter .pk-chip { flex: none; }
  .pk-site-filter__chips { flex-wrap: nowrap; }
  .pk-sessioncards { grid-template-columns: minmax(0, 1fr); gap: var(--pk-site-space-3); }
  .pk-sessioncard { flex-direction: row; border-radius: var(--pk-r-tile); }
  .pk-sessioncard__media { flex: none; width: 7.5rem; aspect-ratio: auto; }
  .pk-sessioncard__clock { display: none; }
  .pk-sessioncard__media > .pk-dateleaf { top: var(--pk-space-3); left: var(--pk-space-3); min-width: 3rem; padding: var(--pk-space-2) var(--pk-space-3) var(--pk-space-3); border-radius: var(--pk-r-xs); }
  .pk-sessioncard__media > .pk-dateleaf > .pk-dateleaf__day { font-size: var(--pk-fs-h3); }
  .pk-sessioncard__body { min-width: 0; gap: var(--pk-space-3); padding: var(--pk-site-space-3); }
  .pk-sessioncard__title { font-size: var(--pk-fs-title); }
  .pk-sessioncard__foot { padding-top: var(--pk-site-space-2); }
  .pk-sessioncard__foot > .pk-btn--cue { padding: var(--pk-space-3) var(--pk-space-6) var(--pk-space-3) var(--pk-space-7); }
}

/* ---------- packages ---------- */
/* a package: its credits as a big figure in the brand colour, a badge for an introductory offer, name, terms, the classes
   it covers and the price at the foot */
.pk-packcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--pk-site-space-4); margin: 0; padding: 0; list-style: none; }
.pk-packcard {
  display: flex; flex-direction: column; gap: var(--pk-site-space-2); height: 100%; padding: var(--pk-site-space-5); border: 1px solid var(--pk-line); border-radius: var(--pk-r-card);
  background: var(--pk-card); box-shadow: var(--pk-site-lift-shadow); animation: pk-site-rise var(--pk-site-dur-rise) var(--pk-site-ease) backwards;
}
.pk-packcard--intro { border-color: color-mix(in srgb, var(--pk-accent) 30%, transparent); }
.pk-packcard__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--pk-site-space-2) var(--pk-site-space-3); }
.pk-packcard__figure { display: flex; align-items: baseline; gap: var(--pk-site-space-2); margin: 0; }
.pk-packcard__number { font-size: var(--pk-fs-hero-md); font-weight: var(--pk-fw-light); line-height: var(--pk-lh-none); font-variant-numeric: tabular-nums; color: var(--pk-site-dot); }
.pk-packcard__unit { font-size: var(--pk-fs-meta); letter-spacing: calc(var(--pk-site-track) * 1.5); color: var(--pk-text-3); }
.pk-packcard__badge { flex: none; padding: var(--pk-space-2) var(--pk-space-6); border-radius: var(--pk-r-pill); background: var(--pk-accent-soft); color: var(--pk-accent-text); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-medium); }
.pk-packcard__name { margin: var(--pk-site-space-2) 0 0; font-size: var(--pk-fs-h3); font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-snug); }
.pk-packcard__terms { margin: 0; font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-packcard__desc { margin: 0; font-size: var(--pk-fs-item); color: var(--pk-text-2); }
.pk-packcard__covers { display: grid; gap: var(--pk-site-space-1); margin-top: var(--pk-site-space-2); }
.pk-packcard__label { font-size: var(--pk-site-fs-caps); letter-spacing: calc(var(--pk-site-track) * 1.5); color: var(--pk-text-3); }
.pk-packcard__covers > ul { display: flex; flex-wrap: wrap; gap: var(--pk-site-space-1); margin: 0; padding: 0; list-style: none; }
.pk-packcard__covers a {
  display: inline-block; padding: var(--pk-space-2) var(--pk-space-6); border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-pill); font-size: var(--pk-fs-meta);
  color: var(--pk-text-2); transition: border-color var(--pk-dur-base) var(--pk-site-ease), color var(--pk-dur-base) var(--pk-site-ease);
}
.pk-packcard__covers a:hover { border-color: var(--pk-primary-edge); color: var(--pk-accent-text); }
.pk-packcard__price { margin: auto 0 0; padding-top: var(--pk-site-space-3); border-top: 1px solid var(--pk-line); font-size: var(--pk-fs-h3); font-variant-numeric: tabular-nums; color: var(--pk-text); }
/* a member's own packages: what is left, a bar, until when */
.pk-site-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--pk-site-space-3); margin: 0; padding: 0; list-style: none; }
.pk-site-pack { display: grid; gap: var(--pk-site-space-2); padding: var(--pk-site-space-4); border: 1px solid var(--pk-line); border-radius: var(--pk-r-tile); background: var(--pk-card); }
.pk-site-pack__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pk-site-space-3); font-size: var(--pk-fs-title); color: var(--pk-text); }
.pk-site-pack__left { margin: 0; font-size: var(--pk-fs-h3); font-weight: var(--pk-fw-light); font-variant-numeric: tabular-nums; color: var(--pk-text); }
.pk-site-pack > .pk-progress { color: var(--pk-site-seat); }
.pk-site-pack__meta { margin: 0; font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
@media (max-width: 720px) {
  .pk-site-panel--quiet { padding: var(--pk-site-space-5); }
}

/* ---------- a service's page ---------- */
/* one wide column: the title and facts beside the picture, then the sections */
.pk-site-main--detail { padding: var(--pk-site-space-5) 0 var(--pk-site-space-7); }
.pk-site-detail { width: min(78rem, 100% - 2 * var(--pk-site-space-6)); margin-inline: auto; }
.pk-site-detail__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); grid-template-areas: 'head figure' 'facts figure'; align-items: start;
  gap: var(--pk-site-space-4) var(--pk-site-space-7); margin-bottom: var(--pk-site-space-5);
}
.pk-site-detail__head { grid-area: head; display: grid; justify-items: start; gap: var(--pk-site-space-3); }
.pk-site-detail__top > .pk-site-figure { grid-area: figure; }
.pk-site-detail__top > .pk-facts { grid-area: facts; }
.pk-site-detail__section { display: grid; justify-items: start; gap: var(--pk-site-space-3); margin-top: var(--pk-site-space-5); }
.pk-site-detail__section > :not(.pk-site-detail__title, .pk-link) { justify-self: stretch; }
.pk-site-detail__title {
  margin: 0; font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-medium); line-height: var(--pk-lh-none); letter-spacing: calc(var(--pk-site-caps-track) * 7 / 6);
  text-transform: var(--pk-site-caps-case); color: var(--pk-text-3);
}
.pk-site-detail > .pk-site-actions { margin-top: var(--pk-site-space-5); }
@media (max-width: 720px) {
  .pk-site-detail { width: min(70rem, 100% - 2 * var(--pk-site-space-4)); }
  .pk-site-detail__top { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'figure' 'facts'; }
}
/* the schedule and the packages: a board under its head, across the page width */
.pk-site-main--board { padding-top: var(--pk-site-space-4); }
/* a page that is one statement (not found): a wide band */
.pk-site-main--band { padding: var(--pk-site-space-7) 0 var(--pk-site-space-9); }
.pk-site-main--band .pk-site-detail__head { gap: var(--pk-site-space-4); margin-bottom: var(--pk-site-space-6); }
/* one narrow column (the page behind an e-mailed link) */
.pk-site-narrow { display: grid; gap: var(--pk-site-space-5); max-width: 42rem; margin-inline: auto; }
.pk-site-narrow > .pk-site-page__head { position: static; }
.pk-site-family { font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-medium); line-height: var(--pk-lh-compact); letter-spacing: calc(var(--pk-site-track) * 2); color: var(--pk-text-3); }
a.pk-site-family:hover { color: var(--pk-text); }
.pk-site-title-lg { font-size: var(--pk-fs-hero-md); }
.pk-site-lede { max-width: 44ch; margin: 0; font-size: var(--pk-fs-h3); line-height: var(--pk-lh-loose); color: var(--pk-text-2); }
.pk-site-figure { margin: 0; }
.pk-site-figure > img { width: 100%; height: auto; aspect-ratio: var(--pk-site-ratio-wide); object-fit: cover; border: 1px solid color-mix(in srgb, var(--pk-text) 10%, transparent); border-radius: var(--pk-site-r-image); }
/* the facts of a service: a tracked label over its value, a hairline above */
.pk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--pk-site-space-5); margin: 0; }
.pk-facts > div { padding-top: var(--pk-site-space-3); border-top: 1px solid var(--pk-line); }
.pk-facts dt {
  margin-bottom: var(--pk-site-space-2); font-size: var(--pk-site-fs-caps); letter-spacing: var(--pk-site-caps-track); text-transform: var(--pk-site-caps-case); color: var(--pk-text-3);
}
.pk-facts dd { margin: 0; font-size: var(--pk-fs-item); color: var(--pk-text-2); }
/* who it is for: a soft panel in the text */
.pk-callout { display: grid; gap: var(--pk-site-space-3); padding: var(--pk-site-space-5); border: 1px solid var(--pk-line); border-radius: var(--pk-r-tile); background: color-mix(in srgb, var(--pk-text) 4%, transparent); }
.pk-callout > p { max-width: 58ch; margin: 0; font-size: var(--pk-fs-item); color: var(--pk-text-2); }
.pk-site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-site-space-4); }
/* the next sessions of a service as tiles: date leaf, time and the action, who leads it, places */
.pk-sessiontiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: var(--pk-site-space-3); margin: 0; padding: 0; list-style: none; }
.pk-sessiontiles > li { container-type: inline-size; }
.pk-sessiontile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'leaf time cue' 'leaf who who' 'leaf seats seats'; align-items: center;
  gap: var(--pk-space-1) var(--pk-site-space-3); width: 100%; height: 100%; padding: var(--pk-site-space-2) var(--pk-site-space-3) var(--pk-site-space-2) var(--pk-site-space-2);
  border: 1px solid var(--pk-line); border-radius: var(--pk-r-tile); background: var(--pk-card); color: inherit; box-shadow: var(--pk-site-lift-shadow);
}
/* a session as a card (the schedule) or a tile (here): a link lifts on hover, a full one is a dashed outline on the page */
:is(a.pk-sessioncard, a.pk-sessiontile):hover { transform: translateY(calc(var(--pk-site-lift) * 4 / 3)); border-color: color-mix(in srgb, var(--pk-accent) 35%, transparent); box-shadow: var(--pk-site-lift-shadow-hover); }
:is(.pk-sessioncard--full, .pk-sessiontile--full) { border-style: dashed; border-color: var(--pk-line-strong); background: transparent; box-shadow: none; }
.pk-sessiontile > .pk-dateleaf { grid-area: leaf; width: 4.25rem; background: var(--pk-site-chosen-soft); }
.pk-sessiontile__time { grid-area: time; font-size: var(--pk-fs-title); font-variant-numeric: tabular-nums; color: var(--pk-text); white-space: nowrap; }
.pk-sessiontile__who { grid-area: who; font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-sessiontile > .pk-seats { grid-area: seats; }
.pk-sessiontile > .pk-btn--cue { grid-area: cue; }
.pk-sessiontile--full .pk-sessiontile__time { color: var(--pk-text-3); }
@container (max-width: 20rem) {
  .pk-sessiontile { grid-template-areas: 'leaf time time' 'leaf who who' 'leaf seats seats' 'leaf cue cue'; }
  .pk-sessiontile > .pk-btn--cue { justify-self: start; margin-top: var(--pk-space-3); }
}
/* what something costs, row by row: name and terms, the price at the end */
.pk-pricerows { display: grid; margin: 0; padding: 0; list-style: none; }
.pk-pricerow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name price' 'terms price'; gap: var(--pk-space-1) var(--pk-site-space-4);
  padding-block: var(--pk-site-space-3); border-top: 1px solid var(--pk-line);
}
.pk-pricerow__name { grid-area: name; color: var(--pk-text); }
.pk-pricerow__terms { grid-area: terms; font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-pricerow__price { grid-area: price; align-self: center; font-variant-numeric: tabular-nums; color: var(--pk-text); }
/* a list of links led by a dot: the services of a group, related services */
.pk-site-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); align-content: start; align-items: start; gap: var(--pk-space-2) var(--pk-site-space-4); margin: 0; padding: 0; list-style: none; }
.pk-site-links a { display: flex; align-items: flex-start; gap: var(--pk-space-5); padding-block: var(--pk-space-3); line-height: var(--pk-lh-cozy); color: var(--pk-text); transition: color var(--pk-dur-base) var(--pk-site-ease), transform var(--pk-dur-slow) var(--pk-site-ease); }
.pk-site-links a::before {
  content: ''; flex: none; width: 5px; height: 5px; margin-top: calc(var(--pk-fs-body) * 0.6); border-radius: var(--pk-r-pill); background: color-mix(in srgb, var(--pk-text) 30%, transparent);
  transition: background var(--pk-dur-base) var(--pk-site-ease), box-shadow var(--pk-dur-slow) var(--pk-site-ease);
}
.pk-site-links a:hover { color: var(--pk-accent-text); transform: translateX(3px); }
.pk-site-links a:hover::before { background: var(--pk-site-dot); box-shadow: var(--pk-site-dot-halo); }
@media (max-width: 640px) {
  .pk-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pk-site-space-3); }
  .pk-facts dt { letter-spacing: calc(var(--pk-site-caps-track) * 2 / 3); }
  .pk-sessiontiles { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- contact ---------- */
/* the studio's card: a map with a directions pill, the address and ways to reach, the opening hours beside */
.pk-site-card { overflow: hidden; border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-card); background: color-mix(in srgb, var(--pk-card) 60%, transparent); box-shadow: var(--pk-site-card-shadow); }
/* the card clips what leaves it, so the map link's focus ring is drawn inside the link, following the card's corners; the
   picture sits under the link's own layer, or its filter would paint over the ring */
.pk-site-card__map {
  position: relative; isolation: isolate; display: block; border-bottom: 1px solid color-mix(in srgb, var(--pk-text) 10%, transparent);
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}
.pk-site-card__map:focus-visible { outline-offset: calc(-1 * var(--pk-focus-room)); }
.pk-site-card__map > :is(img, iframe) {
  position: relative; z-index: -1; display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border: 0; filter: saturate(0.8) contrast(0.96);
  pointer-events: none;
}
.pk-site-card__directions {
  position: absolute; right: var(--pk-site-space-3); bottom: var(--pk-site-space-3); display: inline-flex; align-items: center; gap: var(--pk-space-3);
  padding: var(--pk-site-space-2) var(--pk-site-space-3); border-radius: var(--pk-r-pill); background: var(--pk-card); color: var(--pk-accent-text);
  font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-medium); line-height: var(--pk-lh-none); letter-spacing: var(--pk-site-label-track); text-transform: var(--pk-site-caps-case);
  box-shadow: var(--pk-site-leaf-shadow); transition: transform var(--pk-dur-base) var(--pk-site-ease);
}
.pk-site-card__directions > .pk-icon { width: 14px; height: 14px; }
.pk-site-card__map:hover .pk-site-card__directions { transform: translateY(-2px); }
.pk-site-card__body { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--pk-site-space-6); padding: var(--pk-site-space-5) var(--pk-site-space-5) var(--pk-site-space-6); }
.pk-site-card__hours { padding-left: var(--pk-site-space-6); border-left: 1px solid color-mix(in srgb, var(--pk-text) 9%, transparent); }
.pk-site-card__title {
  margin: 0 0 var(--pk-site-space-3); font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-medium); letter-spacing: var(--pk-site-label-track);
  text-transform: var(--pk-site-caps-case); color: var(--pk-text-3);
}
.pk-site-card__address { margin: 0 0 var(--pk-site-space-4); font-size: var(--pk-fs-body); font-style: normal; line-height: var(--pk-lh-text); color: var(--pk-text); }
.pk-site-card__list { display: grid; margin: 0; }
.pk-site-card__list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--pk-site-space-3); padding-block: var(--pk-site-space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--pk-text) 7%, transparent);
}
.pk-site-card__list > div:last-child { border-bottom: 0; }
.pk-site-card__list :is(dt, dd) { font-size: var(--pk-fs-item); }
.pk-site-card__list dt { color: var(--pk-text-3); }
.pk-site-card__list dd { margin: 0; text-align: right; color: var(--pk-text); }
.pk-site-card__note { margin: var(--pk-site-space-4) 0 0; font-size: var(--pk-fs-meta); line-height: var(--pk-lh-relaxed); color: var(--pk-text-3); }
@media (max-width: 860px) {
  .pk-site-card__map > :is(img, iframe) { aspect-ratio: 4 / 3; }
  .pk-site-card__body { grid-template-columns: minmax(0, 1fr); gap: var(--pk-site-space-5); padding: var(--pk-site-space-4); }
  .pk-site-card__hours { padding: var(--pk-site-space-5) 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--pk-text) 9%, transparent); }
}
/* the one message form of the site, in a dialog: two columns, tracked labels, the legal line beside the send button */
.pk-dialog.pk-site-dialog { width: min(42rem, 100%); padding: var(--pk-site-space-5); }
.pk-contactform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-site-space-3) var(--pk-site-space-4); }
.pk-contactform > :is(.pk-contactform__wide, .pk-notice, .pk-honeypot) { grid-column: 1 / -1; }
.pk-contactform .pk-field { gap: var(--pk-site-space-1); }
.pk-contactform .pk-input { height: auto; padding: var(--pk-site-space-3); }
.pk-contactform .pk-field__label {
  font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-regular); letter-spacing: var(--pk-site-caps-track); text-transform: var(--pk-site-caps-case); color: var(--pk-text-3);
}
.pk-contactform__legal { align-self: center; max-width: 44ch; margin: 0; font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-contactform__send { display: flex; justify-content: flex-end; align-self: center; }
@media (max-width: 720px) {
  .pk-contactform { grid-template-columns: minmax(0, 1fr); }
  .pk-contactform__send { justify-content: flex-start; }
}

/* ---------- account ---------- */
.pk-site-hello { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pk-site-space-3); padding: var(--pk-site-space-4) var(--pk-site-space-5); border: 1px solid var(--pk-line); border-radius: var(--pk-r-card); background: var(--pk-card); }
.pk-site-hello__mail { margin: var(--pk-space-2) 0 0; font-size: var(--pk-fs-item); color: var(--pk-text-3); overflow-wrap: anywhere; }
/* a member's bookings: date leaf, what and when, status, a link to manage it */
.pk-site-bookings { display: grid; gap: var(--pk-site-space-2); margin: 0; padding: 0; list-style: none; }
.pk-site-booking {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-site-space-3); padding: var(--pk-site-space-2) var(--pk-site-space-3) var(--pk-site-space-2) var(--pk-site-space-2);
  border: 1px solid var(--pk-line); border-radius: var(--pk-r-tile); background: var(--pk-card);
}
.pk-site-booking > .pk-dateleaf { width: 4.25rem; background: var(--pk-site-chosen-soft); }
.pk-site-booking__body { display: grid; justify-items: start; gap: var(--pk-space-1); min-width: 0; }
.pk-site-booking__title { font-size: var(--pk-fs-title); color: var(--pk-text); }
.pk-site-booking__meta { font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-site-booking--past { background: transparent; }
.pk-site-booking--cancelled .pk-site-booking__title { color: var(--pk-text-3); text-decoration: line-through; }
@media (max-width: 640px) {
  .pk-site-booking { grid-template-columns: auto minmax(0, 1fr); }
  .pk-site-booking > .pk-link { grid-column: 2; justify-self: start; }
  .pk-site-hello { padding: var(--pk-site-space-3) var(--pk-site-space-4); }
}

/* ---------- legal text ---------- */
.pk-prose.pk-prose--legal { max-width: 62ch; font-size: inherit; line-height: inherit; color: var(--pk-text-2); }
.pk-prose--legal > h2 { margin-top: var(--pk-site-space-7); font-size: var(--pk-fs-h3); font-weight: var(--pk-fw-regular); color: var(--pk-text); }
.pk-prose--legal > h2:first-child { margin-top: 0; }
.pk-prose--legal > h2 + * { margin-top: var(--pk-site-space-3); }
.pk-prose--legal ul { display: grid; gap: var(--pk-site-space-2); padding-left: var(--pk-site-space-3); }
.pk-prose--legal li::marker { color: var(--pk-accent-text); }

/* ---------- phone board ---------- */
/* a customer page shown in a phone screen: the page itself in a frame as wide as a phone, so it lays out as on a phone */
.pk-screen > .pk-screen__frame { display: block; width: 100%; height: 100%; border: 0; }
/* ---------- customer layer: centred pages, the top row, the mark footer, the week, the way in, held images ---------- */
/* a page as one centred column: a top row of its own, the head centred over a short rule, the body at a reading width. prose
   widens it for a text, wide for a board */
.pk-site-page--centered { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: var(--pk-site-measure); }
.pk-site-page--centered.pk-site-page--prose { --pk-site-measure: calc(var(--pk-site-u) * 46); }
.pk-site-page--centered.pk-site-page--wide { --pk-site-measure: calc(var(--pk-site-u) * 62); }
.pk-site-page--centered > .pk-site-page__head { position: static; display: grid; justify-items: center; gap: var(--pk-site-space-2); text-align: center; }
.pk-site-page--centered > .pk-site-row + .pk-site-page__head { margin-top: calc(var(--pk-site-u) * 2); }
.pk-site-page--centered > .pk-site-page__head > .pk-h1 { margin-top: 0; }
.pk-site-page--centered .pk-site-page__intro { max-width: 36rem; margin-top: 0; }
.pk-site-page--centered > .pk-site-page__body { margin-top: var(--pk-site-space-5); padding-top: 0; }
:is(.pk-site-page--centered, .pk-site-dialog__body) .pk-site-form > :is(.pk-field, .pk-option, .pk-notice) { max-width: none; }
/* the studio's card with its ways to reach as label and value rows under the map (a centred page) */
.pk-site-card__rows { padding: var(--pk-site-space-4) calc(var(--pk-site-u) * 1.25) var(--pk-site-space-5); }
.pk-site-page__rule { display: block; width: 6rem; height: 1px; margin-top: var(--pk-site-space-1); background: var(--pk-site-rule); }

/* the page's own top row (no site header): a way back at the start, chips at the end (the account, sister brands, the
   language); it sits in the page and scrolls with it. On a phone the chips go under the way back */
.pk-site-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pk-site-space-2) var(--pk-site-space-4); }
.pk-site-row__back {
  display: inline-flex; align-items: center; gap: var(--pk-space-5); min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--pk-site-font-ui); font-size: var(--pk-site-fs-caps);
  letter-spacing: var(--pk-site-label-track); text-transform: var(--pk-site-caps-case); color: var(--pk-site-link); transition: color var(--pk-dur-fast) var(--pk-site-ease);
}
.pk-site-row__back > .pk-icon { width: 16px; height: 16px; transition: translate var(--pk-dur-fast) var(--pk-site-ease); }
.pk-site-row__back:hover { color: var(--pk-site-link-hover); }
.pk-site-row__back:hover > .pk-icon { translate: calc(-1 * var(--pk-space-1)) 0; }
.pk-site-row__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-site-space-2); }
.pk-site-row__end > .pk-site-sister { min-height: 36px; }
/* the language: a chip that opens the page's other languages */
.pk-site-lang { background-color: transparent; font: inherit; cursor: pointer; }
.pk-site-lang > .pk-icon { width: 0.85em; height: 0.85em; }
@media (max-width: 640px) {
  .pk-site-row { flex-direction: column; align-items: flex-start; }
}

/* a footer that is only the brand's mark between two rules (the page says everything else) */
.pk-site-footer--mark { padding-block: 0 var(--pk-site-space-5); border-top: 0; }
.pk-site-footer--mark > .pk-site-footer__inner { display: flex; align-items: center; gap: var(--pk-site-space-4); width: min(var(--pk-site-measure), 100% - 2 * var(--pk-site-gutter)); }
.pk-site-footer--mark > .pk-site-footer__inner::before, .pk-site-footer--mark > .pk-site-footer__inner::after { content: ''; flex: 1; height: 1px; background: var(--pk-site-rule); }
.pk-site-footer__mark {
  flex: none; margin: 0; font-family: var(--pk-site-font-ui); font-size: var(--pk-site-fs-tiny); letter-spacing: calc(var(--pk-site-track) * 5);
  text-transform: var(--pk-site-caps-case); color: var(--pk-text-3);
}

/* the way in: the booking modes the studio offers, as two cards with an arrow; the question above them */
.pk-wayin { display: grid; gap: var(--pk-site-space-3); }
.pk-wayin__question { margin: 0; font-size: var(--pk-fs-item); color: var(--pk-text); }
.pk-wayin__list { display: grid; gap: var(--pk-site-space-2); margin: 0; padding: 0; list-style: none; }
.pk-wayin__option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: calc(var(--pk-site-u) * 0.625) var(--pk-site-space-2); width: 100%; height: 100%;
  padding: calc(var(--pk-site-u) * 1.25); border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-tile);
  background-color: var(--pk-card); color: var(--pk-text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--pk-site-pick-shadow);
  transition: border-color var(--pk-dur-base) var(--pk-site-ease), box-shadow var(--pk-dur-base) var(--pk-site-ease);
}
.pk-wayin__option:hover { border-color: var(--pk-primary-edge); box-shadow: var(--pk-site-pick-shadow-hover); }
.pk-wayin__title {
  font-family: var(--pk-site-font-display); font-size: var(--pk-fs-title); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-title);
  letter-spacing: var(--pk-site-label-track); text-transform: var(--pk-site-caps-case); color: var(--pk-title-text);
}
.pk-wayin__arrow { width: 20px; height: 20px; color: var(--pk-accent-text); transition: translate var(--pk-dur-fast) var(--pk-site-ease); }
.pk-wayin__option:hover .pk-wayin__arrow { translate: var(--pk-space-1) 0; }
.pk-wayin__text { grid-column: 1 / -1; margin: 0; font-size: var(--pk-fs-item); line-height: var(--pk-lh-relaxed); color: var(--pk-text-2); }
@media (min-width: 640px) {
  .pk-wayin__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* a step's head on a page without a steps list: its title (the focus goes there when the step changes) and the way back on one
   line */
.pk-site-stephead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pk-site-space-2) var(--pk-site-space-4); scroll-margin-top: var(--pk-site-space-4); }
.pk-site-stephead > .pk-h2:focus { outline: 0; }
.pk-site-step { display: grid; gap: var(--pk-gap); min-width: 0; }
.pk-site-step__lead { margin: 0; font-size: var(--pk-fs-item); line-height: var(--pk-lh-body); color: var(--pk-text-2); }

/* a choice the page labels itself (who, which day, which time): the label in the brand's label face before it */
.pk-site-choice { display: grid; gap: var(--pk-site-space-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.pk-site-choice__label {
  display: block; padding: 0; font-family: var(--pk-site-font-ui); font-size: var(--pk-site-fs-caps); line-height: var(--pk-lh-relaxed);
  letter-spacing: var(--pk-site-caps-track); text-transform: var(--pk-site-caps-case); color: var(--pk-text-2);
}
.pk-site-choice__label::before {
  content: var(--pk-site-label-mark); display: inline-block; width: var(--pk-site-dot-w); height: var(--pk-site-dot-h); margin-inline-end: var(--pk-space-4);
  border-radius: var(--pk-site-dot-r); background: var(--pk-site-dot); vertical-align: middle;
}
.pk-site-choice__note { margin: 0; font-size: var(--pk-fs-fine); color: var(--pk-text-3); }

/* two short fields side by side (where and how big), one above the other on a phone */
.pk-site-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-site-space-3) var(--pk-site-space-4); max-width: 100%; }
@media (max-width: 640px) {
  .pk-site-pair { grid-template-columns: minmax(0, 1fr); }
}

/* a week of days to page through: weekday, day and month on three lines, seven to a row; a full day or one past the window
   stays focusable and says why in its label and in the line under the row */
.pk-weekpick { display: grid; gap: var(--pk-site-space-1); min-width: 0; }
.pk-weekpick__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-site-space-3); }
.pk-weekpick__nav { display: flex; gap: var(--pk-space-4); }
.pk-days--week { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: var(--pk-space-2); }
.pk-days--week > .pk-day { width: auto; min-height: 72px; align-content: center; padding: var(--pk-space-4) var(--pk-space-1); }
.pk-day__month { font-size: var(--pk-fs-micro); color: var(--pk-text-3); }
.pk-day[aria-pressed='true'] .pk-day__month { color: inherit; }
.pk-days--week > .pk-day:is([data-state='full'], [data-state='out'], [data-state='unknown']) { background: transparent; color: var(--pk-text-3); box-shadow: var(--pk-ring); cursor: default; }
.pk-days--week > .pk-day[data-state='unknown'] { animation: pk-site-pulse var(--pk-site-dur-pulse) var(--pk-site-ease-soft) infinite; }
@media (prefers-reduced-motion: reduce) {
  .pk-days--week > .pk-day[data-state='unknown'] { animation: none; }
}

/* reference pictures kept in the browser until the form is sent: the add button and the count, a note, the pictures with a
   remove button each, and the files that were refused with their reason */
.pk-held { display: grid; gap: var(--pk-site-space-2); min-width: 0; }
.pk-held__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-site-space-2) var(--pk-site-space-3); }
.pk-held__count { font-family: var(--pk-site-font-ui); font-size: var(--pk-fs-fine); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
.pk-held__list { display: flex; flex-wrap: wrap; gap: var(--pk-site-space-2); margin: 0; padding: 0; list-style: none; }
.pk-held__item { position: relative; width: 5.5rem; aspect-ratio: 1; }
.pk-held__thumb { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--pk-line-strong); border-radius: var(--pk-site-r-thumb); background: var(--pk-inset); }
.pk-held__item > .pk-icon-btn { position: absolute; top: var(--pk-space-2); right: var(--pk-space-2); }
.pk-held__refused { display: grid; gap: var(--pk-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--pk-fs-meta); color: var(--pk-danger-text); overflow-wrap: anywhere; }

/* the receipt in the middle of the page, without a seal (BookingDone align="center") */
.pk-done--receipt { gap: var(--pk-site-space-4); padding: 0; }
.pk-done--receipt > .pk-done__summary { text-align: left; }
.pk-done--receipt > .pk-done__actions { justify-content: center; }
.pk-done--receipt > .pk-nextsteps { text-align: left; }

/* a customer flow inside a dialog over the studio's home page: the dialog keeps its head, its body scrolls, and the flow's foot
   stays at the dialog's bottom */
.pk-dialog.pk-site-dialog--flow {
  grid-template-rows: auto minmax(0, 1fr); gap: 0; width: min(48rem, 100%); max-height: min(90dvh, 100%); padding: 0; overflow: hidden;
  background-color: var(--pk-site-layer-bg);
}
.pk-site-dialog--flow > .pk-dialog__head { align-items: center; padding: var(--pk-site-space-3) var(--pk-site-space-4); border-bottom: 1px solid var(--pk-line); }
.pk-site-dialog__body { display: grid; gap: var(--pk-site-space-5); min-height: 0; padding: var(--pk-site-space-4); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: var(--pk-site-space-4) calc(var(--pk-h-btn) + 2 * var(--pk-site-space-3)); }
.pk-site-dialog__body :is(.pk-site-formfoot, .pk-wizard__foot) {
  position: sticky; bottom: calc(-1 * var(--pk-site-space-4)); z-index: 2; margin: 0 calc(-1 * var(--pk-site-space-4)) calc(-1 * var(--pk-site-space-4));
  padding: var(--pk-site-space-3) var(--pk-site-space-4); background-color: var(--pk-site-layer-bg);
}
@media (min-width: 640px) {
  .pk-site-dialog--flow > .pk-dialog__head { padding: var(--pk-site-space-3) var(--pk-site-space-5); }
  .pk-site-dialog__body { padding: var(--pk-site-space-4) var(--pk-site-space-5) var(--pk-site-space-5); }
  .pk-site-dialog__body :is(.pk-site-formfoot, .pk-wizard__foot) { bottom: calc(-1 * var(--pk-site-space-5)); margin: 0 calc(-1 * var(--pk-site-space-5)) calc(-1 * var(--pk-site-space-5)); padding-inline: var(--pk-site-space-5); }
}

/* a page over the page it was opened from (PageDrawer): a dialog with the brand's glow that plays its closing out, a bottom
   sheet on phones; the close button stays in view while the content scrolls */
html:has(dialog.pk-pagedrawer[open]) { overflow: hidden; }
dialog.pk-pagedrawer {
  display: block; width: min(48rem, 100%); max-height: calc(100svh - var(--pk-site-space-8)); padding: 0;
  overflow-y: auto; overscroll-behavior: contain; border-radius: var(--pk-r-card);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--pk-accent) 6%, transparent), transparent 60%), var(--pk-inset);
  animation: pk-pagedrawer-open 460ms var(--pk-site-ease) both;
}
dialog.pk-pagedrawer:not([open]) { display: none; }
dialog.pk-pagedrawer::backdrop { animation: pk-pagedrawer-scrim 320ms var(--pk-site-ease) both; }
dialog.pk-pagedrawer[data-closing] { animation: pk-pagedrawer-close 300ms var(--pk-site-ease) forwards; }
dialog.pk-pagedrawer[data-closing]::backdrop { animation: pk-pagedrawer-scrim 300ms var(--pk-site-ease) reverse forwards; }
.pk-pagedrawer__close { position: sticky; top: var(--pk-site-space-3); z-index: 2; float: right; margin: var(--pk-site-space-3) var(--pk-site-space-3) calc(var(--pk-site-space-3) * -1) 0; }
.pk-pagedrawer__body { padding: var(--pk-site-space-6); }
@keyframes pk-pagedrawer-scrim { from { opacity: 0 } }
@keyframes pk-pagedrawer-open { from { opacity: 0; transform: translateY(16px) scale(0.985) } }
@keyframes pk-pagedrawer-close { to { opacity: 0; transform: translateY(12px) scale(0.99) } }
@keyframes pk-pagedrawer-sheet { from { opacity: 0; transform: translateY(8%) } }
@media (max-width: 720px) {
  dialog.pk-pagedrawer {
    width: 100%; max-width: none; max-height: 92svh; margin: auto 0 0;
    border-width: 1px 0 0; border-radius: var(--pk-r-card) var(--pk-r-card) 0 0; animation-name: pk-pagedrawer-sheet;
  }
  .pk-pagedrawer__body { padding: var(--pk-site-space-6) var(--pk-site-space-4) var(--pk-site-space-7); }
}
@media (prefers-reduced-motion: reduce) {
  dialog.pk-pagedrawer, dialog.pk-pagedrawer::backdrop, dialog.pk-pagedrawer[data-closing], dialog.pk-pagedrawer[data-closing]::backdrop { animation: none; }
}
/* ---------- record walk ---------- */
/* under a record's title: the previous and next record of the list it was opened from (in the list's order), its place in
   that list and the way back to the same page of it */
.pk-walk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-7); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-walk__step, .pk-walk__back { position: relative; display: inline-flex; align-items: center; gap: var(--pk-space-2); min-height: 28px; font-weight: var(--pk-fw-label); color: var(--pk-text-2); white-space: nowrap; }
:is(a.pk-walk__step, a.pk-walk__back):hover { color: var(--pk-text); text-decoration: underline; text-underline-offset: 3px; }
/* an end of the list: the step stays in its place, faint and not a link */
.pk-walk__step:not(a) { color: var(--pk-text-3); font-weight: var(--pk-fw-regular); }
.pk-walk .pk-icon { width: 16px; height: 16px; }
/* under a page title, as close as the header's sub line */
.pk-header__main > .pk-walk { margin-top: var(--pk-space-3); }
.pk-walk__pos { font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--pk-text-3); }

/* ---------- owner ---------- */
/* who owns the record (seller, assignee, account owner) and what they did last; set apart by a hairline, never cut */
.pk-owner { display: grid; gap: var(--pk-space-1); flex: none; padding-left: var(--pk-space-8); box-shadow: var(--pk-edge-left); font-size: var(--pk-fs-meta); line-height: var(--pk-lh-snug); white-space: nowrap; }
.pk-owner__label { color: var(--pk-text-3); }
.pk-owner__name { font-size: var(--pk-fs-small); font-weight: var(--pk-fw-strong); color: var(--pk-title-text); }
.pk-owner__last { color: var(--pk-text-2); }

/* ---------- a rule beside a task ---------- */
/* the shape of a notice without its fill: a rule ("bu kartı arayamazsın") reads quieter than a task that waits */
.pk-notice--quiet { background: transparent; box-shadow: var(--pk-ring-strong); }
.pk-notice--quiet > .pk-icon { color: var(--pk-text-3); }

/* ---------- next step ---------- */
.pk-nextstep { display: flex; align-items: flex-start; gap: var(--pk-space-6); padding: var(--pk-space-7) var(--pk-space-8); border-radius: var(--pk-r-tile); background: var(--pk-accent-soft); }
.pk-nextstep > .pk-icon { flex: none; margin-top: 1px; color: var(--pk-accent-text); }
.pk-nextstep__body { min-width: 0; }
.pk-nextstep__text { font-size: var(--pk-fs-small); font-weight: var(--pk-fw-strong); color: var(--pk-text); text-wrap: pretty; }
.pk-nextstep__meta { margin-top: var(--pk-space-2); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }

/* ---------- contracts ---------- */
/* a customer's contracts, subscriptions or packages grouped by family: name and a selectable line under it, what it covers,
   start to end with the time left, the amount, the state and its document. The name is the row's link; past rows stay, only
   quieter. Columns keep their widths from row to row and stack on narrow content */
.pk-contracts { display: grid; gap: var(--pk-space-9); container: pk-contracts / inline-size; }
.pk-contracts__group { display: grid; }
.pk-contracts__head { display: flex; align-items: baseline; gap: var(--pk-space-4); margin: 0 0 var(--pk-space-3); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-strong); }
.pk-contracts__count { font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-regular); color: var(--pk-text-3); }
.pk-contract {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 12rem 6.5rem 7.5rem var(--pk-h-btn-sm);
  grid-template-areas: 'main cover dates amount state doc'; align-items: center; gap: var(--pk-space-3) var(--pk-space-7);
  padding: var(--pk-row-y) 0; border-top: 1px solid var(--pk-line); font-size: var(--pk-fs-small);
}
.pk-contracts__head + .pk-contract { border-top: 0; }
.pk-contract__main { grid-area: main; display: grid; min-width: 0; }
.pk-contract__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--pk-fw-strong); color: var(--pk-title-text); }
a.pk-contract__name:hover { text-decoration: underline; text-underline-offset: 3px; }
/* above the row's link, so its text can be selected and copied */
.pk-contract__sub { position: relative; z-index: 1; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-contract__cover { grid-area: cover; min-width: 0; color: var(--pk-text-2); }
.pk-contract__dates { grid-area: dates; display: grid; justify-items: start; gap: var(--pk-space-2); }
.pk-contract__dates > .pk-mono { color: var(--pk-text-2); }
.pk-contract__amount { grid-area: amount; justify-self: end; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-strong); white-space: nowrap; }
.pk-contract__state { grid-area: state; justify-self: start; min-width: 0; max-width: 100%; }
.pk-contract__doc { grid-area: doc; position: relative; z-index: 1; justify-self: end; }
/* no document: the mark stays, faint, so the column does not read as empty */
.pk-contract__nodoc { grid-area: doc; justify-self: end; display: grid; place-items: center; width: var(--pk-h-btn-sm); height: var(--pk-h-btn-sm); color: var(--pk-text-3); }
.pk-contract__nodoc > .pk-icon { width: 18px; height: 18px; }
.pk-contract--past :is(.pk-contract__name, .pk-contract__amount) { font-weight: var(--pk-fw-medium); color: var(--pk-text-2); }
@container pk-contracts (max-width: 759px) {
  .pk-contract { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'main doc' 'dates state' 'cover amount'; }
  .pk-contract__state { justify-self: end; }
}

/* ---------- win-back ---------- */
/* nothing running any more: what ended, how long ago, and the one action that brings the customer back */
.pk-opportunity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-5) var(--pk-space-7); padding: var(--pk-space-7) var(--pk-space-8); border: 1px dashed var(--pk-accent-text); border-radius: var(--pk-r-tile); }
.pk-opportunity > .pk-icon { flex: none; color: var(--pk-accent-text); }
.pk-opportunity__body { flex: 1 1 220px; min-width: 0; }
.pk-opportunity__title { display: block; font-weight: var(--pk-fw-strong); }
.pk-opportunity__meta { display: block; margin-top: var(--pk-space-1); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }

/* ---------- what the customer does not have ---------- */
.pk-xsell { display: grid; gap: var(--pk-space-4); }
.pk-xsell__label { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-xsell__list { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; }
.pk-chip.pk-xsell__chip { background: var(--pk-card); box-shadow: var(--pk-ring-strong); color: var(--pk-text); }
.pk-chip.pk-xsell__chip:hover { box-shadow: var(--pk-ring-chosen); }
.pk-chip.pk-xsell__chip > .pk-icon { color: var(--pk-accent-text); }

/* ---------- who opened the record ---------- */
/* one card per person: visits, time spent, the last visit, when they came and what they stopped on */
.pk-viewers { display: grid; gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; }
.pk-viewers__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pk-space-3) var(--pk-space-6); align-items: start; padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-inset); }
.pk-viewers__item > .pk-avatar { grid-row: span 3; }
.pk-viewers__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--pk-fw-strong); }
.pk-viewers__facts { display: flex; flex-wrap: wrap; gap: var(--pk-space-1) var(--pk-space-6); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-viewers__times { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); margin: 0; padding: 0; list-style: none; }
.pk-viewers__time { padding: var(--pk-space-1) var(--pk-space-3); border-radius: var(--pk-r-tag); background: var(--pk-card); font-family: var(--pk-mono); font-size: var(--pk-fs-fine); color: var(--pk-text-2); }

/* ---------- something running ---------- */
/* a call, a timer or a recording that is on: always in view at the window's corner, with its clock and the one way back to
   it; it has no close. On phones it rises above the tab bar, and the page keeps room for it at its end */
.pk-livecard {
  position: fixed; right: var(--pk-space-12); bottom: calc(var(--pk-space-12) + env(safe-area-inset-bottom, 0px)); z-index: 25;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-5) var(--pk-space-6);
  width: min(340px, 100% - 2 * var(--pk-space-8)); padding: var(--pk-space-7) var(--pk-space-8);
  border-radius: var(--pk-r-panel); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-float-shadow);
}
.pk-livecard__body { display: grid; gap: var(--pk-space-1); min-width: 0; }
.pk-livecard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--pk-fw-strong); color: var(--pk-title-text); }
a.pk-livecard__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.pk-livecard__clock { font-family: var(--pk-font-figures); font-size: var(--pk-fs-figure-sm); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pk-livecard > .pk-btn { grid-column: 1 / -1; }
.pk-main:has(> .pk-livecard)::after { content: ''; height: calc(var(--pk-space-24) * 2); }
@media (max-width: 1023px) {
  .pk-livecard {
    right: 0; left: 0; bottom: calc(var(--pk-space-24) * 2 + var(--pk-space-4) + env(safe-area-inset-bottom, 0px)); grid-template-columns: minmax(0, 1fr) auto auto;
    width: min(560px, 100% - 2 * var(--pk-space-6)); margin-inline: auto; padding: var(--pk-space-5) var(--pk-space-5) var(--pk-space-5) var(--pk-space-7);
  }
  .pk-livecard > .pk-btn { grid-column: auto; }
  .pk-main:has(> .pk-livecard)::after { height: calc(var(--pk-space-24) * 2); }
}
@media (max-width: 479px) {
  .pk-livecard { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--pk-space-4); padding-right: var(--pk-space-7); }
  .pk-livecard > .pk-btn { grid-column: 1 / -1; }
  .pk-main:has(> .pk-livecard)::after { height: calc(var(--pk-space-24) * 3); }
}

/* ---------- leaderboard ---------- */
/* lanes in order: the place, who, a bar and the figure. Only the leader takes the brand colour (order and bar length already
   carry the rank); the podium's bars are thicker. The viewer's own lane is tinted and named in pk-rank__me above */
.pk-race { display: grid; gap: var(--pk-space-1); margin: 0; padding: 0; list-style: none; container: pk-race / inline-size; }
.pk-race__lane {
  display: grid; grid-template-columns: 36px minmax(9rem, 1.1fr) minmax(6rem, 2fr) minmax(5.5rem, auto); grid-template-areas: 'rank who track value';
  align-items: center; gap: var(--pk-space-2) var(--pk-space-7); padding: var(--pk-space-4) var(--pk-space-5); border-radius: var(--pk-r-tile); scroll-margin-block: var(--pk-space-12);
}
.pk-race__lane[aria-current='true'] { background: var(--pk-accent-soft); }
.pk-race__rank { grid-area: rank; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--pk-r-pill); background: var(--pk-inset); font-family: var(--pk-font-figures); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; color: var(--pk-title-text); }
.pk-race__lane--leader .pk-race__rank { background: var(--pk-accent); color: var(--pk-accent-ink); }
/* the name keeps room before the tags beside it ("Sen", against the average), which go under it when the lane is narrow */
.pk-race__who { grid-area: who; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-4); min-width: 0; }
.pk-race__name { flex: 0 1 auto; min-width: min(5rem, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--pk-fw-strong); }
.pk-race__track { grid-area: track; height: 6px; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); overflow: hidden; }
.pk-race__lane:nth-child(-n + 3) .pk-race__track { height: 10px; }
.pk-race__track > i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--pk-title-text); }
.pk-race__lane--leader .pk-race__track > i { background: var(--pk-accent); }
.pk-race__value { grid-area: value; display: grid; justify-items: end; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-strong); white-space: nowrap; }
.pk-race__value > small { font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-regular); color: var(--pk-text-2); }
@container pk-race (max-width: 519px) {
  .pk-race__lane { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: 'rank who who' 'rank track value'; }
}
/* where the viewer stands, with how much more takes them a place up */
.pk-rank__me { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-6); padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-accent-soft); font-size: var(--pk-fs-small); color: var(--pk-text); }
.pk-rank__me > .pk-icon { flex: none; color: var(--pk-accent-text); }
.pk-rank__me b { font-weight: var(--pk-fw-strong); color: var(--pk-title-text); }
.pk-rank__me > a { position: relative; margin-left: auto; font-weight: var(--pk-fw-label); color: var(--pk-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- small record marks ---------- */
/* a rule that forbids an action (do not call, frozen): the danger tint with an edge, apart from ordinary states */
.pk-pill--outline-danger { background: var(--pk-danger-soft); color: var(--pk-danger-text); box-shadow: inset 0 0 0 1px var(--pk-danger-text); }
/* a value brought over from an old system that nobody confirmed */
.pk-pill--unverified { border: 1px dashed var(--pk-line-control); background: var(--pk-inset); color: var(--pk-text-2); }
/* identical events folded into one row: "4×" */
.pk-times {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--pk-space-3); border-radius: var(--pk-r-tag); background: var(--pk-accent-soft); color: var(--pk-accent-figure);
  font-family: var(--pk-font-figures); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; vertical-align: middle; white-space: nowrap;
}
/* against the team's average: above is a success tint; below stays an outlined grey, never red */
.pk-bench[data-bench='above'] { background: var(--pk-success-soft); color: var(--pk-success-text); }
.pk-bench[data-bench='below'] { background: transparent; color: var(--pk-text-2); box-shadow: var(--pk-ring-strong); }
/* a photo change that waits for approval: the edit badge turns into a brand-filled clock */
.pk-avatar__edit--pending { background: var(--pk-accent); color: var(--pk-accent-ink); }

/* touch: the walk's links reach the 44px floor with an invisible ring */
@media (pointer: coarse), (max-width: 1023px) {
  :is(a.pk-walk__step, a.pk-walk__back, .pk-rank__me > a)::after { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
}
/* ---------- change request ---------- */
/* one card per request: its kind, the record it changes, who sent it and when, their reason, the fields it changes (which the
   approver corrects in place), the last decision when it came back, and a floor of note fields and buttons; who may not
   decide reads a sentence in place of the buttons */
.pk-request { display: grid; gap: var(--pk-space-7); }
.pk-request__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3) var(--pk-space-5); }
.pk-request__subject { min-width: 0; font-size: var(--pk-fs-title); font-weight: var(--pk-fw-strong); color: var(--pk-title-text); }
a.pk-request__subject:hover { text-decoration: underline; text-underline-offset: 3px; }
.pk-request__by { flex-basis: 100%; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
/* the requester's own words: neutral, it is not a state */
.pk-request__reason { display: flex; align-items: flex-start; gap: var(--pk-space-5); padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-inset); font-size: var(--pk-fs-small); }
.pk-request__reason > .pk-icon { flex: none; margin-top: 1px; color: var(--pk-text-3); }
.pk-request__reason b { display: block; font-weight: var(--pk-fw-strong); }

/* ---------- field diff the approver corrects ---------- */
/* cells side by side from 23rem each: the field's name and its old value struck through on one line, the proposed value as a
   field under it. A field asked for and still empty is outlined in the brand's text shade and says so in words */
.pk-diff--edit { grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr)); gap: var(--pk-space-7) var(--pk-space-9); margin-top: 0; padding: 0; border-radius: 0; background: none; font-size: var(--pk-fs-small); }
.pk-diff__item { display: grid; gap: var(--pk-space-3); min-width: 0; align-content: start; }
.pk-diff__line { display: flex; align-items: baseline; gap: var(--pk-space-4); min-width: 0; }
.pk-diff__line > .pk-diff__key { flex: none; font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); color: var(--pk-text); }
.pk-diff__line > .pk-diff__old { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pk-fs-meta); }
.pk-diff__control { display: flex; align-items: center; gap: var(--pk-space-3); min-width: 0; }
.pk-diff__control > :is(.pk-input, .pk-control) { flex: 1; min-width: 0; }
.pk-diff__awaiting .pk-diff__key { color: var(--pk-accent-text); }
.pk-diff__awaiting .pk-input { border-color: var(--pk-accent-text); }
.pk-diff__asked { font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-label); color: var(--pk-accent-text); }
/* the requester adds a field the form left out, or takes one back */
.pk-diff__add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); }
.pk-diff__add > .pk-control { flex: 1 1 200px; max-width: 320px; }

/* ---------- decision ---------- */
/* why a request came back (warning) or was refused (danger), who decided and when; a decision without a reason says so */
.pk-decision { display: flex; align-items: flex-start; gap: var(--pk-space-5); padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-warning-soft); font-size: var(--pk-fs-small); color: var(--pk-text); }
.pk-decision > .pk-icon { flex: none; margin-top: 1px; color: var(--pk-warning-text); }
.pk-decision__body { min-width: 0; text-wrap: pretty; }
.pk-decision__title { font-weight: var(--pk-fw-strong); color: var(--pk-warning-text); }
.pk-decision--danger { background: var(--pk-danger-soft); }
.pk-decision--danger > .pk-icon, .pk-decision--danger .pk-decision__title { color: var(--pk-danger-text); }
.pk-decision__empty { font-style: italic; color: var(--pk-text-2); }
.pk-decision__meta { display: block; margin-top: var(--pk-space-2); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }

/* ---------- a card's floor, and a part one may not use ---------- */
/* the fields and buttons that decide a card sit on a tinted floor at its foot */
.pk-card__floor { display: grid; gap: var(--pk-space-6); padding: var(--pk-pad-inset); border-radius: var(--pk-r-inset); background: var(--pk-inset); }
/* on the grey floor, fields and grey buttons turn white, as on any inset */
.pk-card__floor :is(.pk-input, .pk-btn--soft, .pk-icon-btn--soft) { background: var(--pk-card); }
.pk-locked { display: flex; align-items: flex-start; gap: var(--pk-space-4); margin: 0; font-size: var(--pk-fs-small); color: var(--pk-text-2); text-wrap: pretty; }
.pk-locked > .pk-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--pk-text-3); }

/* ---------- canned replies ---------- */
/* reasons used again and again: a pick fills the note and focuses it, the × asks before it deletes, "Ekle" turns into a
   field (Enter keeps it, Esc leaves it) */
.pk-canned { display: grid; gap: var(--pk-space-4); justify-items: start; min-width: 0; }
.pk-canned__toggle {
  display: inline-flex; align-items: center; gap: var(--pk-space-3); min-height: 28px; padding: 0; border: 0; background: transparent;
  font: inherit; font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); color: var(--pk-text-2); cursor: pointer;
}
.pk-canned__toggle:hover { color: var(--pk-text); }
.pk-canned__toggle > .pk-icon { width: 16px; height: 16px; transition: rotate var(--pk-dur-move) var(--pk-ease); }
.pk-canned__toggle[aria-expanded='false'] > .pk-icon:last-child { rotate: -90deg; }
.pk-canned__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); max-width: 100%; margin: 0; padding: 0; list-style: none; }
.pk-canned__list > li { display: flex; max-width: 100%; }
.pk-reply { display: inline-flex; align-items: center; max-width: 100%; border-radius: var(--pk-r-control); background: var(--pk-card); box-shadow: var(--pk-ring-strong); }
.pk-reply:hover { box-shadow: var(--pk-ring-chosen); }
.pk-reply__pick {
  position: relative; min-width: 0; height: var(--pk-h-chip); padding: 0 var(--pk-space-3) 0 var(--pk-space-6); border: 0; border-radius: inherit; background: transparent;
  font: inherit; font-size: var(--pk-fs-meta); color: var(--pk-text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-reply__pick:only-child { padding-right: var(--pk-space-6); }
.pk-reply__remove { position: relative; display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-right: var(--pk-space-3); padding: 0; border: 0; border-radius: var(--pk-r-pill); background: var(--pk-inset); color: var(--pk-text-2); cursor: pointer; }
.pk-reply__remove > .pk-icon { width: 14px; height: 14px; }
.pk-reply__remove:hover { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-reply__add {
  display: inline-flex; align-items: center; gap: var(--pk-space-2); height: var(--pk-h-chip); padding: 0 var(--pk-space-6); border: 1px dashed var(--pk-line-control); border-radius: var(--pk-r-control);
  background: transparent; font: inherit; font-size: var(--pk-fs-meta); color: var(--pk-text-2); cursor: pointer;
}
.pk-reply__add:hover { color: var(--pk-text); border-color: var(--pk-text-2); }
.pk-reply__add > .pk-icon { width: 16px; height: 16px; }
.pk-input.pk-reply__input { width: min(280px, 100%); height: var(--pk-h-chip); border-radius: var(--pk-r-control); font-size: var(--pk-fs-meta); }
.pk-canned .pk-field__error { flex-basis: 100%; }

/* ---------- delete with a reason, move what uses a row ---------- */
/* a delete names why (a short list) and may add a note; the record goes to a "Silinmiş" view, where restoring shows the reason */
.pk-dialog--reason { width: 560px; }
.pk-dialog__reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--pk-space-5) var(--pk-space-8); margin: 0; padding: 0; border: 0; min-width: 0; }
.pk-dialog__reasons > legend { margin-bottom: var(--pk-space-4); padding: 0; font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); }
/* a catalogue row still in use: where it is used and how often, the row that takes its place, then "Aktar ve sil" */
.pk-transfer { display: grid; gap: var(--pk-space-7); }
.pk-transfer__uses { display: grid; margin: 0; padding: 0; list-style: none; }
.pk-transfer__use { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-space-6); padding: var(--pk-row-y) 0; border-top: 1px solid var(--pk-line); font-size: var(--pk-fs-small); }
.pk-transfer__use:first-child { border-top: 0; padding-top: 0; }
.pk-transfer__count { font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-strong); white-space: nowrap; }
.pk-transfer__to { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--pk-space-5); }
.pk-transfer__from { min-width: 0; padding: 0 var(--pk-space-7); border-radius: var(--pk-r-field); background: var(--pk-inset); line-height: var(--pk-h-btn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pk-text-2); text-decoration: line-through; }
.pk-transfer__to > .pk-icon { color: var(--pk-text-3); }
@container pk-main (max-width: 479px) {
  .pk-transfer__to { grid-template-columns: minmax(0, 1fr); }
  .pk-transfer__to > .pk-icon { rotate: 90deg; justify-self: center; }
}

/* ---------- a menu action that cannot run ---------- */
/* it stays in the menu with a lock; pressing it says why under it instead of running */
.pk-menu__item--locked { color: var(--pk-text-3); cursor: not-allowed; }
.pk-menu__item--locked > .pk-icon:last-child { margin-left: auto; width: 16px; height: 16px; }
.pk-menu__why { margin: 0 0 var(--pk-space-3); padding: var(--pk-space-4) var(--pk-space-6); border-radius: var(--pk-r-field); background: var(--pk-inset); font-size: var(--pk-fs-caption); color: var(--pk-text-2); text-wrap: pretty; }
/* the reason wraps inside the menu instead of widening it */
.pk-menu:has(> .pk-menu__why) { max-width: min(340px, 100vw - 2 * var(--pk-space-8)); }

/* touch: the small parts reach the 44px floor with an invisible ring */
@media (pointer: coarse), (max-width: 1023px) {
  :is(.pk-reply__remove, .pk-canned__toggle)::after { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
  .pk-canned__toggle { position: relative; }
}
/* ---------- fixed lists ---------- */
/* a list that never jumps: every body row is --pk-row-h tall and one line, so a page of long names is as tall as a page of
   short ones, and sorting never moves a column (the layout is fixed; the columns take their widths from <col> elements). Text
   ends in an ellipsis at any depth of the cell; a cell that holds a control keeps its overflow, so no focus ring is cut */
.pk-table--fixed { table-layout: fixed; }
.pk-table--fixed tbody tr > :is(td, th) { height: var(--pk-row-h); padding-block: 0; white-space: nowrap; }
.pk-table--fixed tbody tr > :is(td, th):not(:has(button, input, select, textarea, .pk-btn)) { overflow: hidden; text-overflow: ellipsis; }
.pk-table--fixed tbody :is(td, th) .pk-row { flex-wrap: nowrap; min-width: 0; }
.pk-table--fixed tbody :is(td, th) :is(div, p, a):not(.pk-row, .pk-btn, .pk-icon-btn, .pk-pill, .pk-tag, .pk-avatar, .pk-table__clamp2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* column widths for <col>: a column without one takes what is left */
.pk-table__col--check { width: 48px; }
.pk-table__col--action { width: 64px; }
.pk-table__col--sm { width: 104px; }
.pk-table__col--md { width: 152px; }
.pk-table__col--lg { width: 220px; }
/* a list whose row is a sentence (notes, findings): two lines, still inside the row's height */
.pk-table__clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; line-height: var(--pk-lh-body); overflow-wrap: anywhere; }
/* a row's mark (missing data, a severity) is a dot before the first text, never an edge stripe; when every row has the same
   mark, no row carries it */
.pk-table__mark { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: var(--pk-space-3); border-radius: var(--pk-r-pill); background: var(--pk-text-3); vertical-align: middle; }
.pk-table__mark[data-tone='warning'] { background: var(--pk-warning-text); }
.pk-table__mark[data-tone='danger'] { background: var(--pk-danger-text); }
/* in a box under 480px the cells wrap (08-data): a fixed list lets its rows grow there too */
@container pk-table (max-width: 479px) {
  .pk-table--fixed { table-layout: auto; }
  .pk-table--fixed tbody tr > :is(td, th) { height: auto; padding-block: var(--pk-cell-y); }
}

/* ---------- grouped headers ---------- */
/* a header row of groups over the column headers: each group centred over its span, a hairline under it and between groups;
   figures and their headers line up on the right (pk-table__num) */
/* the hairlines between groups are borders, so they add to whatever edge the theme draws under its header */
.pk-table thead .pk-table__grouphead th { text-align: center; }
.pk-table thead :is(.pk-table__grouphead th + th, .pk-table__groupstart) { border-left: 1px solid var(--pk-line); }
.pk-table thead :is(.pk-table__grouphead, .pk-table__grouphead + tr) th { border-radius: 0; }
/* ---------- work board, decision queue, day hero ---------- */
/* work board: one card per kind of work over the list it narrows. A count takes colour only above zero and only by urgency
   (data-tone danger: owed now, warning: due today; none: waiting); the card pressed (aria-pressed) is the one filter on the
   list, drawn in the theme's current style, and "Tümünü göster" (pk-workboard__card--all) shows while one is on */
.pk-workboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 172px), 1fr)); gap: var(--pk-space-5); }
.pk-workboard__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'icon count' 'label label' 'hint hint'; align-items: center; align-content: start;
  gap: var(--pk-space-1) var(--pk-space-5); min-width: 0; padding: var(--pk-space-7) var(--pk-space-8); border: 0; color: var(--pk-text); text-align: left; cursor: pointer;
  transition: background var(--pk-dur-fast) var(--pk-ease), box-shadow var(--pk-dur-fast) var(--pk-ease);
}
:where(.pk-workboard__card):hover { background: var(--pk-inset); }
.pk-workboard__icon { grid-area: icon; width: 36px; height: 36px; border-radius: var(--pk-r-field); display: grid; place-items: center; background: var(--pk-inset); color: var(--pk-text-2); }
.pk-workboard__icon > .pk-icon { width: 18px; height: 18px; }
.pk-workboard__count { grid-area: count; justify-self: end; font-family: var(--pk-font-figures); font-size: var(--pk-fs-figure-md); font-weight: var(--pk-fw-bold); line-height: var(--pk-lh-none); font-variant-numeric: tabular-nums; color: var(--pk-title-text); }
.pk-workboard__label { grid-area: label; margin-top: var(--pk-space-4); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-strong); }
.pk-workboard__hint { grid-area: hint; font-size: var(--pk-fs-caption); color: var(--pk-text-2); text-wrap: pretty; }
.pk-workboard__card[data-tone='danger'] .pk-workboard__icon { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-workboard__card[data-tone='danger'] .pk-workboard__count { color: var(--pk-danger-text); }
.pk-workboard__card[data-tone='warning'] .pk-workboard__icon { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-workboard__card[data-tone='warning'] .pk-workboard__count { color: var(--pk-warning-text); }
.pk-workboard__card[aria-pressed='true'] { background: var(--pk-current); color: var(--pk-on-current); }
.pk-workboard__card[aria-pressed='true'] :is(.pk-workboard__count, .pk-workboard__hint) { color: inherit; }
.pk-workboard__card[aria-pressed='true'] .pk-workboard__icon { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.pk-workboard__card--all { grid-template-areas: 'icon label' 'icon hint'; }
.pk-workboard__card--all .pk-workboard__label { margin-top: 0; }

/* decision queue: what waits for a decision. A tile stays grey at zero and takes the brand tint on its icon only while work
   waits (data-waiting); its count stays in the title colour, so an orange or green brand never colours a figure. With
   nothing waiting the list gives way to one line (pk-queue__clear) */
.pk-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--pk-space-4); }
.pk-queue__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-6); min-width: 0; padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-inset); color: var(--pk-text); }
a.pk-queue__item:hover { background: var(--pk-inset-2); }
.pk-queue__icon { width: 36px; height: 36px; border-radius: var(--pk-r-pill); display: grid; place-items: center; background: var(--pk-card); color: var(--pk-text-3); }
.pk-queue__icon > .pk-icon { width: 18px; height: 18px; }
.pk-queue__body { min-width: 0; }
.pk-queue__label { display: block; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-strong); }
.pk-queue__hint { display: block; font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-queue__count { font-family: var(--pk-font-figures); font-size: var(--pk-fs-figure-sm); font-weight: var(--pk-fw-bold); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
.pk-queue__item[data-waiting] .pk-queue__icon { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
.pk-queue__item[data-waiting] .pk-queue__count { color: var(--pk-title-text); }
.pk-queue__clear { display: flex; align-items: center; gap: var(--pk-space-5); margin: 0; font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-queue__clear > .pk-icon { flex: none; color: var(--pk-success-text); }

/* a bucket of a task list (Gecikmiş, Bugün, Yaklaşan, Tarihsiz): a dot in the bucket's tone before its heading */
.pk-listhead__dot { flex: none; align-self: center; width: 8px; height: 8px; border-radius: var(--pk-r-pill); background: var(--pk-text-3); }
.pk-listhead__dot[data-tone='danger'] { background: var(--pk-danger-text); }
.pk-listhead__dot[data-tone='warning'] { background: var(--pk-warning-text); }

/* day hero: the date, the greeting, what waits today as fact chips (links, or anchors on the page) and the next task beside
   them. It is a card (pk-card), or the region's one ink block (pk-card--ink): its parts take the surface's own text colour,
   so the plain-surface themes, which draw an ink block as a card, keep every text readable */
.pk-dayhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.5fr); align-items: center; gap: var(--pk-space-8) var(--pk-space-14); }
.pk-dayhead__main { display: grid; gap: var(--pk-space-3); min-width: 0; align-content: start; }
.pk-dayhead__date { margin: 0; }
.pk-dayhead .pk-h1 { color: var(--pk-title-text); }
/* on a real ink block the title and the calm mark take the block's ink; the plain-surface themes (the same list as
   05-surfaces) draw the block as a card, where the title keeps the title colour */
.pk-dayhead.pk-card--ink:not(:is([data-theme='corporate'], [data-theme='technical']) *) { --pk-title-text: currentColor; }
.pk-dayhead__facts { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); margin: var(--pk-space-4) 0 0; padding: 0; list-style: none; }
.pk-dayhead__fact {
  display: inline-flex; align-items: center; gap: var(--pk-space-3); min-height: var(--pk-h-chip); padding: var(--pk-space-1) var(--pk-space-7); border-radius: var(--pk-r-control);
  background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; font-size: var(--pk-fs-small);
}
.pk-dayhead__fact:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.pk-dayhead__fact[data-tone='danger'] { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-dayhead__count { font-family: var(--pk-font-figures); font-weight: var(--pk-fw-bold); font-variant-numeric: tabular-nums; }
.pk-dayhead__calm { display: flex; align-items: center; gap: var(--pk-space-4); margin: var(--pk-space-4) 0 0; font-size: var(--pk-fs-small); }
.pk-dayhead__calm > .pk-icon { flex: none; color: var(--pk-success-text); }
.pk-dayhead.pk-card--ink:not(:is([data-theme='corporate'], [data-theme='technical']) *) .pk-dayhead__calm > .pk-icon { color: inherit; }
/* the next task: a panel of the surface, the whole of it one link */
.pk-dayhead__next { display: grid; gap: var(--pk-space-3); min-width: 0; color: inherit; }
a.pk-dayhead__next:hover { box-shadow: var(--pk-ring-strong); }
.pk-dayhead__task { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); overflow-wrap: break-word; }
.pk-dayhead__when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3) var(--pk-space-5); }
@container pk-main (max-width: 699px) {
  .pk-dayhead { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- busy feedback, problem report, view-as bar ---------- */
/* loading bar: a 3px line along the top of the window while the page waits for an answer. It shows only after
   --pk-busy-delay (an answer that comes sooner never flashes it), creeps to 92% and runs out to the end when the answer comes
   (data-state done), then fades. Background refreshes and typing never start it; the app sets data-state */
.pk-loadbar { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; pointer-events: none; }
.pk-loadbar::before { content: ''; display: block; width: 0; height: 100%; background: var(--pk-accent-text); opacity: 0; }
.pk-loadbar[data-state='running']::before { animation: pk-loadbar-creep 12s var(--pk-busy-delay) cubic-bezier(0.1, 0.65, 0.2, 1) both; }
.pk-loadbar[data-state='done']::before { width: 100%; opacity: 0; transition: width var(--pk-dur-base) var(--pk-ease), opacity var(--pk-dur-slow) var(--pk-ease) var(--pk-dur-base); }
@keyframes pk-loadbar-creep {
  from { width: 0; opacity: 1; }
  to { width: 92%; opacity: 1; }
}
/* a veil that waits as long: a part that reloads keeps its content clear for a quick answer */
.pk-veil--delay { animation: pk-veil-in 0s var(--pk-busy-delay) both; }
@keyframes pk-veil-in {
  from { visibility: hidden; opacity: 0; }
  to { visibility: visible; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-loadbar[data-state='running']::before { width: 100%; animation: pk-veil-in 0s var(--pk-busy-delay) both; }
}

/* report a problem: a panel in the window's lower left corner, opened from a quiet "Hata bildir" (a popover, so Esc and a
   press outside close it and focus goes back to the button). It says what goes with the report: the page's path without its
   query, the window size, the look and the last script error */
.pk-feedback {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-7); width: 100%; max-width: 380px; padding: var(--pk-space-8);
  border-radius: var(--pk-r-panel); background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-float-shadow);
}
.pk-feedback[popover] { margin: 0; border: 0; }
.pk-feedback[popover]:not(:popover-open) { display: none; }
.pk-feedback[popover]:popover-open {
  position: fixed; inset: auto auto calc(var(--pk-space-8) + env(safe-area-inset-bottom, 0px)) var(--pk-space-8); width: min(380px, 100vw - 32px);
  max-height: calc(100dvh - 2 * var(--pk-space-8)); overflow-y: auto; overscroll-behavior: contain;
}
.pk-feedback__head { display: flex; align-items: center; gap: var(--pk-space-5); }
.pk-feedback__head > .pk-icon-btn { margin-left: auto; }
.pk-feedback__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-7); }
.pk-feedback__form > .pk-btn { justify-self: start; }
.pk-feedback__shot { position: relative; overflow: hidden; border-radius: var(--pk-r-sm); background: var(--pk-inset); box-shadow: var(--pk-ring); aspect-ratio: 16 / 10; }
.pk-feedback__shot > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pk-feedback__shot > .pk-icon-btn { position: absolute; top: var(--pk-space-3); right: var(--pk-space-3); box-shadow: var(--pk-float-shadow); }
.pk-feedback__context .pk-kv__row { font-size: var(--pk-fs-meta); }
.pk-feedback__context > summary { cursor: pointer; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-feedback__context[open] > summary { margin-bottom: var(--pk-space-3); }
.pk-feedback__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pk-space-4); }
.pk-feedback__done { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-7); border-radius: var(--pk-r-tile); }
@media (max-width: 1023px) {
  .pk-feedback[popover]:popover-open { inset-inline: var(--pk-space-8); margin-inline: auto; }
  .pk:has(.pk-app :is(.pk-tabbar, .pk-actionbar)) .pk-feedback[popover]:popover-open { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 100px - 2 * var(--pk-space-8)); }
}

/* viewing as someone else: the brand colour with its own ink (never white on a mid-tone brand), and the way back as a button
   in the ink. pk-sysbar--bottom keeps it at the bottom of the window, centred on the content like the bulk bar, and the page
   leaves room under its last row while it shows */
.pk-sysbar--brand { --pk-sysbar-bg: var(--pk-accent); --pk-focus-outline: 2px solid var(--pk-accent-ink); color: var(--pk-accent-ink); }
.pk-sysbar--brand > .pk-icon { color: inherit; }
/* its button carries no variant, so no theme's soft or ghost look lands on the brand fill */
.pk-sysbar__back { background: var(--pk-accent-ink); color: var(--pk-accent); }
.pk-sysbar__back:hover { background: color-mix(in oklch, var(--pk-accent-ink) 86%, var(--pk-accent)); }
.pk-sysbar--bottom {
  position: fixed; z-index: 26; left: calc(50% + var(--pk-content-shift, 0px)); bottom: calc(var(--pk-space-8) + env(safe-area-inset-bottom, 0px));
  width: min(880px, 100vw - 32px - 2 * var(--pk-content-shift, 0px)); transform: translateX(-50%); box-shadow: var(--pk-float-shadow);
}
.pk-main:has(> .pk-sysbar--bottom:not([hidden])), :has(> .pk-sysbar--bottom:not([hidden])) .pk-main { padding-bottom: calc(var(--pk-space-24) * 2); }
@media (max-width: 1023px) {
  .pk:has(.pk-app :is(.pk-tabbar, .pk-actionbar)) .pk-sysbar--bottom { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .pk-main:has(> .pk-sysbar--bottom:not([hidden])), :has(> .pk-sysbar--bottom:not([hidden])) .pk-main { padding-bottom: calc(var(--pk-space-24) + var(--pk-space-12)); }
}
/* on a phone the whole sentence stays readable: the way back takes a line of its own under it */
@media (max-width: 599px) {
  .pk-sysbar--bottom { flex-wrap: wrap; padding-block: var(--pk-space-3) var(--pk-space-4); }
  .pk-sysbar--bottom > .pk-sysbar__text { flex-basis: calc(100% - var(--pk-space-20)); display: block; overflow: visible; }
  .pk-sysbar--bottom > .pk-sysbar__back { flex: 1 1 100%; }
  .pk-main:has(> .pk-sysbar--bottom:not([hidden])), :has(> .pk-sysbar--bottom:not([hidden])) .pk-main { padding-bottom: calc(var(--pk-space-24) * 3); }
}
/* ---------- month picker, phone with a country code, typed date ---------- */
/* month picker: year chips over the twelve months of the chosen year. A month without data is disabled, the current month is
   ringed in ink (aria-current="date", as today is in a calendar) and the chosen one takes the theme's current style
   (aria-pressed). It sits in a pk-pop under its trigger */
.pk-monthpick { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); min-width: 0; }
.pk-monthpick__years { display: flex; flex-wrap: wrap; gap: var(--pk-space-3); }
.pk-monthpick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pk-space-3); }
.pk-monthpick__month {
  height: var(--pk-h-chip); min-width: 0; padding: 0 var(--pk-space-2); border: 0; border-radius: var(--pk-r-field); background: var(--pk-inset); color: var(--pk-text);
  font: inherit; font-size: var(--pk-fs-small); cursor: pointer;
}
.pk-monthpick__month:hover:not(:disabled, [aria-pressed='true']) { background: var(--pk-inset-2); }
.pk-monthpick__month[aria-current='date'] { box-shadow: var(--pk-ring-ink); font-weight: var(--pk-fw-strong); }
.pk-monthpick__month[aria-pressed='true'] { background: var(--pk-current); color: var(--pk-on-current); font-weight: var(--pk-fw-strong); }
.pk-monthpick__month:disabled { background: transparent; color: var(--pk-text-3); text-decoration: line-through; cursor: not-allowed; }
.pk-monthpick__trigger > .pk-icon:last-child { width: 16px; height: 16px; }

/* phone with a country code: one field made of the country's select and the digits, joined along one hairline (the digits'
   own edge where a theme outlines its fields). The number is kept as E.164; a code comes from the list, never a typed + */
.pk-control--dial { display: flex; min-width: 0; }
/* a select is as wide as its longest option: the country keeps at most half the field and ends in an ellipsis after its code
   ("+90 Türk…"), the digits take the rest */
.pk-control--dial > .pk-control { flex: 0 1 auto; min-width: 7.5em; max-width: 50%; }
.pk-control--dial > .pk-control > .pk-input { width: 100%; text-overflow: ellipsis; border-start-end-radius: 0; border-end-end-radius: 0; border-right-color: var(--pk-line-strong); }
.pk-control--dial > .pk-input { flex: 1 1 auto; min-width: 0; margin-left: -1px; border-start-start-radius: 0; border-end-start-radius: 0; font-variant-numeric: tabular-nums; }
/* the focused half draws its whole edge above the other's */
.pk-control--dial > .pk-input:focus, .pk-control--dial > .pk-control:focus-within { position: relative; z-index: 1; }
.pk-control--dial > .pk-control > .pk-input:focus { border-right-color: var(--pk-primary-edge); }

/* typed date: "gg.aa.yyyy" with the dots put in while typing, and a calendar button that opens the browser's own picker (a
   date input kept out of sight beside the field) */
.pk-datefield--typed { position: relative; }
.pk-datefield--typed > .pk-input { padding-right: var(--pk-space-24); font-variant-numeric: tabular-nums; }
.pk-datefield__native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
/* ---------- picking media, cards in order ---------- */
/* a gallery tile that is itself the pick button (choose a picture from the library): the button's own frame goes, the tile's
   look stays; chosen, its photo takes the chosen ring and a tick; one that cannot be taken dims its photo */
button.pk-gtile { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.pk-gtile:focus-visible { outline: 0; }
button.pk-gtile:focus-visible > .pk-gtile__photo { outline: var(--pk-focus-outline); outline-offset: var(--pk-focus-offset); }
button.pk-gtile:hover:not(:disabled) > .pk-gtile__photo { box-shadow: var(--pk-ring-strong); }
.pk-gtile[aria-pressed='true'] > .pk-gtile__photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--pk-ring-active), inset 0 0 0 5px var(--pk-card); pointer-events: none; }
.pk-gtile__tick { position: relative; z-index: 1; grid-area: 1 / 1; align-self: start; justify-self: end; display: none; place-items: center; width: 24px; height: 24px; margin: var(--pk-space-4); border-radius: var(--pk-r-pill); background: var(--pk-primary); color: var(--pk-on-primary); box-shadow: var(--pk-cutout); }
.pk-gtile__tick > .pk-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.pk-gtile[aria-pressed='true'] > .pk-gtile__tick { display: grid; }
button.pk-gtile:disabled { cursor: not-allowed; }
button.pk-gtile:disabled .pk-gtile__photo :is(img, video, svg) { opacity: 0.4; }
button.pk-gtile:disabled .pk-gtile__caption { color: var(--pk-text-3); }
/* the first tile of a picker: add from the device (the picker opens) */
.pk-gtile--add > .pk-gtile__photo { display: grid; place-content: center; justify-items: center; gap: var(--pk-space-3); background: transparent; box-shadow: var(--pk-ring-mark); color: var(--pk-text-2); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-label); }
.pk-gtile--add:hover > .pk-gtile__photo { background: var(--pk-inset); }

/* cards in an order the person sets (the cards of a carousel ad, the steps of a guide): each card heads with its title, the
   move buttons and remove; the foot counts them against the limit and adds one. A card on the inset fill gives its fields the
   card fill, as an inset does (the field rules list it); Kurumsal, Teknik and Portal draw it as a ringed card */
.pk-sortcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); margin: 0; padding: 0; list-style: none; }
.pk-sortcards__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); padding: var(--pk-pad-inset); border-radius: var(--pk-r-inset); background: var(--pk-inset); }
.pk-sortcards__head { display: flex; align-items: center; gap: var(--pk-space-4); min-width: 0; }
.pk-sortcards__title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--pk-fs-h4); font-weight: var(--pk-fw-strong); }
.pk-sortcards__actions { display: inline-flex; flex: none; gap: max(var(--pk-space-2), 2 * var(--pk-tap-room)); }
.pk-sortcards__item[data-moved] { box-shadow: var(--pk-ring-active); }
.pk-sortcards__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-6); }
.pk-sortcards__count { font-family: var(--pk-font-figures); font-size: var(--pk-fs-meta); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-sortcards__item { background: var(--pk-card); box-shadow: var(--pk-ring); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-sortcards__item[data-moved] { box-shadow: var(--pk-ring-active); }
/* ---------- record extras (Sigorta study, the rest of its generic rows) ---------- */
/* a soft status for information that is neither good nor bad (a policy in review, a note): the theme's own info shades where it
   has them (Sigorta), else the blue person hue */
.pk-pill--soft-info { background: var(--pk-info-soft, var(--pk-p4-soft)); color: var(--pk-info-text, var(--pk-p4-text)); }

/* signals found in a record's notes: a small tinted chip per signal with its date; the quoted sentence is its tooltip */
.pk-signals { display: flex; flex-wrap: wrap; gap: var(--pk-space-3); margin: 0; padding: 0; list-style: none; }
.pk-signal {
  display: inline-flex; align-items: center; gap: var(--pk-space-3); min-height: 26px; padding: 0 var(--pk-space-5); border: 0; border-radius: var(--pk-r-tag);
  background: var(--pk-inset); color: var(--pk-text-2); font: inherit; font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-label); white-space: nowrap;
}
.pk-signal__date { font-family: var(--pk-mono); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-regular); }
.pk-signal[data-tone='success'] { background: var(--pk-success-soft); color: var(--pk-success-text); }
.pk-signal[data-tone='warning'] { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-signal[data-tone='danger'] { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-signal[data-tone='info'] { background: var(--pk-info-soft, var(--pk-p4-soft)); color: var(--pk-info-text, var(--pk-p4-text)); }
.pk-signal[data-tone='ai'] { background: var(--pk-ai-soft); color: var(--pk-ai-text); }

/* the dashed pill that adds one more person to a picker's chips */
.pk-picker__add {
  display: inline-flex; align-items: center; gap: var(--pk-space-2); height: 32px; padding: 0 var(--pk-space-5) 0 var(--pk-space-4); border: 1px dashed var(--pk-line-control);
  border-radius: var(--pk-r-control); background: transparent; color: var(--pk-text-2); font: inherit; font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); cursor: pointer;
}
.pk-picker__add:hover { background: var(--pk-inset-2); color: var(--pk-text); }
.pk-picker__add > .pk-icon { width: 16px; height: 16px; }

/* a file's name with a tag that warns about its content (health data): the tag never gives way to the name */
.pk-file__title { display: flex; align-items: center; gap: var(--pk-space-3); min-width: 0; }
.pk-file__title > .pk-file__name { min-width: 0; }
.pk-file__tag {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 var(--pk-space-3); border-radius: var(--pk-r-tag);
  background: var(--pk-danger-soft); color: var(--pk-danger-text); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-strong); white-space: nowrap;
}

/* the viewer turns a photographed document a quarter at a time (data-rotate on the stage); turned on its side the picture fits
   the stage's height to its width */
.pk-viewer__stage[data-rotate] { container-type: size; }
.pk-viewer__stage[data-rotate] img { transition: rotate var(--pk-dur-base) var(--pk-ease); }
.pk-viewer__stage[data-rotate='180'] img { rotate: 180deg; }
.pk-viewer__stage:is([data-rotate='90'], [data-rotate='270']) img { inset: auto; top: 50%; left: 50%; width: 100cqh; height: 100cqw; translate: -50% -50%; }
.pk-viewer__stage[data-rotate='90'] img { rotate: 90deg; }
.pk-viewer__stage[data-rotate='270'] img { rotate: 270deg; }

/* a form's answers: one the reader may not see is masked (and says so to a screen reader); one the form no longer asks for
   carries a flag */
.pk-kv__masked { font-family: var(--pk-mono); font-weight: var(--pk-fw-regular); letter-spacing: 0.12em; color: var(--pk-text-3); }
.pk-kv__flag {
  display: inline-flex; align-items: center; height: 20px; margin-left: var(--pk-space-3); padding: 0 var(--pk-space-3); border-radius: var(--pk-r-tag);
  background: var(--pk-warning-soft); color: var(--pk-warning-text); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-strong); vertical-align: middle; white-space: nowrap;
}

/* a proposed photo beside the current one, an arrow between; a removal shows a dashed circle that says so */
.pk-proposed { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--pk-space-6) var(--pk-space-10); }
.pk-proposed__item { display: grid; justify-items: center; gap: var(--pk-space-4); margin: 0; font-size: var(--pk-fs-caption); color: var(--pk-text-2); text-align: center; }
.pk-proposed__photo { display: grid; place-items: center; width: 88px; height: 88px; overflow: hidden; border-radius: var(--pk-r-pill); background: var(--pk-inset); color: var(--pk-text-2); }
.pk-proposed__photo > img { width: 100%; height: 100%; object-fit: cover; }
.pk-proposed__photo--removed { border: 1.5px dashed var(--pk-danger-edge); background: var(--pk-danger-soft); color: var(--pk-danger-text); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); }
.pk-proposed__arrow { width: 22px; height: 22px; color: var(--pk-text-3); }

/* records side by side for a merge: the line that differs is tinted and bold; a cancelled record keeps its place, its title
   struck through and its words faint */
.pk-dupes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--pk-space-6); }
.pk-dupe { display: grid; align-content: start; gap: var(--pk-space-5); min-width: 0; padding: var(--pk-pad-inset); border-radius: var(--pk-r-inset); background: var(--pk-inset); }
.pk-dupe__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3) var(--pk-space-4); }
.pk-dupe__title { flex: 1 1 10em; min-width: 0; margin: 0; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); overflow-wrap: anywhere; }
.pk-dupe__lines { display: grid; gap: var(--pk-space-1); margin: 0; }
.pk-dupe__line { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--pk-space-4); padding: var(--pk-space-3) var(--pk-space-4); border-radius: var(--pk-r-xs); font-size: var(--pk-fs-small); }
.pk-dupe__line > dt { color: var(--pk-text-2); }
.pk-dupe__line > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pk-dupe__line[data-differs] { background: var(--pk-warning-soft); font-weight: var(--pk-fw-strong); }
.pk-dupe__line[data-differs] > dt { color: var(--pk-text); }
.pk-dupe__actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); margin-top: var(--pk-space-2); }
.pk-dupe--cancelled { color: var(--pk-text-3); }
.pk-dupe--cancelled .pk-dupe__title { text-decoration: line-through; }
.pk-dupe--cancelled .pk-dupe__line > dt { color: inherit; }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-dupe { background: var(--pk-card); box-shadow: var(--pk-ring); }

/* the records a finding might belong to: a name with its flags, its facts (the phone stands out) and the open and choose
   buttons, which move under the facts in a narrow box */
.pk-candidates { display: grid; gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; container: pk-candidates / inline-size; }
.pk-candidate {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name actions' 'facts actions'; align-items: center;
  gap: var(--pk-space-2) var(--pk-space-6); padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-inset);
}
.pk-candidate__name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3) var(--pk-space-4); min-width: 0; font-weight: var(--pk-fw-strong); overflow-wrap: anywhere; }
.pk-candidate__facts { grid-area: facts; display: flex; flex-wrap: wrap; gap: var(--pk-space-1) var(--pk-space-6); margin: 0; padding: 0; list-style: none; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-candidate__phone { font-family: var(--pk-mono); font-weight: var(--pk-fw-label); color: var(--pk-text); white-space: nowrap; }
.pk-candidate__actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pk-space-4); }
.pk-candidate[aria-current='true'] { background: var(--pk-card); box-shadow: var(--pk-ring-chosen); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-candidate:not([aria-current='true']) { background: var(--pk-card); box-shadow: var(--pk-ring); }
@container pk-candidates (max-width: 479px) {
  .pk-candidate { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'name' 'facts' 'actions'; }
  .pk-candidate__actions { justify-content: flex-start; margin-top: var(--pk-space-3); }
}

/* a waiting step of a checklist that needs a file: its action is a tag that opens the upload */
.pk-setup__go {
  grid-area: cta; display: inline-flex; align-items: center; gap: var(--pk-space-2); height: 28px; padding: 0 var(--pk-space-4) 0 var(--pk-space-5); border: 0;
  border-radius: var(--pk-r-tag); background: var(--pk-accent-soft); color: var(--pk-accent-text); font: inherit; font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); white-space: nowrap; cursor: pointer;
}
.pk-setup__go > .pk-icon { width: 14px; height: 14px; }

/* an activity entry corrected since: a dashed "3 kez düzeltildi" that opens its versions */
.pk-activity__edited {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--pk-space-2); height: 24px; padding: 0 var(--pk-space-4); border: 1px dashed var(--pk-line-control);
  border-radius: var(--pk-r-tag); background: transparent; color: var(--pk-text-2); font: inherit; font-size: var(--pk-fs-caption); cursor: pointer;
}
.pk-activity__edited:hover { background: var(--pk-inset); color: var(--pk-text); }
.pk-activity__edited > .pk-icon { width: 14px; height: 14px; }

/* a document read on the spot (an identity card): its picture, the fields it filled and, in the warning tint, what it could
   not verify */
.pk-readresult { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pk-space-5) var(--pk-space-7); padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-field); background: var(--pk-inset); }
.pk-readresult__thumb { width: 88px; aspect-ratio: 85.6 / 54; overflow: hidden; border-radius: var(--pk-r-xs); background: var(--pk-inset-2); }
.pk-readresult__thumb > img { width: 100%; height: 100%; object-fit: cover; }
.pk-readresult__body { display: grid; align-content: start; gap: var(--pk-space-3); min-width: 0; font-size: var(--pk-fs-small); }
.pk-readresult__title { font-weight: var(--pk-fw-strong); }
.pk-readresult__filled { display: flex; flex-wrap: wrap; gap: var(--pk-space-2) var(--pk-space-5); margin: 0; padding: 0; list-style: none; color: var(--pk-text-2); }
.pk-readresult__filled > li { display: inline-flex; align-items: center; gap: var(--pk-space-2); }
.pk-readresult__filled .pk-icon { width: 14px; height: 14px; color: var(--pk-success-text); }
.pk-readresult__unsure { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--pk-space-4); padding: var(--pk-space-4) var(--pk-space-6); border-radius: var(--pk-r-xs); background: var(--pk-warning-soft); color: var(--pk-warning-text); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-label); }
.pk-readresult__unsure > .pk-icon { width: 16px; height: 16px; margin-top: 2px; flex: none; }
/* a field the reading filled */
.pk-field__read { display: inline-flex; align-items: center; gap: var(--pk-space-1); margin-left: var(--pk-space-3); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-label); color: var(--pk-success-text); }
.pk-field__read > .pk-icon { width: 12px; height: 12px; }

/* an edit that needs approval asks why before it is sent: the reason box at the form's foot, an inner panel */
.pk-form__reason { display: grid; gap: var(--pk-space-5); }
.pk-form__reason-head { display: flex; align-items: flex-start; gap: var(--pk-space-4); font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-form__reason-head > .pk-icon { width: 18px; height: 18px; flex: none; color: var(--pk-text); }

/* the small controls above reach the touch floor with an invisible ring */
@media (pointer: coarse), (max-width: 1023px) {
  :is(.pk-signal, .pk-picker__add, .pk-setup__go, .pk-activity__edited) { position: relative; }
  :is(.pk-signal, .pk-picker__add, .pk-setup__go, .pk-activity__edited)::after { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
}
/* ---------- feeds (Sigorta study) ---------- */
/* the latest notes of a team, one row each: who wrote it, the outcome it set as a tag in that status's colour, the note cut at
   three lines and what it is about with the time. The count sentence above can take the reader back to the top of a list that
   scrolls inside its box (pk-feedrows--capped) */
.pk-feedrows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-5); container: pk-feedrows / inline-size; }
.pk-feedrows__count { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-feedrows__list { display: grid; margin: 0; padding: 0; list-style: none; }
.pk-feedrows--capped .pk-feedrows__list {
  max-height: calc(min(560px, 70vh) + 2 * var(--pk-focus-room)); margin: calc(-1 * var(--pk-focus-room)); padding: var(--pk-focus-room); overflow-y: auto; overscroll-behavior: contain;
}
.pk-feedrow {
  display: grid; grid-template-columns: 11em 7.5em minmax(0, 1fr); grid-template-areas: 'who tag note' 'who tag meta'; align-items: start;
  gap: var(--pk-space-1) var(--pk-space-7); padding: var(--pk-space-6) var(--pk-space-3); border-top: 1px solid var(--pk-line);
}
.pk-feedrow:first-child { border-top: 0; }
.pk-feedrow__who { grid-area: who; display: flex; align-items: center; gap: var(--pk-space-4); min-width: 0; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-label); }
.pk-feedrow__who > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-feedrow__tag { grid-area: tag; justify-self: start; max-width: 100%; }
.pk-feedrow__note { grid-area: note; margin: 0; font-size: var(--pk-fs-small); line-height: var(--pk-lh-text); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.pk-feedrow__meta { grid-area: meta; font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-feedrow__meta a { color: var(--pk-text-2); }
@container pk-feedrows (max-width: 639px) {
  .pk-feedrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'who tag' 'note note' 'meta meta'; row-gap: var(--pk-space-3); }
}

/* what happened to someone, day by day: a day's heading stays at the top while its rows scroll by inside the box; a row is
   the time, an icon in its type's hue and what happened, and the whole row is its link. A note at the end says the list is
   cut and loads more */
.pk-eventlog {
  display: grid; grid-template-columns: minmax(0, 1fr); max-height: calc(min(46rem, 70vh) + 2 * var(--pk-focus-room)); margin: calc(-1 * var(--pk-focus-room));
  padding: var(--pk-focus-room); overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: var(--pk-space-20);
}
.pk-eventlog__day {
  position: sticky; top: calc(-1 * var(--pk-focus-room)); z-index: 2; margin: 0; padding: var(--pk-space-4) var(--pk-space-3); background: var(--pk-card);
  font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); color: var(--pk-text-2); box-shadow: var(--pk-edge-bottom);
}
.pk-eventlog__rows { display: grid; margin: 0 0 var(--pk-space-4); padding: 0; list-style: none; }
.pk-eventlog__row { position: relative; display: grid; grid-template-columns: 3.5em 28px minmax(0, 1fr); align-items: center; gap: var(--pk-space-5); min-height: var(--pk-row-h); padding: var(--pk-space-3); border-radius: var(--pk-r-sm); }
.pk-eventlog__row:hover { background: var(--pk-inset); }
.pk-eventlog__time { font-family: var(--pk-mono); font-size: var(--pk-fs-fine); color: var(--pk-text-3); }
.pk-eventlog__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--pk-r-pill); background: var(--pk-inset); color: var(--pk-text-2); }
.pk-eventlog__icon > .pk-icon { width: 15px; height: 15px; }
.pk-eventlog__icon[data-hue] { background: var(--pk-hue-soft); color: var(--pk-hue-text); }
.pk-eventlog__row:hover .pk-eventlog__icon:not([data-hue]) { background: var(--pk-card); }
.pk-eventlog__text { min-width: 0; font-size: var(--pk-fs-small); overflow-wrap: anywhere; }
.pk-eventlog__text a { color: inherit; text-decoration: none; }
.pk-eventlog__text a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pk-eventlog__text a:focus-visible { outline: 0; }
.pk-eventlog__row:has(a:focus-visible) { outline: var(--pk-focus-outline); outline-offset: calc(-1 * var(--pk-focus-offset)); }
.pk-eventlog__more { display: grid; justify-items: center; gap: var(--pk-space-4); padding: var(--pk-space-6) 0 var(--pk-space-2); font-size: var(--pk-fs-caption); color: var(--pk-text-3); text-align: center; }

/* a menu a right click opens where the pointer is (the script sets --pk-menu-x and --pk-menu-y, kept inside the window) */
.pk-menu--context[popover]:popover-open { inset: var(--pk-menu-y, 0px) auto auto var(--pk-menu-x, 0px); margin: 0; position-area: none; position-try-fallbacks: none; }

/* a playbook: pick what the other side said, read the approach, tick off its steps (a ticked step is struck through) */
.pk-playbook { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-7); }
.pk-playbook__approach { margin: 0; padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-field); background: var(--pk-inset); font-size: var(--pk-fs-item); line-height: var(--pk-lh-relaxed); }
.pk-playbook__steps { display: grid; gap: var(--pk-space-2); margin: 0; padding: 0; list-style: none; }
.pk-playbook__step { display: flex; align-items: flex-start; gap: var(--pk-space-6); padding: var(--pk-space-4) 0; font-size: var(--pk-fs-item); cursor: pointer; }
.pk-playbook__step > .pk-checkbox { margin-top: 1px; }
.pk-playbook__num { flex: none; min-width: 1.5ch; font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; color: var(--pk-text-3); }
.pk-playbook__step:has(> .pk-checkbox:checked) .pk-playbook__text { color: var(--pk-text-3); text-decoration: line-through; }

/* a notification about something already settled stays in the list, quiet: its words and icon grey, a "Çözüldü" mark */
.pk-notif--resolved .pk-notif__text { color: var(--pk-text-2); }
.pk-notif--resolved > .pk-disc { background: var(--pk-inset); color: var(--pk-text-3); }
.pk-notif__state { display: inline-flex; align-items: center; gap: var(--pk-space-1); margin-left: var(--pk-space-3); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-label); color: var(--pk-text-3); vertical-align: middle; }
.pk-notif__state > .pk-icon { width: 12px; height: 12px; }

@media (pointer: coarse), (max-width: 1023px) {
  .pk-playbook__step { min-height: var(--pk-tap); align-items: center; }
}
/* ---------- desk widgets (Sigorta study) ---------- */
/* work that slips: a large count in its tone (danger owed now, warning due), the label and a hint, an arrow to the list. The
   widget is left out when nothing is at risk */
.pk-atrisk { display: grid; gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; }
.pk-atrisk__item {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'count label arrow' 'count hint arrow'; align-items: center;
  gap: var(--pk-space-1) var(--pk-space-7); padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-tile); background: var(--pk-inset); color: inherit; text-decoration: none;
}
a.pk-atrisk__item:hover { background: var(--pk-inset-2); }
.pk-atrisk__count { grid-area: count; min-width: 2ch; font-family: var(--pk-font-figures); font-size: var(--pk-fs-figure-lg); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; line-height: var(--pk-lh-none); }
.pk-atrisk__item[data-tone='danger'] .pk-atrisk__count { color: var(--pk-danger-text); }
.pk-atrisk__item[data-tone='warning'] .pk-atrisk__count { color: var(--pk-warning-text); }
.pk-atrisk__label { grid-area: label; font-weight: var(--pk-fw-strong); }
.pk-atrisk__hint { grid-area: hint; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-atrisk__item > .pk-icon { grid-area: arrow; color: var(--pk-text-3); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-atrisk__item { background: var(--pk-card); box-shadow: var(--pk-ring); }

/* the step to the next tier under a category row: how much more for which rate */
.pk-nexttier { display: flex; align-items: center; gap: var(--pk-space-3); font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-nexttier > .pk-icon { width: 14px; height: 14px; flex: none; }
.pk-nexttier b { font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-strong); color: var(--pk-text); }

/* what falls due soon: chips per bucket with counts above a row of cards that snap as they scroll, the day and "N gün" pill on
   each, then the name, a sub line and the amount; "+N" at the end opens the rest */
.pk-duestrip { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); }
.pk-duestrip__cards {
  display: flex; gap: var(--pk-space-5); margin: calc(-1 * var(--pk-focus-room)); padding: var(--pk-focus-room); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pk-focus-room); scrollbar-width: thin;
}
.pk-duestrip__card {
  flex: 0 0 min(220px, 80%); scroll-snap-align: start; display: grid; align-content: start; gap: var(--pk-space-2); padding: var(--pk-space-6) var(--pk-space-7);
  border-radius: var(--pk-r-tile); background: var(--pk-inset); color: inherit; text-decoration: none;
}
a.pk-duestrip__card:hover { background: var(--pk-inset-2); }
.pk-duestrip__day { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-space-4); margin-bottom: var(--pk-space-2); font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-duestrip__name { font-weight: var(--pk-fw-strong); overflow-wrap: anywhere; }
.pk-duestrip__sub { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-duestrip__amount { margin-top: var(--pk-space-2); font-family: var(--pk-font-figures); font-size: var(--pk-figures-size); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-strong); }
.pk-duestrip__more {
  flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 var(--pk-space-8); border: 0; border-radius: var(--pk-r-tile); background: transparent;
  box-shadow: var(--pk-ring-mark); color: var(--pk-text-2); font: inherit; font-weight: var(--pk-fw-label); cursor: pointer;
}
.pk-duestrip__more:hover { background: var(--pk-inset); color: var(--pk-text); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-duestrip__card { background: var(--pk-card); box-shadow: var(--pk-ring); }

/* what is left of a paid allowance (message credits): the figure, what it still buys and, when it runs low, the warning tint */
.pk-quota { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4) var(--pk-space-8); padding: var(--pk-space-6) var(--pk-space-8); border-radius: var(--pk-r-inset); background: var(--pk-inset); }
.pk-quota__figure { font-family: var(--pk-font-figures); font-size: var(--pk-fs-figure-lg); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; line-height: var(--pk-lh-none); }
.pk-quota__body { flex: 1 1 200px; display: grid; gap: var(--pk-space-1); min-width: 0; }
.pk-quota__label { font-weight: var(--pk-fw-strong); }
.pk-quota__buys { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-quota[data-low] { background: var(--pk-warning-soft); }
.pk-quota[data-low] .pk-quota__figure { color: var(--pk-warning-text); }

/* columns that make room for their figures: each column shows its value above its bar while the column is wide enough to
   hold it whole, the peak always; a column is one hover target; muted columns (a weekend) take the control grey, a zero is a
   2px line */
.pk-bars--adaptive { align-items: stretch; }
.pk-bars__col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: var(--pk-space-1); min-width: 0; height: 100%; padding-top: var(--pk-space-10); border-radius: var(--pk-r-xs); container: pk-bar / inline-size; }
.pk-bars__col:hover { background: var(--pk-inset); }
.pk-bars__col > .pk-bars__bar { flex: none; background: var(--pk-seg, var(--pk-ink)); }
.pk-bars__value { font-family: var(--pk-font-figures); font-size: var(--pk-fs-axis); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; color: var(--pk-text-2); }
.pk-bars__col--peak .pk-bars__value { font-weight: var(--pk-fw-strong); color: var(--pk-text); }
.pk-bars__col--peak > .pk-bars__bar { background: var(--pk-accent); }
.pk-bars__col--muted > .pk-bars__bar { background: var(--pk-line-control); }
.pk-bars__bar[data-zero] { height: 2px; min-height: 2px; }
@container pk-bar (max-width: 35px) {
  .pk-bars__col:not(.pk-bars__col--peak) > .pk-bars__value { visibility: hidden; }
}

/* an "other" or "uncoded" bucket of a breakdown: under a dashed rule, in grey, last */
.pk-hbars__row--other { margin-top: var(--pk-space-2); padding-top: var(--pk-space-6); border-top: 1px dashed var(--pk-line-strong); color: var(--pk-text-2); }
.pk-hbars__row--other .pk-hbars__fill { background: var(--pk-line-control); }

/* the answer to a check (a ticket, a member, a coupon): the verdict large, in its status, with the rows that back it */
.pk-result { display: grid; gap: var(--pk-space-6); padding: var(--pk-pad); border-radius: var(--pk-r-panel); background: var(--pk-inset); }
.pk-result__head { display: flex; align-items: center; gap: var(--pk-space-7); }
.pk-result__mark { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); color: var(--pk-text-2); }
.pk-result__mark > .pk-icon { width: 26px; height: 26px; stroke-width: 2.2; }
.pk-result__title { margin: 0; font-size: var(--pk-fs-h2); font-weight: var(--pk-fw-bold); line-height: var(--pk-lh-h2); letter-spacing: -0.015em; }
.pk-result__sub { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-result--ok { background: var(--pk-success-soft); }
.pk-result--ok .pk-result__mark { background: var(--pk-success); color: var(--pk-on-success); }
.pk-result--ok .pk-result__title { color: var(--pk-success-text); }
.pk-result--no { background: var(--pk-danger-soft); }
.pk-result--no .pk-result__mark { background: var(--pk-danger); color: var(--pk-on-danger); }
.pk-result--no .pk-result__title { color: var(--pk-danger-text); }
.pk-result :is(.pk-kv__row) { border-top-color: color-mix(in srgb, var(--pk-text) 12%, transparent); }

/* the answer an app receives right now from the settings above it, read only: a live mark in the code block's head */
.pk-code__live { display: inline-flex; align-items: center; gap: var(--pk-space-3); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-label); color: var(--pk-success-text); }
.pk-code__live::before { content: ''; width: 8px; height: 8px; border-radius: var(--pk-r-pill); background: currentColor; }

@media (pointer: coarse), (max-width: 1023px) {
  .pk-duestrip__more { min-width: var(--pk-tap); }
}
/* ---------- buckets and distribution (Sigorta study) ---------- */
/* lists of people (call lists, territories, queues), one row each: the fold button, the name (renamed in place), how many
   records it holds, the people on it as chips and its actions. A person is moved by dragging the chip to another row, or by
   pressing it (it is held, aria-pressed) and then "Buraya taşı" on the row it goes to. A search shows its match count per row.
   The pool of people on no list closes the list */
.pk-buckets { display: grid; gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; container: pk-buckets / inline-size; }
.pk-bucket {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'fold name end' 'people people people'; align-items: center;
  gap: var(--pk-space-4) var(--pk-space-5); padding: var(--pk-space-4) var(--pk-space-6) var(--pk-space-4) var(--pk-space-3); border-radius: var(--pk-r-tile); background: var(--pk-inset);
}
.pk-bucket__fold {
  grid-area: fold; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--pk-r-pill); background: transparent; color: var(--pk-text-2); cursor: pointer;
}
.pk-bucket__fold:hover { background: var(--pk-inset-2); color: var(--pk-text); }
.pk-bucket__fold > .pk-icon { transition: rotate var(--pk-dur-move) var(--pk-ease); }
.pk-bucket__fold[aria-expanded='false'] > .pk-icon { rotate: -90deg; }
.pk-bucket__name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-5); min-width: 0; }
/* the name is a field that looks like text until it is pointed at or focused */
.pk-bucket__rename {
  flex: 1 1 10em; min-width: 0; height: 36px; padding: 0 var(--pk-space-4); border: 1px solid transparent; border-radius: var(--pk-r-field); background: transparent;
  font: inherit; font-weight: var(--pk-fw-strong); color: var(--pk-text); text-overflow: ellipsis;
}
.pk-bucket__rename:hover { border-color: var(--pk-line-strong); }
.pk-bucket__rename:focus { outline: 0; border-color: var(--pk-primary-edge); background: var(--pk-card); }
.pk-bucket__count { font-size: var(--pk-fs-meta); color: var(--pk-text-2); white-space: nowrap; }
.pk-bucket__match { font-family: var(--pk-font-figures); font-size: var(--pk-fs-caption); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-strong); color: var(--pk-accent-figure); white-space: nowrap; }
.pk-bucket__end { grid-area: end; display: flex; align-items: center; gap: max(var(--pk-space-2), 2 * var(--pk-tap-room)); }
.pk-bucket__people { grid-area: people; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3); min-width: 0; padding-left: calc(32px + var(--pk-space-5)); }
.pk-bucket__person {
  display: inline-flex; align-items: center; gap: var(--pk-space-3); height: 32px; max-width: 100%; padding: 0 var(--pk-space-6) 0 var(--pk-space-2); border: 0;
  border-radius: var(--pk-r-control); background: var(--pk-card); color: var(--pk-text); font: inherit; font-size: var(--pk-fs-label); font-weight: var(--pk-fw-label); white-space: nowrap; cursor: grab;
}
.pk-bucket__person > .pk-avatar { width: 24px; height: 24px; font-size: var(--pk-fs-micro); }
.pk-bucket__person > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pk-bucket__person[aria-pressed='true'] { box-shadow: var(--pk-ring-active); }
.pk-bucket__person[data-dragging] { background: transparent; box-shadow: var(--pk-ring-mark); color: var(--pk-text-3); }
.pk-bucket__empty { font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
/* while a person is held or dragged, a row they can go to says so */
.pk-bucket[data-target] { box-shadow: var(--pk-ring-mark); }
.pk-bucket[data-dropping] { background: var(--pk-accent-soft); box-shadow: var(--pk-ring-active); }
.pk-bucket--pool { background: transparent; box-shadow: inset 0 0 0 1px var(--pk-line-strong); }
.pk-bucket--pool .pk-bucket__person { background: var(--pk-inset); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-bucket:not(.pk-bucket--pool) { background: var(--pk-card); box-shadow: var(--pk-ring); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-bucket:not(.pk-bucket--pool) .pk-bucket__person { background: var(--pk-inset); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-bucket:is([data-target]) { box-shadow: var(--pk-ring-mark); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-bucket[data-dropping] { box-shadow: var(--pk-ring-active); }
@container pk-buckets (max-width: 519px) {
  .pk-bucket { grid-template-areas: 'fold name name' 'people people people' 'end end end'; }
  .pk-bucket__people { padding-left: 0; }
  .pk-bucket__end { justify-content: flex-start; flex-wrap: wrap; }
}

/* records shared out from a pool: the pool's figure, the people with how many each takes (equal shares or set by hand) and a
   sentence that says what each gets before anything is saved */
.pk-distribute { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-7); container: pk-distribute / inline-size; }
.pk-distribute__pool { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pk-space-2) var(--pk-space-5); }
.pk-distribute__figure { font-family: var(--pk-font-figures); font-size: var(--pk-fs-figure-xl); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; line-height: var(--pk-lh-none); }
.pk-distribute__pool > span:last-child { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-distribute__people { display: grid; margin: 0; padding: 0; list-style: none; }
.pk-distribute__person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-6); min-height: var(--pk-row-h); padding: var(--pk-space-3) 0; border-top: 1px solid var(--pk-line); }
.pk-distribute__person:first-child { border-top: 0; }
.pk-distribute__who { display: flex; align-items: center; gap: var(--pk-space-5); min-width: 0; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-label); }
.pk-distribute__who > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-distribute__person:has(> .pk-checkbox:not(:checked)) .pk-distribute__who { color: var(--pk-text-3); }
.pk-distribute__preview { margin: 0; padding: var(--pk-space-6) var(--pk-space-7); border-radius: var(--pk-r-field); background: var(--pk-inset); font-size: var(--pk-fs-small); line-height: var(--pk-lh-text); }
.pk-distribute__preview b { font-family: var(--pk-font-figures); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-strong); }
.pk-distribute__preview[data-tone='warning'] { background: var(--pk-warning-soft); color: var(--pk-warning-text); }

@media (pointer: coarse), (max-width: 1023px) {
  :is(.pk-bucket__fold, .pk-bucket__person) { position: relative; }
  :is(.pk-bucket__fold, .pk-bucket__person)::after { content: ''; position: absolute; inset: min(0px, 50% - var(--pk-tap) / 2); }
  .pk-bucket__people { gap: max(var(--pk-space-3), 2 * var(--pk-tap-room)); }
}
/* ---------- gates and prompts (Sigorta study) ---------- */
/* consents a person gives on a public page: each topic a button that opens its full text in a sheet (its version, the
   channels it covers and "Onaylıyorum"); a given consent is ticked, a required one says so, and sending waits for every
   required one */
.pk-consent { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); }
.pk-consent__topics { display: grid; gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; }
.pk-consent__topic {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-1) var(--pk-space-6); width: 100%; padding: var(--pk-space-6) var(--pk-space-7);
  border: 0; border-radius: var(--pk-r-tile); background: var(--pk-inset); font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.pk-consent__topic:hover { background: var(--pk-inset-2); }
.pk-consent__mark { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--pk-r-pill); box-shadow: var(--pk-ring-mark); color: var(--pk-text-3); }
.pk-consent__mark > .pk-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.pk-consent__topic:not([data-accepted]) .pk-consent__mark > .pk-icon { visibility: hidden; }
.pk-consent__topic[data-accepted] .pk-consent__mark { background: var(--pk-success); color: var(--pk-on-success); box-shadow: none; }
.pk-consent__title { font-weight: var(--pk-fw-strong); overflow-wrap: anywhere; }
.pk-consent__meta { grid-column: 2; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-consent__topic > .pk-icon { grid-row: span 2; color: var(--pk-text-3); }
/* inside its sheet: the text scrolls, the version and the channels follow */
.pk-consent__text { max-height: min(52vh, 420px); overflow-y: auto; padding-right: var(--pk-space-3); }
.pk-consent__version { font-family: var(--pk-mono); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-consent__channels { display: flex; flex-wrap: wrap; gap: var(--pk-space-4) var(--pk-space-8); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-consent__topic { background: var(--pk-card); box-shadow: var(--pk-ring); }

/* a session that ran out: the whole window darkens and says so while the sign-in page loads */
.pk-veil--session {
  --pk-focus-outline: 2px solid var(--pk-on-dark); position: fixed; z-index: 90; flex-direction: column; gap: var(--pk-space-5); padding: var(--pk-space-12);
  border-radius: 0; background: color-mix(in srgb, var(--pk-dark) 94%, transparent); color: var(--pk-on-dark); text-align: center;
}
.pk-veil__title { margin: 0; font-size: var(--pk-fs-h3); font-weight: var(--pk-fw-strong); }
.pk-veil__text { max-width: 36em; margin: 0; color: var(--pk-on-dark-2); }
.pk-veil--session > .pk-spinner { color: var(--pk-on-dark); }

/* first-run steps in a dialog: a step at a time (the dashes say which), the icon and its question in the middle, the
   answer buttons under it and "Bu uyarıyı bir daha gösterme" when the step can be silenced */
.pk-prompt { justify-items: center; text-align: center; }
.pk-prompt__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--pk-r-pill); background: var(--pk-accent-soft); color: var(--pk-accent-text); }
.pk-prompt__icon > .pk-icon { width: 26px; height: 26px; }
.pk-prompt__count { font-family: var(--pk-font-figures); font-size: var(--pk-fs-figure-2xl); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; line-height: var(--pk-lh-none); color: var(--pk-title-text); }
.pk-prompt__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pk-space-4); }
.pk-prompt > p { max-width: 30em; }

/* the one screen left open until a step is done (a finished call written up): why the rest is closed, what it is about,
   the form */
.pk-gate { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-8); width: min(640px, 100%); margin-inline: auto; }
.pk-gate__why { display: flex; align-items: flex-start; gap: var(--pk-space-4); padding: var(--pk-space-5) var(--pk-space-7); border-radius: var(--pk-r-field); background: var(--pk-inset); font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-gate__why > .pk-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--pk-text); }
/* ---------- figures at a glance (0.10.0) ---------- */
/* a big figure with its words beside it: the value in the theme's hero type, then a label, a note (a tone when it asks for
   something) and a delta stacked at its side; on a narrow box the words drop under the figure */
.pk-bigfig { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3) var(--pk-space-8); min-width: 0; }
.pk-bigfig__value { flex: none; }
.pk-bigfig__side { display: grid; gap: var(--pk-space-1); flex: 1 1 140px; min-width: 0; }
.pk-bigfig__label { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-medium); line-height: var(--pk-lh-snug); }
.pk-bigfig__note { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-bigfig__note[data-tone='danger'] { color: var(--pk-danger-text); }
.pk-bigfig__note[data-tone='warning'] { color: var(--pk-warning-text); }
.pk-bigfig__note[data-tone='success'] { color: var(--pk-success-text); }
.pk-bigfig__side > .pk-delta { justify-self: start; }

/* a figure with a segmented bar and its level: the segments fill in the level's status colour (high, medium, low), and the
   level is always written; data-tone sets another fill (accent, ink, ai). --lg puts the figure in hero type beside a taller
   bar with the level under it; --dots is a row of small dots for a frequency or a rating */
.pk-segmeter { --pk-meter: var(--pk-ink); display: flex; align-items: center; gap: var(--pk-space-4) var(--pk-space-6); min-width: 0; }
.pk-segmeter[data-level='high'] { --pk-meter: var(--pk-success); }
.pk-segmeter[data-level='medium'] { --pk-meter: var(--pk-warning); }
.pk-segmeter[data-level='low'] { --pk-meter: var(--pk-danger); }
.pk-segmeter[data-tone='accent'] { --pk-meter: var(--pk-accent); }
.pk-segmeter[data-tone='ink'] { --pk-meter: var(--pk-ink); }
.pk-segmeter[data-tone='ai'] { --pk-meter: var(--pk-ai); }
.pk-segmeter[data-tone='success'] { --pk-meter: var(--pk-success); }
.pk-segmeter[data-tone='warning'] { --pk-meter: var(--pk-warning); }
.pk-segmeter[data-tone='danger'] { --pk-meter: var(--pk-danger); }
.pk-segmeter__value { flex: none; font-size: var(--pk-fs-figure-xl); font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-none); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.pk-segmeter__bar { display: flex; align-items: center; gap: 3px; flex: 0 1 auto; min-width: 0; }
.pk-segmeter__bar > i { flex: 0 1 7px; width: 7px; min-width: 3px; height: 18px; border-radius: var(--pk-r-pill); background: var(--pk-inset-2); }
.pk-segmeter__bar > i.on { background: var(--pk-meter); }
.pk-segmeter__level { margin-left: auto; font-size: var(--pk-fs-small); color: var(--pk-text-2); white-space: nowrap; }
.pk-inset .pk-segmeter__bar > i:not(.on) { background: var(--pk-card); }
.pk-segmeter--lg { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'value bar' 'value level'; align-items: end; gap: var(--pk-space-3) var(--pk-space-8); }
.pk-segmeter--lg .pk-segmeter__value { grid-area: value; font-size: calc(var(--pk-fs-hero-md) * var(--pk-hero-k)); line-height: var(--pk-lh-hero); letter-spacing: -0.055em; }
.pk-segmeter--lg .pk-segmeter__bar { grid-area: bar; gap: var(--pk-space-2); }
.pk-segmeter--lg .pk-segmeter__bar > i { flex-basis: 10px; width: 10px; height: 28px; }
.pk-segmeter--lg .pk-segmeter__level { grid-area: level; align-self: start; margin: 0; }
.pk-segmeter--dots .pk-segmeter__bar { gap: var(--pk-space-2); }
.pk-segmeter--dots .pk-segmeter__bar > i { flex: none; width: 8px; height: 8px; }
.pk-segmeter--dots .pk-segmeter__value { font-size: var(--pk-fs-small); font-family: var(--pk-font-figures); font-weight: var(--pk-fw-medium); letter-spacing: 0; }

/* a stage of several as rising bars: the steps done in the brand tint, the current one in the brand colour with a dot, the
   ones to come hatched; the stage and a note under them. Heights come from pk-h10…100 (risingHeights) */
.pk-stepmeter { display: grid; gap: var(--pk-space-6); }
.pk-stepmeter__bars { display: flex; align-items: end; gap: var(--pk-space-4); height: 84px; margin: 0; padding: 0; list-style: none; }
.pk-stepmeter__bars > li { position: relative; flex: 1 1 0; min-width: 8px; min-height: 18px; border-radius: var(--pk-r-sm); background: var(--pk-accent-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pk-accent-text) 28%, transparent); }
.pk-stepmeter__bars > li[data-state='current'] { background: var(--pk-accent); box-shadow: none; }
.pk-stepmeter__bars > li[data-state='current']::after { content: ''; position: absolute; top: var(--pk-space-4); left: 50%; translate: -50% 0; width: 6px; height: 6px; border-radius: var(--pk-r-pill); background: var(--pk-accent-ink); }
.pk-stepmeter__bars > li[data-state='future'] {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 14%, transparent) 0 1.5px, transparent 1.5px 7px), var(--pk-inset);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pk-text) 16%, transparent);
}
.pk-stepmeter__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pk-space-2) var(--pk-space-6); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }

/* a row of stat tiles: grey tiles in a card, one of them dark for the figure that matters most; a tile is its own container,
   so its value takes the tile's width (hero-light type). --scroll makes the row one swipeable line on a phone. A tile that is
   a button picks what a chart under the row shows (aria-pressed): ringed with its mark filled */
/* every tile in one row while each keeps --pk-tile-min, else half of them a row (two by two, three and two), never a last row
   of one: the tile count comes from :has() */
.pk-stattiles {
  --pk-tiles-n: 1; --pk-tiles-half: 1; --pk-tile-min: 108px;
  --pk-tile-all: calc((100% - (var(--pk-tiles-n) - 1) * var(--pk-space-4)) / var(--pk-tiles-n) - 0.5px);
  --pk-tile-half: calc((100% - (var(--pk-tiles-half) - 1) * var(--pk-space-4)) / var(--pk-tiles-half) - 0.5px);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--pk-tile-all), clamp(0px, (var(--pk-tile-min) - var(--pk-tile-all)) * 1000, var(--pk-tile-half)))), 1fr));
  gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none;
}
.pk-stattiles:has(> :nth-child(2)) { --pk-tiles-n: 2; }
.pk-stattiles:has(> :nth-child(3)) { --pk-tiles-n: 3; }
.pk-stattiles:has(> :nth-child(4)) { --pk-tiles-n: 4; --pk-tiles-half: 2; }
.pk-stattiles:has(> :nth-child(5)) { --pk-tiles-n: 5; --pk-tiles-half: 3; }
.pk-stattiles:has(> :nth-child(6)) { --pk-tiles-n: 6; --pk-tiles-half: 3; }
.pk-stattiles--scroll {
  display: flex; gap: var(--pk-space-4); margin-block: calc(-1 * max(var(--pk-tap-room), var(--pk-focus-room))); padding: max(var(--pk-tap-room), var(--pk-focus-room));
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: max(var(--pk-tap-room), var(--pk-focus-room)); scrollbar-width: none;
}
:where(.pk-stattiles--scroll) { margin-inline: calc(-1 * max(var(--pk-tap-room), var(--pk-focus-room))); }
.pk-stattiles--scroll::-webkit-scrollbar { display: none; }
/* the row's own keyboard stop draws its ring inside, where the card does not cut it */
.pk-stattiles--scroll:focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
/* a tile of the row, or the item that holds a pressable tile */
.pk-stattiles--scroll > :is(.pk-stattile, li) { flex: 0 0 clamp(136px, 38%, 200px); scroll-snap-align: start; }
.pk-stattile {
  container: pk-stattile / inline-size; position: relative; display: grid; align-content: start; gap: var(--pk-space-2); min-width: 0;
  padding: var(--pk-space-7) var(--pk-space-8); border: 0; border-radius: var(--pk-r-tile); background: var(--pk-inset); color: var(--pk-text); font: inherit; text-align: left;
}
.pk-stattile__label { font-size: var(--pk-fs-meta); color: var(--pk-text-2); text-wrap: pretty; }
.pk-stattile__value {
  font-size: clamp(var(--pk-fs-figure-lg), 25cqi, calc(var(--pk-fs-hero-sm) * var(--pk-hero-k))); font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-tight);
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pk-stattile__unit { margin-left: var(--pk-space-2); font-size: var(--pk-fs-small); letter-spacing: 0; color: var(--pk-text-2); }
.pk-stattile__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-1) var(--pk-space-3); font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-stattile__note > .pk-delta { font-size: inherit; }
.pk-stattiles > li { display: grid; min-width: 0; }
/* the tile that matters is drawn in ink, so it turns light in dark mode as Yenilikçi's current items do; its words take the
   ink's own colour at full strength */
.pk-stattile--ink { background: var(--pk-ink); color: var(--pk-on-ink); --pk-focus-outline: 2px solid var(--pk-on-ink); }
.pk-stattile--ink :is(.pk-stattile__label, .pk-stattile__note, .pk-stattile__unit, .pk-delta) { color: inherit; }
button.pk-stattile { cursor: pointer; padding-right: var(--pk-space-16); }
button.pk-stattile:hover { background: var(--pk-inset-2); }
button.pk-stattile[aria-pressed='true'] { background: var(--pk-card); box-shadow: var(--pk-ring-chosen); }
.pk-stattile__mark { position: absolute; top: var(--pk-space-7); right: var(--pk-space-7); display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--pk-r-pill); box-shadow: var(--pk-ring-mark); color: transparent; }
.pk-stattile__mark > .pk-icon { width: 12px; height: 12px; stroke-width: 3; }
button.pk-stattile[aria-pressed='true'] .pk-stattile__mark { background: var(--pk-primary); color: var(--pk-on-primary); box-shadow: none; }
.pk-card--ink .pk-stattile:not(.pk-stattile--ink) { background: var(--pk-dark-inset); color: var(--pk-on-dark); }
.pk-card--ink .pk-stattile:not(.pk-stattile--ink) :is(.pk-stattile__label, .pk-stattile__note, .pk-stattile__unit) { color: var(--pk-on-dark-2); }
/* Kurumsal and Teknik draw no dark blocks: the tile that matters takes the brand tint and its figure the brand's figure shade.
   Portal draws it in its deep shade, as its ink block */
:where([data-theme='corporate'], [data-theme='technical']) .pk-stattile--ink { background: var(--pk-accent-soft); color: var(--pk-text); --pk-focus-outline: inherit; }
:where([data-theme='corporate'], [data-theme='technical']) .pk-stattile--ink :is(.pk-stattile__label, .pk-stattile__note, .pk-stattile__unit) { color: var(--pk-text-2); }
[data-theme='portal'] .pk-stattile--ink { background: var(--pk-dark); color: var(--pk-on-dark); --pk-focus-outline: 2px solid var(--pk-on-dark); }
:where([data-theme='corporate'], [data-theme='technical']) .pk-stattile--ink .pk-stattile__value { color: var(--pk-accent-figure); }
:where([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-stattile:not(.pk-stattile--ink) { background: var(--pk-inset); color: var(--pk-text); }
:where([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-stattile:not(.pk-stattile--ink) :is(.pk-stattile__label, .pk-stattile__note, .pk-stattile__unit) { color: var(--pk-text-2); }

/* the stages of a pipeline as one row of bars, each as wide as its share of the work (--pk-stage from stageWeights, at least
   room for its count), the count and the stage's name under it. --accent marks the stage to act on, --ink the last one,
   --hatch a stage that is still to come or holds the rest */
.pk-stagebar { display: flex; gap: var(--pk-space-3); min-width: 0; margin: 0; padding: 0; list-style: none; }
.pk-stagebar__stage { display: grid; align-content: start; gap: var(--pk-space-1); flex: var(--pk-stage, 1) 1 0; min-width: 52px; }
.pk-stagebar__bar { height: 34px; margin-bottom: var(--pk-space-4); border-radius: var(--pk-r-sm); background: var(--pk-inset-2); }
.pk-inset .pk-stagebar__bar { background: var(--pk-card); }
.pk-stagebar__stage--accent .pk-stagebar__bar { background: var(--pk-accent); }
.pk-stagebar__stage--ink .pk-stagebar__bar { background: var(--pk-ink); }
.pk-stagebar__stage--hatch .pk-stagebar__bar {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 14%, transparent) 0 1.5px, transparent 1.5px 7px), var(--pk-inset);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pk-text) 16%, transparent);
}
.pk-stagebar__count { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-snug); font-variant-numeric: tabular-nums; }
.pk-stagebar__name { overflow: hidden; font-size: var(--pk-fs-meta); color: var(--pk-text-2); text-overflow: ellipsis; white-space: nowrap; }
.pk-stagebar__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pk-space-2) var(--pk-space-6); margin-bottom: var(--pk-space-7); }
.pk-stagebar__title { margin: 0; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); }
.pk-stagebar__meta { margin-left: auto; font-size: var(--pk-fs-meta); color: var(--pk-text-2); }

/* a compliance figure as a ring of ticks: the ticks up to the value in the ring's colour (the text colour, or data-tone), the
   rest faint; the value and its caption sit inside the ring. Lines from gaugeGeometry */
.pk-tickgauge { --pk-gauge: currentColor; position: relative; display: grid; justify-items: center; width: 100%; max-width: 260px; margin-inline: auto; }
.pk-tickgauge[data-tone='success'] { --pk-gauge: var(--pk-success); }
.pk-tickgauge[data-tone='warning'] { --pk-gauge: var(--pk-warning); }
.pk-tickgauge[data-tone='danger'] { --pk-gauge: var(--pk-danger); }
.pk-tickgauge[data-tone='accent'] { --pk-gauge: var(--pk-accent); }
.pk-tickgauge > svg { display: block; width: 100%; height: auto; overflow: visible; }
.pk-tickgauge line { stroke: color-mix(in srgb, currentColor 20%, transparent); stroke-width: 3.4; stroke-linecap: round; }
.pk-tickgauge line.on { stroke: var(--pk-gauge); }
.pk-tickgauge__label { position: absolute; inset: 40% 12% auto; display: grid; justify-items: center; gap: var(--pk-space-1); text-align: center; }
.pk-tickgauge__value { font-size: calc(var(--pk-fs-hero-sm) * var(--pk-hero-k)); font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-none); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.pk-tickgauge__unit { margin-left: var(--pk-space-1); font-size: var(--pk-fs-item); letter-spacing: 0; }
.pk-tickgauge__caption { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }

/* the funnel's rate from the step before, a bar as long as its share (React: --pk-share), and the rates between steps */
.pk-funnel__rate { min-width: 4ch; font-family: var(--pk-font-figures); font-size: var(--pk-fs-caption); font-variant-numeric: tabular-nums; color: var(--pk-text-3); text-align: right; white-space: nowrap; }
.pk-funnel__bar--share { width: max(var(--pk-space-6), calc(var(--pk-share, 1) * 100%)); }
.pk-funnel__bar--ink { background: var(--pk-ink); }

/* facts side by side in a hairline frame: a label over its value per cell (what is missing, when it is due) */
.pk-cells { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; border-radius: var(--pk-r-sm); box-shadow: var(--pk-ring); }
.pk-cells > div { display: grid; align-content: start; gap: var(--pk-space-1); min-width: 0; padding: var(--pk-space-5) var(--pk-space-6); }
.pk-cells > div + div { box-shadow: var(--pk-edge-left); }
.pk-cells dt { font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-cells dd { margin: 0; overflow-wrap: anywhere; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-medium); }
.pk-cells dd.pk-num { font-weight: var(--pk-fw-strong); }

/* words in a coloured block take its ink, as the kit's labels do; the plain-surface themes keep their greys */
:is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) :is(.pk-bigfig__note, .pk-segmeter__level, .pk-stepmeter__foot, .pk-tickgauge__caption, .pk-stagebar__name, .pk-stagebar__meta, .pk-cells dt) { color: inherit; }
:is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) .pk-segmeter { --pk-meter: currentColor; }
:is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) .pk-segmeter__bar > i:not(.on) { background: color-mix(in srgb, currentColor 16%, transparent); }
:is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) .pk-cells { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
:is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) .pk-cells > div + div { box-shadow: inset 1px 0 0 color-mix(in srgb, currentColor 22%, transparent); }
.pk-card--ink :is(.pk-bigfig__note:not([data-tone]), .pk-segmeter__level, .pk-stepmeter__foot, .pk-tickgauge__caption, .pk-stagebar__name, .pk-stagebar__meta, .pk-cells dt) { color: var(--pk-on-dark-2); }
.pk-card--ink .pk-segmeter__bar > i:not(.on) { background: var(--pk-dark-inset); }
.pk-card--ink .pk-stagebar__bar { background: var(--pk-dark-inset); }
.pk-card--ink .pk-stagebar__stage--ink .pk-stagebar__bar { background: var(--pk-on-dark); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) :is(.pk-bigfig__note:not([data-tone]), .pk-segmeter__level, .pk-stepmeter__foot, .pk-tickgauge__caption, .pk-stagebar__name, .pk-stagebar__meta, .pk-cells dt) { color: var(--pk-text-2); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) .pk-cells dt { color: var(--pk-text-3); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) .pk-segmeter { --pk-meter: var(--pk-accent-figure); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) .pk-segmeter__bar > i:not(.on) { background: var(--pk-inset-2); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) .pk-cells { box-shadow: var(--pk-ring); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) :is(.pk-card--accent, .pk-card--ai, .pk-card--warning, .pk-card--success) .pk-cells > div + div { box-shadow: var(--pk-edge-left); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink :is(.pk-bigfig__note:not([data-tone]), .pk-segmeter__level, .pk-stepmeter__foot, .pk-tickgauge__caption, .pk-stagebar__name, .pk-stagebar__meta) { color: var(--pk-text-2); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-cells dt { color: var(--pk-text-3); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-segmeter__bar > i:not(.on) { background: var(--pk-inset-2); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-stagebar__bar { background: var(--pk-inset-2); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-stagebar__stage--ink .pk-stagebar__bar { background: var(--pk-ink); }
/* Portal's ink block and dark tile are its deep shade, where the faint words take its own second ink */
[data-theme='portal'] .pk-card--ink :is(.pk-bigfig__note:not([data-tone]), .pk-segmeter__level, .pk-stepmeter__foot, .pk-tickgauge__caption, .pk-stagebar__name, .pk-stagebar__meta, .pk-cells dt) { color: var(--pk-portal-on-deep-2); }

/* a segmented bar across its box (--fill), a segment in its own tone (data-tone on the segment: a share of documents
   accepted, in review, missing) */
.pk-segmeter--fill .pk-segmeter__bar { flex: 1 1 auto; gap: var(--pk-space-2); }
.pk-segmeter--fill .pk-segmeter__bar > i { flex: 1 1 0; width: auto; height: 10px; }
.pk-segmeter__bar > i.on[data-tone='success'] { background: var(--pk-success); }
.pk-segmeter__bar > i.on[data-tone='warning'] { background: var(--pk-warning); }
.pk-segmeter__bar > i.on[data-tone='danger'] { background: var(--pk-danger); }
.pk-segmeter__bar > i.on[data-tone='info'] { background: var(--pk-info, var(--pk-p4)); }
.pk-segmeter__bar > i.on[data-tone='ai'] { background: var(--pk-ai); }
.pk-segmeter__bar > i.on[data-tone='accent'] { background: var(--pk-accent); }
/* small columns at the foot of a figure card (a year's spend, the months to come hatched) */
.pk-bars--mini { --pk-chart-h: 48px; gap: var(--pk-space-2); }
.pk-bars--mini > .pk-bars__bar { min-height: 6px; border-radius: var(--pk-r-xs); }
/* ---------- what to do now (0.10.0) ---------- */
/* the next step: one card per screen that says what to do now, in the region's brand block (pk-card--accent) or its ink block;
   an eyebrow, the step as a title, why it matters, one action and, when it has a deadline, a round badge with the time left
   and the day. The themes that draw blocks as plain cards keep its words and the primary action in their own colours */
.pk-nextcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'eyebrow due' 'title due' 'text text' 'actions actions'; align-items: start; gap: var(--pk-space-3) var(--pk-space-8); }
.pk-nextcard__eyebrow { grid-area: eyebrow; display: inline-flex; align-items: center; gap: var(--pk-space-3); font-size: var(--pk-fs-label); font-weight: var(--pk-fw-strong); }
.pk-nextcard__eyebrow > .pk-icon { width: 16px; height: 16px; flex: none; }
.pk-nextcard__title { grid-area: title; margin: 0; font-size: var(--pk-fs-h3); font-weight: var(--pk-fw-title); line-height: var(--pk-lh-snug); letter-spacing: -0.02em; text-wrap: balance; }
.pk-nextcard--lg .pk-nextcard__title { font-size: var(--pk-fs-h2); line-height: var(--pk-lh-h2); letter-spacing: -0.025em; }
.pk-nextcard__text { grid-area: text; margin: 0; font-size: var(--pk-fs-small); }
.pk-nextcard__due {
  grid-area: due; display: grid; align-content: center; justify-items: center; width: 84px; aspect-ratio: 1; padding: var(--pk-space-3); border-radius: var(--pk-r-pill);
  background: var(--pk-card); color: var(--pk-text); line-height: var(--pk-lh-snug); text-align: center;
}
.pk-nextcard__due b { font-size: var(--pk-fs-figure-sm); font-weight: var(--pk-fw-strong); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pk-nextcard__due span { font-size: var(--pk-fs-fine); }
.pk-nextcard__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--pk-space-4); margin-top: var(--pk-space-5); }
.pk-card--ink .pk-nextcard__text { color: var(--pk-on-dark-2); }
/* the ink block stays dark in dark mode, where the ink turns light: the brand's figure shade for a dark surface is then its own */
.pk-card--ink .pk-nextcard__eyebrow > .pk-icon { color: light-dark(var(--pk-accent-figure-on-ink), var(--pk-accent-figure)); }
.pk-card--ink .pk-nextcard__due { background: var(--pk-accent); color: var(--pk-accent-ink); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--accent .pk-nextcard__eyebrow,
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-nextcard__eyebrow { color: var(--pk-accent-figure); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--accent .pk-nextcard__text,
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-nextcard__text { color: var(--pk-text-2); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-nextcard__eyebrow > .pk-icon { color: inherit; }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--accent .pk-nextcard__due,
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-nextcard__due { background: var(--pk-inset); color: var(--pk-text); }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--accent .pk-nextcard__due b,
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-nextcard__due b { color: var(--pk-accent-figure); }

/* an insight on the dark block: where it comes from and when, a title, points with a dot in their tone, and one action in the
   brand colour. On a light surface (the themes without dark blocks) the dots take their text shades */
.pk-insight { display: grid; align-content: start; gap: var(--pk-space-6); }
.pk-insight__head { display: flex; align-items: center; gap: var(--pk-space-4); min-width: 0; }
.pk-insight__source { display: inline-flex; align-items: center; gap: var(--pk-space-4); min-width: 0; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); }
.pk-insight__source > .pk-icon { flex: none; width: 18px; height: 18px; color: var(--pk-ai-text); }
.pk-insight__time { margin-left: auto; flex: none; font-family: var(--pk-mono); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-insight__title { margin: 0; font-size: var(--pk-fs-h3); font-weight: var(--pk-fw-title); line-height: var(--pk-lh-snug); letter-spacing: -0.02em; text-wrap: balance; }
.pk-insight__points { display: grid; gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--pk-fs-small); }
.pk-insight__point { display: flex; align-items: baseline; gap: var(--pk-space-5); }
.pk-insight__point::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: var(--pk-r-pill); background: var(--pk-dot, var(--pk-text-3)); translate: 0 -1px; }
.pk-insight__point[data-tone='danger'] { --pk-dot: var(--pk-danger-text); }
.pk-insight__point[data-tone='warning'] { --pk-dot: var(--pk-warning-text); }
.pk-insight__point[data-tone='success'] { --pk-dot: var(--pk-success-text); }
.pk-insight__point[data-tone='accent'] { --pk-dot: var(--pk-accent-figure); }
.pk-insight__actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-4); margin-top: var(--pk-space-2); }
.pk-card--ink .pk-insight__source > .pk-icon { color: var(--pk-ai); }
.pk-card--ink .pk-insight__time { color: var(--pk-on-dark-2); }
.pk-card--ink .pk-insight__point[data-tone='danger'] { --pk-dot: var(--pk-danger); }
.pk-card--ink .pk-insight__point[data-tone='warning'] { --pk-dot: var(--pk-warning); }
.pk-card--ink .pk-insight__point[data-tone='success'] { --pk-dot: var(--pk-success); }
.pk-card--ink .pk-insight__point[data-tone='accent'] { --pk-dot: light-dark(var(--pk-accent-figure-on-ink), var(--pk-accent-figure)); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-insight__source > .pk-icon { color: var(--pk-ai-text); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-insight__time { color: var(--pk-text-3); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-insight__point[data-tone='danger'] { --pk-dot: var(--pk-danger-text); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-insight__point[data-tone='warning'] { --pk-dot: var(--pk-warning-text); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-insight__point[data-tone='success'] { --pk-dot: var(--pk-success-text); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-insight__point[data-tone='accent'] { --pk-dot: var(--pk-accent-figure); }
[data-theme='portal'] .pk-card--ink :is(.pk-nextcard__text, .pk-insight__time) { color: var(--pk-portal-on-deep-2); }
/* the feature switch outside a menu in Kurumsal (its menus leave the card out): the on track keeps the block's ink as its edge */
[data-theme='corporate'] .pk-promo .pk-toggle[aria-checked='true'] { box-shadow: inset 0 0 0 1px var(--pk-accent-ink); }
/* the ring of what sits on the brand block (its action, the menu's feature switch and link) is drawn in the block's ink; the
   themes that draw the block as a card keep their ring */
.pk-card--accent, .pk-promo { --pk-focus-outline: 2px solid var(--pk-accent-ink); }
[data-theme='technical'] .pk-promo { --pk-focus-outline: 2px solid var(--pk-primary-edge); }
/* ---------- record heads, pill tabs and option cards (0.10.0) ---------- */
/* a record's head on a phone: back, the record's name with its code under it in the middle, more actions; the facts that
   name it follow as chips (status pill, person, organisation, date) */
.pk-recordhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-5); min-width: 0; }
.pk-recordhead__title { display: grid; justify-items: center; min-width: 0; text-align: center; }
.pk-recordhead__name { margin: 0; overflow-wrap: anywhere; font-size: var(--pk-fs-lead); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-snug); color: var(--pk-title-text); }
.pk-recordhead__code { overflow: hidden; max-width: 100%; font-size: var(--pk-fs-caption); color: var(--pk-text-3); text-overflow: ellipsis; }
.pk-recordhead__end { display: flex; gap: var(--pk-space-3); }

/* the facts that name a record, as chips on the canvas (inset chips on a card): a person with their avatar, an organisation
   with its mark, a date or place with an icon. A chip that is a link takes the touch ring */
.pk-recordchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3); min-width: 0; margin: 0; padding: 0; list-style: none; }
.pk-recordchips.pk-chips-scroll { flex-wrap: nowrap; gap: var(--pk-space-3); }
/* in a row that is cut a chip draws its ring inside, in its own text colour, as the scrolling chips do */
.pk-chips-scroll .pk-recordchip { --pk-focus-outline: 2px solid currentColor; }
.pk-chips-scroll .pk-recordchip:focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
.pk-recordchips > li { display: flex; flex: none; }
.pk-recordchip {
  display: inline-flex; align-items: center; gap: var(--pk-space-3); height: 34px; max-width: 100%; padding: 0 var(--pk-space-6); border-radius: var(--pk-r-control);
  background: var(--pk-card); color: var(--pk-text); font-size: var(--pk-fs-small); font-weight: var(--pk-fw-medium); text-decoration: none; white-space: nowrap;
}
.pk-recordchip:has(> :is(.pk-avatar, .pk-orgmark):first-child) { padding-left: var(--pk-space-2); }
.pk-recordchip > .pk-icon { flex: none; width: 16px; height: 16px; color: var(--pk-text-2); }
.pk-recordchip > .pk-avatar { width: 26px; height: 26px; font-size: var(--pk-fs-micro); }
.pk-recordchip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
a.pk-recordchip { position: relative; }
a.pk-recordchip:hover { background: var(--pk-inset); }
a.pk-recordchip::after { content: ''; position: absolute; inset: min(0px, (34px - var(--pk-tap)) / 2) 0; }
.pk-card .pk-recordchip { background: var(--pk-inset); }
.pk-card a.pk-recordchip:hover { background: var(--pk-inset-2); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-recordchip { background: var(--pk-card); box-shadow: var(--pk-ring); }

/* an organisation's mark: its logo, or its initials on the inset in a small rounded square */
.pk-orgmark {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; overflow: hidden; border-radius: var(--pk-r-xs); background: var(--pk-inset);
  color: var(--pk-text); font-size: var(--pk-fs-micro); font-weight: var(--pk-fw-heavy); letter-spacing: 0.02em;
}
.pk-orgmark > img { width: 100%; height: 100%; object-fit: contain; }
.pk-orgmark--lg { width: 40px; height: 40px; border-radius: var(--pk-r-sm); font-size: var(--pk-fs-fine); }
.pk-recordchip > .pk-orgmark { width: 26px; height: 26px; }
.pk-card .pk-recordchip > .pk-orgmark, .pk-inset .pk-orgmark { background: var(--pk-card); }
.pk-avatar--xs { width: 24px; height: 24px; font-size: var(--pk-fs-micro); }

/* tabs as free pills: no track, the current tab filled as the theme fills a current item. Kurumsal keeps its underline and
   Portal its raised segment, which are those themes' tabs */
.pk-tabs--pills { gap: var(--pk-space-2); padding: 0; background: transparent; }
.pk-tabs--pills .pk-tabs__item { flex: none; color: var(--pk-text-2); }
.pk-tabs--pills .pk-tabs__item:hover:not([aria-selected='true']) { background: color-mix(in srgb, var(--pk-text) 6%, transparent); color: var(--pk-text); }
.pk-tabs--pills .pk-tabs__item[aria-selected='true'] { color: var(--pk-on-current); }

/* ways to do one thing, as cards in a sheet: an icon, the way and a badge ("En hızlı"), what it does, an arrow; the way to
   take first in the brand colour. Under the cards a "why" link and a line on who can see the file */
.pk-optsheet { display: grid; gap: var(--pk-space-8); }
.pk-optsheet__lead { display: grid; justify-items: start; gap: var(--pk-space-5); }
.pk-optsheet__title { margin: 0; font-size: var(--pk-fs-h2); font-weight: var(--pk-fw-title); line-height: var(--pk-lh-h2); letter-spacing: -0.025em; text-wrap: balance; }
.pk-optsheet__text { margin: 0; color: var(--pk-text-2); }
.pk-optsheet__why { display: inline-flex; align-items: center; justify-self: center; gap: var(--pk-space-3); color: var(--pk-accent-text); }
.pk-optsheet__why > .pk-icon { width: 16px; height: 16px; }
.pk-optsheet__privacy { display: flex; align-items: center; justify-content: center; gap: var(--pk-space-3); margin: 0; font-size: var(--pk-fs-meta); color: var(--pk-text-3); text-align: center; text-wrap: balance; }
.pk-optsheet__privacy > .pk-icon { flex: none; width: 14px; height: 14px; }
.pk-optcards { display: grid; gap: var(--pk-space-4); margin: 0; padding: 0; list-style: none; }
.pk-optcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-2) var(--pk-space-7); width: 100%; min-height: 76px;
  padding: var(--pk-space-7); border: 0; border-radius: var(--pk-r-tile); background: var(--pk-inset); color: var(--pk-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.pk-optcard:hover { background: var(--pk-inset-2); }
.pk-optcard__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--pk-r-field); background: var(--pk-card); color: var(--pk-text); }
.pk-optcard__icon > .pk-icon { width: 20px; height: 20px; }
.pk-optcard__body { display: grid; gap: var(--pk-space-1); min-width: 0; }
.pk-optcard__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2) var(--pk-space-4); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-snug); }
.pk-optcard__badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--pk-space-4); border-radius: var(--pk-r-tag); background: var(--pk-accent-soft); color: var(--pk-accent-text); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); }
.pk-optcard__desc { font-size: var(--pk-fs-meta); color: var(--pk-text-2); }
.pk-optcard > .pk-icon { color: var(--pk-text-3); }
.pk-optcard--featured { background: var(--pk-accent); color: var(--pk-accent-ink); color-scheme: light; }
.pk-optcard--featured:hover { background: color-mix(in oklch, var(--pk-accent) 88%, var(--pk-accent-ink)); }
.pk-optcard--featured :is(.pk-optcard__desc, > .pk-icon) { color: inherit; }
.pk-optcard--featured .pk-optcard__badge { background: var(--pk-card); color: var(--pk-text); }
.pk-optcard--featured { --pk-focus-outline: 2px solid var(--pk-accent-ink); }
/* the brand card keeps the block's light insides, so its ring is drawn inside it in the block's ink */
.pk-optcard--featured:focus-visible { outline-offset: calc(-1 * var(--pk-space-3)); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-optcard { background: var(--pk-card); box-shadow: var(--pk-ring-strong); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-optcard:hover { background: var(--pk-inset); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-optcard__icon { background: var(--pk-inset); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-optcard--featured { color: var(--pk-text); color-scheme: inherit; box-shadow: var(--pk-ring-chosen); --pk-focus-outline: inherit; }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-optcard--featured:focus-visible { outline-offset: var(--pk-focus-offset); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-optcard--featured .pk-optcard__desc { color: var(--pk-text-2); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-optcard--featured > .pk-icon { color: var(--pk-primary-edge); }
:where([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-optcard--featured .pk-optcard__badge { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
/* a segmented control across its box: its segments share the width (who a list shows) */
.pk-seg--fill { display: flex; justify-self: stretch; }
.pk-seg--fill > .pk-seg__item { flex: 1 1 0; min-width: 0; }
/* the record head leads a phone page: it keeps the phone head's room above it */
:is(.pk-main, .pk-screen__body) > .pk-recordhead:first-child { padding-top: var(--pk-space-8); }
/* the cards as a list of choices: shorter rows, the chosen one ringed with a check at its end; a card without an icon gives
   its body the room */
.pk-optcard:not(:has(> .pk-optcard__icon)) { grid-template-columns: minmax(0, 1fr) auto; }
.pk-optcard--row { min-height: var(--pk-h-btn-lg); padding: var(--pk-space-5) var(--pk-space-7); }
.pk-optcard:is([aria-checked='true'], [aria-pressed='true']) { box-shadow: var(--pk-ring-chosen); }
.pk-optcard__check { color: var(--pk-primary-edge); }
/* a refused document's tonal action stands on the card colour, as its soft one does, so its label keeps 4.5:1 on the danger tint */
.pk-doc--rejected .pk-btn--tonal { background: var(--pk-card); }
/* ---------- floating phone bars (0.10.0) ---------- */
/* Yenilikçi's phone tab bar is a dark pill that floats over the page: the current tab in the brand colour with its label,
   the others as icons (their labels stay for screen readers), and an optional main action in the middle (pk-tabbar__action),
   a light round button. Kurumsal, Teknik and Portal dock their bars and the brand themes keep their light bar; there the
   action is the theme's primary icon button among the tabs */
.pk-tabbar__action {
  display: grid; place-items: center; align-self: center; justify-self: center; flex: none; width: var(--pk-h-btn); height: var(--pk-h-btn);
  border-radius: var(--pk-r-control); background: var(--pk-primary); color: var(--pk-on-primary);
}
.pk-tabbar__action > .pk-icon { width: 22px; height: 22px; }
.pk-tabbar:not(:where([data-theme]:not([data-theme='modern'])) *) {
  --pk-tabbar-fill: light-dark(var(--pk-dark), color-mix(in srgb, var(--pk-dark), var(--pk-on-dark) 12%));
  --pk-focus-outline: 2px solid var(--pk-on-dark);
  justify-content: space-between; align-items: center; gap: var(--pk-space-1); width: min(440px, 100% - 24px); padding: var(--pk-space-3);
  background: var(--pk-tabbar-fill); color: var(--pk-on-dark);
}
@media (max-width: 1023px) {
  .pk-tabbar:not(:where([data-theme]:not([data-theme='modern'])) *) { display: flex; }
}
.pk-screen .pk-tabbar:not(:where([data-theme]:not([data-theme='modern'])) *) { display: flex; }
.pk-tabbar:not(:where([data-theme]:not([data-theme='modern'])) *) .pk-tabbar__item {
  display: inline-flex; flex: none; flex-direction: row; align-items: center; justify-content: center; gap: var(--pk-space-3); min-width: 46px; height: 50px; padding: 0 var(--pk-space-4);
  border-radius: var(--pk-r-control); color: var(--pk-on-dark-2); font-size: var(--pk-fs-label);
}
.pk-tabbar:not(:where([data-theme]:not([data-theme='modern'])) *) .pk-tabbar__item:hover { color: var(--pk-on-dark); }
.pk-tabbar:not(:where([data-theme]:not([data-theme='modern'])) *) .pk-tabbar__item:not([aria-current='page']) .pk-tabbar__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pk-tabbar:not(:where([data-theme]:not([data-theme='modern'])) *) .pk-tabbar__item[aria-current='page'] {
  flex: 0 1 auto; min-width: 0; padding: 0 var(--pk-space-8) 0 var(--pk-space-7); background: var(--pk-accent); color: var(--pk-accent-ink);
}
.pk-tabbar:not(:where([data-theme]:not([data-theme='modern'])) *) .pk-tabbar__badge { box-shadow: 0 0 0 2px var(--pk-tabbar-fill); }
.pk-tabbar:not(:where([data-theme]:not([data-theme='modern'])) *) .pk-tabbar__action { width: 50px; height: 50px; background: var(--pk-on-dark); color: var(--pk-on-bright); }
/* ---------- pipeline cards, profile hero and media strips (0.10.0) ---------- */
/* a case in a pipeline: its title (the link that covers the card) and who it concerns, the organisation's mark, a figure with
   its segmented meter and level, the reason it waits as a line with a dot in its tone, and two facts in cells */
.pk-pipecard { position: relative; display: grid; align-content: start; gap: var(--pk-space-6); }
.pk-pipecard__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title mark' 'sub mark'; align-items: start; gap: var(--pk-space-1) var(--pk-space-5); }
.pk-pipecard__head > .pk-orgmark { grid-area: mark; }
.pk-pipecard__title { grid-area: title; margin: 0; overflow-wrap: anywhere; font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); line-height: var(--pk-lh-snug); color: var(--pk-title-text); }
.pk-pipecard__title > a { color: inherit; text-decoration: none; }
.pk-pipecard__sub { grid-area: sub; margin: 0; font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
.pk-pipecard__reason { display: flex; align-items: baseline; gap: var(--pk-space-4); margin: 0; font-size: var(--pk-fs-small); }
.pk-pipecard__reason::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: var(--pk-r-pill); background: var(--pk-dot, var(--pk-text-3)); translate: 0 -1px; }
.pk-pipecard__reason[data-tone='danger'] { --pk-dot: var(--pk-danger); }
.pk-pipecard__reason[data-tone='warning'] { --pk-dot: var(--pk-warning); }
.pk-pipecard__reason[data-tone='success'] { --pk-dot: var(--pk-success); }
.pk-pipecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--pk-gap); margin: 0; padding: 0; list-style: none; }
.pk-pipecards > li { display: grid; }

/* a chip's icon in a small round well, in its category's hue (data-hue), before the label */
.pk-chip__well {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-left: calc(-1 * var(--pk-space-4)); border-radius: var(--pk-r-pill);
  background: var(--pk-hue-soft, var(--pk-inset)); color: var(--pk-hue-text, var(--pk-text));
}
.pk-chip > .pk-chip__well > .pk-icon { width: 14px; height: 14px; color: inherit; }
.pk-chip:is([aria-pressed='true'], [aria-current='page'], :has(> input:checked), .pk-chip--ink) .pk-chip__well:not([data-hue]) { background: color-mix(in srgb, currentColor 18%, transparent); color: inherit; }

/* a person's or a client's page head: the photo beside the name in large type, membership and id chips above it, a line of
   facts, quick actions; on a narrow box the photo goes on top. A more button sits at the top corner */
.pk-profilehero { container: pk-profilehero / inline-size; position: relative; }
.pk-profilehero__layout { display: grid; grid-template-columns: minmax(140px, 0.36fr) minmax(0, 1fr); align-items: stretch; gap: var(--pk-space-10); }
.pk-profilehero__photo { display: block; width: 100%; height: 100%; min-height: 208px; object-fit: cover; border-radius: var(--pk-r-panel); background: var(--pk-inset); }
.pk-profilehero__photo.pk-avatar { display: grid; place-items: center; height: auto; aspect-ratio: 1; font-size: var(--pk-fs-h2); }
.pk-profilehero__body { display: grid; align-content: start; gap: var(--pk-space-5); min-width: 0; padding-right: var(--pk-space-24); }
.pk-profilehero__chips { display: flex; flex-wrap: wrap; gap: var(--pk-space-3); margin: 0; padding: 0; list-style: none; }
.pk-profilehero__name { margin: 0; overflow-wrap: anywhere; font-size: var(--pk-fs-h1); font-weight: var(--pk-fw-book); line-height: var(--pk-lh-h1); letter-spacing: -0.035em; color: var(--pk-title-text); }
.pk-profilehero__meta { margin: 0; font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-profilehero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-4); margin-top: var(--pk-space-3); }
.pk-profilehero__more { position: absolute; top: var(--pk-pad); right: var(--pk-pad); }
.pk-card--accent .pk-profilehero__meta { color: inherit; }
:is([data-theme='corporate'], [data-theme='technical'], [data-theme='portal']) .pk-card--accent .pk-profilehero__meta { color: var(--pk-text-2); }
@container pk-profilehero (max-width: 559px) {
  .pk-profilehero__layout { grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-8); }
  .pk-profilehero__photo { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .pk-profilehero__photo.pk-avatar { justify-self: start; width: 88px; aspect-ratio: 1; font-size: var(--pk-fs-figure-lg); }
  .pk-profilehero__body { padding-right: 0; }
}

/* pictures with their figures: a strip of cards that snap as they scroll (a week's best creatives), each with its picture and
   a tag on it, a title and a sub line, the figure and its delta; in a grid the cards share the row. The strip draws no
   scrollbar: a trackpad, a swipe or the arrow keys move it, and the card cut at its edge shows that more follow */
.pk-mediastrip {
  display: flex; gap: var(--pk-space-5); margin: calc(-1 * var(--pk-focus-room)); padding: var(--pk-focus-room); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pk-focus-room); scrollbar-width: none; list-style: none;
}
.pk-mediastrip::-webkit-scrollbar { display: none; }
.pk-mediastrip > .pk-mediacard { flex: 0 0 clamp(148px, 23%, 220px); scroll-snap-align: start; }
.pk-mediastrip:focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
.pk-mediacard { position: relative; display: grid; align-content: start; gap: var(--pk-space-4); min-width: 0; color: inherit; text-decoration: none; }
.pk-mediacard__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--pk-r-tile); background: var(--pk-inset); }
.pk-mediacard__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-mediacard__tag {
  position: absolute; top: var(--pk-space-4); left: var(--pk-space-4); display: inline-flex; align-items: center; gap: var(--pk-space-2); max-width: calc(100% - 2 * var(--pk-space-4));
  height: 26px; padding: 0 var(--pk-space-4); border-radius: var(--pk-r-tag); background: color-mix(in srgb, var(--pk-on-bright) 66%, transparent); color: var(--pk-on-dark);
  font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); white-space: nowrap;
}
.pk-mediacard__tag > .pk-icon { flex: none; width: 13px; height: 13px; }
.pk-mediacard__title { overflow: hidden; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-strong); text-overflow: ellipsis; white-space: nowrap; }
.pk-mediacard__sub { font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-mediacard__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pk-space-1) var(--pk-space-4); }
.pk-mediacard__value { font-size: var(--pk-fs-figure-md); font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-tight); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pk-mediacard__figure > .pk-delta { font-size: var(--pk-fs-caption); }
.pk-card--ink .pk-mediacard__sub { color: var(--pk-on-dark-2); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-mediacard__sub { color: var(--pk-text-3); }
[data-theme='portal'] .pk-card--ink .pk-mediacard__sub { color: var(--pk-portal-on-deep-2); }

/* rows that each carry a small meter: an icon, a name with its sub line, a dot meter (pk-segmeter--dots) and a figure (how
   tired a creative is, how often it shows) */
.pk-meterlist { container: pk-meterlist / inline-size; display: grid; margin: 0; padding: 0; list-style: none; }
.pk-meterlist__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--pk-space-6); min-height: 52px; padding: var(--pk-space-4) 0; }
.pk-meterlist__row + .pk-meterlist__row { box-shadow: var(--pk-edge-top); }
.pk-meterlist__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--pk-r-pill); background: var(--pk-inset); color: var(--pk-text); }
.pk-meterlist__icon > .pk-icon { width: 16px; height: 16px; }
.pk-meterlist__body { display: grid; min-width: 0; }
.pk-meterlist__name { overflow: hidden; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-medium); text-overflow: ellipsis; white-space: nowrap; }
.pk-meterlist__sub { overflow: hidden; font-size: var(--pk-fs-caption); color: var(--pk-text-3); text-overflow: ellipsis; white-space: nowrap; }
.pk-meterlist__value { min-width: 4ch; font-family: var(--pk-font-figures); font-size: var(--pk-figures-size); font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-medium); text-align: right; }
.pk-card--ink .pk-meterlist__row + .pk-meterlist__row { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pk-on-dark) 14%, transparent); }
.pk-card--ink .pk-meterlist__icon { background: var(--pk-dark-inset); color: var(--pk-on-dark); }
.pk-card--ink .pk-meterlist__sub { color: var(--pk-on-dark-2); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-meterlist__row + .pk-meterlist__row { box-shadow: var(--pk-edge-top); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-meterlist__icon { background: var(--pk-inset); color: var(--pk-text); }
:is([data-theme='corporate'], [data-theme='technical']) .pk-card--ink .pk-meterlist__sub { color: var(--pk-text-3); }
[data-theme='portal'] .pk-card--ink .pk-meterlist__sub { color: var(--pk-portal-on-deep-2); }
@container pk-meterlist (max-width: 359px) {
  .pk-meterlist__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pk-meterlist__row > :nth-child(3) { grid-column: 2; justify-self: start; }
  .pk-meterlist__value { grid-row: 1; grid-column: 3; }
}
/* two pictures compared side by side (a pattern the assistant found), square at any width */
.pk-mediapair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-space-5); }
.pk-mediapair .pk-mediacard__media { aspect-ratio: 1; }
/* ---------- finding and reading: the command palette's dialog, prose blocks, tabs that overflow ---------- */
/* the command palette (pk-cmd) in a native modal dialog near the top of the window, over the scrim (CommandPalette) */
dialog.pk-palette {
  width: min(620px, calc(100vw - 2 * var(--pk-space-8))); max-width: none; max-height: none; margin: 12% auto auto; padding: 0; border: 0;
  background: transparent; color: var(--pk-text); overflow: visible;
}
dialog.pk-palette:not([open]) { display: none; }
dialog.pk-palette::backdrop { background: var(--pk-scrim); }
.pk-palette > .pk-cmd { width: 100%; }
.pk-cmd__list > [role='group'] + [role='group'] { margin-top: var(--pk-space-2); }

/* a heading's anchor link after its words (ProseBlocks; the heading is named by its words alone): shown on hover and on focus */
.pk-prose .pk-prose__anchor {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: var(--pk-space-3); vertical-align: middle;
  border-radius: var(--pk-r-xs); color: var(--pk-text-3); text-decoration: none; opacity: 0;
}
.pk-prose__anchor > .pk-icon { width: 16px; height: 16px; }
:is(h2, h3, h4):hover > .pk-prose__anchor, .pk-prose .pk-prose__anchor:focus-visible { opacity: 1; }
.pk-prose .pk-prose__anchor:hover { background: var(--pk-inset); color: var(--pk-text); }
/* ordered steps: each number in a small disc at the start of its step, on the step's first line */
.pk-prose .pk-prose__steps { padding-left: var(--pk-space-16); list-style: none; counter-reset: pk-prose-step; }
.pk-prose__steps > li { counter-increment: pk-prose-step; }
.pk-prose__steps > li::before {
  content: counter(pk-prose-step); display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: var(--pk-space-4);
  margin-left: calc(-1 * var(--pk-space-16)); border-radius: var(--pk-r-pill); background: var(--pk-inset); font-family: var(--pk-font-figures);
  font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; line-height: var(--pk-lh-none); color: var(--pk-text);
}

/* tabs that keep one row (Tabs overflow="menu"): the tabs that do not fit wait in the menu at the row's end, the first and
   the current one always stay. The tabs are a list of their own laid out in the row beside the menu button; while the row
   is measured it takes its full width and shows every tab at its own width */
:is(.pk-tabs--menu, .pk-seg--menu) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
:is(.pk-tabs--menu, .pk-seg--menu)::-webkit-scrollbar { display: none; }
.pk-tabs__list { display: contents; }
:is(.pk-tabs--menu, .pk-seg--menu) :is(.pk-tabs__item, .pk-seg__item) { flex: none; }
:is(.pk-tabs--menu, .pk-seg--menu) :is([data-overflow], .pk-tabs__more--idle) { display: none; }
.pk-tabs--measuring { width: 100%; }
.pk-tabs--measuring :is([data-overflow], .pk-tabs__more--idle) { display: inline-flex; }
.pk-tabs__more { gap: var(--pk-space-2); }
.pk-tabs__more > .pk-icon { width: 16px; height: 16px; }
/* in a row that can scroll, a ring stays inside its tab, in the tab's text colour */
:is(.pk-tabs--menu, .pk-seg--menu) :is(.pk-tabs__item, .pk-seg__item) { --pk-focus-outline: 2px solid currentColor; }
:is(.pk-tabs--menu, .pk-seg--menu) :is(.pk-tabs__item, .pk-seg__item):focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
@media (max-width: 1023px) {
  /* tabs that wrap onto more rows on a narrow screen (Tabs overflow="wrap") instead of swiping */
  :is(.pk-tabs--wrap, .pk-seg--wrap) { flex-wrap: wrap; overflow-x: visible; }
}
/* needs attention (AttentionList): what waits on someone, the most urgent first: a tinted icon well, what it is and why it
   matters, what is at stake (an amount with its caption, or a date) and the one action that settles it. In a narrow box the
   stake and the action move under the words. */
.pk-attention { container: pk-attention / inline-size; display: grid; margin: 0; padding: 0; list-style: none; }
.pk-attention__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pk-space-4) var(--pk-space-7); padding: var(--pk-space-7) 0; }
.pk-attention__item:first-child { padding-top: var(--pk-space-2); }
.pk-attention__item:last-child { padding-bottom: var(--pk-space-2); }
.pk-attention__item + .pk-attention__item { box-shadow: var(--pk-edge-top); }
.pk-attention__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pk-r-control); background: var(--pk-inset); color: var(--pk-text-2); }
.pk-attention__icon > .pk-icon { width: 18px; height: 18px; }
.pk-attention__item[data-tone='danger'] .pk-attention__icon { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
.pk-attention__item[data-tone='warning'] .pk-attention__icon { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
.pk-attention__item[data-tone='success'] .pk-attention__icon { background: var(--pk-success-soft); color: var(--pk-success-text); }
.pk-attention__item[data-tone='accent'] .pk-attention__icon { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
.pk-attention__item[data-tone='ai'] .pk-attention__icon { background: var(--pk-ai-soft); color: var(--pk-ai-text); }
.pk-attention__body { display: grid; gap: var(--pk-space-1); min-width: 0; }
.pk-attention__title { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); overflow-wrap: anywhere; }
.pk-attention__title > a { color: inherit; text-decoration: none; }
.pk-attention__title > a:hover { text-decoration: underline; }
.pk-attention__text { font-size: var(--pk-fs-small); color: var(--pk-text-2); }
.pk-attention__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--pk-space-6); }
.pk-attention__stake { display: grid; justify-items: end; text-align: right; white-space: nowrap; }
.pk-attention__amount { font-family: var(--pk-font-figures); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-strong); font-variant-numeric: tabular-nums; }
.pk-attention__caption { font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
@container pk-attention (width < 520px) {
  .pk-attention__item { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .pk-attention__end { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .pk-attention__stake { justify-items: start; text-align: left; }
}

/* a total in its parts (RatioStrip): one thin bar split by share, each part in its tone, with a legend that gives each part
   its figure (rows, or one wrapping line); a part's share is --pk-share, set by the script */
.pk-ratio { display: grid; gap: var(--pk-space-6); min-width: 0; }
.pk-ratio__bar { display: flex; gap: 3px; height: 8px; }
.pk-ratio__bar > i { flex: var(--pk-share, 1) 1 0; min-width: 3px; border-radius: var(--pk-r-pill); background: var(--pk-part); }
.pk-ratio__legend { display: grid; gap: var(--pk-space-3); margin: 0; padding: 0; list-style: none; }
.pk-ratio--inline .pk-ratio__legend { display: flex; flex-wrap: wrap; gap: var(--pk-space-3) var(--pk-space-8); }
.pk-ratio__item { display: flex; align-items: center; gap: var(--pk-space-4); min-width: 0; font-size: var(--pk-fs-small); }
.pk-ratio__item::before { content: ''; flex: none; width: 3px; height: 12px; border-radius: var(--pk-r-pill); background: var(--pk-part); }
.pk-ratio__label { min-width: 0; color: var(--pk-text-2); }
.pk-ratio__value { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--pk-fw-strong); white-space: nowrap; }
.pk-ratio--inline .pk-ratio__value { margin-left: 0; }

/* every item a mark (MarkStrip): one hairline per item (or per --per items) across the box, in its outcome's tone, the
   groups side by side; a day's invoices or a month's requests read at a glance, the legend counts each group */
.pk-marks { display: grid; gap: var(--pk-space-5); min-width: 0; }
.pk-marks__row { display: flex; align-items: stretch; justify-content: space-between; gap: 1px; height: 28px; overflow: hidden; }
.pk-marks__row > i { flex: 0 0 3px; border-radius: 1px; background: var(--pk-part); }
.pk-marks__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3) var(--pk-space-8); font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-marks__foot .pk-ratio__item { font-size: var(--pk-fs-caption); }
.pk-marks__note { margin-left: auto; color: var(--pk-text-3); }

/* the tone of a part, a mark or a grade */
:is(.pk-ratio__bar > i, .pk-ratio__item, .pk-marks__row > i, .pk-grades__grade, .pk-rangetrack__point, .pk-rangetrack__mark) { --pk-part: var(--pk-ink); }
:is(.pk-ratio__bar > i, .pk-ratio__item, .pk-marks__row > i, .pk-grades__grade, .pk-rangetrack__point, .pk-rangetrack__mark)[data-tone='accent'] { --pk-part: var(--pk-accent); }
:is(.pk-ratio__bar > i, .pk-ratio__item, .pk-marks__row > i, .pk-grades__grade, .pk-rangetrack__point, .pk-rangetrack__mark)[data-tone='success'] { --pk-part: var(--pk-success); }
:is(.pk-ratio__bar > i, .pk-ratio__item, .pk-marks__row > i, .pk-grades__grade, .pk-rangetrack__point, .pk-rangetrack__mark)[data-tone='warning'] { --pk-part: var(--pk-warning); }
:is(.pk-ratio__bar > i, .pk-ratio__item, .pk-marks__row > i, .pk-grades__grade, .pk-rangetrack__point, .pk-rangetrack__mark)[data-tone='danger'] { --pk-part: var(--pk-danger); }
:is(.pk-ratio__bar > i, .pk-ratio__item, .pk-marks__row > i, .pk-grades__grade, .pk-rangetrack__point, .pk-rangetrack__mark)[data-tone='ai'] { --pk-part: var(--pk-ai); }
:is(.pk-ratio__bar > i, .pk-ratio__item, .pk-marks__row > i, .pk-grades__grade, .pk-rangetrack__point, .pk-rangetrack__mark)[data-tone='muted'] { --pk-part: var(--pk-line-strong); }
.pk-ratio__bar > i[data-tone='hatch'] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pk-text) 16%, transparent) 0 1.5px, transparent 1.5px 6px), var(--pk-inset); }
.pk-ratio__item[data-tone='hatch'] { --pk-part: var(--pk-line-strong); }

/* a grade on its scale (GradeScale): every grade a chip, the current one filled in its tone, the one before ringed; the
   words under it say what moved */
.pk-grades { display: grid; gap: var(--pk-space-4); min-width: 0; }
.pk-grades__scale { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); margin: 0; padding: 0; list-style: none; }
.pk-grades__grade { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 var(--pk-space-3); border-radius: var(--pk-r-field); background: var(--pk-inset); color: var(--pk-text-3); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); }
.pk-grades__grade[aria-current='true'] { background: var(--pk-part); color: var(--pk-card); }
.pk-grades__grade[data-before] { box-shadow: inset 0 0 0 1.5px var(--pk-line-strong); color: var(--pk-text-2); }
.pk-grades__note { font-size: var(--pk-fs-caption); color: var(--pk-text-2); }

/* points on a range (RangeTrack): where a figure stood, where it was expected and where it landed, on one line between its
   bounds, the expected band shaded; each point's figure and note above the line. Positions are --pk-at, --pk-from and --pk-to
   in percent, set by the script. */
.pk-rangetrack { display: grid; gap: var(--pk-space-7); min-width: 0; }
.pk-rangetrack__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: var(--pk-space-6); margin: 0; padding: 0; list-style: none; }
.pk-rangetrack__point { display: grid; align-content: start; gap: var(--pk-space-1); min-width: 0; }
.pk-rangetrack__label { display: flex; align-items: center; gap: var(--pk-space-3); font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-rangetrack__label::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: var(--pk-r-pill); background: var(--pk-part); }
.pk-rangetrack__value { font-family: var(--pk-font-figures); font-size: var(--pk-fs-figure-sm); font-weight: var(--pk-fw-medium); font-variant-numeric: tabular-nums; }
.pk-rangetrack__note { font-size: var(--pk-fs-caption); color: var(--pk-text-3); }
.pk-rangetrack__line { position: relative; height: 6px; margin: 0 var(--pk-space-3); border-radius: var(--pk-r-pill); background: var(--pk-inset-2); }
.pk-rangetrack__band { position: absolute; top: 0; bottom: 0; left: calc(var(--pk-from) * 1%); width: calc((var(--pk-to) - var(--pk-from)) * 1%); border-radius: var(--pk-r-pill); background: var(--pk-accent-soft); box-shadow: inset 0 0 0 1px var(--pk-accent); }
.pk-rangetrack__mark { position: absolute; top: 50%; left: calc(var(--pk-at) * 1%); width: 12px; height: 12px; border-radius: var(--pk-r-pill); background: var(--pk-part); box-shadow: 0 0 0 2.5px var(--pk-card); transform: translate(-50%, -50%); }
.pk-rangetrack__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pk-space-4); font-size: var(--pk-fs-caption); color: var(--pk-text-3); }

/* a period's figures in one band (KpiBand): the figure that matters most, large, with its change; beside it the counts it is
   made of, over what shows where they come from (a mark strip). In a narrow box the counts move under the figure. */
.pk-kpiband { container: pk-kpiband / inline-size; display: grid; grid-template-columns: minmax(200px, 0.9fr) minmax(0, 2.4fr); gap: var(--pk-space-10); }
.pk-kpiband__lead { display: grid; align-content: start; gap: var(--pk-space-2); padding-right: var(--pk-space-10); box-shadow: inset -1px 0 0 var(--pk-line); }
.pk-kpiband__value { margin: var(--pk-space-2) 0; font-variant-numeric: tabular-nums; }
.pk-kpiband__note { font-size: var(--pk-fs-caption); color: var(--pk-text-2); }
.pk-kpiband__main { display: grid; align-content: start; gap: var(--pk-space-8); min-width: 0; }
.pk-kpiband__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--pk-space-6); margin: 0; }
.pk-kpiband__figure { display: grid; gap: var(--pk-space-1); min-width: 0; }
.pk-kpiband__figure > dt { order: 1; }
.pk-kpiband__figure > dd { order: 2; margin: 0; font-family: var(--pk-font-figures); font-size: var(--pk-fs-figure-sm); font-weight: var(--pk-fw-medium); font-variant-numeric: tabular-nums; }
.pk-kpiband__figure[data-tone='danger'] > dd { color: var(--pk-danger-text); }
.pk-kpiband__figure[data-tone='warning'] > dd { color: var(--pk-warning-text); }
.pk-kpiband__figure[data-tone='success'] > dd { color: var(--pk-success-text); }
.pk-kpiband__sub { margin-left: var(--pk-space-2); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-regular); color: var(--pk-text-3); }
@container pk-kpiband (width < 640px) {
  .pk-kpiband > * { grid-column: 1 / -1; }
  .pk-kpiband__lead { padding: 0 0 var(--pk-space-8); box-shadow: inset 0 -1px 0 var(--pk-line); }
}
/* the button under a folded list (AttentionList limit) */
.pk-attention__more { justify-self: start; align-self: start; margin-top: var(--pk-space-3); }
/* ---------- theme: corporate (Kurumsal) ---------- */
/* software a company gives its staff: brand-colour actions, a docked white menu, a header band, underline tabs,
   rectangles, hairline-framed white cards on a cool canvas, semibold report type */
[data-theme='corporate'] {
  --pk-canvas: light-dark(#f4f6f8, #0d1117);
  --pk-card: light-dark(#ffffff, #161b22);
  --pk-inset: light-dark(#f5f7fa, #1e252e);
  --pk-inset-2: light-dark(#e8ecf1, #27303b);
  --pk-line: light-dark(#e3e7ed, #232a34);
  --pk-line-strong: light-dark(#cdd4de, #38424f);
  --pk-line-control: light-dark(#7b889b, #6e7986);
  --pk-text: light-dark(#0f172a, #eef2f7);
  --pk-text-2: light-dark(#475362, #a8b2bf);
  --pk-text-3: light-dark(#5d697a, #8f99a6);
  --pk-ink: light-dark(#0f172a, #eef2f7);
  --pk-on-ink: light-dark(#ffffff, #0f172a);
  --pk-dark: light-dark(#0f172a, #232a34);
  --pk-accent: #2d6fca;

  --pk-rs: 0.3; --pk-r-control: 6px; --pk-r-tag: 4px;
  --pk-ds: 0.8; --pk-hero-k: 1; --pk-app-gap: 0px;
  --pk-size-btn: 36px; --pk-size-btn-lg: 40px; --pk-size-btn-sm: 30px; --pk-size-nav: 36px; --pk-size-chip: 32px;
  --pk-fs-body: 14px; --pk-fs-h1: 26px; --pk-fs-h2: 20px; --pk-fs-h3: 17px; --pk-fs-h4: 15px;
  --pk-fs-hero: 48px; --pk-fs-hero-md: 38px; --pk-fs-hero-sm: 30px;
  --pk-font-figures: var(--pk-font); --pk-figures-size: 1em;
}
/* declared again on brand-colour scopes inside the theme, so they recalculate with their own colour */
[data-theme='corporate'], [data-theme='corporate'] [data-accent] {
  /* the fields are outlined at 3:1: no foot line */
  --pk-field-foot: none;
  --pk-primary: var(--pk-accent);
  --pk-on-primary: var(--pk-accent-ink);
  /* the raw brand colour can be too pale for a line; its text shade is not */
  --pk-primary-edge: var(--pk-accent-text);
  /* an edge for a fill in the brand colour that has no other (a switch that is on): none while the colour stands 3:1 against the
     card, the canvas, the inset and its tint (luminance up to 0.255 in light mode, from 0.156 in dark mode), else its text shade.
     The mix is the brand colour, opaque, or the text shade nearly transparent; the edge takes the mix's colour at the opposite
     opacity */
  --pk-accent-edge: light-dark(rgb(from color-mix(in srgb, color(from var(--pk-accent) xyz-d65 x y z / calc(1 - clamp(0, (y - 0.255) * 100000, 1))) 99.99%, var(--pk-accent-on-light)) r g b / calc(1 - alpha)),
    rgb(from color-mix(in srgb, color(from var(--pk-accent) xyz-d65 x y z / calc(1 - clamp(0, (0.156 - y) * 100000, 1))) 99.99%, var(--pk-accent-on-dark)) r g b / calc(1 - alpha)));
  --pk-current: var(--pk-accent-soft);
  --pk-on-current: var(--pk-accent-text);
  --pk-current-count: var(--pk-accent-figure);
  --pk-mark: var(--pk-accent);
  --pk-mark-ink: var(--pk-accent-ink);
  --pk-r-field: var(--pk-r-control);
  --pk-gap: 16px;
  --pk-pad: 20px;
}

/* type: semibold titles at working sizes, figures in tabular Inter */
[data-theme='corporate'] :is(.pk-h1, .pk-h2) { font-weight: var(--pk-fw-bold); letter-spacing: -0.015em; }
[data-theme='corporate'] .pk-h3 { font-weight: 620; letter-spacing: -0.01em; }
[data-theme='corporate'] .pk-h4 { font-weight: var(--pk-fw-strong); letter-spacing: -0.005em; }
[data-theme='corporate'] :is(.pk-hero, .pk-donut__value, .pk-funnel__value) { font-weight: var(--pk-fw-strong); letter-spacing: -0.025em; }
[data-theme='corporate'] .pk-stat__value { font-size: var(--pk-fs-figure-lg); font-weight: 620; letter-spacing: -0.015em; }

/* menu: brand logo square, quiet items, the current one in the brand tint; no promo card. Its sizes hold for every menu at
   every width and are written with :where(), so the rail (18-responsive) overrides what it changes */
:where([data-theme='corporate']) .pk-side { padding-top: var(--pk-space-8); }
:where([data-theme='corporate']) .pk-brand { padding: var(--pk-space-2) var(--pk-space-3) var(--pk-space-7); }
:where([data-theme='corporate']) .pk-logo { width: 32px; height: 32px; font-size: var(--pk-fs-item); }
:where([data-theme='corporate']) .pk-brand__name { font-size: var(--pk-fs-lead); font-weight: var(--pk-fw-bold); letter-spacing: -0.01em; }
:where([data-theme='corporate']) .pk-nav__label { padding: var(--pk-space-8) var(--pk-space-6) var(--pk-space-3); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-strong); }
:where([data-theme='corporate']) .pk-nav__item { gap: 11px; padding: 0 var(--pk-space-6); font-size: var(--pk-fs-small); }
:where([data-theme='corporate']) .pk-me { padding: var(--pk-space-6) var(--pk-space-3) var(--pk-space-2); border-radius: 0; background: transparent; box-shadow: var(--pk-edge-top); }
[data-theme='corporate'] .pk-logo { border-radius: var(--pk-r-control); }
[data-theme='corporate'] .pk-nav__item { font-weight: var(--pk-fw-medium); }
[data-theme='corporate'] :is(.pk-nav__item, .pk-subnav__item):not([aria-current]) { color: var(--pk-text-2); }
[data-theme='corporate'] .pk-nav__item .pk-icon { width: 18px; height: 18px; }
[data-theme='corporate'] .pk-side .pk-promo { display: none; }
/* a selection drawn only by a tint also carries weight; a chosen date, day or slot also carries the ring of a chosen
   choice card, so it outranks today's ink ring with any brand colour */
[data-theme='corporate'] :is(.pk-nav__item[aria-current='page'], .pk-subnav__item[aria-current='true'], .pk-topnav a[aria-current='page'],
  .pk-tabbar__item[aria-current='page'], .pk-pager__page[aria-current='page'], .pk-chip[aria-pressed='true'], .pk-chip[aria-current='page'], .pk-chip:has(> input:checked),
  .pk-datepick__day:is([aria-pressed='true'], [data-range='start'], [data-range='end'], [data-range='single']), .pk-day[aria-pressed='true'],
  .pk-slot[aria-pressed='true']) { font-weight: var(--pk-fw-strong); }
[data-theme='corporate'] :is(.pk-datepick__day[aria-pressed='true'], .pk-day[aria-pressed='true'], .pk-slot[aria-pressed='true']),
[data-theme='corporate'] .pk-datepick__grid--range .pk-datepick__day:is([data-range='start'], [data-range='end'], [data-range='single'])::before { box-shadow: var(--pk-ring-chosen); }

/* surfaces: white cards, strips and a menu shown on its own edged by a hairline */
:where([data-theme='corporate']) :is(.pk-card, .pk-subnav, .pk-side) { box-shadow: var(--pk-ring); }
/* the stat cells fill the strip edge to edge and would paint over an inset ring */
[data-theme='corporate'] .pk-stats { outline: 1px solid var(--pk-line); outline-offset: -1px; }

/* controls: outlined secondary parts, outlined white fields with a brand focus ring */
[data-theme='corporate'] .pk-btn { font-size: var(--pk-fs-small); }
[data-theme='corporate'] .pk-btn--primary:hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { background: color-mix(in oklch, var(--pk-primary), black 14%); }
[data-theme='corporate'] .pk-btn--soft { background: var(--pk-inset-2); }
/* the brand primary is too light to be its own text colour on a tint */
[data-theme='corporate'] .pk-btn--tonal { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
[data-theme='corporate'] .pk-btn--tonal:hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { background: color-mix(in oklch, var(--pk-accent-soft), var(--pk-accent) 12%); }
[data-theme='corporate'] .pk-icon-btn:not(.pk-icon-btn--ink, .pk-icon-btn--soft, .pk-icon-btn--on-dark, [aria-pressed='true'], .pk-control__action) { box-shadow: var(--pk-ring-strong); }
[data-theme='corporate'] :is(.pk-search, .pk-pop__search) { background: var(--pk-card); box-shadow: var(--pk-ring-control); }
:where([data-theme='corporate']) :is(.pk-input, .pk-combo, .pk-tagsinput) { background: var(--pk-card); border-color: var(--pk-line-control); }
/* hover, focus and error repeat the base order so that focus and error still win over hover */
:where([data-theme='corporate']) :is(.pk-input, .pk-combo):hover { border-color: var(--pk-text-3); }
:where([data-theme='corporate']) :is(.pk-input:focus, .pk-combo[aria-expanded='true'], .pk-tagsinput:focus-within) { border-color: var(--pk-primary-edge); box-shadow: var(--pk-focus-halo); }
:where([data-theme='corporate']) .pk-field--error .pk-input { border-color: var(--pk-danger-edge); }
[data-theme='corporate'] .pk-checkbox { border-radius: 4px; }
[data-theme='corporate'] .pk-choice { background: var(--pk-card); box-shadow: var(--pk-ring-control); }
/* a count on the current fill or inside a current item is a figure: current-count, the brand's text shade or, for a brand near
   a status hue, the title colour (colour rule 6) */
[data-theme='corporate'] :is(.pk-filterbtn__count, .pk-product__count, .pk-tree__item[aria-current='page'] .pk-tree__count, .pk-workboard__card[aria-pressed='true'] .pk-workboard__count) { color: var(--pk-current-count); }
/* a switch that is on keeps the brand fill; a brand too pale (or, in dark mode, too deep) to stand out from the card is edged in its
   text shade, as a checked box is */
[data-theme='corporate'] .pk-toggle[aria-checked='true'] { box-shadow: inset 0 0 0 1.5px var(--pk-accent-edge); }
/* on the brand tint (a changed cell, a selected row) a switch that is on draws its track in the primary edge in dark mode, where
   the tint stands too close to the brand fill */
[data-theme='corporate'] :is(.pk-matrix__cell[data-changed], .pk-table tr[aria-selected='true'], .pk-file[aria-selected='true']) .pk-toggle[aria-checked='true'] {
  background: light-dark(var(--pk-primary), var(--pk-primary-edge)); box-shadow: inset 0 0 0 1.5px light-dark(var(--pk-accent-edge), transparent);
}
[data-theme='corporate'] :is(.pk-matrix__cell[data-changed], .pk-table tr[aria-selected='true'], .pk-file[aria-selected='true']) .pk-toggle[aria-checked='true']::after { background: light-dark(var(--pk-on-primary), var(--pk-on-bright)); }
[data-theme='corporate'] .pk-choice:has(:checked) { background: var(--pk-accent-soft); box-shadow: var(--pk-ring-chosen); }

/* page tabs: an underline on a hairline instead of a pill group */
[data-theme='corporate'] .pk-tabs { justify-self: stretch; gap: var(--pk-space-2); padding: 0; border-radius: 0; background: transparent; box-shadow: var(--pk-edge-bottom); }
/* the hairline runs on under the row's other parts; starting from the tabs' own width, the strip takes a line of its own
   before it would shrink into a scroller */
[data-theme='corporate'] .pk-row:has(> .pk-tabs) > .pk-tabs { flex: 1 1 auto; }
[data-theme='corporate'] .pk-tabs__item { height: max(40px, var(--pk-tap)); padding: 0 var(--pk-space-6); border-radius: 0; font-size: var(--pk-fs-small); font-weight: var(--pk-fw-medium); color: var(--pk-text-2); }
[data-theme='corporate'] .pk-tabs__item[aria-selected='true'] { background: transparent; color: var(--pk-on-current); font-weight: var(--pk-fw-strong); box-shadow: inset 0 -2px 0 var(--pk-on-current); }
[data-theme='corporate'] .pk-tabs__count { padding: 1px var(--pk-space-3); border-radius: var(--pk-r-tag); background: var(--pk-inset-2); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-strong); color: var(--pk-text-2); }
[data-theme='corporate'] .pk-tabs__item[aria-selected='true'] .pk-tabs__count { background: var(--pk-current); }
/* view switch: a raised white segment on a grey track */
[data-theme='corporate'] .pk-seg { background: var(--pk-inset-2); }
[data-theme='corporate'] :is(.pk-seg__item[aria-pressed='true'], .pk-seg__item[aria-selected='true']) { background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-ring-out-strong), var(--pk-raise-shadow); }
/* filter chips: outlined, the chosen one and an applied filter tinted */
[data-theme='corporate'] .pk-chip:not(.pk-chip--accent, .pk-chip--ink, :has(> input:disabled)) { background: var(--pk-card); box-shadow: var(--pk-ring-strong); }
[data-theme='corporate'] :is(.pk-chip[aria-pressed='true'], .pk-chip[aria-current='page'], .pk-chip:has(> input:checked), .pk-chip--ink, .pk-tag:not(.pk-tag--soft)) { background: var(--pk-current); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-accent) 45%, transparent); }

/* tables: no filled header pill, a hairline under the header */
[data-theme='corporate'] .pk-table { font-size: var(--pk-fs-small); }
[data-theme='corporate'] .pk-table thead th { border-radius: 0; background: transparent; box-shadow: var(--pk-edge-bottom-strong); font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-strong); }

/* status: soft lozenges */
[data-theme='corporate'] .pk-pill { height: 24px; padding: 0 var(--pk-space-4); font-size: var(--pk-fs-fine); }
[data-theme='corporate'] .pk-pill--lg { height: 28px; padding: 0 var(--pk-space-5); font-size: var(--pk-fs-caption); }
[data-theme='corporate'] .pk-pill--warning { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
[data-theme='corporate'] .pk-pill--success { background: var(--pk-success-soft); color: var(--pk-success-text); }
[data-theme='corporate'] .pk-pill--danger { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
[data-theme='corporate'] .pk-pill--accent { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
[data-theme='corporate'] .pk-pill--warning.pk-pill--dot::before { background: var(--pk-warning); }

/* shell (rail and full menu): the menu is docked to the window edge with a hairline (--pk-app-gap is 0) and the page header is
   a white band that runs to the window edge even where the content is capped. The content keeps the 48px of gutters every
   theme has. The shell's menu only shows from 1024px */
[data-theme='corporate'] .pk-app > .pk-side { z-index: 1; border-radius: 0; box-shadow: var(--pk-edge-right); }
@media (min-width: 1024px) {
  [data-theme='corporate'] .pk-app { overflow-x: clip; }
  :where([data-theme='corporate']) .pk-main { --pk-main-pad: var(--pk-space-12); padding: 0 var(--pk-space-12) var(--pk-space-12); }
  [data-theme='corporate'] .pk-main > .pk-header { position: relative; margin: 0 calc(-1 * var(--pk-space-12)); padding: var(--pk-space-9) var(--pk-space-12); }
  [data-theme='corporate'] .pk-main > .pk-header::before { content: ''; position: absolute; z-index: -1; inset: 0 -100vmax; background: var(--pk-card); box-shadow: var(--pk-edge-bottom); }
  /* a page without that band (a profile) starts with its breadcrumb where the band's would be, clear of the window's edge for
     its links' focus rings */
  [data-theme='corporate'] .pk-main > .pk-crumbs { padding-top: var(--pk-space-9); }
  [data-theme='corporate'] :is(.pk-checkbox, .pk-radio) { width: 18px; height: 18px; }
  [data-theme='corporate'] .pk-toggle { width: 40px; height: 22px; }
  [data-theme='corporate'] .pk-toggle::after { width: 16px; height: 16px; }
  [data-theme='corporate'] .pk-toggle[aria-checked='true']::after { left: 21px; }
}
/* phone parts: the head is a white band, the tab bar and action bar are docked to the bottom edge, their contents centred in
   the width the floating bars have (560 and 640px). Styled at every width like the phone parts themselves, so previews show
   them too */
[data-theme='corporate'] .pk-phone-head { margin: 0 calc(-1 * var(--pk-space-8)); padding: var(--pk-space-6) var(--pk-space-8); background: var(--pk-card); box-shadow: var(--pk-edge-bottom); }
[data-theme='corporate'] :is(.pk-tabbar, .pk-actionbar) { bottom: 0; width: auto; margin: 0; border-radius: 0; box-shadow: var(--pk-edge-top); }
[data-theme='corporate'] .pk-tabbar { padding: var(--pk-space-3) max(var(--pk-space-4), (100% - 560px) / 2) calc(var(--pk-space-3) + env(safe-area-inset-bottom, 0px)); }
[data-theme='corporate'] .pk-actionbar { padding: var(--pk-space-5) max(var(--pk-space-7), (100% - 640px) / 2) calc(var(--pk-space-5) + env(safe-area-inset-bottom, 0px)); }
[data-theme='corporate'] .pk-tabbar__item { border-radius: var(--pk-r-control); }
/* phone type: smaller than the desktop scale, never larger */
@media (max-width: 599px) {
  [data-theme='corporate'] { --pk-fs-h1: 24px; --pk-fs-hero: 40px; --pk-fs-hero-md: 32px; --pk-fs-hero-sm: 28px; }
}
/* ---------- theme: technical (Teknik) ---------- */
/* the control room: screens that stay open all day (stock, till, a fleet of devices). Dark unless a page asks for light, a
   menu docked to the window edge, panels tiled without gaps and parted by hairlines, square corners, mono figures.
   Everything is grey but what is current (the menu item, now, this period), which takes the brand colour, and the status
   colours, so a problem is the first thing that shows */
[data-theme='technical'] {
  --pk-canvas: light-dark(#e9ecf0, #07090c);
  --pk-card: light-dark(#ffffff, #0f1217);
  --pk-inset: light-dark(#f1f3f6, #161a21);
  --pk-inset-2: light-dark(#e4e8ed, #1e232c);
  --pk-line: light-dark(#e1e5ea, #1c2129);
  --pk-line-strong: light-dark(#cfd5dd, #272d37);
  --pk-line-control: light-dark(#7d8592, #6f7987);
  --pk-text: light-dark(#0b0e13, #e4e8ee);
  --pk-text-2: light-dark(#4a515c, #a2aab6);
  --pk-text-3: light-dark(#5f6774, #8c95a3);
  --pk-ink: light-dark(#0b0e13, #e4e8ee);
  --pk-on-ink: light-dark(#ffffff, #0b0e13);
  --pk-dark: light-dark(#0b0e13, #161a21);
  --pk-accent: #c8f031;

  --pk-rs: 0; --pk-r-control: 3px; --pk-r-tag: 2px;
  --pk-ds: 0.7; --pk-hero-k: 1; --pk-app-gap: 0px;
  --pk-size-btn: 32px; --pk-size-btn-lg: 36px; --pk-size-btn-sm: 26px; --pk-size-nav: 34px; --pk-size-chip: 30px;
  --pk-fs-body: 13px; --pk-fs-h1: 22px; --pk-fs-h2: 17px; --pk-fs-h3: 14.5px; --pk-fs-h4: 13.5px;
  --pk-fs-hero: 64px; --pk-fs-hero-md: 50px; --pk-fs-hero-sm: 36px;
  --pk-font-figures: var(--pk-mono); --pk-figures-size: 0.95em;
}
/* opens dark: light only when the page or the viewer asks for it */
[data-theme='technical']:not([data-mode]), :root:has(> body[data-theme='technical']:not([data-mode])) { color-scheme: dark; }
/* declared again on brand-colour scopes inside the theme, so they recalculate with their own colour */
[data-theme='technical'], [data-theme='technical'] [data-accent] {
  /* a selected row, a note or a highlight is grey with a trace of the brand colour: a dark tint of a bright colour is mud */
  --pk-accent-soft: color-mix(in oklab, var(--pk-inset-2), var(--pk-accent) 7%);
  --pk-current: var(--pk-accent);
  --pk-on-current: var(--pk-accent-ink);
  --pk-current-count: var(--pk-accent-ink);
  --pk-mark: var(--pk-accent);
  --pk-mark-ink: var(--pk-accent-ink);
  --pk-gap: 12px;
  --pk-pad: 16px;
}

/* type: small semibold panel titles, figures in mono */
[data-theme='technical'] :is(.pk-h1, .pk-h2) { font-weight: var(--pk-fw-strong); letter-spacing: -0.015em; }
[data-theme='technical'] :is(.pk-h3, .pk-h4) { font-weight: var(--pk-fw-strong); letter-spacing: 0; }
[data-theme='technical'] :is(.pk-hero, .pk-stat__value) { font-family: var(--pk-mono); font-weight: var(--pk-fw-medium); letter-spacing: -0.04em; }
/* a sentence set large (a sign-in panel's line) stays in the text face; only figures are mono */
[data-theme='technical'] .pk-auth__panel .pk-hero { font-family: var(--pk-font); font-weight: var(--pk-fw-strong); letter-spacing: -0.03em; }
[data-theme='technical'] .pk-card__count { font-family: var(--pk-mono); }
[data-theme='technical'] .pk-ticks i { border-radius: 1px; }
[data-theme='technical'] :is(.pk-logo, .pk-promo__icon) { border-radius: var(--pk-r-control); }
/* a selection drawn only by a fill also carries weight */
[data-theme='technical'] :is(.pk-nav__item[aria-current='page'], .pk-subnav__item[aria-current='true'], .pk-topnav a[aria-current='page'],
  .pk-tabbar__item[aria-current='page'], .pk-tabs__item[aria-selected='true'], .pk-seg__item[aria-pressed='true'], .pk-seg__item[aria-selected='true'],
  .pk-pager__page[aria-current='page'], .pk-chip[aria-pressed='true'], .pk-chip[aria-current='page'], .pk-chip:has(> input:checked),
  .pk-datepick__day:is([aria-pressed='true'], [data-range='start'], [data-range='end'], [data-range='single']), .pk-day[aria-pressed='true'],
  .pk-slot[aria-pressed='true']) { font-weight: var(--pk-fw-strong); }

/* panels: every card has a hairline drawn just outside its box, so two panels 1px apart share one line. A grid of panels
   (cards, photos, columns of cards) closes up to that 1px and stretches its panels to the row, and grids of panels that follow
   each other join into one block. Other parts drawn in the card colour take the hairline inside */
:where([data-theme='technical']) :is(.pk-card, .pk-cover) { box-shadow: var(--pk-ring-out-strong); }
:where([data-theme='technical']) .pk-side { box-shadow: var(--pk-ring-strong); }
:where([data-theme='technical']) .pk-grid:not(:has(> :not(.pk-card, .pk-cover, .pk-group, .pk-stack), > :is(.pk-group, .pk-stack):not(.pk-card) > :not(.pk-card))) {
  gap: 1px; align-items: stretch;
}
:where([data-theme='technical']) .pk-grid > :is(.pk-group, .pk-stack):not(.pk-card, :has(> :not(.pk-card))) { gap: 1px; align-content: stretch; }
:where([data-theme='technical']) .pk-grid:not(:has(> :not(.pk-card, .pk-cover, .pk-group, .pk-stack), > :is(.pk-group, .pk-stack):not(.pk-card) > :not(.pk-card)))
  + .pk-grid:not(:has(> :not(.pk-card, .pk-cover, .pk-group, .pk-stack), > :is(.pk-group, .pk-stack):not(.pk-card) > :not(.pk-card))) { margin-top: calc(1px - var(--pk-gap)); }
/* a strip of figures joins the panels under it: its edge is drawn inside, so the panels' outer line falls on it */
:where([data-theme='technical']) .pk-stats + .pk-grid:not(:has(> :not(.pk-card, .pk-cover, .pk-group, .pk-stack), > :is(.pk-group, .pk-stack):not(.pk-card) > :not(.pk-card))) { margin-top: calc(-1 * var(--pk-gap)); }
:where([data-theme='technical']) :is(.pk-subnav, .pk-topnav, .pk-seg--on-canvas, .pk-tabs--on-canvas, .pk-pill--white, .pk-person,
  .pk-icon-btn:not(.pk-icon-btn--ink, .pk-icon-btn--soft, .pk-icon-btn--on-dark, [aria-pressed='true']),
  .pk-chip:not(.pk-chip--soft, .pk-chip--accent, .pk-chip--ink, [aria-pressed='true'], [aria-current='page'], :has(> input:checked))) { box-shadow: var(--pk-ring-strong); }
:where([data-theme='technical']) .pk-search { box-shadow: var(--pk-ring-strong); }
/* the stat cells fill the strip edge to edge and would paint over an inset ring */
[data-theme='technical'] .pk-stats { outline: 1px solid var(--pk-line-strong); outline-offset: -1px; }
/* a list of tiles reads as rows parted by hairlines, not as grey blocks */
[data-theme='technical'] .pk-card .pk-tiles:not(.pk-tiles--grid) { gap: 0; }
[data-theme='technical'] .pk-card .pk-tiles:not(.pk-tiles--grid) > .pk-tile { background: transparent; padding-inline: 0; box-shadow: var(--pk-edge-bottom); }
[data-theme='technical'] .pk-card .pk-tiles:not(.pk-tiles--grid) > .pk-tile:first-child { box-shadow: var(--pk-edge-top), var(--pk-edge-bottom); }
[data-theme='technical'] .pk-card .pk-tiles:not(.pk-tiles--grid) .pk-avatar--white { background: var(--pk-inset); }
/* the brand colour stays on what is current: actions are ink, a highlight chip or pill and a highlighted figure are grey like
   the rest, a chart's fill is a grey wash, and a small mark in the raw colour carries an ink edge, which shows it on white too */
[data-theme='technical'] .pk-btn--accent { background: var(--pk-primary); color: var(--pk-on-primary); }
[data-theme='technical'] :is(.pk-bar, .pk-banner, .pk-toast) .pk-btn--accent { background: var(--pk-on-dark); color: var(--pk-on-bright); }
[data-theme='technical'] :is(.pk-chip--accent, .pk-pill--accent) { background: var(--pk-inset-2); color: var(--pk-text); }
[data-theme='technical'] .pk-card--accent .pk-hero { color: var(--pk-text); }
[data-theme='technical'] .pk-spark .pk-spark__fill { fill: var(--pk-text); opacity: 0.07; }
[data-theme='technical'] :is(.pk-ticks i.now, .pk-segbar i.accent, .pk-heat-key .pk-heat__cell) { box-shadow: var(--pk-ring-ink); }
[data-theme='technical'] .pk-key.pk-seg--accent::before { box-shadow: var(--pk-ring-ink); }
/* the promo is an outlined panel of the plane, not a colour block */
[data-theme='technical'] .pk-promo { background: var(--pk-card); color: var(--pk-text); color-scheme: inherit; box-shadow: var(--pk-ring-strong); }
[data-theme='technical'] .pk-promo__link { background: var(--pk-inset); }

/* shell: the menu is docked to the window edge with a hairline */
@media (min-width: 1024px) {
  :where([data-theme='technical']) .pk-main { --pk-main-pad: var(--pk-space-10); padding: var(--pk-space-7) var(--pk-space-10) var(--pk-space-12); }
}
[data-theme='technical'] .pk-app > .pk-side { border-radius: 0; box-shadow: var(--pk-edge-right-strong); }
:where([data-theme='technical']) .pk-logo { width: 36px; height: 36px; font-size: var(--pk-fs-lead); }
:where([data-theme='technical']) .pk-me { background: transparent; }
[data-theme='technical'] :is(.pk-nav__item, .pk-subnav__item):not([aria-current]) { color: var(--pk-text-2); }
/* page header: a toolbar over the panels, parted from them by a hairline */
[data-theme='technical'] .pk-main > .pk-header { padding: 0 0 var(--pk-space-6); box-shadow: var(--pk-edge-bottom-strong); }
[data-theme='technical'] .pk-header__sub { margin-top: var(--pk-space-1); }
/* phone bars: docked to the bottom edge of the same plane, their contents centred in the width the floating bars have (560 and
   640px). Styled at every width like the phone parts themselves, so previews show them too */
[data-theme='technical'] :is(.pk-tabbar, .pk-actionbar) { bottom: 0; width: auto; margin: 0; border-radius: 0; box-shadow: var(--pk-edge-top-strong); }
[data-theme='technical'] .pk-tabbar { padding: var(--pk-space-3) max(var(--pk-space-4), (100% - 560px) / 2) calc(var(--pk-space-3) + env(safe-area-inset-bottom, 0px)); }
[data-theme='technical'] .pk-actionbar { padding: var(--pk-space-5) max(var(--pk-space-7), (100% - 640px) / 2) calc(var(--pk-space-5) + env(safe-area-inset-bottom, 0px)); }
[data-theme='technical'] .pk-tabbar__item { border-radius: var(--pk-r-control); }
/* phone type: smaller than the desktop scale, never larger */
@media (max-width: 599px) {
  [data-theme='technical'] { --pk-fs-h1: 22px; --pk-fs-hero: 52px; --pk-fs-hero-md: 42px; --pk-fs-hero-sm: 32px; }
}
/* the brand tint under a selected row or a folder taking a drop is darker than the inset for a deep brand colour: its faint text
   and control edges take a step up there, so they keep 4.5:1 and 3:1. The rings made of the edge are set again, as a token
   takes its value where it is set */
[data-theme='technical'] :is(.pk-table tr[aria-selected='true'], .pk-file[aria-selected='true'], .pk-folder[data-dragover]) {
  --pk-text-3: var(--pk-text-2); --pk-line-control: light-dark(#727986, #6f7987);
  --pk-ring-control: inset 0 0 0 1px var(--pk-line-control); --pk-ring-mark: inset 0 0 0 1.5px var(--pk-line-control);
}
/* a chosen row in a list (an inbox, a queue) is a grey block with a hairline ring: the brand colour stays on the menu, tabs and
   "now", so a list of chosen rows does not turn into a lime block */
[data-theme='technical'] .pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true']) { background: var(--pk-inset-2); color: var(--pk-text); box-shadow: var(--pk-ring-control); }
[data-theme='technical'] .pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true']) :is(.pk-inbox__preview, .pk-inbox__meta, .pk-list__meta, .pk-meta, .pk-channel) { color: var(--pk-text-2); }
[data-theme='technical'] .pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true']) .pk-inbox__time { color: var(--pk-text-3); }
[data-theme='technical'] .pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true'])[data-unread] .pk-inbox__name::before { background: var(--pk-accent); }
/* a pressed filter chip (several can be on at once) is grey with a ring, like a chosen row */
[data-theme='technical'] .pk-chip:is([aria-pressed='true'], [aria-current='page'], :has(> input:checked)) { background: var(--pk-inset-2); color: var(--pk-text); box-shadow: var(--pk-ring-control); }
[data-theme='technical'] .pk-chip:is([aria-pressed='true'], [aria-current='page'], :has(> input:checked)) .pk-chip__count { color: var(--pk-text-2); }
/* ---------- theme: portal (Portal) ---------- */
/* a staff panel that carries the product's brand: the menu sits on a deep shade of the brand colour, and the greys take a
   trace of its hue; white cards lifted by a soft shadow on a light canvas; 14px cards and 10px controls; semibold titles
   at working sizes and large medium-weight figures; the brand colour for the primary action and what is chosen */
[data-theme='portal'] {
  --pk-accent: #0f766e;

  --pk-rs: 0.5; --pk-r-control: 10px; --pk-r-tag: 6px;
  --pk-ds: 0.85; --pk-hero-k: 1; --pk-app-gap: 0px;
  --pk-size-btn: 38px; --pk-size-btn-lg: 42px; --pk-size-btn-sm: 32px; --pk-size-nav: 38px; --pk-size-chip: 34px;
  --pk-fs-body: 14px; --pk-fs-h1: 28px; --pk-fs-h2: 20px; --pk-fs-h3: 17px; --pk-fs-h4: 15px;
  --pk-fs-hero: 56px; --pk-fs-hero-md: 42px; --pk-fs-hero-sm: 34px;
  --pk-font-figures: var(--pk-font); --pk-figures-size: 1em;
  --pk-th-size: var(--pk-fs-caption); --pk-th-weight: var(--pk-fw-label);
}
/* worked out from the brand colour, so declared again on every brand-colour scope inside the theme */
[data-theme='portal'], [data-theme='portal'] [data-accent] {
  /* the fields are outlined at 3:1: no foot line */
  --pk-field-foot: none;
  /* the colour the theme's own shades come from: the title ink when the product sets one, else the brand colour */
  --pk-portal-source: var(--pk-title-ink, var(--pk-accent));
  /* the neutral family: greys with a trace of that colour's hue (none for a grey brand; yellows, limes and browns keep a quarter
     of it, they turn beige). Chroma stays under 0.02, so every contrast is that of a plain grey of the same lightness */
  --pk-portal-k: calc(1 - 0.75 * max(0, cos(calc((h - 95) * 0.8deg))));
  --pk-portal-canvas: light-dark(oklch(from var(--pk-portal-source) 0.965 min(c, calc(0.006 * var(--pk-portal-k))) h), oklch(from var(--pk-portal-source) 0.16 min(c, calc(0.008 * var(--pk-portal-k))) h));
  --pk-portal-card: light-dark(#ffffff, oklch(from var(--pk-portal-source) 0.205 min(c, calc(0.009 * var(--pk-portal-k))) h));
  --pk-portal-inset: light-dark(oklch(from var(--pk-portal-source) 0.97 min(c, calc(0.005 * var(--pk-portal-k))) h), oklch(from var(--pk-portal-source) 0.245 min(c, calc(0.01 * var(--pk-portal-k))) h));
  --pk-portal-inset-2: light-dark(oklch(from var(--pk-portal-source) 0.937 min(c, calc(0.008 * var(--pk-portal-k))) h), oklch(from var(--pk-portal-source) 0.285 min(c, calc(0.011 * var(--pk-portal-k))) h));
  --pk-portal-line: light-dark(oklch(from var(--pk-portal-source) 0.925 min(c, calc(0.007 * var(--pk-portal-k))) h), oklch(from var(--pk-portal-source) 0.27 min(c, calc(0.01 * var(--pk-portal-k))) h));
  --pk-portal-line-strong: light-dark(oklch(from var(--pk-portal-source) 0.86 min(c, calc(0.01 * var(--pk-portal-k))) h), oklch(from var(--pk-portal-source) 0.345 min(c, calc(0.011 * var(--pk-portal-k))) h));
  --pk-portal-text: light-dark(oklch(from var(--pk-portal-source) 0.19 min(c, calc(0.012 * var(--pk-portal-k))) h), oklch(from var(--pk-portal-source) 0.955 min(c, calc(0.006 * var(--pk-portal-k))) h));
  --pk-portal-text-2: light-dark(oklch(from var(--pk-portal-source) 0.43 min(c, calc(0.018 * var(--pk-portal-k))) h), oklch(from var(--pk-portal-source) 0.79 min(c, calc(0.014 * var(--pk-portal-k))) h));
  --pk-portal-text-3: light-dark(oklch(from var(--pk-portal-source) 0.5 min(c, calc(0.018 * var(--pk-portal-k))) h), oklch(from var(--pk-portal-source) 0.71 min(c, calc(0.014 * var(--pk-portal-k))) h));
  --pk-canvas: var(--pk-portal-canvas);
  --pk-card: var(--pk-portal-card);
  --pk-inset: var(--pk-portal-inset);
  --pk-inset-2: var(--pk-portal-inset-2);
  --pk-line: var(--pk-portal-line);
  --pk-line-strong: var(--pk-portal-line-strong);
  --pk-line-control: light-dark(oklch(from var(--pk-portal-source) 0.6 min(c, calc(0.016 * var(--pk-portal-k))) h), oklch(from var(--pk-portal-source) 0.59 min(c, calc(0.014 * var(--pk-portal-k))) h));
  --pk-text: var(--pk-portal-text);
  --pk-text-2: var(--pk-portal-text-2);
  --pk-text-3: var(--pk-portal-text-3);
  --pk-ink: var(--pk-portal-text);
  --pk-on-ink: light-dark(#ffffff, oklch(from var(--pk-portal-source) 0.19 min(c, calc(0.012 * var(--pk-portal-k))) h));
  /* the deep shade: the menu, the dark block, the phone head, bars and toasts. It is the title ink's when the product sets one
     (a navy beside an orange brand), else the brand colour's; oranges, yellows and limes keep little chroma there and read as
     warm charcoal, blues, violets, greens and teals stay deep tints */
  --pk-portal-deep-k: calc(1 - 0.9 * max(0, cos(calc((h - 75) * 1.15deg))));
  --pk-portal-deep: oklch(from var(--pk-portal-source) min(l, 0.29) min(c, calc(0.055 * var(--pk-portal-deep-k))) h);
  --pk-dark: light-dark(var(--pk-portal-deep), oklch(from var(--pk-portal-source) min(l, 0.25) min(c, calc(0.045 * var(--pk-portal-deep-k))) h));
  --pk-side-bg: var(--pk-dark);
  /* text on the deep shade: light shades of its own hue */
  --pk-portal-on-deep-2: oklch(from var(--pk-dark) 0.88 min(c, 0.02) h);
  --pk-portal-on-deep-3: oklch(from var(--pk-dark) 0.8 min(c, 0.025) h);

  --pk-primary: var(--pk-accent);
  --pk-on-primary: var(--pk-accent-ink);
  --pk-primary-edge: var(--pk-accent-text);
  --pk-mark: var(--pk-accent);
  --pk-mark-ink: var(--pk-accent-ink);
  --pk-current: var(--pk-accent);
  --pk-on-current: var(--pk-accent-ink);
  --pk-current-count: var(--pk-accent-ink);
  --pk-r-field: var(--pk-r-control);
  --pk-gap: 16px;
  --pk-pad: 22px;
  /* a card is lifted by a soft shadow with a faint edge; in dark mode the edge is a hairline and the shadow goes */
  --pk-card-shadow: inset 0 0 0 1px light-dark(rgb(16 24 32 / 0.05), var(--pk-line)), 0 1px 2px light-dark(rgb(16 24 32 / 0.05), transparent), 0 4px 14px -6px light-dark(rgb(16 24 32 / 0.1), transparent);
}

/* type: semibold titles, large medium-weight figures, tabular Inter */
[data-theme='portal'] :is(.pk-h1, .pk-h2) { font-weight: var(--pk-fw-strong); letter-spacing: -0.02em; color: var(--pk-title-text); }
[data-theme='portal'] .pk-h3 { font-weight: var(--pk-fw-strong); letter-spacing: -0.012em; }
[data-theme='portal'] .pk-h4 { font-weight: var(--pk-fw-strong); letter-spacing: -0.005em; }
[data-theme='portal'] :is(.pk-hero, .pk-donut__value, .pk-funnel__value) { font-weight: var(--pk-fw-medium); letter-spacing: -0.035em; }
[data-theme='portal'] .pk-stat__value { font-size: var(--pk-fs-figure-xl); font-weight: var(--pk-fw-strong); letter-spacing: -0.02em; color: var(--pk-title-text); }
/* parts that stay dark keep their own ink on their titles */
[data-theme='portal'] :is(.pk-banner, .pk-bar, .pk-toast, .pk-tip, .pk-sysbar, .pk-scan, .pk-viewer, .pk-player__screen, .pk-zones, .pk-phone-head, .pk-side) { --pk-title-text: currentColor; }

/* the menu: on the brand's deep shade, its greys white washed over that colour */
[data-theme='portal'] .pk-side {
  --pk-inset: rgb(255 255 255 / 0.07);
  --pk-inset-2: rgb(255 255 255 / 0.11);
  --pk-card: rgb(255 255 255 / 0.08);
  --pk-line: rgb(255 255 255 / 0.1);
  --pk-line-strong: rgb(255 255 255 / 0.16);
  --pk-text: var(--pk-on-dark);
  --pk-ink: var(--pk-on-dark);
  --pk-text-2: var(--pk-portal-on-deep-2);
  --pk-text-3: var(--pk-portal-on-deep-3);
  --pk-accent-text: var(--pk-accent-on-dark);
  --pk-primary-edge: var(--pk-accent-on-dark);
  /* a figure on the deep shade: the light brand shade, or the menu's own text near a status hue */
  --pk-accent-figure: rgb(from color-mix(in srgb, oklch(from var(--pk-accent-on-dark) l c h / calc(1 - var(--pk-near-status))) 99.99%, var(--pk-on-dark)) r g b / 1);
  /* Canlı's brand tint on the current item: the brand colour washed over the deep shade */
  --pk-accent-soft: color-mix(in srgb, var(--pk-accent) 34%, rgb(255 255 255 / 0.06));
  --pk-current: rgb(255 255 255 / 0.14);
  --pk-on-current: var(--pk-on-dark);
  --pk-current-count: var(--pk-on-dark);
  --pk-mark: var(--pk-on-dark);
  --pk-mark-ink: var(--pk-accent-on-light);
  --pk-focus-outline: 2px solid var(--pk-on-dark);
  color: var(--pk-text);
}
/* pop-ups opened from the menu (workspaces, the rail's groups) take the page's colours again; a group's list carries the popover
   attribute in the full menu too, so only an open one does */
[data-theme='portal'] .pk-side [popover]:popover-open {
  --pk-inset: var(--pk-portal-inset); --pk-inset-2: var(--pk-portal-inset-2); --pk-card: var(--pk-portal-card);
  --pk-line: var(--pk-portal-line); --pk-line-strong: var(--pk-portal-line-strong);
  --pk-text: var(--pk-portal-text); --pk-ink: var(--pk-portal-text); --pk-text-2: var(--pk-portal-text-2); --pk-text-3: var(--pk-portal-text-3);
  --pk-accent-text: light-dark(var(--pk-accent-on-light), var(--pk-accent-on-dark));
  --pk-primary-edge: var(--pk-accent-text);
  --pk-accent-soft: light-dark(oklch(from var(--pk-accent) 0.955 min(c, 0.045) h), oklch(from var(--pk-accent) 0.30 min(c, calc(0.045 - 0.033 * max(0, cos(calc((h - 95) * 0.8deg))))) h));
  --pk-current: var(--pk-accent); --pk-on-current: var(--pk-accent-ink); --pk-current-count: var(--pk-accent-ink);
  --pk-focus-outline: 2px solid var(--pk-primary-edge);
  color: var(--pk-text);
}
/* a category hue in the menu (a menu icon marked data-hue) takes its light shade, as on any dark surface */
[data-theme='portal'] .pk-side [data-hue]:not([popover]:popover-open *) { color-scheme: dark; }
:where([data-theme='portal']) .pk-side { padding-top: var(--pk-space-9); }
:where([data-theme='portal']) .pk-brand { padding: var(--pk-space-2) var(--pk-space-3) var(--pk-space-8); }
:where([data-theme='portal']) .pk-logo { width: 32px; height: 32px; font-size: var(--pk-fs-item); }
:where([data-theme='portal']) .pk-brand__name { font-size: var(--pk-fs-lead); font-weight: var(--pk-fw-strong); letter-spacing: -0.01em; }
:where([data-theme='portal']) .pk-nav__label { padding: var(--pk-space-8) var(--pk-space-6) var(--pk-space-3); font-size: var(--pk-fs-fine); font-weight: var(--pk-fw-medium); }
:where([data-theme='portal']) .pk-nav__item { gap: 11px; padding: 0 var(--pk-space-6); font-size: var(--pk-fs-small); }
:where([data-theme='portal']) .pk-me { padding: var(--pk-space-5); }
[data-theme='portal'] .pk-logo { border-radius: var(--pk-r-xs); }
[data-theme='portal'] .pk-nav__item { font-weight: var(--pk-fw-medium); }
[data-theme='portal'] :is(.pk-nav__item, .pk-subnav__item):not([aria-current]) { color: var(--pk-text-2); }
[data-theme='portal'] .pk-side .pk-nav__item:not([aria-current]) > .pk-icon { color: var(--pk-text-3); }
[data-theme='portal'] .pk-nav__item .pk-icon { width: 18px; height: 18px; }
[data-theme='portal'] .pk-side .pk-promo { display: none; }
/* a selection drawn by a fill also carries weight */
[data-theme='portal'] :is(.pk-nav__item[aria-current='page'], .pk-subnav__item[aria-current='true'], .pk-topnav a[aria-current='page'], .pk-tabbar__item[aria-current='page'],
  .pk-tabs__item[aria-selected='true'], .pk-seg__item[aria-pressed='true'], .pk-seg__item[aria-selected='true'], .pk-views__item[aria-current='true'], .pk-pager__page[aria-current='page'],
  .pk-chip[aria-pressed='true'], .pk-chip[aria-current='page'], .pk-chip:has(> input:checked),
  .pk-datepick__day:is([aria-pressed='true'], [data-range='start'], [data-range='end'], [data-range='single']), .pk-day[aria-pressed='true'], .pk-slot[aria-pressed='true']) { font-weight: var(--pk-fw-strong); }

/* surfaces: white cards lifted by a soft shadow (a hairline in dark mode) */
:where([data-theme='portal']) :is(.pk-card, .pk-subnav) { box-shadow: var(--pk-card-shadow); }
[data-theme='portal'] .pk-stats { box-shadow: var(--pk-card-shadow); }
/* the one coloured block: the dark block takes the menu's deep shade; its action is a light button */
[data-theme='portal'] .pk-card.pk-card--ink { background: var(--pk-dark); color: var(--pk-on-dark); --pk-focus-outline: 2px solid var(--pk-on-dark); --pk-title-text: currentColor; box-shadow: none; }
[data-theme='portal'] .pk-card.pk-card--ink .pk-inset { background: var(--pk-dark-inset); }
[data-theme='portal'] .pk-card.pk-card--ink :is(.pk-label, .pk-meta, .pk-muted, .pk-kv__key, .pk-unit) { color: var(--pk-portal-on-deep-2); }
[data-theme='portal'] .pk-card.pk-card--ink .pk-btn--on-dark { background: var(--pk-dark-inset); color: var(--pk-on-dark); }
[data-theme='portal'] .pk-card.pk-card--ink :is(.pk-btn--accent, .pk-btn--primary) { background: var(--pk-on-dark); color: var(--pk-portal-deep); }
[data-theme='portal'] .pk-card.pk-card--ink .pk-pill--white { background: var(--pk-dark-inset); color: var(--pk-on-dark); }
/* the accent block is a plain card (the joined group); its figure takes the title ink when the product sets one, so an orange
   brand beside a navy title ink does not colour a figure (rule 6) */
[data-theme='portal'] .pk-card.pk-card--accent .pk-hero { color: var(--pk-title-pair, var(--pk-accent-figure)); }
[data-theme='portal'] .pk-card.pk-card--ink .pk-logo { background: var(--pk-on-dark); color: var(--pk-accent-on-light); }

/* controls: brand-filled primary that darkens on hover, outlined white fields with a brand focus ring */
[data-theme='portal'] .pk-btn { font-size: var(--pk-fs-small); }
[data-theme='portal'] :is(.pk-btn--primary, .pk-icon-btn--ink):hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { background: color-mix(in oklch, var(--pk-primary), black 14%); }
[data-theme='portal'] .pk-btn--soft { background: var(--pk-inset-2); }
[data-theme='portal'] .pk-btn--tonal { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
[data-theme='portal'] .pk-btn--tonal:hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { background: color-mix(in oklch, var(--pk-accent-soft), var(--pk-accent) 12%); }
[data-theme='portal'] .pk-icon-btn:not(.pk-icon-btn--ink, .pk-icon-btn--soft, .pk-icon-btn--on-dark, [aria-pressed='true'], .pk-control__action) { box-shadow: var(--pk-ring-strong); }
[data-theme='portal'] :is(.pk-search, .pk-pop__search) { background: var(--pk-card); box-shadow: var(--pk-ring-control); }
:where([data-theme='portal']) :is(.pk-input, .pk-combo, .pk-tagsinput) { background: var(--pk-card); border-color: var(--pk-line-control); }
/* hover, focus and error repeat the base order so that focus and error still win over hover */
:where([data-theme='portal']) :is(.pk-input, .pk-combo):hover { border-color: var(--pk-text-3); }
:where([data-theme='portal']) :is(.pk-input:focus, .pk-combo[aria-expanded='true'], .pk-tagsinput:focus-within) { border-color: var(--pk-primary-edge); box-shadow: var(--pk-focus-halo); }
:where([data-theme='portal']) .pk-field--error .pk-input { border-color: var(--pk-danger-edge); }
[data-theme='portal'] .pk-checkbox { border-radius: 5px; }
/* a switch that is on is filled with the brand's text shade, so a pale brand (gold, lime, sand) still shows 3:1 against the card */
[data-theme='portal'] .pk-toggle[aria-checked='true'] { background: var(--pk-primary-edge); }
[data-theme='portal'] .pk-toggle[aria-checked='true']::after { background: light-dark(var(--pk-on-dark), var(--pk-on-bright)); }
[data-theme='portal'] .pk-choice { background: var(--pk-card); box-shadow: var(--pk-ring-control); }
[data-theme='portal'] .pk-choice:has(:checked) { background: var(--pk-accent-soft); box-shadow: var(--pk-ring-chosen); }

/* tabs and segments: a grey track, the current one raised in white */
[data-theme='portal'] :is(.pk-tabs, .pk-seg) { background: var(--pk-inset-2); }
[data-theme='portal'] :is(.pk-tabs__item[aria-selected='true'], .pk-seg__item[aria-pressed='true'], .pk-seg__item[aria-selected='true']) { background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-raise-shadow), var(--pk-ring-out); }
[data-theme='portal'] .pk-tabs__item { font-size: var(--pk-fs-small); font-weight: var(--pk-fw-medium); color: var(--pk-text-2); }
[data-theme='portal'] .pk-tabs__item[aria-selected='true'] .pk-tabs__count { color: var(--pk-accent-figure); }
/* the section menu and the phone tab bar mark where you are with the brand tint: beside the deep menu a second filled block
   would compete with it */
[data-theme='portal'] :is(.pk-subnav, .pk-tabbar) { --pk-current: var(--pk-accent-soft); --pk-on-current: var(--pk-accent-text); --pk-current-count: var(--pk-accent-figure); }
/* filter chips: outlined white, the chosen one filled with the brand colour */
[data-theme='portal'] .pk-chip:not(.pk-chip--accent, .pk-chip--ink, [aria-pressed='true'], [aria-current='page'], :has(> input:checked), :has(> input:disabled)) { background: var(--pk-card); box-shadow: var(--pk-ring-strong); }

/* a chosen row in a list (an inbox, a queue) is the brand tint, its secondary text kept quiet (27-messages): a column of filled
   rows would shout */
[data-theme='portal'] .pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true']) { background: var(--pk-accent-soft); color: var(--pk-text); }
[data-theme='portal'] .pk-panes__list :is([aria-current='true'], [aria-current='page'], [aria-selected='true'])[data-unread] .pk-inbox__name::before { background: var(--pk-accent-figure); }
/* a count badge in the deep menu or the phone's deep head (on the current menu item, on a bell): a white badge with deep figures;
   the kit's own rules draw it in the ink, which turns white here and hid the figure */
[data-theme='portal'] :is(.pk-side, .pk-phone-head) .pk-badge:not(.pk-badge--danger) { background: var(--pk-on-dark); color: var(--pk-portal-deep); }
[data-theme='portal'] .pk-side .pk-nav__item[aria-current='page'] > .pk-badge:not(.pk-badge--danger) { box-shadow: none; }
[data-theme='portal'] .pk-amount--lg { font-size: var(--pk-fs-figure-lg); font-weight: var(--pk-fw-strong); letter-spacing: -0.015em; }
[data-theme='portal'] .pk-prose :is(h2, h3) { font-weight: var(--pk-fw-strong); letter-spacing: -0.01em; color: var(--pk-title-text); }

/* tables: a quiet header over a hairline */
[data-theme='portal'] .pk-table { font-size: var(--pk-fs-small); }
[data-theme='portal'] .pk-table thead th { border-radius: 0; background: transparent; box-shadow: var(--pk-edge-bottom-strong); color: var(--pk-text-3); }

/* status: soft lozenges */
[data-theme='portal'] .pk-pill { height: 24px; padding: 0 var(--pk-space-4); font-size: var(--pk-fs-fine); }
[data-theme='portal'] .pk-pill--lg { height: 28px; padding: 0 var(--pk-space-5); font-size: var(--pk-fs-caption); }
[data-theme='portal'] .pk-pill--warning { background: var(--pk-warning-soft); color: var(--pk-warning-text); }
[data-theme='portal'] .pk-pill--success { background: var(--pk-success-soft); color: var(--pk-success-text); }
[data-theme='portal'] .pk-pill--danger { background: var(--pk-danger-soft); color: var(--pk-danger-text); }
[data-theme='portal'] .pk-pill--accent { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
[data-theme='portal'] .pk-pill--warning.pk-pill--dot::before { background: var(--pk-warning); }

/* shell: the menu docked to the window edge; the page header sits on the canvas. The content keeps the 48px of gutters every
   theme has */
[data-theme='portal'] .pk-app > .pk-side { z-index: 1; border-radius: 0; }
@media (min-width: 1024px) {
  [data-theme='portal'] .pk-app { overflow-x: clip; }
  :where([data-theme='portal']) .pk-main { --pk-main-pad: var(--pk-space-12); padding: var(--pk-space-10) var(--pk-space-12) var(--pk-space-12); }
  [data-theme='portal'] :is(.pk-checkbox, .pk-radio) { width: 18px; height: 18px; }
  [data-theme='portal'] .pk-toggle { width: 40px; height: 22px; }
  [data-theme='portal'] .pk-toggle::after { width: 16px; height: 16px; }
  [data-theme='portal'] .pk-toggle[aria-checked='true']::after { left: 21px; }
}
/* phone: the head is a band in the brand's deep shade, the tab bar is docked white. Styled at every width like the phone
   parts themselves, so previews show them too */
[data-theme='portal'] .pk-phone-head {
  margin: 0 calc(-1 * var(--pk-space-8)); padding: var(--pk-space-6) var(--pk-space-8); background: var(--pk-dark); color: var(--pk-on-dark);
  --pk-card: rgb(255 255 255 / 0.1); --pk-inset: rgb(255 255 255 / 0.1); --pk-inset-2: rgb(255 255 255 / 0.14);
  --pk-line: rgb(255 255 255 / 0.1); --pk-line-strong: rgb(255 255 255 / 0.16); --pk-text: var(--pk-on-dark); --pk-ink: var(--pk-on-dark);
  --pk-text-2: var(--pk-portal-on-deep-2); --pk-text-3: var(--pk-portal-on-deep-3); --pk-focus-outline: 2px solid var(--pk-on-dark);
}
[data-theme='portal'] .pk-phone-head .pk-icon-btn:not(.pk-icon-btn--ink) { box-shadow: none; }
[data-theme='portal'] .pk-phone-head .pk-icon-btn--ink { background: var(--pk-on-dark); color: var(--pk-portal-deep); }
[data-theme='portal'] :is(.pk-tabbar, .pk-actionbar) { bottom: 0; width: auto; margin: 0; border-radius: 0; box-shadow: var(--pk-edge-top); }
[data-theme='portal'] .pk-tabbar { padding: var(--pk-space-3) max(var(--pk-space-4), (100% - 560px) / 2) calc(var(--pk-space-3) + env(safe-area-inset-bottom, 0px)); }
[data-theme='portal'] .pk-actionbar { padding: var(--pk-space-5) max(var(--pk-space-7), (100% - 640px) / 2) calc(var(--pk-space-5) + env(safe-area-inset-bottom, 0px)); }
[data-theme='portal'] .pk-tabbar__item { border-radius: var(--pk-r-control); }
/* phone type: smaller than the desktop scale, never larger */
@media (max-width: 599px) {
  [data-theme='portal'] { --pk-fs-h1: 24px; --pk-fs-hero: 44px; --pk-fs-hero-md: 36px; --pk-fs-hero-sm: 30px; }
}
/* ---------- brand theme: Healing ---------- */
/* A studio's customer pages in its own look, for the customer layer (pk-site): warm cream paper, Jost throughout, burnt
   orange for action, sage for what is chosen and confirmed, terra for errors and full sessions, cards that lift off the
   page. Light only: the mode setting does not apply. Its sizes follow one fluid unit, 15.2px up to a 669px window and
   18.4px from 1251px. Listed in looks/index.ts as a site theme; no panel's look setting offers it */
[data-theme='healing'], [data-theme='healing'] .pk-site, .pk-site [data-theme='healing'] {
  color-scheme: light;
  --pk-font: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pk-mono: var(--pk-font);

  --pk-canvas: #f2e9d9;
  --pk-card: #fdf9f0;
  --pk-inset: #f9f3e8;
  --pk-inset-2: #e6dac4;
  --pk-line: color-mix(in srgb, var(--pk-text) 6%, transparent);
  --pk-line-strong: color-mix(in srgb, var(--pk-text) 12%, transparent);
  --pk-line-control: #8b7860;
  --pk-text: #241a12;
  --pk-text-2: #4a3a29;
  --pk-text-3: #6d5c48;
  --pk-ink: var(--pk-text);
  --pk-on-ink: var(--pk-card);
  --pk-dark: var(--pk-text);
  --pk-accent: #bf5a26;
  --pk-scrim: color-mix(in srgb, #3a2c1f 26%, transparent);
  /* statuses in the brand's colours: sage for done and confirmed, orange for pending, terra for errors and full */
  --pk-success: #4d5b53;
  --pk-success-soft: color-mix(in srgb, var(--pk-site-brand) 12%, var(--pk-card));
  --pk-success-text: var(--pk-success);
  --pk-warning: #a94d1f;
  --pk-warning-soft: color-mix(in srgb, var(--pk-accent) 12%, var(--pk-card));
  --pk-warning-text: var(--pk-warning);
  --pk-danger: #a8342a;
  --pk-danger-soft: color-mix(in srgb, var(--pk-danger) 7%, var(--pk-card));
  --pk-danger-text: var(--pk-danger);
  --pk-on-success: var(--pk-card); --pk-on-warning: var(--pk-card); --pk-on-danger: var(--pk-card);

  --pk-rs: 1; --pk-ds: 1; --pk-hero-k: 1;
  --pk-r-control: 999px; --pk-r-tag: 999px;
  --pk-font-figures: var(--pk-font); --pk-figures-size: 1em;

  /* the fluid unit and the type scale on it */
  --pk-site-u: clamp(0.95rem, 0.72rem + 0.55vw, 1.15rem);
  --pk-fs-body: calc(var(--pk-site-u) * 1.12);
  --pk-fs-h1: clamp(2.4rem, 5.2vw, 3.6rem);
  --pk-fs-h2: calc(var(--pk-site-u) * 2.3);
  --pk-fs-h3: calc(var(--pk-site-u) * 1.45);
  --pk-fs-h4: calc(var(--pk-site-u) * 1.12);
  --pk-fs-hero: calc(var(--pk-site-u) * 5);
  --pk-fs-hero-md: calc(var(--pk-site-u) * 3.4);
  --pk-fs-hero-sm: calc(var(--pk-site-u) * 2.3);
  --pk-fs-micro: max(11px, calc(var(--pk-site-u) * 0.72));
  --pk-fs-tiny: var(--pk-fs-micro);
  --pk-fs-axis: var(--pk-fs-micro);
  --pk-fs-fine: calc(var(--pk-site-u) * 0.86);
  --pk-fs-caption: var(--pk-fs-fine);
  --pk-fs-meta: var(--pk-fs-fine);
  --pk-fs-label: var(--pk-site-u);
  --pk-fs-small: var(--pk-site-u);
  --pk-fs-control: var(--pk-site-u);
  --pk-fs-item: var(--pk-site-u);
  --pk-fs-nav: var(--pk-site-u);
  --pk-fs-lead: var(--pk-fs-body);
  --pk-fs-title: var(--pk-fs-body);
  --pk-fs-title-lg: var(--pk-fs-body);
  --pk-fs-title-xl: var(--pk-fs-body);
  --pk-fs-figure-sm: var(--pk-fs-h3);
  --pk-fs-figure-md: var(--pk-fs-h3);
  --pk-fs-figure-lg: var(--pk-fs-h2);
  --pk-fs-figure-xl: var(--pk-fs-h2);
  --pk-fs-figure-2xl: var(--pk-fs-h2);
  --pk-lh-body: 1.7;
  --pk-size-btn: calc(2 * (var(--pk-site-space-2) + 4px) + 2px + var(--pk-site-fs-caps) * 1.445);
  --pk-size-btn-lg: var(--pk-size-btn);
  --pk-size-btn-sm: 44px;
  --pk-size-nav: 50px;
  --pk-size-chip: 44px;
  --pk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pk-dur-fast: 0.16s;
  --pk-dur-move: 0.2s;
  --pk-dur-base: 0.22s;
  --pk-dur-slow: 0.26s;
  --pk-dur-sheet: 0.46s;
  --pk-raise-shadow: 0 1px 3px color-mix(in srgb, var(--pk-site-shade) 14%, transparent);
  --pk-float-shadow: 0 30px 80px color-mix(in srgb, var(--pk-site-shade) 20%, transparent), inset 0 2px 0 rgba(255, 255, 255, 0.5);
  --pk-focus-offset: 3px;

  /* the customer layer's tokens */
  --pk-site-text: var(--pk-text-2);
  --pk-site-header-bg: var(--pk-inset);
  --pk-site-brand-h: calc(var(--pk-site-u) * 3.6);
  --pk-site-fs-caps: max(11px, calc(var(--pk-site-u) * 0.72));
  --pk-site-fs-tiny: 0.7rem;
  --pk-site-caps-case: uppercase;
  --pk-site-caps-track: 0.24em;
  --pk-site-label-track: 0.2em;
  --pk-site-track: 0.04em;
  /* the logotype's sage, just dark enough for its small subline to keep 4.5:1 on the header */
  --pk-site-brand: #5b756d;
  --pk-site-dot: var(--pk-accent);
  /* a little darker than the brand's sage, so an empty place's ring (75% of it) keeps 3:1 on the card */
  --pk-site-seat: #57716a;
  --pk-site-sister: #8a5a2b;
  --pk-site-link: var(--pk-text);
  --pk-site-link-hover: var(--pk-warning);
  --pk-site-link-line: color-mix(in srgb, var(--pk-accent) 55%, transparent);
  --pk-site-chosen-soft: var(--pk-success-soft);
  --pk-site-r-image: 18px;
  --pk-site-r-thumb: 12px;
  /* the warm brown every lift and glow is drawn in */
  --pk-site-shade: #4a3016;
  --pk-site-lift-shadow: 0 1px 2px color-mix(in srgb, var(--pk-site-shade) 6%, transparent), 0 18px 40px -28px color-mix(in srgb, var(--pk-site-shade) 45%, transparent);
  --pk-site-lift-shadow-hover: 0 2px 4px color-mix(in srgb, var(--pk-site-shade) 6%, transparent), 0 26px 48px -26px color-mix(in srgb, var(--pk-site-shade) 55%, transparent);
  --pk-site-pick-shadow: 0 14px 30px -24px color-mix(in srgb, var(--pk-site-shade) 45%, transparent);
  --pk-site-pick-shadow-hover: 0 22px 40px -24px color-mix(in srgb, var(--pk-site-shade) 55%, transparent);
  --pk-site-chosen-shadow: 0 18px 40px -30px color-mix(in srgb, var(--pk-site-shade) 45%, transparent);
  --pk-site-leaf-shadow: 0 6px 18px -8px color-mix(in srgb, var(--pk-site-shade) 45%, transparent);
  --pk-site-card-shadow: 0 18px 50px color-mix(in srgb, var(--pk-site-shade) 6%, transparent);
  --pk-site-menu-shadow: 0 24px 60px color-mix(in srgb, var(--pk-site-shade) 14%, transparent);
  --pk-site-action-shadow: 0 6px 18px color-mix(in srgb, var(--pk-accent) 24%, transparent);
  --pk-site-action-shadow-hover: 0 12px 30px color-mix(in srgb, var(--pk-accent) 30%, transparent);
  --pk-site-action-shadow-pressed: 0 3px 10px color-mix(in srgb, var(--pk-accent) 22%, transparent);
  --pk-site-lift: -3px;
  --pk-site-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pk-site-ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --pk-site-dur-enter: 0.38s;
  --pk-site-dur-rise: 0.52s;
  --pk-site-dur-draw: 1.1s;
  --pk-site-dur-tick: 0.52s;
  --pk-site-stagger: 70ms;
  --pk-site-lh-step: 1.15;
  --pk-site-r-box: 6px;
  --pk-site-ring-hover: inset 0 0 0 1px var(--pk-accent);
  --pk-site-ring-current: inset 0 0 0 1px var(--pk-current);
  --pk-site-danger-shadow: 0 6px 18px color-mix(in srgb, var(--pk-danger) 22%, transparent);
  --pk-site-layer-bg: var(--pk-inset);
  /* the brand's page background (owner decision D4, docs/inventory-healing.md): a soft light from above and a fine grain */
  --pk-site-backdrop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E"),
    radial-gradient(120% 85% at 50% 30%, var(--pk-card) 0%, transparent 62%),
    radial-gradient(80% 55% at 50% 6%, color-mix(in srgb, var(--pk-card) 80%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--pk-canvas) 0%, var(--pk-inset-2) 100%);
}
/* worked out from the brand colour; declared again on brand-colour scopes inside the theme */
[data-theme='healing'], [data-theme='healing'] [data-accent], [data-theme='healing'] .pk-site, .pk-site [data-theme='healing'] {
  /* the brand sets its own statuses from its palette: its orange stays on its figures and dots (colour rule 6 is the panels') */
  --pk-near-status: 0;
  --pk-accent-soft: var(--pk-warning-soft);
  --pk-accent-on-light: var(--pk-warning);
  --pk-accent-text: var(--pk-warning);
  --pk-mark: var(--pk-site-brand);
  --pk-mark-ink: var(--pk-card);
  /* the primary button is the darker orange with cream text (owner decision D3, docs/inventory-healing.md) */
  --pk-primary: var(--pk-warning);
  --pk-on-primary: var(--pk-inset);
  --pk-primary-hover: #964219;
  --pk-primary-edge: var(--pk-accent);
  --pk-current: var(--pk-success);
  --pk-on-current: var(--pk-card);
  --pk-current-count: var(--pk-card);
  --pk-r-panel: 28px;
  --pk-r-inset: 18px;
  --pk-r-split: 18px;
  --pk-r-field: 10px;
  --pk-gap: var(--pk-site-space-3);
  --pk-pad: var(--pk-site-space-5);
  --pk-pad-inset: var(--pk-site-space-4);
  --pk-row-y: var(--pk-site-space-2);
  /* a chosen card, day or slot is ringed in the chosen colour, never striped */
  --pk-ring-chosen: inset 0 0 0 2px var(--pk-current);
  --pk-focus-outline: 2px solid var(--pk-accent);
  --pk-focus-halo: 0 0 0 3px color-mix(in srgb, var(--pk-accent) 14%, transparent);
}
/* light only: neither the page nor the window turns dark with the mode setting */
[data-theme='healing'][data-mode], :root:has(> body[data-theme='healing']) { color-scheme: light; }
@media (max-width: 860px) {
  [data-theme='healing'], [data-theme='healing'] .pk-site, .pk-site [data-theme='healing'] { --pk-fs-h2: calc(var(--pk-site-u) * 1.85); }
}
@media (max-width: 720px) {
  [data-theme='healing'], [data-theme='healing'] .pk-site, .pk-site [data-theme='healing'] { --pk-site-brand-h: calc(var(--pk-site-u) * 3.4); }
}
/* the window behind the page; the theme's tokens live on the body, so the root takes the brand's colours as they are */
:root:has(> body[data-theme='healing']) { background: #e6dac4; scrollbar-color: color-mix(in srgb, #8a5a2b 45%, transparent) transparent; scrollbar-width: thin; }
[data-theme='healing'] ::selection { background: color-mix(in srgb, var(--pk-accent) 30%, transparent); color: var(--pk-text); }

/* type: light display titles, regular card titles, light big figures */
[data-theme='healing'] :is(.pk-h1, .pk-h2) { font-weight: var(--pk-fw-light); line-height: var(--pk-lh-tight); letter-spacing: -0.02em; }
[data-theme='healing'] .pk-h2 { line-height: var(--pk-site-lh-step); }
[data-theme='healing'] .pk-h3 { font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-snug); letter-spacing: -0.02em; }
[data-theme='healing'] .pk-h4 { font-weight: var(--pk-fw-medium); letter-spacing: 0; }
[data-theme='healing'] :is(.pk-hero, .pk-stat__value) { font-weight: var(--pk-fw-light); letter-spacing: -0.02em; }

/* buttons: tall pills with tracked labels; the primary glows and lifts, the outline is a quiet ring */
:where([data-theme='healing']) .pk-btn {
  padding: 0 var(--pk-site-space-5); border: 1px solid transparent; font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-medium);
  transition: transform var(--pk-dur-base) var(--pk-ease), box-shadow var(--pk-dur-slow) var(--pk-ease), background var(--pk-dur-base) var(--pk-ease), color var(--pk-dur-base) var(--pk-ease), border-color var(--pk-dur-base) var(--pk-ease);
}
[data-theme='healing'] .pk-btn--primary { box-shadow: var(--pk-site-action-shadow); }
[data-theme='healing'] .pk-btn--primary:hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { transform: translateY(-2px); background: var(--pk-primary-hover); box-shadow: var(--pk-site-action-shadow-hover); }
[data-theme='healing'] .pk-btn--primary:active:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { transform: none; background: var(--pk-primary-hover); box-shadow: var(--pk-site-action-shadow-pressed); }
[data-theme='healing'] :is(.pk-btn--outline, .pk-btn--soft) { border-color: color-mix(in srgb, var(--pk-text) 22%, transparent); background: transparent; color: var(--pk-text); box-shadow: none; }
[data-theme='healing'] :is(.pk-btn--outline, .pk-btn--soft):hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { border-color: var(--pk-accent); background: color-mix(in srgb, var(--pk-text) 4%, transparent); color: var(--pk-accent-text); }
[data-theme='healing'] .pk-btn--danger { background: var(--pk-danger); color: var(--pk-on-ink); box-shadow: var(--pk-site-danger-shadow); }
[data-theme='healing'] .pk-btn--danger:hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { background: color-mix(in srgb, var(--pk-danger) 82%, var(--pk-text)); }
[data-theme='healing'] .pk-btn--ghost { color: var(--pk-text-2); }
[data-theme='healing'] .pk-btn--ghost:hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { background: transparent; color: var(--pk-site-link-hover); }
/* a row action's label a shade under the primary: 4.53:1 on its tint over a tile, where the primary itself has 4.47 */
:where([data-theme='healing']) .pk-btn--tonal { color: #a84c1e; }

/* fields: filled, a quiet edge, an orange edge and halo when focused */
:where([data-theme='healing']) .pk-field { gap: var(--pk-site-space-1); }
:where([data-theme='healing']) .pk-field__label { font-size: var(--pk-fs-item); font-weight: var(--pk-fw-medium); color: var(--pk-text); }
:where([data-theme='healing']) .pk-field__hint { font-size: var(--pk-fs-meta); line-height: var(--pk-lh-relaxed); color: var(--pk-text-3); }
:where([data-theme='healing']) .pk-field__error { font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-regular); color: var(--pk-danger-text); }
:where([data-theme='healing']) .pk-input { padding-inline: var(--pk-site-space-3); border-color: var(--pk-line-strong); background: color-mix(in srgb, var(--pk-text) 4%, transparent); font-size: var(--pk-fs-item); }
:where([data-theme='healing']) textarea.pk-input { min-height: 7rem; padding: var(--pk-site-space-2) var(--pk-site-space-3); line-height: var(--pk-lh-loose); }
:where([data-theme='healing']) .pk-input:hover { border-color: var(--pk-line-strong); }
:where([data-theme='healing']) .pk-input:focus { border-color: var(--pk-primary-edge); background: color-mix(in srgb, var(--pk-text) 6%, transparent); box-shadow: var(--pk-focus-halo); }
:where([data-theme='healing']) .pk-field--error .pk-input { border-color: var(--pk-danger-edge); }
[data-theme='healing'] .pk-input::placeholder { color: var(--pk-text-3); }
/* the consent box and radios: chosen in sage */
[data-theme='healing'] .pk-checkbox { width: 1.5rem; height: 1.5rem; border-color: var(--pk-text-2); border-radius: var(--pk-site-r-box); }
[data-theme='healing'] :is(.pk-checkbox, .pk-radio):checked { border-color: var(--pk-current); background: var(--pk-current); }
[data-theme='healing'] .pk-checkbox:checked::after { border-color: var(--pk-on-current); }
[data-theme='healing'] .pk-radio:checked::after { background: var(--pk-on-current); }
[data-theme='healing'] .pk-option { font-size: var(--pk-fs-item); line-height: var(--pk-lh-loose); color: var(--pk-text-2); }
[data-theme='healing'] .pk-option__hint { font-size: var(--pk-fs-meta); color: var(--pk-text-3); }

[data-theme='healing'] .pk-field__required { color: var(--pk-accent-text); }
[data-theme='healing'] .pk-field__pair > .pk-btn { border-radius: var(--pk-r-field); }
[data-theme='healing'] .pk-icon-btn--soft { background: color-mix(in srgb, var(--pk-text) 4%, transparent); box-shadow: var(--pk-ring-strong); color: var(--pk-text-2); }

[data-theme='healing'] .pk-choice { background: var(--pk-card); box-shadow: var(--pk-ring-strong); }
[data-theme='healing'] .pk-choice__title { font-size: var(--pk-fs-body); font-weight: var(--pk-fw-regular); }

/* links: ink with an orange underline on the customer pages; elsewhere a link is the primary drawn as a line, here the lighter
   orange (4.25:1 on the card), so it takes the primary itself (4.63:1 on the page) */
[data-theme='healing'] .pk-link { text-decoration-color: var(--pk-site-link-line); }
[data-theme='healing'] :is(.pk-link, .pk-prose a) { --pk-primary-edge: var(--pk-primary); }

/* notices: a dot instead of the icon, a sage tint for information, terra for a problem */
[data-theme='healing'] .pk-notice {
  gap: var(--pk-site-space-3); padding: var(--pk-site-space-3) var(--pk-site-space-4); border: 1px solid color-mix(in srgb, var(--pk-mark) 26%, transparent);
  border-radius: var(--pk-r-tile); background: var(--pk-site-chosen-soft); font-size: var(--pk-fs-item); color: var(--pk-text);
}
[data-theme='healing'] .pk-notice > .pk-icon { width: 0.55rem; height: 0.55rem; margin-top: calc(var(--pk-fs-item) * 0.55); border-radius: 50%; background: var(--pk-mark); stroke: transparent; }
[data-theme='healing'] .pk-notice--danger { border-color: color-mix(in srgb, var(--pk-danger) 32%, transparent); background: var(--pk-danger-soft); }
[data-theme='healing'] .pk-notice--danger > .pk-icon { background: var(--pk-danger); }
[data-theme='healing'] .pk-notice--warning { border-color: color-mix(in srgb, var(--pk-accent) 30%, transparent); background: var(--pk-warning-soft); }
[data-theme='healing'] .pk-notice--warning > .pk-icon { background: var(--pk-accent); }
[data-theme='healing'] .pk-notice__title { font-weight: var(--pk-fw-medium); }

/* pills: small, in the status tints */
[data-theme='healing'] .pk-pill { height: auto; padding: var(--pk-space-1) var(--pk-space-5); font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-regular); letter-spacing: 0.04em; }
[data-theme='healing'] .pk-pill:not([class*='pk-pill--'], .pk-due) { background: color-mix(in srgb, var(--pk-text) 6%, transparent); color: var(--pk-text-2); }

/* filter chips: outlined, the chosen one filled in sage; a round picture or initials at the start */
[data-theme='healing'] .pk-chip:not(.pk-chip--accent, .pk-chip--ink) { padding: var(--pk-space-2) var(--pk-site-space-3); background: transparent; box-shadow: var(--pk-ring-strong); font-size: var(--pk-fs-item); }
[data-theme='healing'] .pk-chip:not(.pk-chip--accent, .pk-chip--ink):hover { box-shadow: var(--pk-site-ring-hover); }
[data-theme='healing'] .pk-chip:is([aria-pressed='true'], [aria-current='page'], :has(> input:checked)) { background: var(--pk-current); box-shadow: var(--pk-site-ring-current); }
[data-theme='healing'] .pk-chip:has(> .pk-avatar) { padding-left: var(--pk-space-2); }
[data-theme='healing'] .pk-avatar { background: color-mix(in srgb, var(--pk-mark) 18%, var(--pk-card)); color: var(--pk-success-text); font-weight: var(--pk-fw-medium); letter-spacing: 0.04em; }
[data-theme='healing'] .pk-avatar--sm { width: 28px; height: 28px; font-size: var(--pk-site-fs-caps); }
[data-theme='healing'] .pk-chip > .pk-avatar--sm { width: 34px; height: 34px; }

/* segmented control: a raised paper segment on a faint track */
[data-theme='healing'] .pk-seg { gap: var(--pk-space-2); padding: var(--pk-space-2); background: color-mix(in srgb, var(--pk-text) 6%, transparent); }
[data-theme='healing'] .pk-seg__item { height: var(--pk-h-chip); padding: 0 var(--pk-site-space-4); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-regular); }
[data-theme='healing'] :is(.pk-seg__item[aria-pressed='true'], .pk-seg__item[aria-selected='true']) { background: var(--pk-card); color: var(--pk-text); box-shadow: var(--pk-raise-shadow); }

/* sign-in providers: outlined pills */
[data-theme='healing'] .pk-sso__btn { min-height: 48px; border-radius: var(--pk-r-pill); background: var(--pk-card); box-shadow: var(--pk-ring-strong); font-size: var(--pk-fs-item); font-weight: var(--pk-fw-medium); }

/* cards on the page are edged; dialogs are paper with the brand's soft lift and a blurred page behind */
:where([data-theme='healing']) .pk-card { box-shadow: var(--pk-ring); }
[data-theme='healing'] :is(.pk-dialog, .pk-drawer) { border: 1px solid var(--pk-line-strong); background: var(--pk-inset); }
[data-theme='healing'] :is(.pk-dialog, .pk-drawer)::backdrop { backdrop-filter: blur(14px) saturate(0.9); }

/* time chips: a grid of outlined pills */
[data-theme='healing'] .pk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: var(--pk-site-space-2); }
[data-theme='healing'] .pk-slots--wide { display: flex; flex-wrap: wrap; }
[data-theme='healing'] .pk-slot {
  justify-content: center; height: auto; min-height: 44px; padding: 0 var(--pk-site-space-3); border: 1px solid var(--pk-line-strong);
  background: var(--pk-card); font-family: var(--pk-font); font-size: var(--pk-fs-item); font-variant-numeric: tabular-nums;
}
[data-theme='healing'] .pk-slots--wide > .pk-slot { justify-content: flex-start; padding-inline: var(--pk-site-space-4); }
[data-theme='healing'] .pk-slot:hover { border-color: var(--pk-accent); box-shadow: none; }
[data-theme='healing'] .pk-slot:disabled { border-style: dashed; border-color: var(--pk-line-strong); box-shadow: none; }

/* the month: round days, a sage dot on a day with free time, today in weight and a quiet ring */
[data-theme='healing'] .pk-datepick { max-width: 26rem; gap: var(--pk-site-space-2); }
[data-theme='healing'] .pk-datepick__head { justify-content: space-between; gap: var(--pk-site-space-2); }
[data-theme='healing'] .pk-datepick__title { flex: none; font-size: var(--pk-fs-body); font-weight: var(--pk-fw-medium); letter-spacing: 0.01em; }
[data-theme='healing'] .pk-datepick__nav { width: 44px; height: 44px; background: transparent; box-shadow: var(--pk-ring-strong); color: var(--pk-text); }
[data-theme='healing'] .pk-datepick__nav:hover:not(:disabled) { box-shadow: var(--pk-site-ring-hover); color: var(--pk-accent-text); }
[data-theme='healing'] .pk-datepick__grid { row-gap: var(--pk-space-2); column-gap: 0; }
[data-theme='healing'] .pk-datepick__dow { padding: 0 0 var(--pk-site-space-1); font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-medium); }
[data-theme='healing'] .pk-datepick__day { width: 100%; max-width: 2.9rem; height: auto; min-height: 44px; aspect-ratio: 1; border: 1px solid transparent; border-radius: 50%; font-size: var(--pk-fs-item); color: var(--pk-text); }
[data-theme='healing'] .pk-datepick__day:hover { background: transparent; }
[data-theme='healing'] .pk-datepick__day[data-state='free']::after { bottom: 18%; width: 5px; height: 5px; }
[data-theme='healing'] .pk-datepick__day[data-state='free']:hover { border-color: color-mix(in srgb, var(--pk-mark) 55%, transparent); }
[data-theme='healing'] .pk-datepick__day[data-state='out'] { opacity: 0.45; }
[data-theme='healing'] .pk-datepick__day[aria-current='date'] { border-color: color-mix(in srgb, var(--pk-text) 28%, transparent); font-weight: var(--pk-fw-strong); box-shadow: none; }
/* a range's ends sit on the chosen sage */
[data-theme='healing'] .pk-datepick__day:is([data-range='start'], [data-range='end'], [data-range='single']) { color: var(--pk-on-current); }
/* where the presets swipe (a narrow pop-up, touch) the row's visible end leaves no room for the brand's 3 px offset: the ring
   hugs the preset */
@container pk-range (max-width: 639px) or style(not (--pk-tap: 0px)) {
  [data-theme='healing'] .pk-range__preset:focus-visible { outline-offset: 0; }
}

/* the day strip: transparent days, the chosen one filled; the weekday small, the number large */
[data-theme='healing'] .pk-days { gap: var(--pk-site-space-1); padding: calc(var(--pk-focus-room) + var(--pk-space-1)); }
[data-theme='healing'] .pk-day {
  align-content: center; gap: var(--pk-space-1); width: auto; min-width: 3.5rem; min-height: 3.9rem; padding: var(--pk-space-3) var(--pk-site-space-1); border: 1px solid transparent;
  border-radius: var(--pk-r-tile); background: transparent; color: var(--pk-text);
}
[data-theme='healing'] .pk-day:hover:not(:disabled, [aria-pressed='true']) { border-color: var(--pk-line-strong); background: var(--pk-card); }
[data-theme='healing'] .pk-day:disabled { color: var(--pk-text-3); opacity: 0.5; }
/* a chosen time, day of the month or day of the strip: filled in the chosen sage */
[data-theme='healing'] :is(.pk-slot, .pk-datepick__day, .pk-day)[aria-pressed='true'] { border-color: var(--pk-current); background: var(--pk-current); color: var(--pk-on-current); }
[data-theme='healing'] .pk-day__dow { font-size: var(--pk-site-fs-caps); line-height: var(--pk-lh-snug); letter-spacing: 0.06em; color: inherit; }
[data-theme='healing'] .pk-day__num { font-size: var(--pk-fs-h3); font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-tight); }
[data-theme='healing'] .pk-day--all { padding-inline: var(--pk-site-space-3); font-size: var(--pk-fs-meta); letter-spacing: 0.04em; }

/* the date leaf: weekday in orange, a light day number, the month under it */
[data-theme='healing'] .pk-dateleaf { min-width: 3.6rem; padding: var(--pk-space-3) var(--pk-space-5) var(--pk-space-4); border-radius: var(--pk-r-tile); background: color-mix(in srgb, var(--pk-card) 92%, transparent); line-height: var(--pk-site-lh-step); }
[data-theme='healing'] .pk-dateleaf__dow { order: -1; font-size: var(--pk-site-fs-caps); letter-spacing: 0.06em; color: var(--pk-accent-text); }
[data-theme='healing'] .pk-dateleaf__day { font-size: var(--pk-fs-h2); font-weight: var(--pk-fw-light); line-height: var(--pk-lh-none); color: var(--pk-text); }
[data-theme='healing'] .pk-dateleaf__month { font-size: var(--pk-site-fs-caps); letter-spacing: 0.04em; color: var(--pk-text-3); }
[data-theme='healing'] .pk-dateleaf[aria-current='date'] { background: var(--pk-current); }

/* a session as a choice: paper card, day and time above, who and places below */
[data-theme='healing'] .pk-session { padding: var(--pk-site-space-3) var(--pk-site-space-4); border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-tile); background: var(--pk-card); align-items: baseline; }
[data-theme='healing'] .pk-session--pick:hover { border-color: var(--pk-accent); box-shadow: none; }
[data-theme='healing'] .pk-session--pick:has(> input:checked) { border-color: var(--pk-current); }
[data-theme='healing'] .pk-session__title { padding-block: 0; margin-block: 0; font-size: var(--pk-fs-body); font-weight: var(--pk-fw-regular); }
[data-theme='healing'] .pk-session__meta { font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
[data-theme='healing'] .pk-session__seats { gap: var(--pk-space-1); font-size: var(--pk-fs-item); font-variant-numeric: tabular-nums; }
[data-theme='healing'] .pk-session__seats > small { font-size: var(--pk-fs-meta); }

/* the review: one paper box, its groups parted by hairlines, each with a way back to its step */
[data-theme='healing'] .pk-review { gap: 0; border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-tile); background: color-mix(in srgb, var(--pk-card) 70%, transparent); }
[data-theme='healing'] .pk-review__section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--pk-site-space-3); padding: var(--pk-site-space-3) var(--pk-site-space-4); border-radius: 0; background: transparent; }
[data-theme='healing'] .pk-review__section + .pk-review__section { border-top: 1px solid var(--pk-line); }
[data-theme='healing'] .pk-review__section > .pk-link { font-size: var(--pk-fs-meta); padding-block: var(--pk-site-space-2); }
[data-theme='healing'] .pk-kv__row { font-size: var(--pk-fs-item); }
[data-theme='healing'] .pk-kv__key { min-width: 0; font-size: var(--pk-fs-meta); color: var(--pk-text-3); }
[data-theme='healing'] .pk-kv__value { font-weight: var(--pk-fw-regular); color: var(--pk-text); }
[data-theme='healing'] .pk-review .pk-kv { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); column-gap: var(--pk-site-space-3); }
[data-theme='healing'] .pk-review .pk-kv__row { padding-block: calc(var(--pk-site-space-2) / 2); border-top: 0; }
[data-theme='healing'] .pk-done__summary .pk-kv { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); column-gap: var(--pk-site-space-3); }

/* a member's package bar: thin, sage on a faint track */
[data-theme='healing'] .pk-progress { height: 6px; }
/* the option cards of a sheet stand on the dialog's inset: the cards take the card colour */
[data-theme='healing'] .pk-optcard:not(.pk-optcard--featured) { background: var(--pk-card); }
/* ---------- brand theme: Sigorta ---------- */
/* The 7 Days Sigorta member app's look (docs/inventory-sigorta-app.md): Yenilikçi's shapes at radius scale 1, the app's navy
   for ink and titles, its orange for the one accent action, its greys and its status pairs; info and gold are its own
   statuses. Light as the app draws it; dark worked out by the kit's rules: Kurumsal's dark greys turned to the navy's hue
   and the shared dark statuses. Field edges keep the kit's 3:1 (the app's hairline is too faint for a control). Listed in
   looks/index.ts as a brand theme, exported to the app's Swift and Kotlin files by npm run tokens */
[data-theme='sigorta'], [data-theme='sigorta'] .pk-site, .pk-site [data-theme='sigorta'] {
  --pk-font-figures: var(--pk-font);
  --pk-figures-size: 1em;

  --pk-canvas: light-dark(#f1f3f6, #0f1017);
  --pk-card: light-dark(#ffffff, #181a22);
  --pk-inset: light-dark(#f3f5f8, #21242e);
  --pk-inset-2: light-dark(#eceef2, #2b2e3b);
  --pk-line: light-dark(#e4e8ee, #262934);
  --pk-line-strong: light-dark(#d9dde6, #3d404f);
  /* 3:1 on the brand tint too (a highlighted row, a folder a file is dragged over) */
  --pk-line-control: light-dark(#7c8a9d, #717685);
  --pk-text: light-dark(#15182b, #f0f1f7);
  --pk-text-2: light-dark(#4a5160, #acb0bf);
  --pk-text-3: light-dark(#5f6776, #9397a6);
  /* ink is the navy in light mode and turns light in dark mode, as every theme's ink does */
  --pk-ink: light-dark(#1a1f3a, #f0f1f7);
  --pk-on-ink: light-dark(#ffffff, #0f1017);
  --pk-dark: light-dark(#1a1f3a, #262934);
  --pk-accent: #ea571e;
  --pk-title-ink: #1a1f3a;
  --pk-on-dark-2: rgba(255, 255, 255, 0.72);
  --pk-scrim: light-dark(rgba(20, 24, 44, 0.5), rgba(0, 0, 0, 0.6));

  --pk-success: light-dark(#146c43, #1fb25a);
  --pk-success-soft: light-dark(#e2f3e8, #173826);
  --pk-success-text: light-dark(#146c43, #5fd38f);
  --pk-warning: light-dark(#e0a000, #f8a11b);
  --pk-warning-soft: light-dark(#fdf1dc, #3d2a10);
  --pk-warning-text: light-dark(#8a5300, #f6b65a);
  --pk-danger: light-dark(#b42323, #ec5a3c);
  --pk-danger-soft: light-dark(#fbe9e9, #3e1f18);
  --pk-danger-text: light-dark(#b42323, #ff8a70);
  --pk-on-success: light-dark(var(--pk-on-dark), var(--pk-on-bright));
  --pk-on-danger: light-dark(var(--pk-on-dark), var(--pk-on-bright));
  /* the app's own statuses: info (its text moved just dark enough for 4.5:1 on its tint) and gold (a raffle win), their dark
     shades by the person colours' rule */
  --pk-info: #2f6fdb;
  --pk-info-soft: light-dark(#eef2fa, oklch(from var(--pk-info) 0.31 min(c, 0.05) h));
  --pk-info-text: light-dark(#2a6ad6, oklch(from var(--pk-info) 0.84 min(c, 0.11) h));
  --pk-gold: #d9ae4a;
  --pk-gold-soft: light-dark(color-mix(in srgb, var(--pk-gold) 18%, #ffffff), oklch(from var(--pk-gold) 0.31 min(c, 0.05) h));
  --pk-gold-text: light-dark(oklch(from var(--pk-gold) 0.44 min(c, 0.11) h), oklch(from var(--pk-gold) 0.84 min(c, 0.11) h));

  --pk-rs: 1;
  --pk-r-control: 999px;
  --pk-r-tag: 999px;
  --pk-size-btn: 46px;
  --pk-size-btn-sm: 36px;
  --pk-fs-body: 16px;
  --pk-pad: 20px;
  --pk-gap: 14px;
}
/* worked out from the brand colour; the app's own tint and text shade of its orange in light mode */
[data-theme='sigorta'], [data-theme='sigorta'] [data-accent], [data-theme='sigorta'] .pk-site, .pk-site [data-theme='sigorta'] {
  --pk-field-foot: none;
  --pk-accent-soft: light-dark(#fdebe3, oklch(from var(--pk-accent) 0.30 min(c, calc(0.045 - 0.033 * max(0, cos(calc((h - 95) * 0.8deg))))) h));
  --pk-accent-on-light: #b23d0c;
}

/* customer pages: the orange stays on the one accent action and on links; progress, step numbers, day marks and a package's
   figure take the navy, as the app's step bars do, since an orange figure or dot reads as a warning */
[data-theme='sigorta'], [data-theme='sigorta'] .pk-site, .pk-site [data-theme='sigorta'] { --pk-site-dot: var(--pk-title-text); }
[data-theme='sigorta'] .pk-nextsteps > li::before { color: var(--pk-title-text); }
[data-theme='sigorta'] .pk-day__dots > i { background: var(--pk-title-text); }
/* fields as the app draws them: white with an edge (at the kit's 3:1 here) that turns navy on focus */
:where([data-theme='sigorta']) .pk-input { background: var(--pk-card); border-color: var(--pk-line-control); }
:where([data-theme='sigorta']) .pk-input:hover { border-color: var(--pk-text-3); }
:where([data-theme='sigorta']) .pk-input:focus { border-color: var(--pk-primary-edge); }
:where([data-theme='sigorta']) .pk-field--error .pk-input { border-color: var(--pk-danger-edge); }
/* ---------- brand theme: Tattoo ---------- */
/* A studio's customer pages in its own look, for the customer layer (pk-site): a flash sheet on dark leather
   (docs/inventory-tattoo.md). Near-black brown surfaces with a faint warm light from above and a fine grain, aged-brass type and
   edges, a dashed stitch inside every surface, tracked Geist Mono capitals for titles and controls, Geist for reading. Cards are
   sunk into the page, controls are raised leather, what is chosen is lit leather with a glow. Dark only: the mode setting does
   not apply. Fixed sizes on a 4 px grid. Listed in looks/index.ts as a site theme; no panel's look setting offers it */
[data-theme='tattoo'], [data-theme='tattoo'] .pk-site, .pk-site [data-theme='tattoo'] {
  color-scheme: dark;
  --pk-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pk-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pk-canvas: #0a0503;
  --pk-card: #130c07;
  --pk-inset: #211710;
  --pk-inset-2: #261a11;
  --pk-line: rgb(170 123 64 / 0.32);
  --pk-line-strong: rgb(170 123 64 / 0.55);
  /* the site's field edge (brass at 30%) is 1.5:1; its label dash's brass at 60% keeps 3:1 on the page, the cards and the fields */
  --pk-line-control: rgb(201 149 81 / 0.6);
  --pk-text: #f8dfa8;
  --pk-text-2: rgb(242 212 148 / 0.75);
  /* 60%, not the site's 55%: 4.5:1 on every surface, the chosen leather included */
  --pk-text-3: rgb(242 212 148 / 0.6);
  --pk-ink: #f8dfa8;
  --pk-on-ink: #0a0503;
  --pk-dark: #261a11;
  --pk-on-dark: #f8dfa8;
  /* 66%: 4.5:1 on the night shift's navy and on a screen zone too */
  --pk-on-dark-2: rgb(242 212 148 / 0.66);
  --pk-dark-inset: rgb(173 124 64 / 0.16);
  --pk-accent: #dfaf6a;
  --pk-scrim: rgb(0 0 0 / 0.75);
  /* statuses in the brand's tones: sage for confirmed, brass for pending, the site's red for errors and cancelled */
  --pk-success: #9fcf95;
  --pk-success-soft: color-mix(in srgb, #9fcf95 12%, var(--pk-card));
  --pk-success-text: #9fcf95;
  --pk-warning: #e9c37e;
  --pk-warning-soft: color-mix(in srgb, #ad7c40 10%, var(--pk-card));
  --pk-warning-text: #e9c37e;
  --pk-danger: #ff6467;
  --pk-danger-soft: color-mix(in srgb, #460809 30%, var(--pk-card));
  --pk-danger-text: #ffa2a2;
  /* the floating layers' leather, between the cards and the controls */
  --pk-tattoo-leather: #17100a;

  --pk-rs: 0; --pk-ds: 1; --pk-hero-k: 1;
  --pk-r-control: 4px; --pk-r-tag: 3px; --pk-r-mark: 2px; --pk-r-dialog: 6px;
  --pk-font-figures: var(--pk-mono); --pk-figures-size: 1em;

  /* fixed pixel sizes, as the site draws them */
  --pk-fs-body: 14px;
  --pk-lh-body: 1.625;
  --pk-lh-prose: 1.625;
  --pk-fs-h1: 30px;
  --pk-fs-h2: 12px;
  --pk-fs-h3: 14px;
  --pk-fs-h4: 14px;
  --pk-fs-hero: 20px;
  --pk-fs-hero-md: 20px;
  --pk-fs-hero-sm: 18px;
  --pk-fs-micro: 10px;
  --pk-fs-tiny: 11px;
  --pk-fs-axis: 11px;
  --pk-fs-fine: 11px;
  --pk-fs-caption: 12px;
  --pk-fs-meta: 12px;
  --pk-fs-label: 11px;
  --pk-fs-small: 13px;
  --pk-fs-control: 14px;
  --pk-fs-item: 14px;
  --pk-fs-nav: 13.5px;
  --pk-fs-lead: 14px;
  --pk-fs-title: 14px;
  --pk-fs-title-lg: 16px;
  --pk-fs-title-xl: 20px;
  --pk-fs-figure-sm: 18px;
  --pk-fs-figure-md: 20px;
  --pk-fs-figure-lg: 20px;
  --pk-fs-figure-xl: 20px;
  --pk-fs-figure-2xl: 20px;
  --pk-size-btn: 41px;
  --pk-size-btn-lg: 44px;
  --pk-size-btn-sm: 36px;
  --pk-size-nav: 40px;
  --pk-size-chip: 44px;
  --pk-ease: ease;
  --pk-dur-fast: 0.12s;
  --pk-dur-move: 0.15s;
  --pk-dur-base: 0.2s;
  --pk-dur-slow: 0.2s;
  --pk-dur-sheet: 0.28s;
  --pk-raise-shadow: 0 2px 10px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(236 202 148 / 0.06);
  --pk-float-shadow: 0 8px 32px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(236 202 148 / 0.07);

  /* the customer layer's tokens */
  --pk-site-u: 16px;
  --pk-site-gutter: 24px;
  --pk-site-wide: 80rem;
  --pk-site-text: var(--pk-text-2);
  --pk-site-header-bg: var(--pk-tattoo-leather);
  --pk-site-brand-h: 56px;
  --pk-site-fs-caps: 11px;
  --pk-site-fs-tiny: 10px;
  --pk-site-caps-case: uppercase;
  --pk-site-caps-track: 0.22em;
  --pk-site-label-track: 0.2em;
  --pk-site-track: 0.06em;
  --pk-site-font-display: var(--pk-mono);
  --pk-site-font-ui: var(--pk-mono);
  --pk-site-display-track: 0.32em;
  --pk-site-step-track: 0.26em;
  --pk-site-title-glow: 0 0 26px rgb(200 164 104 / 0.25);
  --pk-site-brand: #dfaf6a;
  /* the site's marker is a 12 x 1 px brass dash before every label, not a dot */
  --pk-site-dot: rgb(201 149 81 / 0.6);
  --pk-site-dot-halo: 0 0 0 0 transparent;
  --pk-site-dot-w: 12px;
  --pk-site-dot-h: 1px;
  --pk-site-dot-r: 0px;
  --pk-site-label-mark: '';
  --pk-site-seat: #dfaf6a;
  --pk-site-sister: rgb(223 175 106 / 0.8);
  --pk-site-link: #e9c37e;
  --pk-site-link-hover: #f8dfa8;
  --pk-site-link-line: rgb(173 124 64 / 0.5);
  --pk-site-link-offset: 4px;
  --pk-site-chosen: rgb(226 202 148 / 0.9);
  --pk-site-chosen-soft: #3a2814;
  --pk-site-r-image: 3px;
  --pk-site-r-thumb: 3px;
  --pk-site-r-box: 3px;
  --pk-site-ratio-card: 4 / 5;
  --pk-site-ratio-wide: 21 / 9;
  --pk-site-shade: #000000;
  --pk-site-lift-shadow: var(--pk-raise-shadow);
  --pk-site-lift-shadow-hover: 0 3px 14px rgb(0 0 0 / 0.5), 0 0 12px rgb(201 149 81 / 0.15), inset 0 1px 0 rgb(236 202 148 / 0.08);
  /* cards are sunk into the page, not lifted off it */
  --pk-site-pick-shadow: inset 0 2px 14px rgb(0 0 0 / 0.45);
  --pk-site-pick-shadow-hover: inset 0 2px 14px rgb(0 0 0 / 0.45), 0 0 14px rgb(201 149 81 / 0.12);
  --pk-site-chosen-shadow: 0 0 12px rgb(201 149 81 / 0.25), inset 0 1px 0 rgb(236 202 148 / 0.12);
  --pk-site-card-shadow: inset 0 2px 14px rgb(0 0 0 / 0.45);
  --pk-site-leaf-shadow: var(--pk-raise-shadow);
  --pk-site-action-shadow: var(--pk-raise-shadow);
  --pk-site-action-shadow-hover: var(--pk-site-lift-shadow-hover);
  --pk-site-action-shadow-pressed: var(--pk-raise-shadow);
  --pk-site-menu-shadow: var(--pk-float-shadow);
  --pk-site-danger-shadow: 0 0 0 0 transparent;
  --pk-site-ring-hover: inset 0 0 0 1px rgb(222 178 112 / 0.8);
  --pk-site-ring-current: inset 0 0 0 1px rgb(226 202 148 / 0.9);
  --pk-site-lift: -1px;
  --pk-site-ease: cubic-bezier(0.34, 1.4, 0.64, 1);
  --pk-site-ease-soft: ease-out;
  --pk-site-dur-enter: 0.28s;
  --pk-site-dur-rise: 0.22s;
  --pk-site-dur-draw: 0.28s;
  --pk-site-dur-tick: 0.12s;
  --pk-site-dur-pulse: 1.2s;
  --pk-site-stagger: 45ms;
  --pk-site-lh-step: 1.33;
  --pk-site-layer-bg: var(--pk-tattoo-leather);
  --pk-site-rule: linear-gradient(90deg, transparent, rgb(199 164 106 / 0.45), transparent);
  /* the brand's surfaces (owner decision T4): a light from above and a grain on cards, controls and layers, the layers with a
     shade of fine lines too, and a dashed stitch inside each */
  --pk-site-surface: radial-gradient(130% 100% at 50% 0%, rgb(212 163 92 / 0.04), transparent 55%), repeating-linear-gradient(115deg, rgb(255 255 255 / 0.01) 0 2px, transparent 2px 5px);
  --pk-site-control-surface: radial-gradient(120% 100% at 50% 0%, rgb(212 163 92 / 0.08), transparent 60%), repeating-linear-gradient(115deg, rgb(255 255 255 / 0.012) 0 2px, transparent 2px 5px);
  --pk-site-layer-surface: radial-gradient(120% 90% at 50% 0%, rgb(212 163 92 / 0.05), transparent 60%), repeating-linear-gradient(115deg, rgb(255 255 255 / 0.012) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(25deg, rgb(0 0 0 / 0.14) 0 1px, transparent 1px 4px);
  --pk-site-stitch: 1px dashed rgb(206 158 92 / 0.18);
  --pk-site-control-stitch: 1px dashed rgb(206 158 92 / 0.35);
  --pk-site-layer-stitch: 1px dashed rgb(206 158 92 / 0.32);
  --pk-site-stitch-inset: -4px;
  /* the page's own light from above */
  --pk-site-backdrop: radial-gradient(90% 55% at 50% -8%, rgb(200 164 104 / 0.07), transparent 60%);
}
/* worked out from the brand colour; declared again on brand-colour scopes inside the theme */
[data-theme='tattoo'], [data-theme='tattoo'] [data-accent], [data-theme='tattoo'] .pk-site, .pk-site [data-theme='tattoo'] {
  --pk-field-foot: none;
  /* the brass is the brand's ink, not a status: it stays on figures and dots (colour rule 6 is the panels') */
  --pk-near-status: 0;
  --pk-accent-ink: #1a0f07;
  --pk-accent-on-dark: #dfaf6a;
  --pk-accent-text: #dfaf6a;
  --pk-accent-soft: color-mix(in srgb, #ad7c40 10%, var(--pk-card));
  --pk-mark: #dfaf6a;
  --pk-mark-ink: #1a0f07;
  --pk-title-text: #e9c37e;
  /* the primary action is the site's leather chip with a brass label (owner decision T3); what is current is lit leather */
  --pk-primary: var(--pk-inset);
  --pk-on-primary: #dfaf6a;
  --pk-primary-hover: var(--pk-inset);
  --pk-primary-edge: #dfaf6a;
  --pk-current: #3a2814;
  --pk-on-current: #f8dfa8;
  --pk-current-count: #f8dfa8;
  --pk-r-card: 4px;
  --pk-r-panel: 4px;
  --pk-r-inset: 4px;
  --pk-r-tile: 4px;
  --pk-r-split: 4px;
  --pk-r-field: 0px;
  --pk-r-sm: 3px;
  --pk-r-xs: 3px;
  --pk-gap: 20px;
  --pk-pad: 24px;
  --pk-pad-inset: 16px;
  --pk-row-y: 12px;
  /* the chosen edge carries the state: the lit fill alone is 1.25:1 against the idle leather */
  --pk-ring-chosen: inset 0 0 0 1px rgb(226 202 148 / 0.9), 0 0 12px rgb(201 149 81 / 0.25);
  --pk-focus-outline: 2px solid #dfaf6a;
  --pk-focus-halo: 0 0 0 1px rgb(222 197 148 / 0.3), 0 0 18px rgb(199 164 106 / 0.1);
}
/* dark only: neither the page nor the window turns light with the mode setting */
[data-theme='tattoo'][data-mode], :root:has(> body[data-theme='tattoo']) { color-scheme: dark; }
@media (min-width: 640px) {
  [data-theme='tattoo'], [data-theme='tattoo'] .pk-site, .pk-site [data-theme='tattoo'] { --pk-site-ratio-wide: 21 / 8; }
}
@media (max-width: 640px) {
  [data-theme='tattoo'], [data-theme='tattoo'] .pk-site, .pk-site [data-theme='tattoo'] { --pk-fs-h1: 24px; }
}
@media (min-width: 1024px) {
  [data-theme='tattoo'], [data-theme='tattoo'] .pk-site, .pk-site [data-theme='tattoo'] { --pk-site-brand-h: 64px; }
}
@media (min-width: 1280px) {
  [data-theme='tattoo'], [data-theme='tattoo'] .pk-site, .pk-site [data-theme='tattoo'] { --pk-site-brand-h: 80px; }
}
/* the window behind the page; the theme's tokens live on the body, so the root takes the brand's colours as they are */
:root:has(> body[data-theme='tattoo']) { background: #0a0503; scrollbar-color: rgb(173 124 64 / 0.5) transparent; scrollbar-width: thin; }
[data-theme='tattoo'] ::selection { background: rgb(223 175 106 / 0.3); color: var(--pk-text); }
[data-theme='tattoo'] .pk-site-main { padding: 40px var(--pk-site-gutter) var(--pk-site-space-6); }
/* fields 16px apart, a label 6px over its field, as the site sets its forms */
[data-theme='tattoo'] .pk-site-form { gap: var(--pk-site-space-3); }

/* type: tracked capitals in Geist Mono for every title, brass for titles, Geist for reading */
[data-theme='tattoo'] :is(.pk-h1, .pk-h2, .pk-h3, .pk-h4) { font-weight: var(--pk-fw-heavy); text-transform: var(--pk-site-caps-case); color: var(--pk-title-text); }
[data-theme='tattoo'] .pk-h1 { line-height: 1.2; }
[data-theme='tattoo'] .pk-h2 { line-height: var(--pk-site-lh-step); }
[data-theme='tattoo'] .pk-h3 { font-family: var(--pk-site-font-display); line-height: 1.43; letter-spacing: 0.2em; }
[data-theme='tattoo'] .pk-h4 { font-family: var(--pk-site-font-display); letter-spacing: 0.2em; }
[data-theme='tattoo'] .pk-site-page__intro { font-size: var(--pk-fs-item); line-height: var(--pk-lh-text); color: var(--pk-text-3); }
[data-theme='tattoo'] :is(.pk-hero, .pk-stat__value) { font-family: var(--pk-mono); font-weight: var(--pk-fw-regular); letter-spacing: 0.12em; }
[data-theme='tattoo'] .pk-eyebrow { font-weight: var(--pk-fw-regular); color: #dfaf6a; }
[data-theme='tattoo'] .pk-eyebrow::before { align-self: center; }

/* buttons: the site's leather chip. The primary carries a bold brass label, the outline a regular one, ghost and text buttons
   are tracked brass words without a chip; hover lifts a step and brightens the edge, the stitch and the label */
[data-theme='tattoo'] .pk-btn {
  --pk-site-stitch-inset: -3px;
  gap: var(--pk-space-4); padding: 0 22px; border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-control); background-color: var(--pk-inset);
  font-size: 11.5px; font-weight: var(--pk-fw-heavy); color: #dfaf6a; box-shadow: var(--pk-raise-shadow);
  transition: border-color var(--pk-dur-base) ease, box-shadow var(--pk-dur-base) ease, color var(--pk-dur-base) ease, transform var(--pk-dur-move) ease, outline-color var(--pk-dur-base) ease;
}
[data-theme='tattoo'] .pk-btn:is(.pk-btn--outline, .pk-btn--soft, .pk-btn--tonal, .pk-btn--accent) { font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-regular); letter-spacing: 0.14em; color: #e9c37e; }
[data-theme='tattoo'] .pk-btn:hover:not(:disabled, [aria-disabled='true'], :has(> :disabled), .pk-btn--ghost, .pk-btn--text) {
  transform: translateY(var(--pk-site-lift)); border-color: rgb(222 178 112 / 0.8); background-color: var(--pk-inset); color: #f2d494;
  box-shadow: var(--pk-site-lift-shadow-hover);
}
[data-theme='tattoo'] .pk-btn:active:not(:disabled, [aria-disabled='true'], :has(> :disabled), .pk-btn--ghost, .pk-btn--text) { transform: none; }
/* the stitch brightens with the edge on hover and on what is chosen; never over the focus ring, which is an outline too */
[data-theme='tattoo'] :is(.pk-btn, .pk-chip, .pk-slot, .pk-day, .pk-site-sister, .pk-icon-btn):hover:not(:disabled, [aria-disabled='true'], :has(> :disabled), :focus-visible, :has(> .pk-sr:focus-visible)) { outline-color: rgb(222 178 112 / 0.55); }
[data-theme='tattoo'] :is(.pk-chip:is([aria-pressed='true'], [aria-current='page'], :has(> input:checked)), .pk-slot[aria-pressed='true'], .pk-day[aria-pressed='true']):not(:focus-visible, :has(> .pk-sr:focus-visible)) { outline-color: rgb(226 202 148 / 0.55); }
[data-theme='tattoo'] :is(.pk-slot:disabled, .pk-days--week > .pk-day:is([data-state='full'], [data-state='out'], [data-state='unknown'])):not(:focus-visible) { outline-color: rgb(206 158 92 / 0.12); }
[data-theme='tattoo'] :is(.pk-btn--ghost, .pk-btn--text) {
  padding-inline: 0; border-color: transparent; background: transparent; box-shadow: none; font-size: var(--pk-fs-tiny); font-weight: var(--pk-fw-regular);
  letter-spacing: 0.22em; color: rgb(223 175 106 / 0.8);
}
[data-theme='tattoo'] :is(.pk-btn--ghost, .pk-btn--text):hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { background: transparent; color: #f2d494; text-decoration: none; }
[data-theme='tattoo'] .pk-btn--danger { border-color: rgb(255 100 103 / 0.6); background-color: rgb(70 8 9 / 0.4); color: #ffe2e2; }
[data-theme='tattoo'] .pk-btn--danger:hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { border-color: #ff6467; background-color: rgb(70 8 9 / 0.6); color: #ffe2e2; }
[data-theme='tattoo'] .pk-btn--danger { --pk-site-control-stitch: none; }
[data-theme='tattoo'] :is(.pk-btn:disabled, .pk-btn[aria-disabled='true']) { border-color: var(--pk-line); background-color: var(--pk-card); color: var(--pk-text-3); box-shadow: none; }
[data-theme='tattoo'] :is(.pk-icon-btn, .pk-datepick__nav) {
  --pk-site-stitch-inset: -3px;
  border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-control); background-color: var(--pk-inset); background-image: var(--pk-site-control-surface);
  color: #dfaf6a; box-shadow: var(--pk-raise-shadow); transition: border-color var(--pk-dur-base) ease, color var(--pk-dur-base) ease, transform var(--pk-dur-move) ease;
}
[data-theme='tattoo'] :is(.pk-icon-btn, .pk-datepick__nav):hover:not(:disabled, [aria-disabled='true'], :has(> :disabled)) { border-color: rgb(222 178 112 / 0.8); background-color: var(--pk-inset); color: #f2d494; }
[data-theme='tattoo'] :is(.pk-icon-btn, .pk-datepick__nav):disabled { border-color: var(--pk-line); background-color: var(--pk-card); color: var(--pk-text-3); box-shadow: none; }
:where([data-theme='tattoo']) :is(.pk-icon-btn, .pk-datepick__nav):not(:focus-visible) { outline: var(--pk-site-control-stitch); outline-offset: -3px; }

/* fields: square wells sunk into the leather, a brass edge at 3:1, a brass edge and glow when focused */
:where([data-theme='tattoo']) .pk-field { gap: 6px; }
:where([data-theme='tattoo']) .pk-field__label {
  font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-regular); letter-spacing: var(--pk-site-caps-track);
  text-transform: var(--pk-site-caps-case); color: #dfaf6a;
}
:where([data-theme='tattoo']) :is(.pk-field__hint, .pk-field__count) { font-family: var(--pk-mono); font-size: var(--pk-fs-tiny); line-height: var(--pk-lh-loose); color: var(--pk-text-3); }
:where([data-theme='tattoo']) .pk-field__error { font-size: var(--pk-fs-meta); font-weight: var(--pk-fw-regular); line-height: var(--pk-lh-relaxed); color: var(--pk-danger-text); }
:where([data-theme='tattoo']) .pk-input {
  height: 42px; padding: 0 14px; border: 1px solid var(--pk-line-control); border-radius: 0; background-color: #0a0603; color: var(--pk-text);
  font-family: var(--pk-mono); font-size: var(--pk-fs-control); box-shadow: inset 0 2px 10px rgb(0 0 0 / 0.55);
}
:where([data-theme='tattoo']) textarea.pk-input { height: auto; min-height: 6.5rem; padding: 10px 14px; line-height: var(--pk-lh-text); }
:where([data-theme='tattoo']) .pk-input:hover { border-color: var(--pk-line-control); }
:where([data-theme='tattoo']) .pk-input:focus { border-color: #dfaf6a; box-shadow: inset 0 2px 10px rgb(0 0 0 / 0.55), var(--pk-focus-halo); }
:where([data-theme='tattoo']) :is(.pk-field--error .pk-input, .pk-input[aria-invalid='true']) { border-color: rgb(255 100 103 / 0.7); }
[data-theme='tattoo'] .pk-input::placeholder { color: var(--pk-text-3); }
[data-theme='tattoo'] input[type='date'].pk-input { color-scheme: dark; }
[data-theme='tattoo'] .pk-field__required { color: #dfaf6a; }
[data-theme='tattoo'] .pk-contactform .pk-field__label { color: #dfaf6a; }
/* the consent box: leather with a brass tick that scales in */
[data-theme='tattoo'] .pk-checkbox { width: 22px; height: 22px; border: 1px solid rgb(201 149 81 / 0.75); border-radius: 3px; background-color: #0a0603; box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.55); }
[data-theme='tattoo'] .pk-checkbox:checked { border-color: rgb(201 149 81 / 0.75); background-color: #0a0603; }
[data-theme='tattoo'] .pk-checkbox:checked::after {
  width: 12px; height: 12px; margin: 0; border: 0; background: #e9c37e; transform: none; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  animation: pk-tattoo-tick var(--pk-site-dur-tick) ease;
}
[data-theme='tattoo'] .pk-checkbox[aria-invalid='true'] { border-color: rgb(248 113 113 / 0.75); }
/* a switch that is on is leather under its brass knob: the field's brass edge shows the track on the cards and the leather */
[data-theme='tattoo'] .pk-toggle[aria-checked='true'] { box-shadow: inset 0 0 0 1px var(--pk-line-control); }
@keyframes pk-tattoo-tick { from { scale: 0; } }
[data-theme='tattoo'] .pk-option { font-size: var(--pk-fs-item); line-height: var(--pk-lh-body); color: var(--pk-text-2); }
[data-theme='tattoo'] .pk-option__hint { font-size: var(--pk-fs-meta); color: var(--pk-text-3); }

/* chips: leather with the label in its own case; the chosen one lit with a near-white brass edge and a glow */
[data-theme='tattoo'] .pk-chip {
  --pk-site-stitch-inset: -3px;
  min-height: 44px; padding: 10px 16px; border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-control); background-color: var(--pk-inset);
  font-size: 13px; letter-spacing: var(--pk-site-track); color: rgb(223 175 106 / 0.8); box-shadow: var(--pk-raise-shadow);
  transition: border-color var(--pk-dur-base) ease, box-shadow var(--pk-dur-base) ease, color var(--pk-dur-base) ease, transform var(--pk-dur-move) ease;
}
[data-theme='tattoo'] .pk-chip:hover:not(:has(> input:disabled), [aria-pressed='true'], [aria-current='page'], :has(> input:checked)) {
  transform: translateY(var(--pk-site-lift)); border-color: rgb(222 178 112 / 0.8); color: #f2d494; box-shadow: var(--pk-site-lift-shadow-hover);
}
[data-theme='tattoo'] .pk-chip:is([aria-pressed='true'], [aria-current='page'], :has(> input:checked)) {
  border-color: var(--pk-site-chosen); background-color: var(--pk-current); color: var(--pk-on-current); box-shadow: var(--pk-site-chosen-shadow);
}
[data-theme='tattoo'] .pk-chip:has(> input:disabled) { border-color: var(--pk-line); background-color: var(--pk-card); color: var(--pk-text-3); box-shadow: none; }
[data-theme='tattoo'] .pk-chip__hint { font-size: var(--pk-fs-tiny); color: var(--pk-text-3); }
[data-theme='tattoo'] .pk-chip:has(> .pk-avatar) { padding-left: var(--pk-space-4); }
[data-theme='tattoo'] .pk-avatar { background: var(--pk-inset-2); color: #dfaf6a; font-family: var(--pk-mono); letter-spacing: var(--pk-site-track); }
/* a flow's steps take the strong edge as their second inset: at 48% brass, not 55%, the brass initials keep 4.5:1 on it (4.71) */
[data-theme='tattoo'] .pk-flow > :not(.pk-card, .pk-dialog, .pk-pop, .pk-sheet) { --pk-inset-2: rgb(170 123 64 / 0.48); }

/* the sister brands and the language: small leather chips */
[data-theme='tattoo'] .pk-site-sister {
  --pk-site-stitch-inset: -3px;
  gap: var(--pk-space-3); padding: 6px 12px; border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-control); background-color: var(--pk-inset);
  font-size: var(--pk-fs-caption); font-weight: var(--pk-fw-regular); letter-spacing: var(--pk-site-track); color: rgb(223 175 106 / 0.8); box-shadow: var(--pk-raise-shadow);
}
[data-theme='tattoo'] .pk-site-sister:hover { border-color: rgb(222 178 112 / 0.8); background-color: var(--pk-inset); color: #f2d494; }
[data-theme='tattoo'] .pk-site-row__back { color: rgb(223 175 106 / 0.8); }
[data-theme='tattoo'] .pk-site-row__back:hover { color: #f2d494; }

/* the segmented control (sign in, sign up): two square tabs in sentence case, the current one lit */
[data-theme='tattoo'] .pk-seg { gap: 0; padding: 0; border: 1px solid var(--pk-line-strong); border-radius: 0; background: var(--pk-card); }
[data-theme='tattoo'] .pk-seg__item { height: var(--pk-h-chip); padding: 0 var(--pk-site-space-4); border-radius: 0; font-size: var(--pk-fs-small); letter-spacing: var(--pk-site-track); color: var(--pk-text-3); }
[data-theme='tattoo'] :is(.pk-seg__item[aria-pressed='true'], .pk-seg__item[aria-selected='true']) { background: var(--pk-current); color: var(--pk-on-current); box-shadow: var(--pk-ring-chosen); }

/* sign-in providers: leather chips; the divider between them and the form in tracked brass */
[data-theme='tattoo'] .pk-sso__btn { min-height: 44px; border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-control); background-color: var(--pk-inset); font-family: var(--pk-mono); font-size: var(--pk-fs-caption); letter-spacing: var(--pk-site-track); color: #e9c37e; box-shadow: var(--pk-raise-shadow); }
[data-theme='tattoo'] .pk-divider { font-family: var(--pk-mono); font-size: var(--pk-fs-tiny); letter-spacing: var(--pk-site-caps-track); text-transform: var(--pk-site-caps-case); color: var(--pk-text-3); }

/* links: brass with a brass underline four pixels down */
[data-theme='tattoo'] .pk-link { text-decoration-thickness: 1px; }
[data-theme='tattoo'] .pk-prose a { color: var(--pk-site-link); text-decoration-color: var(--pk-site-link-line); text-underline-offset: var(--pk-site-link-offset); }

/* surfaces: sunken cards with a brass edge and a faint stitch, raised leather for what floats */
[data-theme='tattoo'] :is(.pk-card, .pk-site-card, .pk-chosen, .pk-site-panel, .pk-review, .pk-site-booking, .pk-site-hello, .pk-site-pack, .pk-callout) {
  border: 1px solid var(--pk-line); border-radius: var(--pk-r-card); background-color: var(--pk-card); box-shadow: var(--pk-site-card-shadow);
}
[data-theme='tattoo'] .pk-card { padding: var(--pk-pad) clamp(20px, 4vw, 28px); }
[data-theme='tattoo'] .pk-card__title { font-family: var(--pk-mono); font-size: var(--pk-fs-title); font-weight: var(--pk-fw-heavy); letter-spacing: 0.2em; text-transform: var(--pk-site-caps-case); color: #f2d494; }
[data-theme='tattoo'] .pk-wayin__option { --pk-site-stitch-inset: -4px; border-color: var(--pk-line); }
[data-theme='tattoo'] .pk-wayin__option:hover { border-color: rgb(222 178 112 / 0.6); }
[data-theme='tattoo'] .pk-wayin__title { color: #f2d494; }
[data-theme='tattoo'] .pk-wayin__text { line-height: var(--pk-lh-body); color: var(--pk-text-2); }
[data-theme='tattoo'] .pk-wayin__question { color: var(--pk-text-2); }
/* the chosen time: a sunken panel with its tracked caption, the time in brass and what it is for */
[data-theme='tattoo'] .pk-chosen:not(:has(> .pk-chosen__media)) { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
/* a service's name is the studio's own text: never capitalised by the style, which turns an English "i" into "İ" on a
   Turkish page (Piercing → PİERCİNG) */
[data-theme='tattoo'] .pk-chosen__title { font-family: var(--pk-mono); font-size: var(--pk-site-fs-caps); font-weight: var(--pk-fw-regular); letter-spacing: var(--pk-site-caps-track); color: rgb(223 175 106 / 0.8); }
[data-theme='tattoo'] .pk-chosen__line { font-family: var(--pk-mono); font-size: var(--pk-fs-item); color: var(--pk-text); }
[data-theme='tattoo'] .pk-chosen__meta { font-family: var(--pk-mono); font-size: var(--pk-fs-meta); color: var(--pk-text-3); }

/* dialogs: raised leather over the page blurred behind a dark scrim, popping in with a small overshoot */
[data-theme='tattoo'] :is(.pk-dialog, .pk-drawer) { --pk-site-stitch-inset: -5px; border: 1px solid rgb(170 123 64 / 0.45); background-color: var(--pk-tattoo-leather); box-shadow: var(--pk-float-shadow); }
[data-theme='tattoo'] :is(.pk-dialog, .pk-drawer)::backdrop { background: var(--pk-scrim); backdrop-filter: blur(8px); }
[data-theme='tattoo'] .pk-dialog[open] { animation: pk-tattoo-pop var(--pk-site-dur-enter) var(--pk-site-ease); }
[data-theme='tattoo'] .pk-dialog[open]::backdrop { animation: pk-tattoo-scrim var(--pk-dur-base) ease-out; }
[data-theme='tattoo'] .pk-dialog__head .pk-h3 { font-size: var(--pk-fs-item); letter-spacing: 0.3em; color: #dfaf6a; text-shadow: 0 0 12px rgb(200 164 104 / 0.3); }
@keyframes pk-tattoo-pop { from { opacity: 0; translate: 0 14px; scale: 0.96; } }
@keyframes pk-tattoo-scrim { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme='tattoo'] :is(.pk-dialog[open], .pk-dialog[open]::backdrop, .pk-checkbox:checked::after) { animation: none; }
}
[data-theme='tattoo'] .pk-site-header { border-bottom-color: rgb(170 123 64 / 0.45); background-image: var(--pk-site-layer-surface); }
[data-theme='tattoo'] .pk-site-menu { background-color: var(--pk-tattoo-leather); }
[data-theme='tattoo'] .pk-site-nav a { font-weight: var(--pk-fw-strong); color: #dfaf6a; }

/* notices: square boxes; information on a brass wash, a problem in the site's red */
[data-theme='tattoo'] .pk-notice {
  gap: var(--pk-space-6); padding: 12px 14px; border: 1px solid rgb(173 124 64 / 0.45); border-radius: 0; background: var(--pk-accent-soft);
  font-family: var(--pk-mono); font-size: var(--pk-fs-meta); line-height: var(--pk-lh-relaxed); color: var(--pk-text);
}
[data-theme='tattoo'] .pk-notice > .pk-icon { width: 16px; height: 16px; color: #dfaf6a; }
[data-theme='tattoo'] .pk-notice--danger { border-color: rgb(255 100 103 / 0.4); background: var(--pk-danger-soft); color: #ffc9c9; }
[data-theme='tattoo'] .pk-notice--danger > .pk-icon { color: var(--pk-danger-text); }
[data-theme='tattoo'] .pk-notice--success { border-color: rgb(159 207 149 / 0.4); background: var(--pk-success-soft); }
[data-theme='tattoo'] .pk-notice--success > .pk-icon { color: var(--pk-success-text); }
[data-theme='tattoo'] .pk-notice__title { font-weight: var(--pk-fw-heavy); letter-spacing: var(--pk-site-track); }

/* statuses (the manage page, the account's bookings): small tracked capitals in the brand's tones */
[data-theme='tattoo'] .pk-pill {
  height: auto; padding: 3px 10px; border-radius: var(--pk-r-tag); font-family: var(--pk-mono); font-size: var(--pk-fs-tiny); font-weight: var(--pk-fw-regular);
  letter-spacing: var(--pk-site-label-track); text-transform: var(--pk-site-caps-case);
}
[data-theme='tattoo'] .pk-pill:not([class*='pk-pill--']) { background: var(--pk-inset); color: var(--pk-text-2); }
/* tracked capitals run long: a pill alone in a card head's aside or among a workflow step's chips wraps onto a second line when
   it meets the row's end, instead of leaving the page */
[data-theme='tattoo'] :is(.pk-card__aside, .pk-wf__chips) > .pk-pill { white-space: normal; }
[data-theme='tattoo'] .pk-pill--success { box-shadow: inset 0 0 0 1px rgb(159 207 149 / 0.35); }
[data-theme='tattoo'] .pk-pill--warning { box-shadow: inset 0 0 0 1px rgb(233 195 126 / 0.35); }
[data-theme='tattoo'] .pk-pill--danger { box-shadow: inset 0 0 0 1px rgb(255 100 103 / 0.35); }

/* key-value rows (the receipt, the manage page): the label in tracked brass over its value in brass */
[data-theme='tattoo'] .pk-kv { grid-template-columns: minmax(0, 1fr); row-gap: var(--pk-site-space-3); }
[data-theme='tattoo'] .pk-kv__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0; border-top: 0; font-size: var(--pk-fs-item); }
[data-theme='tattoo'] .pk-kv__key { min-width: 0; font-size: var(--pk-site-fs-caps); letter-spacing: var(--pk-site-caps-track); text-transform: var(--pk-site-caps-case); color: rgb(223 175 106 / 0.8); }
[data-theme='tattoo'] .pk-kv__value { font-weight: var(--pk-fw-regular); color: var(--pk-text); }
@media (min-width: 640px) {
  [data-theme='tattoo'] :is(.pk-done__summary, .pk-site-card__rows) .pk-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pk-site-space-4); }
  [data-theme='tattoo'] :is(.pk-done__summary, .pk-site-card__rows) .pk-kv__row { grid-column: auto; }
}

/* the receipt: the reference large and selectable whole, the steps numbered in brass */
[data-theme='tattoo'] .pk-ref { padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--pk-mono); font-size: var(--pk-fs-title-xl); font-weight: var(--pk-fw-regular); line-height: 1.4; letter-spacing: 0.12em; color: var(--pk-text); }
[data-theme='tattoo'] .pk-done__ref { flex-direction: column; gap: var(--pk-space-2); font-family: var(--pk-mono); font-size: var(--pk-site-fs-caps); letter-spacing: var(--pk-site-caps-track); text-transform: var(--pk-site-caps-case); color: rgb(223 175 106 / 0.8); }
[data-theme='tattoo'] .pk-done__summary { padding-block: var(--pk-site-space-4); border-block-color: var(--pk-line); }
[data-theme='tattoo'] .pk-nextsteps__title { font-family: var(--pk-mono); font-size: var(--pk-fs-h2); font-weight: var(--pk-fw-heavy); letter-spacing: var(--pk-site-step-track); text-transform: var(--pk-site-caps-case); color: var(--pk-title-text); }
[data-theme='tattoo'] .pk-nextsteps > li { color: var(--pk-text-2); }
[data-theme='tattoo'] .pk-nextsteps > li::before { font-family: var(--pk-mono); color: #c99551; }
[data-theme='tattoo'] .pk-seal__ring { stroke: #c99551; }
[data-theme='tattoo'] .pk-seal__tick { stroke: #dfaf6a; }

/* times: a grid of leather chips, four to a row, six from 640px */
[data-theme='tattoo'] .pk-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
[data-theme='tattoo'] .pk-slot {
  --pk-site-stitch-inset: -3px;
  justify-content: center; height: 44px; padding: 0 var(--pk-space-4); border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-control); background-color: var(--pk-inset);
  font-size: var(--pk-fs-item); letter-spacing: var(--pk-site-track); color: rgb(223 175 106 / 0.85); box-shadow: var(--pk-raise-shadow);
  transition: border-color var(--pk-dur-base) ease, box-shadow var(--pk-dur-base) ease, color var(--pk-dur-base) ease, transform var(--pk-dur-move) ease;
}
[data-theme='tattoo'] .pk-slot:hover:not(:disabled, [aria-pressed='true']) { transform: translateY(var(--pk-site-lift)); border-color: rgb(222 178 112 / 0.8); color: #f2d494; box-shadow: var(--pk-site-lift-shadow-hover); }
[data-theme='tattoo'] .pk-slot[aria-pressed='true'] { border-color: var(--pk-site-chosen); background-color: var(--pk-current); color: var(--pk-on-current); box-shadow: var(--pk-site-chosen-shadow); }
[data-theme='tattoo'] .pk-slot:disabled { border-color: var(--pk-line); background-color: transparent; color: var(--pk-text-3); box-shadow: none; }
[data-theme='tattoo'] .pk-slots--wide { display: flex; flex-wrap: wrap; }
@media (min-width: 640px) {
  [data-theme='tattoo'] .pk-slots:not(.pk-slots--wide) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* the week: three-line leather days, the chosen one lit, a full one dimmed */
[data-theme='tattoo'] .pk-days--week { gap: 4px; }
[data-theme='tattoo'] .pk-day {
  --pk-site-stitch-inset: -3px;
  gap: 4px; border: 1px solid var(--pk-line-strong); border-radius: var(--pk-r-control); background-color: var(--pk-inset); color: rgb(223 175 106 / 0.85);
  box-shadow: var(--pk-raise-shadow); transition: border-color var(--pk-dur-base) ease, box-shadow var(--pk-dur-base) ease, color var(--pk-dur-base) ease;
}
[data-theme='tattoo'] .pk-day:hover:not(:disabled, [aria-pressed='true'], [aria-disabled='true']) { border-color: rgb(222 178 112 / 0.8); color: #f2d494; box-shadow: var(--pk-site-lift-shadow-hover); }
[data-theme='tattoo'] .pk-day[aria-pressed='true'] { border-color: var(--pk-site-chosen); background-color: var(--pk-current); color: var(--pk-on-current); box-shadow: var(--pk-site-chosen-shadow); }
[data-theme='tattoo'] :is(.pk-day__dow, .pk-day__month) { font-size: var(--pk-fs-micro); letter-spacing: calc(var(--pk-site-track) * 2); color: inherit; }
[data-theme='tattoo'] .pk-day__num { font-family: var(--pk-mono); font-size: var(--pk-fs-figure-sm); font-weight: var(--pk-fw-regular); line-height: 1.1; }
[data-theme='tattoo'] .pk-days--week > .pk-day:is([data-state='full'], [data-state='out'], [data-state='unknown']) {
  border-color: rgb(170 123 64 / 0.2); background-color: rgb(33 23 16 / 0.35); color: rgb(223 175 106 / 0.3); box-shadow: none;
}

/* the month (kept for a studio that pages by month): square leather days */
[data-theme='tattoo'] .pk-datepick__title { font-family: var(--pk-mono); font-size: var(--pk-site-fs-caps); letter-spacing: var(--pk-site-caps-track); text-transform: var(--pk-site-caps-case); color: #dfaf6a; }
[data-theme='tattoo'] .pk-datepick__dow { font-family: var(--pk-mono); font-size: var(--pk-fs-micro); color: var(--pk-text-3); }
[data-theme='tattoo'] .pk-datepick__day { border-radius: var(--pk-r-control); font-family: var(--pk-mono); color: var(--pk-text-2); }
[data-theme='tattoo'] .pk-datepick__day[aria-pressed='true'] { background: var(--pk-current); color: var(--pk-on-current); box-shadow: var(--pk-ring-chosen); }
[data-theme='tattoo'] .pk-datepick__message { font-family: var(--pk-mono); font-size: var(--pk-fs-tiny); color: var(--pk-danger-text); }

/* picture cards and the other customer cards: sunken panels, their titles in tracked capitals */
[data-theme='tattoo'] .pk-pickcard { border-color: var(--pk-line); border-radius: var(--pk-r-card); background-color: var(--pk-card); }
[data-theme='tattoo'] .pk-pickcard:hover { border-color: rgb(222 178 112 / 0.6); }
[data-theme='tattoo'] .pk-pickcard__title { font-family: var(--pk-mono); font-size: var(--pk-fs-title); font-weight: var(--pk-fw-heavy); letter-spacing: 0.08em; color: #f2d494; }
[data-theme='tattoo'] .pk-pickcard__tag { border-radius: var(--pk-r-tag); font-family: var(--pk-mono); text-transform: var(--pk-site-caps-case); }
[data-theme='tattoo'] :is(.pk-pickcard__media, .pk-site-figure > img) { border-radius: var(--pk-site-r-image); }
[data-theme='tattoo'] .pk-site-card__map > :is(img, iframe) { aspect-ratio: var(--pk-site-ratio-wide); filter: grayscale(0.35); }

/* text: the reading face in brass, legal headings in the reading face */
[data-theme='tattoo'] .pk-prose { font-size: var(--pk-fs-item); line-height: var(--pk-lh-prose); color: rgb(242 212 148 / 0.8); }
[data-theme='tattoo'] .pk-prose :is(h2, h3) { font-family: var(--pk-font); font-size: var(--pk-fs-title-lg); font-weight: var(--pk-fw-regular); letter-spacing: 0; text-transform: none; color: var(--pk-text); }
[data-theme='tattoo'] .pk-prose li::marker { color: #c99551; }
[data-theme='tattoo'] .pk-site-section__title { color: #dfaf6a; }
[data-theme='tattoo'] .pk-site-footer__mark { color: rgb(201 149 81 / 0.4); letter-spacing: 0.3em; }
[data-theme='tattoo'] .pk-site-choice__label { color: #dfaf6a; }
[data-theme='tattoo'] .pk-site-choice__note { font-family: var(--pk-mono); color: var(--pk-text-3); }
[data-theme='tattoo'] .pk-held__count { color: var(--pk-text-3); }
[data-theme='tattoo'] .pk-held__thumb { border-color: rgb(141 99 50 / 0.45); }

/* the flow in a dialog: the dialog's head in tracked brass, its foot on the leather */
[data-theme='tattoo'] .pk-site-dialog--flow > .pk-dialog__head { border-bottom-color: var(--pk-line); }
:where([data-theme='tattoo']) .pk-site-formfoot { justify-content: flex-start; padding-top: 0; border-top: 0; }

/* a package's figure and a booking's date leaf in brass on the leather */
[data-theme='tattoo'] .pk-packcard__number { font-family: var(--pk-mono); color: var(--pk-accent-text); }
[data-theme='tattoo'] .pk-dateleaf { border-radius: var(--pk-r-control); font-family: var(--pk-mono); }
[data-theme='tattoo'] .pk-dateleaf__day { color: var(--pk-text); }
[data-theme='tattoo'] .pk-site-booking__title { font-family: var(--pk-mono); font-size: var(--pk-fs-item); letter-spacing: var(--pk-site-track); }
/* the track and the editor's tool row keep no room: where they swipe (phones, touch), a segment or a tool draws its ring inside
   itself */
@media (pointer: coarse), (max-width: 1023px) {
  [data-theme='tattoo'] :is(.pk-seg__item, .pk-editor__tool, .pk-editor__style):focus-visible { outline-offset: calc(-1 * var(--pk-focus-offset)); }
}
/* the brand has no colour blocks: a block (brand, ink, warning, success, AI) stays sunken leather and its words take the brass,
   its inner panel the raised leather; a next step's badge sits on that leather */
[data-theme='tattoo'] :is(.pk-card--accent, .pk-card--ink, .pk-card--warning, .pk-card--success, .pk-card--ai) { color: var(--pk-text); color-scheme: dark; --pk-focus-outline: 2px solid var(--pk-primary-edge); }
[data-theme='tattoo'] :is(.pk-card--accent, .pk-card--ink, .pk-card--warning, .pk-card--success, .pk-card--ai) .pk-inset { background: var(--pk-inset); color: inherit; }
[data-theme='tattoo'] :is(.pk-card--accent, .pk-card--ink, .pk-card--warning, .pk-card--success, .pk-card--ai) :is(.pk-label, .pk-meta, .pk-muted, .pk-kv__key, .pk-unit) { color: var(--pk-text-2); }
[data-theme='tattoo'] .pk-nextcard__due { background: var(--pk-inset); color: var(--pk-text); }