/* KundliLive — mobile-first finish and yellow-forward surfaces.
 *
 * Loaded LAST on every page, after the older theme stylesheets and after the per-view inline <style>
 * blocks in the body. Presentation only: no layout logic, no markup, no content.
 *
 * Two things it does, both verified against the RUNTIME DOM at a real 390px viewport (the page is
 * restructured by script after load, so these selectors follow the runtime tree, not the Blade source):
 *   1. on a phone the birth-details form is the first thing the visitor meets, under a compact heading,
 *      with the intro, step cards and SEO text below it;
 *   2. the logo's yellow/gold carries the page, with navy text and saffron calls to action.
 *
 * Several older stylesheets style these same blocks with id-level selectors and !important
 * (html#kl-fresh-root body#page-top.public-site.kl-fresh-theme …). This layer is the agreed last word on
 * presentation, so where it must win it repeats that weight deliberately instead of adding a losing layer.
 */

/* ------------------------------------------------------------------ palette */

:root {
    --klp-yellow: #f7c948;
    --klp-yellow-soft: #ffeab4;
    --klp-yellow-tint: #fff8e3;
    --klp-page: #fffdf6;
    --klp-ink: #16224a;
    --klp-line: #f0dfae;
}

html#kl-fresh-root body#page-top.public-site,
html#kl-fresh-root body#page-top.public-site.kl-fresh-theme { background: var(--klp-page) !important; }

/* Hero band: a warm gold surface with navy text instead of a pale blue slab. */
html#kl-fresh-root body#page-top.public-site .kl-landing-hero,
html#kl-fresh-root body#page-top.public-site .pb-home-hero,
html#kl-fresh-root body#page-top.public-site.kl-fresh-theme .kl-landing-hero,
html#kl-fresh-root body#page-top.public-site.kl-fresh-theme .pb-home-hero {
    background: linear-gradient(135deg, var(--klp-yellow-soft) 0%, var(--klp-yellow-tint) 62%, #fffdf6 100%) !important;
    border: 1px solid var(--klp-line) !important;
    box-shadow: 0 8px 24px rgba(13, 27, 62, .06) !important;
}

html#kl-fresh-root body#page-top.public-site .kl-landing-hero :is(h1, h2, h3, p, li, span, strong),
html#kl-fresh-root body#page-top.public-site .pb-home-hero :is(h1, h2, h3, p, li, span, strong),
html#kl-fresh-root body#page-top.public-site.kl-fresh-theme .kl-landing-hero :is(h1, h2, h3, p, li, span, strong),
html#kl-fresh-root body#page-top.public-site.kl-fresh-theme .pb-home-hero :is(h1, h2, h3, p, li, span, strong) {
    color: var(--klp-ink) !important;
    text-shadow: none !important;
}

/* Eyebrows, badges and highlight strips: gold surface, navy text. */
html#kl-fresh-root body#page-top.public-site :is(.kl-eyebrow, .kl-badge, .tools-eyebrow, .kl-distilled-report-badge) {
    background: var(--klp-yellow-soft) !important;
    color: var(--klp-ink) !important;
    border-color: var(--klp-line) !important;
}

/* Section headings carry a gold rule, so sections read as sections on a long page. */
html#kl-fresh-root body#page-top.public-site :is(.kl-section, .tools-section, .kl-card) > :is(h2, h3):first-child {
    border-left: 4px solid var(--klp-yellow);
    padding-left: 12px;
}

/* Cards keep a white face on the warm page, with a soft gold edge instead of grey. */
html#kl-fresh-root body#page-top.public-site :is(.kl-card, .tools-card, .kl-panel, .kl-kundli-entry-card) { border-color: var(--klp-line) !important; }

/* ------------------------------------------------------------------ phone: the form comes first */

@media (max-width: 820px) {
    /* The runtime tree puts the hero, breadcrumb, step cards and the form's entry card in one flow inside
       .site-two-column-main, which already assigns them an explicit order (hero 0, breadcrumb 1, steps 2,
       form 3). Only the form and the heading are re-ordered here; everything else keeps its place. The
       id-level prefix matches the weight of the stylesheet that sets those numbers. */
    html#kl-fresh-root body#page-top.public-site .site-two-column-main,
    html#kl-fresh-root body#page-top.public-site.kl-fresh-theme .site-two-column-main { display: flex !important; flex-direction: column !important; }

    html#kl-fresh-root body#page-top.public-site .site-two-column-main > .kl-kundli-entry-card,
    html#kl-fresh-root body#page-top.public-site.kl-fresh-theme .site-two-column-main > .kl-kundli-entry-card { order: -1 !important; margin-top: 0 !important; }

    html#kl-fresh-root body#page-top.public-site .site-two-column-main > .kl-landing-hero,
    html#kl-fresh-root body#page-top.public-site.kl-fresh-theme .site-two-column-main > .kl-landing-hero { order: -2 !important; }

    /* The heading still opens the page, but compact: it must not use up the first screen. */
    html#kl-fresh-root body#page-top.public-site .kl-landing-hero {
        padding: 14px 16px 16px !important;
        margin-bottom: 12px !important;
    }
    html#kl-fresh-root body#page-top.public-site .kl-landing-hero :is(.kl-landing-points, .kl-hero-cta, .kl-landing-lead, .kl-landing-note, .kl-landing-copy > p) { display: none !important; }
    html#kl-fresh-root body#page-top.public-site .kl-landing-hero :is(h1, .kl-landing-title) {
        margin: 0 !important;
        font-size: clamp(1.22rem, 5.1vw, 1.5rem) !important;
        line-height: 1.32 !important;
    }

    /* Matching page: the same behaviour, so both entry forms feel alike. */
    html#kl-fresh-root body#page-top.matching-page .site-two-column-main { display: flex !important; flex-direction: column !important; }
    html#kl-fresh-root body#page-top.matching-page .site-two-column-main > .tools-page-title { order: -2 !important; }
    html#kl-fresh-root body#page-top.matching-page .site-two-column-main > .tools-match-form { order: -1 !important; }

    /* Comfortable, thumb-sized fields; 16px stops iOS zooming the page on focus. */
    html#kl-fresh-root body#page-top.public-site :is(.kl-generator-actions button, .tools-birth-form button[type="submit"]) { width: 100% !important; min-height: 48px !important; }

    /* Readable body text. */
    html#kl-fresh-root body#page-top.public-site { font-size: 16px; line-height: 1.65; }
}

/* ------------------------------------------------------------------ account and admin panels */

html body:is(.ka-auth-body, .ka-admin-body) { background: var(--klp-page) !important; }
html body.ka-admin-body :is(.ka-card, .ka-panel) { border-color: var(--klp-line) !important; }
html body.ka-admin-body :is(th, .ka-table thead) { background: var(--klp-yellow-tint) !important; color: var(--klp-ink) !important; }

@media (max-width: 820px) {
    /* A wide admin table scrolls inside its own box instead of widening the page. */
    html body.ka-admin-body :is(.ka-table-wrap, .ka-scroll) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    html body.ka-admin-body :is(input, select, button, textarea) { min-height: 44px; font-size: 16px; }
    html body:is(.ka-auth-body, .ka-admin-body) .ka-wrap { padding-left: 14px; padding-right: 14px; }
}

/* ------------------------------------------------------------------ birth form: one border, not two */

/* The 2026 theme gives every public form control its own border and white background
 * (:is(html#kl-fresh-root, html) body#page-top.public-site main.site-main :is(input, select, textarea)),
 * which outweighs the birth form's own "border:0" rule. The result is a border around the field card AND
 * a second one around the control inside it. The field card keeps the border; the control gives it up. */
:is(html#kl-fresh-root, html) body#page-top.public-site main.site-main :is(.pb-field, .kl-field) :is(input:not([type=checkbox]):not([type=radio]), select, textarea, .friendly-time-control) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    min-height: 62px !important;
}

/* The place-search suggestion box and the time control sit inside the same card: no inner border either. */
:is(html#kl-fresh-root, html) body#page-top.public-site main.site-main :is(.pb-field, .kl-field) :is(.friendly-time-entry, .kl-place-suggest) {
    border: 0 !important;
    background: transparent !important;
}



/* The optional mobile number is a side note, not a primary field. The theme already sizes it (240px on a
 * wide screen, full width on a phone); this keeps it compact on a phone too, using the same selector shape
 * so the size actually takes effect. */
html#kl-fresh-root body#page-top.public-site.kl-fresh-theme .kl-generator div:has(> #op-contact-mobile) > #op-contact-mobile {
    width: 200px !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--klp-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 15px !important;
}

/* ------------------------------------------------------------------ birth time field */


/* ------------------------------------------------------------------ birth time field */

/* The birth time is a three-part control (hour : minute AM/PM) built by script. Its segments were 34px
 * wide and as tall as the whole card, so the control filled only about 132px of a 417px field and read as
 * three cramped boxes floating in an empty card. The segments now sit as properly sized, centred boxes,
 * inset like the text of every other field, with the clock button at the right edge. */
:is(html#kl-fresh-root, html) body#page-top.public-site main.site-main .pb-field[data-field-kind="time"] .friendly-time-entry {
    box-sizing: border-box !important;
    grid-template-columns: 58px 12px 58px 84px !important;
    align-items: center !important;
    padding: 22px 12px 6px 60px !important;
}

html#kl-fresh-root body#page-top.public-site.kl-fresh-theme .kl-form.pb-birth-form .pb-field[data-field-kind="time"] .friendly-time-entry > input.friendly-time-segment,
html#kl-fresh-root body#page-top.public-site.kl-fresh-theme .kl-form.pb-birth-form .pb-field[data-field-kind="time"] .friendly-time-entry > select.friendly-time-entry-period {
    height: 38px !important;
    min-height: 38px !important;
    align-self: center !important;
    padding: 4px 6px !important;
    border: 1px solid #e3dbcd !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #1e283b !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

:is(html#kl-fresh-root, html) body#page-top.public-site main.site-main .pb-field[data-field-kind="time"] .friendly-time-entry-period {
    padding-right: 4px !important;
    font-weight: 600 !important;
}

:is(html#kl-fresh-root, html) body#page-top.public-site main.site-main .pb-field[data-field-kind="time"] .friendly-time-entry-separator {
    align-self: center !important;
    color: #63708e !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* The empty-state dashes sit under their own segment, not across the row. */
:is(html#kl-fresh-root, html) body#page-top.public-site main.site-main .pb-field[data-field-kind="time"] .friendly-time-empty-mark {
    pointer-events: none !important;
    color: #9aa6bf !important;
}

@media (max-width: 400px) {
    :is(html#kl-fresh-root, html) body#page-top.public-site main.site-main .pb-field[data-field-kind="time"] .friendly-time-entry {
        grid-template-columns: 52px 10px 52px 76px !important;
        padding-left: 56px !important;
    }
}