@layer tokens, base, layout, components, patterns, page, legacy;

/* R3-A only establishes bounded, collision-safe seams. Existing page tokens remain authoritative. */
@layer tokens {
  :where([data-ui-boundary]) {
    --r3-safe-page: var(--cloud, var(--bg, #f0f2f5));
    --r3-safe-surface: var(--paper, var(--surface, #fff));
    --r3-safe-text: var(--ink, var(--text, #172033));
    --r3-safe-text-muted: var(--ink-2, var(--text-secondary, #4d5a70));
    --r3-safe-focus: rgba(33, 95, 186, .28);
    --r3-safe-page-gap: 24px;
    --r3-safe-section-gap: 16px;
    --r3-safe-radius-control: var(--radius-control, 8px);
    --r3-safe-radius-panel: var(--radius-panel, var(--radius-16, 16px));
    --r3-safe-motion-fast: 160ms;
  }
}

@layer base {
  :where([data-ui-boundary]) {
    min-inline-size: 320px;
  }
}

@layer layout {
  :where([data-ui-boundary]) :where([data-ui-page-boundary]) {
    min-inline-size: 0;
    margin-inline: auto;
  }
}

@layer components {
  :where([data-ui-boundary]) :where([data-ui-component="surface"]) {
    min-inline-size: 0;
    border-radius: var(--r3-safe-radius-panel);
    background: var(--r3-safe-surface);
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-recurring-term-mode"]) {
    min-inline-size: 0;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-recurring-term-mode"]) [role="group"] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-recurring-term-mode"]) .qe2-subcat-chip {
    min-inline-size: 40px;
    min-block-size: 40px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 10px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    appearance: none;
    background: var(--gray-100);
    color: var(--r3-safe-text-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: none;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-recurring-term-mode"]) .qe2-subcat-chip.sel {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-recurring-term-mode"]) .qe2-subcat-chip .ti-check {
    flex: 0 0 auto;
    font-size: 14px;
    visibility: hidden;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-recurring-term-mode"]) .qe2-subcat-chip.sel .ti-check {
    visibility: visible;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-recurring-term-mode"]) .qe2-subcat-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    inline-size: min(350px, calc(100vw - 32px));
    max-inline-size: calc(100vw - 32px);
    box-sizing: border-box;
    z-index: 100;
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r3-safe-radius-panel);
    background: var(--r3-safe-surface);
    box-shadow: var(--shadow-l);
    color: var(--r3-safe-text);
    text-align: left;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) .qe2-aa-method {
    display: flex;
    gap: 6px;
    margin: 0;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) .qe2-aa-method-btn {
    min-inline-size: 0;
    min-block-size: 40px;
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r3-safe-radius-control);
    background: var(--r3-safe-surface);
    color: var(--r3-safe-text-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: none;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) .qe2-aa-method-btn.on {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) .qe2-aa-split-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, .72fr) 40px;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
    margin: 0 0 6px;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) .qe2-aa-split-row .fi {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 40px;
    box-sizing: border-box;
    border-radius: var(--r3-safe-radius-control);
    background: var(--r3-safe-surface);
    color: var(--r3-safe-text);
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) :is(.qe2-aa-name, .qe2-aa-amt) {
    min-inline-size: 0;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) .qe2-aa-amt {
    text-align: right;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) .qe2-aa-split-row span {
    min-inline-size: 0;
    overflow: hidden;
    color: var(--r3-safe-text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) .qe2-aa-split-row .btn {
    inline-size: 40px;
    min-inline-size: 40px;
    block-size: 40px;
    min-block-size: 40px;
    padding: 0;
    justify-content: center;
  }

  :where([data-ui-boundary="finance-shrimp"])
    :where([data-ui-page-boundary="quick-entry"])
    :where([data-ui-component="quick-entry-aa"]) [data-addon-aa-add] {
    min-block-size: 40px;
    justify-content: center;
  }

  :where([data-ui-component="aa-settlement"]).qe2-aa-settlement {
    inline-size: 100%;
    max-inline-size: 680px;
    box-sizing: border-box;
    margin-block-start: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-10);
    background: var(--surface);
  }

  :where([data-ui-component="aa-settlement"]) .qe2-aa-settlement-title {
    margin-block-end: 5px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
  }

  :where([data-ui-component="aa-settlement"]) .qe2-aa-settlement-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-block: 4px;
    font-size: 14px;
  }

  :where([data-ui-component="aa-settlement"]) .qe2-aa-settlement-name {
    flex: 1;
    min-inline-size: 0;
  }

  :where([data-ui-component="aa-settlement"]) .qe2-aa-settlement-amount {
    font-weight: 600;
  }

  :where([data-ui-boundary="finance-shrimp"]) .qe2-aa-settlement-status {
    color: var(--green);
    font-size: 14px;
    font-weight: 600;
  }

  @media (max-width: 480px) {
    :where([data-ui-boundary="finance-shrimp"])
      :where([data-ui-page-boundary="quick-entry"])
      :where([data-ui-component="quick-entry-aa"]) {
      position: fixed;
      inset-inline: 16px;
      right: 16px;
      bottom: calc(76px + env(safe-area-inset-bottom, 0px));
      inline-size: auto;
      max-inline-size: none;
      max-block-size: calc(100dvh - 108px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }
}

@layer patterns {
  :where([data-ui-boundary]) :where([data-ui-pattern="contained-scroll"]) {
    min-inline-size: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}

@layer page {
  :where([data-ui-boundary="import-platform"]) {
    color-scheme: light;
  }
}

@layer legacy {
  :where([data-ui-boundary]) :where([data-ui-legacy]) {
    min-inline-size: 0;
  }

  :where([data-ui-boundary="finance-shrimp"]) #modal-body .qe2-aa-split-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
    margin-bottom: 6px;
  }

  :where([data-ui-boundary="finance-shrimp"]) #modal-body .qe2-aa-split-row .fi {
    min-inline-size: 0;
  }

  :where([data-ui-boundary="finance-shrimp"]) #modal-body .qe2-aa-hint {
    margin-top: 3px;
    color: var(--r3-safe-text-muted);
    font-size: 13px;
  }
}