/* ==========================================================================
   "First Light" - editorial layer over the KBIF portal theme.
   Loads AFTER kbif-mobile.css and only overrides presentation: the ground
   goes to KHRG Brand Gray, the content card becomes certificate paper, and
   horse names are set in an engraved serif. Palette stays inside the 2025
   graphic standards (Brand Gold #D29C2A, Brand Gray #2A312D, white/black).
   Delete this file + its <link> tags to revert to the shipped theme.
   ========================================================================== */
:root {
    --fl-ground:    #2A312D;   /* Brand Gray */
    --fl-ground-dk: #1B201D;
    --fl-paper:     #FBF7EE;   /* certificate paper */
    --fl-paper-2:   #F4E5CC;   /* brand cream, used as a tint */
    --fl-rule:      #E0D5BC;
    --fl-ink:       #2A312D;
    --fl-ink-soft:  #5F5A4E;
    --fl-gold:      #D29C2A;   /* Brand Gold */
    --fl-gold-dp:   #7A5A14;   /* AA text weight of the gold, on paper */
    --fl-gold-hi:   #E9BE5E;
    --fl-display:   "Didot", "Bodoni MT", "Playfair Display", "Georgia Pro", Georgia, "Times New Roman", serif;
    --fl-sans:      "Century Gothic", "Questrial", "Segoe UI", system-ui, sans-serif;  /* display only */
    --fl-ui:        "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; /* real 600/700 */
}

/* -------- the ground --------------------------------------------------- */
body {
    background: var(--fl-ground);
    background-image: radial-gradient(120% 70% at 50% 0%, rgba(210,156,42,.06), transparent 62%);
    background-attachment: fixed;
}

/* -------- header band -------------------------------------------------- */
.kbif-header {
    background: transparent;
    box-shadow: none;
    padding: 26px 12px 20px;
    border-bottom: 1px solid rgba(210,156,42,.30);
    position: relative;
}
.kbif-header::after {                       /* brass hairline, inset */
    content: "";
    position: absolute; left: 50%; bottom: -4px;
    width: 74px; height: 1px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--fl-gold), transparent);
}
.kbif-logo { max-height: 62px; }            /* one-R clear space around the mark */
.kbif-contact {
    margin-top: 16px;
    color: #C9C4B5;
    font-size: 12px;
    letter-spacing: .04em;
}
.kbif-contact a { color: var(--fl-gold-hi); text-decoration: none; border-bottom: 1px solid rgba(233,190,94,.4); }

/* -------- the content card becomes paper ------------------------------- */
.container {
    position: relative;
    background: var(--fl-paper);
    border-radius: 3px;
    box-shadow: 0 30px 70px -28px rgba(0,0,0,.65);
    padding: 34px 38px 40px;
    margin: 34px auto 56px;
}
/* The base theme caps the paper at 980px at every screen size, which left the
   904px content box permanently 73px short of the 977px action bar - so the bar
   wrapped on every desktop, not just wide ones. Grid pages (class set in
   kbif-firstlight.js) get a wider sheet; form pages keep the short line length.
   Continuous rather than stepped: stepping it left a dead band where the table
   had turned on but the paper had not yet grown to hold it. */
@media (min-width: 992px) {
    body.kbif-grid-page .container { max-width: clamp(980px, calc(100vw - 48px), 1330px); }
}
.container::before {                        /* engraved double frame */
    content: "";
    position: absolute; inset: 10px;
    border: 1px solid rgba(122,90,20,.55);
    pointer-events: none;
}
.container::after {
    content: "";
    position: absolute; inset: 15px;
    border: 1px solid rgba(122,90,20,.18);
    pointer-events: none;
}
.container > * { position: relative; }      /* content sits above the frame */

/* -------- editorial headings ------------------------------------------- */
/* kbif-firstlight.js tags the standing "Online Registration" line as the
   eyebrow and the page's own name as the title. */
.container .kbif-eyebrow, .container div.kbif-eyebrow {
    font-family: var(--fl-sans);
    font-weight: 700; font-style: italic;
    font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--fl-gold-dp);
    text-align: center;
    margin: 0 0 6px;
}
.container .kbif-title, .container div.kbif-title {
    font-family: var(--fl-sans);
    font-weight: 700; text-transform: uppercase;
    font-size: clamp(1.55rem, 3.4vw, 2.15rem);
    letter-spacing: .015em; line-height: 1.08;
    color: var(--fl-ink);
    text-align: center;
    margin: 0 0 6px;
}
.kbif-title-rule {
    width: 88px; height: 1px; margin: 14px auto 26px;
    background: linear-gradient(90deg, transparent, var(--fl-gold), transparent);
}
/* secondary section headings (e.g. Login's "Search for Registered Horse") */
.container h3:not(.kbif-title):not(.kbif-eyebrow),
.container div.h3:not(.kbif-title):not(.kbif-eyebrow) {
    font-family: var(--fl-ui); font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    font-size: .95rem; color: var(--fl-ink); margin: 0 0 6px;
}
/* the page's own <style> block still sets a flat #333 rule; outrank it */
.container hr {
    border: 0; height: 1px; margin: 30px 0 26px; color: transparent;
    background: linear-gradient(90deg, transparent, rgba(122,90,20,.45), transparent);
}
.container h3, .container h4 { font-family: var(--fl-ui); font-weight: 700; color: var(--fl-ink); }
.container h4 { text-transform: uppercase; letter-spacing: .1em; font-size: .86rem; color: var(--fl-gold-dp); }
.container a { color: var(--fl-gold-dp); }

/* -------- notices ------------------------------------------------------ */
.kbif-notice, .container > .row .alert {
    background: rgba(210,156,42,.09);
    border: 1px solid rgba(122,90,20,.28);
    border-left: 3px solid var(--fl-gold);
    border-radius: 2px;
    color: #4A4437;
    padding: 14px 18px;
}

/* -------- what you owe, and what the clock costs ----------------------- */
.kbif-owed {
    display: inline-block; max-width: 640px; text-align: center;
    background: rgba(210,156,42,.10);
    border: 1px solid rgba(122,90,20,.35);
    border-top: 3px solid var(--fl-gold);
    border-radius: 3px; padding: 20px 26px;
}
.kbif-clock {
    display: block; margin: 12px auto 18px; max-width: 52ch;
    font-family: var(--fl-display); font-style: italic;
    font-size: 1.02rem; line-height: 1.5; color: var(--fl-gold-dp);
}

/* -------- the drafts drawer -------------------------------------------- */
/* Deliberately quiet. This panel tells a breeder something went unfinished,
   so it must read as a reminder and never as an error. */
.kbif-drafts {
    max-width: 640px; margin: 22px auto 0;
    background: #FFFDF8;
    border: 1px solid var(--fl-rule);
    border-left: 3px solid rgba(122,90,20,.45);
    border-radius: 3px; padding: 18px 22px 16px;
}
.kbif-drafts-head {
    font-family: var(--fl-ui); font-weight: 700;
    font-size: .92rem; color: var(--fl-ink); margin-bottom: 12px;
}
/* the three text lines stack on the left, Continue sits alongside them all */
.kbif-draft {
    padding: 11px 0; border-top: 1px solid #EFE8D8;
    display: grid; grid-template-columns: 1fr auto; column-gap: 16px;
    grid-template-areas: "mare go" "need go" "when go";
    align-items: center;
}
.kbif-draft:first-of-type { border-top: 0; }
.kbif-draft-mare { grid-area: mare; }
.kbif-draft-need { grid-area: need; justify-self: start; }
.kbif-draft-when { grid-area: when; }
.kbif-draft-acts {
    grid-area: go; align-self: center;
    display: inline-flex; align-items: center; gap: 8px;
}
.kbif-draft-go, .kbif-draft-drop {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 18px; white-space: nowrap;
    font-family: var(--fl-ui); font-weight: 600;
    font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
    border-radius: 2px; text-decoration: none;
}
.kbif-draft-go {
    background: var(--fl-gold); color: #1E2320 !important;
    border: 1px solid var(--fl-gold);
}
.kbif-draft-go:hover { background: var(--fl-gold-hi); text-decoration: none; }
/* Discard is deliberately quiet - it must not compete with Continue, and it must not be
   the thing a thumb lands on by mistake. It only opens the confirmation page. */
.kbif-draft-drop {
    background: transparent; color: var(--fl-ink-soft) !important;
    border: 1px solid transparent; padding-left: 12px; padding-right: 12px;
}
.kbif-draft-drop:hover {
    color: #8A2F22 !important; border-color: rgba(138,47,34,.35);
    background: rgba(138,47,34,.05); text-decoration: none;
}
@media (max-width: 600px) {
    .kbif-draft { grid-template-columns: 1fr; grid-template-areas: "mare" "need" "when" "go"; }
    .kbif-draft-acts { margin-top: 12px; }
    .kbif-draft-go { flex: 1 1 auto; }        /* Continue takes the width, Discard stays small */
    .kbif-draft-drop { flex: 0 0 auto; }
}
.kbif-draft-mare {
    display: block; font-family: var(--fl-display);
    font-size: 1.24rem; line-height: 1.2; color: var(--fl-ink);
}
.kbif-draft-need {
    display: inline-block; margin-top: 5px;
    font-family: var(--fl-ui); font-weight: 600;
    font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--fl-gold-dp);
    background: rgba(210,156,42,.14); border-radius: 2px; padding: .3em .7em;
}
.kbif-draft-when {
    display: block; margin-top: 6px;
    font-size: .82rem; color: var(--fl-ink-soft);
}
.kbif-drafts-foot {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid #EFE8D8;
    font-family: var(--fl-display); font-style: italic;
    font-size: .92rem; color: var(--fl-ink-soft);
}

/* -------- mare search: whole tile is the target ------------------------- */
.container table tr.kbif-rowpick { cursor: pointer; transition: box-shadow .2s, border-color .2s; }
.container table tr.kbif-rowpick:hover {
    border-color: rgba(210,156,42,.65);
    box-shadow: 0 14px 30px -18px rgba(26,31,28,.6);
}
/* the Select link stays, so anyone hunting for a button still finds one */
#gvMares a { pointer-events: auto; }

/* a mare this breeder has filed before - stated, never guessed */
.kbif-known-mare {
    display: inline-block; margin-left: 8px;
    font-family: var(--fl-ui); font-weight: 600;
    font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--fl-gold-dp);
    background: rgba(210,156,42,.16);
    border-radius: 2px; padding: .3em .6em; white-space: nowrap;
}
@media (max-width: 767px) {
    .kbif-known-mare { display: block; margin: 6px 0 0; white-space: normal; }
}

/* two mares share one name - the tag that makes them tell apart */
.kbif-namesake-note {
    display: inline-block; margin-left: 8px;
    font-family: var(--fl-ui); font-weight: 600;
    font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
    color: #8a4a12;
    background: rgba(196,110,32,.14);
    border-radius: 2px; padding: .3em .6em; white-space: nowrap;
}
@media (max-width: 767px) {
    .kbif-namesake-note { display: block; margin: 6px 0 0; white-space: normal; }
}

/* last season's mares with nothing filed for this season - the quiet money */
.kbif-unfiled {
    display: inline-block; max-width: 620px; margin: 14px auto 4px;
    font-family: var(--fl-ui); font-size: .95rem; line-height: 1.55;
    color: #2c3a2e; text-align: left;
    background: #F4F8F2;
    border: 1px solid rgba(58,110,74,.35); border-left: 4px solid #3a6e4a;
    border-radius: 3px; padding: 14px 18px;
}

/* the are-you-sure note for a foreign mare this breeder has never filed */
.kbif-confirm-note {
    display: inline-block; max-width: 560px; margin: 0 auto;
    font-family: var(--fl-ui); font-size: .9rem; line-height: 1.5;
    color: #6b3a0e; text-align: left;
    background: rgba(196,110,32,.1);
    border: 1px solid rgba(196,110,32,.4); border-radius: 3px;
    padding: 12px 16px;
}

/* -------- what you owe, broken out by season ---------------------------- */
.kbif-owed-sheet {
    /* centred so it sits on the same axis as the fee-tier strip above it; on the
       wider grid-page paper a left-hugging sheet was stranded in the left half */
    max-width: 620px; margin: 18px auto 26px;
    background: #FFFDF8; border: 1px solid var(--fl-rule); border-radius: 3px;
    padding: 18px 22px 16px;
}
.kbif-owed-head {
    font-family: var(--fl-ui); font-weight: 700;
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--fl-gold-dp); margin-bottom: 10px;
}
.kbif-owed-row, .kbif-owed-total {
    display: flex; align-items: baseline; gap: 14px;
    padding: 9px 0; border-top: 1px solid #EFE8D8;
}
.kbif-owed-row .s, .kbif-owed-total .s {
    flex: 0 0 8.5em; font-family: var(--fl-display); font-size: 1.02rem; color: var(--fl-ink);
}
.kbif-owed-row .d, .kbif-owed-total .d { flex: 1 1 auto; font-size: .9rem; color: var(--fl-ink-soft); }
.kbif-owed-row .a, .kbif-owed-total .a {
    flex: 0 0 auto; font-family: var(--fl-display); font-size: 1.08rem;
    font-variant-numeric: tabular-nums lining-nums; color: var(--fl-ink);
}
/* a season the breeder has been carrying is the thing they need to notice */
.kbif-owed-row.is-carried { background: rgba(210,156,42,.10); margin: 0 -22px; padding: 9px 22px; }
.kbif-owed-row.is-carried .s { color: var(--fl-gold-dp); font-style: italic; }
.kbif-owed-total {
    border-top: 1px solid rgba(122,90,20,.45); margin-top: 2px; padding-top: 12px;
}
.kbif-owed-total .s, .kbif-owed-total .a {
    font-family: var(--fl-ui); font-weight: 700; font-size: .95rem;
}
.kbif-owed-note {
    display: block; margin-top: 12px; padding-top: 11px;
    border-top: 1px solid #EFE8D8;
    font-family: var(--fl-display); font-style: italic;
    font-size: .92rem; line-height: 1.5; color: var(--fl-ink-soft);
}

/* -------- certificate of filing ---------------------------------------- */
.kbif-cert { max-width: 720px; margin: 6px auto 24px; text-align: center; }
.kbif-cert-kicker {
    margin: 0; font-family: var(--fl-ui); font-weight: 700;
    font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
    color: var(--fl-gold-dp);
}
.kbif-cert-title {
    margin: .6rem 0 .8rem !important; font-family: var(--fl-display) !important;
    font-style: italic; font-weight: 400 !important; text-transform: none !important;
    letter-spacing: 0 !important; font-size: clamp(1.3rem, 2.8vw, 1.7rem) !important;
    color: var(--fl-ink) !important;
}
.kbif-cert-rule {
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    color: var(--fl-gold-dp); font-size: .6rem;
}
.kbif-cert-rule span {
    display: block; height: 1px; width: 74px;
    background: linear-gradient(90deg, transparent, rgba(122,90,20,.7), transparent);
}
.kbif-cert-foal {
    font-family: var(--fl-display); font-weight: 400;
    font-size: clamp(1.8rem, 4.4vw, 2.9rem); line-height: 1.06;
    margin: 1.4rem 0 .4rem; color: var(--fl-ink); text-wrap: balance;
}
.kbif-cert-line {
    margin: 0 0 1.8rem; font-family: var(--fl-display); font-style: italic;
    color: var(--fl-ink-soft); font-size: 1.02rem;
}
.kbif-cert-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 0 26px; text-align: left; max-width: 620px; margin: 0 auto;
}
.kbif-cert-grid > div {
    padding: 10px 0; border-bottom: 1px solid rgba(122,90,20,.18);
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
}
.kbif-cert-grid .k {
    font-family: var(--fl-ui); font-weight: 600;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fl-gold-dp); flex: 0 0 auto;
}
.kbif-cert-grid .v {
    font-family: var(--fl-display); font-size: 1.02rem; color: var(--fl-ink);
    text-align: right;
}
.kbif-cert-foot {
    display: flex; align-items: center; gap: 24px; justify-content: center;
    margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(122,90,20,.2);
}
.kbif-seal svg { display: block; width: 108px; height: 108px; flex: none; }
.kbif-cert-note {
    margin: 0; text-align: left; max-width: 44ch;
    font-size: .82rem; line-height: 1.5; color: var(--fl-ink-soft);
}
@media (max-width: 640px) {
    .kbif-cert-foot { flex-direction: column; }
    .kbif-cert-note { text-align: center; }
}
/* the certificate is meant to be printed, so give it the page to itself */
@media print {
    .kbif-noprint, .kbif-header { display: none !important; }
    .kbif-cert { max-width: none; margin: 0; }
    .kbif-cert-foal { font-size: 2.4rem; }
}

/* -------- the return line ---------------------------------------------- */
/* Money that came back is the whole argument for filing early, so it is set in
   the engraved face rather than the label face, and given its own band. */
.container table td:has(> .kbif-return) {
    display: block; text-align: left;
    background: linear-gradient(180deg, rgba(244,229,204,.5), rgba(244,229,204,.18)) !important;
    border-top: 1px solid rgba(122,90,20,.28) !important;
    border-bottom: 0 !important;
    padding: 12px 16px !important;
}
.container table td:has(> .kbif-return)::before { content: none; }
.kbif-return {
    font-family: var(--fl-display); font-size: 1.02rem; line-height: 1.45;
    color: var(--fl-ink);
}
.kbif-return.is-approved { color: var(--fl-gold-dp); font-style: italic; }
.kbif-return.is-waiting { color: var(--fl-ink-soft); font-style: italic; font-size: .95rem; }
.kbif-return:empty { display: none; }

/* -------- grid cards become stud-book tiles ---------------------------- */
/* GridView renders border="1" + border-style:Solid on the table, which draws a
   hard rectangle around the whole set of tiles. Meaningful when these were
   tabular grids; now it is just a box around a card collection. */
.container table, .container table thead, .container table tbody { border: 0 !important; }
/* The base theme floors each card track at 340px. In any column narrower than
   that (the login page's search results, for one) the track cannot shrink, so
   the cards escape the column and float outside the card. min() lets the track
   collapse to the column width instead. */
.container table tbody {
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.container table tr {
    background: #FFFDF8 !important;
    border: 1px solid var(--fl-rule);
    border-radius: 3px;
    box-shadow: 0 10px 26px -18px rgba(26,31,28,.55);
}
.container table td {
    width: auto !important;
    background: transparent !important;
    border-bottom: 1px solid #EFE8D8 !important;
    padding: 11px 16px !important;
}
.container table td::before {
    font-family: var(--fl-ui);
    font-weight: 600;
    font-size: .70rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fl-gold-dp);
    flex: 0 0 44%;
}

/* the name cell becomes the tile's header band */
.container table td.kbif-card-title {
    display: block;
    background: linear-gradient(180deg, rgba(244,229,204,.75), rgba(244,229,204,.35)) !important;
    border-bottom: 1px solid rgba(122,90,20,.35) !important;
    padding: 14px 16px 12px !important;
    text-align: left;
    font-family: var(--fl-display);
    font-size: 1.42rem; line-height: 1.15; color: var(--fl-ink);
    letter-spacing: .005em;
}
.container table td.kbif-card-title::before { content: none; }

/* money + status */
.container table td.kbif-card-money { font-family: var(--fl-display); font-size: 1.16rem; font-variant-numeric: tabular-nums lining-nums; }
.kbif-chip {
    display: inline-block;
    font-family: var(--fl-ui); font-weight: 700;
    font-size: .66rem; letter-spacing: .09em; text-transform: uppercase;
    padding: .42em .8em; border-radius: 2px;
    background: rgba(122,90,20,.10); color: var(--fl-gold-dp);
    box-shadow: inset 0 0 0 1px rgba(122,90,20,.28);
}
.kbif-chip.is-paid { background: rgba(42,49,45,.07); color: #3C4A40; box-shadow: inset 0 0 0 1px rgba(60,74,64,.3); }
.kbif-chip.is-pending { background: var(--fl-gold); color: #1E2320; box-shadow: none; }

/* ==========================================================================
   Desktop: the card grid goes back to being a table.

   The cards come from the mobile stylesheet, which applies them at every width.
   That is right on a phone, where there is no room for a header row and each
   field has to carry its own label. On a desktop it means one header row's worth
   of labels is repeated on every row: the same 40 mares occupy 13.6 screens as
   cards and 3 as a table. Above 992px there is room for a real header, so use it.
   Phones and tablets keep the cards.

   Print is in this list deliberately: a sheet of letter paper is ~816px, so the
   width query alone would send every printed list out as cards - 40 mares is
   roughly 14 sheets that way, against 2 as a table.
   ========================================================================== */
@media (min-width: 992px), print {
    .container table {
        display: table !important; width: 100%;
        /* separate, not collapse: a collapsed border belongs to the table rather
           than the cell, so the header's rule does not travel with it once the
           header is sticky and scrolls away from its row */
        border-collapse: separate !important; border-spacing: 0 !important;
        margin: 6px 0 4px; table-layout: auto;
    }
    .container table thead { display: table-header-group !important; }
    .container table tbody {
        display: table-row-group !important;
        gap: 0 !important; grid-template-columns: none !important;
    }
    .container table tr {
        display: table-row !important;
        background: transparent !important; border: 0 !important;
        border-radius: 0 !important; box-shadow: none !important;
    }
    /* the header row is hidden in card mode; here it is the whole point */
    .container table .kbif-headrow,
    .container table tr:has(> th) { display: table-row !important; }

    .container table th {
        display: table-cell !important;
        font-family: var(--fl-ui); font-weight: 600;
        font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
        color: var(--fl-gold-dp); text-align: left; vertical-align: bottom;
        width: auto !important;
        padding: 4px 11px 9px !important;
        background: var(--fl-paper) !important;
        border: 0 !important;
        box-shadow: inset 0 -1px 0 rgba(122,90,20,.45);   /* rule that travels with the sticky cell */
        /* the paper is the page's scroll box, so this sticks to the viewport */
        position: sticky; top: 0; z-index: 2;
    }
    .container table td {
        display: table-cell !important;
        width: auto !important; text-align: left !important;
        padding: 9px 11px !important;
        background: transparent !important;
        border: 0 !important; border-bottom: 1px solid var(--fl-rule) !important;
        vertical-align: middle;
        white-space: normal;          /* let long names wrap rather than overflow the paper */
    }
    .container table td::before { content: none !important; display: none !important; }

    /* GridView emits no <thead>, so the header row is the tbody's first child and
       both of these would otherwise count it as data and highlight it on hover. */
    .container table tbody tr:not(.kbif-headrow):nth-child(even) { background: rgba(122,90,20,.035) !important; }
    .container table tbody tr:not(.kbif-headrow):hover { background: rgba(210,156,42,.13) !important; }

    /* the name keeps its serif voice, at column scale rather than tile-header scale */
    .container table td.kbif-card-title {
        display: table-cell !important;
        background: transparent !important;
        border-bottom: 1px solid var(--fl-rule) !important;
        padding: 9px 11px !important;
        font-family: var(--fl-display); font-size: 1.04rem; line-height: 1.25;
    }
    .container table td.kbif-card-money { font-size: .97rem; }

    /* Edit / Delete / Select / Remove: still obviously buttons, at row scale */
    .container table td a {
        padding: 6px 13px; min-width: 0;
        font-size: .70rem; letter-spacing: .05em; text-transform: uppercase;
        white-space: nowrap;
    }
    /* AllowSorting renders each sortable header as an <a>, and "a link inside a
       grid is a button" (see below) was written when the header row was hidden at
       every width. With the header visible those came out as a row of gold blocks.
       They are headings that happen to be clickable, so they read as headings. */
    .container table th a {
        display: inline; background: none !important;
        color: inherit !important; font: inherit;
        letter-spacing: inherit; text-transform: inherit;
        padding: 0 !important; min-width: 0 !important;
        border-radius: 0 !important; text-decoration: none;
    }
    .container table th a:hover { background: none !important; text-decoration: underline; }
    .container table th a::after {
        content: "\2195";                    /* this column can be sorted */
        margin-left: .4em; opacity: .5;
    }
    .container table td:has(> a) { white-space: nowrap; width: 1% !important; }
    .kbif-chip { font-size: .62rem; }
}

/* kbif-ui.js hides a row-less grid with an inline style so the friendly "nothing
   on file yet" box can stand in its place. The desktop display:table above is an
   author !important and beats that inline rule, which left a new account looking
   at a bare header row floating over the empty-state box. */
.container table.kbif-grid-empty { display: none !important; }

/* At the bottom of the desktop range the paper is still 980px and a ten-column
   table has to earn every pixel of it. A printed sheet is tighter still. */
@media (min-width: 992px) and (max-width: 1099px), print {
    .container table th, .container table td { padding-left: 8px !important; padding-right: 8px !important; }
    .container table td a { padding: 5px 10px; font-size: .66rem; }
    .container table td.kbif-card-title { font-size: .96rem; }
}

/* grid action buttons */
.container table a {
    font-family: var(--fl-ui);
    font-weight: 600; font-size: .8rem;
    letter-spacing: .07em; text-transform: uppercase;
    border-radius: 2px; padding: 11px 20px;
}

.kbif-empty {
    background: #FFFDF8; border: 1px dashed var(--fl-rule); border-radius: 3px;
    font-family: var(--fl-display); font-style: italic; font-size: 1rem; color: var(--fl-ink-soft);
    padding: 34px 16px;
}

/* -------- buttons ------------------------------------------------------ */
input[type="submit"], input[type="button"], .btn {
    font-family: var(--fl-ui);
    font-weight: 600; font-size: .88rem;
    letter-spacing: .09em; text-transform: uppercase;
    border-radius: 2px;
    padding: 13px 28px;
    transition: background .2s ease, box-shadow .2s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, .btn:hover { box-shadow: 0 6px 18px -8px rgba(26,31,28,.6); }
input[value="Back"], input[value="Cancel"], input[value="Show All"] {
    background: transparent; color: var(--fl-gold-dp); border: 1px solid rgba(122,90,20,.5);
}
/* The display tracking and 28px gutters are what pushed the five-button toolbar
   past its container. Tighten both where a toolbar has to hold a row of them; a
   lone button elsewhere keeps the generous treatment. */
@media (min-width: 768px) {
    .kbif-actions input[type="submit"],
    .kbif-actions input[type="button"],
    .kbif-actions .btn { letter-spacing: .05em; padding: 12px 18px; }
}
/* Tablet: the paper is still 980px here and five buttons cannot share a line.
   Turn the spacer into a deliberate break at the group boundary, so the row
   splits into "where you can go" and "what you can do" rather than stranding
   whichever button happened to fall off the end. */
@media (min-width: 768px) and (max-width: 991px) {
    .kbif-actions .kbif-spacer { flex: 0 0 100%; height: 0; margin: 0; }
}
/* Drew 7/24: these read as links, not buttons - make them the same gold as the rest */
#kbifSelectAll, #kbifDeselectAll {
    font-family: var(--fl-ui); font-weight: 600;
    font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
    border-radius: 2px; padding: 11px 20px;
    background: var(--fl-gold) !important; color: var(--btn-ink, #1E2320) !important;
    border: 1px solid var(--fl-gold) !important; text-decoration: none;
}
#kbifSelectAll:hover, #kbifDeselectAll:hover { background: var(--fl-gold-hi) !important; }

/* Drew 7/24: breeders do not realise these are dropdowns. Give every select a
   gold chevron block so it reads as something you tap. */
.container select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 46px;
    background-color: #fff;
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 7l6 6 6-6' fill='none' stroke='%231E2320' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        linear-gradient(var(--fl-gold), var(--fl-gold));
    background-repeat: no-repeat, no-repeat;
    background-position: right 8px center, right 0 center;
    background-size: 18px 18px, 34px 100%;
}
.container select::-ms-expand { display: none; }

/* "Must Select" cue on the three wizard dropdowns */
.kbif-must { color: var(--fl-gold-dp); font-weight: 700; }

/* helper text under a field must not wrap around the input */
.container .kbif-hint { display: block; margin-top: 5px; }

/* the chevron block eats a narrow select, so give the short ones room */
.container select { min-width: 92px; }
#ddlState { min-width: 104px; }

/* mandatory-fields banner and the breeder-of-record explainer */
.kbif-required-note {
    display: block; margin: 0 0 18px;
    font-family: var(--fl-ui); font-weight: 700;
    font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--fl-gold-dp);
}
.kbif-explain {
    display: block; max-width: 78ch; margin: 0 auto 20px;
    font-family: var(--fl-display); font-style: italic;
    font-size: .95rem; line-height: 1.5; color: var(--fl-ink-soft);
    text-align: center;
}
.kbif-subhead {
    font-family: var(--fl-ui); font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; font-size: .82rem; color: var(--fl-gold-dp);
    text-align: center; margin: 26px 0 4px;
}
/* the helper blurbs now sit under their Add button, not off to the right */
.kbif-addnote {
    display: block; margin: 8px auto 0; max-width: 34ch;
    font-size: .8rem; line-height: 1.45; color: var(--fl-ink-soft); text-align: center;
}
.kbif-addcol { text-align: center; }
.kbif-addcol input[type="submit"], .kbif-addcol input[type="button"] {
    display: block; width: 100%; max-width: 260px; margin: 0 auto;
}
.kbif-tab.active { background: var(--fl-ink); border-color: var(--fl-ink); }

/* -------- fee-tier calendar (built by kbif-firstlight.js) -------------- */
.kbif-tiers { display: flex; justify-content: center; margin: 6px 0 4px; }
.kbif-tiers-inner {
    display: flex; flex-wrap: wrap;
    border: 1px solid rgba(122,90,20,.4); border-radius: 3px; overflow: hidden;
    background: #FFFDF8;
}
.kbif-tiers-inner { align-items: stretch; }
.kbif-tier {
    padding: 14px 18px; text-align: center; flex: 1 1 0; min-width: 132px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.kbif-tier + .kbif-tier { border-left: 1px solid rgba(122,90,20,.25); }
.kbif-tier .k {
    display: block; font-family: var(--fl-ui); font-weight: 600;
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fl-ink-soft);
}
.kbif-tier .v {
    display: block; font-family: var(--fl-display); font-size: 1.5rem;
    font-variant-numeric: lining-nums; color: var(--fl-ink); margin-top: 3px;
}
.kbif-tier.is-now { background: var(--fl-gold); }
.kbif-tier.is-now .k, .kbif-tier.is-now .v { color: #1E2320; }
.kbif-tiers-note {
    margin: 10px 0 0; text-align: center;
    font-family: var(--fl-display); font-style: italic; font-size: .88rem; color: var(--fl-ink-soft);
}
/* when the server has said what waiting costs, that is not a caption any more - it is the
   point of the strip, so give it reading weight and a measure instead of a slogan's italic */
.kbif-tiers-note.is-live {
    font-style: normal; font-size: .95rem; line-height: 1.5;
    color: var(--fl-ink); max-width: 62ch; margin: 14px auto 0;
}

/* -------- inputs ------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"], select, textarea {
    background: #fff;
    border: 1px solid #D9D0BA;
    border-radius: 2px;
    min-height: 44px;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--fl-gold-dp);
    box-shadow: 0 0 0 3px rgba(210,156,42,.25);
}
.container label {
    font-family: var(--fl-ui); font-weight: 600;
    font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--fl-ink-soft);
}
.kbif-radio label, .kbif-radio span {
    font-family: inherit; font-size: 15px; letter-spacing: 0;
    text-transform: none; color: var(--fl-ink); font-weight: 600;
}
.kbif-radio { border-bottom-color: #EFE8D8; }
/* the sort fieldset sits in a right-aligned column; keep it a tidy left-set block */
.container fieldset {
    display: inline-block; text-align: left;
    border: 1px solid rgba(122,90,20,.25); border-radius: 3px;
    padding: 4px 18px 6px; background: rgba(244,229,204,.35);
}
fieldset legend {
    font-family: var(--fl-ui); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--fl-gold-dp); width: auto; border: 0;
    margin-bottom: 0; padding: 0 6px;
}
fieldset legend, fieldset legend span { font-size: .74rem !important; line-height: 1.3; }
.container fieldset .kbif-radio:last-child { border-bottom: 0; }

/* several links carry an inline black colour from the old flat theme */
.container a span { color: inherit !important; }

/* the heading may sit in a narrow column; centre it on the card's axis instead */
.container .kbif-title-col { width: 100%; max-width: 100%; flex: 0 0 100%; float: none; text-align: center; }

/* Select All / Deselect All as a real group (the literal pipe is removed in JS) */
.kbif-pay-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kbif-pay-toolbar-label { color: var(--fl-ink-soft); }

/* Below 992px the cart column is half the card or narrower, and the label plus
   both buttons cannot share a line: the flex row broke after "Select All" and
   left "Deselect All" hanging alone under it. Label on its own line, buttons as
   an even pair beneath it, each a full touch target. */
@media (max-width: 991px) {
    .kbif-pay-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .kbif-pay-toolbar-label {
        grid-column: 1 / -1; margin: 0;
        font-family: var(--fl-ui); font-size: .74rem;
        letter-spacing: .09em; text-transform: uppercase;
    }
    .kbif-pay-toolbar #kbifSelectAll,
    .kbif-pay-toolbar #kbifDeselectAll {
        display: flex; align-items: center; justify-content: center;
        margin: 0; padding: 12px 8px; min-height: 44px; text-align: center;
    }
}

/* Tom Select must match the new inputs, not the shipped ones */
/* Tom Select replaces the native select, so it needs the same gold chevron
   affordance - these are the two dropdowns Drew singled out (Drew 7/24/26). */
.ts-wrapper { position: relative; }
.ts-control {
    border: 1px solid #D9D0BA; border-radius: 2px; min-height: 44px; background: #fff;
    padding-right: 46px !important;
}
.ts-wrapper::after {
    content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 34px;
    pointer-events: none; border-radius: 0 2px 2px 0;
    background:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 7l6 6 6-6' fill='none' stroke='%231E2320' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
        var(--fl-gold);
}
.ts-wrapper.dropdown-active::after { background-color: var(--fl-gold-hi); }
.ts-wrapper.focus .ts-control { border-color: var(--fl-gold-dp); box-shadow: 0 0 0 3px rgba(210,156,42,.25); }
.ts-dropdown { border: 1px solid #D9D0BA; border-radius: 2px; }
.ts-dropdown .active { background: var(--fl-paper-2); color: var(--fl-ink); }

/* focus has to be visible on the dark ground AND on the cream card */
:focus-visible { outline: 2px solid var(--fl-gold-hi); outline-offset: 2px; }
.container :focus-visible, #slip :focus-visible { outline-color: var(--fl-ink); }

.kbif-header, footer, form { position: relative; z-index: 1; }

/* -------- login: dawn over the bluegrass ------------------------------- */
body.kbif-hero { background-attachment: scroll; }
.kbif-scene {
    position: absolute; top: 0; left: 0; right: 0;
    height: 620px; overflow: hidden; z-index: 0; pointer-events: none;
    background: #1B201D url("/Images/kbif-hero-sm.jpg?v=fl1") center 42% / cover no-repeat;
}
@media (min-width: 901px) {
    .kbif-scene { background-image: url("/Images/kbif-hero.jpg?v=fl1"); }
}
/* top scrim keeps the mark and contact line legible whatever the crop shows,
   bottom scrim dissolves the photograph into the page ground */
.kbif-scene::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%;
    background: linear-gradient(180deg, rgba(20,25,22,.88), rgba(20,25,22,.30) 60%, rgba(20,25,22,0));
}
.kbif-scene::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
    background: linear-gradient(180deg, rgba(42,49,45,0), var(--fl-ground) 94%);
}
body.kbif-hero .kbif-header { border-bottom: 0; z-index: 2; }
body.kbif-hero .kbif-header::after { display: none; }
body.kbif-hero .container { margin-top: 210px; z-index: 2; }
body.kbif-hero form { position: relative; z-index: 2; }

/* the standing line under the mark, on the hero pages only */
.kbif-lede {
    position: relative; z-index: 2;
    margin: 22px auto 0; max-width: 46ch; padding: 0 20px;
    text-align: center; color: #EFE9DA;
    font-family: var(--fl-display); font-style: italic; font-size: 1.1rem; line-height: 1.5;
    /* it now sits over a photograph, so it needs to carry its own contrast */
    text-shadow: 0 1px 14px rgba(12,16,13,.95), 0 0 3px rgba(12,16,13,.85);
}

/* tablet portrait: two 340px tiles plus the gap overrun the card's content box */
@media (min-width: 768px) and (max-width: 900px) {
    .container { padding: 30px 24px 34px; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 767px) {
    .container { margin: 0; border-radius: 0; padding: 26px 18px 34px; box-shadow: none; }
    .container::before { inset: 7px; }
    .container::after { display: none; }
    .kbif-header { padding: 20px 12px 16px; }
    .container table td.kbif-card-title { font-size: 1.3rem; }
    .kbif-tiers-inner { flex-direction: column; width: 100%; }
    .kbif-tier + .kbif-tier { border-left: 0; border-top: 1px solid rgba(122,90,20,.25); }
    .kbif-scene { height: 430px; background-position: center 46%; }
    .kbif-scene::before { height: 55%; }        /* the mark and the lede sit lower on a phone */
    body.kbif-hero .container { margin-top: 150px; }
    .kbif-lede { font-size: .98rem; padding: 0 18px; }
    .container fieldset { display: block; width: 100%; }
}

/* ==========================================================================
   Short viewport (landscape phone, small window). Must come after the phone
   block: at e.g. 740x360 both match, and this one has to win.
   ========================================================================== */
@media (max-height: 560px) {
    .kbif-scene { height: 240px; }
    body.kbif-hero .container { margin-top: 72px; }
    .kbif-header { padding: 10px 12px 8px; }
    .kbif-logo { max-height: 34px; }
    .kbif-contact { margin-top: 8px; font-size: 11px; }
    .kbif-lede { margin-top: 8px; font-size: .9rem; }
    .container { padding-top: 20px; }
    .kbif-title-rule { margin: 10px auto 16px; }
}

/* ==========================================================================
   Print - the paper card already reads as a document; drop the scenery
   ========================================================================== */
@media print {
    body { background: #fff; }
    .kbif-scene, .kbif-lede { display: none; }
    /* the reverse mark is white-on-transparent, so it would print as a ghost.
       brightness(0) renders it as the standards' solid black variant. */
    .kbif-logo { filter: brightness(0); }
    .kbif-header { border-bottom: 1px solid #C9C2B0; }
    .kbif-contact, .kbif-contact a { color: #4A4437; }
    .container { box-shadow: none; margin: 0; background: #fff; }
    body.kbif-hero .container { margin-top: 0; }
    /* the on-screen sheet has a 980px floor, which is wider than letter paper */
    body.kbif-grid-page .container { max-width: none; width: auto; }
    .container table th { position: static; }        /* sticky means nothing on paper */
    .container table tr { break-inside: avoid; }
    /* "Edit" and "Delete" mean nothing printed, but the cells have to stay so the
       columns keep lining up with their headers */
    .container table td a { display: none; }
    .kbif-actions { display: none; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .kbif-scene { transition: none !important; }
}

/* catalogue line: pedigree said the way the business says it */
.kbif-catalog-line {
    display: block;
    font-size: .86em;
    line-height: 1.35;
    color: #6b6b63;
    font-style: italic;
}
.kbif-unnamed {
    display: inline-block;
    font-size: .72em;
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b5a1e;
    background: #f3ecd6;
    border-radius: 3px;
    padding: 1px 6px;
}