/* Liubai shared components v1.0 — buttons, forms, dialogs, status, empty state, steps, focus.
   Canonical source: design-system/components/liubai-base.css. Products vendor an exact copy (check-sync).

   Theme inheritance contract (why this file never needs higher specificity):
   1. Everything here lives in cascade layers and uses :where(), so it has zero specificity.
      Product CSS is unlayered and always wins, whatever order the files load in.
   2. Colors only come from --lb- tokens. Light/dark switches by changing tokens, never selectors.
   3. User output (carousel slides, built websites, exported articles, video tracks) opts out with
      .lb-user-content; nothing in this file styles inside it.

   Load order in <head>: liubai-theme.js → liubai-tokens.css → liubai-base.css → product CSS. */
@layer liubai.base, liubai.components, liubai.shared;

@layer liubai.base {
  :where(html) { background: var(--lb-bg); -webkit-text-size-adjust: 100%; }
  :where(body) {
    margin: 0; background: var(--lb-bg); color: var(--lb-text);
    font: var(--lb-weight-regular) var(--lb-text-md)/var(--lb-leading-body) var(--lb-font-sans);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word;
  }
  :where(*, *::before, *::after) { box-sizing: border-box; }
  :where([hidden]) { display: none !important; }
  :where(:not(.lb-user-content, .lb-user-content *)):focus-visible { outline: 2px solid var(--lb-focus); outline-offset: 2px; }
  :where(::selection) { background: var(--lb-light-silver); color: var(--lb-obsidian); }
  :where(h1, h2, h3):not(:where(.lb-user-content *)) { text-wrap: balance; line-height: var(--lb-leading-tight); }
  :where(p, li):not(:where(.lb-user-content *)) { text-wrap: pretty; }
  :where(code, kbd, samp, pre) { font-family: var(--lb-font-mono); }
  :where(small):not(:where(.lb-user-content *)) { font-size: max(var(--lb-text-xs), .85em); } /* 13px floor */
  :where(time, .lb-num, table) { font-variant-numeric: tabular-nums; }
  @media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
}

@layer liubai.components {
  /* Buttons — secondary is the default; .lb-primary (or legacy .primary) is the one commit action per block. */
  :where(button, .lb-button):not(:where(.lb-user-content *)) {
    font: inherit; font-size: var(--lb-text-ui); font-weight: var(--lb-weight-medium);
    min-height: var(--lb-control-h); padding: 0 var(--lb-space-4);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--lb-space-2);
    color: var(--lb-secondary-text); background: var(--lb-secondary-bg);
    border: 1px solid var(--lb-border-strong); border-radius: var(--lb-radius-md);
    cursor: pointer; text-align: center; text-decoration: none;
    transition: background var(--lb-duration-fast) var(--lb-ease), border-color var(--lb-duration-fast) var(--lb-ease), color var(--lb-duration-fast) var(--lb-ease);
  }
  :where(button, .lb-button):not(:where(.lb-user-content *)):hover { background: var(--lb-secondary-bg-hover); }
  :where(button, .lb-button):not(:where(.lb-user-content *)):disabled { opacity: .45; cursor: not-allowed; }
  :where(.lb-primary) {
    background: var(--lb-primary-fill); color: var(--lb-primary-text); border-color: transparent;
    box-shadow: var(--lb-primary-shadow); font-weight: var(--lb-weight-semibold);
  }
  :where(.lb-primary):hover { background: var(--lb-primary-fill-hover); }
  :where(.lb-quiet) { background: transparent; border-color: transparent; color: var(--lb-text-secondary); }
  :where(.lb-quiet):hover { background: var(--lb-ghost-hover); color: var(--lb-text); }
  :where(.lb-danger) { background: transparent; color: var(--lb-danger); border-color: var(--lb-danger-border); }
  :where(.lb-danger):hover { background: var(--lb-danger-bg); }

  /* Forms — visible labels, 16px inputs (no iOS zoom), 44px controls, inline errors. */
  :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select, textarea):not(:where(.lb-user-content *)) {
    font: inherit; font-size: var(--lb-text-input); color: var(--lb-text);
    background: var(--lb-surface-sunken); border: 1px solid var(--lb-border-strong); border-radius: var(--lb-radius-md);
    min-height: var(--lb-control-h); padding: 9px var(--lb-space-3); max-width: 100%;
  }
  :where(input, select, textarea):not(:where(.lb-user-content *))::placeholder { color: var(--lb-text-muted); opacity: 1; }
  :where(input, select, textarea):not(:where(.lb-user-content *)):focus { outline: none; border-color: var(--lb-focus); box-shadow: 0 0 0 1px var(--lb-focus); }
  :where(input, select, textarea):not(:where(.lb-user-content *)):user-invalid { border-color: var(--lb-danger); }
  :where(textarea) { line-height: 1.6; resize: vertical; }
  :where(input[type=checkbox], input[type=radio], input[type=range], progress) { accent-color: var(--lb-text-strong); }
  :where(input[type=file]) { font: inherit; font-size: var(--lb-text-ui); color: var(--lb-text-secondary); max-width: 100%; }
  :where(input[type=file])::file-selector-button {
    font: inherit; font-size: var(--lb-text-ui); min-height: var(--lb-control-h); margin-right: var(--lb-space-3); padding: 0 var(--lb-space-4);
    color: var(--lb-secondary-text); background: var(--lb-secondary-bg); border: 1px solid var(--lb-border-strong); border-radius: var(--lb-radius-md); cursor: pointer;
  }
  :where(.lb-field-error) { display: flex; gap: var(--lb-space-2); color: var(--lb-danger); font-size: var(--lb-text-sm); margin: var(--lb-space-1) 0 var(--lb-space-3); }
  :where(.lb-req) { margin-left: var(--lb-space-2); font-size: var(--lb-text-sm); color: var(--lb-text-muted); font-weight: var(--lb-weight-regular); }

  /* Dialog — native <dialog>; full screen on phones. */
  :where(dialog):not(:where(.lb-user-content *)) {
    color: var(--lb-text); background: var(--lb-surface-raised); border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-xl); box-shadow: var(--lb-shadow-overlay); max-width: min(720px, calc(100vw - 32px));
  }
  :where(dialog)::backdrop { background: var(--lb-overlay); }
  :where(details > summary):not(:where(.lb-user-content *)) { cursor: pointer; min-height: var(--lb-touch); display: flex; align-items: center; gap: var(--lb-space-2); color: var(--lb-text-secondary); font-size: var(--lb-text-ui); }
  :where(details[open] > summary) { color: var(--lb-text); }

  /* Status banner and toast — role=status, text + icon, never color alone. data-tone: info|success|warning|danger|saving */
  :where(.lb-status) {
    display: flex; align-items: flex-start; gap: var(--lb-space-2); padding: var(--lb-space-3) var(--lb-space-4);
    border: 1px solid var(--lb-border); border-radius: var(--lb-radius-md); background: var(--lb-surface);
    color: var(--lb-text-secondary); font-size: var(--lb-text-ui); line-height: 1.6;
  }
  :where(.lb-status)::before {
    content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: currentColor;
    -webkit-mask: var(--lb-status-icon, var(--lb-icon-info)) center/contain no-repeat; mask: var(--lb-status-icon, var(--lb-icon-info)) center/contain no-repeat;
  }
  :where(.lb-status[data-tone=success]) { --lb-status-icon: var(--lb-icon-check); color: var(--lb-success); background: var(--lb-success-bg); border-color: var(--lb-success-border); }
  :where(.lb-status[data-tone=warning]) { --lb-status-icon: var(--lb-icon-alert); color: var(--lb-warning); background: var(--lb-warning-bg); border-color: var(--lb-warning-border); }
  :where(.lb-status[data-tone=danger]) { --lb-status-icon: var(--lb-icon-alert); color: var(--lb-danger); background: var(--lb-danger-bg); border-color: var(--lb-danger-border); }
  :where(.lb-status[data-tone=saving])::before { -webkit-mask: none; mask: none; background: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lb-spin .8s linear infinite; }
  :where(.lb-status:empty) { display: none; }
  :where(.lb-toast) {
    position: fixed; right: var(--lb-space-6); bottom: var(--lb-space-6); z-index: var(--lb-z-toast); max-width: 360px;
    box-shadow: var(--lb-shadow-toast); background: var(--lb-surface-raised);
  }
  @media (max-width: 760px) { :where(.lb-toast) { left: var(--lb-space-4); right: var(--lb-space-4); bottom: var(--lb-space-4); max-width: none; } }

  /* Empty state — one neutral glyph, one title, one line, one action. */
  :where(.lb-empty) { display: grid; justify-items: center; gap: var(--lb-space-2); padding: var(--lb-space-10) var(--lb-space-6); text-align: center; color: var(--lb-text-secondary); }
  :where(.lb-empty)::before { content: ""; width: 28px; height: 28px; background: var(--lb-icon); -webkit-mask: var(--lb-icon-inbox) center/contain no-repeat; mask: var(--lb-icon-inbox) center/contain no-repeat; }
  :where(.lb-empty > strong, .lb-empty > h3) { color: var(--lb-text-strong); font-size: var(--lb-text-lg); }

  /* Steps — aria-current=step marks the active step. */
  :where(.lb-steps) { display: flex; flex-wrap: wrap; gap: var(--lb-space-2); list-style: none; margin: 0; padding: 0; counter-reset: lb-step; }
  :where(.lb-steps > *) { counter-increment: lb-step; display: inline-flex; align-items: center; gap: var(--lb-space-2); min-height: var(--lb-touch); padding: 0 var(--lb-space-4); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-pill); color: var(--lb-text-secondary); font-size: var(--lb-text-ui); }
  :where(.lb-steps > [aria-current=step]) { background: var(--lb-selected-fill); color: var(--lb-selected-text); border-color: transparent; font-weight: var(--lb-weight-semibold); }

  :where(.lb-badge) { display: inline-flex; align-items: center; gap: var(--lb-space-1); padding: 2px 10px; border: 1px solid var(--lb-border); border-radius: var(--lb-radius-pill); color: var(--lb-text-secondary); font-size: var(--lb-text-xs); line-height: 1.6; white-space: nowrap; }
  :where(.lb-badge[data-tone=danger]) { color: var(--lb-danger); border-color: var(--lb-danger-border); background: var(--lb-danger-bg); }
  :where(.lb-badge[data-tone=warning]) { color: var(--lb-warning); border-color: var(--lb-warning-border); background: var(--lb-warning-bg); }
  :where(.lb-badge[data-tone=success]) { color: var(--lb-success); border-color: var(--lb-success-border); background: var(--lb-success-bg); }

  :where(.lb-skip) { position: absolute; left: var(--lb-space-4); top: -100px; z-index: var(--lb-z-toast); background: var(--lb-primary-fill); color: var(--lb-primary-text); padding: var(--lb-space-2) var(--lb-space-4); border-radius: var(--lb-radius-md); font-size: var(--lb-text-ui); }
  :where(.lb-skip):focus { top: var(--lb-space-3); }
  :where([data-liubai-theme-toggle]) { min-height: var(--lb-control-h); }
  :where(.lb-spinner) { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lb-spin .8s linear infinite; vertical-align: -3px; }
  @keyframes lb-spin { to { transform: rotate(360deg); } }
}

/* Inline line icons (24 grid, 1.6 stroke) used by status, empty state and products via mask. */
:root {
  --lb-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.2'/%3E%3C/svg%3E");
  --lb-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --lb-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.2'/%3E%3C/svg%3E");
  --lb-icon-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5 6.2 5.6A2 2 0 0 1 8.1 4h7.8a2 2 0 0 1 1.9 1.6L20 13.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 13.5h4.5l1.5 2.5h4l1.5-2.5H20'/%3E%3C/svg%3E");
}