/* ============================================================ */
/* kd-quote-preview.css · The real quote table, for previewing  */
/* ============================================================ */
/*
  Taken from the platform's own kd-quotes.css so the dimmed preview on
  source-hardware.html and sell-hardware.html is a true likeness of the
  control that will eventually live there, not an approximation of it.
  Every custom property it uses is already defined in kd-tokens.css here --
  checked one by one, none had to be added.

  Only the two placeholder pages load this. When the real control goes
  live these rules are what it will already be styled by, so the preview
  and the finished page cannot look like different things.
*/
/* kd-quotes.css -- the quote-request page family for khouse.se.
 *
 * A parts list is a TABLE of inputs, which is the one layout the rest of
 * this design system had no rule for. Everything else on the page --
 * headings, buttons, alerts, the mono eyebrow -- is the existing kd-*
 * vocabulary, so this file stays small and adds no second design system.
 *
 * Every value is a --kd-* token from kd-tokens.css, except structural
 * literals (grid template widths, a column minimum).
 */

.kd-quote {
    display: flex;
    flex-direction: column;
    gap: var(--kd-s-6);
    /* Full container width. It was capped at 1000px, which left the
     * parts list floating narrow inside a much wider page and made five
     * columns of inputs harder to read than they needed to be. The
     * container itself is what limits line length here. */
    width: 100%;
}

/* ---- The parts list ------------------------------------------------- */

/* Scrolls inside its own box rather than widening the page: five input
 * columns do not fit a narrow viewport, and a horizontally scrolling
 * BODY is the worst way to discover that. */
.kd-quote__lines {
    overflow-x: auto;
}

.kd-quote__table {
    width: 100%;
    border-collapse: collapse;
    /* Below this the table stops being readable and the stacked layout
     * takes over (see the breakpoint at the end of this file), so the
     * horizontal scroll is a narrow fallback rather than the norm. */
    min-width: 980px;
    table-layout: fixed;
}

/* Column widths, so the part number -- the field people actually type
 * into -- gets the room, and Qty does not claim a fifth of the table
 * for three characters. */
/* Eight columns: #, photo, part number, brand, condition, qty, their
 * reference, comment. The part number gets the room because it is the
 * field people actually type into; # and Qty get almost none because
 * they hold two characters. */
.kd-quote__table th:nth-child(1) { width: 3ch; }
.kd-quote__table th:nth-child(2) { width: 13%; }
.kd-quote__table th:nth-child(3) { width: 20%; }
.kd-quote__table th:nth-child(4) { width: 13%; }
.kd-quote__table th:nth-child(5) { width: 14%; }
.kd-quote__table th:nth-child(6) { width: 7%; }
.kd-quote__table th:nth-child(7) { width: 14%; }
.kd-quote__table th:nth-child(8) { width: 16%; }

/* The row number is a label, not an input -- it should not look like a
 * field somebody is expected to fill in. */
.kd-quote__num {
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-0);
    color: var(--kd-fg-muted);
    text-align: right;
}

.kd-quote__optional {
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.8;
}

.kd-quote__table th,
.kd-parts th {
    text-align: left;
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-1);
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    font-weight: var(--kd-w-regular);
    padding: var(--kd-s-2) var(--kd-s-3);
    border-bottom: var(--kd-border-w) solid var(--kd-border-strong);
}

.kd-quote__table td,
.kd-parts td {
    padding: var(--kd-s-2) var(--kd-s-3);
    border-bottom: var(--kd-border-w) solid var(--kd-border);
    vertical-align: top;
}

/* The controls themselves live in kd-forms.css, keyed on `.kd-form` on
 * the <form> element -- ONE definition for every form on the site.
 *
 * They used to be here, scoped to `.kd-quote__table` and
 * `.kd-quote__contact`, and that scoping was the bug: the currency
 * select moved into a panel of its own and instantly reverted to the
 * browser's default dropdown, because it was in neither block. Adding a
 * third selector would have set the same trap for the fourth block.
 */

/* ---- Contact block --------------------------------------------------- */

.kd-quote__contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--kd-s-4);
}

.kd-quote__field {
    display: flex;
    flex-direction: column;
    gap: var(--kd-s-2);
}

/* The free-text box spans the row: a message cramped into a third of the
 * width invites a one-line answer. */
.kd-quote__field--wide {
    grid-column: 1 / -1;
}

.kd-quote__field label {
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-0);
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
}

/* The "add a row" control, and why it is a bar rather than a button
 * floating in whitespace.
 *
 * It was a ghost button with a sentence beside it, sitting on the page
 * background directly under the table -- nothing tied it to the table it
 * acts on, and a ghost button next to grey text reads as two labels
 * rather than as a control and its caption. Somebody looking at it could
 * not tell what was clickable.
 *
 * So it is now an attached foot: same border as the table above it, top
 * border removed so the two read as one object, and the button given a
 * real edge. The caption stays, pushed to the other end, where it
 * explains rather than competes. */
.kd-quote__rowactions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kd-s-4);
    flex-wrap: wrap;
    padding: var(--kd-s-4) var(--kd-s-5);
    background: var(--kd-bg-alt);
    border: var(--kd-border-w) solid var(--kd-border);
    /* Joined to the parts table above: one object, not two. */
    border-top: 0;
    border-radius: 0 0 var(--kd-radius) var(--kd-radius);
    /* Cancels the form's own flex gap (.kd-quote, --kd-s-6) so the bar
     * sits flush against the table instead of floating below it. The
     * same token, not a copy of its value -- change the form's rhythm
     * and this follows. */
    margin-top: calc(-1 * var(--kd-s-6));
}

/* The button itself: a real bordered control, not a ghost. It is the
 * only thing on this bar somebody is meant to press. */
.kd-quote__rowactions .kd-btn {
    border-color: var(--kd-fg);
    background: var(--kd-bg);
    font-weight: var(--kd-w-semi);
}

.kd-quote__rowactions .kd-btn:hover {
    background: var(--kd-fg);
    color: var(--kd-bg);
}

/* The caption is a caption: it must not look like a second control. */
.kd-quote__rowactions .kd-quote__note {
    color: var(--kd-fg-muted);
    font-size: var(--kd-text-1);
    margin: 0;
}

/* The photograph picker spans the row: a file input squeezed into a
 * third of the grid truncates the filenames it exists to show. */
.kd-quote__contact .kd-quote__field:has(input[type="file"]) {
    grid-column: 1 / -1;
}

.kd-quote__error {
    margin: var(--kd-s-1) 0 0;
    font-size: var(--kd-text-0);
    /* The system's own critical colour, so an error here looks like an
     * error everywhere else on the site rather than a one-off red. */
    color: var(--kd-c-crit);
}

/* The honeypot. Off-screen rather than display:none, because some bots
 * skip fields that are explicitly hidden -- and a real person never
 * reaches it (aria-hidden, and it is not in the tab order). */
.kd-quote__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Phones ---------------------------------------------------------- */

@media (max-width: 900px) {
    /* The table becomes stacked cards: five columns of inputs on a phone
     * is unusable however narrow the fields get. Each cell keeps its
     * heading through the data-label the template emits, so the meaning
     * of a field survives losing the header row. */
    .kd-quote__table {
        min-width: 0;
    }
    .kd-quote__table thead,
    .kd-parts thead {
        display: none;
    }
    /* The number heads the stacked card instead of sitting in a cell --
     * on a phone "3" in a two-column grid reads as a value, not an
     * index. */
    .kd-quote__table td.kd-quote__num,
    .kd-parts td.kd-quote__num {
        display: block;
        text-align: left;
        padding-bottom: var(--kd-s-2);
        border-bottom: var(--kd-border-w) solid var(--kd-border);
        margin-bottom: var(--kd-s-2);
    }
    .kd-quote__table td.kd-quote__num::before,
    .kd-parts td.kd-quote__num::before {
        content: "#";
    }
    .kd-quote__table tr,
    .kd-parts tr {
        display: block;
        padding: var(--kd-s-4) 0;
        border-bottom: var(--kd-border-w) solid var(--kd-border-strong);
    }
    .kd-quote__table td,
    .kd-parts td {
        display: grid;
        grid-template-columns: 8rem 1fr;
        align-items: center;
        gap: var(--kd-s-3);
        border: 0;
        padding: var(--kd-s-2) 0;
    }
    .kd-quote__table td::before,
    .kd-parts td::before {
        content: attr(data-label);
        font-family: var(--kd-font-mono);
        font-size: var(--kd-text-0);
        letter-spacing: var(--kd-track-mono);
        text-transform: uppercase;
        color: var(--kd-fg-muted);
    }
}

/* ---- The homepage's two-flow block ----------------------------------
 *
 * Lives in this file rather than kd-sections.css because it is the
 * homepage's entry point INTO the quote flows -- it belongs to this
 * feature, and a site without core_quotes mounted has no use for it.
 * kd-quotes.css is loaded on the homepage for exactly this block.
 */

 * has, which is a bad trade for a border radius.
 *
 * The input itself carries NO border here: the row's cell is already a
 * bounded box, and a second frame around a control that is mostly text
 * reads as a broken field.
 */

.kd-quote__table input[type="file"],
.kd-quote__contact input[type="file"] {
    border: 0;
    padding: 0;
    background: none;
    min-height: 0;
    /* The chosen-file text, which we do not control the wording of. */
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-0);
    color: var(--kd-fg-muted);
    /* Never let a long filename widen its column. */
    max-width: 100%;
}

.kd-quote__table input[type="file"]::file-selector-button,
.kd-quote__contact input[type="file"]::file-selector-button {
    /* The same shape as kd-btn--ghost, written out rather than @extend'd
     * because this is a pseudo-element and cannot carry a class. */
    font-family: var(--kd-font-sans);
    font-size: var(--kd-text-0);
    font-weight: var(--kd-w-medium);
    color: var(--kd-fg);
    background: var(--kd-bg-alt);
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-r-1);
    padding: var(--kd-s-2) var(--kd-s-3);
    margin-right: var(--kd-s-3);
    cursor: pointer;
    transition: border-color var(--kd-dur-fast) var(--kd-ease),
                background var(--kd-dur-fast) var(--kd-ease);
}

.kd-quote__table input[type="file"]::file-selector-button:hover,
.kd-quote__contact input[type="file"]::file-selector-button:hover {
    background: var(--kd-bg);
    border-color: var(--kd-border-strong);
}

/* The focus ring belongs on the INPUT, not the button: that is what the
 * keyboard actually focuses. */
.kd-quote__table input[type="file"]:focus-visible,
.kd-quote__contact input[type="file"]:focus-visible {
    outline: none;
}