/* ==========================================================================
   KuduDoc v6 — templates (after pages/_feature.css).
   Only this page's own parts (prefix tp-): the family chips in the opening, the fill-in panel (form beside the lease),
   the five-step rail, the English/Afrikaans pair, and the template shelves (one white panel per family, a row per
   template: name, what it covers, review date and the two actions). Everything else is the kit.
   ========================================================================== */

/* ---------------------------------------------------------------- family chips (a jump list in the opening) */
.fk .tp-fams { margin-top: 40px; }
.fk .tp-fams ul { display: flex; flex-wrap: wrap; gap: 8px; }
html body .fk .tp-fams a {
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px 0 14px; border-radius: 999px;
  font: 600 14px/1 var(--font-sans); letter-spacing: -.005em; color: #fff; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .38); transition: background-color 140ms var(--v6-ease), box-shadow 140ms var(--v6-ease);
}
.fk .tp-fams a::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--fk-sky); transform: skewX(-14deg); }
html body .fk .tp-fams a:hover { background: rgba(191, 227, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .7); }
html body .fk .tp-fams a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------------------------------------------------------------- the fill-in panel: form beside the lease */
.fk .tp-fill { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 22px; align-items: stretch; }
.fk .tp-form { gap: 16px; }
.fk .tp-form-head { display: flex; flex-direction: column; gap: 10px; }
.fk .tp-form-head .fk-app-sub { margin-top: 0; }
.fk .tp-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fk .tp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #eff3f7; }
.fk .tp-seg span { padding: 5px 12px; border-radius: 7px; font: 600 12px/1.2 var(--font-sans); color: var(--fk-mute); }
.fk .tp-seg .is-on { background: #fff; color: var(--fk-ink); box-shadow: 0 1px 2px rgba(16, 45, 73, .1), 0 0 0 1px rgba(16, 45, 73, .05); }
.fk .tp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fk .tp-fields .tp-wide { grid-column: 1 / -1; }
.fk .tp-fields .fk-field-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk .tp-caret { display: inline-block; flex: none; width: 1.5px; height: 16px; margin-left: 1px; background: var(--fk-blue); }
.fk [data-tp-play].is-typing .tp-caret { animation: tp-blink 1s steps(1) infinite; }
@keyframes tp-blink { 50% { opacity: 0; } }
.fk .tp-period { display: flex; gap: 9px; font: 400 12.5px/1.5 var(--font-sans); color: var(--fk-mute); }
.fk .tp-period::before { content: ""; flex: none; width: 3px; height: 12px; margin-top: 3px; border-radius: 2px; background: var(--fk-blue); transform: skewX(-14deg); }
.fk .tp-form-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fk-line-2);
}
.fk .tp-left { font: 500 12px/1.4 var(--font-sans); color: var(--fk-mute); }

/* the preview pane */
.fk .tp-paper { gap: 12px; padding: 14px 16px 18px; border-radius: 12px; background: #f1f5f9; box-shadow: inset 0 0 0 1px #e6ecf2; }
.fk .tp-paper-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 11.5px/1.2 var(--font-sans); color: var(--fk-mute); }
.fk .tp-doc { padding: 24px 24px 22px; }
.fk .tp-doc .fk-doc-title { font-size: 19px; }
.fk .tp-clauses { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.fk .tp-clauses .fk-doc-lines { margin: 4px 0; }
.fk .tp-clauses .fk-doc-clause { font-size: 12px; line-height: 1.65; }
.fk .tp-v {
  padding: 1px 4px; border-radius: 3px; background: #edf4fb; box-shadow: inset 0 -1px 0 #bcd5ec;
  font-weight: 600; color: var(--fk-blue-deep); white-space: nowrap;
}
.fk .tp-v--live { background: #dcebfa; box-shadow: inset 0 -1.5px 0 var(--fk-blue); }
.fk .tp-v--live.is-empty { font-weight: 500; color: var(--fk-faint); background: #f4f7fa; box-shadow: inset 0 -1px 0 #cbd6e1; }
.fk .tp-own { position: relative; padding-left: 10px; box-shadow: inset 2px 0 0 #9fc2e4; }
.fk .tp-own-tag {
  display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 999px; vertical-align: 1px;
  background: #eef2f6; font: 600 9.5px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: #4d6076;
}
.fk .tp-doc .fk-doc-sign { margin-top: 18px; }

/* signers and sealed tabs */
.fk .tp-av-2 { background: #ecf0f4; color: #465a70; }
.fk .tp-msg p:not(.fk-label) { margin-top: 8px; font: 400 13px/1.55 var(--font-sans); color: var(--fk-ink-2); }
.fk .tp-check { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fk .tp-check .fk-kv { align-self: stretch; margin-top: 6px; }
.fk .tp-check .fk-btn { margin-top: 8px; }
.fk .tp-sealed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--fk-line-2); }
.fk .tp-sealed .fk-kv code { font: 500 12px/1.5 var(--fk-mono); color: var(--fk-ink-2); overflow-wrap: anywhere; }
.fk .tp-remind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.fk .tp-remind li { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: #f5f8fb; box-shadow: inset 0 0 0 1px var(--fk-line-2); }
.fk .tp-remind b { font: 600 13px/1.25 var(--font-sans); color: var(--fk-ink); }
.fk .tp-remind small { font: 400 11.5px/1.3 var(--font-sans); color: var(--fk-mute); }

/* ---------------------------------------------------------------- five steps on one rail */
@media (min-width: 1180px) {
  .fk .tp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 26px; }
  .fk .tp-steps h3 { font-size: 18px; }
  .fk .tp-steps p { font-size: 15px; }
}
@media (min-width: 1001px) and (max-width: 1179px) {
  .fk .tp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
  .fk .tp-steps::before { display: none; }
}
.fk .tp-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--fk-line); }
.fk .tp-after .fk-after { margin-top: 0; }

/* ---------------------------------------------------------------- English and Afrikaans, clause for clause */
.fk .tp-reviewed { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.fk .tp-reviewed .fk-list--rule > li.is-key b { margin-bottom: 0; }
.fk .tp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.fk .tp-mini { padding: 22px 22px 20px; }
.fk .tp-mini .fk-doc-title { margin-top: 10px; font-size: 17px; line-height: 1.25; }
.fk .tp-mini-clauses { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; counter-reset: tp-cl; }
.fk .tp-mini-clauses li { position: relative; padding-left: 22px; counter-increment: tp-cl; font: 600 12px/1.45 var(--font-sans); color: var(--fk-ink); }
.fk .tp-mini-clauses li::before { content: counter(tp-cl) "."; position: absolute; left: 0; color: var(--fk-blue); }
.fk .tp-mini .fk-doc-lines { margin: 14px 0 0; }

/* ---------------------------------------------------------------- the families */
.fk .tp-fam-head { margin-bottom: 26px; }
.fk .tp-fam-head .fk-eyebrow { display: flex; align-items: center; gap: 10px; }
.fk .tp-law { max-width: 84ch; margin: 0 0 30px; }
.fk .tp-law > li { font-size: 15.5px; }
.fk .tp-law > li + li { margin-top: 8px; }
.fk .tp-fam-head + .tp-shelf { margin-top: 4px; }

/* one white panel per family; a row per template */
.fk .tp-shelf { border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh); padding: 0 30px; overflow: hidden; }
.fk .tp-tpl {
  display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr) 196px; gap: 10px 40px; align-items: start;
  padding: 28px 0; border-top: 1px solid var(--fk-line-2); scroll-margin-top: 104px;
}
.fk .tp-tpl:first-child { border-top: 0; }
.fk .tp-tpl-name h3 { font: 650 18.5px/1.28 var(--font-display); letter-spacing: -.016em; color: var(--fk-ink); text-wrap: balance; }
.fk .tp-af { margin-top: 5px; font: 400 13.5px/1.4 var(--font-sans); color: var(--fk-mute); }
.fk .tp-tpl-line { font: 400 15.5px/1.55 var(--font-sans); color: var(--fk-ink-2); }
.fk .tp-covers-h { margin: 16px 0 7px; font: 600 11px/1.2 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fk-mute); }
.fk .tp-tpl-body .tp-covers-h:first-child { margin-top: 0; }
.fk .tp-tpl-body > .tp-tpl-line + .tp-covers { margin-top: 12px; }
.fk ul.tp-covers { display: flex; flex-wrap: wrap; row-gap: 1px; font: 400 13.5px/1.7 var(--font-sans); color: var(--fk-body); }
.fk ul.tp-covers li { min-width: 0; }
.fk ul.tp-covers li:not(:last-child)::after { content: "·"; margin: 0 8px; color: #a9b7c6; }
.fk .tp-tpl-note { margin-top: 14px; padding-left: 14px; box-shadow: inset 2px 0 0 #d3e2f0; font: 400 14px/1.6 var(--font-sans); color: var(--fk-body); }
.fk .tp-tpl-note a, .fk .tp-law a { color: var(--fk-blue); }
.fk .tp-tpl-note a:hover { color: var(--fk-blue-deep); }
.fk .tp-tpl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.fk .tp-rev { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.3 var(--font-sans); color: var(--fk-mute); white-space: nowrap; }
.fk .tp-rev::before { content: ""; width: 3px; height: 11px; border-radius: 2px; background: var(--fk-blue); transform: skewX(-14deg); }
.fk .tp-rev time { font-weight: 600; color: var(--fk-ink-2); }
.fk .tp-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
html body .fk .tp-use {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  background: var(--fk-ice); box-shadow: inset 0 0 0 1px #cfe2f5; font: 600 13.5px/1 var(--font-sans); color: var(--fk-blue-deep); text-decoration: none;
  transition: background-color 140ms var(--v6-ease), box-shadow 140ms var(--v6-ease);
}
html body .fk .tp-use:hover { background: #dcebfa; box-shadow: inset 0 0 0 1px #a9cdef; }
html body .fk .tp-read { font: 600 13.5px/1.2 var(--font-sans); color: var(--fk-blue); text-decoration: none; }
html body .fk .tp-read::after { content: " →"; }
html body .fk .tp-read:hover { color: var(--fk-blue-deep); text-decoration: underline; }
html body .fk :is(.tp-use, .tp-read):focus-visible { outline: 2px solid var(--fk-blue); outline-offset: 2px; }

/* the residential lease leads its shelf: every clause heading, numbered */
.fk .tp-tpl--lead { margin: 0 -30px; padding: 32px 30px; background: #f7fafd; box-shadow: inset 0 -1px 0 var(--fk-line-2); }
.fk .tp-tpl--lead + .tp-tpl { border-top: 0; }
.fk .tp-tpl--lead .tp-tpl-name h3 { font-size: 22px; }
.fk .tp-tpl--lead .tp-tpl-line { margin-top: 14px; }
.fk .tp-tpl--lead:target, .fk .tp-tpl:target { box-shadow: inset 3px 0 0 var(--fk-blue); }
.fk ol.tp-covers--full { columns: 2; column-gap: 32px; counter-reset: tp-cov; }
.fk ol.tp-covers--full li {
  position: relative; break-inside: avoid; padding: 5px 0 5px 34px; counter-increment: tp-cov;
  font: 500 13.5px/1.45 var(--font-sans); color: var(--fk-ink-2); border-top: 1px solid #e9eef3;
}
.fk ol.tp-covers--full li::before {
  content: counter(tp-cov, decimal-leading-zero); position: absolute; left: 0; top: 6px;
  font: 650 11.5px/1.3 var(--font-display); letter-spacing: .06em; color: var(--fk-blue);
}

/* ---------------------------------------------------------------- the paper table and the plan */
@media (min-width: 761px) {
  .fk .tp-ink tbody th { width: 25%; }
  .fk .tp-ink td:last-child { width: 24%; }
}
.fk .tp-ink td:last-child { font-weight: 500; color: var(--fk-ink-2); }
.fk .tp-ink tr:target { background: #f5f9fd; }
.fk .tp-ink tr { scroll-margin-top: 104px; }
.fk .tp-plan { margin-top: 0; }
.fk .fk-plan-copy a.tp-inline { white-space: normal; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(0, 107, 203, .35); }
.fk .fk-plan-copy a.tp-inline::after { content: none; }
.fk .tp-plan .fk-plan-copy > p + p { max-width: 70ch; }

/* ================================================================ responsive */
@media (max-width: 1180px) {
  .fk .tp-tpl { grid-template-columns: minmax(0, 250px) minmax(0, 1fr) 180px; gap: 10px 30px; }
}
@media (max-width: 1000px) {
  .fk .tp-fill { grid-template-columns: 1fr; }
  .fk .tp-after { grid-template-columns: 1fr; gap: 14px; }
  .fk .tp-tpl { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; }
  .fk .tp-tpl-name { grid-column: 1; grid-row: 1; }
  .fk .tp-tpl-side { grid-column: 2; grid-row: 1; }
  .fk .tp-tpl-body { grid-column: 1 / -1; grid-row: 2; }
  .fk .tp-tpl--lead .tp-tpl-line { max-width: 64ch; }
}
@media (max-width: 720px) {
  .fk .tp-paper { padding: 12px 10px 14px; }
  .fk .tp-doc { padding: 18px 16px 18px; }
  .fk .tp-remind { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .fk .tp-fams { margin-top: 30px; }
  html body .fk .tp-fams a { height: 34px; padding: 0 13px 0 12px; font-size: 13.5px; }
  .fk .tp-pair { grid-template-columns: 1fr; }
  .fk .tp-shelf { padding: 0 20px; border-radius: 18px; }
  .fk .tp-tpl { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; }
  .fk .tp-tpl-name, .fk .tp-tpl-side, .fk .tp-tpl-body { grid-column: 1; grid-row: auto; }
  .fk .tp-tpl-side { order: 3; align-items: flex-start; gap: 12px; text-align: left; padding-top: 2px; }
  .fk .tp-acts { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
  .fk .tp-tpl--lead { margin: 0 -20px; padding: 26px 20px; }
  .fk ol.tp-covers--full { columns: 1; }
  .fk .tp-law > li { font-size: 15px; }
}
@media (max-width: 359px) {
  .fk .tp-fields { grid-template-columns: 1fr; }
  .fk .tp-fields .tp-wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fk [data-tp-play].is-typing .tp-caret { animation: none; }
}

/* the send check reads label above value in its narrow card */
.fk .tp-check .fk-kv > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fk [data-tp-play] .fk-app-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Phone and tablet: a tab shows only its own panel, so a shorter tab leaves no empty frame below it. */
@media (max-width: 1000px) { .fk .fk-app-content[data-tabs] > .fk-tabpanel:not(.is-active) { display: none; } }