* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--zlowi-font);
    color: var(--zlowi-navy);
}

/* App shell (see components/sidebar.js, components/header.js): a fixed
   left rail plus a main column (shared page header + routed #view),
   replacing the old single top nav bar. */
#app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

#sidebar {
    flex: none;
}

/* The fixed site footer (shared/css/footer.css) starts beside the rail,
   not under it, so the rail's plan meter stays visible. */
body:has(.rail) .site-footer {
    left: 236px;
}

body:has(.rail-collapsed) .site-footer {
    left: 88px;
}

body.onboarding-mode .site-footer {
    left: 0;
}

/* Onboarding (views/onboarding.js) is full-page, without the rail or the
   page header -- toggled by app.js on navigation. */
body.onboarding-mode #sidebar,
body.onboarding-mode #page-header {
    display: none;
}

#main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Matches the mockup's own content-area fill exactly (see sketch/Zlowi
       platform UI mockups/Zlowi Platform.dc.html's .z2 wrapper) -- a soft
       neutral tint behind the white cards (.home-card, .z2-tile, etc.),
       which .page-header paints over with its own solid white. */
    background: #f7f8fa;
    /* A full-width bar inside #view (e.g. the Record detail header, see
       .record-page-header) paints past #view's own edges; clip that to this
       column so it never reaches over the rail. clip, not hidden: it makes
       no scroll container, so sticky positioning inside still follows the
       page. */
    overflow-x: clip;
}

#view {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
    /* Content reflows by the room it actually has (@container view, see
       the end of this file), not the screen size -- the rail, a tablet in
       portrait and a half-width window all narrow it the same way. Fixed
       elements (tooltips, dialogs) mount on body, so this containing block
       doesn't trap them. */
    container: view / inline-size;
}

/* Rail (see components/sidebar.js, sketch/UI_Revisions_Oct5/Zlowi
   Rail.dc.html): dark, collapsible -- Dashboard/Records/Inbox/My Tasks, with
   the plan meter and connection status pinned to the bottom. */
.rail {
    /* Sticky, not just tall: #app-shell isn't a scroll container of its own,
       so a page taller than the viewport (e.g. a long Record detail form)
       scrolls the whole document -- without this the rail would scroll away
       with it instead of staying put like the rest of the app chrome. */
    position: sticky;
    top: 0;
    height: 100vh;
    width: 236px;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    padding: 20px 0 16px;
    box-sizing: border-box;
    transition: width 0.18s ease;
}

.rail-collapsed {
    width: 88px;
}

.rail-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px 32px 24px;
}

.rail-collapsed .rail-head {
    gap: 6px;
    padding: 0 12px 28px;
    justify-content: center;
}

.rail-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    min-width: 0;
}

.rail-logo-full {
    height: 26px;
    width: auto;
    display: block;
}

.rail-logo-mark {
    height: 26px;
    width: 26px;
    object-fit: contain;
    display: none;
}

.rail-collapsed .rail-logo-full {
    display: none;
}

.rail-collapsed .rail-logo-mark {
    display: block;
}

.rail-toggle {
    width: 26px;
    height: 26px;
    flex: none;
    margin-left: auto;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #8fa0b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.rail-collapsed .rail-toggle {
    margin-left: 0;
}

.rail-toggle:hover {
    color: #fff;
}

.rail-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 12px;
}

.rail-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: #cbd5e1;
    text-decoration: none;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.rail-collapsed .rail-item {
    justify-content: center;
    padding: 11px 0;
}

.rail-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.rail-item[aria-current="page"] {
    background: #1a73ff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 115, 255, 0.32);
}

.rail-collapsed .rail-item-label {
    display: none;
}

.rail-foot {
    margin-top: auto;
    padding: 0 12px;
}

.rail-plan {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    padding: 14px;
}

.rail-plan-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
}

.rail-plan-bar {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    margin: 9px 0 8px;
    overflow: hidden;
}

.rail-plan-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #1a73ff;
}

.rail-plan-bar--limit span {
    background: #f59e0b;
}

.rail-plan-note {
    font-size: 11.5px;
    color: rgba(203, 213, 225, 0.72);
    line-height: 1.45;
}

.rail-plan-upgrade {
    display: block;
    margin-top: 11px;
    padding: 9px 0;
    border-radius: 9px;
    background: #1a73ff;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.rail-plan-upgrade:hover {
    background: #0f62e6;
}

.rail-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 4px 0;
    font-size: 11.5px;
    color: rgba(203, 213, 225, 0.72);
}

.rail-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex: none;
}

.rail-status-dot--off {
    background: #64748b;
}

.rail-foot-collapsed {
    display: flex;
    justify-content: center;
    padding-bottom: 4px;
}

/* Shared page header (see components/header.js): single row above #view --
   title (or Home's date + greeting), an optional search box and primary
   action, then Help and the profile menu -- mirrors sketch/Zlowi platform UI
   mockups/Zlowi Platform.dc.html turns 5a/2a. Replaces the old .topbar strip
   plus each view's own in-page header block (.home-header, the old
   .view-header + #new-extraction pairing in views/extractions.js). */
.page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    border-bottom: 1px solid #eef1f5;
    background: #fff;
}

.page-header-title {
    flex: 1;
    min-width: 0;
}

.page-header--crumbs {
    padding-top: 12px;
    padding-bottom: 12px;
}

.page-header-date {
    font-size: 12.5px;
    color: #8894a7;
}

.page-header-title h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.page-header-date + h1 {
    margin-top: 3px;
}

.page-header-search {
    position: relative;
    flex: none;
    width: 230px;
}

.page-header-search svg {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #8894a7;
    pointer-events: none;
}

.page-header-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--zlowi-navy);
    outline: none;
}

.page-header-search input:focus {
    border-color: var(--zlowi-blue);
    box-shadow: 0 0 0 3px rgba(33, 120, 201, 0.14);
}

/* #page-header-action is the header's primary action button (currently
   always "Upload Record" -- see components/header.js's primaryAction,
   which gives it class="button accent" for the mockup's blue -- see
   .button.accent above). Its shape (size/radius/shadow) is still scoped to
   this one id, not shared with .accent's other users (Start reviewing, a
   selected plan card), which don't want the same padding/shadow. */
#page-header-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(26, 115, 255, 0.3);
}

/* Locked state (all free Records used -- see sketch/Zlowi platform UI
   mockups/Zlowi Platform.dc.html turn 5c): a dashed, muted button with the
   lock icon (see components/header.js's primaryAction.disabled branch) --
   aria-disabled, not the native disabled attribute, since this button stays
   clickable to toggle .page-header-action-popover below. */
#page-header-action[aria-disabled] {
    background: #f1f5f9;
    border-color: #c3cddb;
    border-style: dashed;
    color: #64748b;
    box-shadow: none;
    cursor: pointer;
}

/* .page-header-action-wrap is the positioning context for the popover below
   (see the mockup's own <div style="position:relative"> wrapper, turn 5c) --
   #page-header-action itself stays position:static. */
.page-header-action-wrap {
    position: relative;
    flex: none;
}

/* Matches the mockup's lockPop popover exactly (turn 5c) -- see
   components/header.js's lockPopoverHtml. */
.page-header-action-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 306px;
    z-index: 20;
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
}

.page-header-action-popover[hidden] {
    display: none;
}

.page-header-action-popover-arrow {
    position: absolute;
    top: -6px;
    right: 34px;
    width: 11px;
    height: 11px;
    background: #fff;
    border-left: 1px solid #e6ebf2;
    border-top: 1px solid #e6ebf2;
    transform: rotate(45deg);
}

.page-header-action-popover-inner {
    position: relative;
    padding: 15px 17px;
}

.page-header-action-popover-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.page-header-action-popover-icon {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    background: #eef5ff;
    color: #1a73ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-header-action-popover-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--zlowi-navy);
}

.page-header-action-popover-sub {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
    margin-top: 3px;
}

.page-header-action-popover-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
}

.page-header-action-popover-actions .button {
    flex: 1;
    justify-content: center;
    padding: 8px 0;
    white-space: nowrap;
    text-decoration: none;
}

.page-header-action-popover-actions .button.primary {
    background: #1a73ff;
    border-color: #1a73ff;
}

.page-header-action-popover-actions .button.primary:hover {
    background: #0d5fe0;
    border-color: #0d5fe0;
}

.page-header-action-popover-actions #page-header-action-popover-dismiss {
    flex: none;
    padding: 8px 12px;
}

.page-header-profile {
    position: relative;
    flex: none;
}

/* Record detail's top bar (mockup 9a): back arrow and breadcrumb in place
   of a title, the Record pager before Help. */
.page-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.page-crumbs-trail {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
}

.page-crumbs-trail a {
    color: #64748b;
    text-decoration: none;
    flex: none;
}

.page-crumbs-trail a:hover {
    color: #1a73ff;
}

.page-crumbs-sep {
    color: #c3cddb;
}

.page-crumbs-current {
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-header-divider {
    width: 1px;
    height: 22px;
    background: #eef1f5;
    flex: none;
}

.page-header-subtitle {
    font-size: 12.5px;
    color: #8894a7;
    margin-top: 3px;
}

/* Profile menu (mockup 12a): who's signed in, then My profile, Account
   settings (Admins only), Help, and Sign out on its own row. */
.profile-menu[hidden] {
    display: none;
}

.profile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 264px;
    z-index: 40;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.16),
        0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.profile-menu-who {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid #f2f5f8;
}

.profile-menu-who-text {
    min-width: 0;
}

.profile-menu-name {
    font-size: 13.5px;
    font-weight: 700;
}

.profile-menu-email {
    font-size: 12px;
    color: #8894a7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-avatar--lg {
    width: 36px;
    height: 36px;
    font-size: 12.5px;
}

.profile-menu-group {
    padding: 6px 0;
}

.profile-menu-group--split {
    border-top: 1px solid #f2f5f8;
}

.profile-menu-group a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 6px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13.5px;
    color: #0f172a;
}

.profile-menu-group a svg {
    flex: none;
    color: #64748b;
}

.profile-menu-group a span:first-of-type {
    flex: 1;
}

.profile-menu-group a:hover {
    background: #f1f5f9;
}

.profile-menu-meta {
    font-size: 11px;
    color: #8894a7;
}

.profile-toggle[aria-expanded="true"] {
    border-color: #1a73ff;
    box-shadow: 0 0 0 3px rgba(26, 115, 255, 0.14);
}

.profile-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}

.profile-toggle:hover {
    border-color: #c3cddb;
}

.profile-toggle svg {
    margin-right: 2px;
    color: #8894a7;
    flex: none;
}

.profile-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: #0f172a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
}

/* Matches the mockup's z2-icobtn exactly (see sketch/Zlowi platform UI
   mockups/Zlowi Platform.dc.html) -- same border/size/radius as
   .profile-toggle right next to it in the header, and reused by the Record
   detail page's own back arrow (see views/record-detail.js). */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
}

.icon-button:hover {
    color: var(--zlowi-blue);
    border-color: #c3cddb;
}

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

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    padding: 4px;
    z-index: 10;
}

.dropdown-menu a {
    padding: 8px 12px;
    color: var(--zlowi-navy);
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
}

.dropdown-menu a:hover {
    background: #f2f2f2;
}

/* .action-menu anchors a .dropdown-menu to its trigger (see
   components/action-menu.js) -- Record detail's "⋯" menu and its Approve
   split button. Items are buttons rather than links; groups are the
   per-PO-card slots, divided from Reject file by a rule. */
.action-menu {
    position: relative;
    flex: none;
}

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

.action-menu .dropdown-menu {
    min-width: 220px;
    z-index: 30;
}

.dropdown-menu-group {
    display: flex;
    flex-direction: column;
}

.dropdown-menu-group:empty,
.dropdown-menu-divider[hidden] {
    display: none;
}

.dropdown-menu-divider {
    height: 1px;
    margin: 4px 0;
    background: #eef1f5;
}

.dropdown-item {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--zlowi-navy);
    font: inherit;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.dropdown-item:hover:not(:disabled) {
    background: #f2f2f2;
}

.dropdown-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.dropdown-item--danger {
    color: #b00020;
}

.dropdown-item--danger:hover:not(:disabled) {
    background: #fef2f2;
}

/* A button with its alternatives behind a caret: the two halves read as
   one control. */
.split-button {
    display: inline-flex;
}

/* The two halves read as one button: square inner corners, no border
   between them (the main half drops its right border, the toggle its
   left), just a faint inset hairline. Selectors are .split-button-scoped so
   they outrank .button/.button.success's own radius and border-color. */
.split-button > .button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}

.split-button > .split-button-toggle {
    display: inline-flex;
    align-items: center;
    padding: 8px 9px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22);
}

.view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.button {
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #fff;
    /* Explicit: left to the browser, a button's text takes its own
       default -- which in Safari (iOS, dark mode) can be light enough to
       vanish against this white background. Each variant below sets its
       own. */
    color: var(--zlowi-navy);
    cursor: pointer;
}

.button.primary {
    background: var(--zlowi-navy);
    color: #fff;
    border-color: var(--zlowi-navy);
}

/* .accent is a second "primary" look, the mockup's own blue (see sketch/
   Zlowi platform UI mockups/Zlowi Platform.dc.html's z2-primary) rather
   than this app's default navy -- used wherever a button needs to match
   that specific blue: the header's Upload Record (#page-header-action),
   the review banner's Start reviewing, a selected plan card's Select
   button. Everywhere else, .primary's navy stays the default. */
.button.accent {
    background: #1a73ff;
    color: #fff;
    border-color: #1a73ff;
}

.button.accent:hover:not(:disabled) {
    background: #0d5fe0;
    border-color: #0d5fe0;
}

/* .tinted takes its color from --button-color (set inline from data, e.g.
   Record detail's Post button uses the Posted status's badge_color), so
   a data-driven color doesn't need a class per value. Hover darkens it. */
.button.tinted {
    background: var(--button-color);
    border-color: var(--button-color);
    color: #fff;
}

.button.tinted:hover:not(:disabled) {
    background: color-mix(in srgb, var(--button-color) 85%, #000);
    border-color: color-mix(in srgb, var(--button-color) 85%, #000);
}

/* Color-coded action variants (see views/record-detail.js's Save/Approve/
   Push to ERP buttons) -- plain .button stays the neutral default above. */

.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* The shared instant tooltip (tooltip.js) -- dark by default, the issue
   banner's red for data-tooltip-tone="danger". Its arrow points at the
   element's center (--tooltip-arrow-x, set per show). */
@keyframes tooltip-in {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.tooltip {
    --tooltip-bg: #0f172a;
    --tooltip-border: #0f172a;
    position: fixed;
    z-index: 1000;
    max-width: 300px;
    padding: 7px 10px;
    border: 1px solid var(--tooltip-border);
    border-radius: 8px;
    background: var(--tooltip-bg);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
    pointer-events: none;
    animation: tooltip-in 0.12s ease-out;
}

.tooltip[data-tone="danger"] {
    --tooltip-bg: #fffafa;
    --tooltip-border: #f6d6d6;
    color: #7f1d1d;
}

.tooltip::before {
    content: "";
    position: absolute;
    left: calc(var(--tooltip-arrow-x, 50%) - 5px);
    width: 8px;
    height: 8px;
    background: var(--tooltip-bg);
    border: 1px solid var(--tooltip-border);
    transform: rotate(45deg);
}

.tooltip[data-placement="below"]::before {
    top: -5px;
    border-right: none;
    border-bottom: none;
}

.tooltip[data-placement="above"]::before {
    bottom: -5px;
    border-left: none;
    border-top: none;
}

/* A disabled control inside a [data-tooltip] wrapper passes hovers through
   to it (see tooltip.js) -- it isn't clickable anyway. */
[data-tooltip] :disabled {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .tooltip {
        animation: none;
    }
}

/* .button--busy is a button disabled because its own action is running
   (busy-button.js's setButtonBusy) -- kept at full strength so its spinner
   reads as progress, not as unavailable. */
.button.button--busy:disabled {
    opacity: 1;
    cursor: progress;
}

.button.secondary {
    background: #fff;
    color: var(--zlowi-blue);
    border-color: var(--zlowi-blue);
}

.button.secondary:hover:not(:disabled) {
    background: #eef5ff;
}

.button.success {
    background: #17803d;
    color: #fff;
    border-color: #17803d;
}

.button.success:hover:not(:disabled) {
    background: #146633;
}

.button.danger {
    background: #fff;
    color: #b00020;
    border-color: #f0a3a3;
}

.button.danger:hover:not(:disabled) {
    background: #fef2f2;
    border-color: #dc2626;
}

.link-button {
    background: none;
    border: none;
    color: var(--zlowi-blue);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    margin-right: 8px;
}

.link-button:disabled {
    color: #b7bfca;
    cursor: not-allowed;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.data-table th {
    color: #555;
    font-weight: 600;
    background: #fafafa;
}

.empty-state {
    color: #888;
    text-align: center;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: #fafafa;
}

/* Every modal in the app shares the mockup's modal look (sketch/Zlowi
   platform UI mockups/Zlowi Platform.dc.html turn 5b): no border, a large
   radius and soft shadow over a dimmed navy backdrop, easing in. */
.add-connector-dialog,
.account-dialog,
.extraction-dialog,
.app-dialog {
    max-width: calc(100vw - 32px);
    border: none;
    border-radius: 18px;
    padding: 24px 26px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.add-connector-dialog,
.account-dialog {
    width: 380px;
}

.add-connector-dialog::backdrop,
.account-dialog::backdrop,
.extraction-dialog::backdrop,
.app-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
}

@keyframes dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

.add-connector-dialog[open],
.account-dialog[open],
.extraction-dialog[open],
.app-dialog[open] {
    animation: dialog-in 0.16s ease-out;
}

.add-connector-dialog h2,
.account-dialog h2,
.extraction-dialog h2,
.app-dialog h2 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* The message/confirm dialog (web/js/dialog.js's showMessage/
   openConfirmDialog -- the app's alert() and confirm()): a tinted icon
   beside the title and text, then its actions. */
.app-dialog {
    width: 420px;
}

.app-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.app-dialog-icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef5ff;
    color: #1a73ff;
}

.app-dialog--error .app-dialog-icon {
    background: #fef2f2;
    color: #dc2626;
}

.app-dialog--confirm .app-dialog-icon {
    background: #fffaf2;
    color: #b45309;
}

.app-dialog-heading {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.app-dialog-body {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #475569;
    overflow-wrap: break-word;
}

.app-dialog-form {
    margin-top: 16px;
}

.app-dialog .dialog-actions {
    margin-top: 20px;
}

.app-dialog-form .dialog-actions {
    margin-top: 4px;
}

.account-dialog h3 {
    margin: 0 0 4px;
    font-size: 14px;
}

.account-dialog hr,
.add-connector-dialog hr {
    border: none;
    border-top: 1px solid #eef1f5;
    margin: 18px 0;
}

.row-inactive {
    color: #999;
}

.copy-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy-field input {
    flex: 1;
    font-size: 13px;
    padding: 8px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    color: #475569;
    background: #f8fafc;
}

.dialog-subtitle {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.connector-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.connector-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: #0f172a;
}

.connector-choice:hover {
    border-color: #1a73ff;
    background: #f7fbff;
}

.connector-choice-name {
    display: block;
    font-weight: 600;
}

.connector-choice-desc {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #8894a7;
}

/* A connector type's logo (connectors.logo_url) or initials badge -- see
   add-connector-dialog.js's connectorLogoHtml. */
.connector-logo {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    background: #eef5ff;
    color: #1454c0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
}

.connector-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* A real logo sits on white, not the initials badge's tint, in a wide
   tile -- the ERP logos are wordmarks (about 4:1). */
.connector-logo:has(img) {
    width: 108px;
    background: #fff;
    border: 1px solid #eef1f5;
    padding: 6px 8px;
}

.connector-logo--muted {
    background: #f1f5f9;
    color: #64748b;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #334155;
}

/* A field's own label text (its leading <span>). */
.form-field > span:first-child {
    font-weight: 600;
}

/* Dialog form controls -- the same look as the review grid's inputs (see
   .mapping-select), blue focus ring included. */
.form-field input {
    font-family: inherit;
    font-size: 14px;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    color: #0f172a;
    outline: none;
}

.form-field input:focus {
    border-color: #1a73ff;
    box-shadow: 0 0 0 3px rgba(26, 115, 255, 0.14);
}

.form-field input:disabled {
    background: #f8fafc;
    color: #94a3b8;
}

/* Dialog selects: the shared select look (shared/css/brand.css), sized
   like the inputs above -- a bit taller, so the label clears the chevron. */
.form-field select {
    width: 100%;
    font-size: 14px;
    padding: 10px 32px 10px 12px;
}

/* Upload dialog's Type/Connector/Transaction Type pickers (see
   new-extraction-dialog.js) -- side by side instead of stacked, since most
   accounts only ever have one or two of these actually visible (the rest
   auto-hide when there's just a single option -- see pickerHtml). */
.upload-picker-row {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
}

.upload-picker-row > * {
    flex: 1;
    min-width: 0;
}

.upload-picker-row .form-field {
    margin-bottom: 8px;
}

.form-field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #334155;
}

.form-field-checkbox input {
    width: auto;
}

.form-error {
    color: #b00020;
    font-size: 13px;
    margin: 0 0 12px;
}

.form-hint {
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0 0 12px;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Extraction pipeline (see sketch/app/apphome2.wire, apphome3.wire).
   .extraction-dialog itself is just the "New Extraction" file-picker dialog
   now; the progress checklist / mapping review / summary classes further
   down (.checklist, .review-object, .mapping-row, ...) are shared with the
   Record detail page (views/record-detail.js), which used to be this same
   dialog before it became a full page (see .record-page below). */

.extraction-dialog {
    width: 480px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}

/* Wider than the base .extraction-dialog -- the dropzone and (on a first
   upload) the "How it works" 3-tile row both want more breathing room than
   the plain-form dialog ever needed. See new-extraction-dialog.js. */
.extraction-dialog--upload {
    width: 560px;
}

.upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 20px;
    margin-bottom: 14px;
    border: 1.5px dashed #c3d4ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7fbff, #fff);
    cursor: pointer;
    text-align: center;
}

.upload-dropzone:hover,
.upload-dropzone--dragover {
    border-color: var(--zlowi-blue);
    background: #f2f8ff;
}

/* A chosen file (new-extraction-dialog.js's showFile) swaps the prompt for
   the file's card, after the 13c mockup: a solid blue box, File selected,
   the file itself with a remove button, then Convert right there. The
   whole box still opens the picker, hence "Choose a different file". */
.upload-dropzone--filled {
    align-items: stretch;
    padding: 18px;
    border: 2px solid var(--zlowi-blue);
    background: #f2f7ff;
    box-shadow: 0 0 0 4px rgba(26, 115, 255, 0.08);
    text-align: left;
}

.upload-dropzone-empty {
    display: contents;
}

.upload-dropzone--filled .upload-dropzone-empty {
    display: none;
}

.upload-selected:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.upload-selected-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 15px;
    color: var(--zlowi-navy);
}

.upload-selected-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.upload-selected-ready {
    font-size: 13px;
    color: #64748b;
}

.upload-file {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #fff;
}

.upload-file-icon {
    width: 44px;
    height: 52px;
    flex: none;
    border: 1px solid #c9daf5;
    border-radius: 8px;
    background: #eef5ff;
    color: var(--zlowi-blue);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.upload-file-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.upload-file-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--zlowi-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-file-meta {
    font-size: 13px;
    color: #64748b;
}

.upload-file-remove {
    width: 36px;
    height: 36px;
    flex: none;
    border: 1px solid #dbe4f0;
    border-radius: 9px;
    background: #fff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.upload-file-remove:hover {
    background: #f8fafc;
    color: var(--zlowi-navy);
}

.upload-selected-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.upload-selected-actions .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-weight: 600;
}

.upload-selected-actions .upload-dropzone-hint {
    flex: 1 1 140px;
}

.upload-dropzone-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #eef5ff;
    color: var(--zlowi-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* While uploading (new-extraction-dialog.js's setUploading) the dropzone
   stops taking clicks/drops and shows a bar of the bytes sent; at 100% the
   bar shimmers while the server stores and scans the file. */
.upload-dropzone--uploading {
    pointer-events: none;
}

.upload-dropzone--uploading .upload-file-remove,
.upload-dropzone--uploading .upload-selected-actions > :not(#submit) {
    display: none;
}

.upload-progress {
    width: 100%;
    max-width: 320px;
    height: 6px;
    border-radius: 999px;
    background: #e3ecf9;
    overflow: hidden;
}

.upload-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #1a73ff;
    transition: width 0.2s ease-out;
}

.upload-progress--done .upload-progress-bar {
    background: linear-gradient(90deg, #1a73ff 0%, #6aa6ff 50%, #1a73ff 100%);
    background-size: 200% 100%;
    animation: progress-shimmer 1.6s linear infinite;
}

.upload-dropzone-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--zlowi-navy);
}

.upload-dropzone-hint {
    font-size: 12px;
    color: #8894a7;
}

.upload-howitworks {
    margin: 4px 0 16px;
}

.upload-howitworks-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8894a7;
    margin-bottom: 10px;
}

.upload-howitworks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.upload-tile {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background: #fafbfc;
    border: 1px solid #eef1f5;
    font-size: 12px;
}

.upload-tile-num {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #eef5ff;
    color: #1454c0;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.upload-tile strong {
    display: block;
    font-size: 12.5px;
    margin-bottom: 3px;
}

.upload-tile p {
    margin: 0;
    color: #667;
    line-height: 1.4;
}

/* Shape only -- color is always inline now (see views/extractions.js's
   statusBadge and views/record-detail.js's statusPill), computed from the
   server's status_color (statuses.badge_color, migration 0036) rather than
   a modifier class hand-picked per status_id/is_critical. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
}

/* The round marker Home's setup checklist uses (views/home.js). */
.checklist-marker {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Record detail's state cards (record-detail.js's stateCardHtml): what the
   page shows while a Record is processing, or once it failed, was
   cancelled, approved or sent -- the review cards' white card with a
   tinted icon per tone. */
.state-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 14px;
}

.state-card-icon {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef5ff;
    color: #1a73ff;
}

.state-card--error .state-card-icon {
    background: #fef2f2;
    color: #dc2626;
}

.state-card--muted .state-card-icon {
    background: #f1f5f9;
    color: #64748b;
}

.state-card--ok .state-card-icon {
    background: #effaf4;
    color: #059669;
}

.state-card--ready .state-card-icon {
    background: #f3efff;
    color: #7c3aed;
}

.state-card-text {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.state-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.state-card-body {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #64748b;
    overflow-wrap: break-word;
}

.state-card--error .state-card-body {
    color: #7f1d1d;
}

/* .spinner is the app's one loading ring -- inside a button it takes the
   button's own text color, so it works on navy, green and white alike. */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border-radius: 50%;
    border: 2px solid #c7dcff;
    border-top-color: #1a73ff;
    animation: spin 0.8s linear infinite;
    box-sizing: border-box;
}

.button .spinner {
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
}

/* The progress card (record-detail.js's renderProgress): the file's type
   as its icon with a scan-line sweeping down it, an overall bar, then a
   connected stepper -- done (green check), current (pulsing dot), still to
   come (dashed ring). updateProgressInPlace only swaps classes and widths,
   so the transitions below actually get to run between polls. */
.progress-file-icon {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: inherit;
}

.progress-file-icon svg {
    margin-top: -4px;
}

.progress-file-ext {
    position: absolute;
    bottom: 3px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

@keyframes progress-scan {
    from {
        transform: translateY(-4px);
    }
    to {
        transform: translateY(38px);
    }
}

.progress-file-icon::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
    height: 2px;
    border-radius: 2px;
    background: #1a73ff;
    box-shadow: 0 0 8px 1px rgba(26, 115, 255, 0.55);
    animation: progress-scan 1.6s ease-in-out infinite alternate;
}

@keyframes progress-shimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

.progress-bar {
    height: 6px;
    margin-top: 14px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.progress-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #1a73ff 0%, #6aa6ff 50%, #1a73ff 100%);
    background-size: 200% 100%;
    animation: progress-shimmer 2.4s linear infinite;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.progress-steps {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.progress-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    line-height: 20px;
    color: #94a3b8;
    transition: color 0.3s;
}

.progress-step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@keyframes progress-detail-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* The current stage's description (statuses.description, migration 0039)
   -- only shown under the step that's running. */
.progress-step-detail {
    display: none;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 400;
    color: #64748b;
}

.progress-step--current .progress-step-detail:not(:empty) {
    display: block;
    animation: progress-detail-in 0.3s ease-out;
}

/* The connector from each marker down to the next one: from under this
   marker to the next step's top (the list's 12px gap, minus 2px so it
   doesn't touch the next marker), however tall this step's text is --
   green once the step above it is done. */
.progress-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 22px;
    bottom: -10px;
    width: 2px;
    border-radius: 1px;
    background: #e2e8f0;
    transition: background 0.4s;
}

.progress-step--done:not(:last-child)::before {
    background: #34d399;
}

.progress-step--done {
    color: #334155;
}

.progress-step--current {
    color: #0f172a;
    font-weight: 600;
}

.progress-step-marker {
    position: relative;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background 0.3s, color 0.3s;
}

.progress-step--pending .progress-step-marker {
    border: 1.5px dashed #b6c0cd;
}

@keyframes progress-pop {
    from {
        transform: scale(0.4);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.progress-step--done .progress-step-marker {
    background: #effaf4;
    color: #059669;
}

.progress-step--done .progress-step-marker svg {
    width: 12px;
    height: 12px;
    animation: progress-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes progress-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(26, 115, 255, 0.45);
    }
    100% {
        box-shadow: 0 0 0 9px rgba(26, 115, 255, 0);
    }
}

.progress-step--current .progress-step-marker {
    background: #eef5ff;
}

.progress-step--current .progress-step-marker::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1a73ff;
    animation: progress-pulse 1.4s ease-out infinite;
}

/* A failed stage (applyProgress's failed state): a red ✕ on the step that
   failed, and the card's scan-line and shimmer stop -- nothing's running. */
.progress-step--failed {
    color: #b91c1c;
    font-weight: 600;
}

.progress-step--failed .progress-step-marker {
    background: #fef2f2;
    color: #dc2626;
}

.progress-step--failed .progress-step-marker svg {
    animation: progress-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.state-card--error .progress-file-icon::after {
    display: none;
}

.state-card--error .progress-bar span {
    background: #f87171;
    animation: none;
}

.progress-card[data-progress="finished"] .progress-bar span {
    background: #34d399;
    animation: none;
}

.progress-slow {
    margin: 14px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.5;
}

.progress-slow a {
    color: inherit;
    font-weight: 600;
}

/* The review cards fading in once the progress card has finished (see
   record-detail.js's load, PROGRESS_FINISH_MS). */
@keyframes detail-body-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.detail-body--enter {
    animation: detail-body-enter 0.35s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .spinner,
    .progress-step-detail,
    .progress-step--failed .progress-step-marker svg,
    .detail-body--enter,
    .progress-file-icon::after,
    .progress-bar span,
    .progress-step--done .progress-step-marker svg,
    .progress-step--current .progress-step-marker::after {
        animation: none;
    }

    .progress-bar span,
    .progress-step,
    .progress-step:not(:last-child)::before,
    .progress-step-marker,
    .upload-progress-bar {
        transition: none;
    }
}

/* Record detail while a request is in flight (record-detail.js's
   setPageBusy): the inert parts dim a little, so it's visible that they're
   locked, not just unresponsive. */
.record-page--busy #detail-body,
.record-page--busy #record-more,
.record-page--busy .queue-nav,
.record-page--busy #record-banners {
    opacity: 0.6;
    transition: opacity 0.2s;
}

.record-page--busy {
    cursor: progress;
}

/* A PO's review card (see views/record-detail.js's renderObject) has no
   frame of its own: its toolbar and sections are separate white cards on
   the page's tinted background, as in the mockup (sketch/Zlowi platform UI
   mockups/Zlowi Platform.dc.html turn 3b). */
.review-object {
    margin-bottom: 24px;
}

/* .review-card is the card's own content (renderReviewCard/
   renderApprovedCard/renderCompletedCard's wrap); a failed PO's card
   (renderObject) holds its toolbar and error box directly. */
.review-object,
.review-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-card > .form-hint {
    margin: 0;
}

/* The strip atop each card (cardToolbarHtml): destination (connector
   activation + transaction type), a pill, and on a review card the
   collapse/expand-all toggle. */
.review-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 14px;
}

.review-toolbar-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

/* Collapse all / Expand all (see record-detail.js's wireSectionsToggle),
   pushed to the toolbar's right edge. */
.sections-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
}

.sections-toggle:hover {
    border-color: #c3cddb;
    color: #0f172a;
}

/* Review sections (Order details / Letterhead / Bill to / Ship to / Line
   items), each a native <details> so expand/collapse needs no JS. */
.review-section {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    overflow: hidden;
}

/* While a field picker or lookup search inside it is open, the section
   (and an expanded line item's field list, which clips the same way) lets
   it hang out past its bottom edge, over the panels below -- under the
   sticky record header (z-index 4), though, not over it. */
.review-section:has(.field-picker-pop, .lookup-search-results:not([hidden])) {
    overflow: visible;
    position: relative;
    z-index: 3;
}

.review-line-detail:has(.field-picker-pop, .lookup-search-results:not([hidden])) {
    overflow: visible;
}

.review-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.review-section-header::-webkit-details-marker {
    display: none;
}

/* Collapse chevron, pushed to the right edge. */
.review-section-header::after {
    content: "";
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 1.8px solid #8894a7;
    border-bottom: 1.8px solid #8894a7;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

/* Right-aligned summary in a section header, e.g. Line items' "3 lines ·
   total 1,443.50" -- it takes the push to the right edge from the chevron. */
.review-section-meta {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: #8894a7;
}

.review-section-meta:empty {
    display: none;
}

.review-section-header:has(.review-section-meta:not(:empty))::after {
    margin-left: 12px;
}

.review-section[open] > .review-section-header::after {
    transform: rotate(45deg);
}

.review-section[open] > .review-section-header {
    border-bottom: 1px solid #f2f5f8;
}

/* Field-mapping grid: status / file field / mapped to / file value /
   destination value. */
.mapping-header-row,
.mapping-row {
    display: grid;
    grid-template-columns: 26px 1.15fr 1.15fr 1.1fr 1.25fr;
    gap: 14px;
    align-items: center;
    padding: 12px 18px;
    font-size: 13px;
    border-bottom: 1px solid #f6f8fa;
}

.mapping-row:last-child {
    border-bottom: none;
}

/* Column headers -- here and for the line items' summary grid. */
.mapping-header-row,
.review-line-header {
    padding: 9px 18px;
    background: #fbfcfd;
    border-bottom: 1px solid #f2f5f8;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8894a7;
}

.mapping-label {
    min-width: 0;
    overflow-wrap: break-word;
    font-weight: 600;
    color: #0f172a;
}

.mapping-file-value {
    color: #64748b;
    min-width: 0;
    overflow-wrap: break-word;
}

.mapping-destination-value {
    position: relative;
    min-width: 0;
}

/* Inputs in the grid (and the lookup search's own, see
   components/lookup-search.js) -- the mockup's z2-inp/z2-sel. */
.mapping-select,
.mapping-value-input,
.lookup-search-input {
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background-color: #fff;
    color: #0f172a;
    outline: none;
}

.mapping-select:focus,
.mapping-value-input:focus,
.lookup-search-input:focus {
    border-color: #1a73ff;
    box-shadow: 0 0 0 3px rgba(26, 115, 255, 0.14);
}

/* Mapped To keeps the shared select look (shared/css/brand.css) -- its
   chevron needs the room the grid's padding above takes back. */
.mapping-select {
    padding-right: 32px;
    color: #334155;
}

.mapping-select:disabled,
.mapping-value-input:disabled {
    background-color: #f8fafc;
    color: #94a3b8;
    cursor: default;
}

/* A flagged row colors only the control that holds the problem (see
   paintRowStatus): Mapped To for a mapping issue (unmapped, or a required
   field left without one), the value box for a value issue (invalid,
   unresolved, or waiting to be confirmed) -- red for a blocker, amber for
   informational, like the mockup's bad/warn controls. */
.mapping-row--blocker.mapping-row--mapping-issue .mapping-select:not(:disabled),
.mapping-row--blocker.mapping-row--value-issue .mapping-destination-value input:not(:disabled) {
    border-color: #f0a3a3;
    background-color: #fffafa;
    color: #b91c1c;
}

.mapping-row--info.mapping-row--mapping-issue .mapping-select:not(:disabled),
.mapping-row--info.mapping-row--value-issue .mapping-destination-value input:not(:disabled) {
    border-color: #e8b667;
    background-color: #fffaf2;
    color: #7c4a06;
}

.mapping-row--blocker.mapping-row--mapping-issue .mapping-select:not(:disabled) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.mapping-row--info.mapping-row--mapping-issue .mapping-select:not(:disabled) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.mapping-row-removed {
    opacity: 0.5;
}

/* Briefly marks the row the issue banner just jumped to. */
@keyframes mapping-row-flash {
    from {
        box-shadow: inset 3px 0 0 #1a73ff;
        background-color: #eef5ff;
    }
    to {
        box-shadow: inset 3px 0 0 transparent;
    }
}

.mapping-row--flash {
    animation: mapping-row-flash 1.6s ease-out;
}

/* The Line items section is the mockup's table (turn 3b): one
   .review-line-item per PO line -- a summary row (Item with its status /
   Description with the flagged field's note / Extras columns / Qty / Unit
   price / Amount / expand chevron) over that line's field-mapping grid
   (.review-line-detail, hidden until expanded). grid-template-columns is
   set inline, since the Extras columns vary per PO. */
.review-line-header,
.review-line-summary {
    display: grid;
    gap: 14px;
    align-items: center;
}

.review-line-item {
    border-bottom: 1px solid #f6f8fa;
}

.review-line-item:last-child {
    border-bottom: none;
}

.review-line-summary {
    padding: 12px 18px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
}

.review-line-summary:hover {
    background: #fbfcfd;
}

.review-line-item-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #0f172a;
}

.review-line-description {
    min-width: 0;
    overflow-wrap: break-word;
}

.review-line-description .mapping-note {
    display: block;
}

.review-line-description .mapping-note:empty {
    display: none;
}

.review-line-num {
    text-align: right;
}

.review-line-amount {
    font-weight: 700;
    color: #0f172a;
}

/* Qty/Unit price typed in the row itself -- same input as the grid's,
   right-aligned, colored by its field's status like the grid's value box. */
.review-line-input {
    text-align: right;
    padding: 6px 9px;
}

.review-line-num--blocker .review-line-input {
    border-color: #f0a3a3;
    background-color: #fffafa;
    color: #b91c1c;
}

.review-line-num--info .review-line-input {
    border-color: #e8b667;
    background-color: #fffaf2;
    color: #7c4a06;
}

.review-line-expand {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #8894a7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.review-line-expand:hover {
    background: #eef1f5;
    color: #0f172a;
}

.review-line-expand svg {
    transition: transform 0.15s ease;
}

.review-line-item.is-open .review-line-expand svg {
    transform: rotate(180deg);
}

/* The line summary's status is a size down from a field row's, as in the
   mockup's line items. */
.review-line-summary .status-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.review-line-summary .status-icon svg {
    width: 10px;
    height: 10px;
}

.review-line-detail {
    margin: 0 18px 12px 42px;
    border: 1px solid #f2f5f8;
    border-radius: 10px;
    overflow: hidden;
}

/* Row validation status (see record-detail.js's classifyRow/refresh): a
   blocker prevents Approve, info doesn't. Colors match the mockup (see
   sketch/Zlowi platform UI mockups/Zlowi Platform.dc.html turn 3b). */
.status-icon {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.status-icon--ok {
    background: #effaf4;
    color: #059669;
}

.status-icon--info {
    background: #fdefd8;
    color: #b45309;
}

.status-icon--blocker {
    background: #fee2e2;
    color: #dc2626;
}

.status-icon--removed {
    background: #f1f5f9;
    color: #94a3b8;
}

/* Only an actionable icon (delete/confirm/unmap) is clickable. */
button.status-icon:not(:disabled) {
    cursor: pointer;
}

button.status-icon:not(:disabled):hover {
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18);
}

button.status-icon--ok:not(:disabled):hover {
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
}

button.status-icon--blocker:not(:disabled):hover {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.mapping-row--info {
    background: #fffdf8;
}

.mapping-row--blocker {
    background: #fffafa;
}

.mapping-note {
    font-size: 12px;
    font-weight: 400;
    margin-top: 2px;
}

.mapping-note:empty {
    display: none;
}

.mapping-note--ok {
    color: #8894a7;
}

.mapping-note--info {
    color: #b45309;
}

.mapping-note--blocker {
    color: #b91c1c;
}

.mapping-note--removed {
    color: #888;
    font-style: italic;
}

.mapping-empty {
    color: #b6c0cd;
}

.issue-pills {
    display: inline-flex;
    gap: 6px;
}

.issue-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.issue-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.issue-pill--blocker {
    background: #fef2f2;
    color: #b91c1c;
}

.issue-pill--info {
    background: #fffaf2;
    color: #b45309;
}

.issue-pill--ok {
    background: #effaf4;
    color: #047857;
}

/* Type-ahead lookup search (web/js/components/lookup-search.js) -- the
   mapping-review screen's magnifying-glass search box for a lookup
   destination field, scoped to the matched customer for a field like Ship
   To (see domain.ScopedLookupSearcher). */

.lookup-search {
    position: relative;
}

/* Base look shared with the review grid's inputs (see .mapping-select);
   this adds the magnifying glass. */
.lookup-search-input {
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 13px 13px;
}

.lookup-search-input:disabled {
    background-color: #f8fafc;
    color: #94a3b8;
}

/* The open results list -- a floating card in the review grid's style
   (see .mapping-select), with a hover/arrow-key highlight (.is-active). */
.lookup-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: 4px;
    padding: 4px;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.lookup-search-results[hidden] {
    display: none;
}

.lookup-search-result {
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    color: #0f172a;
    cursor: pointer;
}

.lookup-search-result.is-active {
    background: #eef5ff;
    color: #1454c0;
}

.lookup-search-empty {
    padding: 8px 10px;
    font-size: 12.5px;
    color: #8894a7;
}

/* Shared stat tile (see views/extractions.js's Records stats row and
   views/home.js's KPI row -- same tile look in both places). */

.stat-tile {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 14px 16px;
}

.stat-tile-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #667;
}

.stat-tile-label-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
}

.stat-tile-value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 6px;
    color: var(--zlowi-navy);
}

.stat-tile-unit {
    font-size: 14px;
    color: #8894a7;
    font-weight: 500;
}

.stat-tile-sub {
    font-size: 11.5px;
    color: #8894a7;
    margin-top: 2px;
}

.stat-tile-bar {
    height: 5px;
    border-radius: 999px;
    background: #eef1f5;
    margin-top: 8px;
    overflow: hidden;
}

.stat-tile-bar span {
    display: block;
    height: 100%;
    background: var(--zlowi-blue);
    border-radius: 999px;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.pill--info {
    background: #eef5ff;
    color: var(--zlowi-blue);
}

.pill--neutral {
    background: #f1f5f9;
    color: #475569;
}

.pill--success {
    background: #effaf4;
    color: #047857;
}

/* A finished state that isn't a success -- e.g. a task closed as not
   required: outlined, not filled, so it never reads as Open. */
.pill--closed {
    background: none;
    box-shadow: inset 0 0 0 1px #e2e8f0;
    color: #94a3b8;
}

/* A dropdown dressed as a pill -- e.g. the activity filters (see
   components/activity-feed.js). */
.pill-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 999px;
    background: #f1f5f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
    color: #475569;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 24px 3px 10px;
    cursor: pointer;
}

.pill-select:hover {
    background-color: #e8edf3;
}

/* Records list (see views/extractions.js) */

.records-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.records-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: #eef1f5;
    border-radius: 999px;
}

.seg-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
}

.seg-opt:hover {
    color: var(--zlowi-navy);
}

.seg-opt[aria-selected="true"] {
    background: #fff;
    color: var(--zlowi-navy);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

/* Count badge on the All/Needs review/Posted segmented options (see
   views/extractions.js's updateFilterCounts) -- color is set inline per
   badge (the status's own badge_color, or neutral gray for All), matching
   the mockup's own per-option color (sketch/Zlowi platform UI mockups/Zlowi
   Platform.dc.html turn 2a). */
.seg-opt-count {
    font-size: 11.5px;
    font-weight: 700;
}

/* Customer/Source/Date range dropdown chips (see views/extractions.js's
   filterChipHtml/wireFilterChip -- matches sketch/Zlowi platform UI
   mockups/Zlowi Platform.dc.html turn 2a's z2-chip). */
.filter-chip-wrap {
    position: relative;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    color: #475569;
    cursor: pointer;
}

.filter-chip:hover {
    border-color: #c3cddb;
    color: var(--zlowi-navy);
}

.filter-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    padding: 4px;
    z-index: 10;
}

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

.filter-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    color: var(--zlowi-navy);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-dropdown button:hover {
    background: #f2f2f2;
}

.sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    color: #8894a7;
    cursor: pointer;
}

.sort-toggle:hover {
    color: var(--zlowi-navy);
}

.record-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.record-cell-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.record-file {
    font-weight: 600;
    color: var(--zlowi-navy);
}

.record-type {
    font-size: 11.5px;
    color: #8894a7;
}

/* File-type badge (see views/extractions.js's fileTypeBadge) -- colors set
   inline per file type since they're data-driven, not a fixed set of CSS
   modifier classes. */
.file-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 9.5px;
    font-weight: 700;
}

/* Source column (see views/extractions.js's sourceCell) -- an icon plus a
   two-line category/detail, replacing the single pill this used to be. */
.source-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.source-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
}

.source-icon--agent {
    background: #eef5ff;
    color: var(--zlowi-blue);
}

.source-icon--manual {
    background: #f1f5f9;
    color: #475569;
}

.source-cell-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.source-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

.source-detail {
    font-size: 11px;
    color: #8894a7;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Records pagination footer (see views/extractions.js's renderPagination --
   sketch/Zlowi platform UI mockups/Zlowi Platform.dc.html, turn 2/2a's
   "Showing 8 of 104" / Previous / Next). Empty (zero height) when
   everything fits on one page. */
.records-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px 0;
}

.records-pagination:empty {
    display: none;
}

.records-pagination-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.records-pagination-summary {
    font-size: 12.5px;
    color: #8894a7;
}

/* Compact, like the activity assignee: the shared select look
   (shared/css/brand.css), smaller. */
.records-page-size {
    padding: 4px 28px 4px 8px;
    font-size: 12px;
    color: #475569;
}

.records-pagination-buttons {
    display: flex;
    gap: 8px;
}

/* Record detail page (see views/record-detail.js) -- was a modal, now a
   full page reached at /web/records/:id. The header is one line, as in the
   mockup (turn 3b) -- back arrow, file name + status, a one-line summary,
   then Save/Approve (or Push to ERP) and the "⋯" menu -- with the
   issue banner under it, and stays sticky so a reviewer working through a
   long mapping form never has to scroll back up to act on it. */
/* Full width, like the mockup's header bar: the box itself stays in
   #view's column (so its content lines up with the cards below), and a
   spread shadow on its ::before layer (below) paints the white out to the
   main column's edges. The -24px top margin cancels #view's top
   padding, so the bar sits directly under the shared page header. */
.record-page-header {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
    margin: -24px 0 20px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}

/* Its bottom rule, full width the same way. */
.record-page-header::after {
    content: "";
    position: absolute;
    left: -100vmax;
    right: -100vmax;
    bottom: 0;
    height: 1px;
    background: #eef1f5;
}

/* The header's white band runs edge to edge (a shadow, which never adds
   scroll overflow, clipped to the header's height). It's on this layer, not
   the header itself, so the header doesn't clip its own dropdowns (the "⋯"
   menu, Approve's split button) where they hang below it. */
.record-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fff;
    box-shadow: 0 0 0 100vmax #fff;
    clip-path: inset(0 -100vmax);
}

.record-page-header-top {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-bottom: 14px;
}

.record-page-title {
    flex: 1;
    min-width: 0;
}

.record-page-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.record-page-title-row h1 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

/* Who has the selected PO's task (components/task-assignee.js), after its
   status. The Inbox's agent card shows the same thing (.inbox-task). */
.record-task,
.inbox-task {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #64748b;
}

/* The title row's labeled metadata (mockup 9a): small caps labels over
   their values, wrapping as needed. */
.record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0 0 16px;
}

.record-meta-pair {
    min-width: 0;
    max-width: 260px;
}

.record-meta dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8894a7;
}

.record-meta dd {
    margin: 3px 0 0;
    font-size: 13px;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-source-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    white-space: nowrap;
}

/* Source panel (see components/source-panel.js): the Record's files beside
   the review form. Open, the page widens past #view's usual 1100px column
   and splits in two; the panel sticks under the sticky header (whose height
   wireSourcePanel keeps in --record-header-h) while the form scrolls. */
#view:has(.record-page--split) {
    max-width: 1680px;
}

.record-page--split .record-page-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 44%);
    gap: 20px;
    align-items: start;
}

.source-panel {
    position: sticky;
    top: calc(var(--record-header-h, 96px) + 16px);
    height: calc(100vh - var(--record-header-h, 96px) - 32px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    overflow: hidden;
}

.source-panel[hidden] {
    display: none;
}

.source-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 8px 0;
    border-bottom: 1px solid #eef1f5;
    overflow-x: auto;
    flex: none;
}

.source-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 8px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: 13px;
    color: #667;
    cursor: pointer;
    white-space: nowrap;
}

.source-tab:hover {
    color: var(--zlowi-navy);
}

.source-tab[aria-selected="true"] {
    color: var(--zlowi-navy);
    font-weight: 600;
    border-bottom-color: var(--zlowi-blue);
}

.source-tab-kind {
    flex: none;
    padding: 1px 5px;
    border-radius: 4px;
    background: #f1f4f8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #5b6b82;
}

.source-tab-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.source-view-toolbar {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #eef1f5;
    font-size: 12.5px;
    color: #8894a7;
    flex: none;
}

.source-view-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--zlowi-navy);
}

.source-view-links {
    margin-left: auto;
    flex: none;
    white-space: nowrap;
}

.source-view-links .link-button {
    font-size: 12.5px;
    text-decoration: none;
}

.source-view-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.source-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* An email's HTML sets its own colors, or assumes a white page. */
.source-frame--email {
    background: #fff;
}

.source-image {
    padding: 12px;
    text-align: center;
}

.source-image img {
    max-width: 100%;
    height: auto;
}

.source-text {
    margin: 0;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.source-table-wrap {
    padding: 0 0 12px;
}

.source-table {
    border-collapse: collapse;
    font-size: 12px;
    width: max-content;
    min-width: 100%;
}

.source-table th,
.source-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #eef1f5;
    text-align: left;
    white-space: nowrap;
}

.source-table th {
    position: sticky;
    top: 0;
    background: #f7f8fa;
    font-weight: 600;
}

.source-panel-empty {
    padding: 24px 16px;
    font-size: 13px;
    color: #8894a7;
    text-align: center;
}

/* Too narrow to split: the panel sits above the form instead. */
@container view (max-width: 820px) {
    .record-page--split .record-page-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .source-panel {
        position: static;
        height: 65vh;
        order: -1;
    }
}

/* .record-page-actions is the slot Save/Approve (or Push to ERP)
   render into -- see renderReviewCard/renderApprovedCard's actionsEl --
   one row per PO still being acted on. Empty (no visible gap) while
   nothing has buttons to show yet (the progress checklist, a cancelled
   Record). */
.record-page-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: none;
}

.record-page-actions:empty {
    display: none;
}

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

/* Record detail's PO switcher (see poSwitcherHtml): a file holding several
   POs lists them under the subtitle, each with its status dot; the page
   below shows the selected one. */
.po-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.po-switcher-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid #e3e8ef;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 12.5px;
    color: #5b6b82;
    cursor: pointer;
}

.po-switcher-option:hover {
    border-color: #c9d2de;
    color: var(--zlowi-navy);
}

.po-switcher-option[aria-selected="true"] {
    border-color: var(--zlowi-blue);
    background: #f2f6fe;
    color: var(--zlowi-navy);
    font-weight: 600;
    cursor: default;
}

.po-switcher-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

/* Record detail's "‹ 2 of 4 in Needs review ›" (see queueNavHtml) --
   navigation, so it reads quieter than the action buttons beside it. */
.queue-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.queue-nav-step {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.queue-nav-step:disabled {
    opacity: 0.4;
    cursor: default;
}

.queue-nav-text {
    font-size: 12.5px;
    color: #64748b;
    white-space: nowrap;
}

.record-page-banners {
    display: flex;
    flex-direction: column;
}

/* Nothing to show until a review card has an issue to report. */
.record-page-banners:not(:has(.issue-banner:not([hidden]))) {
    display: none;
}

/* The issue banner (renderReviewCard's renderIssueBanner): a full-width
   strip across the bottom of the header, as in the mockup -- amber while
   only informational issues remain, red once there's a blocker. Its fill
   and top rule reach the column's edges the same way the header's do. */
.issue-banner {
    --issue-banner-bg: #fffaf2;
    --issue-banner-rule: #f6ead6;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    background: var(--issue-banner-bg);
    box-shadow: 0 0 0 100vmax var(--issue-banner-bg);
    clip-path: inset(0 -100vmax);
    color: #7c4a06;
}

.issue-banner::before {
    content: "";
    position: absolute;
    left: -100vmax;
    right: -100vmax;
    top: 0;
    height: 1px;
    background: var(--issue-banner-rule);
}

.issue-banner[hidden] {
    display: none;
}

.issue-banner-icon {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fdefd8;
    color: #b45309;
}

.issue-banner-text {
    font-size: 13.5px;
}

.issue-banner-text strong {
    font-weight: 700;
}

.issue-banner-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.issue-banner-jump {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    color: #475569;
    white-space: nowrap;
    cursor: pointer;
}

.issue-banner-jump:hover {
    border-color: #c3cddb;
    color: #0f172a;
}

.issue-banner .icon-button {
    width: 32px;
    height: 32px;
}

.issue-banner--blocker {
    --issue-banner-bg: #fffafa;
    --issue-banner-rule: #f6d6d6;
    color: #7f1d1d;
}

.issue-banner--blocker .issue-banner-icon {
    background: #fee2e2;
    color: #dc2626;
}

/* Home dashboard (see views/home.js) -- its own date/greeting/Upload Record
   header now renders into the shared .page-header (see components/
   header.js), so only the grid below it lives here. */

/* Locked banner (see views/home.js's renderBillingLockedBanner, shown once
   all 5 free Records are used) -- matches the mockup's own gradient exactly
   (see sketch/Zlowi platform UI mockups/Zlowi Platform.dc.html turn 5c). */
.billing-locked-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: linear-gradient(90deg, #1a73ff, #4f46e5 58%, #7c3aed);
    color: #fff;
    text-decoration: none;
}

.billing-locked-banner-icon {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.billing-locked-banner-text {
    flex: 1;
    min-width: 0;
}

.billing-locked-banner-title {
    font-size: 13.5px;
    font-weight: 700;
}

.billing-locked-banner-sub {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 2px;
}

.billing-locked-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 6px;
    background: #fff;
    color: #1454c0;
    font-weight: 700;
    font-size: 13.5px;
}

.home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.home-main,
.home-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.home-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-card {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    padding: 16px 18px;
}

.home-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 10px;
}

.review-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 14px;
    padding: 20px 22px;
    /* Matches the mockup's own gradient exactly (see sketch/Zlowi platform UI
       mockups/Zlowi Platform.dc.html turn 5a) -- a subtler dark navy-to-blue
       than var(--zlowi-blue) would give, deliberately not the app's bright
       accent blue. */
    background: linear-gradient(120deg, #0f172a, #1b3a6b);
    color: #fff;
}

.review-banner--clear {
    background: #f1f5f9;
    color: var(--zlowi-navy);
}

.review-banner-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #8fbaff;
}

.review-banner--clear .review-banner-kicker {
    color: #64748b;
}

.review-banner-kicker-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: #5b9bff;
}

.review-banner-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 7px;
}

.review-banner-sub {
    font-size: 13px;
    color: rgba(226, 232, 240, 0.72);
    margin-top: 4px;
}

.review-banner--clear .review-banner-sub {
    color: #64748b;
}

/* Layout only -- color comes from .button.accent now (see home.js's
   renderReviewBanner and .button.accent above). */
.review-banner .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    white-space: nowrap;
}

.activity-list {
    display: flex;
    flex-direction: column;
}

.activity-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #f6f8fa;
    font-size: 13.5px;
}

/* Tasks (see components/activity-feed.js) add a status pill and an
   assignee dropdown before the time. */
.activity-row--task {
    grid-template-columns: 30px minmax(0, 1fr) auto auto auto;
}

/* The Activity page's table layout (views/activity.js): icon, Type,
   Activity, Status, Assigned / closed by, Date -- logs leave the two task
   columns empty. */
.activity-row--table {
    grid-template-columns: 30px 56px minmax(0, 1fr) 104px 160px 128px;
}

.activity-row--head {
    padding: 4px 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8894a7;
    cursor: default;
}

.activity-row--table .pill,
.activity-row--table .activity-assignee,
.activity-row--table .task-assignee {
    justify-self: start;
}

.activity-row--closed .activity-message strong {
    font-weight: 500;
    color: #64748b;
}

.activity-row--closed .activity-icon {
    opacity: 0.55;
}

.activity-kind {
    justify-self: start;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
}

.activity-kind--log {
    background: #f1f5f9;
    color: #64748b;
}

.activity-kind--task {
    background: #eef5ff;
    color: #1454c0;
}

/* The type icon (see activity-feed.js's ACTIVITY_ICONS) -- a tinted circle,
   as in the mockup's activity rows. */
.activity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.activity-icon--info {
    background: #eef5ff;
    color: #1a73ff;
}

.activity-icon--success {
    background: #effaf4;
    color: #059669;
}

.activity-icon--warning {
    background: #fffbeb;
    color: #d97706;
}

.activity-icon--danger {
    background: #fef2f2;
    color: #dc2626;
}

.activity-icon--neutral {
    background: #f1f5f9;
    color: #475569;
}

.activity-row:first-child {
    border-top: none;
}

.activity-row[data-href] {
    cursor: pointer;
}

.activity-row[data-href]:hover {
    background: #fafbfc;
}

.activity-message {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.activity-message strong,
.activity-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-message strong {
    font-weight: 600;
}

.activity-detail {
    font-size: 12px;
    color: #8894a7;
}

.activity-time {
    font-size: 12px;
    color: #8894a7;
    white-space: nowrap;
}

/* Compact, like the Records page size: the shared select look
   (shared/css/brand.css), smaller. */
.activity-assignee {
    max-width: 150px;
    font-size: 12.5px;
    padding: 4px 28px 4px 8px;
}

/* A task's assignee when it isn't a dropdown (components/task-assignee.js):
   who has it, and Assign to me while nobody does. */
.task-assignee {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    color: #475569;
}

.task-assignee-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-assign-me {
    padding: 3px 10px;
    font-size: 12.5px;
    white-space: nowrap;
}

.activity-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 2px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.activity-section-label:not(:first-child) {
    margin-top: 14px;
}

.activity-more {
    display: inline-block;
    padding-top: 6px;
    font-size: 12px;
    color: var(--zlowi-blue);
}

.activity-total {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: #8894a7;
}

/* Narrow screens: the status, assignee and time drop under the message. */
@media (max-width: 640px) {
    /* A task: the date ends the first line beside the title, the status
       and assignee share the second -- the assignee shrinking to fit, not
       pushing over the status on a small phone. */
    .activity-row--task {
        grid-template-columns: 30px auto minmax(0, 1fr) auto;
    }
    .activity-row--task .activity-message {
        grid-column: 2 / 4;
        grid-row: 1;
    }
    .activity-row--task .activity-time {
        grid-column: 4;
        grid-row: 1;
        align-self: start;
    }
    .activity-row--task .pill {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }
    .activity-row--task > .activity-assignee,
    .activity-row--task > .task-assignee,
    .activity-row--task > .activity-detail {
        grid-column: 3 / -1;
        grid-row: 2;
        justify-self: start;
        min-width: 0;
        max-width: 100%;
    }
    /* The Activity table: the message takes the first line, Type / Status /
       assignee / date flow onto the next. */
    .activity-row--table {
        grid-template-columns: 30px auto auto minmax(0, 1fr) auto;
    }
    .activity-row--table .activity-message {
        grid-column: 2 / 5;
        grid-row: 1;
    }
    /* The date ends the first line, so the assignee has the rest of the
       second -- and it shrinks to fit there rather than running under the
       date (touch screens' 16px fields make it wider). */
    .activity-row--table .activity-time {
        grid-column: 5;
        grid-row: 1;
        align-self: start;
    }
    .activity-row--table .activity-kind {
        grid-column: 2;
    }
    .activity-row--table .activity-assignee,
    .activity-row--table .task-assignee {
        grid-column: 4 / -1;
        min-width: 0;
        max-width: 100%;
    }
    .activity-row--head {
        display: none;
    }
}

.checklist-compact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checklist-compact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
}

.checklist-compact-item .checklist-marker {
    width: 18px;
    height: 18px;
    font-size: 11px;
}

.checklist-compact-item.done .checklist-marker {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.done-label {
    color: #94a3b8;
    text-decoration: line-through;
}

.checklist-action {
    padding: 0;
}

/* Why a setup step's action isn't offered yet (e.g. "Connect your ERP
   first"). */
.checklist-locked {
    margin-top: 2px;
    font-size: 12px;
    color: #94a3b8;
}

/* The Agent's setup card (components/agent-address.js's agentSetupHtml),
   after mockup 4b: a dark hero holding the address, then the how-to steps,
   whose own styles come from shared/css/onboarding.css. Home's dialog
   (.agent-dialog) stacks the two; the Inbox before its first email
   (.agent-setup--inline, 13d) puts them side by side. */
.agent-dialog {
    width: min(560px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid #dbe7ff;
    border-radius: 16px;
    overflow: hidden;
}

.agent-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.agent-setup-hero {
    padding: 22px;
    background: linear-gradient(120deg, #0f172a, #1b3a6b);
    color: #fff;
}

.agent-setup-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #8fbaff;
}

.agent-setup-kicker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5b9bff;
}

.agent-setup-title {
    margin: 8px 0 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.agent-setup-text {
    margin: 6px 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.78);
}

.onb-address-row--dark .onb-field-label {
    color: #e2e8f0;
}

/* .onb-address in the selectors outranks onboarding.css's own address
   rules, which load after this file. */
.onb-address-row--dark .onb-address .onb-input {
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    text-overflow: ellipsis;
}

.onb-address-row--dark .onb-address .onb-btn {
    flex: none;
    border: none;
    box-shadow: none;
}

.agent-setup-body {
    padding: 18px 20px 20px;
}

.agent-setup-steps-title {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--zlowi-navy);
}

.agent-setup-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e8edf3;
    font-size: 12px;
    color: #8894a7;
}

.agent-setup-note--waiting::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.agent-setup--inline {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    margin-bottom: 16px;
    padding: 0;
    overflow: hidden;
}

.agent-setup--inline .agent-setup-hero {
    padding: 26px 28px;
}

.agent-setup--inline .agent-setup-body {
    display: flex;
    flex-direction: column;
    padding: 26px 28px;
}

.agent-setup--inline .agent-setup-note {
    margin-top: auto;
}

@container view (max-width: 820px) {
    .agent-setup--inline {
        grid-template-columns: 1fr;
    }

    .agent-setup--inline .agent-setup-note {
        margin-top: 16px;
    }
}

.connection-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.connection-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.connection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    flex: none;
}

.connection-dot--active {
    background: #22c55e;
}

.connection-name {
    font-size: 13px;
    font-weight: 600;
}

.connection-sub {
    font-size: 11.5px;
    color: #8894a7;
}

.connection-status {
    margin-left: auto;
    font-size: 12px;
    color: #8894a7;
    flex: none;
}

/* Settings (see views/settings.js) */

.settings-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.settings-tab {
    padding: 10px 16px;
    font-size: 14px;
    color: #667;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.settings-tab:hover {
    color: var(--zlowi-navy);
}

.settings-tab[aria-current="page"] {
    color: var(--zlowi-navy);
    font-weight: 600;
    border-bottom-color: var(--zlowi-blue);
}

.account-summary {
    font-size: 13px;
    color: #444;
    line-height: 1.6;
}

.billing-cancel-notice {
    color: #b5650a;
    font-weight: 600;
}

.settings-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 900px;
}

/* Billing / plan picker (see views/billing.js's renderFreeTier -- matches
   sketch/Zlowi platform UI mockups/Zlowi Platform.dc.html turn 6a). */

.usage-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 900px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #dbe7ff;
    border-radius: 14px;
}

.usage-banner-icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    background: #eef5ff;
    color: var(--zlowi-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.usage-banner-text {
    flex: 1;
    min-width: 0;
}

.usage-banner-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--zlowi-navy);
}

.usage-banner-sub {
    font-size: 11.5px;
    color: #8894a7;
    margin-top: 2px;
}

.usage-banner-progress {
    width: 190px;
    flex: none;
}

.usage-banner-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.usage-banner-progress-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--zlowi-blue);
}

.usage-banner-progress-label {
    font-size: 11.5px;
    color: #8894a7;
    margin-top: 6px;
    text-align: right;
}

.seg-save-pill {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 10.5px;
    font-weight: 700;
}

.plan-card {
    display: block;
    padding: 18px 20px;
    background: #fff;
    border: 1.5px solid #eef1f5;
    border-radius: 14px;
    cursor: pointer;
}

.plan-card--selected {
    border-color: var(--zlowi-blue);
    box-shadow: 0 4px 14px rgba(33, 120, 201, 0.12);
}

.plan-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.plan-card-radio {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
    border-radius: 50%;
    border: 1.5px solid #c3cddb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.plan-card--selected .plan-card-radio {
    border-color: var(--zlowi-blue);
}

.plan-card-radio-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
}

.plan-card--selected .plan-card-radio-dot {
    background: var(--zlowi-blue);
}

.plan-card-badge {
    display: inline-flex;
    margin-bottom: 5px;
    background: var(--zlowi-navy);
    color: #fff;
    font-weight: 700;
}

.plan-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--zlowi-navy);
    white-space: nowrap;
}

.plan-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 18px;
}

.plan-card-price-amount {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--zlowi-navy);
}

.plan-card-price-unit {
    font-size: 13.5px;
    color: #64748b;
}

.plan-card-divider {
    height: 1px;
    background: #f2f5f8;
    margin: 16px 0 13px;
}

.plan-card-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-card-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #334155;
}

.plan-card-feature svg {
    flex: none;
    margin-top: 2px;
}

.record-explainer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.record-explainer-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--zlowi-navy);
    margin-bottom: 5px;
}

.billing-footnote {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 900px;
    margin-top: 18px;
    color: #8894a7;
}

.billing-footnote svg {
    flex: none;
}

.billing-footnote span {
    font-size: 12px;
}

@media (max-width: 860px) {
    .home-grid {
        grid-template-columns: 1fr;
    }
    .settings-plan-grid {
        grid-template-columns: 1fr;
    }
    .record-explainer-grid {
        grid-template-columns: 1fr;
    }
    .usage-banner {
        flex-wrap: wrap;
    }
    .page-header {
        padding: 14px 16px;
        flex-wrap: wrap;
    }
    .page-header-search {
        display: none;
    }
}

/* Email headers (see components/source-panel.js's emailHeadersHtml): above a
   Record's Email tab, and at the top of the Inbox's reading pane. */

.email-headers {
    flex: none;
    padding: 12px 14px;
    border-bottom: 1px solid #eef1f5;
    font-size: 13px;
    color: #334155;
}

.email-headers-subject {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--zlowi-navy);
}

.email-headers-subject > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.email-headers-subject > :last-child:not(:first-child) {
    margin-left: auto;
    flex: none;
    font-size: 13px;
    font-weight: 400;
}

.email-header-row {
    display: flex;
    gap: 8px;
    line-height: 1.6;
}

.email-header-label {
    flex: none;
    width: 42px;
    color: #8894a7;
}

.email-header-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Inbox (see views/inbox.js): message list beside the reading pane. */

.inbox {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.inbox-list,
.inbox-reader {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 12px;
}

.inbox-list {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}

.inbox-reader {
    position: sticky;
    top: 16px;
    min-height: 240px;
}

.inbox-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-bottom: 1px solid #f1f4f8;
    border-left: 3px solid transparent;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inbox-item:hover {
    background: #f8fafc;
}

.inbox-item[aria-current="true"] {
    background: #eef5ff;
    border-left-color: var(--zlowi-blue);
}

.inbox-item-top {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
}

.inbox-item-from {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--zlowi-navy);
}

.inbox-item-date {
    margin-left: auto;
    flex: none;
    color: #8894a7;
}

.inbox-item-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    color: #1e293b;
}

.inbox-item-clip {
    font-size: 11.5px;
    color: #8894a7;
}

.inbox-item-snippet {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: #64748b;
}

.inbox-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

/* Who has the email's task, at the end of its row. */
.inbox-item-assignee {
    width: 20px;
    height: 20px;
    margin-left: auto;
    font-size: 9px;
}

.inbox-item-mailbox {
    font-size: 12px;
    color: #8894a7;
}

.inbox-more {
    display: block;
    width: 100%;
    padding: 10px;
}

.inbox-status {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.inbox-status--neutral {
    background: #f1f5f9;
    color: #475569;
}

.inbox-status--info {
    background: #eef5ff;
    color: var(--zlowi-blue);
}

.inbox-status--ok {
    background: #effaf4;
    color: #047857;
}

.inbox-status--warn {
    background: #fff7ea;
    color: #b45309;
}

.inbox-status--error {
    background: #fef2f2;
    color: #b91c1c;
}

.inbox-reader-actions {
    display: inline-flex;
    gap: 8px;
}

.inbox-verdict {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    background: #fafbfc;
    border-bottom: 1px solid #eef1f5;
    font-size: 13px;
    color: #334155;
}

.inbox-mailbox {
    padding: 8px 14px 0;
    font-size: 12.5px;
    color: #8894a7;
}

.inbox-body {
    padding: 12px 14px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #1e293b;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.inbox-attachments {
    padding: 10px 14px 14px;
    border-top: 1px solid #eef1f5;
}

.inbox-attachments-head {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inbox-attachment {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}

.inbox-attachment-size {
    color: #8894a7;
}

.inbox-mailbox-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid #eef1f5;
}

.inbox-mailbox-name {
    font-weight: 600;
    font-size: 13.5px;
}

/* .inbox-back returns from the reader to the list once they take turns
   (below). */
.inbox-back {
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

/* Too narrow for two columns: the list, or the selected email with a way
   back -- not both stacked (views/inbox.js toggles .inbox--reading). */
@container view (max-width: 760px) {
    .inbox {
        grid-template-columns: minmax(0, 1fr);
    }

    .inbox-reader {
        position: static;
    }

    .inbox--reading .inbox-list,
    .inbox:not(.inbox--reading) .inbox-reader {
        display: none;
    }

    .inbox-list {
        max-height: none;
    }

    #view:has(.inbox--reading) .inbox-back {
        display: inline-flex;
    }
}

/* My profile (views/profile.js; mockups 12b-12f): a notice banner, the
   name/job title card, then Sign-in and security rows (icon, label/value,
   action button). */
.profile-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 760px;
}

.profile-sec {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    overflow: hidden;
}

.profile-sec-head {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 700;
}

.profile-identity {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 4px;
}

.profile-identity-fields {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.profile-avatar--xl {
    width: 56px;
    height: 56px;
    font-size: 18px;
    margin-top: 4px;
}

.profile-sec-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 20px 18px;
}

.profile-sec-foot .form-hint {
    margin: 0;
}

.profile-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border-top: 1px solid #f2f5f8;
}

.profile-row .button {
    white-space: nowrap;
}

.profile-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-row-label {
    font-size: 12px;
    color: #8894a7;
}

.profile-row-value {
    font-size: 14px;
    font-weight: 600;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.profile-row-sub {
    font-size: 12px;
    color: #8894a7;
    margin-top: 2px;
}

.profile-row-pending {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 16px 70px;
    font-size: 12px;
    color: #1454c0;
}

.pill--pending {
    gap: 6px;
    background: #eef5ff;
    color: #1454c0;
}

.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.profile-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #cfe0fb;
    background: #eef5ff;
}

.profile-notice--ok {
    border-color: #bfe8d2;
    background: #effaf4;
}

.profile-notice--bad {
    border-color: #f5c2c2;
    background: #fef2f2;
}

.profile-notice-icon {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: #dbe8fe;
    color: #1a73ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-notice--ok .profile-notice-icon {
    background: #d5f2e3;
    color: #047857;
}

.profile-notice--bad .profile-notice-icon {
    background: #fde0e0;
    color: #b91c1c;
}

.profile-notice-text {
    flex: 1;
    min-width: 0;
}

.profile-notice-title {
    font-size: 13.5px;
    font-weight: 700;
}

.profile-notice-sub {
    font-size: 12.5px;
    color: #475569;
    margin-top: 3px;
    line-height: 1.5;
}

.profile-notice-actions {
    display: flex;
    gap: 14px;
    margin-top: 8px;
}

.profile-notice-actions .link-button {
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
}

.link-button--muted {
    color: #64748b;
}

.icon-button--bare {
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
}

.profile-dialog {
    width: 460px;
}

.profile-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.profile-dialog-head > div {
    flex: 1;
}

.profile-static {
    font-size: 14px;
    color: #475569;
    padding: 2px 0;
}

.form-field .form-hint {
    margin: 0;
    font-size: 11.5px;
}

.form-field .form-hint a {
    color: #1a73ff;
    font-weight: 600;
    text-decoration: none;
}

.form-field .form-hint a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .profile-identity-fields {
        grid-template-columns: 1fr;
    }

    .profile-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .profile-row .button {
        grid-column: 2;
        justify-self: start;
    }
}

/* Dashboard, Oct 5 revision (views/home.js; mockup 13a): the Finish
   setup card's progress bar. */
.pill--dot {
    gap: 6px;
}

.checklist-progress {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: #eef1f5;
    margin: 2px 0 6px;
    overflow: hidden;
}

.checklist-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #22c55e;
}

/* Get started (13a) and No Records yet (13b). The upload area is the
   embedded upload form (components/new-extraction-dialog.js). */
.get-started {
    padding: 24px;
}

.get-started-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1454c0;
}

.get-started-title {
    margin: 8px 0 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.get-started-sub {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #64748b;
    max-width: 52ch;
}

.get-started-upload {
    margin-top: 20px;
}

.get-started-ways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.get-started-way {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid #eef1f5;
    background: #fff;
}

.get-started-way-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.get-started-way-title {
    font-size: 14px;
    font-weight: 700;
}

.get-started-way-text {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
    margin-top: 3px;
}

.get-started-way-action {
    margin-top: auto;
}

.get-started-way-action .link-button,
.records-empty-email .link-button {
    font-weight: 600;
    margin: 0;
    font-size: 13px;
}

.get-started-muted {
    font-size: 12.5px;
    color: #8894a7;
}

.get-started-foot {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f2f5f8;
    font-size: 12.5px;
    color: #8894a7;
}

.records-empty {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.records-empty-card {
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.records-empty-card .get-started-sub {
    max-width: 46ch;
}

.records-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #eef5ff;
    color: #1a73ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.records-empty-card .get-started-title {
    margin-top: 16px;
}

.records-empty-upload {
    width: 100%;
    max-width: 620px;
    text-align: left;
}

.records-empty-email {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 12.5px;
    color: #64748b;
}

.records-empty-email svg {
    color: #8894a7;
}

.records-empty-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.records-empty-step {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid #eef1f5;
    background: #fff;
}

.records-empty-step-num {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.records-empty-step-title {
    font-size: 13.5px;
    font-weight: 700;
}

.records-empty-step-text {
    font-size: 12.5px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .records-empty-steps {
        grid-template-columns: 1fr;
    }

    .get-started-ways {
        grid-template-columns: 1fr;
    }
}

/* Mapped To's field picker (components/field-picker.js; mockups 9c/9d),
   over the hidden native select. */
.field-picker {
    position: relative;
    min-width: 0;
}

.field-picker-native {
    display: none;
}

.field-picker-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
}

.field-picker-trigger svg {
    flex: none;
    margin-left: auto;
    color: #8894a7;
}

.field-picker-trigger:hover:not(:disabled) {
    border-color: #c3cddb;
}

.field-picker-trigger:focus-visible,
.field-picker-trigger[aria-expanded="true"] {
    outline: none;
    border-color: #1a73ff;
    box-shadow: 0 0 0 3px rgba(26, 115, 255, 0.14);
}

.field-picker-trigger:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: default;
}

.field-picker-trigger-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-picker-trigger-text--empty {
    color: #94a3b8;
}

.field-picker-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 10.5px;
    font-weight: 600;
    vertical-align: 1px;
}

.field-picker-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 340px;
    max-width: calc(100vw - 32px);
    z-index: 20;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.16),
        0 2px 6px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.field-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f2f5f8;
    color: #94a3b8;
}

.field-picker-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    color: #0f172a;
}

.field-picker-count {
    font-size: 11.5px;
    color: #8894a7;
    white-space: nowrap;
}

.field-picker-pop kbd {
    font-family: inherit;
    font-size: 10.5px;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
}

.field-picker-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0 6px;
}

.field-picker-heading {
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8894a7;
}

.field-picker-divider {
    height: 1px;
    background: #f2f5f8;
    margin: 6px 12px;
}

.field-picker-option,
.field-picker-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 6px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
}

.field-picker-option:hover,
.field-picker-group:hover,
.field-picker-active {
    background: #f1f5f9;
}

.field-picker-option--current .field-picker-option-label {
    font-weight: 700;
    color: #1454c0;
}

.field-picker-spark {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 6px;
    border: 1px solid #dbe6f5;
    color: #1a73ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.field-picker-option-main {
    flex: 1;
    min-width: 0;
}

.field-picker-option-label {
    font-size: 13px;
    color: #0f172a;
}

.field-picker-option-label mark {
    background: #fff3c4;
    color: inherit;
    border-radius: 2px;
}

.field-picker-option-sub {
    font-size: 11.5px;
    color: #8894a7;
    margin-top: 1px;
}

.field-picker-best {
    font-size: 11px;
    font-weight: 600;
    color: #1454c0;
    white-space: nowrap;
}

.field-picker-group svg {
    flex: none;
    color: #8894a7;
    transform: rotate(-90deg);
    transition: transform 0.12s ease;
}

.field-picker-group--open svg {
    transform: none;
}

.field-picker-group-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.field-picker-group-count {
    font-size: 11.5px;
    color: #8894a7;
}

.field-picker-group-body .field-picker-option {
    margin-left: 22px;
}

.field-picker-empty {
    padding: 14px 12px;
    font-size: 12.5px;
    color: #8894a7;
}

.field-picker-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-top: 1px solid #f2f5f8;
    background: #fbfcfd;
    font-size: 11.5px;
    color: #8894a7;
}

.field-picker-clear {
    margin-left: auto;
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.field-picker-foot span {
    white-space: nowrap;
}

/* Address cards (views/record-detail.js's addressCardsHtml/
   paintAddressPreviews; mockups 9e/9f): Letterhead, Bill to and Ship to
   side by side, each with its address and a button that opens its fields
   in a full-width panel underneath. The panel is a <details> whose own
   summary is hidden -- the card's button drives it. */
.address-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.address-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 14px;
    overflow: hidden;
}

.address-card--blocker {
    border-color: #f5c2c2;
}

.address-card--open {
    border: 2px solid #1a73ff;
    box-shadow: 0 0 0 4px rgba(26, 115, 255, 0.1);
}

.address-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px 0;
}

.address-card-icon {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 7px;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.address-card--blocker .address-card-icon {
    background: #fef2f2;
    color: #dc2626;
}

.address-card-title {
    font-size: 13.5px;
    font-weight: 700;
}

.address-card-head .issue-pills {
    margin-left: auto;
}

.address-card .address-preview {
    flex: 1;
    padding: 12px 16px 14px 50px;
}

.address-card-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-top: 1px solid #f2f5f8;
    background: #fbfcfd;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    text-align: left;
}

.address-card-toggle svg {
    margin-left: auto;
    transition: transform 0.15s ease;
}

.address-card-toggle[aria-expanded="true"] {
    background: #f3f8ff;
    color: #1454c0;
}

.address-card-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.address-lines {
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}

.address-lines > div:first-child {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.address-lines--empty,
.address-lines--empty > div:first-child {
    font-size: 13px;
    font-weight: 400;
    color: #94a3b8;
}

.address-missing {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed #f0a3a3;
    background: #fffafa;
}

.address-missing-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #b91c1c;
}

.address-missing-text {
    font-size: 12px;
    color: #7f1d1d;
    margin-top: 3px;
}

.address-missing-add {
    margin-top: 10px;
    padding: 5px 12px;
    font-size: 12px;
}

/* The fields panel under the cards. */
.review-section--address > .address-panel-summary {
    display: none;
}

.review-section--address {
    border-color: #cfe0fb;
}

.review-section--address:not([open]) {
    display: none;
}

.address-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
}

.address-panel-count {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 400;
    color: #8894a7;
}

/* Connection setup dialog (components/add-connector-dialog.js's
   renderEditStep; mockup 8d). */
.add-connector-dialog.connector-dialog {
    width: 640px;
    padding: 0;
}

.connector-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 26px 16px;
    border-bottom: 1px solid #eef1f5;
}

.connector-dialog-title {
    flex: 1;
    min-width: 0;
}

/* Wraps, so the Connected pill drops under a long name instead of running
   over the close button. */
.connector-dialog-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.connector-dialog-name h2 {
    margin: 0;
}

.connector-dialog-head .dialog-subtitle {
    margin: 3px 0 0;
}

.connector-dialog-section {
    padding: 20px 26px 4px;
}

.connector-dialog-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.connector-dialog-section-head .link-button {
    font-weight: 600;
    margin: 0;
}

.connector-dialog-section-head .link-button:first-of-type {
    margin-left: auto;
}

.connector-dialog-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8894a7;
}

.connector-dialog-count {
    margin-left: auto;
    font-size: 12px;
    color: #8894a7;
}

.connector-dialog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.connector-dialog-wide {
    grid-column: 1 / -1;
}

.connector-dialog-switch {
    display: flex;
    align-items: flex-end;
    padding-bottom: 14px;
}

.static-field {
    padding: 9px 12px;
    border: 1px solid #eef1f5;
    border-radius: 9px;
    background: #f8fafc;
    font-size: 14px;
    font-weight: 400;
    color: #334155;
}

.secret-field {
    display: flex;
    gap: 8px;
}

.secret-field input {
    flex: 1;
    min-width: 0;
    font-family: Menlo, monospace;
    font-size: 12.5px;
}

/* A checkbox drawn as a switch. */
.switch-field {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
}

.switch-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch {
    position: relative;
    width: 34px;
    height: 20px;
    flex: none;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.15s ease;
}

.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
    transition: transform 0.15s ease;
}

.switch-field input:checked + .switch {
    background: #1a73ff;
}

.switch-field input:checked + .switch::after {
    transform: translateX(14px);
}

.switch-field input:focus-visible + .switch {
    box-shadow: 0 0 0 3px rgba(26, 115, 255, 0.25);
}

.mailbox-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mailbox-card {
    border: 1px solid #eef1f5;
    border-radius: 12px;
    overflow: hidden;
}

.mailbox-card--inactive .mailbox-address {
    opacity: 0.6;
}

.mailbox-card-body {
    padding: 14px 16px 12px;
}

.mailbox-card-grid,
.mailbox-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.mailbox-card-grid .switch-field {
    margin-bottom: 22px;
}

.mailbox-address {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 12px;
    border-radius: 10px;
    background: #f7f8fa;
    border: 1px dashed #d5dde8;
    color: #8894a7;
}

.mailbox-address-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Menlo, monospace;
    font-size: 12px;
    color: #0f172a;
}

.mailbox-copy {
    padding: 5px 11px;
    font-size: 12.5px;
}

.mailbox-card-foot {
    display: flex;
    gap: 14px;
    padding: 9px 16px;
    border-top: 1px solid #f2f5f8;
    background: #fbfcfd;
}

.mailbox-card-foot .link-button {
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
}

.link-button--danger {
    color: #b91c1c;
}

.mailbox-add {
    margin-top: 12px;
    padding: 12px 16px 0;
    border: 1px dashed #d5dde8;
    border-radius: 12px;
}

.mailbox-add .button {
    margin-bottom: 14px;
}

.connector-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding: 16px 26px;
    border-top: 1px solid #eef1f5;
    background: #fbfcfd;
}

.connector-dialog #form-error {
    margin: 12px 26px 0;
}

@media (max-width: 640px) {
    .connector-dialog-grid,
    .mailbox-card-grid,
    .mailbox-add {
        grid-template-columns: 1fr;
    }
}

/* Inbox, Oct 5 revision (views/inbox.js; mockups 8b-8f): search, tab
   counts, explanatory empty states, and the Zlowi Agent's card. */
.inbox-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 36px;
    min-width: 220px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #94a3b8;
}

.inbox-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    color: #0f172a;
    background: transparent;
}

.inbox-list-head {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: #8894a7;
    border-bottom: 1px solid #f2f5f8;
}

.inbox-list-head .sort-toggle {
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}

.inbox-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 24px;
    text-align: center;
}

.inbox-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.inbox-empty-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: #64748b;
    max-width: 34ch;
}

.inbox-empty .link-button {
    font-weight: 600;
    margin: 4px 0 0;
}

.inbox-empty--reader {
    padding-top: 120px;
}

.agent-card {
    margin: 14px 14px 18px;
    padding: 16px 18px;
    border: 1px solid #dbe6f5;
    border-radius: 14px;
    background: linear-gradient(180deg, #f6f9ff, #fff);
}

.agent-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.agent-card-mark {
    width: 30px;
    height: 30px;
    flex: none;
    padding: 5px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #dbe6f5;
    object-fit: contain;
}

.agent-card-who {
    flex: 1;
    min-width: 0;
}

.agent-card-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
}

.agent-card-when {
    font-size: 11.5px;
    color: #8894a7;
    margin-top: 2px;
}

.agent-card-sure {
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef5ff;
    color: #1454c0;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.agent-card-headline {
    margin-top: 12px;
    font-size: 14.5px;
    font-weight: 700;
}

.agent-card-reason {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.55;
    color: #475569;
}

.agent-card-record {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 10px 10px 12px;
    border: 1px solid #eef1f5;
    border-radius: 11px;
    background: #fff;
}

.agent-card-record-icon {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    background: #eef5ff;
    color: #1a73ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.agent-card-record-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
}

.agent-card-record .button {
    text-decoration: none;
    white-space: nowrap;
}

.agent-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* Who has the email's task, left of its actions -- like the closed
   card's "Confirmed by". */
.agent-card-actions .inbox-task {
    flex: 1;
}

.agent-card-confirmed {
    flex: 1;
    font-size: 12.5px;
    color: #475569;
}

/* Billing, subscribed (views/billing.js's renderSubscribed; mockups
   10a/10b). */
.billing-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.billing-summary > div {
    padding: 18px 20px;
}

.billing-summary > div + div {
    border-left: 1px solid #f2f5f8;
}

.billing-summary-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 17px;
    font-weight: 700;
}

.billing-summary-sub {
    font-size: 12px;
    color: #8894a7;
    margin-top: 4px;
}

.billing-summary-plan .button {
    margin-top: 14px;
}

.billing-summary-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.billing-summary-label span {
    font-weight: 400;
    color: #8894a7;
}

.billing-summary-value {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.billing-summary-value span {
    font-size: 12.5px;
    font-weight: 400;
    color: #8894a7;
}

.billing-change-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 26px 0 14px;
}

.billing-change-head h2 {
    margin: 0;
    font-size: 17px;
}

.billing-change-head .form-hint {
    margin: 4px 0 0;
}

.billing-plan-grid {
    align-items: stretch;
}

.billing-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: default;
}

.billing-plan .plan-card-badge {
    align-self: flex-start;
    margin-bottom: 6px;
}

.billing-plan .button,
.billing-plan-current {
    margin-top: auto;
    width: 100%;
}

.billing-plan .plan-card-features {
    margin-bottom: 16px;
}

.billing-plan-current {
    padding: 9px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #047857;
    background: #effaf4;
    border-radius: 9px;
}

.billing-note {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #eef5ff;
    border: 1px solid #cfe0fb;
    font-size: 13px;
    color: #1e3a8a;
}

.billing-note .link-button {
    font-weight: 600;
    margin: 0 0 0 4px;
}

.billing-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-size: 12.5px;
    color: #64748b;
}

.billing-foot a {
    color: #1a73ff;
    font-weight: 600;
    text-decoration: none;
}

.plan-change-dialog {
    width: 520px;
}

.plan-change-compare {
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 12px;
    background: #f7f8fa;
}

.plan-change-tag {
    font-size: 11px;
    color: #8894a7;
}

.plan-change-tag--new {
    color: #1454c0;
}

.plan-change-name {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 700;
}

.plan-change-sub {
    font-size: 11.5px;
    color: #8894a7;
}

.plan-change-lines {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px 2px;
}

.plan-change-line {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #475569;
}

.plan-change-line span:first-child {
    flex: 1;
}

.plan-change-line span:last-child {
    font-variant-numeric: tabular-nums;
}

.plan-change-line--total {
    font-weight: 700;
    color: #0f172a;
}

.plan-change-rule {
    height: 1px;
    background: #eef1f5;
    margin: 2px 0;
}

.plan-change-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid #eef1f5;
    border-radius: 10px;
    font-size: 12.5px;
    color: #475569;
}

.plan-change-brand {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 6px;
    border-radius: 5px;
    background: #0f172a;
    color: #fff;
}

.plan-change-note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
}

.plan-change-actions {
    align-items: center;
}

.plan-change-hint {
    flex: 1;
    font-size: 11.5px;
    color: #8894a7;
}

@media (max-width: 900px) {
    .billing-summary {
        grid-template-columns: 1fr 1fr;
    }

    .billing-summary > div + div {
        border-left: none;
    }
}

/* Mobile shell (last in the file so it overrides the desktop rules above
   it at equal specificity): at sidebar.js's MOBILE_NAV widths (keep the two in sync)
   the rail leaves the layout and slides in over the page as a drawer, from
   the page header's menu button (.page-header-menu, hidden otherwise).
   body.nav-open is the drawer's open state. */
.page-header .page-header-menu,
.nav-backdrop {
    display: none;
}

@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        transform: translateX(-100%);
        visibility: hidden;
        transition:
            transform 0.22s ease,
            visibility 0s linear 0.22s;
    }

    body.nav-open #sidebar {
        transform: none;
        visibility: visible;
        transition: transform 0.22s ease;
    }

    .rail {
        /* dvh: iOS Safari's 100vh runs under its own toolbar, which would
           hide the plan meter at the bottom. */
        height: 100dvh;
        box-shadow: 0 0 32px rgba(15, 23, 42, 0.35);
    }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 59;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    body.nav-open .nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    body.nav-open {
        overflow: hidden;
    }

    .page-header .page-header-menu {
        display: inline-flex;
    }

    /* The header row has no room for a labelled button beside the title:
       the primary action is just its icon, and the title truncates. */
    .page-header {
        gap: 10px;
        padding: 12px 16px;
    }

    .page-header-title h1 {
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Home's greeting wraps instead -- it's the whole point of the line. */
    .page-header-date + h1 {
        white-space: normal;
    }

    .page-header-action-label {
        display: none;
    }

    /* Help is already in the profile menu. */
    #help-link {
        display: none;
    }

    /* Record detail's header: back arrow, the file name and the pager's
       arrows -- the "Records /" crumb, the "2 of 5 in ..." text and the
       divider make way. */
    .page-crumbs-trail a,
    .page-crumbs-sep,
    .page-header .queue-nav-text,
    .page-header-divider {
        display: none;
    }

    #page-header-action {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* The footer flows after the page instead of pinning over it. */
    body:has(.rail) .site-footer {
        position: static;
        left: 0;
        flex-wrap: wrap;
        gap: 4px 12px;
        font-size: 11px;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    #sidebar,
    body.nav-open #sidebar,
    .nav-backdrop {
        transition: none;
    }
}

/* Tables as cards: once #view is too narrow for the columns, each row of
   the Records list (.records-table) and of the settings tables
   (.data-table--cards) becomes its own card. A cell's data-label names it
   where the hidden header used to. */
@container view (max-width: 760px) {
    :is(.records-table, .data-table--cards),
    :is(.records-table, .data-table--cards) tbody {
        display: block;
        border: none;
        background: transparent;
        overflow: visible;
    }

    :is(.records-table, .data-table--cards) thead {
        display: none;
    }

    :is(.records-table, .data-table--cards) tr {
        display: block;
        margin-bottom: 10px;
        padding: 14px;
        background: #fff;
        border: 1px solid #eef1f5;
        border-radius: 12px;
    }

    :is(.records-table, .data-table--cards) td {
        display: block;
        padding: 0;
        border: none;
        min-width: 0;
    }

    :is(.records-table, .data-table--cards) td[data-label]::before {
        content: attr(data-label);
        margin-right: 8px;
        font-size: 12px;
        color: #8894a7;
    }

    /* Records: file and status on top, customer and issues, then source
       and when it arrived. */
    .records-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "rec status"
            "cust issues"
            "src date";
        align-items: center;
        gap: 10px 12px;
    }

    .records-table td:nth-child(1) {
        grid-area: rec;
    }
    .records-table td:nth-child(2) {
        grid-area: cust;
    }
    .records-table td:nth-child(3) {
        grid-area: src;
    }
    .records-table td:nth-child(4) {
        grid-area: date;
        text-align: right;
        font-size: 12px;
        color: #8894a7;
    }
    .records-table td:nth-child(5) {
        grid-area: issues;
        text-align: right;
    }
    .records-table td:nth-child(6) {
        grid-area: status;
        justify-self: end;
    }

    .records-table td.empty-state {
        grid-column: 1 / -1;
    }

    .records-table .record-file {
        overflow-wrap: anywhere;
    }

    /* Settings tables: the first cell is the card's title, labelled
       values follow, and the row's actions sit at the bottom. */
    .data-table--cards td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 3px 0;
        overflow-wrap: anywhere;
    }

    .data-table--cards td:first-child {
        padding-bottom: 6px;
        font-weight: 600;
    }

    .data-table--cards td:last-child:not(:first-child) {
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-top: 8px;
    }

    /* A toolbar's status tabs scroll sideways rather than overflowing the
       page. */
    .records-toolbar .seg {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .records-toolbar .seg-opt {
        flex: none;
        white-space: nowrap;
    }
}

/* Phone-width content. */
@container view (max-width: 520px) {
    /* The Records and Dashboard stat tiles keep their three columns, just
       tighter. */
    :is(.records-stats, .home-kpis) {
        gap: 8px;
    }

    :is(.records-stats, .home-kpis) .stat-tile {
        padding: 10px 12px;
    }

    :is(.records-stats, .home-kpis) .stat-tile-value {
        font-size: 20px;
    }

    /* The Dashboard's review banner: its button goes under the text. */
    .review-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    /* Billing's usage banner: the progress bar takes its own line instead
       of squeezing the text into a column. */
    .usage-banner {
        flex-wrap: wrap;
    }

    .usage-banner-text {
        flex-basis: calc(100% - 50px);
    }

    .usage-banner-progress {
        width: 100%;
    }
}

/* Record detail at narrow widths: the record header scrolls with the page
   instead of sticking (on a phone it would cover most of the screen), and
   the field-mapping grid and line items become stacked cards. */
@container view (max-width: 760px) {
    /* relative, not static: its full-width ::before/::after band must keep
       it as their containing block, or they escape #main-col's clip and
       widen the page. */
    .record-page-header {
        position: relative;
    }

    /* The title takes its own line; Show source and the actions wrap
       under it. */
    .record-page-title {
        flex-basis: 100%;
    }

    .record-page-title-row h1 {
        font-size: 20px;
    }

    .source-panel {
        top: 0;
    }
}

@container view (max-width: 640px) {
    .mapping-header-row,
    .review-line-header {
        display: none;
    }

    /* The field picker's popover spans the picker itself rather than a
       fixed 340px from its left edge, which ran off the right side. */
    .field-picker-pop {
        width: 100%;
    }

    /* The issue banner: its text full width, the jump buttons under it. */
    .issue-banner {
        flex-wrap: wrap;
    }

    .issue-banner-text {
        flex: 1 1 calc(100% - 40px);
    }

    .issue-banner-nav {
        margin-left: 36px;
    }

    /* Show source is just its icon, so it fits beside Save, Approve and
       the "⋯" menu. Its label stays for screen readers (it swaps between
       Show and Hide, so it can't be an aria-label). */
    .record-source-toggle span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* One field: the status icon beside its label, then the file's value,
       Mapped To and the destination value under it. */
    .mapping-row {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 8px 10px;
        padding: 12px 14px;
    }

    .mapping-row > :nth-child(n + 3) {
        grid-column: 2;
    }

    .mapping-file-value:not(:empty)::before {
        content: "In file: ";
        color: #94a3b8;
    }

    .mapping-file-value:empty {
        display: none;
    }

    /* One line: item, amount and the expand chevron on top, the
       description under them, then the Extras, Qty and Unit price, each
       labelled. The columns are set inline per PO, hence !important. */
    .review-line-summary {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
        padding: 12px 14px;
    }

    .review-line-item-cell {
        flex: 1 1 0;
    }

    .review-line-amount {
        order: 1;
    }

    .review-line-expand {
        order: 2;
    }

    .review-line-description {
        order: 3;
        flex-basis: 100%;
    }

    .review-line-summary > [data-extras-label],
    .review-line-summary > [data-line-field] {
        order: 4;
        display: flex;
        align-items: center;
        gap: 6px;
        text-align: left;
    }

    .review-line-summary > [data-extras-label]:empty {
        display: none;
    }

    .review-line-summary > [data-extras-label]::before {
        content: attr(data-extras-label);
    }

    .review-line-summary > [data-line-field="Quantity"]::before {
        content: "Qty";
    }

    .review-line-summary > [data-line-field="Unit Price"]::before {
        content: "Price";
    }

    .review-line-summary > [data-extras-label]::before,
    .review-line-summary > [data-line-field]::before {
        font-size: 11px;
        color: #8894a7;
    }

    .review-line-summary .review-line-input {
        width: 84px;
    }
}

/* Touch screens: the field picker's keyboard hints (arrows, Enter, "/")
   don't apply. */
@media (pointer: coarse) {
    .field-picker-pop kbd,
    .field-picker-foot kbd + span {
        display: none;
    }
}

/* Phone-width connector dialog: a tighter header, and the ERP's name
   dropped beside its logo, which already says it (the dialog keeps it as
   its aria-label). */
@media (max-width: 640px) {
    .connector-dialog-head {
        gap: 10px;
        padding: 18px 18px 14px;
    }

    .connector-dialog-head:has(.connector-logo img) .connector-dialog-name h2 {
        display: none;
    }
}