/* ==========================================================================
   ATP Carrier app (driver + company admin) - mobile-first shell built on the atp.css tokens only.
   Masters: docs/brand/masters/carrier-01..07. Navy app bar on operational screens, light bar on home/bookings,
   5-tab bottom bar, 44px targets, safe areas, fluid on wide screens (no fixed caps).
   ========================================================================== */

.atp-cr {
    --cr-bar-h: 56px;
    --cr-tabs-h: 64px;
    --cr-navy: var(--atp-navy-900);
    /* Ink on the navy bar / filled chips and buttons: white in both themes (the navy surface never inverts). */
    --cr-on-navy: var(--atp-on-navy);
    /* Warning ink on the warn-soft background (AA on --atp-warn-soft). */
    --cr-warn-ink: var(--atp-warn-ink);
    --cr-gutter: var(--atp-space-4);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--atp-bg);
    color: var(--atp-text);
    font-family: var(--atp-font-sans);
    font-size: var(--atp-text-md);
    line-height: var(--atp-leading-normal);
    -webkit-font-smoothing: antialiased;
}

.atp-cr *, .atp-cr *::before, .atp-cr *::after { box-sizing: border-box; }
.atp-cr img { max-width: 100%; height: auto; }
.atp-cr a { color: var(--atp-link); }
.atp-cr a.atp-btn--primary, .atp-cr a.atp-btn--primary:hover, .atp-cr a.atp-btn--primary:visited { color: var(--cr-on-navy); }

/* ---- app bar ---- */
.atp-cr__bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: var(--atp-space-2);
    min-height: var(--cr-bar-h);
    padding: calc(var(--atp-space-2) + var(--atp-safe-top)) var(--atp-space-3) var(--atp-space-2);
    background: var(--atp-surface);
    border-bottom: 1px solid var(--atp-border);
}
.atp-cr__bar--wide { grid-template-columns: 44px 1fr auto; }
/* the app's back arrow sits before the menu button (web: no arrow, the browser has one) */
.atp-cr__bar--back { grid-template-columns: 44px 44px 1fr 44px; }
.atp-cr__bar--back.atp-cr__bar--wide { grid-template-columns: 44px 44px 1fr auto; }
.atp-cr__bar--navy {
    background: var(--cr-navy);
    border-bottom-color: var(--cr-navy);
    color: var(--cr-on-navy);
}
.atp-cr__bar--navy .atp-cr__iconbtn { color: var(--cr-on-navy); }
.atp-cr__bar-title {
    text-align: center;
    font-weight: var(--atp-weight-semibold);
    font-size: 17px;
    line-height: 1.25;
    color: var(--atp-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atp-cr__bar--navy .atp-cr__bar-title { color: var(--cr-on-navy); }
.atp-cr__bar-sub {
    display: block;
    font-size: var(--atp-text-sm);
    font-weight: var(--atp-weight-normal);
    opacity: .85;
}
.atp-cr__bar-logo { display: flex; justify-content: center; align-items: center; gap: var(--atp-space-2); min-width: 0; }
.atp-cr__bar-logo img { height: 34px; width: auto; flex: none; }
.atp-cr__bar-actions { display: flex; gap: var(--atp-space-1); justify-content: flex-end; }
.atp-cr__iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--atp-radius-btn);
    background: transparent;
    color: var(--atp-heading);
    cursor: pointer;
    position: relative;
}
.atp-cr__iconbtn:hover { background: var(--atp-primary-soft); }
.atp-cr__iconbtn:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; }
.atp-cr__badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--atp-danger);
}
.atp-cr__avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid var(--atp-surface);
    box-shadow: var(--atp-shadow-sm);
}

/* ---- drawer ---- */
.atp-cr__scrim { position: fixed; inset: 0; background: var(--atp-overlay); z-index: 40; }
.atp-cr__drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 86vw);
    background: var(--atp-surface);
    z-index: 41;
    display: flex;
    flex-direction: column;
    padding: calc(var(--atp-space-4) + var(--atp-safe-top)) var(--atp-space-3) calc(var(--atp-space-4) + var(--atp-safe-bottom));
    box-shadow: var(--atp-shadow-lg);
    overflow-y: auto;
}
.atp-cr__drawer-head { display: flex; align-items: center; gap: var(--atp-space-3); padding: 0 var(--atp-space-2) var(--atp-space-4); border-bottom: 1px solid var(--atp-border); margin-bottom: var(--atp-space-3); }
.atp-cr__drawer-name { font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cr__drawer-role { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-cr__drawer a, .atp-cr__drawer button.atp-cr__drawer-item {
    display: flex;
    align-items: center;
    gap: var(--atp-space-3);
    min-height: 48px;
    padding: 0 var(--atp-space-3);
    border-radius: var(--atp-radius-md);
    color: var(--atp-text);
    text-decoration: none;
    font-weight: var(--atp-weight-medium);
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.atp-cr__drawer a:hover, .atp-cr__drawer a.active { background: var(--atp-primary-soft); color: var(--atp-primary); }

/* ---- main + tabs ---- */
.atp-cr__main {
    flex: 1;
    width: 100%;
    padding: var(--cr-gutter) var(--cr-gutter) calc(var(--cr-tabs-h) + var(--atp-space-6) + var(--atp-safe-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--atp-space-3);
}
.atp-cr__main--flush { padding-top: 0; }
.atp-cr__main--notabs { padding-bottom: calc(var(--atp-space-6) + var(--atp-safe-bottom)); }
.atp-cr__tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: var(--cr-tabs-h);
    padding: var(--atp-space-1) var(--atp-space-1) calc(var(--atp-space-1) + var(--atp-safe-bottom));
    background: var(--atp-surface);
    border-top: 1px solid var(--atp-border);
}
.atp-cr__tabs--navy { background: var(--cr-navy); border-top-color: var(--cr-navy); }
.atp-cr__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    font-size: 11px;
    font-weight: var(--atp-weight-medium);
    color: var(--atp-text-muted);
    text-decoration: none;
    border-radius: var(--atp-radius-md);
}
/* Board 20's tab bar is made of buttons rather than links; they must not carry the browser's button chrome. */
button.atp-cr__tab { border: 0; background: transparent; font: inherit; font-size: 11px; font-weight: var(--atp-weight-medium); cursor: pointer; }
.atp-cr__tabs--navy .atp-cr__tab { color: rgba(255,255,255,.72); }
.atp-cr__tab.active { color: var(--atp-primary); }
.atp-cr__tabs--navy .atp-cr__tab.active { color: var(--cr-on-navy); }
.atp-cr__tab svg { width: 22px; height: 22px; }
.atp-cr__tab:focus-visible { outline: 2px solid var(--atp-focus); }

/* ---- typography ---- */
.atp-cr-h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--atp-heading); }
.atp-cr-h2 { margin: 0; font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cr-sub { margin: 2px 0 0; color: var(--atp-text-muted); font-size: var(--atp-text-md); }
.atp-cr-muted { color: var(--atp-text-muted); font-size: var(--atp-text-sm); }
.atp-cr-strong { font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cr-amount { font-size: 28px; font-weight: 700; color: var(--atp-heading); letter-spacing: -.01em; }
.atp-cr-amount--lg { font-size: 34px; }
.atp-cr-mono { font-family: var(--atp-font-mono); }

/* ---- cards & lists ---- */
.atp-cr-card {
    background: var(--atp-surface);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-xl);
    padding: var(--atp-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--atp-space-3);
}
.atp-cr-card--flush { padding: 0; overflow: hidden; }
.atp-cr-card--accent { border-left: 4px solid var(--atp-primary); }
.atp-cr-card--success { border-left: 4px solid var(--atp-success); }
.atp-cr-card--warn { border-left: 4px solid var(--atp-warn); }
.atp-cr-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-2); flex-wrap: wrap; }
/* The head's own title and its trailing note each stay on one line, the way every board sets them. */
.atp-cr-card__head > .atp-cr-h2 { white-space: nowrap; }
.atp-cr-card__head > .atp-cr-muted { white-space: nowrap; }
@media (max-width: 389px) {
    .atp-cr-card__head > .atp-cr-h2 { font-size: var(--atp-text-md); }
}
.atp-cr-grid { display: grid; gap: var(--atp-space-3); grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.atp-cr-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.atp-cr-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }
.atp-cr-row { display: flex; align-items: center; gap: var(--atp-space-2); flex-wrap: wrap; }
.atp-cr-row--between { justify-content: space-between; }
.atp-cr-card.atp-cr-item { flex-direction: row; align-items: center; text-align: left; }
.atp-cr-col { display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-cr-kv { display: grid; grid-template-columns: auto 1fr; gap: var(--atp-space-2) var(--atp-space-3); align-items: start; padding: var(--atp-space-2) 0; border-bottom: 1px solid var(--atp-border); }
.atp-cr-kv:last-child { border-bottom: 0; }
.atp-cr-kv__k { color: var(--atp-text-muted); font-size: var(--atp-text-sm); display: flex; align-items: center; gap: 6px; }
.atp-cr-kv__v { text-align: right; font-weight: var(--atp-weight-medium); color: var(--atp-heading); overflow-wrap: anywhere; }
.atp-cr-list { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-cr-item {
    display: flex;
    align-items: center;
    gap: var(--atp-space-3);
    min-height: 48px;
    padding: var(--atp-space-2) 0;
    border-bottom: 1px solid var(--atp-border);
    color: inherit;
    text-decoration: none;
    background: transparent;
    border-left: 0; border-right: 0; border-top: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.atp-cr-item:last-child { border-bottom: 0; }
.atp-cr-item__body { flex: 1; min-width: 0; }
.atp-cr-item__title { font-weight: var(--atp-weight-medium); color: var(--atp-heading); }
.atp-cr-item__sub { color: var(--atp-text-muted); font-size: var(--atp-text-sm); }
.atp-cr-chev { color: var(--atp-text-subtle); flex: none; }
.atp-cr-ico {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--atp-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--atp-info-soft);
    color: var(--atp-primary);
}
.atp-cr-ico--sm { width: 32px; height: 32px; }
.atp-cr-ico--success { background: var(--atp-success-soft); color: var(--atp-success); }
.atp-cr-ico--warn { background: var(--atp-warn-soft); color: var(--atp-warn); }
.atp-cr-ico--danger { background: var(--atp-danger-soft); color: var(--atp-danger); }
.atp-cr-ico--navy { background: var(--atp-primary); color: var(--atp-primary-contrast); }

/* ---- stats ---- */
.atp-cr-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--atp-border); border-radius: var(--atp-radius-lg); overflow: hidden; }
.atp-cr-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--atp-space-3) var(--atp-space-2); border-right: 1px solid var(--atp-border); text-align: center; }
.atp-cr-stat:last-child { border-right: 0; }
.atp-cr-stat__v { font-size: var(--atp-text-lg); font-weight: 700; color: var(--atp-heading); }
.atp-cr-stat__k { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-cr-stat svg { color: var(--atp-primary); }

/* ---- buttons (44px+ targets, full width on mobile) ---- */
.atp-cr .atp-btn { min-height: 48px; border-radius: var(--atp-radius-btn); font-size: 15px; font-weight: var(--atp-weight-semibold); padding: 0 var(--atp-space-4); }
.atp-cr .atp-btn--lg { min-height: 52px; }
.atp-cr .atp-btn--block, .atp-cr-btn-block { width: 100%; }
.atp-cr-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atp-space-2);
    min-height: 48px;
    padding: 0 var(--atp-space-4);
    border: 1.5px solid var(--atp-primary);
    border-radius: var(--atp-radius-btn);
    background: var(--atp-surface);
    color: var(--atp-primary);
    font: inherit;
    font-size: 15px;
    font-weight: var(--atp-weight-semibold);
    cursor: pointer;
    width: 100%;
    text-decoration: none;
}
.atp-cr-btn-outline:hover { background: var(--atp-primary-soft); }
.atp-cr-btn-outline--danger { border-color: var(--atp-danger); color: var(--atp-danger); }
.atp-cr-btn-outline--danger:hover { background: var(--atp-danger-soft); }
.atp-cr-btn-outline--success { border-color: var(--atp-success); color: var(--atp-success); }
.atp-cr-btn-outline:disabled, .atp-cr .atp-btn:disabled { opacity: .55; cursor: not-allowed; }
.atp-cr-btn-outline:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; }
.atp-cr-btn-success { background: var(--atp-success) !important; border-color: var(--atp-success) !important; color: var(--cr-on-navy) !important; }
.atp-cr-actions { display: grid; gap: var(--atp-space-2); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.atp-cr-actions--stack { grid-template-columns: 1fr; }
.atp-cr-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: atp-cr-spin .8s linear infinite; }
@keyframes atp-cr-spin { to { transform: rotate(360deg); } }

/* ---- chips / pills ---- */
.atp-cr-chips { display: flex; gap: var(--atp-space-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.atp-cr-chips::-webkit-scrollbar { display: none; }
.atp-cr-chip {
    flex: none;
    /* Every chip in the carrier app is a button a driver taps one-handed, in a cab, moving. 36px was under the
       platform minimum on all of them, so the floor lives on the chip itself rather than on a modifier each new
       screen has to remember. Board deltas from raising it are listed in docs/brand/FOLLOWUPS.md. */
    min-height: 44px;
    padding: 0 var(--atp-space-3);
    border-radius: var(--atp-radius-pill);
    border: 1px solid var(--atp-border-strong);
    background: var(--atp-surface);
    color: var(--atp-heading);
    font: inherit;
    font-size: var(--atp-text-base);
    font-weight: var(--atp-weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.atp-cr-chip--on { background: var(--atp-primary); border-color: var(--atp-primary); color: var(--cr-on-navy); }
.atp-cr-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--atp-radius-pill);
    font-size: var(--atp-text-xs);
    font-weight: var(--atp-weight-semibold);
    letter-spacing: .02em;
    background: var(--atp-info-soft);
    color: var(--atp-primary);
    white-space: nowrap;
}
.atp-cr-pill--success { background: var(--atp-success-soft); color: var(--atp-success); }
.atp-cr-pill--warn { background: var(--atp-warn-soft); color: var(--atp-warn); }
.atp-cr-pill--danger { background: var(--atp-danger-soft); color: var(--atp-danger); }
.atp-cr-pill--neutral { background: var(--atp-surface-2); color: var(--atp-text-muted); }
.atp-cr-pill--outline { background: transparent; border: 1px solid currentColor; }
.atp-cr-tabs { display: flex; border-bottom: 1px solid var(--atp-border); }
.atp-cr-tabs button {
    flex: 1;
    min-height: 44px;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: var(--atp-weight-medium);
    color: var(--atp-text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.atp-cr-tabs button.active { color: var(--atp-primary); border-bottom-color: var(--atp-primary); }

/* ---- banners ---- */
.atp-cr-banner {
    display: flex;
    gap: var(--atp-space-3);
    align-items: flex-start;
    padding: var(--atp-space-3) var(--atp-space-4);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-info-soft);
    color: var(--atp-heading);
    border: 1px solid transparent;
}
.atp-cr-banner svg { flex: none; margin-top: 2px; }
.atp-cr-banner--ok { background: var(--atp-success-soft); color: var(--atp-success); }
.atp-cr-banner--warn { background: var(--atp-warn-soft); color: var(--cr-warn-ink); }
.atp-cr-banner--danger { background: var(--atp-danger-soft); color: var(--atp-danger); }
.atp-cr-banner--navy { background: var(--cr-navy); color: var(--cr-on-navy); }
.atp-cr-banner__body { flex: 1; min-width: 0; }
.atp-cr-banner__title { font-weight: var(--atp-weight-semibold); }
.atp-cr-strip { display: flex; justify-content: space-between; align-items: center; padding: var(--atp-space-2) var(--atp-space-4); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-medium); }
.atp-cr-strip--ok { background: var(--atp-success-soft); color: var(--atp-success); }
.atp-cr-strip--warn { background: var(--atp-warn-soft); color: var(--cr-warn-ink); }
.atp-cr-strip--danger { background: var(--atp-danger); color: var(--cr-on-navy); }
.atp-cr-strip--info { background: var(--atp-info-soft); color: var(--atp-primary); }

/* ---- timeline ---- */
.atp-cr-tl { display: flex; flex-direction: column; }
.atp-cr-tl__row { display: grid; grid-template-columns: 52px 20px 1fr; gap: 0 var(--atp-space-2); align-items: start; min-height: 56px; }
/* A row that also carries the access facts gets a fourth column for them, on the right. */
.atp-cr-tl__row:has(> .atp-cr-access) { grid-template-columns: 52px 20px 1fr auto; }
.atp-cr-tl__time { font-size: var(--atp-text-sm); color: var(--atp-text-muted); padding-top: 2px; }
.atp-cr-tl__dot { position: relative; display: flex; justify-content: center; height: 100%; }
.atp-cr-tl__dot::before { content: ""; position: absolute; top: 14px; bottom: -6px; width: 2px; background: var(--atp-border-strong); }
.atp-cr-tl__row:last-child .atp-cr-tl__dot::before { display: none; }
.atp-cr-tl__dot span { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 4px; border-radius: 999px; background: var(--atp-primary); border: 2px solid var(--atp-surface); box-shadow: 0 0 0 1px var(--atp-primary); }
.atp-cr-tl__dot--done span { background: var(--atp-success); box-shadow: 0 0 0 1px var(--atp-success); }
.atp-cr-tl__dot--waypoint span { background: var(--atp-surface); box-shadow: 0 0 0 1px var(--atp-primary); }
.atp-cr-tl__kind { font-size: var(--atp-text-sm); color: var(--atp-success); font-weight: var(--atp-weight-medium); }
.atp-cr-tl__name { font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cr-tl__addr { color: var(--atp-text-muted); font-size: var(--atp-text-sm); }

/* ---- map placeholder (line-art until a provider is approved) ---- */
.atp-cr-map {
    position: relative;
    /* A definite height, not a floor: the absolutely positioned map host inside resolves against it. */
    height: 220px;
    border-radius: var(--atp-radius-xl);
    overflow: hidden;
    background-color: var(--atp-surface-2);
    background-image:
        linear-gradient(var(--atp-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--atp-border) 1px, transparent 1px),
        linear-gradient(var(--atp-border-strong) 1px, transparent 1px),
        linear-gradient(90deg, var(--atp-border-strong) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
    border: 1px solid var(--atp-border);
}
/* Board 01 gives the map about half of everything between the app bar and the bottom tabs, so the height is a share
   of the viewport with a floor, never a fixed box: it grows with the screen at 390, 430 and on a tablet. */
.atp-cr-map--tall { height: max(300px, calc((100dvh - var(--cr-bar-h) - var(--cr-tabs-h)) * 0.5)); }
/* Flush = edge to edge, the way every board draws it. The shell's gutter is cancelled here rather than removed from
   the shell, so only the map bleeds and the cards under it keep their margin. */
.atp-cr-map--flush {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-inline: calc(var(--cr-gutter) * -1);
    /* .atp-map sets width:100%, which would keep the real map inside the gutter; auto lets it stretch past it. */
    width: auto;
}
/* The real provider map draws its own tiles; the line-art grid underneath it must not show through. */
.atp-cr-map--real {
    background-image: none;
    background-color: var(--atp-surface-2);
}
.atp-cr-map__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.atp-cr-map__note {
    position: absolute;
    left: var(--atp-space-3);
    max-width: 62%;
    bottom: var(--atp-space-3);
    padding: var(--atp-space-2) var(--atp-space-3);
    border-radius: var(--atp-radius-md);
    background: color-mix(in srgb, var(--atp-surface) 92%, transparent);
    color: var(--atp-text-muted);
    font-size: var(--atp-text-xs);
    text-align: center;
}
.atp-cr-map__pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--atp-success);
    color: var(--cr-on-navy);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--atp-shadow-md);
}
.atp-cr-map__me {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--atp-primary);
    border: 3px solid var(--cr-on-navy);
    box-shadow: 0 0 0 10px rgba(31,78,158,.15);
}
.atp-cr-map__label {
    position: absolute;
    transform: translate(-50%, -110%);
    padding: 6px 10px;
    border-radius: var(--atp-radius-md);
    background: var(--atp-surface);
    box-shadow: var(--atp-shadow-md);
    font-size: var(--atp-text-xs);
    color: var(--atp-heading);
    white-space: nowrap;
}
.atp-cr-map__label small { display: block; color: var(--atp-text-muted); }
.atp-cr-map__float { position: absolute; top: var(--atp-space-3); padding: 6px 12px; border-radius: var(--atp-radius-md); background: var(--atp-surface); box-shadow: var(--atp-shadow-sm); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-medium); display: flex; align-items: center; gap: 6px; }
.atp-cr-map__float--l { left: var(--atp-space-3); }
.atp-cr-map__float--r { right: var(--atp-space-3); }
.atp-cr-map__online { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: var(--atp-radius-pill); background: var(--atp-surface); box-shadow: var(--atp-shadow-sm); color: var(--atp-success); font-weight: var(--atp-weight-semibold); font-size: var(--atp-text-sm); display: flex; align-items: center; gap: 6px; }
.atp-cr-map__online::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--atp-success); }
.atp-cr-map__ai { position: absolute; right: var(--atp-space-3); bottom: calc(var(--atp-space-6) + var(--atp-space-2)); z-index: 2; }
/* Both AI Support affordances are anchors, so `.atp-cr a { color: var(--atp-link) }` (0,1,1) would win over a
   bare class and print link blue on the navy pill and the navy bottom bar. Anchor-qualified so the on-navy ink
   wins in every state; the light variant keeps the primary ink on white. */
.atp-cr a.atp-cr-ai-fab, .atp-cr a.atp-cr-ai-fab:hover, .atp-cr a.atp-cr-ai-fab:visited,
.atp-cr a.atp-cr-ai, .atp-cr a.atp-cr-ai:hover, .atp-cr a.atp-cr-ai:visited { color: var(--cr-on-navy); }
.atp-cr a.atp-cr-ai--light, .atp-cr a.atp-cr-ai--light:hover, .atp-cr a.atp-cr-ai--light:visited { color: var(--atp-primary); }
.atp-cr-ai-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--atp-radius-pill);
    background: var(--atp-primary);
    color: var(--cr-on-navy);
    text-decoration: none;
    font-weight: var(--atp-weight-semibold);
    font-size: var(--atp-text-sm);
    box-shadow: var(--atp-shadow-md);
    border: 0;
    cursor: pointer;
}

/* ---- AI support bottom bar ---- */
.atp-cr-ai {
    display: flex;
    align-items: center;
    gap: var(--atp-space-3);
    padding: var(--atp-space-3) var(--atp-space-4);
    border-radius: var(--atp-radius-xl);
    background: var(--cr-navy);
    color: var(--cr-on-navy);
    text-decoration: none;
    min-height: 56px;
}
.atp-cr-ai__title { font-weight: var(--atp-weight-semibold); }
.atp-cr-ai__sub { font-size: var(--atp-text-sm); opacity: .8; }
.atp-cr-ai--light { background: var(--atp-surface); color: var(--atp-primary); border: 1.5px solid var(--atp-border-strong); justify-content: center; font-weight: var(--atp-weight-semibold); }

/* ---- forms ---- */
.atp-cr .atp-field__label { font-size: var(--atp-text-sm); }
.atp-cr .atp-input, .atp-cr input.atp-input, .atp-cr textarea.atp-input, .atp-cr select.atp-input { min-height: 46px; font-size: 15px; width: 100%; }
.atp-cr textarea.atp-input { min-height: 96px; padding-top: 10px; resize: vertical; }
.atp-cr-count { text-align: right; font-size: var(--atp-text-xs); color: var(--atp-text-subtle); }
.atp-cr-stepper { display: inline-flex; align-items: center; gap: var(--atp-space-2); }
/* The parcel-count stepper is two buttons a driver taps while counting boxes, so they are full targets. */
.atp-cr-stepper button { width: 44px; height: 44px; border-radius: var(--atp-radius-md); border: 1.5px solid var(--atp-primary); background: var(--atp-surface); color: var(--atp-primary); font-size: 18px; cursor: pointer; }
.atp-cr-stepper output { min-width: 28px; text-align: center; font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cr-step { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--atp-space-3); align-items: center; padding: var(--atp-space-3) 0; border-bottom: 1px solid var(--atp-border); }
.atp-cr-step:last-child { border-bottom: 0; }
.atp-cr-step__n { width: 26px; height: 26px; border-radius: 999px; background: var(--atp-primary); color: var(--atp-primary-contrast); font-size: var(--atp-text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.atp-cr-check { color: var(--atp-success); }
.atp-cr-proof-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--atp-space-3); }
.atp-cr-proof-tile { display: flex; flex-direction: column; gap: 6px; padding: var(--atp-space-3); border: 1px solid var(--atp-border); border-radius: var(--atp-radius-lg); background: var(--atp-surface); position: relative; min-height: 96px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.atp-cr-proof-tile__ok { position: absolute; right: 10px; bottom: 10px; color: var(--atp-success); }
.atp-cr-thumbs { display: flex; gap: var(--atp-space-2); flex-wrap: wrap; }
.atp-cr-thumb { width: 72px; height: 72px; border-radius: var(--atp-radius-md); object-fit: cover; border: 1px solid var(--atp-border); }
.atp-cr-thumb-wrap { position: relative; }
.atp-cr-thumb-x { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 999px; border: 0; background: var(--atp-danger); color: var(--cr-on-navy); cursor: pointer; font-size: 12px; }
.atp-cr-sign { width: 100%; height: 160px; border: 1.5px dashed var(--atp-border-strong); border-radius: var(--atp-radius-lg); background: var(--atp-surface); touch-action: none; display: block; }
.atp-cr-progress { height: 6px; border-radius: 999px; background: var(--atp-surface-3); overflow: hidden; }
.atp-cr-progress > span { display: block; height: 100%; background: var(--atp-primary); transition: width var(--atp-dur) var(--atp-ease); }
.atp-cr-file { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.atp-cr-upload { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--atp-space-4); border: 1.5px dashed var(--atp-primary); border-radius: var(--atp-radius-lg); color: var(--atp-primary); text-align: center; background: var(--atp-surface); }
.atp-cr-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr)); gap: var(--atp-space-2); }
.atp-cr-reason { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 76px; padding: var(--atp-space-2); border: 1px solid var(--atp-border); border-radius: var(--atp-radius-lg); background: var(--atp-surface); color: var(--atp-heading); font: inherit; font-size: var(--atp-text-sm); text-align: center; cursor: pointer; }
.atp-cr-reason--on { border-color: var(--atp-primary); background: var(--atp-primary-soft); }
/* Board 06 screen 21: "Alt motiv" spans the row under the 3x2 grid. */
.atp-cr-reason--wide { flex-direction: row; justify-content: center; gap: 10px; min-height: 52px; width: 100%; }
.atp-cr-toggle { display: inline-flex; align-items: center; gap: 8px; }

/* ---- board 06 screen 24: the contextual guide is a DARK coach-mark overlay, not a light page ----
   The app behind it is dimmed and the numbered badges point at the elements the step is about. Ink, badges and
   the mock cards all take the on-navy ink so nothing borrows the light-page colours. */
.atp-cr-coach {
    background: var(--cr-navy);
    color: var(--cr-on-navy);
    border-radius: var(--atp-radius-xl);
    padding: var(--atp-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--atp-space-4);
}
.atp-cr-coach .atp-cr-muted, .atp-cr-coach .atp-cr-stat__k { color: rgb(255 255 255 / .72); }
.atp-cr-coach .atp-cr-strong, .atp-cr-coach .atp-cr-stat__v { color: var(--cr-on-navy); }
.atp-cr-coach .atp-cr-card, .atp-cr-coach .atp-cr-card--flush {
    background: rgb(255 255 255 / .08);
    border-color: rgb(255 255 255 / .16);
    color: var(--cr-on-navy);
}
.atp-cr-coach .atp-cr-pill--outline { border-color: rgb(255 255 255 / .5); color: var(--cr-on-navy); }
.atp-cr-coach .atp-cr-mono { color: var(--cr-on-navy); }
.atp-cr-coach .atp-cr-dots span { background: rgb(255 255 255 / .3); }
.atp-cr-coach .atp-cr-dots span.on { background: var(--cr-on-navy); }
/* the dotted connector the board draws between the "GO ONLINE" pill and its numbered badge */
.atp-cr-coach__link { flex: 1; height: 0; border-top: 2px dotted rgb(255 255 255 / .55); margin: 0 10px; }
.atp-cr-coach__legend { display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-cr-coach__legend .atp-cr-step__n { background: var(--cr-on-navy); color: var(--cr-navy); }

/* board 19 screen 02: the mandatory waiting time, as the big countdown box the board draws */
.atp-cr-wait {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--atp-space-3);
    padding: var(--atp-space-4);
    border: 1.5px solid var(--atp-primary);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-primary-soft);
    color: var(--atp-primary);
    text-align: center;
}
.atp-cr-wait__v { font-size: 30px; font-weight: var(--atp-weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.atp-cr-wait__k { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }

/* Board 13 prints the access facts (Etaj, Lift, Ajutor încărcare) to the RIGHT of the pickup line, not under it. */
.atp-cr-access { margin-left: auto; text-align: right; font-size: var(--atp-text-sm); white-space: nowrap; flex: none; }

/* ---- sheet / modal ---- */
.atp-cr-sheet-scrim { position: fixed; inset: 0; z-index: 50; background: var(--atp-overlay); display: flex; align-items: flex-end; justify-content: center; padding: var(--atp-space-3); }
.atp-cr-sheet {
    width: 100%;
    background: var(--atp-surface);
    border-radius: var(--atp-radius-xl);
    padding: var(--atp-space-5) var(--atp-space-4) calc(var(--atp-space-4) + var(--atp-safe-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--atp-space-3);
    box-shadow: var(--atp-shadow-lg);
    max-height: 92dvh;
    overflow-y: auto;
}
.atp-cr-sheet__icon { align-self: center; width: 56px; height: 56px; border-radius: 999px; background: var(--atp-success-soft); color: var(--atp-success); display: flex; align-items: center; justify-content: center; }
.atp-cr-sheet__title { text-align: center; font-size: var(--atp-text-xl); font-weight: 700; color: var(--atp-heading); margin: 0; }
.atp-cr-sheet__body { text-align: center; color: var(--atp-text-muted); }
.atp-cr-receipt { border: 1px dashed var(--atp-border-strong); border-radius: var(--atp-radius-lg); padding: var(--atp-space-3); display: flex; flex-direction: column; gap: 6px; }
.atp-cr-receipt__title { text-align: center; font-size: var(--atp-text-xs); letter-spacing: .08em; color: var(--atp-text-muted); }
.atp-cr-receipt__logo { display: flex; justify-content: center; padding: 6px 0; border-top: 1px dashed var(--atp-border-strong); border-bottom: 1px dashed var(--atp-border-strong); }
.atp-cr-receipt__logo img { height: 28px; width: auto; }
@media (min-width: 640px) {
    .atp-cr-sheet-scrim { align-items: center; }
    .atp-cr-sheet { width: min(100%, 560px); border-radius: var(--atp-radius-xl); }
}

/* ---- skeleton / empty ---- */
.atp-cr-skel { display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-cr-skel span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--atp-surface-2), var(--atp-surface-3), var(--atp-surface-2)); background-size: 200% 100%; animation: atp-cr-shimmer 1.2s infinite; }
.atp-cr-skel span:nth-child(2) { width: 70%; }
.atp-cr-skel span:nth-child(3) { width: 45%; }
@keyframes atp-cr-shimmer { to { background-position: -200% 0; } }
.atp-cr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--atp-space-2); padding: var(--atp-space-6) var(--atp-space-4); }
.atp-cr-empty svg { color: var(--atp-primary); }
.atp-cr-empty__title { font-weight: var(--atp-weight-semibold); color: var(--atp-heading); font-size: var(--atp-text-lg); }
.atp-cr-empty__body { color: var(--atp-text-muted); }
.atp-cr-empty .atp-cr-btn-outline { width: auto; min-width: 200px; margin-top: var(--atp-space-2); }

/* ---- misc ---- */
.atp-cr-hero { display: flex; align-items: center; gap: var(--atp-space-4); }
.atp-cr-hero img { width: 84px; height: 84px; border-radius: 999px; object-fit: cover; }
.atp-cr-vehicle-img { width: 112px; height: auto; flex: none; }

/* ---- brand block in the app bar: the ATP mark plus the carrier app's own name ---- */
.atp-cr__bar-brand { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.atp-cr__bar-brand strong { font-size: var(--atp-text-sm); font-weight: 700; letter-spacing: .04em; color: var(--atp-heading); text-transform: uppercase; }
.atp-cr__bar-brand small { font-size: 9px; letter-spacing: .06em; color: var(--atp-text-muted); text-transform: uppercase; white-space: nowrap; }
.atp-cr__bar-brand strong { white-space: nowrap; }

/* ---- board 21: a blocked state, one explanation, exactly one action ---- */
.atp-cr-block { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--atp-space-3); align-items: start; width: 100%; }
.atp-cr-block > .atp-cr-btn-outline, .atp-cr-block > .atp-cr-muted { grid-column: 1 / -1; }
.atp-cr-block__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.atp-cr-block--warn { border-color: var(--atp-warn); }
.atp-cr-block--danger { border-color: var(--atp-danger); }

/* ---- offer card: boards 08A / 08B (the goods next to the vehicle, fluid at 390 and 430) ---- */
.atp-cr-kvs { display: flex; flex-direction: column; width: 100%; }
/* Boards 08A / 08B: the goods table keeps whole words at 390 as well as 430. The base rule breaks anywhere, which
   also shrinks the value column to a single character next to a long label ("Echipament necesar"); here the label
   may wrap and the value breaks only between words. */
.atp-cr-kvs .atp-cr-kv { grid-template-columns: minmax(0, 45%) minmax(0, 1fr); }
/* The label is an icon + text flex row: without this it cannot wrap, so a long one ("Echipament necesar") eats the
   value column and the value breaks mid-word at 390. */
.atp-cr-kvs .atp-cr-kv__k { flex-wrap: wrap; overflow-wrap: break-word; }
.atp-cr-kvs .atp-cr-kv__v { overflow-wrap: break-word; }
.atp-cr-offer__cargo {
    display: grid;
    /* Fluid: the picture is a share of the card, never a fixed slab that starves the goods table at 390. */
    grid-template-columns: minmax(0, clamp(64px, 24%, 96px)) minmax(0, 1fr);
    gap: var(--atp-space-3);
    align-items: start;
    width: 100%;
}
.atp-cr-offer__vehicle { width: 100%; max-width: 96px; height: auto; }
/* Narrow phones stack the picture above the goods rather than squeezing both. */
@media (max-width: 359px) {
    .atp-cr-offer__cargo { grid-template-columns: minmax(0, 1fr); }
    .atp-cr-offer__vehicle { max-width: 120px; }
}
.atp-cr-offer .atp-cr-stat__v { font-size: var(--atp-text-md); }
.atp-cr-offer__more { align-self: center; font-size: var(--atp-text-sm); color: var(--atp-primary); text-decoration: underline; }
.atp-cr-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: var(--atp-space-2); width: 100%; }
.atp-cr-photos img { width: 100%; height: 96px; object-fit: cover; border-radius: var(--atp-radius-md); border: 1px solid var(--atp-border); }
.atp-cr-photo-pending { display: flex; align-items: center; justify-content: center; width: 100%; height: 96px; border-radius: var(--atp-radius-md); border: 1px dashed var(--atp-border); background: var(--atp-surface-2); }
.atp-cr-eligible { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)); gap: var(--atp-space-2); width: 100%; }
.atp-cr-eligible__v { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.atp-cr-eligible__v img { width: 100%; max-width: 72px; height: auto; }
.atp-cr-eligible__v span { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-cr-online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--atp-success); }
.atp-cr-online-dot--off { background: var(--atp-text-subtle); }
.atp-cr-online-dot--unknown { background: var(--atp-warn); }
.atp-cr-countdown { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--atp-radius-md); border: 1px solid var(--atp-border); background: var(--atp-surface); font-family: var(--atp-font-mono); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cr-countdown--urgent { color: var(--atp-danger); border-color: var(--atp-danger); }
/* Boards 08, 09, 10 and 13 draw the offer's time left as a ring with the seconds inside it. The ring empties as the
   offer runs out; the arc is a conic gradient so there is no image and no script behind it. */
.atp-cr-ring {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: conic-gradient(var(--atp-primary) var(--cr-ring-fill, 100%), var(--atp-surface-3) 0);
    color: var(--atp-heading);
    font-weight: var(--atp-weight-bold);
    line-height: 1;
}
.atp-cr-ring::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 999px;
    background: var(--atp-surface);
}
.atp-cr-ring__v { position: relative; font-size: 17px; }
.atp-cr-ring__v--wide { font-size: 13px; font-family: var(--atp-font-mono); }
.atp-cr-ring__u { position: relative; font-size: 10px; font-weight: var(--atp-weight-medium); color: var(--atp-text-muted); }
.atp-cr-ring--urgent { background: conic-gradient(var(--atp-danger) var(--cr-ring-fill, 100%), var(--atp-surface-3) 0); }
.atp-cr-ring--urgent .atp-cr-ring__v { color: var(--atp-danger); }
.atp-cr-timer { font-size: 30px; font-weight: 700; font-family: var(--atp-font-mono); color: var(--atp-heading); }
.atp-cr-avatar-initials { width: 44px; height: 44px; border-radius: 999px; background: var(--atp-info-soft); color: var(--atp-primary); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.atp-cr-dots { display: flex; gap: 6px; justify-content: center; }
.atp-cr-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--atp-border-strong); }
.atp-cr-dots span.on { background: var(--atp-primary); }
.atp-cr-callout { display: flex; gap: var(--atp-space-2); align-items: flex-start; font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-cr-chat { display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-cr-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; background: var(--atp-primary); color: var(--atp-primary-contrast); align-self: flex-start; font-size: var(--atp-text-md); }
.atp-cr-msg--me { background: var(--atp-surface-2); color: var(--atp-text); align-self: flex-end; }
.atp-cr-msg__t { display: block; font-size: 10px; opacity: .7; margin-top: 4px; }
.atp-cr-chat-input { display: flex; gap: var(--atp-space-2); align-items: center; }
.atp-cr-chat-input input { flex: 1; }
.atp-cr-wide { display: grid; gap: var(--atp-space-3); grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); align-items: start; }
.atp-cr-flag { font-size: 16px; }
.atp-cr-lock { color: var(--atp-text-subtle); }
.atp-cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Carrier brief v1.7 boards: status strip, earnings (board 20), navigation (14/17), setup wizards (11/12).
   ========================================================================== */

/* Boards 14-21: the state strip under the app bar. */
.atp-cr-online-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--atp-space-2);
    min-height: 32px;
    padding: var(--atp-space-1) var(--atp-space-3);
    background: var(--atp-surface);
    border-bottom: 1px solid var(--atp-border);
    font-size: var(--atp-text-sm);
    font-weight: var(--atp-weight-semibold);
    color: var(--atp-heading);
}
.atp-cr-online-strip--degraded { color: var(--cr-warn-ink); background: var(--atp-warn-soft); border-bottom-color: var(--atp-warn-soft); }

/* Board 20, screen 01: the three headline tiles (amount left, icon chip right). */
.atp-cr-earn-tile { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--atp-space-3); }
.atp-cr-earn-tile .atp-cr-ico { flex: none; }
/* Board 20: a recent-activity row is a full-width button that opens the trip's money. */
.atp-cr-earn-row {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 56px;
}
.atp-cr-earn-row:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: -2px; }
/* Board 20 screen 01 keeps the amount and its chevron on ONE line at the right; without a nowrap the chevron
   dropped under the amount at 390. */
.atp-cr-earn-row .atp-cr-kv__v { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Board 20, screens 02 and 03: the bold total under the money lines. */
.atp-cr-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--atp-space-3);
    padding-top: var(--atp-space-3);
    border-top: 1px solid var(--atp-border);
}
.atp-cr-total .atp-cr-amount { font-size: 22px; }
/* Money that reduces a balance (commission, VAT) is drawn in the danger ink the board uses. */
.atp-cr-neg { color: var(--atp-danger); font-weight: var(--atp-weight-semibold); }
/* Board 20, screen 03: the period picker row (calendar glyph + select). */
.atp-cr-period {
    display: flex;
    align-items: center;
    gap: var(--atp-space-2);
    min-height: 48px;
    padding: 0 var(--atp-space-3);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-md);
    background: var(--atp-surface);
}
.atp-cr-period select { border: 0; background: transparent; flex: 1; min-height: 44px; }
/* Inline text button (Vezi toate, back inside a tab). */
.atp-cr-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--atp-space-1);
    border: 0;
    background: transparent;
    color: var(--atp-link);
    font: inherit;
    font-weight: var(--atp-weight-medium);
    cursor: pointer;
}
.atp-cr-link:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; }
/* A banner that is a button (board 20 "Documente necesare", board 17 route deviation). */
button.atp-cr-banner { width: 100%; text-align: left; font: inherit; cursor: pointer; }

/* Board 11: the signup brand block above the wizard. */
.atp-cr-signup-brand { display: flex; justify-content: center; padding: var(--atp-space-5) 0 var(--atp-space-3); }
.atp-cr-signup-brand img { height: 56px; width: auto; }
/* Board 11, screen 01: the two account-type choices. */
.atp-cr-choice {
    width: 100%;
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 72px;
}
.atp-cr-choice--on { border-color: var(--atp-primary); background: var(--atp-primary-soft); }
.atp-cr-choice:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; }
/* Boards 11 and 12: a document / upload row. */
.atp-cr-doc-row {
    display: flex;
    align-items: center;
    gap: var(--atp-space-3);
    min-height: 64px;
    padding: var(--atp-space-2) 0;
    border-bottom: 1px solid var(--atp-border);
}
.atp-cr-doc-row:last-of-type { border-bottom: 0; }
.atp-cr-doc-row--rejected {
    border: 1px solid var(--atp-danger);
    border-radius: var(--atp-radius-md);
    background: var(--atp-danger-soft);
    padding: var(--atp-space-3);
}
/* Board 12, screen 01: the six vehicle tiles, two per row, fluid. */
.atp-cr-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--atp-space-3);
    width: 100%;
}
.atp-cr-vehicle-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--atp-space-2);
    min-height: 116px;
    padding: var(--atp-space-3);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-surface);
    color: var(--atp-heading);
    font: inherit;
    font-weight: var(--atp-weight-medium);
    cursor: pointer;
}
.atp-cr-vehicle-tile img { height: 48px; width: auto; object-fit: contain; }
.atp-cr-vehicle-tile--on { border: 2px solid var(--atp-primary); box-shadow: var(--atp-shadow-sm); }
.atp-cr-vehicle-tile:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; }
/* Board 12, screen 04: the Online status switch. */
.atp-cr-switch { display: inline-flex; align-items: center; gap: var(--atp-space-2); min-height: 44px; cursor: pointer; }
.atp-cr-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.atp-cr-switch__track {
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: var(--atp-border-strong);
    display: inline-flex;
    align-items: center;
    padding: 3px;
    transition: background .15s ease;
}
.atp-cr-switch__knob { width: 24px; height: 24px; border-radius: 999px; background: var(--atp-surface); box-shadow: var(--atp-shadow-sm); transition: transform .15s ease; }
.atp-cr-switch input:checked + .atp-cr-switch__track { background: var(--atp-success); }
.atp-cr-switch input:checked + .atp-cr-switch__track .atp-cr-switch__knob { transform: translateX(22px); }
.atp-cr-switch input:focus-visible + .atp-cr-switch__track { outline: 2px solid var(--atp-focus); outline-offset: 2px; }

/* Board 14 screen 02: the next manoeuvre, on the map. */
.atp-cr-map__turn {
    position: absolute;
    top: var(--atp-space-3);
    left: var(--atp-space-3);
    right: var(--atp-space-3);
    display: flex;
    align-items: center;
    gap: var(--atp-space-3);
    padding: var(--atp-space-3);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-primary);
    color: var(--cr-on-navy);
    box-shadow: var(--atp-shadow-md);
    font-size: var(--atp-text-md);
}
.atp-cr-map__turn strong { font-size: 18px; }
.atp-cr-map__turn small { opacity: .9; }
/* Board 17: the "Detalii cursă" handle at the bottom of the active run. */
.atp-cr-disclosure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--atp-space-2);
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-surface);
    color: var(--atp-heading);
    font: inherit;
    font-weight: var(--atp-weight-semibold);
    cursor: pointer;
}
.atp-cr-disclosure:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; }
/* A disabled contact action keeps the board's two-button row without pretending it can dial. */
span.atp-cr-btn-outline[aria-disabled="true"] { opacity: .55; justify-content: center; }

/* Board 10 screen 03: the expanded offer alert over the app. */
.atp-cr-alert-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--atp-space-6) + var(--atp-safe-top)) var(--atp-space-3) var(--atp-space-3);
    background: var(--atp-overlay);
    overflow-y: auto;
}
.atp-cr-alert {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--atp-space-3);
    padding: var(--atp-space-4);
    border-radius: var(--atp-radius-xl);
    background: var(--atp-surface);
    box-shadow: var(--atp-shadow-lg);
}
.atp-cr-alert__close {
    position: absolute;
    top: calc(var(--atp-space-4) * -1 - 12px);
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--atp-surface);
    color: var(--atp-heading);
    cursor: pointer;
}
.atp-cr-alert__head { display: flex; align-items: center; gap: var(--atp-space-2); }
.atp-cr-alert__head img { height: 22px; width: auto; }
.atp-cr-alert__app { flex: 1; font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--atp-heading); }
.atp-cr-alert__title { font-size: 18px; font-weight: 700; color: var(--atp-heading); }
.atp-cr-alert__lines { display: grid; gap: 2px; color: var(--atp-text); }
.atp-cr-alert__trust { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: var(--atp-space-2); border-top: 1px solid var(--atp-border); color: var(--atp-text-muted); font-size: var(--atp-text-xs); }

/* Board 00 screen 03: the six code boxes, fluid so they fill the row at 390 and 430. */
.atp-cr-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--atp-space-2); width: 100%; }
.atp-cr-otp__box {
    width: 100%;
    min-height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--atp-heading);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-md);
    background: var(--atp-surface);
}
.atp-cr-otp__box:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; border-color: var(--atp-primary); }

/* === carrier v1.7 remediation pack 1: styles for the board screens built in that pack === */
/* Board 14 screen 02 draws round controls on the right edge of the live map. The one that is built is the recentre
   control; it is a real 48px touch target so a driver can hit it while the vehicle moves. */
.atp-cr-map__btn {
    position: absolute;
    right: var(--atp-space-3);
    bottom: var(--atp-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--atp-border);
    border-radius: 50%;
    background: var(--atp-surface);
    color: var(--atp-primary);
    box-shadow: var(--atp-shadow-sm);
    cursor: pointer;
}
.atp-cr-map__btn[aria-pressed="true"] {
    background: var(--atp-primary);
    border-color: var(--atp-primary);
    color: var(--cr-on-navy);
}
.atp-cr-map__btn:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; }

/* Board 14 screen 01's pickup block and its ring sit in the same card as board 02 screen 05's rows, so the card
   stays fluid: the head wraps rather than pushing the ring off the right edge on a 390 screen. */
.atp-cr-card__head > [data-testid="trip-accepted-countdown"] { display: inline-flex; flex: 0 0 auto; }
/* ANCHOR-PACK-1 */

/* === carrier v1.7 remediation pack 2: styles for the board screens built in that pack === */
/* ---- the app's own camera: board 15 screen 02 full bleed, and the same viewfinder in the shell on 16/18/19 ---- */
.atp-cr-vf {
    display: flex;
    flex-direction: column;
    gap: var(--atp-space-3);
    width: 100%;
}
.atp-cr-vf--full {
    position: fixed;
    inset: 0;
    z-index: 60;
    gap: var(--atp-space-4);
    padding: calc(var(--atp-safe-top) + var(--atp-space-4)) var(--atp-space-4) calc(var(--atp-safe-bottom) + var(--atp-space-4));
    background: var(--cr-vf-ink);
    color: var(--cr-on-navy);
    overflow-y: auto;
}
.atp-cr-vf { --cr-vf-ink: var(--atp-camera-ink); --cr-vf-chrome: rgba(11, 13, 17, .62); }
.atp-cr-vf__notice, .atp-cr-vf__card { width: 100%; }
.atp-cr-vf__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--atp-space-3);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-info-soft);
}
.atp-cr-vf--full .atp-cr-vf__card { background: var(--cr-vf-chrome); border-color: transparent; color: var(--cr-on-navy); }
.atp-cr-vf--full .atp-cr-vf__card .atp-cr-muted { color: var(--cr-on-navy); opacity: .8; }
/* On the full bleed camera every word sits on near black, so the card's own ink is overridden rather than
   inherited: the heading ink is navy and was unreadable against it. */
.atp-cr-vf--full .atp-cr-vf__card .atp-cr-strong,
.atp-cr-vf--full .atp-cr-vf__card .atp-cr-h2 { color: var(--cr-on-navy); }
.atp-cr-vf__pill {
    align-self: center;
    max-width: 100%;
    padding: 10px var(--atp-space-4);
    border-radius: var(--atp-radius-pill);
    background: var(--atp-primary);
    color: var(--cr-on-navy);
    font-size: var(--atp-text-md);
    font-weight: var(--atp-weight-semibold);
    text-align: center;
}
.atp-cr-vf__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--atp-radius-lg);
    background: var(--cr-vf-ink);
    overflow: hidden;
}
.atp-cr-vf--full .atp-cr-vf__frame { border-radius: var(--atp-radius-md); }
.atp-cr-vf__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.atp-cr-vf__chrome {
    position: absolute;
    top: var(--atp-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--atp-radius-pill);
    background: var(--cr-vf-chrome);
    color: var(--cr-on-navy);
    cursor: pointer;
}
.atp-cr-vf__chrome--flash { left: var(--atp-space-3); }
.atp-cr-vf__chrome--close { right: var(--atp-space-3); }
.atp-cr-vf__chrome--on { background: var(--atp-warn); color: var(--cr-vf-ink); }
.atp-cr-vf__chrome:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; }
.atp-cr-vf__zoom {
    position: absolute;
    left: 50%;
    bottom: var(--atp-space-3);
    transform: translateX(-50%);
    min-width: 44px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--atp-space-3);
    border-radius: var(--atp-radius-pill);
    background: var(--cr-vf-chrome);
    color: var(--cr-on-navy);
    font-size: var(--atp-text-sm);
    font-weight: var(--atp-weight-semibold);
}
/* The board's order is gallery, shutter, flip. The shutter is first in the DOM so it is the first control the
   keyboard reaches; the visual order is restored here, never by reordering the markup. */
.atp-cr-vf__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--atp-space-6);
    width: 100%;
    min-height: 76px;
}
.atp-cr-vf__shutter { order: 2; }
.atp-cr-vf__side--gallery { order: 1; }
.atp-cr-vf__side--flip { order: 3; }
.atp-cr-vf__side { display: flex; align-items: center; justify-content: center; }
.atp-cr-vf__shutter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    padding: 0;
    border: 4px solid var(--atp-surface);
    border-radius: var(--atp-radius-pill);
    background: var(--atp-primary);
    box-shadow: 0 0 0 3px var(--atp-primary);
    cursor: pointer;
    overflow: hidden;
}
.atp-cr-vf--full .atp-cr-vf__shutter-btn { background: var(--atp-surface); border-color: var(--cr-vf-ink); box-shadow: 0 0 0 3px var(--atp-surface); }
.atp-cr-vf__shutter-btn:disabled, .atp-cr-vf__shutter-btn:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.atp-cr-vf__shutter-btn:focus-within, .atp-cr-vf__shutter-btn:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 4px; }
.atp-cr-vf__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-surface-2);
    color: var(--atp-text);
    cursor: pointer;
    overflow: hidden;
}
.atp-cr-vf--full .atp-cr-vf__icon { background: var(--cr-vf-chrome); border-color: transparent; color: var(--cr-on-navy); }
.atp-cr-vf__icon:disabled { opacity: .5; cursor: not-allowed; }
.atp-cr-vf__icon:focus-within, .atp-cr-vf__icon:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; }
.atp-cr-vf__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.atp-cr-vf__note { margin: 0; font-size: var(--atp-text-sm); color: var(--atp-text-muted); text-align: center; }
.atp-cr-vf--full .atp-cr-vf__note { color: var(--cr-on-navy); opacity: .8; }
.atp-cr-vf__gps {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atp-space-2);
    align-self: center;
    min-height: 32px;
    padding: 0 var(--atp-space-4);
    border-radius: var(--atp-radius-pill);
    font-size: var(--atp-text-sm);
    font-weight: var(--atp-weight-medium);
    color: var(--atp-success);
}
.atp-cr-vf__gps[data-gps="off"] { color: var(--atp-text-muted); }
.atp-cr-vf--full .atp-cr-vf__gps { background: var(--cr-vf-chrome); }
.atp-cr-vf--full .atp-cr-vf__gps[data-gps="off"] { color: var(--cr-on-navy); opacity: .75; }
.atp-cr-vf__dot { width: 9px; height: 9px; border-radius: var(--atp-radius-pill); background: var(--atp-success); }
.atp-cr-vf__line { display: flex; align-items: center; gap: var(--atp-space-2); font-size: var(--atp-text-md); color: var(--atp-text); }
.atp-cr-vf__strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--atp-space-2);
    width: 100%;
    padding: var(--atp-space-3);
    border-radius: var(--atp-radius-lg);
    background: var(--cr-vf-chrome);
}
.atp-cr-vf__cell { display: flex; align-items: center; gap: var(--atp-space-2); }
.atp-cr-vf__cell > span { display: flex; flex-direction: column; }
.atp-cr-vf__k { font-size: var(--atp-text-sm); opacity: .75; }
.atp-cr-vf__v { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); }
.atp-cr-vf__status { width: 100%; }
.atp-cr-vf--full .atp-cr-vf__status .atp-cr-muted { color: var(--cr-on-navy); }

/* ---- board 15 screen 03 "Verifica fotografia", reused after every capture ---- */
.atp-cr-review__shot { width: 100%; max-height: 46vh; object-fit: cover; border-radius: var(--atp-radius-lg); border: 1px solid var(--atp-border); }
.atp-cr-review__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--atp-space-3);
    width: 100%;
    padding: var(--atp-space-3);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-surface-2);
}
.atp-cr-review__row { display: flex; align-items: center; gap: var(--atp-space-2); color: var(--atp-primary); }
.atp-cr-review__row > span { display: flex; flex-direction: column; color: var(--atp-text); }
.atp-cr-review__k { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-cr-review__v { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); }
.atp-cr-proof__done .atp-cr-proof__shot, .atp-cr-proof__shot { width: 100%; max-height: 46vh; object-fit: cover; border-radius: var(--atp-radius-lg); border: 1px solid var(--atp-border); }

/* ---- board 18 screen 03 "Confirmare destinatar" ---- */
.atp-cr-pod__methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: var(--atp-space-3);
    align-items: end;
    width: 100%;
}
.atp-cr-pod__or { align-self: center; justify-self: center; font-size: var(--atp-text-md); color: var(--atp-text-muted); }
.atp-cr-pod__pin { display: flex; gap: var(--atp-space-2); width: 100%; }
.atp-cr-pod__digit {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    text-align: center;
    font-size: 22px;
    font-weight: var(--atp-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--atp-heading);
    border: 1px solid var(--atp-border-strong);
    border-radius: var(--atp-radius-md);
    background: var(--atp-surface);
}
.atp-cr-pod__digit:focus-visible { outline: 2px solid var(--atp-focus); outline-offset: 2px; border-color: var(--atp-primary); }
.atp-cr-pod__shot { position: relative; width: 100%; }
.atp-cr-pod__shot img { width: 100%; max-height: 34vh; object-fit: cover; border-radius: var(--atp-radius-lg); border: 1px solid var(--atp-border); }
.atp-cr-pod__ok { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--atp-radius-pill); background: var(--atp-success); color: var(--atp-primary-contrast); }
/* ---- board 19 screen 04 "Decizia platformei" ---- */
.atp-cr-decis__label { font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); color: var(--atp-text-muted); }
.atp-cr-decis {
    display: flex;
    gap: var(--atp-space-3);
    align-items: flex-start;
    width: 100%;
    padding: var(--atp-space-4);
    border: 1px solid var(--atp-warn);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-warn-soft);
    color: var(--cr-warn-ink);
}
.atp-cr-decis__title { font-weight: var(--atp-weight-semibold); color: var(--cr-warn-ink); }
.atp-cr-decis__body { color: var(--cr-warn-ink); }
.atp-cr-decis__next { display: flex; flex-direction: column; gap: 2px; width: 100%; }
/* ANCHOR-PACK-2 */

/* === carrier v1.7 remediation pack 3: styles for the board screens built in that pack === */
/* Boards 08 and 09: the two stops under the goods. The board gives the label a narrow column and prints the place
   NAME over its street address, so the value column keeps the whole address on one reading. */
.atp-cr-offer__stops .atp-cr-kv { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
.atp-cr-offer__stops .atp-cr-kv__k { color: var(--atp-primary); align-items: flex-start; }
.atp-cr-offer__stops .atp-cr-kv__v { display: flex; flex-direction: column; gap: 2px; }
.atp-cr-offer__addr { color: var(--atp-text-muted); font-size: var(--atp-text-sm); font-weight: 400; }

/* Boards 08 and 09 print the label OVER the figure in the three-number strip, and the earning in green. The order
   in the markup is the order on screen, so nothing here reverses it. */
.atp-cr-offer__numbers .atp-cr-stat { gap: 2px; justify-content: flex-start; }
.atp-cr-offer__numbers .atp-cr-stat__k { line-height: 1.25; }

/* Board 01 screens 02 and 03: the transport list card. The route has no clock column on the list (the offer feed
   carries no scheduled times), so the timeline collapses to its dots and its stops. */
.atp-cr-tcard__head { display: flex; justify-content: flex-end; align-items: center; }
.atp-cr-tcard .atp-cr-tl__row { grid-template-columns: 20px minmax(0, 1fr); }
.atp-cr-tcard .atp-cr-tl__time { display: none; }
.atp-cr-tcard__km,
.atp-cr-tcard__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px var(--atp-space-2);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-md);
    font-size: var(--atp-text-sm);
    color: var(--atp-text-muted);
    white-space: nowrap;
}
.atp-cr-tcard__km svg, .atp-cr-tcard__chip svg { color: var(--atp-primary); }
.atp-cr-tcard__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--atp-space-2);
    width: 100%;
    padding-top: var(--atp-space-3);
    border-top: 1px solid var(--atp-border);
}
.atp-cr-tcard__chips { display: flex; flex-wrap: wrap; gap: var(--atp-space-2); min-width: 0; }
.atp-cr-tcard__money { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.atp-cr-tcard__money .atp-cr-amount { font-size: 20px; color: var(--atp-primary); }

/* The alert card's own "Vezi detalii" is a link a driver taps with a thumb, so it gets the 44px the rest of the
   carrier controls get rather than the height of its own text. */
.atp-cr-offer__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--atp-space-2); }

/* Board 13: the figures under the goods title, one fact to a line with the plate's own bullet. */
.atp-cr-bullets { margin: 4px 0 0; padding-left: var(--atp-space-4); list-style: disc; color: var(--atp-text-muted); font-size: var(--atp-text-sm); }
.atp-cr-bullets li { margin: 0; }

/* Board 13: the money line and the two actions are the last thing the driver reads and they stay on the screen
   while the declaration above them scrolls. */
.atp-cr-decide {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--atp-space-2);
    width: 100%;
    padding: var(--atp-space-3) 0 var(--atp-space-2);
    background: var(--atp-surface);
    border-top: 1px solid var(--atp-border);
}
.atp-cr-decide__money { display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-2); width: 100%; }
.atp-cr-decide .atp-cr-actions { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* ANCHOR-PACK-3 */

/* === carrier v1.7 remediation pack 4: styles for the board screens built in that pack === */
/* Board 11 screens 03 and 04: one document row, drawn the same on both, and the review hero above them. */
.atp-cr-doc-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atp-cr-doc-row__title--rejected { color: var(--atp-danger); }
.atp-cr-doc-row__state { display: flex; align-items: center; gap: var(--atp-space-2); flex: none; }
.atp-cr-doc-row__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atp-space-2);
    width: auto;
    min-height: 44px;
    margin-top: var(--atp-space-2);
    padding: 0 var(--atp-space-3);
    cursor: pointer;
}
.atp-cr-doc-row__cta--inline { flex: none; margin-top: 0; }
.atp-cr-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }
.atp-cr-tick { color: var(--atp-success); flex: none; }
.atp-cr-tick--danger { color: var(--atp-danger); }
.atp-cr-verify {
    display: flex;
    gap: var(--atp-space-3);
    align-items: flex-start;
    width: 100%;
    padding: var(--atp-space-3);
    border: 1px solid var(--atp-success);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-success-soft);
}
.atp-cr-verify__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    border: 2px solid var(--atp-success);
    border-radius: 999px;
    color: var(--atp-success);
    background: var(--atp-surface);
}
.atp-cr-verify__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.atp-cr-verify__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-success); }

/* Board 21 screens 02 and 03: one refused permission fills the screen, with three steps and one button. */
.atp-cr-blockscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--atp-space-3);
    width: 100%;
    padding: var(--atp-space-5) var(--atp-space-4);
    border-radius: var(--atp-radius-lg);
    text-align: center;
}
.atp-cr-blockscreen--warn { background: var(--atp-warn-soft); }
.atp-cr-blockscreen--danger { background: var(--atp-danger-soft); }
.atp-cr-blockscreen__hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 999px;
    background: var(--atp-surface);
}
.atp-cr-blockscreen--warn .atp-cr-blockscreen__hero { color: var(--atp-warn); }
.atp-cr-blockscreen--danger .atp-cr-blockscreen__hero { color: var(--atp-danger); }
.atp-cr-blockscreen__title { margin: 0; font-size: var(--atp-text-xl); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cr-blockscreen__lead { margin: 0; font-weight: var(--atp-weight-semibold); }
.atp-cr-blockscreen--warn .atp-cr-blockscreen__lead { color: var(--atp-warn); }
.atp-cr-blockscreen--danger .atp-cr-blockscreen__lead { color: var(--atp-danger); }
.atp-cr-blockscreen__body { margin: 0; color: var(--atp-text-muted); }
.atp-cr-steps {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--atp-space-2) var(--atp-space-3);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-surface);
    text-align: left;
}
.atp-cr-step {
    display: flex;
    gap: var(--atp-space-3);
    align-items: center;
    min-height: 56px;
    padding: var(--atp-space-2) 0;
    border-bottom: 1px solid var(--atp-border);
}
.atp-cr-step:last-child { border-bottom: 0; }
.atp-cr-step__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atp-cr-step__title { font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cr-blockscreen > .atp-btn, .atp-cr-blockscreen > .atp-cr-btn-outline { width: 100%; }

/* Board 21 screen 04: the four system states, each in its own tint with its own single action. */
.atp-cr-sysstates { display: flex; flex-direction: column; gap: var(--atp-space-3); width: 100%; }

/* Board 00 screen 04: the permission gate inside the sign-in flow. Three cards, a centred note, one button. */
.atp-cr-gate__row {
    display: flex;
    gap: var(--atp-space-3);
    align-items: flex-start;
    width: 100%;
    min-height: 72px;
    padding: var(--atp-space-3);
    border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-lg);
    background: var(--atp-surface-2);
}
.atp-cr-gate__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.atp-cr-gate__head { display: flex; gap: var(--atp-space-2); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.atp-cr-gate__note { margin: var(--atp-space-2) 0 0; text-align: center; color: var(--atp-text-muted); font-size: var(--atp-text-sm); }

/* ANCHOR-PACK-4 */

/* === carrier v1.7 remediation pack 5: styles for the board screens built in that pack === */
/* === carrier v1.7 remediation pack 5: board 04 (company, fleet, drivers, bank), board 05 (profile, AI support),
   board 06 screen 22 (receipt) and board 07 (bookings, empty states, offline) === */

/* Board 04 screen 15: the driver card's head is a whole tap target, not just the name. */
.atp-cr-drv__head { min-height: 44px; align-items: center; }

/* The amber warning sign the board puts beside the "Documente" label when the fraction is not complete. */
.atp-cr-drv__warn { color: var(--atp-warn); vertical-align: -2px; }

/* Board 04 screen 15 greys the avatar of a driver who is not working: invited and suspended read as inactive at a
   glance, before the badge is read. */
.atp-cr-avatar-initials--muted { background: var(--atp-surface-2); color: var(--atp-text-muted); }

/* Board 04 screen 15 and board 07 screen 28: the three-column strip under a card head. It stays a strip on a phone
   instead of collapsing to one column, because the board reads as three columns at 390 too, and it never carries a
   fixed width of its own. */
.atp-cr-grid--3 > * { min-width: 0; }

/* Board 07 screen 27 stacks the three empty surfaces; each keeps the app's single empty template. */
[data-testid="bookings-empty"] { gap: var(--atp-space-3); }

/* Board 05 screen 20's Setari list: three of its six rows are things a driver taps, so every interactive row on
   that list is a real 44px target, and so is the inline language control inside it. */
a.atp-cr-kv, button.atp-cr-kv { min-height: 44px; align-items: center; }
#carrier-settings .atp-langswitch__opt { min-height: 44px; min-width: 44px; }

/* ANCHOR-PACK-5 */

/* Board 06 screen 23: each permission card carries a bulleted list of what the permission buys, ticked. */
.atp-cr-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.atp-cr-ticks li { display: flex; align-items: flex-start; gap: 8px; color: var(--atp-text); }
.atp-cr-ticks li svg { flex: none; margin-top: 3px; color: var(--atp-success); }