/* ==========================================================================
   ATP Spedition - Client app (business customers), boards 01-16 + master shell.
   Mobile-first (390 / 430), fluid to any width (no px max-width caps), only --atp-* tokens.
   Prefix: .atp-cl  (shell)  .atp-cl-*  (blocks)
   ========================================================================== */

:root {
    --atp-cl-bar-h: 64px;
    --atp-cl-tabs-h: 64px;
    --atp-cl-gutter: clamp(var(--atp-space-4), 4vw, var(--atp-space-8));
    --atp-cl-touch: 44px;
    --atp-cl-btn-h: 52px;
    --atp-cl-title: clamp(24px, 6.4vw, 28px);
    /* The sign-in form's deliberate measure: the phone card's own column, kept at every width. */
    --atp-cl-auth-measure: 26rem;
}

.atp-cl-host { min-height: 100vh; min-height: 100dvh; background: var(--atp-bg); }

/* ---- shell ---------------------------------------------------------------- */
.atp-cl {
    display: flex; flex-direction: column;
    min-height: 100vh; min-height: 100dvh;
    width: 100%;
    background: var(--atp-bg); color: var(--atp-text);
    font-family: var(--atp-font-sans);
}
/* The app bar owns the status-bar band (it is painted in the bar's own surface, not in the page background behind
   it) and STAYS there while the page scrolls (sticky, above the content), so scrolled content never shows through the
   status bar; a bar-less screen pads the band itself. */
.atp-cl:not(:has(.atp-cl__bar)) { padding-top: var(--atp-safe-top); }
.atp-cl--tabs { padding-bottom: calc(var(--atp-cl-tabs-h) + var(--atp-safe-bottom)); }
.atp-cl--center { align-items: center; justify-content: center; gap: var(--atp-space-6); }

.atp-cl__bar {
    position: sticky; top: 0; z-index: 20;
    display: grid; grid-template-columns: minmax(var(--atp-cl-touch), auto) 1fr minmax(var(--atp-cl-touch), auto);
    align-items: center; gap: var(--atp-space-2);
    min-height: calc(var(--atp-cl-bar-h) + var(--atp-safe-top)); padding: calc(var(--atp-space-2) + var(--atp-safe-top)) var(--atp-cl-gutter) var(--atp-space-2);
    background: var(--atp-surface);
}
.atp-cl--navy .atp-cl__bar { background: var(--atp-navy); color: var(--atp-primary-contrast); }
.atp-cl--navy .atp-cl__iconbtn { color: var(--atp-primary-contrast); }
.atp-cl__bar-side { display: flex; align-items: center; justify-content: flex-start; }
.atp-cl__bar-side--end { justify-content: flex-end; }
.atp-cl__brand { display: flex; justify-content: center; align-items: center; --atp-logo-h: 46px; }
.atp-cl__brand .atp-brand__logo { height: var(--atp-logo-h); }
.atp-cl__iconbtn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: var(--atp-cl-touch); height: var(--atp-cl-touch); border-radius: var(--atp-radius-btn);
    background: transparent; border: 0; color: var(--atp-heading); cursor: pointer; text-decoration: none;
}
.atp-cl__iconbtn svg { width: 24px; height: 24px; }
.atp-cl__iconbtn:hover { background: var(--atp-surface-2); }
.atp-cl__iconbtn:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }
.atp-cl__badge {
    position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--atp-radius-pill); background: var(--atp-danger); color: var(--atp-danger-contrast);
    font-size: var(--atp-text-xs); font-weight: var(--atp-weight-semibold); display: grid; place-items: center;
}

.atp-cl__offline {
    display: flex; align-items: center; gap: var(--atp-space-2);
    margin: var(--atp-space-2) var(--atp-cl-gutter) 0; padding: var(--atp-space-2) var(--atp-space-3);
    border-radius: var(--atp-radius-md); background: var(--atp-warn-soft); color: var(--atp-warn);
    font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium);
}
.atp-cl__offline-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.atp-cl__offline-retry { margin-left: auto; background: none; border: 0; color: inherit; font: inherit; font-weight: var(--atp-weight-semibold); text-decoration: underline; cursor: pointer; min-height: 32px; }

.atp-cl__main {
    flex: 1; width: 100%; display: flex; flex-direction: column; gap: var(--atp-space-4);
    padding: var(--atp-space-3) var(--atp-cl-gutter) var(--atp-space-8);
}
.atp-cl__main:focus { outline: none; }
/* The ONE documented exception to the fluid-full-width rule, and it applies to the sign-in screen alone (client,
   carrier and ops all render AtpAuthScreen, so all three get it): two fields and one button are a typing measure,
   not a layout, and uncapped they were 1267px wide at 1440 and 1728px at 1920, which nobody can aim at or read.
   The column is capped at --atp-cl-auth-measure and centred; the cap is on the border box, so the gutter is added
   back and the CONTENT is exactly the measure at every width. Below it (390 / 430) nothing changes: the column
   stays fully fluid, pixel-identical to the phone master. No other screen sets Measure, so nothing else is capped. */
.atp-cl__main--measure { max-width: calc(var(--atp-cl-auth-measure) + 2 * var(--atp-cl-gutter)); margin-inline: auto; }
.atp-cl__head { display: flex; flex-direction: column; gap: var(--atp-space-1); padding-top: var(--atp-space-2); }
.atp-cl__head--center { text-align: center; align-items: center; }
.atp-cl__title { margin: 0; font-size: var(--atp-cl-title); font-weight: 700; line-height: 1.2; color: var(--atp-heading); letter-spacing: -0.01em; }
.atp-cl__sub { margin: 0; font-size: var(--atp-text-md); color: var(--atp-text-muted); line-height: var(--atp-leading-normal); }
.atp-cl__boot-logo { --atp-logo-h: 72px; height: 72px; }
.atp-cl__spinner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid var(--atp-surface-3); border-top-color: var(--atp-primary);
    animation: atp-cl-spin 0.9s linear infinite;
}
@keyframes atp-cl-spin { to { transform: rotate(360deg); } }

/* bottom tab bar (5 tabs, master shell) */
.atp-cl__tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: grid; grid-template-columns: repeat(5, 1fr);
    min-height: var(--atp-cl-tabs-h); padding: var(--atp-space-1) var(--atp-space-2) calc(var(--atp-space-1) + var(--atp-safe-bottom));
    background: var(--atp-surface); border-top: 1px solid var(--atp-border);
}
.atp-cl__tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: var(--atp-cl-touch); text-decoration: none; color: var(--atp-text-muted);
    font-size: var(--atp-text-xs); font-weight: var(--atp-weight-medium); border-radius: var(--atp-radius-md);
}
.atp-cl__tab svg { width: 24px; height: 24px; }
.atp-cl__tab.is-active { color: var(--atp-primary); }
.atp-cl__tab:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: -2px; }
.atp-cl__tab-fab {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--atp-primary); color: var(--atp-primary-contrast); margin-top: -18px; box-shadow: var(--atp-shadow-md);
}
.atp-cl__tab-fab svg { width: 22px; height: 22px; }

/* ---- primitives ------------------------------------------------------------ */
.atp-cl-form { display: flex; flex-direction: column; gap: var(--atp-space-4); width: 100%; }
.atp-cl-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--atp-space-3); }
.atp-cl-stack { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-cl-section { margin: var(--atp-space-2) 0 0; font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); display: flex; align-items: center; gap: var(--atp-space-2); }
.atp-cl-muted { margin: 0; font-size: var(--atp-text-md); color: var(--atp-text-muted); display: flex; gap: var(--atp-space-2); align-items: center; flex-wrap: wrap; }
.atp-cl-muted svg { width: 18px; height: 18px; }
.atp-cl-help { display: inline-grid; place-items: center; color: var(--atp-text-subtle); }
.atp-cl-help svg { width: 18px; height: 18px; }

/* The client's box is taller and roomier than the console's. It states the inset for a box with NOTHING drawn
   inside it and reads the wrap's own variables for the rest, so a field with the boards' leading glyph, or with the
   sign-in board's reveal, keeps the room that control needs instead of losing it to this shorthand (atp.css, "Form
   fields"). A `padding:` shorthand here silently deleted it. */
.atp-cl .atp-input, .atp-cl .atp-select {
    min-height: 48px; font-size: var(--atp-text-lg); border-radius: var(--atp-radius-btn);
    padding-block: 0;
    padding-inline: var(--atp-field-lead, var(--atp-space-4)) var(--atp-field-trail, var(--atp-space-4));
}
.atp-cl .atp-field__label { font-size: var(--atp-text-md); color: var(--atp-heading); }
.atp-cl .atp-field__error, .atp-cl .atp-field__hint { font-size: var(--atp-text-sm); }

/* Any ops-style button rendered inside the client shell (e.g. AtpEmptyState actions) keeps the 44px+ touch target. */
.atp-cl .atp-empty .atp-btn { min-height: var(--atp-cl-btn-h); height: auto; padding: var(--atp-space-3) var(--atp-space-5); }
.atp-cl .atp-btn.atp-cl-btn {
    min-height: var(--atp-cl-btn-h); height: auto; padding: var(--atp-space-3) var(--atp-space-5);
    font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); gap: var(--atp-space-2);
    white-space: normal; border-radius: var(--atp-radius-btn);
}
.atp-cl .atp-btn.atp-cl-btn svg { width: 20px; height: 20px; flex: none; }
.atp-cl .atp-btn.atp-cl-btn--ghost { --_fg: var(--atp-primary); --_bd: var(--atp-primary); --_bg: var(--atp-surface); box-shadow: none; }
.atp-cl .atp-btn.atp-cl-btn--ghost:hover:not(:disabled) { --_bg: var(--atp-primary-soft); }
.atp-cl .atp-btn.atp-cl-btn--danger { --_fg: var(--atp-danger); --_bd: var(--atp-danger); }
.atp-cl .atp-btn--danger.atp-cl-btn { background: var(--atp-danger); color: var(--atp-danger-contrast); }
.atp-cl .atp-btn.is-disabled { opacity: 0.5; pointer-events: none; }
.atp-cl-actions { display: flex; flex-direction: column; gap: var(--atp-space-3); margin-top: var(--atp-space-2); }

.atp-cl-card {
    display: block; width: 100%; background: var(--atp-surface); border: 1px solid var(--atp-border);
    border-radius: var(--atp-radius-xl); padding: var(--atp-space-4); box-shadow: var(--atp-shadow-sm);
    text-decoration: none; color: inherit; text-align: left; font: inherit;
}
button.atp-cl-card { cursor: pointer; }
.atp-cl-card:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }

.atp-cl-trust { margin: var(--atp-space-2) 0 0; display: flex; gap: var(--atp-space-2); align-items: center; justify-content: center; color: var(--atp-text-muted); font-size: var(--atp-text-md); text-align: center; }
.atp-cl-trust svg { width: 20px; height: 20px; flex: none; }
.atp-cl-alt { margin: 0; text-align: center; font-size: var(--atp-text-md); color: var(--atp-text-muted); }
.atp-cl-alt a { position: relative; color: var(--atp-link); font-weight: var(--atp-weight-semibold); }
/* The alternative links are real controls on a phone, but their text line is only 16px tall. The hit area is
   grown to the 44px touch size around the text instead of padding the line, so the type stays exactly where
   the master puts it; consecutive alt lines are pushed apart so the two areas never overlap. */
.atp-cl-alt a::after {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%);
    left: calc(var(--atp-space-2) * -1); right: calc(var(--atp-space-2) * -1); height: var(--atp-cl-touch);
}
.atp-cl-alt + .atp-cl-alt { margin-top: var(--atp-space-3); }
.atp-cl-check { display: flex; gap: var(--atp-space-3); align-items: flex-start; font-size: var(--atp-text-md); color: var(--atp-text); min-height: var(--atp-cl-touch); }
.atp-cl-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--atp-primary); flex: none; }

/* notices */
.atp-cl-notice {
    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); border: 1px solid transparent;
}
.atp-cl-notice__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--atp-surface); }
.atp-cl-notice__icon svg { width: 20px; height: 20px; }
.atp-cl-notice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atp-cl-notice__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); }
.atp-cl-notice__text { font-size: var(--atp-text-md); line-height: var(--atp-leading-normal); }
.atp-cl-notice--info { background: var(--atp-info-soft); color: var(--atp-heading); }
.atp-cl-notice--info .atp-cl-notice__icon { color: var(--atp-primary); }
.atp-cl-notice--success { background: var(--atp-success-soft); color: var(--atp-heading); }
.atp-cl-notice--success .atp-cl-notice__icon { color: var(--atp-success); }
.atp-cl-notice--success .atp-cl-notice__title { color: var(--atp-success); }
.atp-cl-notice--warn { background: var(--atp-warn-soft); color: var(--atp-heading); }
.atp-cl-notice--warn .atp-cl-notice__icon { color: var(--atp-warn); }
.atp-cl-notice--danger { background: var(--atp-danger-soft); color: var(--atp-danger); }
.atp-cl-notice--danger .atp-cl-notice__icon { color: var(--atp-danger); }

/* error state + skeleton */
.atp-cl-error { display: flex; flex-direction: column; gap: var(--atp-space-3); align-items: center; text-align: center; padding: var(--atp-space-4); border-radius: var(--atp-radius-lg); background: var(--atp-danger-soft); color: var(--atp-danger); }
.atp-cl-error__icon svg { width: 28px; height: 28px; }
.atp-cl-error__msg { font-size: var(--atp-text-md); font-weight: var(--atp-weight-medium); }
.atp-cl-skeleton { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-cl-skeleton__card { border-radius: var(--atp-radius-xl); background: var(--atp-surface); border: 1px solid var(--atp-border); padding: var(--atp-space-4); display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-cl-skeleton__line { height: 14px; border-radius: var(--atp-radius-pill); background: linear-gradient(90deg, var(--atp-surface-2), var(--atp-surface-3), var(--atp-surface-2)); background-size: 200% 100%; animation: atp-cl-shimmer 1.4s linear infinite; }
.atp-cl-skeleton__line--w60 { width: 60%; }
.atp-cl-skeleton__line--w40 { width: 40%; }
@keyframes atp-cl-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .atp-cl-skeleton__line, .atp-cl__spinner, .atp-cl-map__radar span { animation: none; } }
.atp-cl-refreshing { font-size: var(--atp-text-sm); color: var(--atp-text-subtle); text-align: center; }

/* steps */
.atp-cl-steps { display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-cl-steps__label { font-size: var(--atp-text-md); color: var(--atp-primary); font-weight: var(--atp-weight-medium); }
.atp-cl-steps__bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--atp-space-2); }
.atp-cl-steps__seg { height: 5px; border-radius: var(--atp-radius-pill); background: var(--atp-surface-3); }
.atp-cl-steps__seg.is-done { background: var(--atp-primary); }

/* choice tiles / chips / segmented */
.atp-cl-choice {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--atp-space-1);
    min-height: 56px; padding: var(--atp-space-3); width: 100%;
    background: var(--atp-surface); border: 1.5px solid var(--atp-border); border-radius: var(--atp-radius-lg);
    color: var(--atp-heading); font: inherit; cursor: pointer; text-align: center;
    transition: border-color var(--atp-dur-fast) var(--atp-ease), background var(--atp-dur-fast) var(--atp-ease);
}
.atp-cl-choice:disabled { opacity: 0.55; cursor: not-allowed; }
.atp-cl-choice:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }
.atp-cl-choice.is-selected { border-color: var(--atp-primary); background: var(--atp-primary-soft); }
.atp-cl-choice--fill.is-selected { background: var(--atp-primary); color: var(--atp-primary-contrast); border-color: var(--atp-primary); }
.atp-cl-choice--fill.is-selected .atp-cl-choice__sub { color: var(--atp-primary-contrast); opacity: 0.9; }
.atp-cl-choice__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--atp-info-soft); color: var(--atp-primary); }
.atp-cl-choice__icon svg { width: 26px; height: 26px; }
.atp-cl-choice.is-selected .atp-cl-choice__icon { background: var(--atp-primary); color: var(--atp-primary-contrast); }
.atp-cl-choice__img { width: 100%; max-width: 120px; height: 56px; object-fit: contain; }
.atp-cl-choice__label { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); line-height: 1.2; }
.atp-cl-choice__sub { font-size: var(--atp-text-sm); color: var(--atp-text-muted); line-height: 1.25; }
.atp-cl-choice__check { position: absolute; top: 6px; right: 6px; color: var(--atp-primary); }
.atp-cl-choice__check svg { width: 20px; height: 20px; }
.atp-cl-choice--chip { min-height: var(--atp-cl-touch); width: auto; padding: var(--atp-space-2) var(--atp-space-4); border-radius: var(--atp-radius-pill); flex-direction: row; }
/* A pill carries a small inline glyph, not the tall tiles' 44px disc (board 03 screen 11). */
.atp-cl-choice--chip .atp-cl-choice__icon { width: auto; height: auto; border-radius: 0; background: none; color: inherit; }
.atp-cl-choice--chip .atp-cl-choice__icon svg { width: 18px; height: 18px; }
.atp-cl-choice--chip.is-selected .atp-cl-choice__icon { background: none; color: inherit; }
.atp-cl-choice--static { cursor: default; }
.atp-cl-choice--veh { border: 0; background: transparent; padding: var(--atp-space-2); }
.atp-cl-choice--veh.is-selected { background: var(--atp-info-soft); }
.atp-cl-chips { display: flex; flex-wrap: wrap; gap: var(--atp-space-2); }
/* The cargo declaration's dimensions/volume switch had no rule at all, so it drew as two 22px browser buttons.
   It is the same segmented control the create flow uses everywhere else, and a real 44px target. */
.atp-cl-seg__btn {
    min-height: var(--atp-cl-touch); padding: var(--atp-space-2) var(--atp-space-4);
    border: 1.5px solid var(--atp-border); border-radius: var(--atp-radius-btn);
    background: var(--atp-surface); color: var(--atp-heading);
    font: inherit; font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); cursor: pointer;
}
.atp-cl-seg__btn.is-on { background: var(--atp-primary); border-color: var(--atp-primary); color: var(--atp-primary-contrast); }
.atp-cl-seg__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.atp-cl-seg__btn:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }
/* The registry lookup is a small button in the ops console; on a phone form it is a thumb target like any other. */
.atp-cl .atp-parity-fiscal .atp-btn { min-height: var(--atp-cl-touch); height: auto; }
.atp-cl-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--atp-space-3); }
.atp-cl-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr)); gap: var(--atp-space-3); }
.atp-cl-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(76px, 100%), 1fr)); gap: var(--atp-space-2); }
.atp-cl-grid4 .atp-cl-choice { padding: var(--atp-space-2); min-height: 64px; }

/* profile cards (screen 01) */
.atp-cl-profile {
    display: grid; grid-template-columns: 52px 1fr 24px; gap: var(--atp-space-3); align-items: start;
    width: 100%; padding: var(--atp-space-4); background: var(--atp-surface); border: 1.5px solid var(--atp-border);
    border-radius: var(--atp-radius-xl); text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: var(--atp-shadow-sm);
}
.atp-cl-profile.is-selected { border-color: var(--atp-primary); background: var(--atp-info-soft); }
.atp-cl-profile:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }
.atp-cl-profile__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.atp-cl-profile__icon svg { width: 28px; height: 28px; }
.atp-cl-profile__icon--retail { background: var(--atp-info-soft); color: var(--atp-primary); }
/* The board draws the glyph in a disc that stays visible when the card itself turns pale blue on selection. */
.atp-cl-profile.is-selected .atp-cl-profile__icon { background: var(--atp-surface); }
.atp-cl-profile__icon--food { background: var(--atp-success-soft); color: var(--atp-success); }
.atp-cl-profile__body { display: flex; flex-direction: column; gap: var(--atp-space-1); min-width: 0; }
.atp-cl-profile__title { font-size: var(--atp-text-lg); font-weight: 700; color: var(--atp-heading); }
.atp-cl-profile__desc { font-size: var(--atp-text-md); color: var(--atp-text-muted); line-height: 1.35; }
.atp-cl-profile__chips { display: flex; flex-wrap: wrap; gap: var(--atp-space-2); margin-top: var(--atp-space-1); }
.atp-cl-profile__chips span { font-size: var(--atp-text-sm); color: var(--atp-primary); border: 1px solid var(--atp-primary); border-radius: var(--atp-radius-md); padding: 2px var(--atp-space-2); }
.atp-cl-profile__chev { color: var(--atp-heading); display: grid; place-items: center; height: 100%; }
.atp-cl-profile__chev svg { width: 22px; height: 22px; }
.atp-cl-selected { display: grid; grid-template-columns: 52px 1fr 28px; gap: var(--atp-space-3); align-items: center; padding: var(--atp-space-4); background: var(--atp-info-soft); border: 1.5px solid var(--atp-primary); border-radius: var(--atp-radius-xl); }
.atp-cl-selected__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atp-cl-selected__check { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--atp-success); color: var(--atp-primary-contrast); }
.atp-cl-selected__check svg { width: 18px; height: 18px; }

/* account ready (screen 04) */
.atp-cl-ready { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--atp-space-2); padding: var(--atp-space-6) 0; }
.atp-cl-ready__art { position: relative; width: 180px; height: 180px; border-radius: 50%; background: var(--atp-info-soft); display: grid; place-items: center; margin-bottom: var(--atp-space-4); }
.atp-cl-ready__check { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 72px; height: 72px; border-radius: 50%; background: var(--atp-primary); color: var(--atp-primary-contrast); display: grid; place-items: center; }
.atp-cl-ready__check svg { width: 40px; height: 40px; }
.atp-cl-ready__store { margin-top: 70px; color: var(--atp-primary); }
.atp-cl-ready__store svg { width: 72px; height: 72px; }

/* row cards */
.atp-cl-rowcard { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--atp-space-3); align-items: center; width: 100%; min-height: 64px; }
.atp-cl-rowcard--flat { border: 0; box-shadow: none; padding: var(--atp-space-3) 0; border-radius: 0; }
.atp-cl-card > .atp-cl-rowcard--flat + .atp-cl-rowcard--flat { border-top: 1px solid var(--atp-border); }
.atp-cl-rowcard__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--atp-info-soft); color: var(--atp-primary); }
.atp-cl-rowcard__icon svg { width: 24px; height: 24px; }
.atp-cl-rowcard__icon--ok { background: var(--atp-success-soft); color: var(--atp-success); }
.atp-cl-rowcard__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atp-cl-rowcard__label { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-cl-rowcard__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cl-rowcard__sub { font-size: var(--atp-text-md); color: var(--atp-text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.atp-cl-rowcard__chev { color: var(--atp-heading); display: grid; place-items: center; }
.atp-cl-rowcard__chev svg { width: 22px; height: 22px; }

/* saved location card */
.atp-cl-loc { display: grid; grid-template-columns: 52px 1fr 28px; gap: var(--atp-space-3); align-items: start; }
.atp-cl-loc.is-selected { border-color: var(--atp-primary); background: var(--atp-info-soft); }
.atp-cl-loc__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--atp-radius-lg); background: var(--atp-info-soft); color: var(--atp-primary); }
.atp-cl-loc--food .atp-cl-loc__icon { border-radius: 50%; }
.atp-cl-loc__icon svg { width: 28px; height: 28px; }
.atp-cl-loc__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atp-cl-loc__name { font-size: var(--atp-text-lg); font-weight: 700; color: var(--atp-heading); }
.atp-cl-loc__addr { font-size: var(--atp-text-md); color: var(--atp-text-muted); line-height: 1.4; }
.atp-cl-loc__check { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--atp-primary); color: var(--atp-primary-contrast); }
.atp-cl-loc__check svg { width: 18px; height: 18px; }
.atp-cl-loc__more { display: grid; place-items: center; width: var(--atp-cl-touch); height: var(--atp-cl-touch); margin: -8px -8px 0 0; background: none; border: 0; color: var(--atp-heading); cursor: pointer; border-radius: var(--atp-radius-btn); }
.atp-cl-loc__more svg { width: 22px; height: 22px; }

/* counters (screen 06) */
.atp-cl-counter { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--atp-space-3); align-items: center; padding: var(--atp-space-2) var(--atp-space-3); }
.atp-cl-counter__icon { color: var(--atp-primary); display: grid; place-items: center; }
.atp-cl-counter__icon svg { width: 24px; height: 24px; }
.atp-cl-counter__label { font-size: var(--atp-text-md); color: var(--atp-heading); font-weight: var(--atp-weight-medium); }
.atp-cl-counter__ctl { display: flex; align-items: center; gap: var(--atp-space-2); }
.atp-cl-counter__btn { width: var(--atp-cl-touch); height: var(--atp-cl-touch); border-radius: var(--atp-radius-btn); border: 1px solid var(--atp-border); background: var(--atp-surface); color: var(--atp-primary); display: grid; place-items: center; cursor: pointer; }
.atp-cl-counter__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.atp-cl-counter__btn svg { width: 20px; height: 20px; }
.atp-cl-counter__val { min-width: 28px; text-align: center; font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); font-variant-numeric: tabular-nums; }
.atp-cl-counter__ctl--input .atp-cl-counter__input { width: 96px; min-height: 44px; text-align: right; font-weight: var(--atp-weight-semibold); }

/* camera (screen 07) */
.atp-cl-camera { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-cl-camera__viewfinder { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 60vh; border-radius: var(--atp-radius-lg); background: var(--atp-navy-900); overflow: hidden; display: grid; place-items: center; }
.atp-cl-camera__viewfinder img { width: 100%; height: 100%; object-fit: cover; }
.atp-cl-camera__hint { color: var(--atp-primary-contrast); opacity: 0.85; display: flex; flex-direction: column; align-items: center; gap: var(--atp-space-2); font-size: var(--atp-text-md); padding: var(--atp-space-4); text-align: center; }
.atp-cl-camera__hint svg { width: 40px; height: 40px; }
.atp-cl-camera__corner { position: absolute; width: 28px; height: 28px; border: 3px solid var(--atp-primary-contrast); }
.atp-cl-camera__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.atp-cl-camera__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.atp-cl-camera__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.atp-cl-camera__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
/* Board 02 screen 07's aiming cross, drawn from one element so it costs no extra markup. */
.atp-cl-camera__crosshair { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); opacity: 0.85; }
.atp-cl-camera__crosshair::before, .atp-cl-camera__crosshair::after { content: ""; position: absolute; background: var(--atp-primary-contrast); }
.atp-cl-camera__crosshair::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.atp-cl-camera__crosshair::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); }
.atp-cl-camera__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: var(--atp-space-2) var(--atp-space-4); border-radius: var(--atp-radius-btn); background: var(--atp-overlay); color: var(--atp-primary-contrast); font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); white-space: nowrap; }
.atp-cl-camera__actions { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-cl-camera__label { position: relative; cursor: pointer; }
.atp-cl-camera__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* offer (screen 08) */
.atp-cl-reco { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-cl-reco__title { font-size: var(--atp-text-lg); font-weight: 700; color: var(--atp-heading); }
.atp-cl-reco__row { display: grid; grid-template-columns: minmax(120px, 2fr) 3fr; gap: var(--atp-space-3); align-items: center; }
.atp-cl-reco__img { width: 100%; height: auto; object-fit: contain; }
.atp-cl-reco__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--atp-space-2); font-size: var(--atp-text-md); color: var(--atp-heading); }
.atp-cl-reco__list li { display: flex; gap: var(--atp-space-2); align-items: center; }
.atp-cl-reco__list svg { width: 18px; height: 18px; color: var(--atp-primary); flex: none; }
.atp-cl-reco__alt { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-cl-price { background: var(--atp-info-soft); border-color: transparent; display: flex; flex-direction: column; gap: var(--atp-space-1); }
.atp-cl-price.is-expired { opacity: 0.6; }
.atp-cl-price__label { font-size: var(--atp-text-md); color: var(--atp-text-muted); }
.atp-cl-price__value { font-size: clamp(28px, 8vw, 36px); font-weight: 700; color: var(--atp-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.atp-cl-price__row { display: flex; justify-content: space-between; align-items: center; gap: var(--atp-space-2); font-size: var(--atp-text-md); color: var(--atp-primary); font-weight: var(--atp-weight-medium); flex-wrap: wrap; }
.atp-cl-price__badge { display: inline-flex; gap: var(--atp-space-1); align-items: center; padding: 4px var(--atp-space-3); border-radius: var(--atp-radius-pill); background: var(--atp-surface); color: var(--atp-heading); font-size: var(--atp-text-sm); }
.atp-cl-price__badge svg { width: 16px; height: 16px; }

/* food review (screen 11) */
.atp-cl-vehrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(90px, 100%), 1fr)); gap: var(--atp-space-2); padding: var(--atp-space-2); border-color: var(--atp-primary); }
.atp-cl-pricerow { display: flex; justify-content: space-between; align-items: center; gap: var(--atp-space-3); }
.atp-cl-pricerow.is-expired { opacity: 0.6; }
.atp-cl-pricerow__label { display: block; font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cl-pricerow__sub { display: block; font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-cl-pricerow__value { font-size: var(--atp-text-xl); font-weight: 700; color: var(--atp-heading); font-variant-numeric: tabular-nums; }

/* map surface */
.atp-cl-map { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--atp-radius-lg); overflow: hidden; background: var(--atp-surface-2); border: 1px solid var(--atp-border); }
.atp-cl-map--tall { aspect-ratio: 3 / 3.4; }
.atp-cl-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atp-cl-map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--atp-primary); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)); }
.atp-cl-map__pin svg { width: 44px; height: 44px; }
.atp-cl-map__tag { position: absolute; display: inline-flex; gap: var(--atp-space-1); align-items: center; padding: 4px var(--atp-space-2); border-radius: var(--atp-radius-md); background: var(--atp-surface); color: var(--atp-heading); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); box-shadow: var(--atp-shadow-sm); max-width: 45%; }
.atp-cl-map__tag svg { width: 16px; height: 16px; color: var(--atp-primary); flex: none; }
.atp-cl-map__tag--a { top: 12%; left: 6%; }
.atp-cl-map__tag--b { bottom: 12%; right: 6%; }
.atp-cl-map__stale { position: absolute; top: var(--atp-space-3); left: 50%; transform: translateX(-50%); display: inline-flex; gap: var(--atp-space-1); align-items: center; padding: 4px var(--atp-space-3); border-radius: var(--atp-radius-pill); background: var(--atp-warn-soft); color: var(--atp-warn); font-size: var(--atp-text-sm); font-weight: var(--atp-weight-semibold); white-space: nowrap; }
.atp-cl-map__stale svg { width: 16px; height: 16px; }
.atp-cl-map__locate { position: absolute; right: var(--atp-space-3); bottom: var(--atp-space-3); width: 40px; height: 40px; border-radius: 50%; background: var(--atp-surface); color: var(--atp-primary); display: grid; place-items: center; box-shadow: var(--atp-shadow-md); }
.atp-cl-map__locate svg { width: 20px; height: 20px; }
.atp-cl-map--searching > svg { opacity: 0.55; }
.atp-cl-map__radar { position: absolute; inset: 0; display: grid; place-items: center; }
.atp-cl-map__radar span { position: absolute; width: 36%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--atp-primary); opacity: 0; animation: atp-cl-pulse 2.4s ease-out infinite; }
.atp-cl-map__radar span:nth-child(2) { animation-delay: 0.8s; }
.atp-cl-map__radar span:nth-child(3) { animation-delay: 1.6s; }
.atp-cl-map__radar i { width: 18px; height: 18px; border-radius: 50%; background: var(--atp-primary); box-shadow: 0 0 0 6px var(--atp-primary-soft); }
@keyframes atp-cl-pulse { 0% { transform: scale(0.4); opacity: 0.7; } 100% { transform: scale(2.2); opacity: 0; } }
.atp-cl-maplink { display: block; border-radius: var(--atp-radius-lg); }
.atp-cl-maplink:focus-visible { outline: 2px solid var(--atp-primary); outline-offset: 2px; }

/* published (screen 12) */
.atp-cl-published { display: grid; grid-template-columns: 40px 1fr; gap: var(--atp-space-3); align-items: start; }
.atp-cl-published__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--atp-success-soft); color: var(--atp-success); }
.atp-cl-published__icon svg { width: 24px; height: 24px; }
.atp-cl-published__title { font-size: var(--atp-text-lg); font-weight: 700; color: var(--atp-heading); }
.atp-cl-published__sub { font-size: var(--atp-text-md); color: var(--atp-text-muted); line-height: 1.4; }
.atp-cl-published__num { margin-top: var(--atp-space-1); font-family: var(--atp-font-mono); font-size: var(--atp-text-sm); color: var(--atp-text-subtle); }

/* carrier (screen 13) */
.atp-cl-carrier { display: flex; flex-direction: column; gap: var(--atp-space-4); }
.atp-cl-carrier__row { display: grid; grid-template-columns: 96px 1fr; gap: var(--atp-space-4); align-items: center; }
.atp-cl-carrier__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--atp-info-soft); }
.atp-cl-carrier__info { display: flex; flex-direction: column; gap: var(--atp-space-1); min-width: 0; }
.atp-cl-carrier__name { font-size: var(--atp-text-xl); font-weight: 700; color: var(--atp-heading); }
.atp-cl-carrier__company { font-size: var(--atp-text-md); color: var(--atp-text-muted); }
/* Board 04 screen 13: a gold star and the score on their own line under the name. */
.atp-cl-carrier__rating { display: flex; gap: var(--atp-space-2); align-items: center; font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); font-variant-numeric: tabular-nums; }
.atp-cl-carrier__rating svg { width: 20px; height: 20px; color: var(--atp-warn); fill: currentColor; }
.atp-cl-carrier__vehicle { display: flex; flex-wrap: wrap; gap: var(--atp-space-1) var(--atp-space-2); align-items: center; font-size: var(--atp-text-md); color: var(--atp-heading); font-weight: var(--atp-weight-medium); }
.atp-cl-carrier__vehicle svg { width: 20px; height: 20px; color: var(--atp-primary); }
.atp-cl-carrier__verified { width: 100%; font-size: var(--atp-text-sm); color: var(--atp-text-muted); font-weight: var(--atp-weight-normal); }
.atp-cl-carrier__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--atp-space-3); }

/* timeline (screens 14/15) */
.atp-cl-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.atp-cl-timeline__item { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: var(--atp-space-3); align-items: start; padding: var(--atp-space-3) 0; }
.atp-cl-timeline__item + .atp-cl-timeline__item { border-top: 1px solid var(--atp-border); }
.atp-cl-timeline__item + .atp-cl-timeline__item::before { content: ""; position: absolute; left: 15px; top: -14px; width: 2px; height: 28px; background: var(--atp-border-strong); }
.atp-cl-timeline__item.is-done + .atp-cl-timeline__item::before, .atp-cl-timeline__item.is-done + .is-done::before { background: var(--atp-success); }
.atp-cl-timeline__dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--atp-border-strong); background: var(--atp-surface); color: var(--atp-primary-contrast); }
.atp-cl-timeline__dot svg { width: 18px; height: 18px; }
.is-done .atp-cl-timeline__dot { background: var(--atp-success); border-color: var(--atp-success); }
.is-current .atp-cl-timeline__dot { background: var(--atp-primary); border-color: var(--atp-primary); }
.atp-cl-timeline__body { display: flex; flex-direction: column; gap: 2px; }
.atp-cl-timeline__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.is-todo .atp-cl-timeline__title { color: var(--atp-text-muted); font-weight: var(--atp-weight-medium); }
.atp-cl-timeline__sub { font-size: var(--atp-text-md); color: var(--atp-text-muted); }
.atp-cl-timeline__time { font-size: var(--atp-text-md); color: var(--atp-text-muted); font-variant-numeric: tabular-nums; }

/* delivered (screen 16), summaries, kv */
.atp-cl-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--atp-space-2); padding: var(--atp-space-4) 0 var(--atp-space-2); }
.atp-cl-done__check { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--atp-success-soft); color: var(--atp-success); border: 3px solid var(--atp-success); margin-bottom: var(--atp-space-2); }
.atp-cl-done__check svg { width: 52px; height: 52px; }
.atp-cl-done__title { font-size: var(--atp-text-lg); font-weight: 700; color: var(--atp-heading); }
.atp-cl-done__sub { font-size: var(--atp-text-md); color: var(--atp-text-muted); }
.atp-cl-summary { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-cl-summary__title { font-size: var(--atp-text-lg); font-weight: 700; color: var(--atp-heading); }
.atp-cl-kv { display: flex; justify-content: space-between; gap: var(--atp-space-4); align-items: baseline; font-size: var(--atp-text-md); color: var(--atp-text-muted); }
.atp-cl-kv strong { color: var(--atp-heading); font-weight: var(--atp-weight-semibold); text-align: right; overflow-wrap: anywhere; }
.atp-cl-kv--strong { font-size: var(--atp-text-lg); }
.atp-cl-kv a { color: var(--atp-link); font-weight: var(--atp-weight-semibold); }
.atp-cl-rate { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-cl-rate__title { font-size: var(--atp-text-lg); font-weight: 700; color: var(--atp-heading); }
.atp-cl-rate__stars { display: flex; gap: var(--atp-space-2); justify-content: center; }
.atp-cl-rate__star { width: var(--atp-cl-touch); height: var(--atp-cl-touch); border: 0; background: none; color: var(--atp-border-strong); cursor: pointer; display: grid; place-items: center; }
.atp-cl-rate__star svg { width: 32px; height: 32px; }
.atp-cl-rate__star.is-on { color: var(--atp-warn); }
.atp-cl-rate__star.is-on svg { fill: currentColor; }
.atp-cl-rate__star:focus-visible { outline: 2px solid var(--atp-primary); border-radius: var(--atp-radius-btn); }

/* home (master shell) */
.atp-cl-route { display: grid; grid-template-columns: 20px 1fr 28px; gap: var(--atp-space-3); align-items: stretch; }
.atp-cl-route__rail { display: flex; flex-direction: column; align-items: center; padding: 6px 0; }
.atp-cl-route__dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--atp-primary); background: var(--atp-surface); }
.atp-cl-route__line { flex: 1; width: 0; border-left: 2px dashed var(--atp-border-strong); margin: 4px 0; }
.atp-cl-route__pin { color: var(--atp-primary); }
.atp-cl-route__pin svg { width: 20px; height: 20px; }
.atp-cl-route__rows { display: flex; flex-direction: column; gap: var(--atp-space-3); }
.atp-cl-route__row { display: flex; flex-direction: column; gap: 2px; }
.atp-cl-route__row + .atp-cl-route__row { border-top: 1px solid var(--atp-border); padding-top: var(--atp-space-3); }
.atp-cl-route__q { font-size: var(--atp-text-md); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cl-route__a { font-size: var(--atp-text-md); color: var(--atp-text-muted); }
.atp-cl-route__chev { display: flex; flex-direction: column; justify-content: space-around; color: var(--atp-heading); }
.atp-cl-route__chev svg { width: 20px; height: 20px; }

/* master visual screen 2 "Confirmă transportul". Every block fills its row; the split and the trust row are
   auto-fit grids, so they sit side by side where there is width and stack where there is not. */
.atp-cl-confirm__route { display: grid; grid-template-columns: 20px 1fr; gap: var(--atp-space-3); align-items: stretch; }
.atp-cl-confirm__value { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); display: block; overflow-wrap: anywhere; }
/* The master draws these two cells side by side at every width, the vehicle's the wider of the two: it carries a
   photo, a name and a spec where the other carries one number. Fractions, never a px cap, so the pair fills
   whatever width the card has. */
.atp-cl-confirm__split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--atp-space-4); }
.atp-cl-confirm__cell { display: flex; flex-direction: column; gap: var(--atp-space-2); min-width: 0; }
.atp-cl-confirm__cell + .atp-cl-confirm__cell { border-left: 1px solid var(--atp-border); padding-left: var(--atp-space-4); }
.atp-cl-confirm__veh { display: flex; gap: var(--atp-space-3); align-items: center; min-width: 0; }
.atp-cl-confirm__veh svg { width: 22px; height: 22px; color: var(--atp-primary); flex: none; }
.atp-cl-confirm__img { width: 64px; height: 40px; object-fit: contain; flex: none; }
.atp-cl-confirm__vehtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* A vehicle's name is a name: it wraps between its words if it must, never inside one. `__value` breaks anywhere
   because an address has to, and lending that to the name is what printed "Dubă 3,5 / t" on the master's screen. */
.atp-cl-confirm__vehname { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); overflow-wrap: normal; }
.atp-cl-confirm__spec { font-size: var(--atp-text-md); color: var(--atp-text-muted); white-space: nowrap; }
.atp-cl-confirm__price { background: var(--atp-info-soft); border-color: transparent; display: flex; flex-direction: column; gap: var(--atp-space-1); align-items: center; text-align: center; }
.atp-cl-confirm__amount { font-size: clamp(34px, 11vw, 48px); font-weight: 700; color: var(--atp-heading); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.atp-cl-confirm__trust { list-style: none; margin: var(--atp-space-3) 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr)); gap: var(--atp-space-3); }
.atp-cl-confirm__trust li { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-cl-confirm__trust strong { font-size: var(--atp-text-md); color: var(--atp-heading); }
.atp-cl-confirm__trust svg { width: 22px; height: 22px; color: var(--atp-primary); }
.atp-cl-paysheet--bare { display: flex; flex-direction: column; gap: var(--atp-space-3); }

/* orders list */
.atp-cl-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--atp-surface-2); border-radius: var(--atp-radius-btn); padding: 4px; gap: 4px; }
.atp-cl-tabs__tab { min-height: var(--atp-cl-touch); border: 0; border-radius: var(--atp-radius-md); background: transparent; font: inherit; font-weight: var(--atp-weight-semibold); color: var(--atp-text-muted); cursor: pointer; }
.atp-cl-tabs__tab.is-active { background: var(--atp-surface); color: var(--atp-primary); box-shadow: var(--atp-shadow-sm); }
.atp-cl-tabs__tab:focus-visible { outline: 2px solid var(--atp-primary); }
.atp-cl-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--atp-space-2); }
.atp-cl-order { display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-cl-order__top { display: flex; justify-content: space-between; align-items: center; gap: var(--atp-space-2); }
.atp-cl-order__num { font-family: var(--atp-font-mono); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cl-order__route { display: flex; gap: var(--atp-space-2); align-items: center; font-size: var(--atp-text-md); color: var(--atp-text); }
.atp-cl-order__route svg { width: 18px; height: 18px; color: var(--atp-primary); flex: none; }
.atp-cl-order__meta { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }

/* support / inbox */
.atp-cl-ticket { display: flex; flex-direction: column; gap: var(--atp-space-2); }
.atp-cl-ticket__top { display: flex; justify-content: space-between; gap: var(--atp-space-2); align-items: center; }
.atp-cl-ticket__subject { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); overflow-wrap: anywhere; }
.atp-cl-ticket__meta { font-size: var(--atp-text-sm); color: var(--atp-text-muted); }
.atp-cl-bubble { max-width: 88%; padding: var(--atp-space-3) var(--atp-space-4); border-radius: var(--atp-radius-xl); font-size: var(--atp-text-md); line-height: 1.45; display: flex; flex-direction: column; gap: var(--atp-space-1); }
.atp-cl-bubble--me { align-self: flex-end; background: var(--atp-primary); color: var(--atp-primary-contrast); border-bottom-right-radius: var(--atp-radius-sm); }
.atp-cl-bubble--ai { align-self: flex-start; background: var(--atp-surface); border: 1px solid var(--atp-border); color: var(--atp-text); border-bottom-left-radius: var(--atp-radius-sm); }
.atp-cl-bubble__who { font-size: var(--atp-text-xs); opacity: 0.75; }
.atp-cl-bubble__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.atp-cl-bubble__link { font-weight: var(--atp-weight-semibold); color: var(--atp-link); }
.atp-cl-notif { display: flex; flex-direction: column; gap: 2px; }
.atp-cl-notif.is-unread { border-left: 4px solid var(--atp-primary); }
.atp-cl-notif__title { font-size: var(--atp-text-lg); font-weight: var(--atp-weight-semibold); color: var(--atp-heading); }
.atp-cl-notif__body { font-size: var(--atp-text-md); color: var(--atp-text); }
.atp-cl-notif__time { font-size: var(--atp-text-sm); color: var(--atp-text-subtle); }

/* wider screens: keep it fluid, spread the grids, larger type stays */
@media (min-width: 860px) {
    :root { --atp-cl-gutter: clamp(var(--atp-space-8), 6vw, 96px); }
    .atp-cl__main { gap: var(--atp-space-5); }
    .atp-cl__tabs { padding-left: var(--atp-cl-gutter); padding-right: var(--atp-cl-gutter); }
    .atp-cl-camera__viewfinder { aspect-ratio: 16 / 10; }
}

/* ---- card sheet (screens 08/11 publish, account payment methods) ---- */
.atp-cl-paysheet { display: grid; gap: 12px; }
.atp-cl-paysheet__head { display: flex; align-items: center; gap: 12px; }
.atp-cl-paysheet__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--atp-info-soft); color: var(--atp-primary); }
.atp-cl-paysheet__icon svg { width: 22px; height: 22px; }
.atp-cl-paysheet__title { font-weight: 600; color: var(--atp-heading); }
.atp-cl-paysheet__amount { font-size: 22px; font-weight: 700; color: var(--atp-heading); }
.atp-cl-paysheet__element { min-height: 48px; }
.atp-cl-paysheet__note { margin: 0; }
.atp-cl-paysheet__actions { display: grid; gap: 8px; }

/* client address (search + map + collapsed details), one component on 03 / 05 / 10 / onboarding */
.atp-cl-addr { gap: var(--atp-space-3); }
.atp-cl-addr__details { cursor: pointer; text-align: left; font: inherit; }
.atp-cl-addr__details:disabled { cursor: default; opacity: 0.7; }
.atp-cl-addr__fields { padding: var(--atp-space-3); border: 1px solid var(--atp-border); border-radius: var(--atp-radius-lg); background: var(--atp-surface); }
.atp-cl-map--real .maplibregl-canvas { border-radius: inherit; }

/* Carrier brief v1.7, board 00 screen 01: "Ține-mă minte" and "Ai uitat parola?" share one row. */
.atp-cl-authrow { display: flex; align-items: center; justify-content: space-between; gap: var(--atp-space-3); min-height: 44px; flex-wrap: wrap; }
.atp-cl-remember { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }