/* Record sheets + Ask Enne (round 5, docs/plans/2026-10-27-record-sheets.md).

   The contact, organization and project details are right-docked sheets:
   <dialog class="neu-modal neu-modal-xl record-sheet"> keeps every inner id
   the page scripts populate. Head (identity + actions) stays put, the body
   scrolls under it and the tab bar sticks under the head. .ask-enne-btn /
   .ask-enne-menu are shared with the pipeline card sheet's head.
   Linked first in {% block extra_css %} on contacts, organizations, projects
   and pipeline; selectors carry enough weight to beat modern.css's
   .neu-modal[open] / .neu-modal-xl and its mobile modal rules without
   !important. */

/* ---------- Frame ---------- */

dialog.record-sheet {
    --sheet-pad: 24px;
    --sheet-body-top: 16px;
    width: min(var(--sheet-w, 640px), 100vw);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    border: 0;
    border-left: 1px solid var(--surface-border);
    border-radius: 0;
    box-shadow: var(--shadow-lift);
}

/* Projects carry task tables: a wider sheet. */
.record-sheet--wide {
    --sheet-w: 760px;
}

/* Dock to the right edge. Beats .neu-modal[open] { margin: auto } and
   Tailwind's .space-y-8 > :not([hidden]) ~ :not([hidden]) margin-top (0,3,0):
   the detail dialogs sit inside the page's .space-y-8 wrapper. */
dialog.neu-modal.record-sheet[open] {
    margin: 0 0 0 auto;
    animation: record-sheet-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The veil is modern.css's .neu-modal::backdrop; it fades in with the sheet. */
dialog.record-sheet[open]::backdrop {
    animation: record-sheet-veil 0.22s ease-out;
}

@keyframes record-sheet-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes record-sheet-veil {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Beats .neu-modal-xl .neu-modal-body { min-height: 420px } and the mobile
   modal padding; the sheet's own scroller. */
dialog.record-sheet .neu-modal-body {
    min-height: 0;
    padding: var(--sheet-body-top) var(--sheet-pad) 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---------- Head ---------- */

.record-sheet .record-sheet-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    padding: 20px var(--sheet-pad) 14px;
    border-bottom: 1px solid var(--border);
}

.record-sheet-id {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
}

.record-sheet-titles {
    min-width: 0;
}

.record-sheet .record-sheet-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-tight);
    color: var(--foreground);
    overflow-wrap: anywhere;
}

/* Focused on open (tabindex=-1) so screen readers start at the name; it is
   a reading position, not a control. */
.record-sheet .record-sheet-title:focus {
    outline: none;
}

.record-sheet-sub {
    margin: 4px 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--foreground-secondary);
    overflow-wrap: anywhere;
}

.record-sheet-sub:empty {
    display: none;
}

.record-sheet .record-sheet-close {
    align-self: start;
    width: 32px;
    height: 32px;
    margin: -4px -6px 0 0;
    border-radius: 8px;
}

.record-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Ghost action (Edit): a hairline in the text's own grey, no fill. */
.record-sheet-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--surface-border);
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 8px;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.record-sheet-action svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--foreground-secondary);
}

.record-sheet-action:hover {
    background: var(--secondary);
}

/* ---------- Facts strip (contacts) ----------
   Label eyebrow + value, like the pipeline sheet's facts. Rows show and hide
   themselves (inline display from contacts.js), so no dividers between
   cells: the strip is ruled once underneath. */

.record-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px 24px;
    margin: 0 0 16px;
    padding: 2px 0 16px;
    border-bottom: 1px solid var(--border-light);
}

.record-facts[hidden] {
    display: none;
}

.record-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.record-fact-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--foreground-secondary);
}

.record-fact-value {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--foreground);
    overflow-wrap: anywhere;
}

.record-fact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
}

.record-fact-chips .neu-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ---------- Tab bar ----------
   The page's underlined tabs (inline border/colour from the page scripts),
   pinned under the head while the body scrolls. Full bleed so the hairline
   and the frost reach both edges. The frost appears only while content
   scrolls under the bar (.is-stuck, set by the page script). */

/* A sticky box stops at the scroller's padding edge: the negative top
   pins it to the body's very top instead, so nothing peeks out above it. */
.record-sheet .record-sheet-tabs {
    position: sticky;
    top: calc(var(--sheet-body-top) * -1);
    z-index: 2;
    gap: 22px;
    margin: 0 calc(var(--sheet-pad) * -1) 16px;
    padding: 8px var(--sheet-pad) 0;
    background: transparent;
}

.record-sheet .record-sheet-tabs.is-stuck {
    background: var(--surface-strong);
    -webkit-backdrop-filter: blur(var(--surface-blur)) saturate(1.1);
    backdrop-filter: blur(var(--surface-blur)) saturate(1.1);
}

.record-sheet .record-sheet-tabs .tab-btn {
    font-weight: 500;
    white-space: nowrap;
}

.record-sheet .record-sheet-tabs .neu-badge {
    font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Ask Enne ----------
   Violet is the assistant's band: the glyph and the hover wash only. */

.ask-enne-anchor {
    position: relative;
    display: inline-flex;
}

.ask-enne-anchor[hidden] {
    display: none;
}

.ask-enne-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--surface-border);
    border-color: color-mix(in srgb, var(--ai) 26%, var(--surface-border));
    border-radius: 8px;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ask-enne-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--ai);
}

.ask-enne-btn:hover,
.ask-enne-btn[aria-expanded="true"] {
    background: var(--ai-tint);
    border-color: color-mix(in srgb, var(--ai) 45%, var(--surface-border));
}

.ask-enne-btn:focus-visible {
    outline-color: var(--ai);
}

/* Sits beside the pipeline sheet's 34px Cancel / Save. */
.pipeline-sheet-head .ask-enne-btn {
    height: 34px;
}

.ask-enne-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 232px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 5px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    /* Denser than --surface-strong: a frost nested in the sheet's own
       backdrop-filter does not reliably blur the rows under it, and the
       prompts must stay legible over them. */
    background: var(--card);
    background: color-mix(in srgb, var(--card) 96%, transparent);
    -webkit-backdrop-filter: blur(var(--surface-blur)) saturate(1.1);
    backdrop-filter: blur(var(--surface-blur)) saturate(1.1);
    box-shadow: var(--shadow-lift);
    animation: ask-enne-menu-in 0.14s ease-out;
}

.ask-enne-menu[hidden] {
    display: none;
}

/* Opens leftwards from a button near the right edge (pipeline head). */
.ask-enne-menu--end {
    left: auto;
    right: 0;
}

@keyframes ask-enne-menu-in {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.ask-enne-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 0.84375rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.ask-enne-item:hover {
    background: var(--ai-tint);
}

/* Roving focus reads as the row wash plus a violet hairline, not the jade
   page ring. */
.ask-enne-item:focus-visible {
    outline: none;
    background: var(--ai-tint);
    box-shadow: inset 0 0 0 1px var(--ai);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai) 45%, transparent);
}

/* ---------- Phone ---------- */

@media (max-width: 640px) {
    dialog.record-sheet {
        --sheet-pad: 16px;
        width: 100vw;
        border-left: 0;
    }

    .record-sheet .record-sheet-head {
        padding-top: 14px;
        gap: 12px;
    }

    .record-sheet .record-sheet-title {
        font-size: 1.3125rem;
    }

    /* Touch-sized controls in the head. */
    .record-sheet .record-sheet-close {
        width: 40px;
        height: 40px;
        margin: -6px -10px 0 0;
    }

    .record-sheet-action,
    .record-sheet .ask-enne-btn {
        height: 40px;
    }

    .record-facts {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px 16px;
    }

    /* Icon-only Ask Enne; the label stays for screen readers. */
    .ask-enne-btn {
        min-width: 40px;
        padding: 0;
    }

    .ask-enne-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .pipeline-sheet-head .ask-enne-btn {
        min-width: 34px;
    }
}

/* ---------- Motion + transparency fallbacks ---------- */

@media (prefers-reduced-motion: reduce) {
    dialog.neu-modal.record-sheet[open],
    dialog.record-sheet[open]::backdrop,
    .ask-enne-menu {
        animation: none;
    }

    .record-sheet-action,
    .ask-enne-btn {
        transition: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    dialog.record-sheet,
    .record-sheet .record-sheet-tabs.is-stuck,
    .ask-enne-menu {
        background: var(--card);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    dialog.record-sheet,
    .record-sheet .record-sheet-tabs.is-stuck,
    .ask-enne-menu {
        background: var(--card);
    }
}

/* No color-mix(): the hairlines above fall back to their first declaration
   at parse time; the glass tokens are invalid where used, so go opaque. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    dialog.record-sheet,
    .record-sheet .record-sheet-tabs.is-stuck,
    .ask-enne-menu {
        background: var(--card);
    }

    dialog.record-sheet {
        border-left-color: var(--border);
    }
}