/* Components the brand package does not ship yet, drawn with the same
 * tokens and rules: controls bordered in line-strong, radius-sm for
 * controls, radius-md for cards, radius-lg for dialogs, shadow-lg for
 * anything floating, focus-ring on keyboard focus.
 */

@layer components {
  /* Card */
  .wp-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }

  /* Textarea and select share the input's look */
  .wp-textarea { font: inherit; font-size: 14px; line-height: 20px; min-height: 96px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); resize: vertical; }
  .wp-textarea::placeholder { color: var(--ink-muted); }
  .wp-textarea:focus-visible, .wp-select:focus-visible { outline: 2px solid transparent; border-color: var(--teal-strong); box-shadow: var(--focus-ring); }
  .wp-select { font: inherit; font-size: 14px; height: 40px; padding: 0 var(--space-8) 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background-color: var(--surface-raised); color: var(--ink); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
  .wp-field-wide { max-width: none; }

  /* Switch */
  .wp-switch { position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--line); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
  .wp-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--surface-raised); box-shadow: var(--shadow-sm); transition: transform .15s ease; }
  .wp-switch[aria-checked="true"] { background: var(--teal-strong); border-color: var(--teal-strong); }
  .wp-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--on-teal); }
  .wp-switch:disabled { opacity: .45; cursor: not-allowed; }
  .wp-switch:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

  /* Checkbox */
  .wp-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
  .wp-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal-strong); cursor: pointer; }

  /* Dialog */
  .wp-dialog { margin: auto; width: calc(100% - 2 * var(--space-4)); max-width: 480px; max-height: calc(100vh - 2 * var(--space-4)); box-sizing: border-box; overflow: auto; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
  .wp-dialog[open] { display: flex; flex-direction: column; gap: var(--space-4); }
  .wp-dialog::backdrop { background: #0f121399; }
  .wp-dialog-head { display: flex; align-items: flex-start; gap: var(--space-3); }
  .wp-dialog-title { flex: 1; margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; }
  .wp-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

  /* Table */
  .wp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
  .wp-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
  .wp-table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ink-muted); padding: var(--space-2) var(--space-4); background: var(--surface-sunken); border-bottom: 1px solid var(--line); white-space: nowrap; }
  .wp-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
  .wp-table tr:last-child td { border-bottom: 0; }
  .wp-table tbody tr.wp-row-link { cursor: pointer; }
  .wp-table tbody tr.wp-row-link:hover { background: var(--surface-sunken); }
  .wp-table .wp-num { text-align: right; font-variant-numeric: tabular-nums; }

  /* Spinner */
  .wp-spinner { display: inline-block; flex: none; border-radius: var(--radius-full); border: 2px solid var(--line); border-top-color: var(--teal); animation: wp-spin .8s linear infinite; }
  @keyframes wp-spin { to { transform: rotate(360deg); } }

  /* Navigation item, for rails and sidebars */
  .wp-nav { font: inherit; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md); font-weight: 600; }
  .wp-nav > .wp-icon { color: var(--ink-muted); }
  .wp-nav:hover { background: var(--line); }
  .wp-nav-active, .wp-nav-active:hover { background: var(--teal-soft); color: var(--teal-text); }
  .wp-nav-active > .wp-icon { color: var(--teal-text); }

  /* Segmented control */
  .wp-segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-raised); }
  .wp-segmented button { font: inherit; font-size: 13px; font-weight: 600; height: 30px; padding: 0 var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); border: 0; border-radius: 6px; background: transparent; color: var(--ink-muted); cursor: pointer; }
  .wp-segmented button[aria-pressed="true"] { background: var(--teal-soft); color: var(--teal-text); }
  .wp-segmented button:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

  /* Danger text button */
  .wp-btn-danger-solid { background: var(--danger); color: var(--surface); border-color: var(--danger); }
  .wp-btn-danger-solid:hover { filter: brightness(1.06); }
  .wp-btn-danger:hover { filter: brightness(0.98); }
}