/* A data mask an answer places inline, laid out as a master and its detail: the mask's heading and the list's
   tools on one line, the records of the first level as a list in a rounded frame, and under a rule the detail of
   the selected record — every field of it as a labelled box in a two-column form, grouped into sections, and the
   record's children on a tab beside its fields, where the same list-and-detail repeats one level down.

   The mask paints its own surface, so it reads the same in any bubble. Inline it is bounded in height: the list
   keeps its place and the detail scrolls beneath it. The bound is the height of the box the page shows the mask in —
   where the page makes that box a size container and sets --mask-clearance to what its own controls cover of it —
   and otherwise the window's. It never falls below what the heading line, two records of the list and two fields of
   the detail take together, so nothing inside the mask ever stands outside its frame. Full screen covers the whole
   window and hands the bound to it.

   The mask sits inside the answer's Markdown, whose heading, table and list rules would otherwise reach it; every
   rule that meets one of those elements is scoped under .ava-mask so it outranks them. */
.ava-mask {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-height: min(880px, max(420px, 100cqh - var(--mask-clearance, 14vh)));
    margin: 10px 0;
    padding: 10px;
    border: 1px solid var(--ava-line-soft);
    border-radius: var(--r-sm);
    background: var(--ava-mask-bg);
    color: var(--ava-text-1);
    font-family: var(--font-sans);
    font-size: 11.5px;
    line-height: 1.25;
}
/* The mask takes the focus only so that its keys still reach it — after a click on nothing focusable inside it, or
   once the control that held the focus has gone — and is no stop of its own, so it draws no focus ring. */
.ava-mask:focus { outline: none; }
/* Edge to edge over the whole window, so nothing of the page behind it shows. Pinned by its four insets alone: a
   width kept from the inline view would over-constrain the box, and the browser would drop the right inset and push
   the mask's right edge off the screen. */
.ava-mask.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: auto;
    max-height: none;
    margin: 0;
    padding: 16px 20px;
    border: 0;
    border-radius: 0;
}
/* A scroll that reaches the end of a list or of the detail stops there instead of moving the chat hidden behind. */
.ava-mask.is-fullscreen .ava-mask-list,
.ava-mask.is-fullscreen > .ava-mask-level > .ava-mask-detail { overscroll-behavior: contain; }

/* The line above a list: on the first level the mask's heading and what it was read from, on a lower level the
   count; the list's tools on the right. */
.ava-mask-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 12px;
}
.ava-mask-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 14px;
    min-width: 0;
}
.ava-mask .ava-mask-title {
    margin: 0;
    color: var(--ava-mask-accent);
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    overflow-wrap: anywhere;
}
.ava-mask-meta,
.ava-mask-count {
    color: var(--ava-text-3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
/* The tools keep to the right, also on a line of their own under a long heading. */
.ava-mask-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* The mask's own controls share the value boxes' look: a dark box on the dark surface, a white one in light. */
.ava-mask-btn,
.ava-mask .ava-mask-input {
    height: 28px;
    border: 1px solid var(--ava-mask-field-border);
    border-radius: 6px;
    background: var(--ava-mask-field-bg);
    font-family: var(--font-sans);
    font-size: 12px;
}
.ava-mask-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    color: var(--ava-text-2);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.ava-mask-btn:hover { color: var(--ava-text-1); border-color: var(--ava-line-strong); }
.ava-mask-btn.is-active { color: var(--ava-mask-accent); border-color: var(--ava-mask-accent); }
.ava-mask-btn.is-icon { width: 28px; padding: 0; }
.ava-mask-btn:disabled { opacity: 0.55; cursor: default; }
.ava-mask .ava-mask-input {
    width: 100%;
    min-width: 0;
    padding: 0 9px;
    color: var(--ava-text-1);
}
.ava-mask .ava-mask-input::placeholder { color: var(--ava-text-3); }
.ava-mask .ava-mask-input.is-invalid { border-color: var(--ava-danger); }
.ava-mask-search { position: relative; width: 216px; }
.ava-mask-search > .bi {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--ava-text-3);
    font-size: 12px;
    pointer-events: none;
}
.ava-mask .ava-mask-search > .ava-mask-input { padding-left: 29px; }
.ava-mask-btn:focus-visible,
.ava-mask .ava-mask-input:focus-visible,
.ava-mask-sort:focus-visible,
.ava-mask-tab:focus-visible,
.ava-mask-menu-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ava-focus-r);
    border-color: var(--ava-focus);
}

/* A menu opening under its button towards the mask's inside: the column chooser and the downloads. */
.ava-mask-menu-anchor { position: relative; }
.ava-mask-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
    max-height: 336px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid var(--ava-line-strong);
    border-radius: var(--r-xs);
    background: var(--ava-navy-deep);
    box-shadow: var(--shadow-panel);
}
.ava-mask .ava-mask-menu-item,
.ava-mask .ava-mask-menu-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 7px;
    color: var(--ava-text-1);
    font-size: 12.5px;
    font-weight: 400;
}
.ava-mask .ava-mask-menu-option { color: var(--ava-text-2); }
/* One rule between the formats and the options that change what a download holds. */
.ava-mask .ava-mask-menu-action + .ava-mask-menu-option {
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid var(--ava-line-soft);
}
.ava-mask-menu-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 7px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ava-text-1);
    font-family: var(--font-sans);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}
.ava-mask-menu-action:hover { background: var(--ava-hover); }

/* One level: its list and, under it, the detail of the record selected in it. On the first level the two share
   the mask's height — the list keeps its own, the detail takes the rest and scrolls. Where the mask is too short
   for both, the detail gives way first, its far larger shrink weight taking the shortfall, and the list only once
   the detail is down to its minimum; neither goes below two of its records or two of its fields. */
.ava-mask-level {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.ava-mask > .ava-mask-level { flex: 1 1 auto; }

/* The list: a rounded frame that scrolls inside itself, its heading row kept in view. */
.ava-mask-list {
    flex: 0 1 auto;
    max-height: 312px;
    overflow: auto;
    border: 1px solid var(--ava-line);
    border-radius: 7px;
    scrollbar-width: thin;
    scrollbar-color: var(--ava-line-strong) transparent;
}
.ava-mask > .ava-mask-level > .ava-mask-list { min-height: 85px; }
.ava-mask-level.is-nested > .ava-mask-list { max-height: 256px; }
.ava-mask.is-fullscreen > .ava-mask-level > .ava-mask-list { max-height: 40vh; }
.ava-mask .ava-mask-table {
    display: table;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11.5px;
}
.ava-mask .ava-mask-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.ava-mask .ava-mask-table th,
.ava-mask .ava-mask-table td {
    max-width: 384px;
    padding: 6px 9px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ava-mask .ava-mask-table th {
    border: 0;
    background: var(--ava-mask-head-bg);
    color: var(--ava-text-1);
    font-size: 11px;
    font-weight: 600;
    line-height: 14.5px;
}
.ava-mask .ava-mask-table td {
    border: 0;
    border-bottom: 1px solid var(--ava-mask-row-line);
    color: var(--ava-text-1);
    font-weight: 600;
    line-height: 15px;
}
.ava-mask .ava-mask-table tbody tr:last-child > td { border-bottom-color: transparent; }
.ava-mask .ava-mask-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.ava-mask-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.ava-mask-sort > span { overflow: hidden; text-overflow: ellipsis; }
.ava-mask-sort > .bi { font-size: 11px; opacity: 0; }
.ava-mask-sort:hover > .bi,
.ava-mask-sort:focus-visible > .bi,
.ava-mask-sort.is-sorted > .bi { opacity: 1; }
.ava-mask .ava-mask-table .ava-mask-filters td {
    padding: 5px 6px;
    background: var(--ava-mask-bg);
    overflow: visible;
}
.ava-mask-range { display: flex; gap: 5px; }
.ava-mask .ava-mask-filters .ava-mask-input { height: 26px; min-width: 76px; }
.ava-mask-row { cursor: pointer; }
.ava-mask-row:hover > td { background: var(--ava-hover); }
.ava-mask .ava-mask-row.is-selected > td { background: var(--ava-mask-row-selected); }
.ava-mask-row:focus-visible { outline: 1px solid var(--ava-focus); outline-offset: -1px; }
.ava-mask .ava-mask-table .ava-mask-empty {
    padding: 17px 9px;
    color: var(--ava-text-2);
    font-weight: 400;
    text-align: center;
    white-space: normal;
}

/* The detail of the selected record, under a rule across the full width. */
.ava-mask-detail {
    min-width: 0;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--ava-line-soft);
}
.ava-mask > .ava-mask-level > .ava-mask-detail {
    flex: 1 1000 auto;
    min-height: 144px;
    overflow: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--ava-line-strong) transparent;
}
/* The detail's heading, Details, on a level without a next level. */
.ava-mask-detail-head { margin-bottom: 19px; }
.ava-mask .ava-mask-record {
    margin: 0;
    color: var(--ava-mask-accent);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 19px;
}

/* On a level with a next level the heading line is the tab list: Details, the record's fields, and beside it the
   record's children. The active tab reads like the heading; the other stands in the secondary text colour. */
.ava-mask-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    margin: 0 0 19px;
    border-bottom: 1px solid var(--ava-line-soft);
}
.ava-mask-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
    padding: 0 1px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--ava-text-2);
    font-family: var(--font-sans);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 19px;
    cursor: pointer;
}
.ava-mask-tab:hover { color: var(--ava-text-1); }
.ava-mask-tab.is-active { color: var(--ava-mask-accent); border-bottom-color: var(--ava-mask-accent); }
.ava-mask-tab-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--ava-text-2) 16%, transparent);
    color: var(--ava-text-2);
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* The fields: a label beside a read-only box, two to a line from a mask about 800px wide and more on a wide
   screen. The space kept on the right keeps a field clear of the scrollbar. */
.ava-mask .ava-mask-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 14px 44px;
    margin: 0;
    padding-right: 44px;
}
.ava-mask-field {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
}
.ava-mask .ava-mask-label {
    padding-right: 12px;
    color: var(--ava-text-2);
    font-size: 12px;
    font-weight: 400;
    overflow-wrap: anywhere;
}
.ava-mask .ava-mask-value {
    min-width: 0;
    min-height: 29px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--ava-mask-field-border);
    border-radius: 6px;
    background: var(--ava-mask-field-bg);
    color: var(--ava-text-1);
    font-size: 12.25px;
    font-weight: 600;
    line-height: 15px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* A section heading: a small capital kicker followed by a rule to the mask's right edge. */
.ava-mask-section {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 19px;
    color: var(--ava-mask-kicker);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.55px;
    line-height: 14px;
    text-transform: uppercase;
}
.ava-mask-section::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--ava-line-soft);
}

/* A lower level on its tab: the count and the tools above its list. */
.ava-mask-level.is-nested > .ava-mask-bar { margin-bottom: 10px; }

/* Loading, unavailable, unreadable and a failed download: a dashed box with a short line. */
.ava-mask-placeholder,
.ava-mask-missing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 14px 17px;
    border: 1px dashed var(--ava-line-strong);
    border-radius: 7px;
}
.ava-mask-notice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ava-text-2);
    font-size: 12.5px;
}
.ava-mask-notice.is-error { color: var(--ava-danger); }

/* On a phone the controls and rows grow to a finger's size; the app's own rule already sets every text input to
   16px there, so the boxes are sized for that. The line above a list packs into short rows — the heading with the
   full-screen control, the quick search across the width, then the count with the list's tools as icons, each still
   named by its label for assistive technology — and the spacing of the detail tightens, so the detail keeps room
   beneath the list. The floor of the mask's bound holds that taller heading line. */
@media (max-width: 640px) {
    .ava-mask { max-height: min(880px, max(480px, 100cqh - var(--mask-clearance, 14vh))); }
    .ava-mask,
    .ava-mask.is-fullscreen { padding: 8px; }
    .ava-mask-btn,
    .ava-mask .ava-mask-input { height: 36px; }
    .ava-mask-btn.is-icon { width: 36px; }
    .ava-mask .ava-mask-filters .ava-mask-input { height: 34px; }
    .ava-mask .ava-mask-table td { padding-top: 10px; padding-bottom: 10px; }
    .ava-mask-bar,
    .ava-mask-level.is-nested > .ava-mask-bar { gap: 6px 8px; margin-bottom: 8px; }
    .ava-mask-heading { order: -2; flex: 1 1 0; row-gap: 2px; }
    .ava-mask .ava-mask-title { font-size: 16px; line-height: 20px; }
    .ava-mask-tools { display: contents; }
    .ava-mask-tools > .ava-mask-btn.is-icon { order: -2; }
    .ava-mask-search { order: -1; flex: 1 1 100%; width: auto; }
    .ava-mask-count { margin-right: auto; }
    .ava-mask-tools .ava-mask-btn { width: 36px; padding: 0; }
    .ava-mask-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .ava-mask-btn-caret { display: none; }
    /* A menu spans the line above its list instead of hanging from its button, so it stays inside the detail a lower
       level's list stands in, which would otherwise cut off its left part. */
    .ava-mask-bar { position: relative; }
    .ava-mask-menu-anchor { position: static; }
    .ava-mask-menu { left: 0; min-width: 0; }
    .ava-mask-list { max-height: 224px; }
    .ava-mask > .ava-mask-level > .ava-mask-list { min-height: 101px; }
    .ava-mask-level.is-nested > .ava-mask-list { max-height: 188px; }
    .ava-mask-detail { margin-top: 14px; padding-top: 12px; }
    .ava-mask > .ava-mask-level > .ava-mask-detail { min-height: 170px; }
    .ava-mask-detail-head,
    .ava-mask-tabs { margin-bottom: 12px; }
    .ava-mask .ava-mask-fields { gap: 10px; padding-right: 0; }
    .ava-mask-field { grid-template-columns: minmax(0, 1fr); row-gap: 5px; }
    .ava-mask-section { margin: 16px 0 12px; }
}