@layer tokens, legacy, components, adapter, responsive, utilities;

@import url("./styles/foundation-tokens.css") layer(tokens);
@import url("./styles/ui-tokens.css") layer(tokens);
@import url("./admin.css") layer(legacy);
@import url("./styles/ui-components.css") layer(components);
@import url("./styles/adapters/admin.css") layer(adapter);
@import url("./styles/ui-responsive.css") layer(responsive);
@import url("./scrollbars.css") layer(utilities);

@layer utilities {
  :where(.table-scroll, [data-collection-strategy]) {
    --collection-gutter-inline: var(--ui-collection-gutter-inline);
    --collection-gutter-block: var(--ui-collection-gutter-block);
  }

  :where(html, body, .app, .main, .page-section) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  :where(.topbar, .page-heading, .data-card__head, .product-editor__overview,
    .price-lists__section-head, .team-members__head, .team-invitations__head) {
    gap: clamp(var(--ui-space-3), 2vw, var(--ui-space-5));
  }

  .topbar {
    grid-template-columns: minmax(12rem, 1fr) auto;
    background: var(--ui-paper);
    backdrop-filter: none;
    border-end-start-radius: var(--ui-radius-lg);
    border-end-end-radius: var(--ui-radius-lg);
  }

  .sidebar__nav {
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .sidebar__footer {
    gap: var(--ui-space-2);
  }

  .sidebar__identity {
    display: grid;
    gap: var(--ui-space-2);
    margin-block-end: var(--ui-space-2);
    padding-block-end: var(--ui-space-3);
    border-block-end: 1px solid rgba(255, 255, 255, .12);
  }

  .sidebar__identity .user-badge,
  .sidebar__identity .session-status {
    display: flex;
    grid-area: auto;
    grid-column: 1;
    inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
    padding: .65rem .7rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--ui-radius-sm);
    color: #fff;
    background: rgba(255, 255, 255, .055);
    box-shadow: none;
  }

  .sidebar__identity .user-badge span,
  .sidebar__identity .session-status span {
    min-inline-size: 0;
  }

  .sidebar__identity .user-badge b,
  .sidebar__identity .user-badge small,
  .sidebar__identity .session-status small,
  .sidebar__identity .session-status b {
    display: block;
    color: inherit;
  }

  .sidebar__identity .user-badge small {
    max-inline-size: 100%;
    color: rgba(255, 255, 255, .58);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar__identity .session-status small {
    color: rgba(255, 255, 255, .58);
  }

  :where(.topbar__heading, .page-heading > *, .data-card__head > *,
    .product-editor__overview > *, .price-lists__section-head > *) {
    min-inline-size: 0;
  }

  :where(.topbar h1, .page-heading h2, .data-card h3, .data-card h4,
    .productivity-panel h3, .product-editor h2, .product-editor h3,
    .product-editor h4, .price-lists h2, .price-lists h3, .price-lists h4,
    .editor-dialog h2, .editor-dialog h3) {
    font-style: normal;
    text-wrap: balance;
  }

  :where(.data-card, .form-card, .productivity-panel, .product-editor__overview,
    .product-editor__panels > section, .price-lists__sidebar, .price-lists__editor,
    .team-members, .team-invitations) {
    min-inline-size: 0;
    border-color: var(--ui-line);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-resting);
    border-radius: var(--ui-radius-lg);
  }

  :where(input, select, textarea, .button, .btn, .status-badge, .session-status,
    .tenant-badge, .user-badge, .search-control) {
    border-radius: var(--ui-radius-sm);
  }

  .operation-status,
  .share-center__status {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: .45rem;
    min-block-size: 2rem;
    padding: .35rem .65rem;
    border: 1px solid var(--ui-line);
    color: var(--ui-ink-muted);
    background: var(--ui-surface);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: start;
  }

  .operation-status {
    inline-size: auto;
    min-inline-size: 6.5rem;
    max-inline-size: min(100%, 18rem);
    border-radius: var(--ui-radius-pill);
    white-space: normal;
  }
  .share-center__status { inline-size: auto; min-inline-size: 8rem; white-space: normal; }

  .operation-status::before {
    content: "";
    flex: 0 0 auto;
    inline-size: .55rem;
    block-size: .55rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .72;
  }

  .operation-status[data-operation-status="idle"]:empty { display: none; }
  .operation-status[data-operation-status="loading"]::before {
    box-sizing: border-box;
    inline-size: .75rem;
    block-size: .75rem;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    background: transparent;
    animation: admin-operation-spin .8s linear infinite;
    opacity: 1;
  }

  @keyframes admin-operation-spin { to { transform: rotate(1turn); } }

  .operation-status[data-operation-status="loading"] {
    border-color: color-mix(in srgb, var(--ui-accent) 35%, var(--ui-line));
    color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface));
  }
  .operation-status[data-operation-status="dirty"] {
    border-color: color-mix(in srgb, var(--ui-warning, #7a4b00) 35%, var(--ui-line));
    color: var(--ui-warning, #7a4b00);
    background: color-mix(in srgb, var(--ui-warning, #7a4b00) 7%, var(--ui-surface));
  }
  .operation-status[data-operation-status="saved"],
  .operation-status[data-operation-status="unchanged"],
  .operation-status[data-operation-status="success"] {
    border-color: color-mix(in srgb, var(--ui-success) 35%, var(--ui-line));
    color: var(--ui-success);
    background: color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface));
  }
  .operation-status[data-operation-status="error"] {
    border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-line));
    color: var(--ui-danger);
    background: color-mix(in srgb, var(--ui-danger) 8%, var(--ui-surface));
  }

  .productivity-template-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3);
    margin-block: var(--ui-space-3) var(--ui-space-5);
  }

  .productivity-template-actions > :where(button, .button) {
    flex: 0 1 auto;
    min-inline-size: max-content;
  }

  :where(.filter-chip, .productivity-steps span) {
    border-radius: var(--ui-radius-pill);
  }

  .data-card > .filter-toolbar,
  .productivity > .filter-toolbar {
    /* T4 (gui-panels-alignment): the components layer sets inline-size:100%; margins are
       additive outside a definite width, so 100% + side margins overflowed the card. */
    inline-size: auto;
    margin: 0 clamp(var(--ui-space-3), 2vw, var(--ui-space-5)) var(--ui-space-5);
  }

  .product-editor__overview,
  .product-editor__panels,
  .product-editor__manager,
  .product-editor__manager-card,
  .product-editor__category,
  .product-editor__field-row,
  .product-editor__product,
  .product-editor__form-section,
  .product-editor__media-card,
  .product-editor__help,
  .product-editor__empty {
    border-radius: var(--ui-radius-lg);
  }

  .product-editor__panels {
    overflow: clip;
    box-shadow: var(--ui-shadow-resting);
  }

  .product-editor__panels > section {
    padding: clamp(var(--ui-space-5), 4vw, 3rem);
  }

  .product-editor__steps button {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-resting);
  }

  .product-editor__steps button[aria-selected="true"] {
    box-shadow: inset 0 -3px 0 var(--ui-accent-strong), var(--ui-shadow-raised);
  }

  .product-editor__manager-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-5);
  }

  #product-editor-taxonomy {
    grid-column: 1 / -1;
  }

  .product-editor__manager {
    display: grid;
    align-content: start;
    gap: var(--ui-space-3);
    background: color-mix(in srgb, var(--ui-surface) 92%, var(--ui-surface-muted));
  }

  :where(.product-editor__dialog, .editor-dialog) form {
    display: grid;
    gap: var(--ui-space-5);
  }

  :where(.product-editor__dialog, .editor-dialog) .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-5);
  }

  :where(.product-editor__dialog, .editor-dialog) :where(.field--wide, .form-grid__wide) {
    grid-column: 1 / -1;
  }

  :where(.product-editor__dialog, .editor-dialog) .field {
    display: grid;
    align-content: start;
    gap: var(--ui-space-2);
  }

  .product-editor__form-section {
    display: grid;
    gap: var(--ui-space-4);
    padding: clamp(var(--ui-space-4), 2.5vw, var(--ui-space-5));
    background: color-mix(in srgb, var(--ui-paper) 54%, var(--ui-surface));
  }

  .product-editor__checks label,
  .switch-row {
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
  }

  :where(.productivity-panel, .product-editor__overview, .product-editor__panels > section,
    .price-lists__sidebar, .price-lists__editor, .team-members, .team-invitations) {
    padding: clamp(var(--ui-space-4), 2.4vw, var(--ui-space-6));
  }

  .productivity-toolbar,
  .team-members__filters,
  .team-invitations__form,
  :where(.product-editor__dialog, .editor-dialog) .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--ui-space-4);
    align-items: end;
    min-inline-size: 0;
  }

  /* S5c: the category dialog fields align to the start of their row (the intent of admin.css, which the rule above overrode),
     so a per-input message under one field, or a hint that wraps, never pushes the other label and input down. */
  #category-form .category-form-grid {
    align-items: start;
  }

  :where(.field, .field > *, .form-grid > *, .productivity-toolbar > *,
    .team-members__filters > *, .team-invitations__form > *) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  :where(input, select, textarea) {
    max-inline-size: 100%;
  }

  :where(.button, .btn, .menu-button, .sidebar-close, .nav-link, .filter-chip,
    .text-button, button:not([hidden]), [role="button"]:not([hidden])) {
    min-block-size: var(--ui-target-min);
    transition: transform var(--ui-duration-fast) ease,
      color var(--ui-duration-fast) ease,
      background-color var(--ui-duration-fast) ease,
      border-color var(--ui-duration-fast) ease,
      box-shadow var(--ui-duration-fast) ease;
  }

  :where(.button, .btn, .menu-button, .sidebar-close, .nav-link, .filter-chip,
    .text-button, button, input, select, textarea, [role="button"]):focus-visible {
    outline: var(--ui-focus-size) solid var(--ui-focus-color);
    outline-offset: 3px;
  }

  :where(.button, .btn, .menu-button, .sidebar-close, .nav-link, .filter-chip,
    .text-button, button:not(:disabled), [role="button"]):active {
    transform: scale(.96);
  }

  :where(.product-editor__loading, [data-state="loading"], [aria-busy="true"]) {
    border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-line));
  }

  /* Judgment-day correction (F6, parity with superadmin.visual.css T5b): `.message` left this accent. It is already a
     symmetric pill with its own danger voice and .is-success variant (admin.css); the accent added a lopsided 4px start
     border and forced danger colors over .is-success on the static role="alert" messages (utilities beat legacy). */
  :where(.product-editor__error, .price-lists__notice[role="alert"], .field-error:not(:empty)) {
    border-inline-start: 4px solid var(--ui-danger);
    background: color-mix(in srgb, var(--ui-danger) 7%, var(--ui-surface));
    color: var(--ui-danger);
  }

  /* S4e (R-9): the team lists left this rule; their empty copy, loading skeleton and error boundary are collection states. */
  :where(.empty-state, .price-lists__empty, .productivity-list:empty) {
    min-block-size: 5rem;
    padding: var(--ui-space-5);
    border: 1px dashed var(--ui-line-strong);
    background: var(--ui-surface-muted);
    color: var(--ui-ink-muted);
  }

  .table-scroll {
    max-inline-size: 100%;
    overscroll-behavior-inline: contain;
  }

  :where(.product-editor__steps, .filter-row, .price-lists__actions,
    .dialog-actions, .team-members__footer, .team-invitations__footer) {
    gap: var(--ui-space-3);
  }

  :where(.editor-dialog, .product-editor__dialog) {
    inline-size: min(52rem, calc(100vw - (var(--ui-space-5) * 2)));
    max-inline-size: 100%;
    padding: clamp(var(--ui-space-4), 3vw, var(--ui-space-6));
    overflow-x: clip;
  }

  @media (max-width: 56rem) {
    .topbar {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        "menu heading"
        "catalog catalog";
      align-items: center;
    }

    .topbar__heading {
      grid-area: heading;
    }

    .tenant-badge {
      grid-area: catalog;
      inline-size: 100%;
    }

    .menu-button { grid-area: menu; }

    .price-lists__layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .product-editor__manager-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .product-editor__steps {
      display: flex;
      max-inline-size: 100%;
      padding-block-end: var(--ui-space-2);
      overflow-x: auto;
      scroll-snap-type: inline mandatory;
      scrollbar-width: thin;
    }

    .product-editor__steps button {
      flex: 0 0 min(15rem, 82vw);
      scroll-snap-align: start;
    }
  }

  @media (max-width: 30rem) {
    html,
    body,
    .app,
    .main,
    .page-section {
      inline-size: 100%;
      overflow-x: clip;
    }

    .main {
      padding-inline: clamp(var(--ui-space-3), 4vw, var(--ui-space-4));
    }

    .topbar {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        "menu heading"
        "catalog catalog";
      padding-inline: var(--ui-space-3);
    }

    .topbar__heading {
      grid-area: heading;
    }

    .tenant-badge {
      grid-area: catalog;
      inline-size: 100%;
    }

    .productivity-toolbar,
    .team-members__filters,
    .team-invitations__form,
    :where(.product-editor__dialog, .editor-dialog) .form-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    :where(.price-lists__actions, .dialog-actions) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    :where(.product-editor__steps > *, .price-lists__actions > *, .dialog-actions > *) {
      inline-size: 100%;
    }

    .table-scroll {
      overflow-x: clip;
    }

    :where(.editor-dialog, .product-editor__dialog) {
      inline-size: calc(100vw - (var(--ui-space-3) * 2));
      max-block-size: calc(100dvh - (var(--ui-space-3) * 2));
      margin: auto;
    }

    :where(.product-editor__dialog, .editor-dialog) .form-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--ui-space-4);
    }

    :where(.product-editor__dialog, .editor-dialog) :where(.field--wide, .form-grid__wide) {
      grid-column: auto;
    }
  }
}

@layer utilities {
  /* Premium catalog management forms. */
  #attribute-dialog,
  #spec-field-dialog {
    inline-size: min(58rem, calc(100vw - 2rem));
    max-block-size: calc(100dvh - 2rem);
    border-radius: var(--ui-radius-xl);
    scroll-padding-block-end: calc(var(--ui-dialog-actions-block-size, 0px) + env(safe-area-inset-bottom));
    overscroll-behavior-block: contain;
  }

  #attribute-dialog .form-stack,
  #spec-field-dialog .form-stack {
    gap: var(--ui-space-5);
  }

  #attribute-dialog[data-ui-dialog-action-clearance] > .form-stack,
  #spec-field-dialog[data-ui-dialog-action-clearance] > .form-stack {
    padding-block-end: calc(var(--ui-dialog-actions-block-size, 0px) + env(safe-area-inset-bottom));
  }

  #attribute-dialog .dialog-actions,
  #spec-field-dialog .dialog-actions {
    position: sticky;
    z-index: 3;
    inset-block-end: 0;
    inline-size: 100%;
    margin: 0;
    padding: var(--ui-space-4) max(var(--ui-space-4), env(safe-area-inset-right)) max(var(--ui-space-4), env(safe-area-inset-bottom)) max(var(--ui-space-4), env(safe-area-inset-left));
    border-block-start: 1px solid var(--ui-line);
    border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl);
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
    box-shadow: var(--ui-shadow-sheet);
  }

  #spec-fields-card {
    padding: clamp(var(--ui-space-4), 3vw, var(--ui-space-6));
    overflow: clip;
  }

  #spec-field-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ui-space-2);
    margin-block-start: var(--ui-space-4);
  }

  .spec-field-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1.4fr) repeat(2, minmax(8rem, .7fr)) auto auto;
    align-items: center;
    gap: var(--ui-space-4);
    min-block-size: 4.75rem;
    inline-size: 100%;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-md);
    color: var(--ui-ink);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-resting);
    text-align: start;
    cursor: pointer;
  }

  .spec-field-row:hover {
    border-color: var(--ui-line-strong);
  }

  /* S4e (ADR-14): the row rises and lifts only with a hovering pointer, and rises without moving on keyboard focus. */
  @media (hover: hover) {
    .spec-field-row:hover {
      box-shadow: var(--ui-shadow-raised);
      transform: translateY(var(--ui-lift-hover));
    }
  }

  .spec-field-row:focus-visible {
    box-shadow: var(--ui-shadow-raised);
    transform: none;
  }

  .spec-field-row__identity,
  .spec-field-row__meta { display: grid; gap: .25rem; min-inline-size: 0; }
  .spec-field-row :where(small) { color: var(--ui-ink-muted); font-size: .7rem; }
  .spec-field-row :where(strong) { overflow-wrap: anywhere; }
  .spec-field-row__status {
    padding: .4rem .65rem;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-pill);
    color: var(--ui-ink-muted);
    font-size: .68rem;
    font-weight: 800;
  }
  .spec-field-row__status.is-active { color: var(--ui-success); background: color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface)); }
  .spec-field-row__action { font-size: .72rem; font-weight: 800; white-space: nowrap; }

  .appearance-plan-summary {
    margin: 0;
    padding: .85rem 1rem;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-md);
    color: var(--ui-ink-muted);
    background: var(--ui-surface-muted);
    font-size: .82rem;
    line-height: 1.45;
  }
  .appearance-plan-summary[data-tone="success"] { border-color: color-mix(in srgb, var(--ui-success) 42%, var(--ui-line)); color: var(--ui-success); }
  .appearance-plan-summary[data-tone="warning"] { border-color: color-mix(in srgb, var(--ui-warning) 42%, var(--ui-line)); }

  #team-section[hidden] { display: none; }
  #team-section .team-members,
  #team-section .team-invitations { display: grid; gap: var(--ui-space-5); overflow: clip; }
  #team-section .data-card__head { align-items: start; padding-block-end: var(--ui-space-4); border-block-end: 1px solid var(--ui-line); }
  #team-section .team-members__filters,
  #team-section .team-invitations__form {
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-muted);
  }
  #team-section .team-members__list,
  #team-section .team-invitations__list { overflow: clip; border-radius: var(--ui-radius-lg); }
  /* S4e (R-9): the solid frame belongs to a ready list; while it loads, is empty or fails, the collection state draws it. */
  #team-section :is(.team-members__list, .team-invitations__list)[data-collection-state="ready"] { border: 1px solid var(--ui-line); }
  /* S5c (R-9, F-owner-states-loading-box): these collections settle to empty with nothing inside; their owners show the empty
     copy as a sibling (or none: the price-list overrides), so the empty root draws no blank box. The id list outranks the
     adaptive-table and grid rules of this layer (0,1,2 at most), which restyle the same roots below 48rem. */
  :is(#products-body, #categories-body, #attribute-grid, #spec-field-list, #attribute-value-list, #price-list-overrides)[data-collection-state="empty"] {
    display: none;
  }

  :where(.data-card, .form-card, .settings-panel, .editor-dialog, .productivity-panel) {
    border-radius: var(--ui-radius-lg);
  }

  :where(.stats article, .settings-group, .publication-card, .billing-lifecycle,
    .billing-history, .support-entry, .team-member-card,
    .team-invitation-card, .account-session-item, .plan-card, .fabric-card,
    .color-list__item, .spec-field-row, .share-link-card, .price-lists__override,
    .productivity-card) {
    border-radius: var(--ui-radius-md);
  }

  @media (max-width: 64rem) {
    .spec-field-row { grid-template-columns: minmax(0, 1fr) minmax(8rem, .55fr) auto; }
    .spec-field-row__meta:nth-of-type(3) { display: none; }
  }

  @media (max-width: 44rem) {
    #attribute-dialog,
    #spec-field-dialog { inline-size: calc(100vw - 1rem); max-block-size: calc(100dvh - 1rem); padding: var(--ui-space-4); }
    #attribute-dialog .dialog-actions,
    #spec-field-dialog .dialog-actions {
      inset-block-end: 0;
      margin-inline: 0;
      padding-inline: var(--ui-space-4);
    }
    .spec-field-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--ui-space-3); }
    .spec-field-row__meta { display: none; }
    .spec-field-row__status { grid-column: 1; justify-self: start; }
    .spec-field-row__action { grid-column: 2; grid-row: 1 / span 2; }
  }

  @media (max-width: 38rem) {
    .hero-settings__preview {
      inline-size: 100%;
      min-block-size: 0;
      aspect-ratio: 4 / 5;
    }
  }

  @media (max-width: 38rem) {
    #categories-section table[data-ui-adaptive-table="true"] tbody {
      display: grid;
      gap: var(--ui-space-4);
    }
    #categories-section table[data-ui-adaptive-table="true"] tr {
      display: grid;
      overflow: clip;
      border: 1px solid var(--ui-line);
      border-block-start: 4px solid var(--ui-accent-strong);
      border-radius: var(--ui-radius-lg);
      background: var(--ui-surface);
      box-shadow: var(--ui-shadow-resting);
    }
    #categories-section table[data-ui-adaptive-table="true"] td {
      padding: .85rem 1rem;
      border-block-end: 1px solid var(--ui-line);
    }
    #categories-section table[data-ui-adaptive-table="true"] td:last-child { border-block-end: 0; }
  }
}

@layer utilities {
  @media (max-width: 48rem) {
    table[data-ui-adaptive-table="true"] tbody {
      display: grid;
      gap: var(--ui-space-4);
      padding: var(--ui-space-2);
      background: color-mix(in srgb, var(--ui-paper) 76%, var(--ui-surface-muted));
    }

    table[data-ui-adaptive-table="true"] tr {
      display: grid;
      overflow: clip;
      border: 1px solid var(--ui-line-strong);
      border-block-start: 4px solid var(--ui-accent-strong);
      border-radius: var(--ui-radius-lg);
      background: var(--ui-surface);
      box-shadow: var(--ui-shadow-resting);
    }

    table[data-ui-adaptive-table="true"] td {
      padding: var(--ui-space-3) var(--ui-space-4);
      border-block-start: 1px solid var(--ui-line);
      background: var(--ui-surface);
    }

    table[data-ui-adaptive-table="true"] td:first-child {
      border-block-start: 0;
      background: color-mix(in srgb, var(--ui-surface-muted) 72%, var(--ui-surface));
    }

    table[data-ui-adaptive-table="true"] td:last-child {
      background: color-mix(in srgb, var(--ui-paper) 62%, var(--ui-surface));
    }

    :where(.team-members__list, .team-invitations__list,
      .support-list, .account-sessions-list, .fabric-grid, .color-list,
      .spec-fields-list, .catalog-editor__history, .price-lists__overrides) {
      display: grid;
      gap: var(--ui-space-4);
    }

    :where(.team-member-card, .team-invitation-card,
      .support-entry, .account-session-item, .share-link-card, .fabric-card,
      .color-list__item, .spec-field-row, .catalog-editor__history-item,
      .price-lists__override, .productivity-card) {
      overflow: clip;
      border: 1px solid var(--ui-line-strong);
      border-block-start: 4px solid var(--ui-accent-strong);
      border-radius: var(--ui-radius-lg);
      background: var(--ui-surface);
      box-shadow: var(--ui-shadow-resting);
    }

    #products-section table[data-ui-adaptive-table="true"] tbody {
      gap: var(--ui-space-4);
    }

    #products-section table[data-ui-adaptive-table="true"] tr {
      position: relative;
      border: 1px solid var(--ui-line-strong);
      border-block-start: 4px solid var(--ui-accent-strong);
      border-radius: var(--ui-radius-lg);
      background: var(--ui-surface);
      box-shadow: var(--ui-shadow-resting);
    }

    #products-section table[data-ui-adaptive-table="true"] td {
      min-block-size: 3.25rem;
      padding: var(--ui-space-3) var(--ui-space-4);
      border-block-start: 1px solid var(--ui-line);
    }

    #products-section table[data-ui-adaptive-table="true"] td:first-child {
      min-block-size: 5.5rem;
      border-block-start: 0;
      background: color-mix(in srgb, var(--ui-surface-muted) 72%, var(--ui-surface));
    }

    #products-section table[data-ui-adaptive-table="true"] td:last-child {
      padding-block: var(--ui-space-4);
      background: color-mix(in srgb, var(--ui-paper) 62%, var(--ui-surface));
    }

    #products-section table[data-ui-adaptive-table="true"] td:last-child .row-actions {
      gap: var(--ui-space-2);
    }

    #products-section table[data-ui-adaptive-table="true"] td:last-child .row-actions > * {
      min-block-size: 2.75rem;
      border-radius: var(--ui-radius-sm);
    }
  }
}

@layer utilities {
  .page-section > :where(.page-heading, .data-card, .form-card, .productivity, .product-editor, .price-lists, .team-members, .team-invitations) +
  :where(.data-card, .form-card, .productivity, .product-editor, .price-lists, .team-members, .team-invitations) {
    margin-block-start: clamp(var(--ui-space-5), 3vw, var(--ui-space-7));
  }

  .tenant-badge {
    display: grid;
    grid-template-columns: minmax(5.5rem, 1fr) auto auto;
    align-items: center;
    gap: var(--ui-space-2);
    min-inline-size: min(24rem, 100%);
    padding: .65rem;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-md);
    background: color-mix(in srgb, var(--ui-surface) 88%, var(--ui-paper));
    box-shadow: var(--ui-shadow-resting);
  }

  .tenant-badge > span {
    grid-column: auto;
    min-inline-size: 0;
    padding: .15rem .75rem .15rem .35rem;
    border-inline-end: 1px solid var(--ui-line);
  }

  .tenant-badge > span small,
  .tenant-badge > span b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tenant-badge .text-button {
    inline-size: 7.25rem;
    min-inline-size: 7.25rem;
    max-width: none;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem .7rem;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
  }

  #new-tenant-button {
    border-color: var(--ui-ink);
    color: var(--ui-paper);
    background: var(--ui-ink);
  }

  .tenant-badge .text-button:hover {
    border-color: var(--ui-ink);
    box-shadow: none;
  }

  .tenant-badge .text-button:active { transform: scale(.96); }

  #new-tenant-button:hover {
    background: color-mix(in srgb, var(--ui-ink) 88%, var(--olive, #5e6857));
  }

  @media (max-width: 30rem) {
    .tenant-badge {
      grid-template-columns: minmax(3.2rem, 1fr) auto auto;
      gap: .45rem;
      padding-inline: .55rem;
    }

    .tenant-badge > span { padding-inline: .15rem .45rem; }
    .tenant-badge > span small { display: none; }

    .tenant-badge .text-button {
      inline-size: 5.85rem;
      min-inline-size: 5.85rem;
      padding-inline: .45rem;
      font-size: .55rem;
    }
  }

  #media-detail-dialog {
    inline-size: min(74rem, calc(100vw - 2rem));
    max-inline-size: calc(100vw - 2rem);
    max-block-size: calc(100dvh - 2rem);
    padding: 0;
    overflow: hidden;
    border-radius: var(--ui-radius-xl);
  }

  #media-detail-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  #media-detail-dialog .media-detail__heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    margin: 0;
    padding: clamp(var(--ui-space-4), 2.4vw, var(--ui-space-6));
    padding-inline-end: clamp(var(--ui-space-4), 2.4vw, var(--ui-space-6));
    border-block-end: 1px solid var(--ui-line);
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
  }

  #media-detail-dialog .media-detail__heading h2 {
    margin-block: .2rem 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: .98;
  }

  .media-detail__close {
    flex: 0 0 2.75rem;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--ui-line-strong);
    border-radius: 50%;
    color: var(--ui-ink);
    background: var(--ui-surface);
    font-size: 1.35rem;
    line-height: 1;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
  }

  .media-detail__close:hover {
    color: var(--ui-surface);
    border-color: var(--ui-ink);
    background: var(--ui-ink);
  }

  .media-detail__close:active { transform: scale(.96); }

  .media-detail__close:focus-visible {
    outline: 3px solid var(--ui-focus-color, #61715c);
    outline-offset: 3px;
  }

  #media-detail-content {
    display: grid;
    gap: var(--ui-space-5);
    min-inline-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: clamp(var(--ui-space-4), 2.4vw, var(--ui-space-6));
  }

  .media-detail__layout {
    display: grid;
    grid-template-columns: minmax(20rem, .95fr) minmax(24rem, 1.05fr);
    gap: clamp(var(--ui-space-5), 3vw, var(--ui-space-7));
    align-items: start;
  }

  .media-detail__preview {
    position: sticky;
    inset-block-start: 0;
    min-inline-size: 0;
    margin: 0;
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-muted);
  }

  .media-detail__preview img {
    inline-size: 100%;
    block-size: min(56dvh, 34rem);
    display: block;
    object-fit: contain;
    border-radius: calc(var(--ui-radius-lg) - var(--ui-space-2));
    background: var(--ui-surface);
  }

  .media-detail__preview figcaption {
    min-inline-size: 0;
    margin: 0;
    color: var(--ui-ink-muted);
    font-size: .75rem;
    overflow-wrap: anywhere;
  }

  .media-detail__preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    margin-block-start: var(--ui-space-3);
  }

  .media-detail__zoom-button {
    position: static;
    flex: 0 0 auto;
    min-block-size: 44px;
    padding: .65rem .85rem;
    border: 1px solid var(--ui-line-strong);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
    box-shadow: none;
  }

  .media-detail__information,
  .media-detail__activity,
  .media-detail__activity > section {
    display: grid;
    gap: var(--ui-space-5);
    min-inline-size: 0;
  }

  .media-detail__summary,
  .media-detail__technical,
  .media-detail__edit {
    display: grid;
    gap: var(--ui-space-3);
    min-inline-size: 0;
  }

  .media-detail__summary > h3,
  .media-detail__technical > h3,
  .media-detail__edit > h3 {
    margin: 0;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  }

  .media-detail__section,
  .media-detail__activity > section {
    padding: clamp(var(--ui-space-4), 2vw, var(--ui-space-5));
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
  }

  .media-detail__technical {
    background: var(--ui-surface-muted);
  }

  .media-detail__section .media-detail__list {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .media-detail__edit input { min-block-size: 46px; border-radius: .65rem; }
  .media-detail__edit button { min-block-size: 46px; border-radius: .65rem; }
  .media-detail__activity { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .media-detail__zoom {
    position: fixed;
    z-index: 500;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--ui-space-5);
    background: rgba(14, 14, 12, .92);
  }

  .media-detail__zoom[hidden] { display: none; }
  .media-detail__zoom img { inline-size: min(92vw, 90rem); block-size: min(86dvh, 60rem); object-fit: contain; }
  .media-detail__zoom-close { position: fixed; inset-block-start: var(--ui-space-5); inset-inline-end: var(--ui-space-5); min-block-size: 44px; padding: .65rem .85rem; border: 1px solid rgba(255,255,255,.3); border-radius: .7rem; color: white; background: rgba(255,255,255,.1); }

  @media (max-width: 50rem) {
    #media-detail-dialog { inline-size: calc(100vw - 1rem); max-inline-size: calc(100vw - 1rem); max-block-size: calc(100dvh - 1rem); }
    #media-detail-dialog .media-detail__heading { padding: var(--ui-space-4); }
    #media-detail-dialog .media-detail__heading h2 { font-size: clamp(1.8rem, 9vw, 2.5rem); }
    #media-detail-content { padding: var(--ui-space-4); scrollbar-gutter: auto; }
    .media-detail__layout,
    .media-detail__activity { grid-template-columns: minmax(0, 1fr); }
    .media-detail__preview { position: relative; }
    .media-detail__preview img { block-size: min(44dvh, 25rem); }
    .media-detail__preview-toolbar { align-items: stretch; flex-direction: column; }
    .media-detail__zoom-button { inline-size: 100%; }
  }

  #media-upload-dialog {
    inline-size: min(58rem, calc(100vw - 2rem));
    max-inline-size: calc(100vw - 2rem);
  }

  .media-upload-stage {
    position: relative;
    overflow: clip;
    min-block-size: clamp(16rem, 42dvh, 30rem);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-muted);
  }

  .media-upload-preview {
    inline-size: 100%;
    block-size: clamp(16rem, 42dvh, 30rem);
    display: block;
    object-fit: contain;
    will-change: transform;
  }

  .media-edit-controls {
    display: grid;
    gap: var(--ui-space-4);
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
  }

  .media-edit-ranges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ui-space-3);
  }

  .media-edit-ranges label {
    display: grid;
    gap: var(--ui-space-2);
    min-inline-size: 0;
  }

  .media-edit-ranges label > span {
    display: flex;
    justify-content: space-between;
    gap: var(--ui-space-2);
    font-size: .78rem;
    font-weight: 700;
  }

  .media-edit-stickers {
    margin-block-start: var(--ui-space-2);
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-muted);
  }

  .media-edit-sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 2.75rem);
    justify-content: start;
    gap: var(--ui-space-2);
    max-block-size: 17rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .media-edit-stickers__status {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  [data-state="error"] > .media-edit-stickers__status,
  [data-state="empty"] > .media-edit-stickers__status {
    position: static;
    inline-size: auto;
    block-size: auto;
    grid-column: 1 / -1;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .media-edit-stickers button {
    inline-size: 44px;
    block-size: 44px;
    display: grid;
    place-items: center;
    padding: .45rem;
    border: 1px solid var(--ui-line);
    border-radius: .75rem;
    background: var(--ui-surface);
  }

  .media-edit-stickers button[aria-pressed="true"] {
    border-color: var(--ui-ink);
    color: var(--ui-surface);
    background: var(--ui-ink);
  }

  .media-edit-stickers button:focus-visible {
    outline: 3px solid var(--ui-focus, #c8522f);
    outline-offset: 2px;
  }

  .media-edit-stickers button:disabled { opacity: .42; cursor: not-allowed; }

  .media-edit-stickers img { inline-size: 1.65rem; block-size: 1.65rem; object-fit: contain; }

  .media-edit-stickers__none span { font-size: 1.35rem; line-height: 1; }

  .media-edit-preview-shell { position: relative; overflow: hidden; isolation: isolate; }

  .media-edit-preview-shell > img.media-edit-sticker-preview {
    position: absolute;
    z-index: 2;
    inset-block-start: 6%;
    inset-inline-end: 6%;
    inline-size: 20%;
    block-size: 20%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 .2rem .35rem rgb(0 0 0 / .2));
  }

  @media (max-width: 42rem) {
    #media-upload-dialog { inline-size: calc(100vw - 1rem); max-inline-size: calc(100vw - 1rem); }
    .media-edit-ranges { grid-template-columns: minmax(0, 1fr); }
    .media-edit-sticker-grid { max-block-size: 15rem; }
  }
}
/* Scoped QR and PDF materials. */
.share-center__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); gap: 1.25rem; align-items: start; }
.share-center__form, .share-center__result, .share-center__history { border-radius: 1.25rem; }
.share-center__form { display: grid; overflow: clip; }
.share-center__result { display: grid; position: sticky; top: 1rem; overflow: clip; }
.share-center__body { display: grid; gap: 1rem; min-inline-size: 0; padding: 0 1.5rem 1.5rem; }
.share-center__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.share-center__body > .button[type="submit"] { justify-self: stretch; inline-size: 100%; }
.share-center__qr { width: min(100%, 18rem); aspect-ratio: 1; margin-inline: auto; padding: .9rem; border: 1px solid var(--line, #d8cdbd); border-radius: 1.1rem; background: #fff; }
.share-center__qr svg { display: block; width: 100%; height: 100%; }
.share-center__result-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.share-center__status { margin: 1rem 0 0; }
.share-center__status:empty { display: none; }
.share-center__status[data-ui-state="error"], .share-center__status[data-ui-state="validation"], .share-center__status[data-ui-state="retry"] { border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-line)); color: var(--ui-danger); }
.share-center__status[data-ui-state="success"] { border-color: color-mix(in srgb, var(--ui-success) 42%, var(--ui-line)); color: var(--ui-success); }
.share-center__history { margin-top: 1.25rem; overflow: hidden; }
.share-link-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-top: 1px solid var(--line, #d8cdbd); }
.share-link-card:first-child { border-top: 0; }
.share-link-card p { margin: .2rem 0; }
.share-link-card small { color: var(--muted, #625f58); }
.share-link-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.share-center__empty { margin: 0; padding: 1.25rem; color: var(--muted, #625f58); }

@media (max-width: 880px) {
  .share-center__layout { grid-template-columns: 1fr; }
  .share-center__result { position: static; }
  .share-center__fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .share-center__body { padding: 0 1rem 1rem; }
  .share-link-card { align-items: stretch; flex-direction: column; }
  .share-link-card__actions, .share-center__result-actions { display: grid; grid-template-columns: 1fr; }
  .share-link-card__actions .button, .share-center__result-actions .button { width: 100%; }
}

/* M4 tenant composition: predictable spacing and progressive disclosure. */
.settings-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  min-inline-size: 0;
}
.settings-panels > .settings-panel {
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
  margin-block-start: 0;
}

@media (max-width: 48rem) {
  #settings-form .form-grid,
  #settings-form .form-grid--2,
  #settings-form .hero-settings {
    grid-template-columns: minmax(0, 1fr);
  }
}

.catalog-identity-card {
  display: grid;
  gap: 1.25rem;
  margin-block-end: 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-resting);
}
.catalog-identity-card__intro { display: grid; gap: .4rem; max-inline-size: 76ch; }
.catalog-identity-card__intro :is(h3, p) { margin: 0; }
.catalog-identity-card__forms {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.catalog-identity-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .75rem;
  min-inline-size: 0;
  padding: 1rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-muted);
}
.catalog-identity-form .message { grid-column: 1 / -1; min-block-size: 0; margin: 0; }
.slug-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-inline-size: 0;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-sm);
  background: #fff;
  overflow: clip;
}
.slug-field > span {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding-inline: .85rem;
  border-inline-end: 1px solid var(--ui-line);
  color: var(--ink-2);
  background: var(--ui-surface-muted);
  font-weight: 700;
}
.slug-field input { min-inline-size: 0; border: 0; box-shadow: none; }
.slug-field input:focus,
.slug-field input:focus-visible { outline: none; box-shadow: none; }
.slug-field:focus-within { border-color: var(--olive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--olive) 18%, transparent); }
.publication-card__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }

@media (max-width: 68rem) {
  .catalog-identity-card__forms { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 42rem) {
  .catalog-identity-form { grid-template-columns: minmax(0, 1fr); }
  .catalog-identity-form .button,
  .publication-card__actions,
  .publication-card__actions .button { inline-size: 100%; }
}

.share-center__layout:has(.share-center__result[hidden]) { grid-template-columns: minmax(0, 1fr); }
.share-center__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.share-center__form > :first-child,
.share-center__form > :nth-child(4),
.share-center__form > :last-child { grid-column: 1 / -1; }
.share-center__result:focus-visible { outline: 3px solid var(--focus, #1959a6); outline-offset: 3px; }

.catalog-editor__secondary-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1rem;
  padding: 1rem;
  border: 1px solid var(--danger, #9f2d2d);
  border-radius: 1rem;
  background: #fff7f5;
  color: #6f1d1d;
}
.catalog-editor__secondary-error[hidden] { display: none; }
.catalog-editor__secondary-error p { margin: .25rem 0 0; }
.catalog-editor__history-status { min-block-size: 1.5rem; color: var(--ink-muted, #535862); }
.catalog-editor__history-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 880px) {
  .share-center__form { grid-template-columns: minmax(0, 1fr); }
  .share-center__form > * { grid-column: 1; }
}

@media (max-width: 560px) {
  .catalog-editor__secondary-error { align-items: stretch; flex-direction: column; }
  .catalog-editor__secondary-error .button { inline-size: 100%; }
}

@layer utilities {
  /* T1 gui-panels-alignment: form rows align to top so a taller neighbor (hint or error
     lines) no longer stretches its sibling field or displaces that field's input. */
  .form-grid { align-items: start; }
  .field { align-content: start; }

  /* T1: the single label-as-first-child field (settings hero alt) joins the shared
     .field > span:first-child label voice from admin.css. */
  .field > label:first-child { font-size: .73rem; font-weight: 700; }
}

@layer utilities {
  /* T2 gui-panels-alignment: the Cotizaciones section shipped with no section CSS at all
     (browser defaults: groove fieldsets, glued subsections, stacked line rows, unstyled
     totals). Dress it in the panel's existing language: .settings-fieldset surface for the
     party fieldsets, .settings-actions row for the action bars, tokens only. */
  .quotes__editor { display: grid; gap: var(--ui-space-5); }
  .quotes__live:empty { display: none; }

  .quotes__party {
    display: grid;
    gap: var(--ui-space-4);
    min-inline-size: 0;
    margin: 0;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: color-mix(in srgb, var(--ui-surface) 82%, var(--ui-surface-muted));
  }
  .quotes__party > legend {
    padding-inline: var(--ui-space-2);
    color: var(--ui-ink-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .quotes__party-actions,
  .quotes__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--ui-space-3);
  }

  .quotes__section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-3);
  }
  .quotes__section-head h3,
  .quotes__section-head p,
  .quotes__totals h3 { margin: 0; }
  .quotes__section-head p,
  .quotes__totals-note,
  .quote-totals__empty { margin: 0; color: var(--ui-ink-muted); }

  .quotes__lines,
  .quotes__totals,
  .quote-lines { display: grid; gap: var(--ui-space-3); min-inline-size: 0; }

  .quote-lines__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ui-space-3);
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
  }
  .quote-lines__row > * { min-inline-size: 0; }
  .quote-lines__row-actions { display: flex; justify-content: flex-end; align-items: end; }

  .quote-totals { display: grid; gap: var(--ui-space-2); }
  .quote-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-4);
  }
  .quote-totals__row strong { font-variant-numeric: tabular-nums; }
  .quote-totals__row--total {
    padding-block-start: var(--ui-space-2);
    border-block-start: 1px solid var(--ui-line);
  }

  @media (max-width: 42rem) {
    .quote-lines__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

/* ===== gui-panels-alignment T3: one canonical label voice (audit #4-#7) =====
   Canonical = .field > span:first-child (admin.css:63). Uppercase stays reserved
   for .overline; typography-only overrides, zero counted literals. */
@layer utilities {
  /* #4 Apariencia (+ overlay-controls caption): .field-label joins the canonical
     voice instead of the legacy uppercase micro-label (admin.css:662). */
  .field-label {
    color: inherit;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
  }

  /* #5 sessions reauth dialog: label was .7rem/800; the input keeps its OTP
     styling (height already governed by --ui-target-min). */
  .account-sessions__reauth label {
    font-size: .73rem;
    font-weight: 700;
  }

  /* #6 support filter: label was .65rem/400; the select follows via the legacy
     `font: inherit` control rule (admin.css:23). */
  .support-filter { font-size: .73rem; }
  .support-filter > span { font-weight: 700; }

  /* #7 signup consent: reading text, not a label — regular weight; the inline
     checkbox top-aligns to the first text line. */
  #signup-integrity-controls .field > span:first-child { font-weight: 400; }
  #signup-integrity-controls .field > span:first-child > input[type="checkbox"] {
    vertical-align: text-top;
  }
}

/* landing-polish-login:start — the admin login (the auth view) in the home's "Comercio" identity: papel frío page, white
   card, verde botella brand panel with the soft esmeralda/oro mesh and gold "costura" threads, Bricolage Grotesque headline
   over Instrument Sans, the home's gold storefront logo and its gold 3D CTA. Every selector is scoped to .auth-view, so the
   logged-in panel and the signup/forgot dialogs (outside it) do not change. Spacing, radius and depth come from tokens; the
   hard gold edge is a bottom border. The focus ring token is re-pointed to esmeralda inside the view. On phones (the brand
   panel is hidden there) the card's top row becomes a compact verde band carrying the logo. */
@layer utilities {
  .auth-view {
    --auth-green: #0f3229;
    --auth-paper: #f4f6f2;
    --auth-card: #ffffff;
    --auth-ink: #16211b;
    --auth-muted: #52605a;
    --auth-line: #d3decf;
    --auth-line-strong: #b8c6b4;
    /* input boundary (judgment-day F2, WCAG 1.4.11): 3.58:1 on the white card and input face, 3.29:1 on papel frío */
    --auth-line-control: #7c8b82;
    --auth-link: #196a49;
    --auth-link-hover: #0f4a32;
    --auth-focus: #1e7a55;
    --auth-on-dark: #f2f5f0;
    --auth-on-dark-muted: #a9bfb2;
    --auth-gold-text: #dbbe77;
    --auth-gold-top: #e4b95b;
    --auth-gold: #c6973c;
    --auth-gold-top-hover: #ecc66b;
    --auth-gold-hover: #d0a246;
    --auth-gold-edge: #8a6a24;
    --auth-gold-ink: #241a05;
    --auth-highlight: rgba(255, 255, 255, 0.45);
    --auth-tint: rgba(242, 245, 240, 0.08);
    --auth-blob-emerald: rgba(35, 166, 113, 0.26);
    --auth-blob-gold: rgba(198, 166, 100, 0.22);
    --auth-blob-teal: rgba(23, 107, 110, 0.24);
    --auth-thread: rgba(219, 190, 119, 0.45);
    --auth-seam: rgba(198, 166, 100, 0.4);
    --auth-font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --auth-font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ui-focus-color: var(--auth-focus);
    color: var(--auth-ink);
    background: var(--auth-paper);
    font-family: var(--auth-font-sans);
  }

  /* Brand panel (desktop): verde botella mesh, dashed gold frame, threads, gold logo. */
  .auth-view .auth-visual {
    color: var(--auth-on-dark);
    background-color: var(--auth-green);
    background-image:
      radial-gradient(42rem 26rem at 8% 0%, var(--auth-blob-emerald), transparent 65%),
      radial-gradient(40rem 24rem at 96% 42%, var(--auth-blob-gold), transparent 65%),
      radial-gradient(34rem 22rem at 24% 100%, var(--auth-blob-teal), transparent 70%);
  }
  .auth-view .auth-visual::before { border: 1px dashed var(--auth-seam); }
  .auth-view .auth-visual__threads {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
  }
  .auth-view .auth-visual__threads path { fill: none; stroke: var(--auth-thread); stroke-width: 1.5; stroke-linecap: round; }
  .auth-view .auth-visual__threads .auth-visual__thread--fine { stroke-width: 1; }
  .auth-view .auth-visual__brand { display: flex; align-items: center; gap: var(--ui-space-3); }
  .auth-view .auth-visual .overline { color: var(--auth-gold-text); }
  .auth-view .auth-visual strong {
    color: var(--auth-on-dark);
    font-family: var(--auth-font-display);
    font-size: clamp(3.25rem, 5.4vw, 5.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.95;
  }
  .auth-view .auth-visual p { color: var(--auth-on-dark-muted); }

  /* The home's gold storefront mark (the adapter's icon fill rule would fill its stroked paths). */
  .auth-view .auth-brand__mark {
    display: grid;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: none;
    place-items: center;
    border: 1px solid transparent;
    border-top-color: var(--auth-highlight);
    border-bottom: 3px solid var(--auth-gold-edge);
    border-radius: var(--ui-radius-sm);
    color: var(--auth-gold-ink);
    background: linear-gradient(180deg, var(--auth-gold-top), var(--auth-gold)) border-box var(--auth-gold);
    box-shadow: var(--ui-shadow-resting);
  }
  .auth-view .auth-brand__mark path { fill: none; }

  /* Form side: a white card on papel frío. */
  .auth-view .auth-card {
    border: 1px solid var(--auth-line);
    border-radius: var(--ui-radius-xl);
    color: var(--auth-ink);
    background: var(--auth-card);
    box-shadow: var(--ui-shadow-raised);
  }
  .auth-view .brand { min-block-size: var(--ui-target-min); gap: var(--ui-space-3); }
  .auth-view .brand b {
    color: inherit;
    font-family: var(--auth-font-display);
    font-size: var(--fd-text-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .auth-view .brand small { color: var(--auth-muted); font-size: var(--fd-text-xs); }
  .auth-view .auth-card__back {
    min-block-size: var(--ui-target-min);
    padding-inline: var(--ui-space-4);
    border: 1px solid var(--auth-line-strong);
    border-radius: var(--ui-radius-pill);
    color: var(--auth-ink);
    background: var(--auth-card);
    font-size: var(--fd-text-sm);
    font-weight: 600;
  }
  .auth-view .auth-card__back:hover { border-color: var(--auth-link); color: var(--auth-link); }
  .auth-view .auth-card__heading .overline { color: var(--auth-link); }
  .auth-view .auth-card h1 {
    color: var(--auth-ink);
    font-family: var(--auth-font-display);
    font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .auth-view .field > span:first-child { color: var(--auth-ink); font-size: var(--fd-text-sm); font-weight: 600; }
  .auth-view .field input {
    min-block-size: 3rem;
    padding-inline: var(--ui-space-4);
    border: 1px solid var(--auth-line-control);
    border-radius: var(--ui-radius-sm);
    color: var(--auth-ink);
    background: var(--auth-card);
    font-size: var(--fd-text-md);
  }
  .auth-view .field input:hover { border-color: var(--auth-muted); }
  .auth-view .field input:focus { border-color: var(--auth-focus); box-shadow: none; }
  .auth-view .field input:focus-visible { outline: var(--ui-focus-size) solid var(--auth-focus); outline-offset: 2px; }
  /* An invalid field hands its boundary and halo back to the components layer (the --ui-danger border and halo), at rest,
     on hover and on focus (judgment-day F3). */
  .auth-view .field input[aria-invalid="true"], .auth-view .field input[aria-invalid="true"]:hover, .auth-view .field input[aria-invalid="true"]:focus {
    border-color: revert-layer;
    box-shadow: revert-layer;
  }
  /* "Mostrar" sits inside the password box, on the right, as a 44px target. */
  .auth-view .password-control input { padding-inline-end: calc(var(--ui-space-9) - var(--ui-space-2)); }
  .auth-view .password-control button {
    inset-inline-end: var(--ui-space-1);
    min-inline-size: var(--ui-target-min);
    min-block-size: var(--ui-target-min);
    padding-inline: var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
    color: var(--auth-link);
    font-size: var(--fd-text-sm);
    font-weight: 700;
  }
  .auth-view .password-control button:hover { color: var(--auth-link-hover); background: var(--auth-paper); }
  .auth-view .text-button {
    display: inline-flex;
    min-block-size: var(--ui-target-min);
    align-items: center;
    color: var(--auth-link);
    font-size: var(--fd-text-sm);
    font-weight: 600;
    text-underline-offset: 0.2em;
  }
  .auth-view .text-button:hover { color: var(--auth-link-hover); }
  .auth-view .auth-card__note { color: var(--auth-muted); font-size: var(--fd-text-sm); }
  .auth-view .auth-divider { color: var(--auth-muted); }
  .auth-view .auth-divider::before,
  .auth-view .auth-divider::after { background: var(--auth-line); }

  /* "Ingresar": the home's gold 3D CTA (gradient face, translucent top highlight, hard bottom edge). */
  .auth-view .button--dark {
    min-block-size: 3rem;
    padding-inline: var(--ui-space-5);
    border: 1px solid transparent;
    border-color: var(--auth-highlight) transparent var(--auth-gold-edge);
    border-bottom-width: 3px;
    border-radius: var(--ui-radius);
    color: var(--auth-gold-ink);
    background: linear-gradient(180deg, var(--auth-gold-top), var(--auth-gold)) border-box var(--auth-gold);
    box-shadow: var(--ui-shadow-raised);
    font-size: var(--fd-text-md);
    font-weight: 700;
  }
  .auth-view .button--dark:hover:not(:disabled) {
    color: var(--auth-gold-ink);
    background-image: linear-gradient(180deg, var(--auth-gold-top-hover), var(--auth-gold-hover));
  }
  /* Disabled or busy: flat, no raise and no dark edge (judgment-day F6; the components layer keeps the reduced opacity). */
  .auth-view .button--dark:disabled, .auth-view .button--dark[aria-busy="true"] {
    border-bottom-color: var(--auth-gold);
    box-shadow: none;
  }
  /* "Ingresar con Google": white, hairline, a subtle raise on hover. */
  .auth-view .button--google {
    min-block-size: 3rem;
    border: 1px solid var(--auth-line-strong);
    border-radius: var(--ui-radius);
    color: var(--auth-ink);
    background: var(--auth-card);
    box-shadow: var(--ui-shadow-resting);
    font-size: var(--fd-text-md);
    font-weight: 600;
  }
  .auth-view .button--google:hover:not(:disabled) {
    border-color: var(--auth-muted);
    background: var(--auth-card);
    box-shadow: var(--ui-shadow-raised);
  }
  /* Disabled (while the OAuth redirect runs) or busy: the dashed R-11 boundary of the components layer (judgment-day F9). */
  .auth-view .button--google:disabled, .auth-view .button--google[aria-busy="true"] { border-style: dashed; }

  /* Phones and tablets (the brand panel is hidden below 850px): the card spreads edge to edge and its top row becomes a
     compact verde band with the gold logo and a light "Volver". */
  @media (max-width: 850px) {
    .auth-view { align-content: start; }
    .auth-view .auth-card {
      inline-size: 100%;
      margin: 0;
      padding: 0 0 var(--ui-space-7);
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
    }
    .auth-view .auth-card > :not(.auth-card__top) {
      inline-size: min(32rem, 100% - 2 * var(--ui-space-5));
      margin-inline: auto;
    }
    .auth-view .auth-card__top {
      padding: var(--ui-space-3) max(var(--ui-space-4), env(safe-area-inset-right)) var(--ui-space-3) max(var(--ui-space-4), env(safe-area-inset-left));
      border-bottom: 1px dashed var(--auth-seam);
      color: var(--auth-on-dark);
      background-color: var(--auth-green);
      background-image:
        radial-gradient(24rem 12rem at 0% 0%, var(--auth-blob-emerald), transparent 65%),
        radial-gradient(24rem 12rem at 100% 0%, var(--auth-blob-gold), transparent 65%);
    }
    .auth-view .auth-card__top .brand small { color: var(--auth-on-dark-muted); }
    .auth-view .auth-card__back {
      border-color: var(--auth-seam);
      color: var(--auth-on-dark);
      background: var(--auth-tint);
    }
    .auth-view .auth-card__back:hover { border-color: var(--auth-gold-text); color: var(--auth-gold-text); }
    .auth-view .auth-card__top :focus-visible { outline-color: var(--auth-gold-text); }
    .auth-view .auth-card__heading { margin-block: var(--ui-space-7) var(--ui-space-5); }
  }
}
/* landing-polish-login:end */