/* =============================================
   Components: what every portal page is built
   from. A page is a .portal-page: a header on
   the page's background (.page-hero: a back
   link, the title, a meta line, the page's
   buttons), then a stack of panels -- bordered,
   under a small uppercase title -- holding
   tables, the grey record sheet, forms
   (forms.css) or text. Also the buttons,
   callouts, stat tiles, a segmented toggle, a
   switch, a pager, the modals, and each table
   row stacking on phones.
   The facility page (pages/facility.css) is
   laid out the same way.
   ============================================= */

/* ----- The header: a back link, the title (and a tag), a meta line and
   the page's buttons. The facility page's .facility-hero looks the same. ----- */
.page-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--in-accent);
    font-size: 0.88rem;
    font-weight: 500;
}

.page-back:hover,
.page-back:focus {
    color: var(--in-accent-hover);
    text-decoration: none;
}

.page-back .fa {
    transition: transform 0.15s ease;
}

.page-back:hover .fa {
    transform: translateX(-3px);
}

.page-hero__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.page-hero__title {
    margin: 0;
    color: var(--in-accent);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.page-hero__tag {
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--in-tag-bg);
    color: var(--in-tag-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin: 8px 0 0;
    color: var(--in-text-2);
    font-size: 0.92rem;
}

.page-hero__meta-item .fa {
    margin-right: 5px;
    color: var(--in-text-faint);
}

.portal-page .messages .alert {
    margin-bottom: 0;
}

.portal-page .messages .alert + .alert {
    margin-top: 8px;
}

/* --page-gutter keeps the content within 1400px on wide screens */
.portal-page {
    --page-gutter: max(28px, calc((100% - 1400px) / 2));
    padding-bottom: 48px;
}

.page-hero {
    padding: 18px var(--page-gutter) 6px;
    color: var(--in-text);
}

.page-hero__bar {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 4px;
}

/* Without a back link, the title starts a little lower */
.page-hero__row:first-child {
    margin-top: 12px;
}

/* The title and meta line, and the page's buttons at their right */
.page-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
}

.page-hero__main {
    min-width: 0;
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A toggle between the page's views, under the title (Registrations' My
   Registrations and Company-wide): a large segmented toggle */
.page-hero__toggle {
    margin-top: 16px;
}

.portal-page > .messages {
    padding: 16px var(--page-gutter) 0;
}

.portal-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 18px var(--page-gutter) 0;
}

/* Forms: panels no wider than their fields need, under the title */
.portal-stack--narrow > * {
    width: 100%;
    max-width: 960px;
}

/* Installer Details: the team beside the record, as the facility page's
   activity sits beside its record, the two as tall as each other */
.portal-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

@media (min-width: 1300px) {
    .portal-workspace {
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        gap: 22px;
    }
}

/* ----- Panels ----- */
.panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--in-border);
    border-radius: 10px;
    background-color: var(--in-surface);
    color: var(--in-text);
}

.panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    min-height: 50px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--in-border-soft);
}

/* Like the record's section titles. !important: styles.css sets every h2's
   size, !important, on phones */
.panel__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    color: var(--in-accent);
    font-family: inherit;
    font-size: 0.72rem !important;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.panel__count {
    padding: 1px 8px;
    border-radius: 999px;
    background-color: var(--in-wash);
    color: var(--in-text-muted);
    font-size: 0.7rem;
    letter-spacing: 0;
}

.panel__hint {
    color: var(--in-text-faint);
    font-size: 0.75rem;
    font-style: italic;
}

.panel__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Up to 380px wide, narrower before the tools after it wrap. margin-left:
   auto keeps it on the right, with those tools. */
.panel__tools--search {
    flex: 1 1 240px;
    max-width: 380px;
    margin-left: auto;
}

/* Filters and bulk actions, between a panel's title and its table */
.panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--in-border-soft);
    background-color: var(--in-sheet-2);
}

.panel__empty {
    padding: 32px 16px;
    color: var(--in-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.panel__empty p {
    margin: 0 0 14px;
}

.panel__empty p:last-child {
    margin-bottom: 0;
}

.panel__loading {
    padding: 20px;
    text-align: center;
}

/* A panel's own content, when it isn't a table: a form, a chart, text */
.panel__body {
    padding: 16px;
}

.panel__text {
    margin: 0 0 12px;
    color: var(--in-text-2);
    font-size: 0.88rem;
    line-height: 1.5;
}

.panel__text:last-child {
    margin-bottom: 0;
}

/* A line under the content: a note, or the panel's buttons */
.panel__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--in-border-soft);
    background-color: var(--in-sheet-2);
    color: var(--in-text-muted);
    font-size: 0.82rem;
}

/* Panels side by side, as many as fit */
.portal-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 20px;
    align-items: start;
}

/* A search field in a panel's header */
.panel-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
}

.panel-search .fa {
    position: absolute;
    left: 11px;
    color: var(--in-text-faint);
    font-size: 0.8rem;
    pointer-events: none;
}

.panel-search__input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 31px;
    border: 1px solid var(--in-border-input);
    border-radius: 6px;
    background-color: var(--in-surface);
    color: var(--in-text);
    font-size: 0.85rem;
}

.panel-search__input::placeholder {
    color: var(--in-text-placeholder);
}

.panel-search__input:focus {
    border-color: var(--in-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--in-focus);
}

/* ----- Buttons: outlined, or the brand green for the page's main action.
   The facility page's composer uses them too. ----- */
.portal-btn,
.portal-btn:hover,
.portal-btn:focus {
    text-decoration: none;
}

.portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 14px;
    border: 1px solid var(--in-border-input);
    border-radius: 6px;
    background-color: var(--in-surface);
    color: var(--in-text-2);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.portal-btn:hover,
.portal-btn:focus {
    border-color: var(--in-border-hover);
    background-color: var(--in-hover);
    color: var(--in-text);
}

.portal-btn:focus {
    outline: none;
}

.portal-btn:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

.portal-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.portal-btn--sm {
    min-height: 28px;
    padding: 3px 10px;
    font-size: 0.78rem;
}

.portal-btn--primary,
.portal-btn--primary:hover,
.portal-btn--primary:focus {
    color: #fff;
}

.portal-btn--primary {
    border-color: var(--in-button);
    background-color: var(--in-button);
}

.portal-btn--primary:not(:disabled):hover,
.portal-btn--primary:not(:disabled):focus {
    border-color: var(--in-button-hover);
    background-color: var(--in-button-hover);
}

.portal-btn--primary:disabled:hover {
    border-color: var(--in-button);
    background-color: var(--in-button);
}

/* An admin acting as the installer, amber like the record's upload */
.portal-btn--as-installer,
.portal-btn--as-installer:hover,
.portal-btn--as-installer:focus {
    border-color: var(--in-amber-border);
    color: var(--in-amber-text);
}

.portal-btn--as-installer:hover,
.portal-btn--as-installer:focus {
    background-color: var(--in-amber-wash);
}

/* Undoes something: the Account page's Turn Off */
.portal-btn--danger,
.portal-btn--danger:hover,
.portal-btn--danger:focus {
    border-color: var(--in-danger-border);
    color: var(--in-danger);
}

.portal-btn--danger:hover,
.portal-btn--danger:focus {
    background-color: var(--in-danger-wash);
}

/* The filter in force (Installer Details' View Registrations) */
.portal-btn.is-active {
    border-color: var(--in-accent);
    background-color: var(--in-accent-wash);
    color: var(--in-accent);
}

.portal-btn__external {
    font-size: 0.7em;
}

/* A link or button not taking clicks, as while files upload */
.portal-btn.disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* The width of its column: the sign-in pages' submit */
.portal-btn--block {
    display: flex;
    width: 100%;
}

.portal-btn--lg {
    min-height: 40px;
    padding: 8px 18px;
    font-size: 0.9rem;
}

/* An icon alone: move up and down, edit, delete */
.portal-btn--icon {
    width: 30px;
    min-height: 30px;
    padding: 0;
}

.portal-btn--icon:disabled {
    opacity: 0.35;
}

/* ----- The record: a grey sheet of labelled fields. The facility page's
   applicant record, Installer Details' company, the Account page's
   profile. ----- */
.record {
    position: relative;
    container-type: inline-size;
    min-width: 0;
    border: 1px solid var(--in-border-soft);
    border-radius: 10px;
    background-color: var(--in-sheet);
}

.record__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 32px;
    padding: 0 18px;
}

.record__section {
    min-width: 0;
    padding: 16px 0 18px;
    border-top: 1px solid var(--in-border-soft);
}

.record__section:first-child {
    border-top: 0;
}

.record__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    min-height: 28px;
    margin-bottom: 8px;
}

/* !important: styles.css sets every h2's size, !important, on phones */
.record__title {
    margin: 0;
    color: var(--in-accent);
    font-family: inherit;
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Edit, upload: an icon at the end of the heading */
.record__action {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: -6px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--in-accent);
    font-size: 0.85rem;
    cursor: pointer;
}

.record__action:hover,
.record__action:focus {
    background-color: var(--in-accent-wash);
    color: var(--in-accent);
    text-decoration: none;
}

.record__action:focus {
    outline: none;
}

.record__action:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 1px;
}

/* An admin uploads as the installer */
.record__action--as-installer,
.record__action--as-installer:hover,
.record__action--as-installer:focus {
    color: var(--in-amber-text);
}

.record__action--as-installer:hover,
.record__action--as-installer:focus {
    background-color: var(--in-amber-wash);
}

/* One label and value per row */
.record-fields {
    margin: 0;
}

.record-fields__row {
    display: grid;
    grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
    gap: 2px 12px;
    padding: 4px 0;
}

/* A row that waits on its value (the facility page's Website Agreement) */
.record-fields__row[hidden] {
    display: none;
}

.record-fields dt {
    margin: 0;
    padding-top: 2px;
    color: var(--in-text-muted);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
}

.record-fields dd {
    margin: 0;
    color: var(--in-text);
    font-size: 0.85rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.record-fields dd a {
    border-bottom: 1px dotted var(--in-border-hover);
    color: inherit;
}

.record-fields dd a:hover {
    color: var(--in-accent);
    text-decoration: none;
}

.record-fields__text {
    white-space: pre-line;
}

.record-fields__empty {
    color: var(--in-text-faint);
    font-style: italic;
}

/* A wide record: the two short sections side by side */
@container (min-width: 720px) {
    .record__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .record__section--wide {
        grid-column: 1 / -1;
    }

    .record__section--pair + .record__section--pair {
        border-top: 0;
    }
}

/* A narrow record: labels over their values */
@container (max-width: 280px) {
    .record-fields__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ----- Tables ----- */
.data-table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--in-text);
    font-size: 0.85rem;
    line-height: 1.45;
}

.data-table th {
    padding: 8px 12px;
    border-bottom: 1px solid var(--in-border-soft);
    background-color: var(--in-sheet);
    color: var(--in-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    padding: 10px 12px;
    border-top: 1px solid var(--in-border-soft);
    vertical-align: middle;
}

.data-table tbody tr:first-child td {
    border-top: 0;
}

.data-table th:first-child,
.data-table td:first-child {
    padding-left: 16px;
}

.data-table th:last-child,
.data-table td:last-child {
    padding-right: 16px;
}

.data-table tbody tr:hover {
    background-color: var(--in-hover);
}

.data-table tbody tr.is-selected {
    background-color: var(--in-accent-wash);
}

.data-table__name {
    color: var(--in-text);
    font-weight: 600;
}

a.data-table__name {
    color: var(--in-accent);
}

a.data-table__name:hover,
a.data-table__name:focus {
    color: var(--in-accent-hover);
}

.data-table__sub {
    display: block;
    color: var(--in-text-faint);
    font-size: 0.78rem;
}

.data-table__none {
    color: var(--in-text-faint);
    font-style: italic;
}

.data-table__num {
    white-space: nowrap;
}

.data-table .data-table__center {
    text-align: center;
}

.data-table__actions {
    text-align: right;
    white-space: nowrap;
}

.data-table__buttons {
    display: inline-flex;
    gap: 6px;
}

/* Sortable columns */
.data-table th.is-sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.is-sortable:hover {
    color: var(--in-text);
}

/* A header with more than one way to sort: a button each */
.data-table .th-sort {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.data-table .th-sort:hover,
.data-table .th-sort[aria-expanded="true"] {
    color: var(--in-text);
}

.data-table .th-sort:focus {
    outline: none;
}

.data-table .th-sort:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

.data-table th.sorted-asc::after,
.data-table .th-sort.sorted-asc::after {
    content: " \25B2";
}

.data-table th.sorted-desc::after,
.data-table .th-sort.sorted-desc::after {
    content: " \25BC";
}

.data-table .sort-icon {
    font-size: 0.6rem;
    opacity: 0.5;
}

.data-table .checkbox-column {
    width: 40px;
    padding-right: 0;
    text-align: center;
}

.data-table input[type="checkbox"] {
    accent-color: var(--in-accent);
}

/* A table's status badges, as small as the history's */
.data-table .status-badge {
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

/* A company's facilities (the Admin Dashboard's installers): the total, in
   a pill. A click opens the pill, the total then followed by the open ones
   by phase, each count after its numeral in the phase's color as on the
   Facility Status bar, then Complete's and Unresponsive's in their badges;
   another click anywhere on it closes it. A company with none has nothing
   to open. */
.facility-count {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.facility-count__total {
    min-width: 1.5em;
    font-weight: 700;
}

button.facility-count {
    padding: 2px 9px;
    border: 1px solid var(--in-border);
    border-radius: 14px;
    background-color: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

button.facility-count:hover,
button.facility-count[aria-expanded="true"] {
    border-color: var(--in-accent);
}

button.facility-count[aria-expanded="true"] {
    background-color: var(--in-surface);
}

button.facility-count:focus {
    outline: none;
}

button.facility-count:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

/* What the pill opens into is a grid whose column grows from 0fr, so the
   pill slides open and shut. The grid clips it: its counts keep their
   width and come into view as the column grows. The line after the total,
   and the space either side of it, are in there too, so closed they take
   no room. */
.facility-count__breakdown {
    display: grid;
    grid-template-columns: 0fr;
    overflow: hidden;
    visibility: hidden;
}

.facility-count[aria-expanded="true"] .facility-count__breakdown {
    grid-template-columns: 1fr;
    visibility: visible;
}

.facility-count__breakdown-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.facility-count__breakdown-inner > * {
    flex: none;
}

.facility-count__breakdown-inner::before {
    content: "";
    flex: none;
    align-self: stretch;
    margin-left: 10px;
    border-left: 1px solid var(--in-border);
}

@media (prefers-reduced-motion: no-preference) {
    button.facility-count,
    button.facility-count .facility-count__total {
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    .facility-count__breakdown {
        transition: grid-template-columns 0.3s ease, grid-template-rows 0.3s ease, visibility 0.3s;
    }
}

.facility-count__phase {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    white-space: nowrap;
}

.facility-count__numeral {
    padding: 0.2em 0.55em 0.15em;
    border-radius: 999px;
    font-family: "Cinzel", Georgia, serif;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
}

.facility-count__phase--new .facility-count__numeral {
    background-color: var(--in-phase-new);
    color: var(--in-phase-new-text);
}

.facility-count__phase--info_gathering .facility-count__numeral {
    background-color: var(--in-phase-info);
    color: var(--in-phase-info-text);
}

.facility-count__phase--in_review .facility-count__numeral {
    background-color: var(--in-phase-review);
    color: var(--in-phase-review-text);
}

.data-table .facility-count__breakdown .status-badge {
    min-width: 22px;
    padding: 1px 5px;
    font-size: 0.7rem;
}

.facility-count__breakdown .is-zero {
    opacity: 0.55;
}

/* While the installers are filtered or sorted by a status, how many of it
   each has, in its badge, in place of the total above */
.facility-count[hidden],
.facility-count__status[hidden] {
    display: none;
}

.facility-count__status {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.facility-count__status .status-badge {
    white-space: nowrap;
}

/* The Facilities header: the total's sort, then the Status menu's */
.facility-sort {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

.data-table .status-sort__toggle {
    padding-left: 10px;
    border-left: 1px solid var(--in-border);
}

.data-table .status-sort__toggle.is-active {
    color: var(--in-accent);
}

.status-sort__toggle .fa {
    margin-left: 2px;
}

/* Fixed to the window by the page's script, which places it under the
   toggle: the table scrolls sideways and would clip it */
.status-sort__list {
    position: fixed;
    z-index: 1000;
    min-width: 230px;
    padding: 6px 0;
    border: 1px solid var(--in-border-soft);
    border-radius: 6px;
    background-color: var(--in-surface);
    box-shadow: 0 10px 24px var(--in-shadow);
}

.status-sort__list[hidden] {
    display: none;
}

.status-sort__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 16px;
    border: 0;
    background: none;
    color: var(--in-text);
    font-size: 0.88rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.status-sort__item:hover,
.status-sort__item:focus {
    outline: none;
    background-color: var(--in-hover);
}

.status-sort__item[aria-checked="true"] {
    font-weight: 700;
}

.status-sort__dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.status-sort__dot--flett {
    background-color: var(--in-flett);
}

.status-sort__dot--installer {
    background-color: var(--in-amber);
}

.status-sort__dot--complete {
    background-color: var(--in-complete);
}

.status-sort__dot--unresponsive {
    background-color: var(--in-idle);
}

/* The Facility Status filter, on the installers' header: a click clears it */
.installers-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    cursor: pointer;
}

.installers-filter[hidden] {
    display: none;
}

.installers-filter .fa {
    opacity: 0.7;
}

.installers-filter:hover .fa {
    opacity: 1;
}

/* PPA and Geothermal after a name, and a team member's role */
.row-tag,
.role-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: var(--in-tag-bg);
    color: var(--in-tag-text);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 1px;
    white-space: nowrap;
}

.role-tag {
    margin-left: 0;
    background-color: var(--in-wash);
    color: var(--in-text-muted);
}

.data-table__lead .role-tag {
    margin-left: 6px;
}

.role-tag--manager {
    background-color: var(--in-tag-bg);
    color: var(--in-tag-text);
}

/* ----- Callouts: a note that needs attention, above or between panels.
   Amber (--warn), with the gold edge Info Requested has, for an admin
   acting as an installer and for Reports' missed days. ----- */
.callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 16px;
    border: 1px solid var(--in-border);
    border-radius: 10px;
    background-color: var(--in-surface);
    color: var(--in-text);
    font-size: 0.88rem;
    line-height: 1.5;
}

.callout--warn {
    border-color: var(--in-amber-border);
    background-color: var(--in-amber-wash);
    box-shadow: inset 3px 0 0 var(--fe-primary-gold);
}

.callout__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--in-surface);
    color: var(--in-amber-text);
    font-size: 1rem;
}

.callout__body {
    flex: 1 1 260px;
    min-width: 0;
}

.callout__title {
    display: block;
    margin-bottom: 2px;
    color: var(--in-amber-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.callout__body p {
    margin: 0;
}

.callout__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A callout's chips: Reports' missed dates */
.callout__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* ----- Stat tiles: a count over its label (Activity, Reports). A tile for
   a status group takes its color on the left edge, as Info Requested does
   its gold. ----- */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stat-tile {
    min-width: 0;
    padding: 14px 16px 15px 18px;
    border: 1px solid var(--in-border);
    border-radius: 10px;
    background-color: var(--in-surface);
}

.stat-tile--accent {
    box-shadow: inset 3px 0 0 var(--in-accent);
}

.stat-tile--flett {
    box-shadow: inset 3px 0 0 var(--in-flett);
}

.stat-tile--installer {
    box-shadow: inset 3px 0 0 var(--in-amber);
}

.stat-tile--complete {
    box-shadow: inset 3px 0 0 var(--in-complete);
}

.stat-tile--unresponsive {
    box-shadow: inset 3px 0 0 var(--in-idle);
}

.stat-tile--danger {
    box-shadow: inset 3px 0 0 var(--in-danger-border);
}

.stat-tile__value {
    display: block;
    color: var(--in-text);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
}

.stat-tile__label {
    display: block;
    margin-top: 4px;
    color: var(--in-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stat-tile__sub {
    display: block;
    margin-top: 6px;
    color: var(--in-text-faint);
    font-size: 0.78rem;
}

/* ----- A segmented toggle: one of two or three, in a panel's header ----- */
.segmented {
    display: inline-flex;
    flex: none;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--in-border-input);
    border-radius: 7px;
    background-color: var(--in-sheet);
}

.segmented__btn {
    min-height: 26px;
    padding: 3px 11px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--in-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.segmented__btn:hover {
    color: var(--in-text);
}

/* As links, for a filter that loads the page (the Help Center's tickets) */
a.segmented__btn {
    display: inline-flex;
    align-items: center;
}

a.segmented__btn:hover,
a.segmented__btn:focus {
    text-decoration: none;
}

.segmented__btn:focus {
    outline: none;
}

.segmented__btn:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 1px;
}

.segmented__btn.active {
    background-color: var(--in-surface);
    color: var(--in-accent);
    box-shadow: 0 0 0 1px var(--in-border-soft), 0 1px 2px var(--in-shadow-soft);
}

/* Large, as a page's own toggle rather than a panel's */
.segmented--lg {
    padding: 3px;
    border-radius: 9px;
}

.segmented--lg .segmented__btn {
    min-height: 34px;
    padding: 6px 18px;
    border-radius: 6px;
    font-size: 0.88rem;
}

/* ----- A switch: a setting turned on or off at once, labelled beside it
   (Installer Details' record), brand green while on ----- */
.portal-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--in-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.portal-switch__track {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background-color: var(--in-border-hover);
    transition: background-color 0.2s ease;
}

.portal-switch__track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 1px 2px var(--in-shadow);
    transition: transform 0.2s ease;
}

.portal-switch[aria-checked="true"] {
    color: var(--in-accent);
}

.portal-switch[aria-checked="true"] .portal-switch__track {
    background-color: var(--in-button);
}

.portal-switch[aria-checked="true"] .portal-switch__track::before {
    transform: translateX(14px);
}

.portal-switch:hover .portal-switch__track {
    box-shadow: 0 0 0 3px var(--in-focus);
}

.portal-switch:focus {
    outline: none;
}

.portal-switch:focus-visible .portal-switch__track {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

/* ----- A pager: which rows are showing, rows per page, and the pages, under
   a table (Installer Details' registrations) ----- */
.pager[hidden] {
    display: none;
}

.pager__range {
    color: var(--in-text-muted);
    font-variant-numeric: tabular-nums;
}

.pager__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.pager__size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--in-text-muted);
    white-space: nowrap;
}

.pager__size-select {
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--in-border-input);
    border-radius: 6px;
    background-color: var(--in-surface);
    color: var(--in-text);
    font-size: 0.82rem;
    cursor: pointer;
}

.pager__size-select:focus {
    border-color: var(--in-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--in-focus);
}

.pager__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.pager__btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--in-border-input);
    border-radius: 6px;
    background-color: var(--in-surface);
    color: var(--in-text-2);
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pager__btn:not(:disabled):hover {
    border-color: var(--in-border-hover);
    background-color: var(--in-hover);
    color: var(--in-text);
}

.pager__btn[aria-current="page"] {
    border-color: var(--in-button);
    background-color: var(--in-button);
    color: #fff;
}

.pager__btn[aria-current="page"]:hover {
    border-color: var(--in-button-hover);
    background-color: var(--in-button-hover);
    color: #fff;
}

.pager__btn:disabled,
.pager__btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}

/* As links, for a table paged by the server (Sent Emails) */
a.pager__btn,
span.pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

a.pager__btn:hover,
a.pager__btn:focus {
    text-decoration: none;
}

.pager__btn[aria-disabled="true"]:hover {
    border-color: var(--in-border-input);
    background-color: var(--in-surface);
    color: var(--in-text-2);
}

.pager__btn:focus {
    outline: none;
}

.pager__btn:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

.pager__gap {
    padding: 0 2px;
    color: var(--in-text-faint);
}

/* ----- A folder tree: a zip bundle's folders and files, drawn with
   box-drawing characters (the API guide, Import Facilities) ----- */
.file-tree {
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px dashed var(--in-border);
    border-radius: 8px;
    background-color: var(--in-sheet);
    color: var(--in-text);
    font-family: SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.7;
    white-space: pre;
}

/* ----- Modals on these pages ----- */
.portal-modal .modal-content {
    border-color: var(--in-border);
    border-radius: 10px;
    background-color: var(--in-surface);
    color: var(--in-text);
}

.portal-modal .modal-header,
.portal-modal .modal-footer {
    border-color: var(--in-border-soft);
}

.portal-modal .modal-title {
    color: var(--in-accent);
    font-weight: 600;
}

.portal-modal .modal-footer {
    gap: 8px;
}

.portal-modal .modal-footer > * {
    margin: 0;
}

.portal-modal__start {
    margin-right: auto !important;
}

.portal-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* Phones: the header's buttons take the width, and each table row stacks
   into labelled lines, like the record's fields */
@media (max-width: 767.98px) {
    .portal-page {
        --page-gutter: 14px;
    }

    .page-hero__title {
        font-size: 1.7rem;
    }

    .page-hero__actions {
        width: 100%;
    }

    .page-hero__actions .portal-btn {
        flex: 1 1 auto;
    }

    /* The page's toggle takes the width too, its choices in equal parts */
    .page-hero__toggle {
        display: flex;
    }

    .page-hero__toggle .segmented__btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .panel__tools--search {
        flex-basis: 100%;
        max-width: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table thead {
        display: none;
    }

    .data-table tr {
        position: relative;
        padding: 10px 14px 12px;
        border-top: 1px solid var(--in-border-soft);
    }

    .data-table tbody tr:first-child {
        border-top: 0;
    }

    .data-table tr[hidden],
    .data-table tr.filtered-out {
        display: none;
    }

    .data-table td,
    .data-table th:first-child,
    .data-table td:first-child,
    .data-table th:last-child,
    .data-table td:last-child {
        position: relative;
        min-height: 1.6em;
        padding: 3px 0 3px calc(34% + 10px);
        border: 0;
        text-align: left;
    }

    .data-table td::before {
        content: attr(data-label);
        position: absolute;
        top: 4px;
        left: 0;
        width: 34%;
        color: var(--in-text-faint);
        font-size: 0.75rem;
        line-height: 1.55;
    }

    .data-table .data-table__center {
        text-align: left;
    }

    /* The name leads the row; the buttons close it */
    .data-table td.data-table__lead,
    .data-table td.data-table__actions {
        padding-left: 0;
    }

    .data-table td.data-table__lead {
        padding-right: 36px;
        padding-bottom: 6px;
        font-size: 0.92rem;
    }

    .data-table td.data-table__actions {
        padding-top: 8px;
        white-space: normal;
    }

    .data-table td.data-table__lead::before,
    .data-table td.data-table__actions::before,
    .data-table td.checkbox-column::before {
        content: none;
    }

    .data-table__buttons {
        flex-wrap: wrap;
    }

    /* A company's facilities: there's no room to open the pill sideways,
       so the pill is the total's alone, and what it opens into slides down
       under it, a row growing from 0fr, on as many lines as it needs */
    button.facility-count,
    button.facility-count[aria-expanded="true"] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background-color: transparent;
    }

    button.facility-count .facility-count__total {
        padding: 2px 9px;
        border: 1px solid var(--in-border);
        border-radius: 14px;
    }

    button.facility-count:hover .facility-count__total,
    button.facility-count[aria-expanded="true"] .facility-count__total {
        border-color: var(--in-accent);
    }

    button.facility-count[aria-expanded="true"] .facility-count__total {
        background-color: var(--in-surface);
    }

    .facility-count__breakdown {
        grid-template-columns: 1fr;
        grid-template-rows: 0fr;
    }

    .facility-count[aria-expanded="true"] .facility-count__breakdown {
        grid-template-rows: 1fr;
    }

    .facility-count__breakdown-inner {
        flex-wrap: wrap;
        gap: 0 10px;
        min-height: 0;
    }

    .facility-count__breakdown-inner > * {
        margin-top: 7px;
    }

    .facility-count__breakdown-inner::before {
        content: none;
    }

    /* A row's checkbox, in its top corner */
    .data-table td.checkbox-column {
        position: absolute;
        top: 12px;
        right: 14px;
        width: auto;
        min-height: 0;
        padding: 0;
    }
}