/* HTMX loading indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* The RFQ board's countdown to its next refresh: a full bar emptying towards its
   left end over the poll interval, set on the element. Restarted by the swap that
   replaces it. */
.rfq-board-poll {
    height: 3px;
    border-radius: 9999px;
    background-color: #e5e7eb; /* gray-200 */
    overflow: hidden;
}
.rfq-board-poll-bar {
    height: 100%;
    background-color: #3b82f6; /* blue-500, the loading bar's */
    transform-origin: left center;
    animation-name: rfq-board-countdown;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes rfq-board-countdown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Form control: a bordered box for inputs and selects alike.
   Tailwind v2 ships without the forms plugin, so its preflight zeroes
   border-width (leaving `border-gray-300` setting only a colour) and leaves a
   select's native chrome alone. The result is a text input with no visible box
   sitting beside a natively-drawn select — and the mismatch differs by
   platform. This is the smallest rule that makes the two the same control. */
.form-control {
    border-width: 1px;
}
/* The chevron goes on both control types that offer a list: a <select>, and a
   text input backed by a <datalist>. Chrome draws its own indicator inside the
   latter, but only on hover, so without this the two sit side by side looking
   like different kinds of field until you touch one. What cannot be reconciled
   is the popup each opens — a datalist's list and a select's menu are native
   widgets — so the resting state is as far as this goes. */
select.form-control,
input.form-control[list] {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2rem;
}

/* Chrome's own datalist indicator, hidden so the chevron above is the only one. */
input.form-control[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   The one distinction the compliance console exists to protect.

   Nothing we write may be mistakable for something the authority wrote. A
   condition read as ours is a condition nobody honours; a note of ours read as
   theirs is a promise the source never asked for. Two treatments carry it, and
   they are deliberately different in kind rather than in shade:

     the authority's words   quoted   — a rule in the margin, set in a serif
     ours                    a field  — a filled, bordered surface, set in the
                                        interface face

   A person tells them apart without reading a label, and without a hue: every
   hue in this console already means something. Blue is action — links, buttons,
   the focus ring. Red, yellow and green are the light, which is a judgement a
   person made. A fourth meaning would have had to borrow one of those, and the
   pale blue this replaces borrowed the action colour so faintly (#EFF6FF, about
   one per cent off white) that it read as nothing at all.

   The rule lives here rather than in the templates because it was restated in
   six of them, where nothing could enforce it and a grey rule could drift onto
   something we typed. Tailwind is a prebuilt v2 file, so this is also the only
   place the treatment can be expressed once.
   --------------------------------------------------------------------------- */

/* The two states of one editable field. Both carry the face: if only the read
   view had it, the text would reflow the moment someone clicked into it. */
.panel-source,
.panel-source-edit {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

/* The rule that marks the words as quoted. Read view only — a field being
   edited is already unmistakable, and it carries its own active border. */
.panel-source {
    border-left: 2px solid #d1d5db;   /* gray-300 */
    padding: 0.125rem 0 0.125rem 0.75rem;
}

/* Ours. A surface you could write on, because these are the fields you write
   in: the note that never leaves the console, and the answer that does. */
.panel-ours {
    background-color: #f9fafb;        /* gray-50 */
    border: 1px solid #e5e7eb;        /* gray-200 */
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}

/* The work queue's own scroll box, at the breakpoint where it sits beside the
   open requirement rather than above it.

   The wrapper around it is sticky at `top-4`, and the box used to take
   `lg:max-h-screen` — a full 100vh under a 1rem offset, which put its bottom
   16px below the viewport and clipped its last row for good. The form for
   adding a row by hand sits under the box inside the same sticky wrapper, so
   the cap leaves room for that as well.

   This lives here rather than in a class on the element because the stylesheet
   is a prebuilt Tailwind v2 file: it has no calc() utility, and a class name it
   does not contain matches nothing and fails without a word. */
@media (min-width: 1024px) {
    .queue-scroll {
        max-height: calc(100vh - 5rem);
    }
}

/* Fold-card chevron: rotates 90° down when its <details> parent is open.
   Tailwind v2 ships without the group-open: variant, so this is the
   smallest custom rule that gets the rotation back. */
.fold-chev {
    transition: transform 150ms ease;
}
details[open] > summary .fold-chev {
    transform: rotate(90deg);
}

/* A card inside a fold would print the heading its summary already carries. A
   rule rather than a flag on the include, because the card re-renders itself
   from a route that cannot know which of the two rails asked for it. */
.fold-body [data-panel-heading] {
    display: none;
}

/* Safari ignores `list-style: none` on a summary and draws its triangle anyway,
   so on iOS a summary that asked for no marker — because it carries a chevron of
   its own, or is styled as a button — showed two arrows. Scoped to `list-none`
   so the folds that do want the native marker keep it. */
summary.list-none::-webkit-details-marker {
    display: none;
}

/* The summary table's short lines. A title, a filename, a note's first line:
   each is shown on one or two lines and the rest is under the fold, opened
   with the row. Clamped here rather than cut by the server, so what a person
   copies out of the table is the whole text. Tailwind v2 ships no line-clamp
   utility. */
.clamp-1,
.clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }