@import url("fonts/fonts.css");

:root {
    --paper: #f4f6f0;
    --white: #fff;
    --ink: #112d28;
    --muted: #49645a;
    --dark: #0c2722;
    --forest: #103b31;
    --nav: #235147;
    --pale: #a9c5b6;
    --lime: #ddf780;
    --mint: #ddf0e1;
    --soft: #e9f0e7;
    --line: #d9e2d9;
    --focus: #167758;
    --radius: 1rem;
    --body-font: "Inter Variable", "Noto Sans", system-ui, sans-serif;
    --heading-font: Manrope, var(--body-font);
}

:lang(zh-Hans) { --body-font: "Noto Sans SC", "Microsoft YaHei", "Noto Sans", sans-serif; --heading-font: var(--body-font); }
:lang(th) { --body-font: "Noto Sans Thai", "Noto Sans", system-ui, sans-serif; --heading-font: var(--body-font); }
:lang(my) { --body-font: Padauk, "Myanmar Text", "Noto Sans", sans-serif; --heading-font: var(--body-font); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--body-font); overflow-wrap: anywhere; }
h1, h2, h3, p, figure, dl, dd, fieldset { margin: 0; }
h1, h2, h3, .access-headline, .brand { font-family: var(--heading-font); line-height: 1.14; }
h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 800; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1rem; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
img { display: block; }
input, button, select { font: inherit; color: inherit; }
a { color: var(--forest); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.public-hero :focus-visible { outline-color: #568e7d; }
.visually-hidden, .skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip-link:focus { position: fixed; z-index: 2; inset: .5rem auto auto .5rem; padding: .5rem 1rem; background: var(--white); }

.button {
    display: inline-flex;
    gap: .4em;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding: .625rem 1rem;
    border: 1px solid var(--line);
    border-radius: .5625rem;
    background: var(--white);
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    font-size: .8125rem;
    font-weight: 650;
    line-height: 1.5;
    cursor: pointer;
}
.button:hover { background: var(--soft); }
.button-primary { background: var(--forest); border-color: var(--forest); color: var(--white); }
.button-primary:hover { background: var(--dark); }
.button-lime { background: var(--lime); border-color: var(--lime); color: var(--dark); }
.button-lime:hover { background: #eafca7; }
.button-quiet { border-color: transparent; background: transparent; color: var(--forest); }
.button:disabled { border-color: transparent; background: var(--soft); color: var(--muted); cursor: default; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.actions-between { justify-content: space-between; }
.eyebrow { color: var(--muted); font-size: .6875rem; font-weight: 650; letter-spacing: .075em; line-height: 1.6; text-transform: uppercase; }
.small, small { font-size: .8125rem; }
.muted { color: var(--muted); }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.notice { display: grid; gap: .25rem; padding: .75rem 1rem; border-radius: .625rem; background: var(--soft); color: var(--muted); font-size: .875rem; }
.notice-success { background: var(--mint); color: #236145; }
.notice-warning { background: #fff0cd; color: #694400; }
.notice-error { background: #fbe8e5; color: #8f291b; }
.auth-feedback:empty { position: absolute; padding: 0; }
.icon-tile { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--mint); }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 800 18px/1.14 Manrope, "Noto Sans", system-ui, sans-serif; letter-spacing: -.025em; white-space: nowrap; }
.brand-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--forest); }
.brand-link { color: inherit; text-decoration: none; display: inline-flex; }
.brand-inverse { color: var(--white); }
.brand-inverse .brand-mark { background: var(--lime); }

.public-wrap { width: min(90%, 72rem); margin-inline: auto; }
.public-footer { background: var(--white); }
.public-hero { background: var(--dark); color: var(--pale); }
.public-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 39.76%); gap: 1.5rem; align-items: center; padding-block: 2.75rem; }
.public-intro { display: grid; justify-items: start; gap: 1rem; }
.public-intro > .eyebrow { color: var(--lime); }
.public-intro > p:not(.eyebrow) { font-size: 1.0625rem; line-height: 1.48; }
.public-intro h1 { font-size: clamp(2.625rem, 5.32vw, 4.25rem); color: var(--white); letter-spacing: -.012em; }
.public-intro small { font-size: .75rem; }
.parcel-figure { overflow: hidden; border-radius: var(--radius); background: var(--forest); }
.parcel-figure img { max-width: 100%; height: auto; }
.parcel-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem; color: var(--pale); padding: .75rem; }
.public-scope { display: grid; gap: .875rem; padding-block: 2.25rem 1.5rem; }
.public-scope h2 { font-size: clamp(1.875rem, 4vw, 2.375rem); font-weight: 800; letter-spacing: -.018em; }
.public-scope > p:not(.eyebrow) { color: var(--muted); font-size: .875rem; }
.public-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.capability { display: grid; align-content: start; justify-items: start; gap: .375rem; padding: 1.1875rem; }
.capability p, .public-scope .notice p { font-size: .8125rem; color: var(--muted); }
.public-footer p { padding-block: .875rem; }

.access-grid { display: grid; grid-template-columns: 1.09fr 1fr; align-items: start; gap: 1.25rem; width: min(calc(100% - 2rem), 74rem); margin: 3.375rem auto; }
.access-intro { align-self: stretch; min-height: 36rem; display: flex; flex-direction: column; gap: 1rem; background: var(--dark); color: var(--pale); padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--radius); }
.access-intro .eyebrow { color: var(--lime); }
.access-headline { font-size: clamp(2.5rem, 4.5vw, 3.5rem); font-weight: 800; color: var(--white); }
.access-icons { display: flex; gap: .75rem; padding-top: 2rem; margin-top: auto; }
.access-panel { display: grid; gap: .875rem; padding: clamp(1.125rem, 3vw, 2rem); }
.access-panel h1 { font-size: clamp(1.875rem, 3.25vw, 2.375rem); }
.access-message { grid-column: 1 / -1; justify-self: center; width: min(100%, 34rem); justify-items: start; }
.language-list [lang] { font-family: var(--body-font); }
.form-stack, .view-stack { display: grid; gap: 1.25rem; align-content: start; }
.form-stack { gap: .875rem; }
.form-panel { padding: 1.25rem; }
.field { display: grid; gap: .375rem; min-width: 0; font-size: .875rem; font-weight: 650; }
.field small { color: var(--muted); font-weight: 400; }
.field input, .field select, .search-field input { min-width: 0; width: 100%; min-height: 2.875rem; padding: .625rem .875rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--white); font-weight: 400; }
.field input:read-only, .field input:disabled, .field select:disabled { background: var(--soft); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #ab392b; }
.field .field-error { color: #8f291b; }
.location-member-list { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.location-member + .location-member { border-top: 1px solid var(--line); padding-top: .75rem; }
.location-member-name { flex: 1 1 10rem; overflow-wrap: anywhere; }
.location-member-name [data-member-email]:not([hidden]) { display: block; }
.workspace { min-block-size: 100vh; }
.page-heading { display: grid; gap: .5rem; }
.page-heading > p:not(.eyebrow), .page-heading > div > p:not(.eyebrow) { color: var(--muted); }
.heading-actions { grid-template-columns: 1fr auto; align-items: center; }
.heading-actions > div { display: grid; gap: .5rem; }
.form-view { max-width: 45rem; }
.narrow-view { max-width: 34rem; }
.search-form { display: flex; align-items: stretch; gap: .5rem; }
.search-field { display: flex; flex: 1; align-items: center; gap: .75rem; background: var(--white); padding-inline-start: .875rem; min-width: 0; border: 1px solid var(--line); border-radius: .5rem; }
.search-field input { padding-inline-start: 0; border: 0; background: transparent; font-size: .875rem; }
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.inventory-results { border: 1px solid var(--line); border-radius: var(--radius); overflow: clip; }
.inventory-table { width: 100%; border-collapse: collapse; background: var(--white); }
.inventory-table th, .inventory-table td { padding: .625rem .5rem; text-align: start; border-bottom: 1px solid var(--line); }
.inventory-table th:first-child { padding-inline-start: 1.5rem; }
.inventory-table td:last-child { padding-inline-end: 1rem; }
.inventory-table tbody tr:last-child > * { border-bottom: 0; }
.inventory-table thead th { background: var(--soft); color: var(--muted); font-size: .75rem; font-weight: 600; }
.inventory-table thead th:not(:first-child), .inventory-table .quantity { text-align: end; }
.inventory-table .inventory-item { width: 42%; font-family: var(--heading-font); }
.inventory-item small { display: block; color: var(--muted); font-family: var(--body-font); font-weight: 400; }
.inventory-table .quantity { font-weight: 700; font-variant-numeric: tabular-nums; }
.quantity small { display: none; }
.inventory-unit:has(.inventory-unit-icon:not([hidden])) {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .625rem;
    inline-size: 100%;
    max-inline-size: 9.375rem;
    padding: .625rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    font: 600 .875rem/1.25rem var(--body-font);
    font-variant-numeric: tabular-nums;
    text-align: start;
    vertical-align: middle;
}
.inventory-unit-icon { flex: none; }
.inventory-unit-text { min-inline-size: 0; }
.inventory-unit:has(.inventory-unit-icon:not([hidden])) small {
    display: block;
    color: var(--muted);
    font: 400 .8125rem/1.1875rem var(--body-font);
}
@container (max-width: 34rem) {
    .inventory-unit:has(.inventory-unit-icon:not([hidden])) {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
        padding: .375rem;
    }
}
.state-panel { display: grid; justify-items: start; gap: .75rem; padding: 1.25rem; }

.stock-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.stock-card { display: grid; gap: .4rem; padding: 1rem; font-size: .875rem; }
.stock-card dt { font-weight: 650; grid-row: 3; }
.stock-card dd { display: contents; }
.stock-card .icon-tile { grid-row: 1; }
.stock-amount { grid-row: 2; font: 800 1.875rem/1.1 var(--heading-font); }
.total-stock, .history { display: grid; gap: .5rem; padding: 1rem; }
.total-stock h2 { font-size: 1.25rem; }
.history-list { margin: 0; padding: 0; list-style: none; }
.history-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.8fr); gap: .75rem; padding-block: .75rem; border-top: 1px solid var(--line); font-size: .875rem; }
.history-row > div { display: grid; align-content: start; gap: .25rem; }
.history-row time { color: var(--muted); font-size: .8125rem; }
.language-list { display: grid; padding: .5rem .875rem; }
.language-option { display: flex; justify-content: space-between; gap: .75rem; align-items: center; min-height: 2.8125rem; padding: .5rem 0; cursor: pointer; }
.language-option + .language-option { border-top: 1px solid var(--line); }
.language-option input { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: var(--forest); }

.movement-dialog { width: min(calc(100% - 1.5rem), 34.375rem); max-height: calc(100dvh - 1.5rem); border: 0; padding: 0; border-radius: var(--radius); color: var(--ink); background: var(--white); }
.movement-dialog::backdrop { background: rgb(16 59 49 / 28%); }
.movement-panel { width: min(100%, 34.375rem); display: grid; gap: .75rem; margin-inline: auto; padding: clamp(1rem, 4vw, 1.5rem); }
.movement-heading :is(h1, h2) { font-size: clamp(1.625rem, 4vw, 1.9375rem); font-weight: 800; }
.movement-heading { display: flex; gap: .75rem; align-items: center; }
.movement-item { background: var(--mint); color: var(--ink); }
.movement-fields { display: grid; gap: .875rem; }
.movement-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr)); gap: .5rem; }
.movement-counts .field { align-content: end; }
.movement-quantity { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: .75rem; }
.stock-comparison { padding: .75rem; border-radius: .625rem; background: var(--paper); font-size: .8125rem; }
.stock-comparison table { width: 100%; border-collapse: collapse; }
.stock-comparison caption { text-align: start; margin-bottom: .25rem; }
.stock-comparison :is(th, td) { padding: .23rem .3rem; text-align: end; }
.stock-comparison th:first-child { text-align: start; font-weight: 400; padding-inline-start: 0; }
.stock-comparison thead th { color: var(--muted); font-size: .75rem; }
.stock-comparison td { font-weight: 650; font-variant-numeric: tabular-nums; }
.stock-comparison tbody tr:last-child > * { border-top: 1px solid var(--line); font-weight: 700; }

@container (max-width: 46rem) {
    .heading-actions { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .inventory-results { overflow: visible; border: 0; }
    .inventory-table, .inventory-table tbody { display: grid; gap: 1.125rem; background: transparent; }
    .inventory-table thead { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
    .inventory-table tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: .625rem .4rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
    .inventory-table tbody tr > * { border: 0; padding: 0; }
    .inventory-table tbody .inventory-item { width: auto; display: flex; flex-direction: column-reverse; grid-column: 1 / 4; grid-row: 1; padding-inline: 0; }
    .inventory-item small { font-size: .6875rem; font-weight: 650; letter-spacing: .075em; }
    .inventory-table .quantity { text-align: start; grid-row: 2; }
    .quantity small { display: block; color: var(--muted); font-weight: 400; font-size: .75rem; }
    .inventory-table .inventory-view { grid-column: 4; grid-row: 1; justify-self: end; padding-inline: 0; }
    .inventory-view .button { padding-inline: .35rem; }
}

@container (max-width: 34rem) {
    .history-row { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
    .stock-card { padding: .625rem; }
}

@media (max-width: 48rem) {
    .access-grid { grid-template-columns: minmax(0, 1fr); margin-block: 1.375rem; }
    .access-intro { display: none; }
}

@media (max-width: 42rem) {
    .public-wrap { width: calc(100% - 2rem); }
    .public-hero-grid, .public-capabilities { grid-template-columns: minmax(0, 1fr); }
    .public-hero-grid { padding-block: 1.875rem; }
    .public-intro { gap: .75rem; }
    .public-intro h1 { font-size: clamp(2.375rem, 11.3vw, 2.75rem); }
    .public-intro > p:not(.eyebrow) { font-size: .9375rem; }
    .public-intro small { display: none; }
    .parcel-figure { width: min(100%, 354px); }
    .public-scope { padding-block: 1.5rem; }
    .public-scope h2 { max-inline-size: 14ch; }
    .capability { grid-template-columns: auto 1fr; align-items: center; padding: .75rem; gap: .375rem .625rem; }
    .capability p { grid-column: 1 / -1; }
}

@media (max-width: 23rem) {
    .account-locale { display: none; }
}

/* Shared Richconnect system and layout tokens from the native Figma design. */
:root {
    --paper: #f5f3ec;
    --white: #fffdf8;
    --ink: #163d3b;
    --muted: #62716c;
    --dark: #103330;
    --forest: #163d3b;
    --nav: #29514b;
    --pale: #b9cec5;
    --mint: #e3efe5;
    --soft: #eaede5;
    --line: #d9ded5;
    --warm: #f9e8db;
    --accent: #a74623;
    --focus: #23664e;
    --radius: .75rem;
    --heading-font: var(--body-font);
    --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, var(--body-font);
}
body { font-size: .9375rem; }
h1 { font-weight: 450; font-size: clamp(1.85rem, 3vw, 2.375rem); }
h2 { line-height: 1.25; }
.eyebrow { color: var(--accent); letter-spacing: .04em; font: 400 .6875rem/1.6 var(--mono); }
.button { min-block-size: 3rem; border-radius: .5rem; font-weight: 500; font-size: .875rem; }
.design-icon { flex: none; }
.button-primary .design-icon { filter: brightness(0) invert(1); }
.notice-warning { background: var(--warm); color: #793319; }
.notice-error { background: #f8e7e2; color: #90312a; }
.badge { display: inline-flex; align-items: center; gap: .35rem; width: fit-content; padding: .1rem .55rem; border-radius: .25rem; background: var(--soft); color: var(--muted); font-size: .6875rem; }
.badge::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: currentColor; }
.badge-active { background: var(--mint); color: #23664e; }
.brand { font: 500 1.25rem/1.15 var(--heading-font); letter-spacing: -.04em; }
.brand-inverse .brand-mark { background: var(--white); }
.metric { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.project-site .public-wrap { width: min(calc(100% - 7rem), 76rem); }
.main-header { background: var(--dark); color: var(--white); }
.main-navigation {
    position: relative; display: flex; align-items: center; gap: .5rem clamp(.75rem, 2vw, 2rem);
    width: min(calc(100% - 2.5rem), 76rem); min-block-size: 5rem; margin-inline: auto; padding-block: .75rem;
}
.main-current-destination { display: none; }
.main-menu, .main-menu-links, .main-menu-actions { display: flex; align-items: center; gap: .25rem; }
.main-menu { flex: 1; justify-content: space-between; gap: .75rem; min-width: 0; }
.main-menu-links, .main-menu-actions { flex-wrap: wrap; }
.main-menu-link {
    display: flex; align-items: center; gap: .625rem; min-block-size: 3rem; padding: .4rem .75rem;
    border-radius: .5rem; color: var(--pale); font-size: .875rem; text-decoration: none;
}
.main-menu-link:hover, .main-menu-link[aria-current], .main-menu-toggle[aria-expanded="true"] {
    background: var(--nav); color: var(--white);
}
.main-menu-link[aria-current] { font-weight: 650; }
.main-menu-toggle, .main-language summary, .main-menu-actions form .button {
    min-block-size: 3rem; min-inline-size: 2.75rem; background: transparent; color: var(--white); border-color: var(--nav);
}
.main-menu-toggle { margin-inline-start: auto; padding: .5rem .75rem; }
.main-menu-toggle .design-icon, .main-language summary .design-icon, .location-role-trigger .location-role-icon {
    transition: transform 180ms ease;
}
.main-menu-toggle[aria-expanded="true"] .design-icon,
.main-language[open] summary .design-icon,
.location-role-choice[open] .location-role-trigger .location-role-icon { transform: rotate(180deg); }
[data-choice-positioned] {
    --choice-gap: .375rem;
    position: fixed; z-index: 3;
    top: calc(var(--choice-anchor-bottom, 0px) + var(--choice-gap));
    max-block-size: max(0px, calc(var(--choice-available-height, 0px) - var(--choice-gap) - .5rem));
    overflow: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100%);
    visibility: hidden; pointer-events: none;
    transition: clip-path 180ms ease, visibility 0s 180ms;
}
[data-choice-positioned][data-choice-open] {
    clip-path: inset(0); visibility: visible; pointer-events: auto;
    transition-delay: 0s;
    @starting-style { clip-path: inset(0 0 100%); }
}
details:not([open]):has(> [data-choice-positioned])::details-content {
    transition: content-visibility 0s 180ms allow-discrete;
}
@media (prefers-reduced-motion: reduce) {
    [data-choice-positioned], details:not([open]):has(> [data-choice-positioned])::details-content,
    .main-menu-toggle .design-icon, .main-language summary .design-icon, .location-role-trigger .location-role-icon {
        transition: none;
    }
}
.main-menu-link .design-icon, .main-menu-toggle .design-icon, .main-language summary .design-icon, .main-menu-actions form .design-icon { filter: brightness(0) invert(1); }
.main-menu-toggle:hover, .main-language summary:hover, .main-menu-actions form .button:hover { background: var(--nav); }
.main-menu-actions .notice, .main-language ul { color: var(--ink); }
.main-menu-actions form { position: relative; }
.main-menu-actions .auth-feedback:not(:empty) {
    position: absolute; z-index: 1; inset-block-start: calc(100% + .5rem); inset-inline-end: 0;
    width: min(18rem, 80vw);
}
.main-language { position: relative; }
.main-language summary { cursor: pointer; }
.main-language summary::-webkit-details-marker { display: none; }
.main-language summary svg { flex: none; }
.main-language ul { min-inline-size: 11rem; margin: 0; padding: .25rem; list-style: none; }
.main-language ul:not([data-choice-positioned]) {
    position: absolute; inset-block-start: calc(100% + .25rem); inset-inline-end: 0; z-index: 1;
    max-block-size: calc(100dvh - 5rem); overflow: auto;
}
.main-language [data-choice-positioned] { right: var(--choice-anchor-right, 0px); }
.main-language a {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    min-block-size: 2.75rem; padding: .5rem .75rem; border-radius: .375rem; text-decoration: none;
}
.main-language a:hover, .main-language a[aria-current] { background: var(--soft); }
.main-language a:focus-visible { outline-offset: -3px; }

@media (max-width: 60rem) {
    .main-navigation { flex-wrap: wrap; min-block-size: 4.5rem; }
    .main-menu {
        order: 1; flex: 1 0 100%; display: grid; justify-content: stretch; gap: .5rem; padding-block: .5rem;
    }
    .main-menu[data-choice-positioned] {
        left: var(--choice-anchor-left, 0px); inline-size: var(--choice-anchor-width, 0px);
        padding: .5rem; background: var(--dark); border-radius: var(--radius);
    }
    .main-header:has(.main-menu-toggle:not([hidden])) .main-current-destination {
        display: block; margin: 0; padding: .75rem max(1.25rem, calc((100% - 76rem) / 2));
        background: var(--white); color: var(--ink); border-bottom: 1px solid var(--line);
        font-size: .875rem; font-weight: 650;
    }
    .main-menu-links, .main-menu-actions { display: grid; }
    .main-menu-actions:not(:empty) { border-top: 1px solid var(--nav); padding-top: .5rem; }
    .main-menu-actions .auth-feedback:not(:empty) { position: static; width: auto; margin-bottom: .25rem; }
    .main-menu-actions button { justify-content: flex-start; inline-size: 100%; }
    .main-language { margin-inline-start: auto; }
    .main-menu-toggle:not([hidden]) ~ .main-language { margin-inline-start: 0; }
    .main-language summary { padding: .5rem; }
    .main-language summary span { display: none; }
}

@media (max-width: 24rem) {
    .main-navigation:has(.main-language) { column-gap: .5rem; }
    .main-navigation:has(.main-language) .main-menu-toggle span { display: none; }
}

.workspace-header .main-navigation {
    display: flex; flex-direction: column; align-items: stretch;
    width: auto; min-block-size: 0; margin: 0; padding: 1.75rem 1.25rem; gap: 2.25rem;
}
.workspace-header .brand-link { align-self: flex-start; }
.workspace-header .brand { color: inherit; gap: .625rem; }
.workspace-header .brand-mark { background: var(--white); border-radius: .375rem; }
.workspace-header .main-menu { flex: none; justify-content: stretch; }
.workspace-header .main-menu,
.workspace-header .main-menu-links,
.workspace-header .main-menu-actions { display: grid; align-items: start; gap: .5rem; }
.workspace-header .main-menu-link { color: inherit; font-size: .8125rem; }
.workspace-navigation-context { font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.workspace-header .main-menu-link[aria-disabled] { color: var(--pale); }
.workspace-header .main-menu-link[aria-disabled]:hover { background: transparent; }
.workspace-header .main-menu-actions {
    border-top: 1px solid var(--nav); margin-top: 1.75rem; padding-top: .5rem;
}
.workspace-header .main-menu-actions .button {
    justify-content: flex-start; border-color: transparent; color: var(--pale);
    font-size: .8125rem; padding-inline: .75rem;
}
.workspace-header .main-menu-actions .auth-feedback:not(:empty) {
    position: static; width: auto; margin-bottom: .25rem;
}
.workspace-header :focus-visible { outline-color: var(--pale); }
@media (width > 60rem) {
    .workspace {
        display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); grid-template-rows: auto 1fr;
    }
    .workspace > .workspace-header { grid-area: 1 / 1 / span 2; }
    .workspace > .admin-maintenance { grid-area: 1 / 2; }
    .workspace > .workspace-main { grid-area: 2 / 2; }
}

@media (max-width: 60rem) {
    .workspace-header .main-navigation { padding: 1rem 1.25rem; gap: .5rem; }
    .workspace-navigation-context { color: var(--pale); font-size: .875rem; font-weight: 400; }
    .workspace-header .main-menu {
        display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 0; gap: .25rem;
    }
    .workspace-header .main-menu-links,
    .workspace-header .main-menu-actions { display: contents; }
    .workspace-header .main-menu-actions form { max-inline-size: 100%; }
    .workspace-header .main-menu-link,
    .workspace-header .main-menu-actions .button {
        min-block-size: 2.75rem; padding: .25rem .5rem;
    }
    .workspace-header .main-menu .design-icon { display: none; }
}

.project-site .public-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 6vw, 6rem); }
.project-site .public-intro { color: var(--muted); gap: 1.1rem; }
.project-site .public-intro .eyebrow, .project-section > .eyebrow { color: var(--accent); }
.project-site .public-intro h1 { color: var(--ink); font-size: clamp(2.125rem, 4.4vw, 3.75rem); font-weight: 450; line-height: 1.12; }
.project-site:is(:lang(th), :lang(my)) .public-intro h1 { line-height: 1.25; }
.project-example { display: grid; overflow: hidden; }
.project-example figcaption { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.project-example-body { display: grid; gap: .85rem; padding: 1.1rem 1.25rem; }
.project-example-body h2 { font-weight: 450; }
.project-example-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.project-example-counts > div { display: grid; justify-items: start; align-content: start; gap: .5rem; padding: .75rem; border-radius: .5rem; background: var(--soft); }
.project-example-counts dt { order: 2; color: var(--muted); font-size: clamp(.65rem, 1vw, .76rem); }
.project-example-counts dd, .project-stats dd { font: 400 clamp(1.5rem, 3vw, 2.5rem)/1.1 var(--mono); }
.project-section { display: grid; gap: .8rem; padding-block: clamp(2rem, 5vw, 4.5rem); }
.project-section > h2 { font-size: clamp(1.65rem, 3vw, 2.5rem); }
.project-section > p { max-inline-size: 72ch; color: var(--muted); }
.project-band { background: var(--soft); }
.project-dark { color: var(--white); background: var(--dark); }
.project-warm { background: var(--warm); }
.project-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.project-stats > div { display: grid; gap: .5rem; padding-block: .75rem; }
.project-stats dt { order: 1; font-size: .8125rem; color: var(--muted); }
.project-site .public-footer { background: var(--dark); border-top: 1px solid var(--nav); }

.wiki-grid { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 48rem); align-items: start; gap: 1rem; }
.wiki-articles { display: grid; gap: 1rem; }
.wiki-panel { display: grid; gap: .75rem; padding: clamp(1rem, 3vw, 1.75rem); }
.wiki-panel h2 { line-height: 1.3; }
.wiki-panel ul { margin: 0; padding-inline-start: 1.25rem; }
.wiki-panel li + li { margin-block-start: .5rem; }
.access-split { width: 100%; margin: 0; min-height: 100vh; grid-template-columns: minmax(0, 39%) minmax(0, 1fr); gap: 0; }
.access-split .access-intro { border-radius: 0; padding: clamp(1.5rem, 3.75vw, 3rem); gap: 1.25rem; }
.access-intro .eyebrow { color: var(--pale); }
.access-headline { font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.75rem); }
.access-example { margin-block: 2rem; padding: 1.3rem; border: 1px solid #3a5c51; border-radius: var(--radius); }
.access-example dd { color: var(--white); }
.access-example dt { color: var(--pale); }
.access-split .access-panel { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem) minmax(0, 1fr); padding: 3.5rem clamp(1rem, 4.375vw, 3.5rem); border: 0; background: transparent; row-gap: 1.35rem; }
.access-split .access-panel > * { grid-column: 2; }
.access-split .access-panel h1 { font-weight: 450; font-size: clamp(2rem, 3vw, 2.45rem); }
.access-split .form-stack { gap: 1.1rem; }
.password-field { position: relative; }
.password-field input { padding-inline-end: 3rem; }
.password-toggle { position: absolute; inset: 0 0 0 auto; display: grid; place-items: center; width: 2.75rem; background: transparent; border: 0; cursor: pointer; border-radius: .5rem; }
.access-route-note { display: flex; align-items: flex-start; gap: .7rem; }
.language-option { padding-inline: .75rem; border-radius: .25rem; }
.language-option:has(input:checked) { background: var(--soft); }

@media (max-width: 48rem) {
    .access-split { grid-template-columns: minmax(0, 1fr); }
    .access-split .access-panel { grid-row: 1; grid-template-columns: minmax(0, 1fr); padding: 2rem 1.5rem; }
    .access-split .access-panel > * { grid-column: 1; }
    .access-split .access-intro { display: flex; grid-row: 2; min-height: 0; }
    .access-example { margin: .25rem 0 0; }
    .project-site .public-wrap { width: calc(100% - 2.5rem); }
    .project-site .public-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2.5rem; }
    .project-site .public-intro > .button { width: 100%; }
    .wiki-grid { grid-template-columns: minmax(0, 1fr); }
    .project-stats { gap: .6rem; }
    .project-example-counts > div { padding: .55rem .4rem; }
}
.workspace-main { container-type: inline-size; width: min(100%, 81rem); margin-inline: auto; padding: clamp(1.25rem, 3.15vw, 2.5rem); }
.workspace-footnote { margin-top: 3.5rem; color: var(--muted); font-size: .75rem; }
.location-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.location-card .icon-tile { margin-bottom: .65rem; background: var(--soft); }
.location-card { align-content: start; min-height: 16rem; }
.location-card:first-child { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.location-card .button { margin-top: .4rem; }
.account-panel { padding: clamp(1rem, 3vw, 1.75rem); }
.account-panel .language-list { padding: .3rem; }
.account-panel form + form { border-top: 1px solid var(--line); padding-top: 1rem; }
.account-saved { max-width: 34rem; margin-bottom: 1rem; }

.form-view, .movement-panel { max-width: none; }
.form-panel { padding: clamp(1rem, 2vw, 1.5rem); }
.heading-actions { grid-template-columns: minmax(0, 1fr); }
.stock-list-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.stock-actions-panel { display: grid; gap: 1rem; }
.stock-actions-panel .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stock-actions-panel button { justify-content: center; }
.stock-card { padding: .75rem; border: 0; border-radius: .5rem; background: var(--soft); }
.stock-card dt { grid-row: 2; font-weight: 400; font-size: .75rem; }
.stock-amount, .inventory-table .quantity { font: 400 1.15rem/1.2 var(--mono); }
.stock-amount { grid-row: 1; font-size: 1.65rem; }
.total-stock { padding: 0; }
.stock-total-bar { padding: .85rem; background: var(--forest); color: var(--white); border-radius: .5rem; }
.stock-section { display: grid; gap: 1rem; }
.article-identity { display: flex; align-items: center; gap: .75rem; }
.article-identity-text { min-width: 0; overflow-wrap: anywhere; }
.article-image-preview { position: relative; display: grid; place-items: center; flex: none; width: 3rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.article-image-preview-detail { width: min(100%, 8.25rem); }
.article-image-preview [data-article-image-placeholder] { display: grid; justify-items: center; gap: .375rem; color: var(--muted); font: 400 .8125rem/1.1875rem var(--body-font); }
.article-image-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-image-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; width: min(100%, 29.375rem); }
.article-image-card form, .article-image-controls { flex: 1; min-width: 0; }
.article-image-controls { display: grid; gap: .5rem; }
.article-image-controls strong { font-size: .875rem; line-height: 1.25rem; }
.article-image-choose { width: 100%; min-height: 3rem; }
[data-save-image] { justify-self: start; }
.article-image-filename { overflow-wrap: anywhere; }
[data-image-status]:empty { display: none; }
@media (max-width: 43.75rem) {
    .article-image-card { flex-direction: column; align-items: stretch; }
    .article-identity-text { display: flex; flex-direction: column-reverse; }
}
.history { padding: clamp(1rem, 2vw, 1.5rem); }
.history-row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.history-row h3 { width: fit-content; padding: .2rem .5rem; border-radius: .25rem; background: var(--soft); font-size: .75rem; }
.history-row time { font-family: var(--mono); }
.inventory-table tbody tr:not(:last-child) > * { border-bottom: 1px solid var(--line); }
.inventory-table th, .inventory-table td { padding-block: .8rem; }
.inventory-table td:not(.inventory-view) { text-align: center; }
.inventory-table thead th:not(:first-child) { text-align: center; }
.inventory-table .inventory-item { font-size: .875rem; }
.inventory-item small { font-family: var(--mono); margin-top: .3rem; }
.inventory-view .button { padding: .45rem; min-height: 2.5rem; white-space: nowrap; }
.movement-dialog { width: min(calc(100% - 2rem), 58rem); background: var(--paper); }
.movement-panel { width: 100%; padding: clamp(1rem, 2vw, 1.5rem); }
.movement-panel:has(> .action-dialog-dismiss) { position: relative; }
.action-dialog-dismiss + :is(h2, .movement-heading) { padding-inline-end: 3.25rem; }
.action-dialog-dismiss {
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-end: .5rem;
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: .5625rem;
    background: var(--white);
    cursor: pointer;
}
.action-dialog-dismiss:hover:not(:disabled) { background: var(--soft); }
.action-dialog-dismiss:disabled { opacity: .5; cursor: default; }
.movement-dialog .movement-quantity { display: flex; flex-direction: column-reverse; }
.movement-comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.movement-comparison h4 { margin: 0; color: var(--muted); }
.movement-total { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: var(--forest); color: var(--white); }
.movement-total dt { grid-row: 1; }
.stock-comparison { background: var(--soft); }
.stock-comparison tbody tr:last-child { color: var(--white); background: var(--forest); }
.stock-comparison tbody tr:last-child th { padding-inline-start: .4rem; }
.location-member [data-owner] { display: inline-block; background: var(--mint); color: #23664e; border-radius: .25rem; padding-inline: .4rem; }
.location-action-dialog { width: min(calc(100% - 2rem), 32.5rem); }
.location-action-dialog .movement-panel { gap: 1rem; }
.location-action-dialog h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.location-action-dialog legend, .location-role-legend { margin-block-end: .5rem; font-size: .875rem; font-weight: 600; }
.location-role-trigger, .location-role-options, .location-role-option, .location-permission {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.location-role-trigger, .location-role-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.location-role-trigger {
    min-height: 2.9375rem;
    list-style: none;
    font-size: .875rem;
    line-height: 1.5;
}
.location-role-trigger::-webkit-details-marker { display: none; }
.location-role-trigger[aria-disabled="true"] { cursor: default; opacity: .65; }
.location-role-choice[open] .location-role-trigger { border-color: var(--focus); }
.location-role-options { display: grid; gap: .25rem; margin-block-start: .375rem; padding: .25rem; }
.location-role-options[data-choice-positioned] {
    left: var(--choice-anchor-left, 0px); inline-size: var(--choice-anchor-width, 0px);
    margin: 0;
}
.location-role-option { position: relative; }
.location-role-option-copy { display: grid; gap: .125rem; min-width: 0; }
.location-role-option-copy strong, .location-permission-heading strong { font-size: .875rem; line-height: 1.43; font-weight: 600; }
.location-role-option:has(input:checked) { background: var(--soft); }
.location-role-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.location-role-option:not(:has(input:checked)) .location-role-icon { display: none; }
.location-role-icon { flex: none; }
.location-permission {
    display: grid;
    gap: .375rem;
    padding: .75rem;
    overflow-wrap: anywhere;
}
.location-permission-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .5rem;
}
.location-permission input {
    inline-size: 1rem;
    block-size: 1rem;
    margin: .125rem 0 0;
    accent-color: var(--focus);
}
.location-permission-sensitivity {
    padding: .25rem;
    border-radius: .25rem;
    background: var(--soft);
    font-size: .6875rem;
    line-height: 1rem;
    font-weight: 600;
}
.location-permission-sensitivity.is-sensitive { background: var(--warm); color: #793319; }
@media (max-width: 23rem) {
    .location-permission-heading { grid-template-columns: auto minmax(0, 1fr); }
    .location-permission-sensitivity { grid-column: 2; justify-self: start; }
}
.admin-maintenance { display: grid; gap: .4rem; padding: 1rem clamp(1.25rem, 3vw, 2.5rem); }
.admin-maintenance form { margin-top: .35rem; }
.admin-main .workspace-footnote { margin-top: 2rem; }
.admin-total { display: grid; justify-items: start; gap: .75rem; padding: 1.75rem; background: var(--forest); color: var(--pale); }
.admin-total img { filter: brightness(0) invert(1); }
.admin-total strong { font: 500 3rem/1.3 var(--mono); color: var(--white); }
.admin-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--white); }
.admin-table th, .admin-table td { text-align: start; padding: .9rem 1.25rem; }
.admin-table thead { font-size: .8125rem; background: var(--soft); }
.admin-table tbody tr { border-top: 1px solid var(--line); }
.admin-table tbody .design-icon { display: none; }
.admin-user-count { font-family: var(--mono); font-size: 1.25rem; }
.admin-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; }
.admin-facts > div:nth-child(-n+2) { grid-column: 1 / -1; }
.admin-facts dt { color: var(--muted); font-size: .75rem; }
.admin-card-list { display: grid; gap: .75rem; }
.admin-location { display: flex; align-items: start; justify-content: space-between; padding: 1.25rem; gap: .6rem 1rem; }
.admin-location .badge { margin-top: .3rem; }
.admin-card-actions { display: grid; gap: .35rem; min-width: min(100%, 14rem); }
.admin-owner-option { display: flex; align-items: start; gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; }
.admin-owner-option:has(input:checked) { border-color: var(--forest); background: var(--soft); }
.admin-owner-option input { accent-color: var(--forest); }
.admin-section-divider { border-top: 1px solid var(--line); padding-top: 1rem; }
.admin-confirm > summary { cursor: pointer; }
.admin-confirm > .notice { margin-top: .55rem; }

@container (max-width: 46rem) {
    .inventory-table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .9rem; gap: .6rem; }
    .inventory-table tbody tr:not(:last-child) > * { border: 0; }
    .inventory-table tbody .inventory-item { grid-column: 1 / -1; }
    .inventory-table td:not(.inventory-view) { text-align: start; }
    .inventory-table tbody tr > .quantity:nth-child(5) { grid-column: 1 / -1; grid-row: 3; border-top: 1px solid var(--line); padding-top: .5rem; }
    .inventory-table tbody tr > .quantity:nth-child(5) small { display: inline; margin-inline-start: .25rem; }
    .inventory-table .inventory-view { grid-column: 1 / -1; grid-row: 4; justify-self: stretch; }
    .inventory-view .button { display: flex; border: 1px solid var(--line); background: var(--white); }
    .admin-table-wrap { border: 0; overflow: visible; }
    .admin-table, .admin-table tbody { display: grid; gap: .8rem; background: transparent; }
    .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .admin-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
    .admin-table tbody tr > * { padding: 0; }
    .admin-table tbody tr > :first-child { display: flex; align-items: center; gap: .5rem; grid-column: 1 / -1; }
    .admin-table tbody .design-icon { display: block; }
    .admin-user-count { grid-column: 2; grid-row: 2; }
    .admin-table tbody tr > :last-child { grid-column: 1 / -1; }
    .admin-table .button { display: flex; }
}

@media (max-width: 48rem) {
    .workspace-main { padding: 1.35rem 1.25rem 2rem; }
    .workspace-footnote { margin-top: 2.25rem; }
    .admin-workspace .admin-location { display: grid; }
    .admin-card-actions, .admin-actions { display: grid; }
    .admin-maintenance .button, .admin-location .button { width: 100%; }
    .search-form { flex-direction: column; }
    .search-field { min-block-size: 3.5rem; gap: .625rem; }
    .search-field input { padding-inline-end: .5rem; font-size: .8125rem; }
    .stock-list-actions, .stock-actions-panel .actions { grid-template-columns: minmax(0, 1fr); }
}

.bigseller-value, .bigseller-source dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.bigseller-source { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .25rem .75rem; }
.bigseller-source dt { color: var(--muted); overflow-wrap: anywhere; }
.bigseller-source dd { margin: 0; }

/* Historical order list and detail */
.orders-view { gap: 1.5rem; overflow-wrap: anywhere; }
.orders-view h2, .orders-view h3 { font-size: .875rem; }
.orders-view small { display: block; margin-block-start: .25rem; color: var(--muted); font-size: .8125rem; font-weight: 400; }
.orders-view .badge { white-space: normal; font-weight: 600; }
.orders-status .badge::before, .orders-context .badge::before {
    content: "";
    flex: none;
    inline-size: .3125rem;
    block-size: .3125rem;
    border-radius: 50%;
    background: currentColor;
}
.main-menu-link > img[src$="/orders.svg"] { inline-size: 18px; block-size: 18px; }
.orders-search { display: grid; gap: .5rem; }
.orders-search label { font-weight: 600; }
.orders-search-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.orders-search-controls .search-field { flex-basis: 15rem; gap: .625rem; }
.orders-search-controls img { flex: none; }
.orders-search-controls .search-field input { padding-inline-start: 0; }
.orders-count { font-size: .8125rem; }
.orders-table-panel { overflow: hidden; }
.order-marketplace { display: inline-flex; align-items: center; gap: .375rem; vertical-align: middle; }
.order-marketplace img { flex: none; object-fit: contain; }
.orders-table { width: 100%; border-collapse: collapse; text-align: start; }
.orders-table th, .orders-table td { padding: .75rem 1rem; text-align: start; }
.orders-table thead { font-size: .6875rem; }
.orders-list thead { background: var(--soft); }
.orders-list tbody tr + tr { border-block-start: 1px solid var(--line); }
.orders-list tbody th, .orders-list tbody td { padding-block: 1.375rem; }
.orders-date { color: var(--muted); }
.orders-action a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.orders-pages { justify-content: flex-end; }
.orders-back { min-inline-size: min(100%, 14.5rem); }
.orders-panel { min-width: 0; display: grid; gap: 1rem; padding: 1.5rem; }
.orders-context { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.orders-context dt, .orders-fields dt, .orders-mobile-label { color: var(--muted); font-size: .75rem; font-weight: 600; }
.orders-context dd, .orders-fields dd { margin: .25rem 0 0; }
.order-source-value { white-space: pre-wrap; }
.orders-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.5rem; }
.orders-fields, .orders-field-groups { display: grid; gap: .875rem; }
.orders-package { padding: 1rem; }
.orders-total { grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: baseline; background: var(--soft); }
.orders-total p { grid-column: 2; text-align: end; font-weight: 600; }
.orders-line-table th, .orders-line-table td { padding-inline: 0 .75rem; }
.orders-mobile-label { display: none; }

@container (max-width: 44rem) {
    .orders-table-panel { background: transparent; border: 0; overflow: visible; }
    .orders-table, .orders-table tbody { display: grid; gap: 1rem; }
    .orders-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .orders-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: .75rem;
    }
    .orders-list tbody tr { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
    .orders-table tbody th, .orders-table tbody td { padding: 0; }
    .orders-list tbody .orders-status { grid-area: 1 / 2; text-align: end; }
    .orders-list .orders-date, .orders-list .orders-market, .orders-list .orders-products, .orders-list .orders-action { grid-column: 1 / -1; }
    .orders-pages { justify-content: flex-start; }
    .orders-back { width: 100%; }
    .orders-columns, .orders-context { grid-template-columns: 1fr; }
    .orders-line-table tbody tr + tr { border-block-start: 1px solid var(--line); padding-block-start: 1rem; }
    .orders-line-table tbody th, .orders-line-table tbody td:first-of-type, .orders-line-table tbody td:last-of-type { grid-column: 1 / -1; }
    .orders-mobile-label { display: block; }
}