/*
 * Tracking Order V2
 * AI-W1-P1-R4 — Global Design System & Authenticated Shell
 *
 * Static asset strategy selected because the staging server has no
 * Node/npm runtime. This file intentionally avoids build-time dependencies.
 */

:root {
    --to-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --to-canvas: #f3f6fa;
    --to-canvas-strong: #eaf0f7;
    --to-surface: #ffffff;
    --to-surface-soft: #f8fafc;

    --to-text: #142238;
    --to-text-strong: #0f1d30;
    --to-muted: #66758b;
    --to-muted-strong: #4d5d73;

    --to-border: #dbe3ed;
    --to-border-strong: #c8d3e1;

    --to-primary: #2457c5;
    --to-primary-hover: #1e49a8;
    --to-primary-soft: #edf3ff;
    --to-primary-border: #bfd0f7;

    --to-success: #176b49;
    --to-success-soft: #ecf8f2;
    --to-warning: #8a5a12;
    --to-warning-soft: #fff7e8;
    --to-danger: #a33a3a;
    --to-danger-soft: #fff0f0;

    --to-radius-sm: 9px;
    --to-radius-md: 13px;
    --to-radius-lg: 18px;

    --to-shadow-sm: 0 1px 2px rgba(15, 34, 56, 0.05);
    --to-shadow-md: 0 10px 30px rgba(30, 55, 90, 0.08);
    --to-shadow-shell: 0 14px 38px rgba(30, 55, 90, 0.09);

    --to-focus: 0 0 0 3px rgba(36, 87, 197, 0.18);
    --to-content-wide: 1540px;
}

.to-app {
    margin: 0;
    min-height: 100vh;
    color: var(--to-text);
    background:
        radial-gradient(circle at 12% -10%, rgba(36, 87, 197, 0.07), transparent 34rem),
        linear-gradient(180deg, #f8fafc 0%, var(--to-canvas) 42%, #f5f7fb 100%);
    font-family: var(--to-font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.to-app *,
.to-app *::before,
.to-app *::after {
    box-sizing: border-box;
}

.to-app a {
    color: inherit;
}

.to-app button,
.to-app input,
.to-app select,
.to-app textarea {
    font: inherit;
}

.to-app :focus-visible {
    outline: 2px solid var(--to-primary);
    outline-offset: 2px;
    box-shadow: var(--to-focus);
}

.to-app .page {
    width: min(var(--to-content-wide), calc(100% - 40px));
    margin: 0 auto;
    padding: 18px 0 56px;
}

.to-app .topbar {
    position: sticky;
    top: 12px;
    z-index: 40;
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    margin: 0 0 28px;
    padding: 12px 14px;
    border: 1px solid rgba(203, 214, 228, 0.9);
    border-radius: var(--to-radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--to-shadow-shell);
    backdrop-filter: blur(14px);
}

.to-app .brand {
    display: grid;
    grid-template-columns: 42px minmax(0, auto);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 1px;
    align-items: center;
    min-width: 0;
}

.to-app .brand::before {
    content: "";
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(145deg, #183b78 0%, var(--to-primary) 58%, #3f75df 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 7px 18px rgba(36, 87, 197, 0.2);
}

.to-app .brand strong {
    grid-column: 2;
    color: var(--to-text-strong);
    font-size: calc(15px + var(--to-font-size-step));
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.to-app .brand span {
    grid-column: 2;
    color: var(--to-muted);
    font-size: calc(12px + var(--to-font-size-step));
    font-weight: 500;
    line-height: 1.35;
}

.to-app .topbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.to-app .topbar-actions form {
    margin: 0;
}

.to-app .link,
.to-app .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 13px;
    gap: 7px;
    border: 1px solid var(--to-border);
    border-radius: var(--to-radius-sm);
    background: var(--to-surface);
    color: #314158;
    box-shadow: var(--to-shadow-sm);
    font-size: calc(13px + var(--to-font-size-step));
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color 150ms ease,
        background-color 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.to-app .link:hover,
.to-app .button:hover {
    border-color: var(--to-border-strong);
    background: #fbfcfe;
    color: var(--to-text-strong);
    box-shadow: 0 4px 12px rgba(30, 55, 90, 0.08);
}

.to-app .button:active,
.to-app .link:active {
    transform: translateY(1px);
}

.to-app .button-primary {
    border-color: var(--to-primary);
    background: var(--to-primary);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(36, 87, 197, 0.18);
}

.to-app .button-primary:hover {
    border-color: var(--to-primary-hover);
    background: var(--to-primary-hover);
    color: #ffffff;
}

.to-app .button-secondary {
    background: var(--to-surface-soft);
}

.to-app .hero {
    display: flex;
    gap: 18px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
}

.to-app .hero h1 {
    margin-top: 0;
    color: var(--to-text-strong);
    font-size: calc(clamp(26px, 2.4vw, 34px) + var(--to-font-size-step));
    font-weight: 740;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.to-app .hero p,
.to-app .subtitle {
    color: var(--to-muted);
    line-height: 1.55;
}

.to-app .scope-pill,
.to-app .pill {
    display: inline-flex;
    position: relative;
    gap: 7px;
    align-items: center;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid var(--to-primary-border);
    border-radius: 999px;
    background: var(--to-primary-soft);
    color: #315b9e;
    font-size: calc(12px + var(--to-font-size-step));
    font-weight: 700;
}

.to-app .scope-pill::before,
.to-app .pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #4d78d4;
    box-shadow: 0 0 0 3px rgba(77, 120, 212, 0.12);
}

.to-app .panel {
    border-color: var(--to-border);
    border-radius: var(--to-radius-lg);
    background: var(--to-surface);
    box-shadow: var(--to-shadow-sm);
}

.to-app .panel-header {
    border-bottom-color: #e8edf4;
    background: linear-gradient(180deg, #fbfcfe 0%, #f8fafc 100%);
}

.to-app input[type="text"],
.to-app input[type="email"],
.to-app input[type="password"],
.to-app input[type="date"],
.to-app select,
.to-app textarea {
    border-color: var(--to-border-strong);
    border-radius: var(--to-radius-sm);
    background: var(--to-surface);
    color: var(--to-text);
}

.to-app input:hover,
.to-app select:hover,
.to-app textarea:hover {
    border-color: #abb9ca;
}

.to-app input:focus,
.to-app select:focus,
.to-app textarea:focus {
    border-color: var(--to-primary);
    outline: none;
    box-shadow: var(--to-focus);
}

.to-app th {
    color: #536277;
}

.to-app .empty {
    color: var(--to-muted);
}

.to-app .app-notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid #b8dfcc;
    border-radius: var(--to-radius-md);
    background: var(--to-success-soft);
    color: var(--to-success);
    font-size: calc(13px + var(--to-font-size-step));
    font-weight: 600;
}

.to-app .shell-kicker {
    display: inline-flex;
    margin: 0 0 8px;
    color: var(--to-primary);
    font-size: calc(11px + var(--to-font-size-step));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.to-app .home-panel {
    overflow: hidden;
}

.to-app .home-panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 24px;
}

.to-app .home-panel-copy h2 {
    margin: 0 0 7px;
    color: var(--to-text-strong);
    font-size: calc(18px + var(--to-font-size-step));
    letter-spacing: -0.015em;
}

.to-app .home-panel-copy p {
    max-width: 720px;
    margin: 0;
    color: var(--to-muted);
    font-size: calc(14px + var(--to-font-size-step));
    line-height: 1.6;
}

.to-app .identity-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
    color: var(--to-muted-strong);
    font-size: calc(12px + var(--to-font-size-step));
}

.to-app .identity-row strong {
    color: var(--to-text);
}

@media (max-width: 760px) {
    .to-app .page {
        width: min(100% - 24px, var(--to-content-wide));
        padding-top: 12px;
    }

    .to-app .topbar {
        position: static;
        align-items: flex-start;
        flex-direction: column;
        padding: 12px;
        border-radius: var(--to-radius-md);
    }

    .to-app .brand {
        grid-template-columns: 36px minmax(0, auto);
    }

    .to-app .brand::before {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .to-app .topbar-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .to-app .hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .to-app .home-panel-body {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .to-app .home-panel-actions .button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .to-app *,
    .to-app *::before,
    .to-app *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================
 * AI-W2.1-P1 — APPROVED APPLICATION SHELL
 * Visual authority:
 * AI_W2_APPROVED_VISUAL_BASELINE_v1
 * ============================================================ */

:root {
    --to2-navy-950: #071b31;
    --to2-navy-900: #0b223b;
    --to2-navy-850: #102b49;
    --to2-blue-600: #1469e8;
    --to2-blue-500: #2282f6;
    --to2-blue-100: #eaf3ff;
    --to2-blue-050: #f4f8ff;
    --to2-canvas: #f5f8fc;
    --to2-surface: #ffffff;
    --to2-surface-soft: #f8fbff;
    --to2-text: #10213e;
    --to2-muted: #657693;
    --to2-border: #dbe5f1;
    --to2-border-strong: #c8d6e8;
    --to2-sidebar-width: 224px;
    --to2-topbar-height: 58px;
    --to2-radius: 9px;
    --to2-shadow: 0 8px 24px rgba(13, 41, 75, 0.05);
}

.to-shell-app {
    background: var(--to2-canvas);
    color: var(--to2-text);
}

.to-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--to2-sidebar-width) minmax(0, 1fr);
}

.to-shell-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 18px 10px 14px;
    background:
        radial-gradient(circle at 18% 8%, rgba(34, 130, 246, 0.12), transparent 220px),
        linear-gradient(180deg, var(--to2-navy-900) 0%, var(--to2-navy-950) 100%);
    color: #d9e7f7;
    border-right: 1px solid rgba(164, 194, 226, 0.13);
    z-index: 60;
}

.to-shell-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 2px 8px 18px;
    color: #ffffff;
    text-decoration: none;
}

.to-shell-brand-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
}

.to-shell-brand-copy {
    min-width: 0;
}

.to-shell-brand-title {
    display: block;
    font-size: calc(15px + var(--to-font-size-step));
    font-weight: 760;
    letter-spacing: -0.01em;
}

.to-shell-brand-company {
    display: block;
    margin-top: 3px;
    color: #a9bed6;
    font-size: calc(11px + var(--to-font-size-step));
    font-weight: 500;
}

.to-shell-nav {
    display: grid;
    gap: 5px;
    margin-top: 10px;
}

.to-shell-nav-item {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #d8e4f2;
    text-decoration: none;
    font-size: calc(13px + var(--to-font-size-step));
    font-weight: 560;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}

.to-shell-nav-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
}

.to-shell-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.to-shell-nav-item.is-active {
    border-color: rgba(76, 154, 255, 0.28);
    background: linear-gradient(90deg, rgba(29, 104, 198, 0.84), rgba(30, 94, 169, 0.68));
    color: #ffffff;
    box-shadow: inset 3px 0 0 #29a0ff;
}

.to-shell-nav-item.is-disabled {
    color: #9eb2c9;
    cursor: default;
}

.to-shell-nav-item.is-disabled:hover {
    background: transparent;
    color: #9eb2c9;
}

.to-shell-sidebar-footer {
    margin-top: auto;
    padding: 14px 10px 0;
    border-top: 1px solid rgba(185, 209, 234, 0.2);
    color: #8fa7c1;
    font-size: calc(10px + var(--to-font-size-step));
    line-height: 1.65;
}

.to-shell-sidebar-footer strong {
    display: block;
    color: #b8cbe0;
    font-weight: 600;
}

.to-shell-main {
    min-width: 0;
    min-height: 100vh;
}

.to-shell-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--to2-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 22px;
    border-bottom: 1px solid var(--to2-border);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}

.to-shell-breadcrumb {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--to2-text);
    font-size: calc(13px + var(--to-font-size-step));
    font-weight: 700;
}

.to-shell-breadcrumb-home {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #66809f;
    border-right: 1px solid var(--to2-border);
    padding-right: 10px;
}

.to-shell-breadcrumb-home svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.to-shell-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.to-shell-scope {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--to2-border-strong);
    border-radius: 8px;
    background: #ffffff;
    color: #28415f;
    font-size: calc(12px + var(--to-font-size-step));
    font-weight: 650;
}

.to-shell-scope svg {
    width: 16px;
    height: 16px;
    stroke: #547392;
}

.to-shell-notification {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid var(--to2-border);
    background: transparent;
    color: #49647f;
    opacity: 0.72;
}

.to-shell-notification svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.to-shell-user {
    position: relative;
}

.to-shell-user > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 3px 7px;
    border-radius: 8px;
    cursor: pointer;
}

.to-shell-user > summary::-webkit-details-marker {
    display: none;
}

.to-shell-user > summary:hover {
    background: #f4f7fb;
}

.to-shell-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #0d2848;
    color: #ffffff;
    font-size: calc(11px + var(--to-font-size-step));
    font-weight: 800;
}

.to-shell-user-copy {
    display: grid;
    gap: 1px;
    text-align: left;
    line-height: 1.25;
}

.to-shell-user-copy strong {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--to2-text);
    font-size: calc(11px + var(--to-font-size-step));
    white-space: nowrap;
}

.to-shell-user-copy span {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--to2-muted);
    font-size: calc(9px + var(--to-font-size-step));
    white-space: nowrap;
}

.to-shell-user-chevron {
    color: #69809a;
    font-size: 12px;
}

.to-shell-user-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 7px);
    width: 210px;
    padding: 7px;
    border: 1px solid var(--to2-border);
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(16, 33, 62, 0.14);
}

.to-shell-user-menu a,
.to-shell-user-menu button {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #263d59;
    text-align: left;
    text-decoration: none;
    font-size: calc(12px + var(--to-font-size-step));
    font-weight: 600;
    cursor: pointer;
}

.to-shell-user-menu a:hover,
.to-shell-user-menu button:hover {
    background: #f1f6fc;
}

.to-shell-user-menu form {
    margin: 0;
}

.to-shell-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 20px 42px;
}

.to-shell-content--tracking {
    overflow: visible;
}

.to-shell-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 16px;
}

.to-shell-page-heading h1 {
    margin: 0 0 4px;
    color: var(--to2-text);
    font-size: calc(27px + var(--to-font-size-step));
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.to-shell-page-heading p {
    margin: 0;
    color: var(--to2-muted);
    font-size: calc(13px + var(--to-font-size-step));
    line-height: 1.5;
}

.to-shell-stage-card {
    border: 1px solid var(--to2-border);
    border-radius: var(--to2-radius);
    background: #ffffff;
    box-shadow: var(--to2-shadow);
}

.to-shell-stage-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
}

.to-shell-stage-card h2 {
    margin: 0 0 6px;
    color: var(--to2-text);
    font-size: calc(17px + var(--to-font-size-step));
}

.to-shell-stage-card p {
    margin: 0;
    color: var(--to2-muted);
    font-size: calc(13px + var(--to-font-size-step));
    line-height: 1.55;
}

.to-shell-primary-action {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--to2-blue-600);
    border-radius: 7px;
    background: var(--to2-blue-600);
    color: #ffffff !important;
    box-shadow: 0 5px 13px rgba(20, 105, 232, 0.18);
    font-size: calc(12px + var(--to-font-size-step));
    font-weight: 700;
    text-decoration: none;
}

.to-shell-status {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #b8dfcc;
    border-radius: 7px;
    background: #eef9f3;
    color: #176b49;
    font-size: calc(12px + var(--to-font-size-step));
    font-weight: 650;
}

.to-shell-form-card {
    max-width: 940px;
    border: 1px solid var(--to2-border);
    border-radius: var(--to2-radius);
    background: #ffffff;
    box-shadow: var(--to2-shadow);
}

.to-shell-form-card-body {
    padding: 24px;
}

.to-shell-form-card form {
    display: grid;
    gap: 15px;
}

.to-shell-form-field {
    display: grid;
    gap: 6px;
}

.to-shell-form-field label {
    color: #1f3551;
    font-size: calc(12px + var(--to-font-size-step));
    font-weight: 700;
}

.to-shell-form-field input {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--to2-border-strong);
    border-radius: 7px;
    background: #ffffff;
}

.to-shell-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 5px;
}

.to-shell-secondary-action,
.to-shell-submit {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 7px;
    font: inherit;
    font-size: calc(12px + var(--to-font-size-step));
    font-weight: 700;
    cursor: pointer;
}

.to-shell-secondary-action {
    border: 1px solid var(--to2-border-strong);
    background: #ffffff;
    color: #2b405b;
}

.to-shell-submit {
    border: 1px solid var(--to2-blue-600);
    background: var(--to2-blue-600);
    color: #ffffff;
}

.to-shell-errors {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #f0b8b8;
    border-radius: 7px;
    background: #fff3f3;
    color: #9a3030;
    font-size: calc(12px + var(--to-font-size-step));
}

.to-shell-errors ul {
    margin: 0;
    padding-left: 18px;
}

.to-shell .hero {
    margin-top: 2px;
}

/* Existing Tracking Orders remains functionally intact in W2.1.
   W2.3 owns its final approved list/filter/table visual transformation. */
.to-shell-content--tracking .hero {
    margin-bottom: 14px;
}

@media (max-width: 980px) {
    .to-shell {
        grid-template-columns: 1fr;
    }

    .to-shell-sidebar {
        position: relative;
        height: auto;
    }

    .to-shell-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .to-shell-sidebar-footer {
        display: none;
    }

    .to-shell-topbar {
        position: relative;
        padding: 8px 14px;
    }
}

@media (max-width: 680px) {
    .to-shell-nav {
        grid-template-columns: 1fr;
    }

    .to-shell-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .to-shell-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .to-shell-user-copy {
        display: none;
    }

    .to-shell-content {
        padding: 14px 12px 34px;
    }

    .to-shell-page-heading {
        flex-direction: column;
    }

    .to-shell-stage-card-body {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
 * AI-W2.1-P2 — RESTRAINED RADIUS REFINEMENT
 * Direction: operational enterprise / compact geometry
 * Keep semantic pills and avatars intentionally rounded.
 * ============================================================ */

:root {
    --to-radius-sm: 4px;
    --to-radius-md: 5px;
    --to-radius-lg: 6px;
    --to2-radius: 4px;
}

/* Shared authenticated shell */
.to-shell-nav-item {
    border-radius: 4px;
}

.to-shell-scope {
    border-radius: 4px;
}

.to-shell-user > summary {
    border-radius: 4px;
}

.to-shell-user-menu {
    border-radius: 5px;
}

.to-shell-user-menu a,
.to-shell-user-menu button {
    border-radius: 3px;
}

.to-shell-primary-action,
.to-shell-secondary-action,
.to-shell-submit,
.to-shell-form-field input,
.to-shell-status,
.to-shell-errors {
    border-radius: 4px;
}

/* Existing Tracking Orders surface before its dedicated W2.3 redesign.
   Higher specificity intentionally overrides legacy inline radius values. */
body.to-shell-app.to-app--tracking .advanced-dialog {
    border-radius: 6px;
}

body.to-shell-app.to-app--tracking .choice-box {
    border-radius: 4px;
}

body.to-shell-app.to-app--tracking .disclosure-icon,
body.to-shell-app.to-app--tracking .order-fallback-link {
    border-radius: 3px;
}

/* Preserve semantic shapes:
   .scope-pill / .pill / .status remain pill-shaped.
   .to-shell-avatar / .inline-spinner remain circular. */

/* ============================================================
 * AI-W2.2-P1-R1 — DASHBOARD
 * Approved composition + real scoped V2 data contract.
 * ============================================================ */

.to-dashboard {
    display: grid;
    gap: 14px;
}

.to-dashboard-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.to-dashboard-heading h1 {
    margin: 0 0 4px;
    color: var(--to2-text);
    font-size: calc(27px + var(--to-font-size-step));
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.to-dashboard-heading p {
    margin: 0;
    color: var(--to2-muted);
    font-size: calc(12px + var(--to-font-size-step));
}

.to-dashboard-date {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #405976;
    font-size: calc(11px + var(--to-font-size-step));
}

.to-dashboard-date svg {
    width: 19px;
    height: 19px;
    stroke: #55708e;
}

.to-dashboard-date span {
    display: grid;
    gap: 2px;
}

.to-dashboard-date strong {
    color: var(--to2-text);
    font-size: calc(11px + var(--to-font-size-step));
}

.to-dashboard-date small {
    color: var(--to2-muted);
    font-size: calc(10px + var(--to-font-size-step));
}

.to-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.to-dashboard-kpi {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 105px;
    padding: 15px;
    border: 1px solid var(--to2-border);
    border-radius: var(--to2-radius);
    background: #ffffff;
    box-shadow: var(--to2-shadow);
}

.to-dashboard-kpi-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.to-dashboard-kpi-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.7;
}

.to-dashboard-kpi-icon.is-blue {
    background: #eaf3ff;
    color: #176ee6;
}

.to-dashboard-kpi-icon.is-amber {
    background: #fff5df;
    color: #d88a00;
}

.to-dashboard-kpi-icon.is-green {
    background: #e9f8f0;
    color: #178b57;
}

.to-dashboard-kpi-icon.is-red {
    background: #fff0f0;
    color: #d64242;
}

.to-dashboard-kpi > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.to-dashboard-kpi-label {
    color: #3f5570;
    font-size: calc(11px + var(--to-font-size-step));
    font-weight: 700;
}

.to-dashboard-kpi strong {
    color: var(--to2-text);
    font-size: calc(24px + var(--to-font-size-step));
    line-height: 1;
    letter-spacing: -0.025em;
}

.to-dashboard-kpi small {
    overflow: hidden;
    color: var(--to2-muted);
    font-size: calc(9px + var(--to-font-size-step));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.to-dashboard-primary-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(280px, 0.95fr);
    gap: 12px;
}

.to-dashboard-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 12px;
}

.to-dashboard-secondary-grid.is-buyer {
    grid-template-columns: minmax(0, 1fr);
}

.to-dashboard-panel {
    min-width: 0;
    border: 1px solid var(--to2-border);
    border-radius: var(--to2-radius);
    background: #ffffff;
    box-shadow: var(--to2-shadow);
}

.to-dashboard-panel-header {
    min-height: 63px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px 11px;
    border-bottom: 1px solid var(--to2-border);
}

.to-dashboard-panel-header h2 {
    margin: 0 0 2px;
    color: var(--to2-text);
    font-size: calc(15px + var(--to-font-size-step));
    line-height: 1.25;
}

.to-dashboard-panel-header p {
    margin: 0;
    color: var(--to2-muted);
    font-size: calc(10px + var(--to-font-size-step));
    line-height: 1.4;
}

.to-dashboard-panel-header > a {
    padding-top: 3px;
    color: var(--to2-blue-600);
    font-size: calc(10px + var(--to-font-size-step));
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.to-dashboard-table-wrap {
    overflow-x: auto;
}

.to-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(10px + var(--to-font-size-step));
}

.to-dashboard-table th {
    padding: 9px 11px;
    background: #f6f8fb;
    color: #526781;
    font-size: calc(9px + var(--to-font-size-step));
    font-weight: 800;
    letter-spacing: 0.025em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.to-dashboard-table td {
    padding: 10px 11px;
    border-top: 1px solid #edf1f6;
    color: #314861;
    vertical-align: middle;
    white-space: nowrap;
}

.to-dashboard-order-link {
    color: var(--to2-blue-600);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.to-dashboard-status {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: calc(8px + var(--to-font-size-step));
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.to-dashboard-status.is-process {
    background: #e7f1ff;
    color: #1366d6;
}

.to-dashboard-status.is-shipped {
    background: #e7f7ef;
    color: #15784d;
}

.to-dashboard-status.is-pending {
    background: #fff4dc;
    color: #a96900;
}

.to-dashboard-status.is-cancelled {
    background: #ffeded;
    color: #bb3232;
}

.to-dashboard-status.is-credit {
    background: #f1edff;
    color: #6950aa;
}

.to-dashboard-status.is-neutral {
    background: #eef2f6;
    color: #5d6e82;
}

.to-dashboard-attention {
    display: grid;
}

.to-dashboard-attention-row {
    min-height: 58px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border-bottom: 1px solid #edf1f6;
    color: #405671;
    font-size: calc(10px + var(--to-font-size-step));
    text-decoration: none;
}

.to-dashboard-attention-row:last-child {
    border-bottom: 0;
}

a.to-dashboard-attention-row:hover {
    background: #f9fbfe;
}

.to-dashboard-attention-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #fff0f0;
    color: #d64242;
}

.to-dashboard-attention-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
}

.to-dashboard-attention-row strong {
    color: #c93030;
    font-size: calc(15px + var(--to-font-size-step));
}

.to-dashboard-attention-note {
    color: var(--to2-muted);
    font-size: calc(9px + var(--to-font-size-step));
}

.to-dashboard-status-overview {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 17px 15px 18px;
}

.to-dashboard-donut {
    width: 142px;
    height: 142px;
    display: grid;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    background:
        conic-gradient(
            #3d8df5 0 var(--process-end),
            #3ca871 var(--process-end) var(--shipped-end),
            #e9a62f var(--shipped-end) var(--pending-end),
            #d55252 var(--pending-end) var(--cancelled-end),
            #8467c7 var(--cancelled-end) var(--credit-end),
            #edf1f5 var(--credit-end) 100%
        );
}

.to-dashboard-donut::before {
    grid-area: 1 / 1;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
}

.to-dashboard-donut > span {
    z-index: 1;
    grid-area: 1 / 1;
    display: grid;
    gap: 2px;
    text-align: center;
}

.to-dashboard-donut strong {
    color: var(--to2-text);
    font-size: calc(17px + var(--to-font-size-step));
}

.to-dashboard-donut small {
    color: var(--to2-muted);
    font-size: calc(9px + var(--to-font-size-step));
}

.to-dashboard-status-legend {
    display: grid;
    gap: 0;
}

.to-dashboard-status-row {
    min-height: 30px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto 42px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #edf1f6;
    color: #455c75;
    font-size: calc(10px + var(--to-font-size-step));
}

.to-dashboard-status-row:last-child {
    border-bottom: 0;
}

.to-dashboard-status-row strong {
    color: #233b57;
    font-size: calc(10px + var(--to-font-size-step));
}

.to-dashboard-status-row small {
    color: var(--to2-muted);
    font-size: calc(9px + var(--to-font-size-step));
    text-align: right;
}

.to-dashboard-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.to-dashboard-status-dot.is-process {
    background: #3d8df5;
}

.to-dashboard-status-dot.is-shipped {
    background: #3ca871;
}

.to-dashboard-status-dot.is-pending {
    background: #e9a62f;
}

.to-dashboard-status-dot.is-cancelled {
    background: #d55252;
}

.to-dashboard-status-dot.is-credit {
    background: #8467c7;
}

.to-dashboard-buyers {
    display: grid;
    gap: 5px;
    padding: 15px;
}

.to-dashboard-buyer-row {
    min-height: 35px;
    display: grid;
    grid-template-columns: 24px minmax(100px, 1fr) auto minmax(90px, 0.9fr);
    align-items: center;
    gap: 9px;
    color: #425a75;
    font-size: calc(10px + var(--to-font-size-step));
}

.to-dashboard-buyer-rank {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f3f7;
    color: #5a6f87;
    font-size: calc(9px + var(--to-font-size-step));
    font-weight: 700;
}

.to-dashboard-buyer-name {
    overflow: hidden;
    color: #334d69;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.to-dashboard-buyer-row strong {
    color: #1d3551;
    font-size: calc(10px + var(--to-font-size-step));
}

.to-dashboard-buyer-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 2px;
    background: #edf1f5;
}

.to-dashboard-buyer-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: #3987ef;
}

.to-dashboard-empty {
    padding: 18px !important;
    color: var(--to2-muted) !important;
    text-align: center;
}

.to-dashboard-footnote {
    margin: 0;
    color: #8291a4;
    font-size: calc(9px + var(--to-font-size-step));
    text-align: right;
}

@media (max-width: 1180px) {
    .to-dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .to-dashboard-primary-grid,
    .to-dashboard-secondary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .to-dashboard-heading {
        flex-direction: column;
    }

    .to-dashboard-kpis {
        grid-template-columns: 1fr;
    }

    .to-dashboard-date {
        width: 100%;
    }

    .to-dashboard-kpi {
        min-height: 88px;
    }

    .to-dashboard-status-overview {
        grid-template-columns: 1fr;
    }

    .to-dashboard-buyer-row {
        grid-template-columns: 24px minmax(90px, 1fr) auto;
    }

    .to-dashboard-buyer-bar {
        grid-column: 2 / -1;
    }
}

/* ============================================================
 * AI-W2.3-P1 — TRACKING ORDERS LIST
 * Approved operational table framing only.
 * Detail tabs/surfaces remain deferred to AI-W2.4—W2.6.
 * ============================================================ */

body.to-w23-list .to-shell-content--tracking {
    padding-top: 20px;
    padding-bottom: 36px;
}

body.to-w23-list .tracking-list-hero {
    align-items: center;
    margin: 0 0 12px;
}

body.to-w23-list .tracking-list-hero h1 {
    margin: 0 0 3px;
    color: var(--to2-text);
    font-size: calc(27px + var(--to-font-size-step));
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

body.to-w23-list .tracking-list-hero p {
    margin: 0;
    color: var(--to2-muted);
    font-size: calc(12px + var(--to-font-size-step));
    line-height: 1.45;
}

body.to-w23-list .tracking-list-hero .scope-pill {
    min-height: 29px;
    padding: 5px 10px;
    font-size: calc(10px + var(--to-font-size-step));
}

body.to-w23-list .tracking-list-toolbar {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--to2-border);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: none;
}

body.to-w23-list .tracking-list-toolbar .primary-control-grid {
    grid-template-columns:
        minmax(320px, 1fr)
        auto;
    gap: 10px;
}

body.to-w23-list
.tracking-list-toolbar
.primary-control-grid.primary-control-grid-buyer {
    grid-template-columns:
        minmax(190px, 0.8fr)
        minmax(300px, 1.55fr)
        auto;
}

body.to-w23-list .tracking-list-toolbar .field {
    gap: 5px;
}

body.to-w23-list .tracking-list-toolbar .field label,
body.to-w23-list .tracking-list-toolbar .field-title {
    color: #344b66;
    font-size: calc(10px + var(--to-font-size-step));
    font-weight: 750;
}

body.to-w23-list .tracking-list-toolbar input[type="text"],
body.to-w23-list .tracking-list-toolbar input[type="date"],
body.to-w23-list .tracking-list-toolbar select {
    min-height: 36px;
    padding: 7px 10px;
    border-color: #cdd8e5;
    border-radius: 4px;
    color: #233a55;
    font-size: calc(11px + var(--to-font-size-step));
    box-shadow: none;
}

body.to-w23-list .tracking-list-toolbar .primary-search input {
    min-height: 36px;
    font-size: calc(11px + var(--to-font-size-step));
}

body.to-w23-list .tracking-list-toolbar .primary-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: nowrap;
}

body.to-w23-list .tracking-list-toolbar .primary-actions .button,
body.to-w23-list .tracking-list-toolbar .advanced-actions .button {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: none;
    font-size:
        var(
            --to-content-control-size
        );
    font-weight: 750;
    white-space: nowrap;
}

body.to-w23-list .tracking-list-toolbar .button-primary {
    box-shadow: 0 4px 10px rgba(31, 101, 217, 0.14);
}

body.to-w23-list .advanced-dialog {
    width: min(780px, calc(100vw - 30px));
    border: 1px solid #cad6e4;
    border-radius: 5px;
    box-shadow: 0 20px 55px rgba(13, 39, 66, 0.22);
}

body.to-w23-list .advanced-dialog::backdrop {
    background: rgba(8, 29, 50, 0.45);
}

body.to-w23-list .advanced-header {
    min-height: 52px;
    padding: 12px 14px;
    border-bottom-color: #dce4ee;
}

body.to-w23-list .advanced-header h2 {
    color: #18324f;
    font-size: calc(14px + var(--to-font-size-step));
}

body.to-w23-list .advanced-body {
    gap: 13px;
    padding: 14px;
}

body.to-w23-list .advanced-grid {
    gap: 10px;
}

body.to-w23-list .choice-box {
    padding: 8px;
    border-radius: 4px;
    background: #f8fafc;
}

body.to-w23-list .choice {
    font-size: calc(10px + var(--to-font-size-step));
}

body.to-w23-list .tracking-list-table-panel {
    overflow: hidden;
    border: 1px solid var(--to2-border);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: none;
}

body.to-w23-list .tracking-list-table-meta {
    min-height: 41px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--to2-border);
    background: #ffffff;
    color: #65778c;
    font-size: calc(10px + var(--to-font-size-step));
}

body.to-w23-list .tracking-list-table-meta span:first-child {
    color: #3c526c;
    font-weight: 700;
}

body.to-w23-list .tracking-list-table-meta span:last-child {
    color: #718196;
}

body.to-w23-list .tracking-list-table-panel .table-wrap {
    border: 0;
    background: #ffffff;
}

body.to-w23-list .tracking-list-table {
    min-width: 1040px;
    table-layout: fixed;
}

body.to-w23-list
.tracking-list-table
> thead
> tr
> th {
    height: 34px;
    padding: 8px 10px;
    border-bottom: 1px solid #d7e1ec;
    background: #f4f7fa;
    color: #405875;
    font-size: calc(8.5px + var(--to-font-size-step));
    font-weight: 820;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.to-w23-list
.tracking-list-table
> tbody
> .order-row
> td {
    height: 42px;
    padding: 8px 10px;
    border-bottom: 1px solid #e8edf3;
    color: #2e455e;
    font-size: calc(10px + var(--to-font-size-step));
    line-height: 1.35;
}

body.to-w23-list
.tracking-list-table
> tbody
> .order-row:hover
> td {
    background: #f8fbff;
}

body.to-w23-list
.tracking-list-table
> tbody
> .order-row:has(.order-disclosure[aria-expanded="true"])
> td {
    background: #eef6ff;
    border-bottom-color: #c9dcf3;
}

body.to-w23-list .tracking-list-table th:nth-child(1) {
    width: 17%;
}

body.to-w23-list .tracking-list-table th:nth-child(2) {
    width: 19%;
}

body.to-w23-list .tracking-list-table th:nth-child(3) {
    width: 5%;
}

body.to-w23-list .tracking-list-table th:nth-child(4) {
    width: 8%;
}

body.to-w23-list .tracking-list-table th:nth-child(5) {
    width: 10%;
}

body.to-w23-list .tracking-list-table th:nth-child(6) {
    width: 10%;
}

body.to-w23-list .tracking-list-table th:nth-child(7) {
    width: 9%;
}

body.to-w23-list .tracking-list-table th:nth-child(8) {
    width: 22%;
}

body.to-w23-list .custom-number-cell {
    gap: 6px;
}

body.to-w23-list .order-disclosure {
    gap: 6px;
    color: #245da9;
    font-size: calc(10px + var(--to-font-size-step));
    font-weight: 730;
    text-decoration: none;
}

body.to-w23-list .order-disclosure:hover {
    color: #174b91;
    text-decoration: none;
}

body.to-w23-list .disclosure-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    border-color: #c6d3e2;
    border-radius: 3px;
    color: #48627e;
    font-size: 12px;
}

body.to-w23-list
.order-disclosure[aria-expanded="true"]
.disclosure-icon {
    border-color: #8eb4e5;
    background: #deedff;
    color: #1f63b8;
}

body.to-w23-list .order-fallback-link {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    color: #71839a;
    font-size: calc(9px + var(--to-font-size-step));
}

body.to-w23-list
.tracking-list-table
> tbody
> .order-row
> td
> .status {
    min-height: 20px;
    padding: 3px 7px;
    border: 0;
    border-radius: 999px;
    font-size: calc(8px + var(--to-font-size-step));
    font-weight: 820;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

body.to-w23-list .status[data-order-status="PROCESS"] {
    background: #e7f1ff;
    color: #155fae;
}

body.to-w23-list .status[data-order-status="SHIPPED"] {
    background: #e7f7ef;
    color: #147149;
}

body.to-w23-list .status[data-order-status="PENDING"] {
    background: #fff3d8;
    color: #9a6200;
}

body.to-w23-list .status[data-order-status="CANCEL"] {
    background: #ffeded;
    color: #b83232;
}

body.to-w23-list .status[data-order-status="CREDIT"] {
    background: #f0ecff;
    color: #6650a7;
}

body.to-w23-list
.tracking-list-table
> tbody
> .order-row
> .notes-cell {
    overflow: hidden;
    color: #50627a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.to-w23-list .tracking-list-table-panel .empty {
    padding: 28px 18px;
    color: #6f8094;
    text-align: center;
}

body.to-w23-list .tracking-list-table-panel .empty strong {
    color: #29425e;
    font-size: calc(12px + var(--to-font-size-step));
}

body.to-w23-list .tracking-list-table-panel .empty p {
    margin: 5px 0 0;
    font-size: calc(10px + var(--to-font-size-step));
}

body.to-w23-list .tracking-list-table-panel .pagination {
    min-height: 49px;
    margin: 0;
    padding: 9px 12px;
    border-top: 1px solid #dfe7f0;
    background: #ffffff;
    color: #67798f;
    font-size: calc(10px + var(--to-font-size-step));
}

body.to-w23-list
.tracking-list-table-panel
.pagination
.button {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 4px;
    box-shadow: none;
    font-size: calc(9px + var(--to-font-size-step));
}

body.to-w23-list .page-disabled {
    opacity: 0.45;
}

@media (max-width: 920px) {
    body.to-w23-list
    .tracking-list-toolbar
    .primary-control-grid,
    body.to-w23-list
    .tracking-list-toolbar
    .primary-control-grid.primary-control-grid-buyer {
        grid-template-columns: 1fr;
    }

    body.to-w23-list
    .tracking-list-toolbar
    .primary-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    body.to-w23-list
    .tracking-list-toolbar
    .primary-actions
    > * {
        width: 100%;
    }

    body.to-w23-list
    .tracking-list-toolbar
    .primary-actions
    [data-advanced-filter-open] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    body.to-w23-list .to-shell-content--tracking {
        padding: 15px 9px 28px;
    }

    body.to-w23-list .tracking-list-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        margin-bottom: 10px;
    }

    body.to-w23-list .tracking-list-hero h1 {
        font-size: calc(23px + var(--to-font-size-step));
    }

    body.to-w23-list .tracking-list-toolbar {
        padding: 10px;
    }

    body.to-w23-list .tracking-list-table-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    body.to-w23-list .advanced-grid,
    body.to-w23-list .advanced-grid-two {
        grid-template-columns: 1fr;
    }

    body.to-w23-list .tracking-list-table {
        min-width: 980px;
    }
}

/* ============================================================
 * AI-W2.4-P2-P1-R1 — PERSISTENT OPERATIONAL CONTENT SIZE
 * Small = compact density
 * Medium = default / balanced readability
 * Large = maximum operational readability
 * Sidebar and topbar core typography intentionally excluded.
 * ============================================================ */

:root {
    --to-content-table-head-size: 11.5px;
    --to-content-table-body-size: 13px;
    --to-content-label-size: 12px;
    --to-content-control-size: 13px;
    --to-content-meta-size: 12px;
    --to-content-chip-size: 10.5px;

    --to-content-detail-table-head-size: 11px;
    --to-content-detail-table-body-size: 12px;
    --to-content-detail-label-size: 11px;
    --to-content-detail-meta-size: 12px;
    --to-content-detail-chip-size: 10px;
}

html[data-content-size="small"] {
    --to-content-table-head-size: 10.5px;
    --to-content-table-body-size: 12px;
    --to-content-label-size: 11px;
    --to-content-control-size: 12px;
    --to-content-meta-size: 11px;
    --to-content-chip-size: 9.5px;

    --to-content-detail-table-head-size: 10px;
    --to-content-detail-table-body-size: 11px;
    --to-content-detail-label-size: 10px;
    --to-content-detail-meta-size: 11px;
    --to-content-detail-chip-size: 9px;
}

html[data-content-size="medium"] {
    --to-content-table-head-size: 11.5px;
    --to-content-table-body-size: 13px;
    --to-content-label-size: 12px;
    --to-content-control-size: 13px;
    --to-content-meta-size: 12px;
    --to-content-chip-size: 10.5px;

    --to-content-detail-table-head-size: 11px;
    --to-content-detail-table-body-size: 12px;
    --to-content-detail-label-size: 11px;
    --to-content-detail-meta-size: 12px;
    --to-content-detail-chip-size: 10px;
}

html[data-content-size="large"] {
    --to-content-table-head-size: 12.5px;
    --to-content-table-body-size: 14px;
    --to-content-label-size: 13px;
    --to-content-control-size: 14px;
    --to-content-meta-size: 13px;
    --to-content-chip-size: 11.5px;

    --to-content-detail-table-head-size: 12px;
    --to-content-detail-table-body-size: 13px;
    --to-content-detail-label-size: 12px;
    --to-content-detail-meta-size: 13px;
    --to-content-detail-chip-size: 11px;
}

/* User menu control stays part of shell chrome and never scales. */
.to-shell-user-menu {
    width: min(248px, calc(100vw - 24px));
}

.to-shell-content-size {
    padding: 7px 7px 9px;
}

.to-shell-content-size-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.to-shell-content-size-heading strong {
    color: #263d59;
    font-size: calc(10px + var(--to-font-size-step));
    font-weight: 760;
}

.to-shell-content-size-heading span {
    color: #7a8b9e;
    font-size: calc(8px + var(--to-font-size-step));
    font-weight: 550;
}

.to-shell-content-size-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.to-shell-user-menu
.to-shell-content-size-options
button {
    min-height: 29px;
    justify-content: center;
    padding: 5px 6px;
    border: 1px solid #d6e0eb;
    border-radius: 3px;
    background: #f8fafc;
    color: #50647b;
    font-size: calc(9px + var(--to-font-size-step));
    font-weight: 720;
    text-align: center;
}

.to-shell-user-menu
.to-shell-content-size-options
button:hover {
    border-color: #adc5df;
    background: #f0f6fd;
    color: #285c93;
}

.to-shell-user-menu
.to-shell-content-size-options
button[aria-pressed="true"] {
    border-color: #77a6d8;
    background: #e8f2ff;
    color: #185fa8;
    box-shadow:
        inset 0 0 0 1px
        rgba(24, 95, 168, 0.08);
}

.to-shell-user-menu-separator {
    height: 1px;
    margin: 2px 3px 4px;
    background: #e6ecf3;
}

/* Shared authenticated operational content. */
.to-shell-content table th {
    font-size:
        var(
            --to-content-table-head-size
        );
}

.to-shell-content table td {
    font-size:
        var(
            --to-content-table-body-size
        );
}

.to-shell-content input,
.to-shell-content select,
.to-shell-content textarea {
    font-size:
        var(
            --to-content-control-size
        );
}

.to-shell-content .field label,
.to-shell-content .field-title {
    font-size:
        var(
            --to-content-label-size
        );
}

/* Dedicated W2.3 list keeps its hierarchy while honoring preference. */
body.to-w23-list
.tracking-list-table
> thead
> tr
> th {
    font-size:
        var(
            --to-content-table-head-size
        );
}

body.to-w23-list
.tracking-list-table
> tbody
> .order-row
> td {
    font-size:
        var(
            --to-content-table-body-size
        );
}

body.to-w23-list
.tracking-list-toolbar
.field label,
body.to-w23-list
.tracking-list-toolbar
.field-title {
    font-size:
        var(
            --to-content-label-size
        );
}

body.to-w23-list
.tracking-list-toolbar
input[type="text"],
body.to-w23-list
.tracking-list-toolbar
input[type="date"],
body.to-w23-list
.tracking-list-toolbar
select,
body.to-w23-list
.tracking-list-toolbar
.primary-search input {
    font-size:
        var(
            --to-content-control-size
        );
}

body.to-w23-list
.tracking-list-table-meta,
body.to-w23-list
.tracking-list-table-panel
.pagination {
    font-size:
        var(
            --to-content-meta-size
        );
}

body.to-w23-list
.tracking-list-table
> tbody
> .order-row
> td
> .status {
    font-size:
        var(
            --to-content-chip-size
        );
}

body.to-w23-list
.order-disclosure {
    font-size:
        var(
            --to-content-table-body-size
        );
}


/* AI-W2.7-P1B Inbox / unread navigation */
.to-shell-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    margin-left: auto;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #e8f3ff;
    color: #0d6fe8;
    font-size: calc(0.72rem + var(--to-font-size-step));
    font-weight: 800;
    line-height: 1;
}

.to-shell-nav-item.is-active .to-shell-nav-badge {
    background: #ffffff;
    color: #0d6fe8;
}

.to-shell-content--inbox {
    display: grid;
    gap: 1rem;
}

.to-inbox-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.to-inbox-heading h1 {
    margin: 0 0 0.25rem;
    color: #172033;
    font-size: calc(clamp(1.45rem, 2vw, 2rem) + var(--to-font-size-step));
}

.to-inbox-heading p {
    margin: 0;
    color: #697386;
    font-size: calc(0.9rem + var(--to-font-size-step));
}

.to-inbox-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.to-inbox-summary-card,
.to-inbox-toolbar,
.to-inbox-group {
    border: 1px solid #dfe5ef;
    border-radius: 0.85rem;
    background: #ffffff;
}

.to-inbox-summary-card {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
}

.to-inbox-summary-card span {
    color: #697386;
    font-size: calc(0.78rem + var(--to-font-size-step));
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.to-inbox-summary-card strong {
    color: #172033;
    font-size: calc(1.5rem + var(--to-font-size-step));
}

.to-inbox-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
}

.to-inbox-toolbar-field {
    display: grid;
    gap: 0.35rem;
}

.to-inbox-toolbar-field label {
    color: #4d586c;
    font-size: calc(0.75rem + var(--to-font-size-step));
    font-weight: 750;
}

.to-inbox-toolbar-field select {
    min-height: 2.4rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid #cfd7e5;
    border-radius: 0.45rem;
    background: #ffffff;
    color: #172033;
    font: inherit;
}

.to-inbox-toolbar button,
.to-inbox-pagination a,
.to-inbox-mark-read {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid #cfd7e5;
    border-radius: 0.45rem;
    background: #ffffff;
    color: #253047;
    font: inherit;
    font-size: calc(0.8rem + var(--to-font-size-step));
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.to-inbox-group {
    overflow: hidden;
}

.to-inbox-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #e7ebf2;
    background: #f8fafc;
}

.to-inbox-group-heading h2 {
    margin: 0;
    color: #273247;
    font-size: calc(0.9rem + var(--to-font-size-step));
}

.to-inbox-group-heading span {
    color: #758095;
    font-size: calc(0.75rem + var(--to-font-size-step));
}

.to-inbox-list {
    display: grid;
}

.to-inbox-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #edf0f5;
}

.to-inbox-row:last-child {
    border-bottom: 0;
}

.to-inbox-row.is-unread {
    background: #f7fbff;
}

.to-inbox-row-main {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.to-inbox-row-topline {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.to-inbox-order {
    color: #172033;
    font-size: calc(0.95rem + var(--to-font-size-step));
    font-weight: 800;
}

.to-inbox-unread {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #e8f3ff;
    color: #0d6fe8;
    font-size: calc(0.68rem + var(--to-font-size-step));
    font-weight: 800;
    text-transform: uppercase;
}

.to-inbox-preview {
    margin: 0;
    color: #4d586c;
    font-size: calc(0.86rem + var(--to-font-size-step));
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.to-inbox-preview.is-deleted {
    color: #778196;
    font-style: italic;
}

.to-inbox-meta {
    margin-top: 0.45rem;
    color: #758095;
    font-size: calc(0.75rem + var(--to-font-size-step));
}

.to-inbox-row-actions {
    display: flex;
    align-items: center;
}

.to-inbox-mark-read[disabled] {
    cursor: wait;
    opacity: 0.65;
}

.to-inbox-action-status {
    grid-column: 1 / -1;
    min-height: 1rem;
    color: #b42318;
    font-size: calc(0.75rem + var(--to-font-size-step));
}

.to-inbox-empty {
    padding: 2.2rem 1rem;
    border: 1px solid #dfe5ef;
    border-radius: 0.85rem;
    background: #ffffff;
    color: #697386;
    text-align: center;
}

.to-inbox-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #697386;
    font-size: calc(0.8rem + var(--to-font-size-step));
}

.to-inbox-pagination-links {
    display: flex;
    gap: 0.5rem;
}

.to-inbox-pagination a.is-disabled {
    pointer-events: none;
    opacity: 0.45;
}

@media (max-width: 720px) {
    .to-inbox-heading,
    .to-inbox-toolbar,
    .to-inbox-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .to-inbox-summary {
        grid-template-columns: 1fr;
    }

    .to-inbox-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .to-inbox-row {
        grid-template-columns: 1fr;
    }

    .to-inbox-row-actions {
        justify-content: flex-start;
    }

    .to-inbox-mark-read {
        width: 100%;
    }
}

/* ============================================================
 * AI-W2.7-P2B — APPROVED CONVERSATIONS WORKSPACE
 * Buyer 2-pane / Admin 3-pane / collapsible authenticated shell
 * ============================================================ */

.to-shell {
    transition: grid-template-columns 170ms ease;
}

.to-shell-sidebar-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 6px;
}

.to-shell-sidebar-head .to-shell-brand {
    min-width: 0;
    padding-right: 0;
}

.to-shell-sidebar-toggle {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(171, 202, 233, 0.18);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.045);
    color: #b8cbe0;
    cursor: pointer;
    transition:
        background-color 150ms ease,
        color 150ms ease,
        transform 170ms ease;
}

.to-shell-sidebar-toggle:hover,
.to-shell-sidebar-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    outline: none;
}

.to-shell-sidebar-toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.to-shell.is-sidebar-collapsed {
    grid-template-columns: 72px minmax(0, 1fr);
}

.to-shell.is-sidebar-collapsed .to-shell-sidebar {
    padding-inline: 8px;
}

.to-shell.is-sidebar-collapsed .to-shell-sidebar-head {
    grid-template-columns: 1fr;
    justify-items: center;
}

.to-shell.is-sidebar-collapsed .to-shell-brand {
    width: 100%;
    justify-content: center;
    padding-inline: 0;
}

.to-shell.is-sidebar-collapsed .to-shell-brand-copy,
.to-shell.is-sidebar-collapsed .to-shell-nav-item > span:not(.to-shell-nav-badge),
.to-shell.is-sidebar-collapsed .to-shell-sidebar-footer {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.to-shell.is-sidebar-collapsed .to-shell-sidebar-toggle {
    margin-top: -7px;
    transform: rotate(180deg);
}

.to-shell.is-sidebar-collapsed .to-shell-nav {
    width: 100%;
}

.to-shell.is-sidebar-collapsed .to-shell-nav-item {
    position: relative;
    min-height: 44px;
    justify-content: center;
    gap: 0;
    padding: 10px 7px;
}

.to-shell.is-sidebar-collapsed .to-shell-nav-item.is-active {
    box-shadow: inset 2px 0 0 #29a0ff;
}

.to-shell.is-sidebar-collapsed .to-shell-nav-badge {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: calc(9px + var(--to-font-size-step));
}

.to-shell.is-sidebar-collapsed .to-shell-nav-item::after {
    content: attr(data-sidebar-label);
    position: absolute;
    left: calc(100% + 9px);
    top: 50%;
    z-index: 90;
    padding: 6px 8px;
    border: 1px solid rgba(23, 50, 82, 0.12);
    border-radius: 6px;
    background: #ffffff;
    color: #1c2f48;
    box-shadow: 0 8px 20px rgba(11, 35, 64, 0.14);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(-4px, -50%);
    transition:
        opacity 120ms ease,
        transform 120ms ease;
    white-space: nowrap;
}

.to-shell.is-sidebar-collapsed .to-shell-nav-item:hover::after,
.to-shell.is-sidebar-collapsed .to-shell-nav-item:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
}

.to-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.to-app--conversations-workspace {
    overflow: hidden;
}

body.to-app--conversations-workspace .to-shell-main {
    height: 100vh;
    overflow: hidden;
}

body.to-app--conversations-workspace .to-shell-content--inbox {
    height: calc(100vh - var(--to2-topbar-height));
    min-height: 0;
    padding: 14px 16px 16px;
    overflow: hidden;
}

.to-conv-page {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
}

.to-conv-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.to-conv-eyebrow,
.to-conv-pane-kicker {
    display: block;
    color: #71839a;
    font-size: calc(10px + var(--to-font-size-step));
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.to-conv-heading h1 {
    margin: 3px 0 2px;
    color: #172033;
    font-size: calc(24px + var(--to-font-size-step));
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.to-conv-heading p {
    margin: 0;
    color: #6e7d90;
    font-size: calc(12px + var(--to-font-size-step));
    line-height: 1.45;
}

.to-conv-heading-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #dce5ef;
    border-radius: 8px;
    background: #ffffff;
    color: #60748d;
    font-size: calc(11px + var(--to-font-size-step));
    font-weight: 700;
    white-space: nowrap;
}

.to-conv-workspace {
    min-height: 0;
    display: grid;
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(20, 46, 75, 0.055);
}

.to-conv-workspace.is-buyer {
    grid-template-columns: minmax(300px, 0.86fr) minmax(560px, 1.86fr);
}

.to-conv-workspace.is-admin {
    grid-template-columns:
        minmax(190px, 0.72fr)
        minmax(270px, 0.95fr)
        minmax(520px, 1.9fr);
}

.to-conv-pane {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.to-conv-pane + .to-conv-pane {
    border-left: 1px solid #e1e7ef;
}

.to-conv-buyers,
.to-conv-navigator {
    background: #fbfcfe;
}

.to-conv-pane-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5eaf1;
    background: #ffffff;
}

.to-conv-pane-header > div:first-child {
    min-width: 0;
}

.to-conv-pane-header strong {
    display: block;
    margin-top: 2px;
    color: #1b2a3f;
    font-size: calc(15px + var(--to-font-size-step));
}

.to-conv-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 10px 8px;
}

.to-conv-search svg {
    position: absolute;
    left: 10px;
    width: 15px;
    height: 15px;
    stroke: #71839a;
    stroke-width: 1.8;
    pointer-events: none;
}

.to-conv-search input {
    width: 100%;
    min-height: 35px;
    padding: 7px 10px 7px 32px;
    border: 1px solid #d4deea;
    border-radius: 7px;
    background: #ffffff;
    color: #233852;
    font: inherit;
    font-size: calc(11px + var(--to-font-size-step));
    outline: none;
}

.to-conv-search input:focus {
    border-color: #6facf4;
    box-shadow: 0 0 0 3px rgba(47, 133, 234, 0.1);
}

.to-conv-publication-form select {
    min-height: 31px;
    padding: 5px 25px 5px 8px;
    border: 1px solid #d7e0eb;
    border-radius: 6px;
    background: #ffffff;
    color: #425873;
    font: inherit;
    font-size: calc(10px + var(--to-font-size-step));
    font-weight: 700;
}

.to-conv-filter-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px 9px;
    border-bottom: 1px solid #e5eaf1;
}

.to-conv-filter-tabs a {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #6a7b90;
    font-size: calc(10px + var(--to-font-size-step));
    font-weight: 750;
    text-decoration: none;
}

.to-conv-filter-tabs a.is-active {
    border-color: #bdd7f8;
    background: #eef6ff;
    color: #156ccf;
}

.to-conv-filter-tabs a span {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
    border-radius: 999px;
    background: #ffffff;
    font-size: calc(9px + var(--to-font-size-step));
}

.to-conv-buyer-list,
.to-conv-list,
.to-conv-thread {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c4d0de transparent;
}

.to-conv-buyer-list {
    flex: 1 1 auto;
    padding: 0 7px 8px;
}

.to-conv-buyer-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
    padding: 8px 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: inherit;
    text-decoration: none;
    transition:
        background-color 120ms ease,
        border-color 120ms ease;
}

.to-conv-buyer-row:hover {
    background: #f1f6fc;
}

.to-conv-buyer-row.is-selected {
    border-color: #bad8fb;
    background: #eaf4ff;
}

.to-conv-buyer-avatar {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #e7eef8;
    color: #34516f;
    font-size: calc(9px + var(--to-font-size-step));
    font-weight: 850;
}

.to-conv-buyer-row.is-selected .to-conv-buyer-avatar {
    background: #1976df;
    color: #ffffff;
}

.to-conv-buyer-copy {
    min-width: 0;
}

.to-conv-buyer-copy strong,
.to-conv-buyer-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.to-conv-buyer-copy strong {
    color: #273a52;
    font-size: calc(11px + var(--to-font-size-step));
    line-height: 1.25;
}

.to-conv-buyer-copy small {
    margin-top: 3px;
    color: #7a8899;
    font-size: calc(9px + var(--to-font-size-step));
}

.to-conv-count-badge {
    min-width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
    border-radius: 999px;
    background: #dcecff;
    color: #126acb;
    font-size: calc(9px + var(--to-font-size-step));
    font-weight: 850;
}

.to-conv-list {
    flex: 1 1 auto;
}

.to-conv-row {
    display: block;
    padding: 11px 12px;
    border-bottom: 1px solid #e9edf3;
    border-left: 3px solid transparent;
    color: inherit;
    text-decoration: none;
    transition:
        background-color 120ms ease,
        border-color 120ms ease;
}

.to-conv-row:hover {
    background: #f5f8fc;
}

.to-conv-row.is-unread {
    background: #f7fbff;
}

.to-conv-row.is-selected {
    border-left-color: #2384ed;
    background: #eaf4ff;
}

.to-conv-row-top,
.to-conv-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.to-conv-row-top strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #18304d;
    font-size: calc(12px + var(--to-font-size-step));
    line-height: 1.25;
    white-space: nowrap;
}

.to-conv-row-top time {
    flex: 0 0 auto;
    color: #8390a0;
    font-size: calc(8px + var(--to-font-size-step));
}

.to-conv-row-context,
.to-conv-row-preview {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.to-conv-row-context {
    margin-top: 4px;
    color: #5f7288;
    font-size: calc(10px + var(--to-font-size-step));
    font-weight: 650;
}

.to-conv-row-preview {
    margin-top: 5px;
    color: #7a8798;
    font-size: calc(10px + var(--to-font-size-step));
    line-height: 1.35;
}

.to-conv-row-preview.is-deleted {
    font-style: italic;
}

.to-conv-row-bottom {
    margin-top: 7px;
    color: #8a96a5;
    font-size: calc(9px + var(--to-font-size-step));
}

.to-conv-unread-dot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #166dce;
    font-weight: 800;
}

.to-conv-unread-dot > span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #1d83ed;
}

.to-conv-mini-pagination {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 8px;
    border-top: 1px solid #e5eaf1;
    background: #ffffff;
    color: #7a889b;
    font-size: calc(9px + var(--to-font-size-step));
    font-weight: 700;
}

.to-conv-mini-pagination a {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e1ec;
    border-radius: 6px;
    background: #ffffff;
    color: #47627f;
    text-decoration: none;
    font-size: calc(15px + var(--to-font-size-step));
}

.to-conv-mini-pagination a.is-disabled {
    pointer-events: none;
    opacity: 0.35;
}

.to-conv-detail {
    background: #ffffff;
}

.to-conv-detail-header {
    flex: 0 0 auto;
    padding: 13px 15px 11px;
    border-bottom: 1px solid #e4e9f0;
    background: #ffffff;
}

.to-conv-detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.to-conv-detail-title-row h2 {
    margin: 2px 0 2px;
    color: #172b46;
    font-size: calc(17px + var(--to-font-size-step));
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.to-conv-detail-title-row p {
    margin: 0;
    color: #6f7e91;
    font-size: calc(10px + var(--to-font-size-step));
}

.to-conv-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.to-conv-scope-chip {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid #d7e3f1;
    border-radius: 999px;
    background: #f6f9fd;
    color: #54708e;
    font-size: calc(9px + var(--to-font-size-step));
    font-weight: 800;
}

.to-conv-button {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid #d3dde8;
    border-radius: 6px;
    background: #ffffff;
    color: #37516e;
    font: inherit;
    font-size: calc(10px + var(--to-font-size-step));
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.to-conv-button--primary {
    border-color: #1978e3;
    background: #1978e3;
    color: #ffffff !important;
}

.to-conv-button--quiet:hover,
.to-conv-button--quiet:focus-visible {
    background: #f1f6fb;
}

.to-conv-button[disabled] {
    cursor: wait;
    opacity: 0.65;
}

.to-conv-order-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 7px 12px;
    margin: 11px 0 0;
    padding-top: 9px;
    border-top: 1px solid #edf0f4;
}

.to-conv-order-meta div {
    min-width: 0;
}

.to-conv-order-meta dt {
    color: #8793a2;
    font-size: calc(8px + var(--to-font-size-step));
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.to-conv-order-meta dd {
    margin: 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #334b67;
    font-size: calc(10px + var(--to-font-size-step));
    font-weight: 700;
    white-space: nowrap;
}

.to-conv-action-status {
    min-height: 0;
    margin-top: 5px;
    color: #b42318;
    font-size: calc(9px + var(--to-font-size-step));
}

.to-conv-thread {
    flex: 1 1 auto;
    padding: 13px 14px 16px;
    background:
        linear-gradient(180deg, #fafcff 0%, #f7f9fc 100%);
}

.to-conv-comment {
    position: relative;
    margin: 0 0 10px;
    padding: 11px 12px 10px 14px;
    border: 1px solid #e0e6ee;
    border-left-width: 4px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(28, 51, 78, 0.035);
}

.to-conv-comment.is-buyer {
    border-left-color: #2788ed;
}

.to-conv-comment.is-internal {
    border-left-color: #d8a028;
}

.to-conv-comment.is-neutral {
    border-left-color: #9aa9ba;
}

.to-conv-comment.is-reply {
    margin-left: 26px;
    background: #fcfdff;
}

.to-conv-comment-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.to-conv-comment-header strong {
    display: block;
    color: #213650;
    font-size: calc(10px + var(--to-font-size-step));
}

.to-conv-comment-header > div:first-child > span {
    display: block;
    margin-top: 2px;
    color: #8090a2;
    font-size: calc(8px + var(--to-font-size-step));
    font-weight: 700;
}

.to-conv-comment-time {
    color: #8b98a7;
    font-size: calc(8px + var(--to-font-size-step));
    text-align: right;
    white-space: nowrap;
}

.to-conv-comment-time > span {
    margin-right: 4px;
    color: #5f7692;
    font-weight: 800;
}

.to-conv-comment-body {
    margin-top: 8px;
    color: #344960;
    font-size: var(--to-content-table-body-size) !important;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.to-conv-comment-deleted {
    margin: 8px 0 0;
    color: #8793a2;
    font-size: calc(10px + var(--to-font-size-step));
    font-style: italic;
}

.to-conv-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.to-conv-attachment {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 6px 8px;
    border: 1px solid #dce4ed;
    border-radius: 6px;
    background: #f7f9fc;
    color: #3e5874;
    text-decoration: none;
}

.to-conv-attachment > span:last-child {
    min-width: 0;
}

.to-conv-attachment strong,
.to-conv-attachment small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.to-conv-attachment strong {
    font-size: calc(9px + var(--to-font-size-step));
}

.to-conv-attachment small {
    margin-top: 2px;
    color: #8390a0;
    font-size: calc(8px + var(--to-font-size-step));
}

.to-conv-comment-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 7px;
}

.to-conv-reply-action,
.to-conv-reply-context button {
    border: 0;
    background: transparent;
    color: #2177d2;
    font: inherit;
    font-size: calc(9px + var(--to-font-size-step));
    font-weight: 800;
    cursor: pointer;
}

.to-conv-composer {
    flex: 0 0 auto;
    padding: 10px 13px 12px;
    border-top: 1px solid #dfe5ed;
    background: #ffffff;
}

.to-conv-reply-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #eff6ff;
    color: #4a6685;
    font-size: calc(9px + var(--to-font-size-step));
}

.to-conv-reply-context[hidden] {
    display: none;
}

.to-conv-composer textarea {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    padding: 9px 10px;
    border: 1px solid #d3dde8;
    border-radius: 7px;
    background: #ffffff;
    color: #273c55;
    font: inherit;
    font-size: calc(10.5px + var(--to-font-size-step));
    line-height: 1.45;
    outline: none;
}

.to-conv-composer textarea:focus {
    border-color: #68aaf0;
    box-shadow: 0 0 0 3px rgba(43, 129, 228, 0.09);
}

.to-conv-composer-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
}

.to-conv-attach-control {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid #d6e0ea;
    border-radius: 6px;
    color: #52708d;
    font-size: calc(9px + var(--to-font-size-step));
    font-weight: 800;
    cursor: pointer;
}

.to-conv-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.to-conv-file-summary {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #8996a6;
    font-size: calc(8px + var(--to-font-size-step));
    white-space: nowrap;
}

.to-conv-empty,
.to-conv-detail-empty {
    color: #7a899b;
    text-align: center;
}

.to-conv-empty {
    padding: 28px 14px;
}

.to-conv-empty strong,
.to-conv-empty span {
    display: block;
}

.to-conv-empty strong {
    color: #52677f;
    font-size: calc(11px + var(--to-font-size-step));
}

.to-conv-empty span {
    margin-top: 4px;
    font-size: calc(9px + var(--to-font-size-step));
}

.to-conv-detail-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.to-conv-detail-empty-icon {
    font-size: 25px;
    opacity: 0.55;
}

.to-conv-detail-empty strong {
    margin-top: 8px;
    color: #51677f;
    font-size: calc(12px + var(--to-font-size-step));
}

.to-conv-detail-empty p {
    margin: 4px 0 0;
    font-size: calc(10px + var(--to-font-size-step));
}

@media (max-width: 1180px) and (min-width: 981px) {
    .to-conv-workspace.is-admin {
        grid-template-columns:
            minmax(170px, 0.66fr)
            minmax(240px, 0.9fr)
            minmax(450px, 1.7fr);
    }

    .to-conv-workspace.is-buyer {
        grid-template-columns:
            minmax(280px, 0.8fr)
            minmax(500px, 1.7fr);
    }
}

@media (max-width: 980px) {
    .to-shell.is-sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .to-shell.is-sidebar-collapsed .to-shell-sidebar {
        padding: 18px 10px 14px;
    }

    .to-shell.is-sidebar-collapsed .to-shell-sidebar-head {
        grid-template-columns: minmax(0, 1fr) 32px;
        justify-items: stretch;
    }

    .to-shell.is-sidebar-collapsed .to-shell-brand {
        width: auto;
        justify-content: flex-start;
        padding: 2px 8px 18px;
    }

    .to-shell.is-sidebar-collapsed .to-shell-brand-copy,
    .to-shell.is-sidebar-collapsed .to-shell-nav-item > span:not(.to-shell-nav-badge),
    .to-shell.is-sidebar-collapsed .to-shell-sidebar-footer {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: initial !important;
        margin: initial !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
        border: initial !important;
    }

    .to-shell.is-sidebar-collapsed .to-shell-sidebar-toggle {
        margin-top: 0;
        transform: none;
    }

    .to-shell.is-sidebar-collapsed .to-shell-nav-item {
        justify-content: flex-start;
        gap: 11px;
        padding: 9px 11px;
    }

    .to-shell.is-sidebar-collapsed .to-shell-nav-badge {
        position: static;
        min-width: 1.45rem;
        height: 1.45rem;
        margin-left: auto;
        padding: 0 0.4rem;
        font-size: calc(0.72rem + var(--to-font-size-step));
    }

    .to-shell.is-sidebar-collapsed .to-shell-nav-item::after {
        display: none;
    }

    body.to-app--conversations-workspace {
        overflow: auto;
    }

    body.to-app--conversations-workspace .to-shell-main {
        height: auto;
        overflow: visible;
    }

    body.to-app--conversations-workspace .to-shell-content--inbox {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .to-conv-workspace.is-admin,
    .to-conv-workspace.is-buyer {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .to-conv-pane + .to-conv-pane {
        border-left: 0;
        border-top: 1px solid #e1e7ef;
    }

    .to-conv-buyers,
    .to-conv-navigator,
    .to-conv-detail {
        min-height: 360px;
    }

    .to-conv-buyer-list,
    .to-conv-list,
    .to-conv-thread {
        max-height: 430px;
    }
}

@media (max-width: 680px) {
    .to-conv-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .to-conv-heading-meta {
        white-space: normal;
    }

    .to-conv-detail-title-row {
        flex-direction: column;
    }

    .to-conv-detail-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .to-conv-order-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .to-conv-comment.is-reply {
        margin-left: 12px;
    }

    .to-conv-composer-footer {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .to-conv-composer-footer .to-conv-button--primary {
        width: 100%;
    }
}

/* ============================================================
 * R10K-AD-P7-M1-R2B-P2-R2-P1
 * Conversations scoped loading + persistent content-size parity.
 * Medium preserves the approved P2 visual baseline exactly.
 * ============================================================ */

body.to-app--conversations-workspace {
    /*
     * Conversations no longer owns a separate numerical scale.
     * Every local semantic level resolves into the same global
     * Small / Medium / Large contract used by Tracking Orders.
     */
    --to-conv-text-8:
        var(--to-content-detail-chip-size);
    --to-conv-text-9:
        var(--to-content-detail-label-size);
    --to-conv-text-10:
        var(--to-content-detail-meta-size);
    --to-conv-text-10-5:
        var(--to-content-chip-size);
    --to-conv-text-11:
        var(--to-content-detail-table-body-size);
    --to-conv-text-12:
        var(--to-content-table-body-size);
    --to-conv-text-15:
        var(--to-font-emphasis-size);
    --to-conv-text-17:
        var(--to-font-section-title-size);
    --to-conv-text-24:
        var(--to-font-page-title-size);
}







.to-conv-eyebrow,
.to-conv-pane-kicker,
.to-conv-publication-form select,
.to-conv-filter-tabs a,
.to-conv-row-context,
.to-conv-row-preview,
.to-conv-detail-title-row p,
.to-conv-button,
.to-conv-order-meta dd,
.to-conv-comment-header strong,
.to-conv-comment-deleted,
.to-conv-detail-empty p {
    font-size:
        var(
            --to-conv-text-10
        );
}

.to-conv-comment-body,
.to-conv-composer textarea {
    font-size:
        var(
            --to-conv-text-10-5
        );
}

.to-conv-heading-meta,
.to-conv-search input,
.to-conv-buyer-copy strong,
.to-conv-empty strong {
    font-size:
        var(
            --to-conv-text-11
        );
}

.to-conv-heading p,
.to-conv-row-top strong,
.to-conv-detail-empty strong {
    font-size:
        var(
            --to-conv-text-12
        );
}

.to-conv-pane-header strong,
.to-conv-mini-pagination a {
    font-size:
        var(
            --to-conv-text-15
        );
}

.to-conv-detail-title-row h2 {
    font-size:
        var(
            --to-conv-text-17
        );
}

.to-conv-heading h1 {
    font-size:
        var(
            --to-conv-text-24
        );
}

.to-conv-filter-tabs a span,
.to-conv-buyer-avatar,
.to-conv-buyer-copy small,
.to-conv-count-badge,
.to-conv-row-bottom,
.to-conv-mini-pagination,
.to-conv-scope-chip,
.to-conv-action-status,
.to-conv-attachment strong,
.to-conv-reply-action,
.to-conv-reply-context button,
.to-conv-reply-context,
.to-conv-attach-control,
.to-conv-empty span {
    font-size:
        var(
            --to-conv-text-9
        );
}

.to-conv-row-top time,
.to-conv-order-meta dt,
.to-conv-comment-header > div:first-child > span,
.to-conv-comment-time,
.to-conv-attachment small,
.to-conv-file-summary {
    font-size:
        var(
            --to-conv-text-8
        );
}

.to-conv-list.is-loading,
.to-conv-detail.is-loading {
    position: relative;
}

.to-conv-list.is-loading {
    min-height: 180px;
}

.to-conv-detail.is-loading {
    min-height: 220px;
}

.to-conv-list.is-loading
> :not(.to-conv-loading-state),
.to-conv-detail.is-loading
> :not(.to-conv-loading-state) {
    visibility: hidden !important;
    pointer-events: none !important;
}

.to-conv-loading-state {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.94);
    color: #60748b;
    font-size:
        var(
            --to-conv-text-10
        );
    font-weight: 700;
    text-align: center;
}

.to-conv-loading-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid #d6e5f5;
    border-top-color: #2788ed;
    border-radius: 50%;
    animation:
        to-conv-loading-spin
        700ms
        linear
        infinite;
}

@keyframes to-conv-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .to-conv-loading-spinner {
        animation: none;
    }
}

/* === TRACKING ORDER V2 GLOBAL TYPOGRAPHY CONTRACT R1 FINAL START === */
/*
 * Tracking Orders is the canonical numerical scale:
 * Small  = canonical Medium - 1px
 * Medium = canonical baseline
 * Large  = canonical Medium + 1px
 *
 * The existing --to-content-* values remain authoritative.
 * --to-font-size-step extends that same transition to text rules
 * that historically used fixed/local sizes.
 */
:root {
    --to-font-size-step: 0px;

    --to-font-page-title-size:
        calc(27px + var(--to-font-size-step));
    --to-font-section-title-size:
        calc(17px + var(--to-font-size-step));
    --to-font-emphasis-size:
        calc(15px + var(--to-font-size-step));

    --to-font-body-size:
        var(--to-content-table-body-size);
    --to-font-control-size:
        var(--to-content-control-size);
    --to-font-label-size:
        var(--to-content-label-size);
    --to-font-meta-size:
        var(--to-content-meta-size);
    --to-font-chip-size:
        var(--to-content-chip-size);

    --to-font-detail-body-size:
        var(--to-content-detail-table-body-size);
    --to-font-detail-label-size:
        var(--to-content-detail-label-size);
    --to-font-detail-meta-size:
        var(--to-content-detail-meta-size);
    --to-font-detail-chip-size:
        var(--to-content-detail-chip-size);
}

html[data-content-size="small"] {
    --to-font-size-step: -1px;
}

html[data-content-size="medium"] {
    --to-font-size-step: 0px;
}

html[data-content-size="large"] {
    --to-font-size-step: 1px;
}

/*
 * Shared authenticated shell is now explicitly INCLUDED in the
 * user-selected font-size contract. We change font-size only.
 */
.to-shell-sidebar,
.to-shell-sidebar a,
.to-shell-sidebar button,
.to-shell-sidebar span,
.to-shell-topbar,
.to-shell-topbar a,
.to-shell-topbar button,
.to-shell-topbar span {
    font-size:
        var(--to-font-body-size);
}

.to-shell-sidebar small,
.to-shell-topbar small,
.to-shell-sidebar [class*="meta"],
.to-shell-topbar [class*="meta"] {
    font-size:
        var(--to-font-meta-size);
}
/* === TRACKING ORDER V2 GLOBAL TYPOGRAPHY CONTRACT R1 FINAL END === */

/* ==========================================================
   CONVERSATIONS-UI-PARITY-R1B START
   Canonical target: approved Admin 3-column Conversations mockup.
   Presentation only. Existing data/behavior remains authoritative.
   ========================================================== */

body.to-app--conversations-workspace {
    --to-conv-parity-page-bg: #f5f8fc;
    --to-conv-parity-card-bg: #ffffff;
    --to-conv-parity-border: #dce6f2;
    --to-conv-parity-border-soft: #e8eef6;
    --to-conv-parity-text: #102a56;
    --to-conv-parity-muted: #6e82a1;
    --to-conv-parity-blue: #1675e8;
    --to-conv-parity-blue-soft: #edf5ff;
    --to-conv-parity-blue-border: #bfd8f7;
    --to-conv-parity-red: #f13f43;
    --to-conv-parity-orange: #d99a1f;
    --to-conv-parity-orange-soft: #fff5df;
    --to-conv-parity-shadow: 0 1px 2px rgba(17, 48, 86, 0.04);
    background: var(--to-conv-parity-page-bg);
}

body.to-app--conversations-workspace .to-conv-heading {
    display: grid;
    grid-template-columns: 38px max-content minmax(0, 1fr) auto;
    grid-template-areas:
        "icon title badge meta"
        "icon desc  desc  meta";
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
    margin: 0 0 14px;
    padding: 2px 2px 0;
}

body.to-app--conversations-workspace .to-conv-heading::before {
    grid-area: icon;
    content: "↳";
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #b9d6f7;
    border-radius: 9px;
    background: #eaf4ff;
    color: #0f72e5;
    font-weight: 900;
    line-height: 1;
    transform: rotate(180deg);
}

body.to-app--conversations-workspace .to-conv-heading h1 {
    grid-area: title;
    margin: 0;
    color: var(--to-conv-parity-text);
    font-size: var(--to-font-page-title-size);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

body.to-app--conversations-workspace .to-conv-heading p {
    grid-area: desc;
    margin: 0;
    color: #61789b;
    line-height: 1.45;
}

body.to-app--conversations-workspace .to-conv-eyebrow {
    grid-area: badge;
    justify-self: start;
    margin: 0;
    padding: 4px 9px;
    border: 1px solid #c9def8;
    border-radius: 999px;
    background: #edf5ff;
    color: #1768c5;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

body.to-app--conversations-workspace .to-conv-heading-meta {
    grid-area: meta;
    align-self: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #d7e3f0;
    border-radius: 7px;
    background: #ffffff;
    color: #5f7695;
    font-weight: 700;
    box-shadow: var(--to-conv-parity-shadow);
}

/*
 * Current workspace already owns Admin 3-column behavior.
 * Known structural names are covered first; the :has() fallback lets the
 * repair remain presentation-only without rewriting active Blade markup.
 */
body.to-app--conversations-workspace .to-conv-workspace,
body.to-app--conversations-workspace .to-conv-grid,
body.to-app--conversations-workspace .to-conv-columns,
body.to-app--conversations-workspace .to-conv-layout,
body.to-app--conversations-workspace .to-conv-heading + *:has(.to-conv-pane-header) {
    gap: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.to-app--conversations-workspace .to-conv-pane,
body.to-app--conversations-workspace :is(section, div):has(> .to-conv-pane-header) {
    min-width: 0;
    border: 1px solid var(--to-conv-parity-border);
    border-radius: 10px;
    background: var(--to-conv-parity-card-bg);
    box-shadow: var(--to-conv-parity-shadow);
    overflow: hidden;
}

body.to-app--conversations-workspace .to-conv-pane-header {
    min-height: 64px;
    padding: 13px 13px 9px;
    border-bottom: 0;
    background: #ffffff;
}

body.to-app--conversations-workspace .to-conv-pane-kicker {
    margin: 0;
    color: var(--to-conv-parity-text);
    font-size: var(--to-font-emphasis-size);
    font-weight: 820;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

body.to-app--conversations-workspace .to-conv-pane-header strong {
    color: var(--to-conv-parity-muted);
    font-size: var(--to-content-meta-size);
    font-weight: 650;
    line-height: 1.35;
}

body.to-app--conversations-workspace .to-conv-search,
body.to-app--conversations-workspace .to-conv-publication-form {
    padding-right: 12px;
    padding-left: 12px;
}

body.to-app--conversations-workspace .to-conv-search {
    padding-bottom: 10px;
}

body.to-app--conversations-workspace .to-conv-search input,
body.to-app--conversations-workspace .to-conv-publication-form select {
    min-height: 38px;
    border-color: #cddced;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: none;
}

body.to-app--conversations-workspace .to-conv-search input:focus,
body.to-app--conversations-workspace .to-conv-publication-form select:focus,
body.to-app--conversations-workspace .to-conv-composer textarea:focus {
    border-color: #80b7f4;
    outline: 2px solid rgba(22, 117, 232, 0.12);
    outline-offset: 0;
}

body.to-app--conversations-workspace .to-conv-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--to-conv-parity-border-soft);
}

body.to-app--conversations-workspace .to-conv-filter-tabs a {
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #d7e3f1;
    border-radius: 999px;
    background: #ffffff;
    color: #29486f;
    font-weight: 760;
    line-height: 1.1;
    text-decoration: none;
}

body.to-app--conversations-workspace .to-conv-filter-tabs a:is(
    .active,
    .is-active,
    [aria-current="page"],
    [data-active="1"]
) {
    border-color: #b8d6f8;
    background: #eaf4ff;
    color: #0068de;
}

body.to-app--conversations-workspace .to-conv-filter-tabs a span {
    display: inline-grid;
    min-width: 18px;
    min-height: 18px;
    place-items: center;
    margin-left: 4px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f1f5fa;
    color: #617793;
    font-weight: 800;
}

/* Buyers navigator */
body.to-app--conversations-workspace a:has(.to-conv-buyer-avatar) {
    margin: 0 8px 6px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    text-decoration: none;
    transition:
        border-color 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease;
}

body.to-app--conversations-workspace a:has(.to-conv-buyer-avatar):hover {
    border-color: #d4e2f2;
    background: #f8fbff;
}

body.to-app--conversations-workspace a:has(.to-conv-buyer-avatar):is(
    .active,
    .is-active,
    [aria-current="page"],
    [data-active="1"]
) {
    border-color: #bad7f8;
    background: #edf5ff;
    box-shadow: inset 3px 0 0 #1478ec;
}

body.to-app--conversations-workspace .to-conv-buyer-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid #dbe7f5;
    border-radius: 50%;
    background: #edf4fd;
    color: #215c99;
    font-weight: 850;
}

body.to-app--conversations-workspace .to-conv-buyer-copy {
    min-width: 0;
}

body.to-app--conversations-workspace .to-conv-buyer-copy strong {
    color: #16315a;
    font-weight: 790;
    line-height: 1.25;
}

body.to-app--conversations-workspace .to-conv-buyer-copy small {
    color: #7085a2;
    line-height: 1.35;
}

body.to-app--conversations-workspace .to-conv-count-badge {
    display: inline-grid;
    min-width: 22px;
    min-height: 22px;
    place-items: center;
    padding: 0 6px;
    border: 0;
    border-radius: 999px;
    background: var(--to-conv-parity-red);
    color: #ffffff;
    font-weight: 850;
    box-shadow: 0 1px 2px rgba(188, 37, 41, 0.18);
}

/* Conversation list */
body.to-app--conversations-workspace a:has(.to-conv-row-top) {
    display: block;
    margin: 0 8px 6px;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    text-decoration: none;
    transition:
        border-color 120ms ease,
        background 120ms ease;
}

body.to-app--conversations-workspace a:has(.to-conv-row-top):hover {
    border-color: #d4e2f2;
    background: #f8fbff;
}

body.to-app--conversations-workspace a:has(.to-conv-row-top):is(
    .active,
    .is-active,
    [aria-current="page"],
    [data-active="1"]
) {
    border-color: #bad7f8;
    background: #edf5ff;
    box-shadow: inset 3px 0 0 #1478ec;
}

body.to-app--conversations-workspace .to-conv-row-top,
body.to-app--conversations-workspace .to-conv-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.to-app--conversations-workspace .to-conv-row-top strong {
    color: #17355f;
    font-weight: 820;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
}

body.to-app--conversations-workspace a:has(.to-conv-row-top):hover .to-conv-row-top strong {
    color: #086fdc;
    text-decoration-color: #086fdc;
}

body.to-app--conversations-workspace .to-conv-row-context {
    margin-top: 3px;
    color: #506d94;
    font-weight: 650;
}

body.to-app--conversations-workspace .to-conv-row-preview {
    margin-top: 4px;
    color: #7387a4;
    line-height: 1.35;
}

body.to-app--conversations-workspace .to-conv-row-bottom {
    margin-top: 5px;
    color: #8797ac;
}

body.to-app--conversations-workspace .to-conv-mini-pagination {
    min-height: 42px;
    border-top: 1px solid var(--to-conv-parity-border-soft);
    background: #ffffff;
}

/* Detail header + order metadata */
body.to-app--conversations-workspace .to-conv-detail-title-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 13px 14px 10px;
    border-bottom: 0;
}

body.to-app--conversations-workspace .to-conv-detail-title-row::before {
    content: "▣";
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #bed9f7;
    border-radius: 8px;
    background: #edf5ff;
    color: #1172e5;
    font-weight: 900;
}

body.to-app--conversations-workspace .to-conv-detail-title-row h2 {
    margin: 0;
    color: var(--to-conv-parity-text);
    font-size: var(--to-font-section-title-size);
    font-weight: 840;
    letter-spacing: -0.01em;
}

body.to-app--conversations-workspace .to-conv-detail-title-row p {
    margin-top: 3px;
    color: #6f83a0;
    line-height: 1.35;
}

body.to-app--conversations-workspace .to-conv-scope-chip {
    padding: 5px 9px;
    border: 1px solid #bfdaf8;
    border-radius: 999px;
    background: #edf5ff;
    color: #2265ab;
    font-weight: 800;
}

body.to-app--conversations-workspace .to-conv-button {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 7px;
    font-weight: 760;
}

body.to-app--conversations-workspace .to-conv-order-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 0;
    margin: 0 13px 12px;
    padding: 9px 11px;
    border: 1px solid #dce7f3;
    border-radius: 8px;
    background: #f5f9ff;
}

body.to-app--conversations-workspace .to-conv-order-meta > * {
    min-width: 0;
    padding: 2px 9px;
    border-right: 1px solid #dfe8f2;
}

body.to-app--conversations-workspace .to-conv-order-meta > *:last-child {
    border-right: 0;
}

body.to-app--conversations-workspace .to-conv-order-meta dt {
    color: #7186a3;
    font-weight: 800;
    letter-spacing: 0.025em;
}

body.to-app--conversations-workspace .to-conv-order-meta dd {
    margin-top: 3px;
    color: #17365e;
    font-weight: 740;
}

/* Thread surface */
body.to-app--conversations-workspace :is(article, div):has(> .to-conv-comment-header) {
    position: relative;
    margin: 0 12px 8px;
    padding: 11px 13px 10px;
    border-top: 1px solid #dce6f1;
    border-right: 1px solid #dce6f1;
    border-bottom: 1px solid #dce6f1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

body.to-app--conversations-workspace .to-conv-comment-header {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-height: 36px;
}

body.to-app--conversations-workspace .to-conv-comment-header > div:first-of-type {
    min-width: 0;
    flex: 1 1 auto;
}

body.to-app--conversations-workspace .to-conv-comment-header strong {
    color: #16345c;
    font-weight: 820;
}

body.to-app--conversations-workspace .to-conv-comment-header > div:first-of-type > span {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    margin-top: 3px;
    padding: 2px 7px;
    border: 1px solid #cbe0f8;
    border-radius: 999px;
    background: #edf5ff;
    color: #2168b5;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

body.to-app--conversations-workspace .to-conv-comment-time {
    margin-left: auto;
    color: #8191a6;
    white-space: nowrap;
}

body.to-app--conversations-workspace .to-conv-comment-body,
body.to-app--conversations-workspace .to-conv-comment-deleted {
    margin-top: 7px;
    margin-left: 43px;
    color: #35516f;
    line-height: 1.5;
}

body.to-app--conversations-workspace .to-conv-attachment {
    margin-top: 8px;
    margin-left: 43px;
    padding: 7px 9px;
    border: 1px solid #d6e2ef;
    border-radius: 7px;
    background: #f5f9fd;
    box-shadow: none;
}

body.to-app--conversations-workspace .to-conv-attachment strong {
    color: #173b68;
    font-weight: 780;
}

body.to-app--conversations-workspace .to-conv-attachment small {
    color: #72849a;
}

body.to-app--conversations-workspace .to-conv-reply-action {
    min-height: 28px;
    margin-top: 6px;
    margin-left: 43px;
    padding: 5px 8px;
    border-radius: 6px;
    color: #0872df;
    font-weight: 760;
}

/*
 * Existing read model already exposes reply/root semantics. These selectors
 * activate the approved visual connector whenever the current renderer
 * already emits one of the conventional reply markers; no semantics are
 * inferred or fabricated by CSS.
 */
body.to-app--conversations-workspace :is(
    .to-conv-comment--reply,
    .to-conv-comment.is-reply,
    [data-is-reply="1"],
    [data-comment-reply="1"]
):has(> .to-conv-comment-header) {
    margin-left: 34px;
}

body.to-app--conversations-workspace :is(
    .to-conv-comment--reply,
    .to-conv-comment.is-reply,
    [data-is-reply="1"],
    [data-comment-reply="1"]
):has(> .to-conv-comment-header)::before {
    content: "";
    position: absolute;
    top: -9px;
    left: -23px;
    width: 18px;
    height: 25px;
    border-bottom: 2px solid #7ab4f2;
    border-left: 2px solid #7ab4f2;
    border-bottom-left-radius: 8px;
}

/* Composer */
body.to-app--conversations-workspace .to-conv-composer {
    margin: 10px 12px 12px;
    padding: 10px 11px;
    border: 1px solid #cfe0f2;
    border-radius: 9px;
    background: #f5f9ff;
    box-shadow: none;
}

body.to-app--conversations-workspace .to-conv-reply-context {
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid #c8def7;
    border-radius: 7px;
    background: #eaf4ff;
    color: #245b94;
}

body.to-app--conversations-workspace .to-conv-composer textarea {
    min-height: 72px;
    padding: 9px 10px;
    border-color: #cbd9e8;
    border-radius: 7px;
    background: #ffffff;
    color: #304b69;
    line-height: 1.5;
    resize: vertical;
}

body.to-app--conversations-workspace .to-conv-attach-control {
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid #d4e0ec;
    border-radius: 7px;
    background: #ffffff;
    color: #315678;
    font-weight: 740;
}

body.to-app--conversations-workspace .to-conv-file-summary {
    color: #788aa0;
}

/* Empty states */
body.to-app--conversations-workspace .to-conv-empty,
body.to-app--conversations-workspace .to-conv-detail-empty {
    margin: 12px;
    padding: 28px 18px;
    border: 1px dashed #cfdeee;
    border-radius: 9px;
    background: #f8fbff;
    text-align: center;
}

body.to-app--conversations-workspace .to-conv-detail-empty-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin: 0 auto 9px;
    border-radius: 50%;
    background: #eaf4ff;
    color: #1675e8;
}

/* Wide desktop: approved mockup-like proportions. */
@media (min-width: 1500px) {
    body.to-app--conversations-workspace .to-conv-workspace,
    body.to-app--conversations-workspace .to-conv-grid,
    body.to-app--conversations-workspace .to-conv-columns,
    body.to-app--conversations-workspace .to-conv-layout,
    body.to-app--conversations-workspace .to-conv-heading + *:has(.to-conv-pane-header) {
        grid-template-columns:
            minmax(270px, 0.92fr)
            minmax(310px, 1.10fr)
            minmax(560px, 2.15fr);
    }

    body.to-app--conversations-workspace .to-conv-pane-header {
        padding: 15px 15px 10px;
    }

    body.to-app--conversations-workspace .to-conv-search,
    body.to-app--conversations-workspace .to-conv-publication-form {
        padding-right: 14px;
        padding-left: 14px;
    }

    body.to-app--conversations-workspace .to-conv-filter-tabs {
        padding-right: 14px;
        padding-left: 14px;
    }
}

/* 1366-class desktop: preserve all three panes without flattening hierarchy. */
@media (min-width: 1180px) and (max-width: 1499px) {
    body.to-app--conversations-workspace .to-conv-workspace,
    body.to-app--conversations-workspace .to-conv-grid,
    body.to-app--conversations-workspace .to-conv-columns,
    body.to-app--conversations-workspace .to-conv-layout,
    body.to-app--conversations-workspace .to-conv-heading + *:has(.to-conv-pane-header) {
        grid-template-columns:
            minmax(240px, 0.88fr)
            minmax(290px, 1.08fr)
            minmax(510px, 2.20fr);
        gap: 10px;
    }

    body.to-app--conversations-workspace .to-conv-heading {
        margin-bottom: 10px;
    }

    body.to-app--conversations-workspace .to-conv-pane-header {
        min-height: 58px;
        padding: 11px 11px 8px;
    }

    body.to-app--conversations-workspace .to-conv-order-meta {
        margin-right: 10px;
        margin-left: 10px;
        padding-right: 7px;
        padding-left: 7px;
    }

    body.to-app--conversations-workspace :is(article, div):has(> .to-conv-comment-header) {
        margin-right: 9px;
        margin-left: 9px;
        padding-right: 10px;
        padding-left: 10px;
    }

    body.to-app--conversations-workspace .to-conv-composer {
        margin-right: 9px;
        margin-left: 9px;
    }
}

/* Narrow fallback: maintain order and hierarchy, never squeeze into unusable 3 panes. */
@media (max-width: 1179px) {
    body.to-app--conversations-workspace .to-conv-workspace,
    body.to-app--conversations-workspace .to-conv-grid,
    body.to-app--conversations-workspace .to-conv-columns,
    body.to-app--conversations-workspace .to-conv-layout,
    body.to-app--conversations-workspace .to-conv-heading + *:has(.to-conv-pane-header) {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.to-app--conversations-workspace .to-conv-heading {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-areas:
            "icon title"
            "icon badge"
            "desc desc"
            "meta meta";
    }

    body.to-app--conversations-workspace .to-conv-heading-meta {
        justify-self: start;
        margin-top: 4px;
    }

    body.to-app--conversations-workspace .to-conv-order-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.to-app--conversations-workspace .to-conv-order-meta > * {
        border-right: 0;
        border-bottom: 1px solid #e2eaf3;
    }
}



/* ==========================================================
   R1B GAP 1 — NUMERIC UNREAD COMMENT BADGES
   ========================================================== */

body.to-app--conversations-workspace a:has(.to-conv-buyer-avatar),
body.to-app--conversations-workspace a:has(.to-conv-row-top) {
    position: relative;
}

body.to-app--conversations-workspace
a:has(.to-conv-buyer-avatar).r1b-has-unread-count,
body.to-app--conversations-workspace
a:has(.to-conv-row-top).r1b-has-unread-count {
    padding-right: 44px;
}

body.to-app--conversations-workspace .r1b-unread-badge {
    position: absolute;
    z-index: 3;
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    padding: 0 6px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #f13f43;
    color: #ffffff;
    font-size: var(--to-content-chip-size);
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(185, 34, 39, 0.22);
}

body.to-app--conversations-workspace
a:has(.to-conv-buyer-avatar) > .r1b-unread-badge {
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
}

body.to-app--conversations-workspace
a:has(.to-conv-row-top) > .r1b-unread-badge {
    right: 9px;
    bottom: 9px;
}

body.to-app--conversations-workspace .r1b-unread-text-hidden {
    display: none !important;
}

/* ==========================================================
   R1B GAP 2 — COMMENT WHITESPACE + MOCKUP THREAD RHYTHM
   Body data is never trim()/ltrim()/rtrim() normalized.
   ========================================================== */

body.to-app--conversations-workspace .to-conv-comment-header {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 1px;
    align-items: start;
    min-height: 34px;
    padding-left: 0 !important;
}

body.to-app--conversations-workspace
.to-conv-comment-header > .to-comment-author-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: static !important;
}

body.to-app--conversations-workspace
.to-conv-comment-header > div:first-of-type {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 7px;
}

body.to-app--conversations-workspace .to-conv-comment-time {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-left: 0 !important;
    white-space: nowrap;
}

body.to-app--conversations-workspace .to-conv-comment-body,
body.to-app--conversations-workspace .to-conv-comment-deleted {
    margin-top: 3px !important;
    margin-left: 44px !important;
    padding: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
    white-space: pre-wrap !important;
}

body.to-app--conversations-workspace .to-conv-attachment {
    margin-top: 7px !important;
    margin-left: 44px !important;
}

body.to-app--conversations-workspace .to-conv-reply-action {
    margin-top: 4px !important;
    margin-left: 44px !important;
}

.tracking-detail-shell--w24 .tracking-comments-meta {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 1px;
    align-items: start;
    min-height: 34px;
    padding-left: 0 !important;
}

.tracking-detail-shell--w24
.tracking-comments-meta > .to-comment-author-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: static !important;
}

.tracking-detail-shell--w24 .tracking-comments-body,
.tracking-detail-shell--w24 .tracking-comments-deleted {
    margin-top: 3px !important;
    margin-left: 44px !important;
    padding: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
    white-space: pre-wrap !important;
}

.tracking-detail-shell--w24 .tracking-comments-attachments,
.tracking-detail-shell--w24 .tracking-comments-reply-actions,
.tracking-detail-shell--w24 .tracking-comments-mutation-actions {
    margin-left: 44px !important;
}

/* ==========================================================
   R1B GAP 3 — CANONICAL SEARCH ICON + INPUT ALIGNMENT
   Replace the existing too-left icon presentation with a single
   deterministic magnifier positioned relative to the input border.
   ========================================================== */

body.to-app--conversations-workspace .to-conv-search {
    --r1b-search-shell-inset: 12px;
    --r1b-search-icon-left: 15px;
    position: relative;
}

body.to-app--conversations-workspace .to-conv-search input {
    padding-left: 40px !important;
    padding-right: 12px !important;
    background-image: none !important;
    background-position: initial !important;
}

/* Hide any existing inline search icon so only one canonical icon remains. */
body.to-app--conversations-workspace .to-conv-search > svg,
body.to-app--conversations-workspace .to-conv-search > .search-icon,
body.to-app--conversations-workspace .to-conv-search > .to-search-icon,
body.to-app--conversations-workspace .to-conv-search > [data-search-icon] {
    display: none !important;
}

/* Magnifier circle: 15px inside the input border. */
body.to-app--conversations-workspace .to-conv-search::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 13px;
    left:
        calc(
            var(--r1b-search-shell-inset)
            + var(--r1b-search-icon-left)
        );
    width: 10px;
    height: 10px;
    border: 1.5px solid #708baa;
    border-radius: 50%;
    pointer-events: none;
}

/* Magnifier handle. */
body.to-app--conversations-workspace .to-conv-search::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 23px;
    left:
        calc(
            var(--r1b-search-shell-inset)
            + var(--r1b-search-icon-left)
            + 9px
        );
    width: 6px;
    height: 1.5px;
    border-radius: 999px;
    background: #708baa;
    transform: rotate(45deg);
    transform-origin: left center;
    pointer-events: none;
}

@media (min-width: 1500px) {
    body.to-app--conversations-workspace .to-conv-search {
        --r1b-search-shell-inset: 14px;
    }
}

/* ==========================================================
   R1B-R4 — SHORT-DESKTOP VERTICAL-BUDGET CONTRACT
   Canonical mockup stays intact on wide desktop.
   On short desktop only, remove the page intro block and give that
   vertical budget to the three-pane workspace + detail thread.
   ========================================================== */

@media
    (min-width: 1180px)
    and (max-width: 1499px)
    and (max-height: 820px) {

    /*
     * User-approved short-desktop adaptation:
     * hide the entire Conversations intro region:
     * - Admin Workspace · 3 columns
     * - Conversations
     * - descriptive subtitle
     * The breadcrumb/top shell remains untouched.
     */
    body.to-app--conversations-workspace .to-conv-heading {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /*
     * Consume the space released by the hidden intro instead of leaving
     * a blank band above or below the three-pane workspace.
     */
    body.to-app--conversations-workspace .to-conv-workspace,
    body.to-app--conversations-workspace .to-conv-grid,
    body.to-app--conversations-workspace .to-conv-columns,
    body.to-app--conversations-workspace .to-conv-layout,
    body.to-app--conversations-workspace
    .to-conv-heading + *:has(.to-conv-pane-header) {
        height: calc(100dvh - 92px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 92px) !important;
        margin-top: 0 !important;
        align-items: stretch !important;
    }

    body.to-app--conversations-workspace .to-conv-pane,
    body.to-app--conversations-workspace
    :is(section, div):has(> .to-conv-pane-header) {
        min-height: 0 !important;
    }

    /*
     * The detail pane owns the vertical budget explicitly:
     * header + metadata + composer are fixed/compact,
     * comment thread receives the remaining flexible space.
     */
    body.to-app--conversations-workspace .r1b-detail-pane {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-detail-title-row {
        flex: 0 0 auto !important;
        padding: 6px 9px 4px !important;
        gap: 7px !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-detail-title-row::before {
        width: 28px !important;
        height: 28px !important;
        border-radius: 7px !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-detail-title-row h2 {
        line-height: 1.08 !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-detail-title-row p {
        margin-top: 0 !important;
        line-height: 1.15 !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-button {
        min-height: 28px !important;
        padding: 4px 8px !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-scope-chip {
        min-height: 24px !important;
        padding: 3px 7px !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-order-meta {
        flex: 0 0 auto !important;
        margin: 0 8px 4px !important;
        padding: 4px 6px !important;
        border-radius: 7px !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-order-meta > * {
        padding: 1px 7px !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-order-meta dt {
        line-height: 1.05 !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-order-meta dd {
        margin-top: 1px !important;
        line-height: 1.15 !important;
    }

    /*
     * This is the reading surface. It must be allowed to shrink/grow within
     * the pane but must never collapse into the thin strip seen in R3.
     */
    body.to-app--conversations-workspace
    .r1b-comment-scroll-region {
        flex: 1 1 auto !important;
        min-height: 220px !important;
        max-height: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    /*
     * Composer remains fully present but deliberately compact.
     * No control is hidden: textarea + Attach file + Send Reply all remain.
     */
    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-composer {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 4px 8px 6px !important;
        padding: 5px 8px !important;
        border-radius: 8px !important;
        overflow: visible !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-reply-context {
        margin-bottom: 4px !important;
        padding: 4px 7px !important;
        line-height: 1.2 !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-reply-context:empty {
        display: none !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-composer textarea {
        min-height: 42px !important;
        max-height: 54px !important;
        padding: 6px 8px !important;
        line-height: 1.3 !important;
        resize: none !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-attach-control {
        min-height: 28px !important;
        padding: 4px 7px !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-file-summary {
        line-height: 1.15 !important;
    }

    /*
     * The last direct composer row is the action row in the retained
     * renderer. Keep it non-shrinking so Attach file / Send Reply cannot
     * be clipped by the pane.
     */
    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-composer > :last-child {
        flex: 0 0 auto !important;
        min-height: 30px !important;
        margin-top: 4px !important;
        overflow: visible !important;
    }

    body.to-app--conversations-workspace
    .r1b-detail-pane .to-conv-composer
    :is(button, .to-conv-button, .to-conv-attach-control) {
        min-height: 28px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* ==========================================================
   R1B GAP 4 — DETERMINISTIC 8-COLOR IDENTITY AVATAR PALETTE
   Same FNV-1a identity hash in PHP and browser hydration.
   ========================================================== */

.to-comment-author-avatar,
body.to-app--conversations-workspace .to-conv-buyer-avatar,
body.to-app--conversations-workspace .to-conv-row-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.01em;
    user-select: none;
}

.to-comment-author-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid transparent;
    font-size: var(--to-content-detail-meta-size);
}

.to-comment-author-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: inherit;
}

.to-comment-author-avatar__initials {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
}

body.to-app--conversations-workspace .to-conv-buyer-avatar {
    border-width: 1px !important;
    border-style: solid !important;
}

body.to-app--conversations-workspace .to-conv-row-avatar {
    position: absolute;
    top: 50%;
    left: 11px;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    border: 1px solid transparent;
    font-size: var(--to-content-meta-size);
}

body.to-app--conversations-workspace
a:has(.to-conv-row-top).r1b-has-row-avatar {
    padding-left: 52px;
}

.to-avatar-palette-0 {
    border-color: #c8dcf8 !important;
    background: #e7f1ff !important;
    color: #1768c5 !important;
}

.to-avatar-palette-1 {
    border-color: #f0d5a7 !important;
    background: #fff2dc !important;
    color: #a96508 !important;
}

.to-avatar-palette-2 {
    border-color: #dcc8f4 !important;
    background: #f2e8ff !important;
    color: #7950ad !important;
}

.to-avatar-palette-3 {
    border-color: #bde6dc !important;
    background: #ddf7f0 !important;
    color: #087e6b !important;
}

.to-avatar-palette-4 {
    border-color: #f2c7ce !important;
    background: #ffe8eb !important;
    color: #bd4054 !important;
}

.to-avatar-palette-5 {
    border-color: #bde1ee !important;
    background: #e3f7ff !important;
    color: #177890 !important;
}

.to-avatar-palette-6 {
    border-color: #cfd5f7 !important;
    background: #ecefff !important;
    color: #4b5bb8 !important;
}

.to-avatar-palette-7 {
    border-color: #efcfbd !important;
    background: #fff0e7 !important;
    color: #ae5a31 !important;
}

/* Identity color does not replace Buyer/Internal actor semantics. */
.to-comment-author-avatar.is-buyer {
    box-shadow: 0 0 0 2px #edf6ff;
}

.to-comment-author-avatar.is-internal {
    box-shadow: 0 0 0 2px #fff5df;
}

.to-comment-author-avatar.is-unknown {
    box-shadow: 0 0 0 2px #f2f5f8;
}

/* ==========================================================
   CONVERSATIONS-UI-PARITY-R1B END
   ========================================================== */

/* CONVERSATION-DETAIL-UX-R1
 * Approved Conversation Detail visual/interaction refinement.
 * R1-R14 retains the accepted compact 22px action geometry and semantic
 * amber/red/blue colors. A full-width outer flex row aligns a dedicated
 * max-content inner action group to the right. Buyer two-pane layout is
 * structurally hardened by canonical workspace/pane data attributes.
 * Backend authority remains canReply/canEdit/canDelete.
 */
.conversation-detail-source {
    display: none !important;
}

.to-conv-comment-actions.conversation-detail-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-top: 7px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
}

.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    column-gap: 4px !important;
    row-gap: 4px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group > button,
.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group > form,
.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group > form > button {
    position: static !important;
    inset: auto !important;
    float: none !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group
.conversation-detail-delete-form {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
}

.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group
.conversation-detail-action,
.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group
.to-conv-reply-action.conversation-detail-action {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 22px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font: inherit !important;
    font-size: var(--to-content-detail-label-size, 8.5px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Edit = amber/gold semantic secondary action. */
.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group
.conversation-detail-action--edit {
    border: 1px solid #dfc27a !important;
    background: #fffaf0 !important;
    color: #805b08 !important;
}

.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group
.conversation-detail-action--edit:hover,
.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group
.conversation-detail-action--edit[aria-expanded="true"] {
    border-color: #c7a54d !important;
    background: #fff4d8 !important;
    color: #684805 !important;
}

/* Delete = red semantic destructive action. */
.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group
.conversation-detail-action--delete {
    border: 1px solid #e3b0b0 !important;
    background: #fff7f7 !important;
    color: #a52b24 !important;
}

.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group
.conversation-detail-action--delete:hover {
    border-color: #cd8989 !important;
    background: #ffeded !important;
    color: #8f211b !important;
}

/* Reply = canonical blue conversational action. */
.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group
.conversation-detail-action--reply {
    border: 1px solid #b8cfe7 !important;
    background: #f4f9ff !important;
    color: #2467a9 !important;
}

.to-conv-comment-actions.conversation-detail-actions
.conversation-detail-actions-group
.conversation-detail-action--reply:hover {
    border-color: #85add6 !important;
    background: #eaf4ff !important;
    color: #1d5b99 !important;
}

.conversation-detail-delete-form {
    display: inline-flex;
    margin: 0;
}

.conversation-detail-edit-form {
    box-sizing: border-box;
    width: 100%;
    margin-top: 9px;
    padding: 10px;
    border: 1px solid #d7e3f0;
    border-radius: 8px;
    background: #f8fbff;
    box-shadow: 0 1px 2px rgba(18, 56, 95, 0.04);
}

.conversation-detail-edit-form[hidden] {
    display: none !important;
}

.conversation-detail-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.conversation-detail-edit-label {
    color: #173b67;
    font-size: var(--to-content-detail-meta-size, 10px);
    font-weight: 700;
    line-height: 1.3;
}

.conversation-detail-edit-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #6b7f95;
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.conversation-detail-edit-close:hover {
    border-color: #d4dfeb;
    background: #ffffff;
    color: #234b78;
}

.conversation-detail-edit-textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 92px;
    padding: 9px 10px;
    border: 1px solid #c9d8e8;
    border-radius: 7px;
    background: #ffffff;
    color: #22384f;
    font: inherit;
    font-size: var(--to-font-body-size);
    line-height: 1.45;
    resize: vertical;
}

.conversation-detail-edit-textarea:focus {
    outline: none;
    border-color: #6fa6df;
    box-shadow: 0 0 0 3px rgba(23, 113, 220, 0.09);
}

.conversation-detail-edit-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 8px;
}

.conversation-detail-action--cancel {
    color: #536b84;
}

.conversation-detail-action--save {
    border-color: #176fd1;
    background: #176fd1;
    color: #ffffff;
}

.conversation-detail-action--save:hover {
    border-color: #0f5fb6;
    background: #0f5fb6;
    color: #ffffff;
}

.conversation-detail-composer {
    position: relative;
}

.conversation-detail-reply-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
    padding: 7px 9px;
    border: 1px solid #cfe0f5;
    border-radius: 6px;
    background: #f3f8ff;
    color: #173b67;
    font-size: var(--to-content-detail-meta-size, 10px);
}

.conversation-detail-reply-context[hidden] {
    display: none !important;
}

.conversation-detail-cancel-reply {
    min-height: 25px;
    padding: 3px 8px;
    border: 1px solid #cfdbea;
    border-radius: 5px;
    background: #ffffff;
    color: #1557a6;
    font: inherit;
    font-size: var(--to-content-detail-meta-size, 10px);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.conversation-detail-mark-read {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 31px;
    min-width: 31px;
    height: 31px;
    padding: 0 !important;
    border: 1px solid #cfdbea !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #1768c5 !important;
    cursor: pointer;
}

.conversation-detail-mark-read:hover {
    border-color: #94b9e5 !important;
    background: #f2f7fd !important;
}

.conversation-detail-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.conversation-detail-pagination {
    display: grid !important;
    grid-template-columns: 30px minmax(62px, auto) 30px !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 7px !important;
    min-height: 38px;
    padding: 6px 8px !important;
    border-top: 1px solid #e2e9f1;
    color: #6a7f96;
    font-size: var(--to-content-detail-meta-size, 10px);
}

.conversation-detail-pagination-control,
.conversation-detail-pagination-spacer {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    height: 28px;
}

.conversation-detail-pagination-control {
    padding: 0;
    border: 1px solid #d3dfec;
    border-radius: 6px;
    background: #ffffff;
    color: #185ea9;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.conversation-detail-pagination-control:hover {
    border-color: #9fbee1;
    background: #f3f8fe;
}

.conversation-detail-pagination-control.is-disabled {
    color: #a6b4c2;
    background: #f8fafc;
    cursor: default;
}

.conversation-detail-pagination-page {
    min-width: 62px;
    text-align: center;
    color: #526b85;
    font-size: var(--to-content-detail-meta-size, 10px);
    font-weight: 700;
    white-space: nowrap;
}

/*
 * Buyer has only two panes. Bound the navigator and let detail fill all
 * remaining horizontal workspace instead of inheriting a narrow detail width.
 */
[data-conversations-workspace][data-workspace-layout="2-pane"].to-conv-workspace.is-buyer {
    display: grid !important;
    box-sizing: border-box !important;
    grid-template-columns:
        minmax(300px, 340px)
        minmax(0, 1fr) !important;
    grid-column: 1 / -1 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    justify-content: stretch !important;
}

[data-conversations-workspace][data-workspace-layout="2-pane"]
> [data-conversation-list-pane] {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-column: 1 !important;
    justify-self: stretch !important;
}

[data-conversations-workspace][data-workspace-layout="2-pane"]
> [data-conversation-detail-pane] {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-column: 2 / -1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
}

.conversation-detail-comment-card {
    transition:
        border-color 120ms ease,
        background-color 120ms ease;
}

[data-conversation-composer-mode="reply"]
.conversation-detail-composer-submit {
    min-width: 92px;
}

@media (max-width: 900px) {
    [data-conversations-workspace][data-workspace-layout="2-pane"].to-conv-workspace.is-buyer {
        grid-template-columns: 1fr !important;
    }

    [data-conversations-workspace][data-workspace-layout="2-pane"]
    > [data-conversation-list-pane],
    [data-conversations-workspace][data-workspace-layout="2-pane"]
    > [data-conversation-detail-pane] {
        grid-column: 1 !important;
    }

    .to-conv-comment-actions.conversation-detail-actions {
        justify-content: flex-end !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
    }

    .to-conv-comment-actions.conversation-detail-actions
    .conversation-detail-actions-group {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }

    .conversation-detail-edit-footer {
        justify-content: stretch;
    }

    .conversation-detail-edit-footer
    .conversation-detail-action {
        flex: 1 1 auto;
    }

    .conversation-detail-pagination {
        justify-content: space-between !important;
    }
}

/* ============================================================
 * GLOBAL-COMPOSER-TEXTAREA-BODY-SCALE-R1
 * User-entered composer textarea content is body text.
 * Small / Medium / Large = 12 / 13 / 14px globally.
 * ============================================================ */
body.to-app--conversations-workspace
.to-conv-composer textarea {
    font-size: var(--to-font-body-size) !important;
}