/* ==========================================================================
   KuduDoc v6 — official-forms (after pages/_feature.css).
   Only this page's own parts: the form sheets in the app panel (filled values, the answers left to you, the level
   boxes), the SBD and affidavit sub-sections (h3 blocks, the fills/declare pair), the 12-month count card and the
   licence rows. Everything else is the kit.
   ========================================================================== */

/* ================================================================ the app panel: a form sheet */
.fk .of-sheet { padding: 22px 22px 20px; }
.fk .of-sheet .fk-doc-title { font-size: 18px; }
.fk .of-ln { margin-top: 12px; font: 400 12px/1.7 var(--font-sans); color: var(--fk-ink-2); }
.fk .of-ln b { margin-right: 4px; font-weight: 650; color: var(--fk-ink); }
/* a value KuduDoc filled in */
.fk .of-fill {
  padding: 1px 6px; border-radius: 4px; background: #eaf3fc; box-shadow: inset 0 -1.5px 0 #b3d2f0;
  font-weight: 600; color: var(--fk-blue-deep); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.fk .of-dots { margin: 0 2px; letter-spacing: .14em; font-weight: 700; }
/* the affidavit tab: a wider aside, so its buttons sit on one line */
@media (min-width: 1001px) { .fk [data-tab-panel="affidavit"] .fk-app-cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
/* an answer left to you: dashed, never pre-filled */
.fk .of-ask {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 5px; border: 1px dashed var(--fk-blue);
  background: #f3f8fe; font: 600 10.5px/1.5 var(--font-sans); color: var(--fk-blue); white-space: nowrap;
}
.fk .of-was {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: #f1f3f6;
  font: 500 10.5px/1.5 var(--font-sans); color: var(--fk-mute); white-space: nowrap;
}
.fk .of-fields { margin: 12px 0 2px; }
.fk .of-fields > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 2px 12px; padding: 6px 0; border-bottom: 1px dotted #e3dccf; }
.fk .of-fields dt { font: 500 11px/1.55 var(--font-sans); color: var(--fk-mute); }
.fk .of-fields dd { font: 400 12px/1.55 var(--font-sans); min-width: 0; }
.fk .of-box { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px #9fb2c6; background: #fff; }
.fk .of-levels { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 0 2px; }
.fk .of-levels li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; font: 400 12px/1.4 var(--font-sans); color: var(--fk-ink-2); }
.fk .of-levels .of-was { margin-left: 0; }
.fk .of-q { margin-top: 10px; padding-top: 2px; border-top: 1px solid #efe9df; }
.fk .of-yn { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font: 500 12px/1.4 var(--font-sans); color: var(--fk-ink-2); }
.fk .of-yn > span:not(.of-ask) { display: inline-flex; align-items: center; gap: 6px; }
.fk .of-csd { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 6px 10px; margin-top: 8px; padding: 8px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px #e8e1d4; }
.fk .of-csd > span:not(.of-ask) { font: 600 9.5px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fk-mute); }
.fk .of-csd .of-csd-row { grid-column: 1 / -1; justify-content: center; padding: 5px 8px; }
.fk .of-sheet .fk-doc-sign { margin-top: 20px; }

/* the aside cards */
.fk .of-held { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin: 10px 0 12px; }
.fk .of-kv > div { grid-template-columns: 104px minmax(0, 1fr); }
.fk .of-kv dd .fk-chip { margin-bottom: 5px; }
.fk .of-src dd small { display: block; margin-top: 2px; font: 400 11px/1.4 var(--font-sans); color: var(--fk-faint); }
.fk .of-num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: #eaf3fc; font: 650 11.5px/1 var(--font-sans); color: var(--fk-blue-deep);
}
.fk .of-num--seal { background: var(--fk-peach); color: var(--fk-orange-ink); }
.fk .of-path { margin-top: 6px; }
.fk .of-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fk .of-note { margin-top: 6px; font: 400 12.5px/1.55 var(--font-sans); color: var(--fk-ink-2); }

/* ================================================================ sections */
.fk .of-block { margin-top: 64px; }
.fk .fk-head + .of-block { margin-top: 0; }
.fk .of-h3 {
  position: relative; margin-bottom: 18px; padding-left: 20px;
  font: 650 clamp(20px, 1.7vw, 23px)/1.3 var(--font-display); letter-spacing: -.018em; color: var(--fk-ink); text-wrap: balance;
}
.fk .of-h3::before {
  content: ""; position: absolute; left: 2px; top: .3em; width: 4px; height: .8em; border-radius: 2px; background: var(--fk-blue); transform: var(--fk-stroke);
}
.fk .of-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; align-items: start; margin-top: 64px; }
.fk .of-pair > * { min-width: 0; }
.fk .of-pair > .of-block { margin-top: 0; }
.fk .of-block > p, .fk .of-prose p { font: 400 16px/1.65 var(--font-sans); color: var(--fk-body); }
.fk .of-prose p + p { margin-top: 12px; }
.fk :is(.of-block, .of-prose, .of-duo, .of-calc-block) a:not(.btn) { color: var(--fk-blue); }
.fk :is(.of-block, .of-prose, .of-duo, .of-calc-block) a:not(.btn):hover { color: var(--fk-blue-deep); }
.fk .of-close { margin-top: 18px; font: 400 15.5px/1.65 var(--font-sans); color: var(--fk-body); }
.fk .of-block .fk-list > li { font-size: 16px; }
.fk .of-strong { font-weight: 600; color: var(--fk-ink); }
.fk .of-th-note { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--font-sans); color: var(--fk-mute); }
.fk .fk-table .of-nw { white-space: nowrap; }
@media (min-width: 761px) {
  .fk .of-table-cat tbody th { width: 22%; }
  .fk .of-table-tpl tbody th { width: 44%; }
  .fk .of-table-tpl tbody td:last-child { width: 22%; }
}
.fk .fk-after, .fk .fk-intro, .fk .of-block p { text-wrap: pretty; }
.fk .of-table-cat thead :is(th, td), .fk .of-table-cat tbody :is(th, td) { padding-left: 20px; padding-right: 20px; }

/* what KuduDoc fills, and what you declare */
.fk .of-duo { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; }
.fk .of-duo-card { padding: 26px 28px 28px; border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh); }
.fk .of-duo-h { margin-bottom: 18px; font: 600 12.5px/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fk-blue); }
.fk .of-duo-card--you .of-duo-h { color: var(--fk-ink-2); }
.fk .of-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fk .of-tags li {
  padding: 7px 13px; border-radius: 999px; background: #eaf3fc; box-shadow: inset 0 -1.5px 0 #c6ddf3;
  font: 500 14px/1.3 var(--font-sans); color: var(--fk-blue-deep);
}
.fk .of-duo-card--you .fk-list > li + li { margin-top: 10px; }
.fk .of-duo-note { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--fk-line); font: 400 15px/1.6 var(--font-sans); color: var(--fk-body); }

/* sealed, kept and counted: numbered rule list */
.fk .of-after { counter-reset: of-step; }
.fk .of-after > li { counter-increment: of-step; }
.fk .of-after b::before { content: counter(of-step, decimal-leading-zero) "  "; white-space: pre; font: 650 13px/1 var(--font-display); letter-spacing: .08em; color: var(--fk-blue); }
.fk .of-after > li.is-key b::before { color: var(--fk-orange-ink); }
.fk .of-after + .fk-after { margin-top: 18px; }

/* the 12 months, counted */
.fk .of-calc-block { scroll-margin-top: 100px; }
.fk .of-lede { max-width: 72ch; text-wrap: pretty; margin-bottom: 22px; font: 500 18px/1.55 var(--font-sans); color: var(--fk-ink-2); }
.fk .of-calc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); border-radius: 22px; background: #fff; box-shadow: var(--fk-card-sh); overflow: hidden;
}
.fk .of-calc-in { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #f6f9fc; border-right: 1px solid var(--fk-line); }
.fk .of-calc-in .fk-field-v { min-height: 44px; font-size: 15px; font-weight: 500; }
.fk .of-calc-rule { font: 400 13.5px/1.55 var(--font-sans); color: var(--fk-mute); }
.fk .of-calc-out { padding: 28px 32px 30px; }
.fk .of-calc-result { font: 650 clamp(24px, 2.3vw, 32px)/1.15 var(--font-display); letter-spacing: -.026em; color: var(--fk-ink); }
.fk .of-calc-sub { margin-top: 12px; font: 400 15px/1.6 var(--font-sans); color: var(--fk-body); }
.fk .of-dates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.fk .of-dates li { position: relative; padding: 13px 14px 12px 24px; border-radius: 12px; background: var(--fk-ice); }
.fk .of-dates li::before { content: ""; position: absolute; left: 11px; top: 16px; width: 3px; height: 13px; border-radius: 2px; background: var(--fk-blue); transform: skewX(-14deg); }
.fk .of-dates b { display: block; font: 650 15px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--fk-ink); white-space: nowrap; }
.fk .of-dates small { display: block; margin-top: 3px; font: 500 12px/1.3 var(--font-sans); color: var(--fk-mute); }
.fk .of-calc-src { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fk-line-2); font: 400 13.5px/1.55 var(--font-sans); color: var(--fk-mute); }
.fk .of-calc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 22px; }
.fk .of-calc-foot p { font: 400 15.5px/1.6 var(--font-sans); color: var(--fk-body); }

/* licence forms: the filled file beside the words */
.fk .of-uses > li { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; padding: 24px 0; }
.fk .of-files { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
.fk .of-use-h { margin-bottom: 8px; font: 650 18px/1.35 var(--font-display); letter-spacing: -.015em; color: var(--fk-ink); }
.fk .of-uses p { max-width: 70ch; font: 400 15.5px/1.65 var(--font-sans); color: var(--fk-body); }
.fk .of-uses a { color: var(--fk-blue); }

.fk .of-sources { margin-top: 26px; font-size: 14.5px; }

/* ================================================================ responsive */
@media (max-width: 1000px) {
  .fk .of-pair { grid-template-columns: 1fr; gap: 56px; }
  .fk .of-duo { grid-template-columns: 1fr; }
  .fk .of-calc { grid-template-columns: 1fr; }
  .fk .of-calc-in { border-right: 0; border-bottom: 1px solid var(--fk-line); }
}
@media (max-width: 760px) {
  .fk .fk-table .of-nw { white-space: normal; }
  .fk .of-table-cat thead :is(th, td), .fk .of-table-cat tbody :is(th, td) { padding-left: 0; padding-right: 0; }
}
@media (max-width: 720px) {
  .fk .of-sheet { padding: 18px 16px 16px; }
  .fk .of-kv > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .fk .of-block { margin-top: 52px; }
  .fk .of-pair { margin-top: 52px; gap: 48px; }
  .fk .of-duo-card { padding: 22px 20px 22px; }
  .fk .of-tags li { font-size: 13.5px; padding: 6px 11px; }
  .fk .of-calc-in, .fk .of-calc-out { padding: 22px 20px; }
  .fk .of-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk .of-lede { font-size: 16.5px; }
  .fk .of-uses > li { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
}
@media (max-width: 480px) {
  .fk .of-tab-more { display: none; }
  .fk .of-fields > div { grid-template-columns: 1fr; gap: 0; }
  .fk .of-csd { grid-template-columns: 1fr 1fr; }
  .fk .of-csd > span:nth-child(3) { display: none; }
}

.fk .of-block > .fk-after { max-width: 70ch; }

/* 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; } }