/* Copied from the staff app (astrateg app) on 15.10.2026; change there first, then copy. */
/* The shared kit (docs/ops.md, section 50; helpers in app/kit.js): the look the owner
   chose on 9.10.2026 for adding things and for every block. A soft coloured rounded
   square with an icon per kind, a section head (icon, title, one line), an "add" tile
   with a plus and a counter, a friendly empty state, a notice strip, the counted line.
   Colour lives ONLY in the icon squares. The product stays navy, with the brand pink for
   a screen's one primary action and for what is late (tokens.css).
   Contrast (WCAG 2.x), glyph on its soft square, 3:1 needed: navy 12.1, purple 5.99,
   green 5.72, orange 5.07, pink 5.15, blue 6.19, teal 5.46. */
:root {
  --k-navy: #0E2260;   --k-navy-soft: #E4E8F3;
  --k-purple: #5B3FC4; --k-purple-soft: #EEE9FB;
  --k-green: #0F6B3D;  --k-green-soft: #E2F3EA;
  --k-orange: #A84B00; --k-orange-soft: #FFEFDC;
  --k-pink: #C4124F;   --k-pink-soft: #FEEAF1;
  --k-blue: #1D4FB8;   --k-blue-soft: #E4ECFD;
  --k-teal: #0B6B6B;   --k-teal-soft: #DDF3F1;
}

/* ── The icon square ── */
.k-svg { display: block; flex: none; }
.k-ico {
  --k-fg: var(--k-navy); --k-bg: var(--k-navy-soft);
  display: inline-grid; place-items: center; flex: none;
  inline-size: 40px; block-size: 40px; border-radius: 13px;
  background: var(--k-bg); color: var(--k-fg);
}
.k-ico-sm { inline-size: 28px; block-size: 28px; border-radius: 9px; }
.k-ico-lg { inline-size: 48px; block-size: 48px; border-radius: 15px; }
[data-tone='purple'] { --k-fg: var(--k-purple); --k-bg: var(--k-purple-soft); }
[data-tone='green'] { --k-fg: var(--k-green); --k-bg: var(--k-green-soft); }
[data-tone='orange'] { --k-fg: var(--k-orange); --k-bg: var(--k-orange-soft); }
[data-tone='pink'] { --k-fg: var(--k-pink); --k-bg: var(--k-pink-soft); }
[data-tone='blue'] { --k-fg: var(--k-blue); --k-bg: var(--k-blue-soft); }
[data-tone='teal'] { --k-fg: var(--k-teal); --k-bg: var(--k-teal-soft); }

/* An existing heading that took an icon square in front of its words (headIcon). */
.k-h { display: flex; align-items: center; gap: 8px; }
/* The square adds no height to its heading's line. */
.k-h > .k-ico { margin-block: -4px; }

/* ── The section head ── */
.k-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.k-head-t { flex: 1 1 auto; min-width: 0; }
.k-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-family: var(--ds-font-h); font-size: 19px; font-weight: 400; line-height: 1.25; color: var(--ds-ink); }
.k-title:focus { outline: none; }
.k-hint { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--ds-muted); }
.k-count {
  display: inline-grid; place-items: center; min-inline-size: 24px; block-size: 24px; padding: 0 7px; border-radius: var(--ds-r-pill);
  background: var(--ds-soft); color: var(--ds-ink-2); font-family: var(--ds-font-b); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}

/* ── The "add" tile ── */
.k-add {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 12px; max-inline-size: 100%;
  border: 1.5px dashed var(--ds-edge); border-radius: var(--ds-r-item); background: var(--ds-surface); color: var(--ds-ink);
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; text-align: start;
  transition: background-color var(--ds-t-fast), border-color var(--ds-t-fast);
}
.k-add:hover { background: var(--ds-soft); border-color: var(--ds-navy); }
.k-add-plus { --k-fg: var(--k-navy); --k-bg: var(--k-navy-soft); display: inline-grid; place-items: center; flex: none; inline-size: 30px; block-size: 30px; border-radius: 10px; background: var(--k-bg); color: var(--k-fg); }
.k-add-label { min-width: 0; overflow-wrap: anywhere; }
.k-add .k-count { margin-inline-start: 2px; }

/* ── The empty state ── */
.k-empty {
  display: grid; justify-items: center; gap: 10px; padding: 24px 16px; margin: 8px 0; text-align: center;
  border-radius: var(--ds-r-card); background: var(--ds-surface);
}
.k-empty > p { margin: 0; padding: 0; max-inline-size: 420px; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--ds-ink-2); }
.k-empty .btn { min-height: 44px; }

/* ── The notice strip ── */
.k-notice { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: var(--ds-r-item); background: var(--k-navy-soft); color: var(--ds-ink); }
.k-notice-t { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.4; }
.k-notice-ok { background: var(--ds-ok-soft); }
.k-notice-warn { background: var(--ds-amber-soft); }
.k-notice-late { background: var(--ds-hot-soft); }
.k-notice > .k-ico { background: var(--ds-surface); }

/* ── The counted line ──
   Text on its surface, 4.5:1 needed: ink on white 17.96, on the late soft 15.61, on the
   today soft 16.31; the small second line (muted) 5.88 / 5.11 / 5.34. The number: ink on
   the pink 4.67 (large and bold: 3:1 needed), white on amber 6.43, white on navy 18.15,
   navy on its soft square 12.1. The button: white on navy 18.15. */
.k-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px;
  min-height: 60px; padding: 10px 12px; border-radius: var(--ds-r-item);
  background: var(--ds-surface); color: var(--ds-ink); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--ds-line);
  transition: box-shadow var(--ds-t-fast), transform var(--ds-t-fast) var(--ds-ease);
}
.k-num {
  display: inline-grid; place-items: center; min-inline-size: 44px; block-size: 44px; padding: 0 8px; border-radius: 14px;
  background: var(--ds-navy); color: var(--ds-on-navy);
  font-family: var(--ds-font-h); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.k-num::before { content: attr(data-n); }
.k-line-t { min-width: 0; font-size: 15.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.k-line-sub { display: block; margin-top: 1px; font-size: 13px; font-weight: 400; color: var(--ds-muted); }
/* The " · " before the second line stays in the text and is not drawn. */
.k-sep { font-size: 0; }
.k-go {
  display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 6px 10px 6px 14px; border-radius: var(--ds-r-pill);
  background: var(--ds-navy); color: var(--ds-on-navy); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.k-line-late { background: var(--ds-hot-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-hot) 35%, transparent); }
.k-line-late .k-num { background: var(--ds-hot); color: var(--ds-on-hot); }
.k-line-today { background: var(--ds-amber-soft); box-shadow: inset 0 0 0 1px var(--ds-amber-line); }
.k-line-today .k-num { background: var(--ds-amber); color: #fff; }
.k-line-landing { box-shadow: var(--ds-shadow-hover); }
.k-line-landing .k-num { background: var(--k-navy-soft); color: var(--k-navy); }
@media (hover: hover) { .k-line:hover .k-go { background: var(--ds-navy-2); } .k-line:hover { box-shadow: inset 0 0 0 1.5px var(--ds-navy); } }
.k-line:active { transform: scale(.985); }
.k-line:focus-visible { outline: 3px solid var(--ds-navy); outline-offset: 2px; }
/* A phone: the three parts stay in one row; the sentence wraps, the button stays a button. */
@media (max-width: 480px) {
  .k-line { gap: 6px 10px; min-height: 52px; padding: 6px 10px; }
  .k-num { min-inline-size: 40px; block-size: 40px; font-size: 22px; border-radius: 13px; }
  .k-line-t { font-size: 15px; }
  .k-go { padding: 6px 6px 6px 12px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .k-line, .k-add { transition: none; } .k-line:active { transform: none; } }
@media print { .k-go { display: none; } .k-line, .k-empty { box-shadow: none; border: 1px solid #999; background: #fff; } }

/* client and owner screens */
/* The additions of the client card, the manager view, the sales pages, the quote builder
   and the pages the agency's clients open (docs/ops.md, section 53; helpers at the end of
   app/kit.js). Appended only. Contrast, text on its pill (4.5:1 needed): plain 9.0,
   ok 5.7, warn 5.9, late 5.15, info 6.19; the plus of a tile (navy on the soft) 12.1. */

/* ── A head that already existed, with the icon square at its start (dressHead) ──
   A heading and its hint as direct children: the square spans both lines. */
.k-sidehead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.k-sidehead > .k-ico { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.k-sidehead > :is(h1, h2, h3, div, legend) { grid-column: 2; min-width: 0; }
.k-sidehead > p { grid-column: 2 / -1; min-width: 0; }
.k-sidehead > :is(.btn, .k-pill, .k-end) { grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 480px) {
  .k-sidehead { column-gap: 10px; }
  .k-sidehead > .k-ico { inline-size: 36px; block-size: 36px; border-radius: 12px; }
}

/* ── The status pill ── */
.k-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: var(--ds-r-pill);
  background: var(--ds-soft); color: var(--ds-ink-2); font-family: var(--ds-font-b); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.k-pill::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: none; }
.k-pill-ok { background: var(--ds-ok-soft); color: var(--ds-ok); }
.k-pill-warn { background: var(--ds-amber-soft); color: var(--ds-amber); }
.k-pill-late { background: var(--ds-hot-soft); color: var(--ds-hot-text); }
.k-pill-info { background: var(--k-blue-soft); color: var(--k-blue); }

/* ── The tile of a kind that can be added (tile) ── */
.k-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; min-width: 0; }
.k-tile {
  position: relative; display: grid; justify-items: start; align-content: start; gap: 2px; min-height: 104px; min-width: 0; inline-size: 100%; padding: 12px;
  border: 1px solid var(--ds-line); border-radius: var(--ds-r-item); background: var(--ds-surface); color: var(--ds-ink);
  font: inherit; text-align: start; cursor: pointer; list-style: none;
  transition: border-color var(--ds-t-fast), box-shadow var(--ds-t-fast), transform var(--ds-t-fast) var(--ds-ease);
}
.k-tile::-webkit-details-marker { display: none; }
.k-tile > .k-ico { margin-bottom: 8px; }
.k-tile-plus {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: grid; place-items: center; inline-size: 26px; block-size: 26px;
  border-radius: 50%; background: var(--ds-soft); color: var(--k-navy);
}
.k-tile-name { min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.k-tile-n { font-size: 13px; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .k-tile:hover { border-color: var(--ds-navy); box-shadow: var(--ds-shadow-hover); } .k-tile:hover .k-tile-plus { background: var(--ds-navy); color: var(--ds-on-navy); } }
.k-tile:active { transform: scale(.98); }
.k-tile:focus-visible { outline: 3px solid var(--ds-navy); outline-offset: 2px; }
@media (max-width: 480px) { .k-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .k-tile { min-height: 96px; padding: 10px; } }

/* ── The quiet empty line (emptyRow) ── */
.k-emptyrow {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 52px; padding: 10px 14px;
  border: 1px solid var(--ds-line); border-radius: var(--ds-r-item); background: var(--ds-ground); color: var(--ds-muted); text-align: center;
}
.k-emptyrow > :is(p, span) { margin: 0; min-width: 0; font-size: 14.5px; line-height: 1.4; color: var(--ds-muted); }

/* ── A small card inside a block, and its head (cardHead) ── */
.k-card { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-item); background: var(--ds-surface); }
.k-cardhead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.k-cardhead > :is(h2, h3, h4) { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.k-cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
@media (max-width: 720px) { .k-cards-2 { grid-template-columns: minmax(0, 1fr); } }

/* ── A row with an icon square, the key fact, a hint, and one action at the end ── */
.k-linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ds-line); border-radius: var(--ds-r-item); background: var(--ds-surface); }
.k-linkrow-t { flex: 1 1 200px; min-width: 0; }
.k-linkrow-t > :first-child { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.k-linkrow-t > .k-hint { font-weight: 400; }
.k-linkrow > .btn { flex: none; }

/* ── The filled navy button: an area's one main action that is not the screen's pink one ── */
.btn.k-btn-navy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--ds-navy); border-color: var(--ds-navy); color: var(--ds-on-navy); }
.btn.k-btn-navy:hover { background: var(--ds-navy-2); border-color: var(--ds-navy-2); color: var(--ds-on-navy); }
/* A link or a text button with a small icon before its words. */
.k-with-ico { display: inline-flex; align-items: center; gap: 6px; }

@media (prefers-reduced-motion: reduce) { .k-tile { transition: none; } .k-tile:active { transform: none; } }
@media print {
  .k-tile-plus { display: none; }
  .k-tile, .k-card, .k-linkrow, .k-row, .k-emptyrow, .k-notice { background: #fff; border: 1px solid #999; box-shadow: none; }
  .k-pill { background: #fff; border: 1px solid #999; color: #000; }
}
.k-beside { display: flex; align-items: center; gap: 12px; min-width: 0; }
.k-beside > :not(.k-ico) { flex: 1 1 auto; min-width: 0; margin-block: 0; }
/* The row is gone with its sentence. */
.k-beside:has(> [hidden]) { display: none; }
.k-beside.k-emptyrow > :not(.k-ico) { flex: 0 1 auto; padding: 0; }
/* A page's own head (kicker, h1, one line) with a large square. */
.k-sidehead > .k-ico-lg { grid-row: 1 / span 3; align-self: center; }
/* The quote builder's own heads (index.html): the number of the step, then the square. */
.block-head > .k-ico { inline-size: 38px; block-size: 38px; }
.group-head > .k-h { align-self: center; }
.notice > .k-ico { flex: none; margin-inline-end: 8px; vertical-align: middle; }
@media (max-width: 480px) { .block-head > .idx:has(+ .k-ico) { display: none; } }
/* A fieldset's legend with its square (the details form of the client card). */
legend.k-h { display: inline-flex; padding-inline: 6px; }
/* end: client and owner screens */

/* office screens */
/* ── The office's screens (docs/ops.md, section 52) ──
   Pills, 4.5:1 needed: late #C4124F on #FEEAF1 5.15; today #855400 on #FFF3D9 5.9;
   ok #0F6B3D on #E2F3EA 5.72; plain ink-2 on soft 9.2; navy white on navy 18.15. */
.k-ico-first { order: -1; }
.k-pill {
  display: inline-flex; align-items: center; gap: 4px; min-block-size: 24px; padding: 2px 10px; border-radius: var(--ds-r-pill);
  background: var(--ds-soft); color: var(--ds-ink-2); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.k-pill-late { background: var(--ds-hot-soft); color: var(--ds-hot-text); }
.k-pill-today { background: var(--ds-amber-soft); color: var(--ds-amber); }
.k-pill-ok { background: var(--ds-ok-soft); color: var(--ds-ok); }
.k-pill-navy { background: var(--ds-navy); color: var(--ds-on-navy); }

/* A list of things as rows. */
.k-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.k-row {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 10px 12px;
  border-radius: var(--ds-r-item); background: var(--ds-surface); color: var(--ds-ink); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--ds-line);
}
.k-row-t { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.k-row-title { font-size: 15.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.k-row-sub { font-size: 14px; line-height: 1.4; color: var(--ds-muted); overflow-wrap: anywhere; }
a.k-row { transition: box-shadow var(--ds-t-fast); }
@media (hover: hover) { a.k-row:hover { box-shadow: inset 0 0 0 1.5px var(--ds-navy); } }
a.k-row:focus-visible { outline: 3px solid var(--ds-navy); outline-offset: 2px; }
.k-row > .k-pill, .k-row > .btn { flex: none; }

/* Small facts in one wrapping line. The parts are inline, so read as text they are one
   sentence with its " · " (kept, not drawn). */
.k-facts { list-style: none; margin: -3px -4px; padding: 0; min-width: 0; font-size: 14px; line-height: 1.35; }
.k-facts > li { display: inline; }
.k-fact {
  display: inline-block; max-inline-size: 100%; margin: 3px 4px; padding: 5px 12px 5px 10px; vertical-align: top;
  border-radius: var(--ds-r-sm); background: var(--ds-ground); color: var(--ds-ink-2); overflow-wrap: anywhere;
}
.k-fact > .k-svg { display: inline-block; margin-inline-end: 6px; vertical-align: -3px; color: var(--ds-muted); }

/* An existing sentence as a notice strip (noteIcon). */
.k-note { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: var(--ds-r-item); background: var(--k-navy-soft); color: var(--ds-ink); font-size: 14.5px; line-height: 1.4; }
.k-note-ok { background: var(--ds-ok-soft); }
.k-note-warn { background: var(--ds-amber-soft); }
.k-note-late { background: var(--ds-hot-soft); }
.k-note > .k-ico { background: var(--ds-surface); }

/* A section: its head, then its things, with air between. */
.k-sec { display: grid; gap: 12px; min-width: 0; }
.k-sec > * { margin: 0; min-width: 0; }
.k-head > .btn, .k-head > .k-pill { flex: none; }
@media (max-width: 480px) {
  .k-row { gap: 10px; padding: 8px 10px; }
  .k-row-title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { a.k-row { transition: none; } }
@media print { .k-row { box-shadow: none; border: 1px solid #999; } .k-note, .k-fact, .k-pill { background: #fff; } }

/* Leftover of the visual pass of 9.10.2026: a long unbroken name wraps inside a note or a notice. */
.k-note, .k-notice-t, .k-note > :not(.k-ico) { overflow-wrap: anywhere; min-inline-size: 0; }

/* A leaf of a calendar (dateLeaf) and the row that starts with one (leafRow): section 61. */
.k-leaf {
  --k-fg: var(--k-purple); flex: none; display: grid; inline-size: 62px; overflow: hidden; text-align: center;
  border-radius: 14px; background: var(--ds-surface); box-shadow: 0 4px 10px color-mix(in srgb, var(--ds-ink) 9%, transparent);
}
.k-leaf-top { background: var(--k-fg); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.9; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.k-leaf-day { font-family: var(--ds-font-h); font-size: 24px; font-weight: 400; line-height: 1.25; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.k-leaf-sub { padding-block-end: 5px; font-size: 11.5px; line-height: 1.3; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.k-leaf-navy { --k-fg: var(--ds-navy); } .k-leaf-blue { --k-fg: var(--k-blue); } .k-leaf-purple { --k-fg: var(--k-purple); }
.k-leaf-pink { --k-fg: var(--k-pink); } .k-leaf-green { --k-fg: var(--k-green); } .k-leaf-orange { --k-fg: var(--k-orange); } .k-leaf-teal { --k-fg: var(--k-teal); }
.k-leafrow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px; border-radius: var(--ds-r-item); background: var(--ds-ground); }
.k-leafrow-b { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
@media print { .k-leaf { box-shadow: none; border: 1px solid #999; } .k-leaf-top { color: #000; background: #fff; border-bottom: 1px solid #999; } .k-leafrow { background: #fff; } }

/* section 61: no pale rows */
/* ── "No pale rows" (the owner, 13.10.2026; docs/ops.md, section 61; helpers at the end of
   app/kit.js). Appended only. A row of a list is a card with a mark at its start (a leaf of
   its moment, or the icon square of its kind), one bold title, a state as a pill, counts as
   bold numbers. White on the band of a leaf (4.5:1 needed): navy 18.15, blue 7.34, purple 7.11,
   pink 5.92, green 6.58, orange 5.72, teal 6.31. */
/* The leaf whose words are drawn from its data (leafMark): the row's own text says the date. */
.k-leaf-mark > [data-t]::before { content: attr(data-t); }
.k-leaf-sm { inline-size: 52px; border-radius: 12px; }
.k-leaf-sm .k-leaf-top { font-size: 11px; line-height: 1.75; }
.k-leaf-sm .k-leaf-day { font-size: 20px; line-height: 1.2; }
.k-leaf-sm .k-leaf-sub { font-size: 11px; padding-block-end: 4px; }
/* A day said with its month ("16.10") is drawn a little smaller, so it stays inside the leaf. */
.k-leaf-mark > .k-leaf-day[data-t*='.'] { font-size: 19px; line-height: 1.55; letter-spacing: -.02em; }
.k-leaf-sm > .k-leaf-day[data-t*='.'] { font-size: 16.5px; line-height: 1.45; }
/* A leaf with no hour keeps a little air under its number. */
.k-leaf > .k-leaf-day:last-child { padding-block-end: 4px; }

/* A card of a list: a white surface on the tinted list, a mark at its start, its content,
   and what sits at its far end. `.k-pc-late`: the hot edge of what is late (the words say it). */
.k-pc { display: grid; gap: 10px; min-width: 0; padding: 12px; border-radius: var(--ds-r-item); background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-line); }
.k-pc-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; min-width: 0; }
.k-pc-mark { display: grid; justify-items: center; align-content: start; inline-size: 62px; flex: none; }
.k-pc-body { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.k-pc-late { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-hot) 32%, transparent); }
/* The items of a card, inside it: each a soft inset row. */
.k-inset { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.k-inset > li, .k-inset-row { min-width: 0; padding: 6px 12px; border-radius: var(--ds-r-sm); background: var(--ds-ground); }

@media (max-width: 480px) {
  .k-pc { padding: 10px; }
  .k-pc-top { gap: 10px; }
  .k-pc-mark, .k-pc-mark > .k-leaf { inline-size: 54px; }
  .k-pc-mark > .k-leaf .k-leaf-day { font-size: 21px; }
}
@media print { .k-pc, .k-inset > li, .k-inset-row { background: #fff; box-shadow: none; border: 1px solid #999; } }
/* end: section 61 */