/**
 * Customer account portal (/ucet/*) — Soda system extension.
 *
 * Reuses the commerce layout, field and notice vocabulary; adds only the
 * portal-specific pieces: account sub-navigation, dashboard tiles, the order
 * list rows and the order-tracking timeline.
 *
 * The timeline is a PORT, not an interpretation. The authorised 21st.dev
 * order-tracking component owns its geometry, its two lucide markers, its
 * 1.5px connector and its type scale, transcribed literally through the
 * shared --t21-* scale in tokens.css. It carries no JavaScript and no motion,
 * because the source carries none either. The two deliberate differences are
 * documented on the block itself.
 */

/* ---- account sub-navigation --------------------------------------------- */

html.theme-soda .soda-account__nav {
    margin: 1.25rem 0 1.75rem;
}

html.theme-soda .soda-account__nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.15rem;
    margin: 0;
    padding: 0 0 .75rem;
    list-style: none;
    border-bottom: 1px solid var(--line);
}

html.theme-soda .soda-account__nav a {
    color: var(--ink-2);
    text-decoration: none;
    font-size: .92rem;
}

html.theme-soda .soda-account__nav a:hover,
html.theme-soda .soda-account__nav a:focus-visible {
    color: var(--ink);
}

html.theme-soda .soda-account__nav a.is-current {
    color: var(--ink);
    font-weight: 600;
}

html.theme-soda .soda-account__nav-logout {
    margin-left: auto;
}

html.theme-soda .soda-account__nav-logout form {
    margin: 0;
}

html.theme-soda .soda-account__notice {
    margin-bottom: 1.5rem;
}

/* ---- forms -------------------------------------------------------------- */

html.theme-soda .soda-account__form {
    display: grid;
    gap: 1.1rem;
    max-width: 30rem;
    margin-top: 1.5rem;
}

html.theme-soda .soda-account__form h2 {
    margin: 0;
    font-size: 1.05rem;
}

html.theme-soda .soda-account__columns {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    align-items: start;
}

html.theme-soda .soda-account__consent,
html.theme-soda .soda-account__switch,
html.theme-soda .soda-account__hint {
    margin: 0;
    color: var(--ink-3);
    font-size: .85rem;
}

html.theme-soda .soda-account__consent a,
html.theme-soda .soda-account__switch a {
    color: var(--ink-2);
}

/* ---- dashboard tiles ----------------------------------------------------- */

html.theme-soda .soda-account__tiles {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-top: 1.5rem;
}

html.theme-soda .soda-account__tile {
    display: grid;
    gap: .75rem;
    align-content: start;
    justify-items: start;
    padding: 1.4rem;
    border: 1px solid var(--line);
    border-radius: var(--r-control);
}

html.theme-soda .soda-account__tile h2 {
    margin: 0;
    font-size: 1rem;
}

html.theme-soda .soda-account__tile p {
    margin: 0;
    color: var(--ink-2);
    font-size: .9rem;
}

html.theme-soda .soda-account__verify {
    display: grid;
    gap: .75rem;
    justify-items: start;
    margin-bottom: 1.5rem;
}

html.theme-soda .soda-account__verify p {
    margin: 0;
}

/* ---- order list ---------------------------------------------------------- */

html.theme-soda .soda-account__orders {
    display: grid;
    gap: .85rem;
    margin-top: 1.25rem;
}

html.theme-soda .soda-account__order-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--r-control);
}

html.theme-soda .soda-account__order-main {
    display: grid;
    gap: .15rem;
    min-width: 10rem;
}

html.theme-soda .soda-account__order-number {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

html.theme-soda .soda-account__order-date {
    color: var(--ink-3);
    font-size: .82rem;
}

html.theme-soda .soda-account__order-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.15rem;
    margin-right: auto;
    color: var(--ink-2);
    font-size: .88rem;
}

html.theme-soda .soda-account__order-state {
    padding: .2rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: .78rem;
    color: var(--ink-2);
}

html.theme-soda .soda-account__order-state.is-paid {
    border-color: var(--accent);
    color: var(--ink);
}

html.theme-soda .soda-account__order-state.is-cancelled,
html.theme-soda .soda-account__order-state.is-expired {
    border-color: var(--error);
}

html.theme-soda .soda-account__pagination {
    display: flex;
    gap: .6rem;
    margin-top: 1.5rem;
    font-size: .9rem;
}

html.theme-soda .soda-account__pagination span[aria-current="page"] {
    font-weight: 700;
    color: var(--ink);
}

/* ---- order detail -------------------------------------------------------- */

html.theme-soda .soda-account__tracking,
html.theme-soda .soda-account__items,
html.theme-soda .soda-account__payment {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

html.theme-soda .soda-account__tracking h2,
html.theme-soda .soda-account__items h2,
html.theme-soda .soda-account__payment h2 {
    margin: 0;
    font-size: 1.05rem;
}

html.theme-soda .soda-account__terminal {
    justify-self: start;
    /* Sits WITH the ported timeline instead of running the full width of the
       main column: max-w-md is the tracking root's own width. */
    max-width: var(--t21-max-md);
}

/* ============================= ORDER TRACKING — PORTED, NOT DESIGNED

   The authorised 21st.dev order-tracking component is the visual authority
   for this block. Its Tailwind classes, translated one for one:

     root       w-full max-w-md          -> width:100%; max-width:28rem
     step       flex                     -> display:flex
     rail       flex flex-col items-center
     marker     h-6 w-6 shrink-0         -> 1.5rem box; flex-shrink:0
                completed -> CheckCircle2 in text-primary/70
                otherwise -> Circle in text-muted-foreground
     connector  w-[1.5px] grow           -> width:1.5px; flex-grow:1
                bg-primary/70 when the NEXT step is completed,
                bg-muted-foreground when it is not. The source reads
                steps[index + 1], never the step the connector hangs under,
                and that is ported exactly.
     body       ml-3 pb-6                -> margin-left:.75rem;
                                            padding-bottom:1.5rem, on EVERY
                                            step including the last — the
                                            source has no last-child case
     name       text-sm font-medium      -> .875rem/1.25rem, weight 500
     stamp      text-sm text-muted-foreground
     empty      text-sm text-foreground/80

   The source animates NOTHING here, and neither does this — there is no
   transition, no keyframe and no reduced-motion carve-out to write, because
   there is no motion to reduce.

   TWO DOCUMENTED DIFFERENCES:

     1. The source's marker is binary: completed or not. U Jabka's read-only
        projection carries a third, meaningful state — the step the order is
        ON, already exposed with aria-current="step". It keeps its
        distinction, drawn with the source's OWN vocabulary and no new
        geometry: the source's Circle glyph in the source's primary/70. The
        connector rule stays literal, so "completed" there still means done
        and only done, exactly as isCompleted does upstream.
     2. The list stays an <ol> of <li>. The source uses bare divs; the order
        of these steps is meaning, not decoration.
   ========================================================================== */

/* w-full max-w-md */
html.theme-soda .soda-account__timeline {
    width: 100%;
    max-width: var(--t21-max-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* flex */
html.theme-soda .soda-account__timeline-step {
    display: flex;
}

/* flex flex-col items-center */
html.theme-soda .soda-account__timeline-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* h-6 w-6 shrink-0 text-muted-foreground. `display: block` is what the
   source's Tailwind preflight gives every svg. */
html.theme-soda .soda-account__timeline-marker {
    display: block;
    width: var(--t21-size-6);
    height: var(--t21-size-6);
    flex-shrink: 0;
    color: var(--ink-2);
}

/* text-primary/70 — the completed marker and, per difference 1, the current
   one. Same colour, different glyph: CheckCircle2 against Circle. */
html.theme-soda .soda-account__timeline-step.is-done .soda-account__timeline-marker,
html.theme-soda .soda-account__timeline-step.is-current .soda-account__timeline-marker {
    color: rgba(var(--accent-rgb, 255, 211, 171), .7);
}

/* w-[1.5px] grow bg-muted-foreground */
html.theme-soda .soda-account__timeline-connector {
    width: var(--t21-hairline);
    flex-grow: 1;
    background: var(--ink-2);
}

/* bg-primary/70 — decided by the NEXT step, in the view. */
html.theme-soda .soda-account__timeline-connector.is-next-done {
    background: rgba(var(--accent-rgb, 255, 211, 171), .7);
}

/* ml-3 pb-6 */
html.theme-soda .soda-account__timeline-body {
    margin-left: var(--t21-3);
    padding-bottom: var(--t21-6);
}

/* text-sm font-medium */
html.theme-soda .soda-account__timeline-label {
    margin: 0;
    font-size: var(--t21-fs-sm);
    line-height: var(--t21-lh-sm);
    font-weight: 500;
    color: var(--ink);
}

/* text-sm text-muted-foreground */
html.theme-soda .soda-account__timeline-detail {
    margin: 0;
    font-size: var(--t21-fs-sm);
    line-height: var(--t21-lh-sm);
    color: var(--ink-2);
}

/* text-sm text-foreground/80 */
html.theme-soda .soda-account__timeline-empty {
    max-width: var(--t21-max-md);
    margin: 0;
    font-size: var(--t21-fs-sm);
    line-height: var(--t21-lh-sm);
    color: color-mix(in srgb, var(--ink) 80%, transparent);
}

/* items */

html.theme-soda .soda-account__item-list {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

html.theme-soda .soda-account__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--line);
    font-size: .92rem;
}

html.theme-soda .soda-account__item-name {
    color: var(--ink);
}

html.theme-soda .soda-account__item-spec {
    display: block;
    color: var(--ink-3);
    font-size: .82rem;
}

/* launch128 — the line's FROZEN sale terms (condition, grade, warranty) and the
   § 90 sentence. Same muted scale as the spec: these are facts about what was
   bought, not a promotion, and a pre-launch128 order simply renders none. */
html.theme-soda .soda-account__item-terms {
    display: block;
    margin-top: .2rem;
    color: var(--ink-3);
    font-size: .8rem;
    line-height: 1.45;
}

html.theme-soda .soda-account__used-agreement {
    margin: .9rem 0 0;
    font-size: .8rem;
    line-height: 1.5;
}

html.theme-soda .soda-account__item-side {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    color: var(--ink-2);
}