/* /Components/Pages/Contact.razor.rz.scp.css */
/* Contact page — layout shell only. The form card, fields, controls, segmented
   toggle, checkbox, status panels, and validation styling are the shared
   .nova-form-* vocabulary in wwwroot/css/embed.css. */

.nova-contact[b-z2y0tcmk62] {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--nova-space-6) var(--nova-space-5);
}

.nova-contact-head[b-z2y0tcmk62] {
    display: flex;
    align-items: flex-start;
    gap: var(--nova-space-4);
    margin-bottom: var(--nova-space-6);
}

.nova-contact-head h1[b-z2y0tcmk62] {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--nova-ink);
}

.nova-contact-sub[b-z2y0tcmk62] {
    margin: 0;
    color: var(--nova-ink-muted);
    line-height: 1.55;
}

/* Scoped overrides of the shared grid for this page's breakpoint. CSS isolation
   scopes these to Contact's own elements, so they outrank the global base. */
@media (max-width: 480px) {
    .nova-contact[b-z2y0tcmk62] {
        padding: var(--nova-space-5) var(--nova-space-4);
    }
    .nova-form-row--two[b-z2y0tcmk62] {
        grid-template-columns: 1fr;
    }
    .nova-form-field--span-2[b-z2y0tcmk62] {
        grid-column: span 1;
    }
}
/* /Components/Pages/Quotation.razor.rz.scp.css */
/* Quotation page — bespoke wizard chrome only. Fields, controls, labels, the
   segmented toggle, honeypot, status panels, and validation styling are the
   shared .nova-form-* vocabulary in wwwroot/css/embed.css. What stays here is
   what tracking/contact do not have: the step indicator, per-section rhythm,
   the derived-CBM output, the multi-unit textarea, the review list, and the
   Back/Continue footer. */

.nova-quote[b-5du29czarv] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--nova-space-6) var(--nova-space-5);
}

.nova-quote-head[b-5du29czarv] {
    display: flex;
    align-items: flex-start;
    gap: var(--nova-space-4);
    margin-bottom: var(--nova-space-6);
}

.nova-quote-head h1[b-5du29czarv] {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--nova-ink);
}

.nova-quote-sub[b-5du29czarv] {
    margin: 0;
    color: var(--nova-ink-muted);
    line-height: 1.55;
}

/* Step indicator — sits at the top of the form card. */
.nova-quote-steps[b-5du29czarv] {
    display: flex;
    gap: var(--nova-space-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--nova-space-6);
    counter-reset: step;
}

.nova-quote-steps li[b-5du29czarv] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--nova-space-2);
    padding: 8px 12px;
    border-radius: var(--nova-radius);
    background: var(--nova-canvas-sunken);
    color: var(--nova-ink-muted);
    font-size: 13px;
    font-weight: 500;
}

/* The number badge is the FIRST span; the label is a second span
   (.nova-quote-step-label). Scope this circle styling to the number only, or it
   also turns the label into a clipped 22px circle and out-specifies the phone
   label-hide below. */
.nova-quote-steps li > span:first-child[b-5du29czarv] {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: var(--nova-canvas);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.nova-quote-steps li.is-current[b-5du29czarv] {
    background: var(--nova-brand);
    color: var(--nova-brand-foreground);
}

.nova-quote-steps li.is-current > span:first-child[b-5du29czarv] {
    background: var(--nova-brand-foreground);
    color: var(--nova-brand);
}

.nova-quote-steps li.is-done[b-5du29czarv] {
    background: color-mix(in srgb, var(--nova-brand) 12%, transparent);
    color: var(--nova-brand);
}

/* Per-step rhythm: the section owns the single gap between its fields/rows, so
   the shared .nova-form-field carries no margin of its own. */
.nova-quote-section[b-5du29czarv] {
    display: flex;
    flex-direction: column;
    gap: var(--nova-space-4);
    margin-bottom: var(--nova-space-5);
}

.nova-quote-section h2[b-5du29czarv] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--nova-ink);
}

.nova-quote-section-h3[b-5du29czarv] {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--nova-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Derived (read-only) CBM output — a dashed control to read as calculated, not
   editable. Matches the shared control height. */
.nova-quote-derived[b-5du29czarv] {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 var(--nova-space-4);
    border-radius: var(--nova-radius);
    border: 1px dashed var(--nova-divider);
    background: var(--nova-canvas-sunken);
    color: var(--nova-ink);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.nova-quote-note[b-5du29czarv] {
    margin: 0;
    padding: 10px 12px;
    background: var(--nova-canvas-sunken);
    border-radius: var(--nova-radius);
    font-size: 12px;
    line-height: 1.5;
    color: var(--nova-ink-muted);
}

/* Multi-unit textarea (RoRo multi mode): monospace + tall so the pipe-delimited
   rows line up. Bespoke, not the shared prose control. */
.nova-quote-multiline[b-5du29czarv] {
    width: 100%;
    padding: 10px var(--nova-space-4);
    border-radius: var(--nova-radius);
    border: 1px solid var(--nova-divider);
    background: var(--nova-canvas);
    color: var(--nova-ink);
    font-family: var(--nova-font-mono);
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 200px;
}

.nova-quote-multiline:focus-visible[b-5du29czarv] {
    outline: none;
    border-color: var(--nova-brand);
    box-shadow: 0 0 0 3px var(--nova-brand-soft);
}

.nova-quote-review dl[b-5du29czarv] {
    margin: 0;
    padding: var(--nova-space-4);
    background: var(--nova-canvas-sunken);
    border-radius: var(--nova-radius);
    display: flex;
    flex-direction: column;
    gap: var(--nova-space-3);
}

.nova-quote-review dl > div[b-5du29czarv] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--nova-space-3);
}

.nova-quote-review dt[b-5du29czarv] {
    font-size: 12px;
    color: var(--nova-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}

.nova-quote-review dd[b-5du29czarv] {
    margin: 0;
    color: var(--nova-ink);
    font-size: 14px;
}

/* Card footer: the Back/Continue pair sits on a divider at the bottom of the
   form card. Not sticky — the iframe renders at full document height
   (scrolling=no + postMessage auto-height), so there is nothing to stick to. */
.nova-quote-nav[b-5du29czarv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--nova-space-3);
    padding: var(--nova-space-4) 0 0;
    border-top: 1px solid var(--nova-divider);
}

.nova-quote-back[b-5du29czarv] {
    color: var(--nova-ink-muted);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--nova-radius);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.nova-quote-back:hover[b-5du29czarv] {
    color: var(--nova-ink);
}

.nova-quote-back:focus-visible[b-5du29czarv] {
    outline: 2px solid var(--nova-brand);
    outline-offset: 2px;
}

.nova-quote-back:disabled[b-5du29czarv] {
    opacity: 0.7;
    cursor: not-allowed;
}

.nova-quote-next[b-5du29czarv] {
    height: 44px;
    padding: 0 var(--nova-space-5);
    border: none;
    border-radius: var(--nova-radius);
    background: var(--nova-brand);
    color: var(--nova-brand-foreground);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease;
}

.nova-quote-next:hover[b-5du29czarv] {
    filter: brightness(1.05);
}

.nova-quote-next:focus-visible[b-5du29czarv] {
    outline: 2px solid var(--nova-brand);
    outline-offset: 2px;
}

.nova-quote-next:disabled[b-5du29czarv] {
    opacity: 0.7;
    cursor: not-allowed;
}

.nova-quote-ref[b-5du29czarv] {
    color: var(--nova-brand);
    font-family: var(--nova-font-mono);
    font-weight: 600;
}

@media (max-width: 600px) {
    .nova-quote[b-5du29czarv] {
        padding: var(--nova-space-5) var(--nova-space-4);
    }
    /* Scoped to this page's elements, so these outrank the global grid base. */
    .nova-form-row--two[b-5du29czarv],
    .nova-form-row--three[b-5du29czarv],
    .nova-form-row--four[b-5du29czarv] {
        grid-template-columns: 1fr 1fr;
    }
    .nova-form-field--span-2[b-5du29czarv] {
        grid-column: span 1;
    }
    .nova-quote-steps li[b-5du29czarv] {
        font-size: 11px;
        padding: 6px 8px;
    }
    .nova-quote-review dl > div[b-5du29czarv] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Phone: every field row drops to a single column. Below ~480px a half-width
   cell is too narrow for the port selects (their text clips to "Select origin
   p…") and especially the date fields, whose leading calendar glyph (38px) plus
   the browser's native picker indicator leave no room for "mm/dd/yyyy". Placed
   after the 600px block so it wins under 480px; matches Contact/Tracking, which
   already collapse to one column at this breakpoint. */
@media (max-width: 480px) {
    .nova-form-row--two[b-5du29czarv],
    .nova-form-row--three[b-5du29czarv],
    .nova-form-row--four[b-5du29czarv] {
        grid-template-columns: 1fr;
    }
    /* Phone: the four step pills ("1 Route ... 4 Review") don't fit across a
       ~358px frame, so "4 Review" spilled outside. Drop the text labels and keep
       just the numbered pills (the section heading already names the step); let
       the pills shrink so the row always fits. */
    .nova-quote-step-label[b-5du29czarv] {
        display: none;
    }
    .nova-quote-steps li[b-5du29czarv] {
        justify-content: center;
        min-width: 0;
        padding: 6px;
    }
}
/* /Components/Pages/Schedules.razor.rz.scp.css */
.nova-schedules[b-4s5fgn1pjl] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--nova-space-6) var(--nova-space-5);
}

.nova-schedules-head[b-4s5fgn1pjl] {
    display: flex;
    align-items: flex-start;
    gap: var(--nova-space-4);
    margin-bottom: var(--nova-space-6);
}

.nova-schedules-head h1[b-4s5fgn1pjl] {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--nova-ink);
}

.nova-schedules-sub[b-4s5fgn1pjl] {
    margin: 0;
    color: var(--nova-ink-muted);
    line-height: 1.55;
}

.nova-schedules-form[b-4s5fgn1pjl] {
    display: grid;
    grid-template-columns: 1fr 1fr 180px auto;
    gap: var(--nova-space-3);
    align-items: end;
    padding: var(--nova-space-4);
    background: var(--nova-canvas-sunken);
    border-radius: 8px;
    margin-bottom: var(--nova-space-6);
}

.nova-schedules-field[b-4s5fgn1pjl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nova-schedules-label[b-4s5fgn1pjl] {
    font-size: 12px;
    font-weight: 500;
    color: var(--nova-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nova-schedules-field select[b-4s5fgn1pjl],
.nova-schedules-field input[b-4s5fgn1pjl] {
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--nova-divider);
    background: var(--nova-canvas);
    color: var(--nova-ink);
    font-family: inherit;
    font-size: 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.nova-schedules-field select:focus-visible[b-4s5fgn1pjl],
.nova-schedules-field input:focus-visible[b-4s5fgn1pjl] {
    outline: none;
    border-color: var(--nova-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-brand) 18%, transparent);
}

.nova-schedules-submit[b-4s5fgn1pjl] {
    height: 40px;
    padding: 0 var(--nova-space-5);
    border: none;
    border-radius: 8px;
    background: var(--nova-brand);
    color: var(--nova-brand-foreground);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease;
}

.nova-schedules-submit:hover[b-4s5fgn1pjl] {
    filter: brightness(1.05);
}

.nova-schedules-submit:focus-visible[b-4s5fgn1pjl] {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nova-brand) 18%, transparent);
}

.nova-schedules-submit:disabled[b-4s5fgn1pjl] {
    opacity: 0.65;
    cursor: not-allowed;
}

.nova-schedules-empty[b-4s5fgn1pjl],
.nova-schedules-error[b-4s5fgn1pjl] {
    padding: var(--nova-space-6);
    text-align: center;
    background: var(--nova-canvas-sunken);
    border-radius: 8px;
}

.nova-schedules-empty h2[b-4s5fgn1pjl],
.nova-schedules-error h2[b-4s5fgn1pjl] {
    margin: 0 0 var(--nova-space-2);
    font-size: 18px;
    font-weight: 600;
    color: var(--nova-ink);
}

.nova-schedules-empty p[b-4s5fgn1pjl],
.nova-schedules-error p[b-4s5fgn1pjl] {
    margin: 0;
    color: var(--nova-ink-muted);
}

.nova-schedules-fallback[b-4s5fgn1pjl] {
    display: inline-block;
    margin-top: var(--nova-space-4);
    color: var(--nova-brand);
    text-decoration: none;
    font-weight: 500;
}

.nova-schedules-fallback:hover[b-4s5fgn1pjl] {
    text-decoration: underline;
}

.nova-schedules-grid[b-4s5fgn1pjl] {
    display: flex;
    flex-direction: column;
    gap: var(--nova-space-3);
}

.nova-sailing-card[b-4s5fgn1pjl] {
    border: 1px solid var(--nova-divider);
    border-radius: 8px;
    background: var(--nova-canvas);
    padding: var(--nova-space-4) var(--nova-space-5);
}

.nova-sailing-card-head[b-4s5fgn1pjl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--nova-space-4);
    gap: var(--nova-space-4);
}

.nova-sailing-kicker[b-4s5fgn1pjl] {
    margin: 0 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nova-ink-muted);
    font-weight: 500;
}

.nova-sailing-title[b-4s5fgn1pjl] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--nova-ink);
    display: flex;
    align-items: baseline;
    gap: var(--nova-space-3);
}

.nova-sailing-voyage[b-4s5fgn1pjl] {
    font-family: var(--nova-font-mono);
    font-size: 12px;
    color: var(--nova-ink-muted);
    font-weight: 500;
    letter-spacing: 0.04em;
    background: var(--nova-canvas-sunken);
    padding: 2px 8px;
    border-radius: 4px;
}

.nova-sailing-cta[b-4s5fgn1pjl] {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--nova-brand);
    color: var(--nova-brand-foreground);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: filter 120ms ease;
}

.nova-sailing-cta:hover[b-4s5fgn1pjl] {
    filter: brightness(1.05);
}

.nova-sailing-leg[b-4s5fgn1pjl] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--nova-space-4);
    align-items: center;
}

.nova-sailing-leg div[b-4s5fgn1pjl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nova-sailing-leg dt[b-4s5fgn1pjl] {
    font-size: 11px;
    color: var(--nova-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nova-sailing-leg dd[b-4s5fgn1pjl] {
    margin: 0;
}

.nova-sailing-port[b-4s5fgn1pjl] {
    font-size: 15px;
    font-weight: 600;
    color: var(--nova-ink);
}

.nova-sailing-when[b-4s5fgn1pjl] {
    font-size: 13px;
    color: var(--nova-ink);
}

.nova-sailing-cutoff[b-4s5fgn1pjl] {
    font-size: 12px;
    color: var(--nova-ink-muted);
}

.nova-sailing-sep[b-4s5fgn1pjl] {
    color: var(--nova-ink-muted);
    font-size: 18px;
    align-self: center;
}

.nova-sailing-transit[b-4s5fgn1pjl] {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--nova-ink-muted);
}

.nova-sailing-terminal[b-4s5fgn1pjl] {
    font-size: 12px;
    color: var(--nova-ink-muted);
}

.nova-sailing-transship[b-4s5fgn1pjl] {
    margin: var(--nova-space-3) 0 0;
    padding-top: var(--nova-space-3);
    border-top: 1px solid var(--nova-divider);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nova-sailing-transship-port[b-4s5fgn1pjl] {
    margin: 0;
    font-size: 12px;
    color: var(--nova-ink);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--nova-space-3);
}

.nova-sailing-transship-label[b-4s5fgn1pjl] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--nova-ink-muted);
    font-weight: 500;
}

.nova-sailing-transship-when[b-4s5fgn1pjl] {
    color: var(--nova-ink-muted);
}

.nova-sailing-transship-onward[b-4s5fgn1pjl] {
    margin: 0;
    font-size: 12px;
    color: var(--nova-ink-muted);
    display: flex;
    align-items: baseline;
    gap: var(--nova-space-3);
}

.nova-schedules-disclaimer[b-4s5fgn1pjl] {
    margin: var(--nova-space-5) 0 0;
    padding: var(--nova-space-3) var(--nova-space-4);
    background: var(--nova-canvas-sunken);
    border-radius: 8px;
    color: var(--nova-ink-muted);
    font-size: 12px;
    line-height: 1.5;
}

.nova-sailing-card--skeleton .nova-sailing-bar[b-4s5fgn1pjl] {
    height: 12px;
    background: var(--nova-divider);
    border-radius: 4px;
    margin-bottom: var(--nova-space-3);
    animation: nova-pulse-b-4s5fgn1pjl 1.4s ease-in-out infinite;
}

.nova-sailing-card--skeleton .nova-sailing-bar--short[b-4s5fgn1pjl] {
    width: 40%;
}

@keyframes nova-pulse-b-4s5fgn1pjl {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .nova-sailing-card--skeleton .nova-sailing-bar[b-4s5fgn1pjl] {
        animation: none;
    }
}

@media (max-width: 720px) {
    .nova-schedules-form[b-4s5fgn1pjl] {
        grid-template-columns: 1fr 1fr;
    }
    .nova-schedules-submit[b-4s5fgn1pjl] {
        grid-column: 1 / -1;
    }
    .nova-sailing-card-head[b-4s5fgn1pjl] {
        flex-direction: column;
    }
    .nova-sailing-leg[b-4s5fgn1pjl] {
        grid-template-columns: 1fr;
        gap: var(--nova-space-3);
    }
    .nova-sailing-sep[b-4s5fgn1pjl] {
        display: none;
    }
}

/* Phone: stack the search fields into one column. At 2 columns on a ~360px
   phone the port selects and the 180px date input are squeezed into cramped
   half-width cells and clip their content; a single column gives each full
   width. The submit already spans 1 / -1, so it stays full width. Matches the
   single-column phone treatment on Contact/Tracking/Quotation. */
@media (max-width: 480px) {
    .nova-schedules-form[b-4s5fgn1pjl] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Tracking.razor.rz.scp.css */
/* Tracking page — focal point is the shipment timeline.
   Page-local until NovaShipmentTimeline graduates into the shared DS
   (see roadmap §Slice 3 — DS extraction is a Phase C precondition). */

.nova-track[b-utnolks0d9] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--nova-space-6) var(--nova-space-5);
}

.nova-track-head[b-utnolks0d9] {
    display: flex;
    align-items: center;
    gap: var(--nova-space-4);
    margin-bottom: var(--nova-space-6);
}

.nova-track-title[b-utnolks0d9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nova-track-title h1[b-utnolks0d9] {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--nova-ink);
}

.nova-track-form[b-utnolks0d9] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--nova-space-3);
    align-items: end;
    max-width: 520px;
    margin-bottom: var(--nova-space-6);
}

.nova-track-field[b-utnolks0d9] {
    display: flex;
    flex-direction: column;
    gap: var(--nova-space-2);
}

.nova-track-label[b-utnolks0d9] {
    font-size: 12px;
    font-weight: 500;
    color: var(--nova-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nova-track-field input[b-utnolks0d9] {
    height: 44px;
    padding: 0 var(--nova-space-4);
    border-radius: var(--nova-radius);
    border: 1px solid var(--nova-divider);
    background: var(--nova-canvas);
    color: var(--nova-ink);
    font-size: 15px;
    letter-spacing: 0.02em;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.nova-track-field input:focus[b-utnolks0d9] {
    outline: none;
    border-color: var(--nova-brand);
    box-shadow: 0 0 0 3px var(--nova-brand-soft);
}

.nova-track-submit[b-utnolks0d9] {
    height: 44px;
    padding: 0 var(--nova-space-5);
    border: none;
    border-radius: var(--nova-radius);
    background: var(--nova-brand);
    color: var(--nova-brand-foreground);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease;
}

.nova-track-submit:hover[b-utnolks0d9] {
    filter: brightness(1.05);
}

.nova-track-submit:focus-visible[b-utnolks0d9] {
    outline: none;
    box-shadow: 0 0 0 3px var(--nova-brand-soft);
}

.nova-track-submit:disabled[b-utnolks0d9] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Loading skeleton, shown while the lookup is in flight. StreamRendering flushes this
   frame to the response before the async CoreApi call completes, then streams the real
   result in over the same request (no SignalR/interactivity required). */
.nova-track-skeleton[b-utnolks0d9] {
    display: flex;
    flex-direction: column;
    gap: var(--nova-space-3);
    padding: var(--nova-space-6);
    border: 1px solid var(--nova-divider);
    border-radius: var(--nova-radius);
    background: var(--nova-canvas);
}

.nova-track-skeleton-line[b-utnolks0d9] {
    height: 14px;
    border-radius: var(--nova-radius);
    background: var(--nova-canvas-sunken);
    animation: nova-track-pulse-b-utnolks0d9 1.4s ease-in-out infinite;
}

.nova-track-skeleton-line--title[b-utnolks0d9] {
    width: 40%;
    height: 18px;
}

.nova-track-skeleton-line--short[b-utnolks0d9] {
    width: 60%;
}

@keyframes nova-track-pulse-b-utnolks0d9 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nova-track-skeleton-line[b-utnolks0d9] {
        animation: none;
    }
}

.nova-track-empty[b-utnolks0d9],
.nova-track-notfound[b-utnolks0d9],
.nova-track-error[b-utnolks0d9] {
    padding: var(--nova-space-6);
    border-radius: var(--nova-radius);
    background: var(--nova-canvas-sunken);
    text-align: center;
}

.nova-track-empty p[b-utnolks0d9],
.nova-track-notfound p[b-utnolks0d9],
.nova-track-error p[b-utnolks0d9] {
    margin: var(--nova-space-2) 0 0;
    color: var(--nova-ink-muted);
    line-height: 1.55;
}

.nova-track-notfound h2[b-utnolks0d9],
.nova-track-error h2[b-utnolks0d9] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--nova-ink);
}

/* Shipment focal card */
.nova-shipment[b-utnolks0d9] {
    border: 1px solid var(--nova-divider);
    border-radius: var(--nova-radius);
    background: var(--nova-canvas);
    box-shadow: var(--nova-shadow-low);
    overflow: hidden;
}

.nova-shipment-head[b-utnolks0d9] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--nova-space-5);
    align-items: center;
    padding: var(--nova-space-5);
    border-bottom: 1px solid var(--nova-divider);
}

.nova-shipment-kicker[b-utnolks0d9] {
    margin: 0 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nova-ink-muted);
    font-weight: 500;
}

.nova-shipment-serial[b-utnolks0d9] {
    margin: 0;
    font-family: var(--nova-font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--nova-ink);
    letter-spacing: 0.02em;
}

.nova-shipment-route[b-utnolks0d9] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--nova-space-4);
}

.nova-shipment-route div[b-utnolks0d9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.nova-shipment-route div:first-child[b-utnolks0d9] {
    text-align: left;
}

.nova-shipment-route dt[b-utnolks0d9] {
    font-size: 11px;
    color: var(--nova-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nova-shipment-route dd[b-utnolks0d9] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--nova-ink);
}

.nova-shipment-route-sep[b-utnolks0d9] {
    color: var(--nova-ink-muted);
    font-size: 18px;
    align-self: center;
    transform: translateY(8px);
}

/* Timeline — the focal point */
.nova-timeline[b-utnolks0d9] {
    list-style: none;
    margin: 0;
    padding: var(--nova-space-5);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nova-timeline-step[b-utnolks0d9] {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--nova-space-3);
    padding: var(--nova-space-3) 0;
}

.nova-timeline-step:not(:last-child)[b-utnolks0d9]::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 28px;
    bottom: -4px;
    width: 2px;
    background: var(--nova-divider);
}

.nova-timeline-marker[b-utnolks0d9] {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    border: 2px solid var(--nova-divider);
    background: var(--nova-canvas);
    align-self: start;
    position: relative;
    z-index: 1;
}

.nova-timeline-step--done .nova-timeline-marker[b-utnolks0d9] {
    border-color: var(--nova-brand);
    background: var(--nova-brand);
}

.nova-timeline-step--pending .nova-timeline-marker[b-utnolks0d9] {
    border-style: dashed;
}

.nova-timeline-title[b-utnolks0d9] {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nova-ink);
}

.nova-timeline-step--pending .nova-timeline-title[b-utnolks0d9] {
    color: var(--nova-ink-muted);
    font-weight: 500;
}

.nova-timeline-meta[b-utnolks0d9] {
    margin: 0;
    font-size: 13px;
    color: var(--nova-ink-muted);
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.nova-timeline-sep[b-utnolks0d9] {
    color: var(--nova-divider);
}

.nova-timeline-pending[b-utnolks0d9] {
    font-style: italic;
}

.nova-shipment-foot[b-utnolks0d9] {
    display: flex;
    gap: var(--nova-space-6);
    padding: var(--nova-space-4) var(--nova-space-5);
    background: var(--nova-canvas-sunken);
    border-top: 1px solid var(--nova-divider);
}

.nova-shipment-foot dt[b-utnolks0d9] {
    font-size: 11px;
    color: var(--nova-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.nova-shipment-foot dd[b-utnolks0d9] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--nova-ink);
}

@media (max-width: 480px) {
    .nova-track[b-utnolks0d9] {
        padding: var(--nova-space-5) var(--nova-space-4);
    }
    .nova-track-form[b-utnolks0d9] {
        grid-template-columns: 1fr;
    }
    .nova-shipment-head[b-utnolks0d9] {
        grid-template-columns: 1fr;
        gap: var(--nova-space-4);
    }
    .nova-shipment-route[b-utnolks0d9] {
        justify-content: flex-start;
    }
    .nova-shipment-route div[b-utnolks0d9],
    .nova-shipment-route div:first-child[b-utnolks0d9] {
        text-align: left;
    }
}
/* /Components/Shared/PoweredByLogisoft.razor.rz.scp.css */
.nova-powered-by[b-l53nuj99f7] {
    display: flex;
    justify-content: center;
    margin-top: var(--nova-space-6);
    padding-top: var(--nova-space-4);
}

.nova-powered-by-link[b-l53nuj99f7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--nova-ink-muted);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 120ms ease, color 120ms ease;
}

.nova-powered-by-link:hover[b-l53nuj99f7],
.nova-powered-by-link:focus-visible[b-l53nuj99f7] {
    opacity: 1;
    color: var(--nova-ink);
}

.nova-powered-by-link:focus-visible[b-l53nuj99f7] {
    outline: 2px solid var(--nova-brand);
    outline-offset: 3px;
    border-radius: 4px;
}

.nova-powered-by-label[b-l53nuj99f7] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nova-powered-by-mark[b-l53nuj99f7] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}