/* ============================================================
   Offer岛 component normalization
   Loaded after feature and theme files, before mobile overrides.
   ============================================================ */

/* Typography */
html,
body {
  background: var(--od-bg);
  color: var(--od-text-primary);
  font-family: var(--od-font-sans);
  font-size: var(--od-text-md);
  line-height: var(--od-leading-body);
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font-family: var(--od-font-sans);
}

.section-title,
.settings-title,
.settings-section-title,
.memory-dialog-title,
.auth-title,
.ob-done-title {
  color: var(--od-text-primary);
  font-weight: var(--od-weight-semibold);
  letter-spacing: var(--od-tracking-heading);
  text-wrap: balance;
}

.section-title { font-size: clamp(28px, 3.2vw, 34px); }
.settings-title,
.settings-section-title,
.memory-dialog-title,
.auth-title,
.ob-done-title { font-size: var(--od-text-lg); }

.nav-link,
.settings-nav-item,
.settings-social-name,
.job-card-org,
.account-row-btn,
.filter-chip,
.ob-submit,
.ob-skip {
  letter-spacing: var(--od-tracking-ui);
}

.nav-link,
.settings-nav-item,
.settings-social-name { font-size: var(--od-text-sm); }
.settings-field-label { color: var(--od-text-secondary); font-size: var(--od-text-xs); font-weight: var(--od-weight-medium); }
.settings-field-hint,
.settings-section-sub,
.memory-dialog-sub,
.ob-empty-hint { color: var(--od-text-tertiary); font-size: var(--od-text-xs); line-height: var(--od-leading-body); }
.job-card-org { color: var(--od-text-secondary); font-size: var(--od-text-md); }
.job-card-title { color: var(--od-text-primary); font-size: var(--od-text-lg); font-weight: var(--od-weight-semibold); letter-spacing: var(--od-tracking-heading); }
.job-card-body,
.job-card-bullets { color: var(--od-text-secondary); font-size: var(--od-text-sm); line-height: var(--od-leading-body); }
.job-card-cover-date,
.job-card-views,
.ob-count,
.settings-key-meta { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn-primary,
.auth-submit,
.ob-submit {
  min-height: var(--od-control-md);
  padding: 0 var(--od-space-4);
  border: 1px solid var(--od-accent-solid);
  border-radius: var(--od-radius-md);
  background: var(--od-accent-solid);
  color: #ffffff;
  font-size: var(--od-text-sm);
  font-weight: var(--od-weight-semibold);
  line-height: 1;
  box-shadow: none;
  transition:
    background-color var(--od-duration-fast) var(--od-ease-out),
    border-color var(--od-duration-fast) var(--od-ease-out),
    transform var(--od-duration-fast) var(--od-ease-out);
}

.btn-primary:hover:not(:disabled),
.auth-submit:hover:not(:disabled),
.ob-submit:hover:not(:disabled) {
  background: var(--od-accent-solid-hover);
  border-color: var(--od-accent-solid-hover);
  box-shadow: none;
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled),
.auth-submit:active:not(:disabled),
.ob-submit:active:not(:disabled) { transform: scale(0.98); }

.account-row-btn,
.settings-danger-btn,
.memory-dialog-danger {
  min-height: var(--od-control-sm);
  padding: 0 var(--od-space-3);
  border-radius: var(--od-radius-pill);
  font-size: var(--od-text-xs);
  font-weight: var(--od-weight-medium);
  line-height: 1;
  transition:
    background-color var(--od-duration-fast) var(--od-ease-out),
    border-color var(--od-duration-fast) var(--od-ease-out),
    color var(--od-duration-fast) var(--od-ease-out),
    transform var(--od-duration-fast) var(--od-ease-out);
}

.account-row-btn {
  border-color: var(--od-border);
  background: var(--od-surface);
  color: var(--od-text-secondary);
}

.account-row-btn:hover:not(:disabled) {
  border-color: var(--od-border-strong);
  background: var(--od-surface-subtle);
  color: var(--od-text-primary);
}

.account-row-btn.is-primary {
  border-color: var(--od-accent-solid);
  background: var(--od-accent-solid);
  color: #ffffff;
}

.account-row-btn.is-primary:hover:not(:disabled) {
  border-color: var(--od-accent-solid-hover);
  background: var(--od-accent-solid-hover);
  color: #ffffff;
}

.account-row-btn.is-danger,
.settings-danger-btn,
.memory-dialog-danger {
  border-color: color-mix(in srgb, var(--od-danger) 40%, transparent);
  background: var(--od-danger-soft);
  color: var(--od-danger);
}

.account-row-btn.is-danger:hover:not(:disabled),
.settings-danger-btn:hover:not(:disabled),
.memory-dialog-danger:hover:not(:disabled) {
  border-color: var(--od-danger);
  background: var(--od-danger);
  color: #ffffff;
}

.btn-primary:disabled,
.auth-submit:disabled,
.ob-submit:disabled,
.account-row-btn:disabled,
.settings-danger-btn:disabled,
.memory-dialog-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Pills and compact statuses */
.filter-chip,
.chip-toggle {
  min-height: var(--od-control-sm);
  border-radius: var(--od-radius-pill);
  border-color: var(--od-border);
  background: var(--od-surface);
  color: var(--od-text-secondary);
  font-weight: var(--od-weight-medium);
  box-shadow: none;
}

.filter-chip {
  min-height: 32px;
  padding: 0 var(--od-space-3);
  font-size: var(--od-text-sm);
}

.chip-toggle {
  padding: 0 var(--od-space-3);
  font-size: var(--od-text-xs);
}

.filter-chip:hover,
.chip-toggle:hover {
  border-color: var(--od-border-strong);
  background: var(--od-surface-subtle);
  color: var(--od-text-primary);
}

.filter-chip.is-active,
.chip-toggle.is-on,
.ob-chips .chip-toggle.is-on {
  border-color: color-mix(in srgb, var(--od-accent) 58%, transparent);
  background: var(--od-accent-soft);
  color: var(--od-accent-text);
  box-shadow: none;
}

.meta-pill,
.job-card-cover-badge,
.spotlight-card-tag,
.memory-notes-tag,
.settings-key-new-tag,
.ver-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--od-radius-pill);
  font-size: var(--od-text-2xs);
  font-weight: var(--od-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.meta-pill {
  min-height: var(--od-control-xs);
  padding: 0 var(--od-space-2);
  border: 1px solid var(--od-border);
  background: var(--od-surface-subtle);
  color: var(--od-text-secondary);
}

.meta-pill.tone-blue {
  border-color: var(--od-border);
  background: var(--od-surface-subtle);
  color: var(--od-text-secondary);
}

.meta-pill.tone-amber {
  border-color: color-mix(in srgb, var(--od-warning) 22%, transparent);
  background: var(--od-warning-soft);
  color: var(--od-warning);
}

.account-status.st-approved {
  background: var(--od-success-soft);
  color: var(--od-success);
}
.account-status.st-pending {
  background: var(--od-warning-soft);
  color: var(--od-warning);
}
.account-status.st-rejected {
  background: var(--od-surface-subtle);
  color: var(--od-text-tertiary);
}

.job-card-cover-badge {
  min-height: 22px;
  padding: 0 9px;
  background: color-mix(in srgb, var(--od-surface) 88%, transparent);
  color: var(--od-text-secondary);
}

.job-card-cover-badge.tone-amber,
.job-card-cover-badge.tone-rose,
.job-card-cover-badge.tone-purple,
.job-card-cover-badge.tone-emerald,
.job-card-cover-badge.tone-blue,
.job-card-cover-badge.tone-slate {
  background: color-mix(in srgb, var(--od-surface) 88%, transparent);
  color: var(--od-text-secondary);
}

.job-card-cover-badge.va-match {
  background: var(--od-accent-soft-strong);
  color: var(--od-accent-text);
}

/* Inputs and selectable cards */
.field-input,
.memory-narrative-input,
.agent-link-input {
  border-color: var(--od-border);
  border-radius: var(--od-radius-md);
  background: var(--od-surface);
  color: var(--od-text-primary);
  font-size: var(--od-text-sm);
  line-height: var(--od-leading-ui);
  transition:
    border-color var(--od-duration-fast) var(--od-ease-out),
    box-shadow var(--od-duration-fast) var(--od-ease-out),
    background-color var(--od-duration-fast) var(--od-ease-out);
}

.field-input::placeholder,
.memory-narrative-input::placeholder,
.agent-link-input::placeholder { color: var(--od-text-tertiary); }

.field-input:focus,
.memory-narrative-input:focus,
.agent-link-input:focus {
  border-color: var(--od-accent);
  box-shadow: var(--od-focus-ring);
}

.response-style-option {
  border-color: var(--od-border);
  border-radius: var(--od-radius-md);
  background: var(--od-surface);
}

.response-style-option:hover { border-color: var(--od-border-strong); background: var(--od-surface-subtle); }
.response-style-option.is-selected {
  border-color: color-mix(in srgb, var(--od-accent) 58%, transparent);
  background: var(--od-accent-soft);
  box-shadow: none;
}

.auth-google-btn,
.ob-file-btn,
.memory-export-option {
  min-height: var(--od-control-md);
  border: 1px solid var(--od-border);
  border-radius: var(--od-radius-md);
  background: var(--od-surface);
  color: var(--od-text-secondary);
  font-size: var(--od-text-sm);
  font-weight: var(--od-weight-medium);
  box-shadow: none;
  transition:
    border-color var(--od-duration-fast) var(--od-ease-out),
    background-color var(--od-duration-fast) var(--od-ease-out),
    color var(--od-duration-fast) var(--od-ease-out),
    transform var(--od-duration-fast) var(--od-ease-out);
}

.auth-google-btn:hover:not(:disabled),
.ob-file-btn:hover,
.memory-export-option:hover {
  border-color: var(--od-border-strong);
  background: var(--od-surface-subtle);
  color: var(--od-text-primary);
  box-shadow: none;
}

/* Shared focus language */
:where(
  .nav-cta,
  .nav-icon-btn,
  .nav-login,
  .nav-agent,
  .filter-chip,
  .chip-toggle,
  .btn-primary,
  .auth-submit,
  .auth-google-btn,
  .account-row-btn,
  .settings-nav-item,
  .settings-danger-btn,
  .ob-submit,
  .ob-skip,
  .ob-file-btn,
  .response-style-option,
  .memory-export-option
):focus-visible {
  outline: 2px solid var(--od-accent);
  outline-offset: 2px;
  box-shadow: var(--od-focus-ring);
}

/* Surfaces */
.job-card,
.company-card--feed,
.guide-card,
.settings-key-row,
.memory-summary-panel,
.response-style-option {
  border-color: var(--od-border);
}

.memory-summary-panel,
.settings-readonly,
.settings-id,
.settings-cmd-code { background: var(--od-surface-subtle); }

.modal-card,
.account-modal-frame,
.memory-dialog-card { background: var(--od-surface); }

.memory-dialog-overlay { background: var(--od-overlay); }

.ob-card {
  border: 1px solid var(--od-border);
  border-radius: var(--od-radius-xl);
  background: var(--od-surface);
  box-shadow: var(--od-shadow-lg);
}

.ob-group-label {
  color: var(--od-text-secondary);
  font-size: var(--od-text-sm);
  font-weight: var(--od-weight-semibold);
  letter-spacing: var(--od-tracking-ui);
}

.ob-group-label .ob-opt,
.ob-glabel-ico,
.ob-chip-ico,
.ob-file-name,
.ob-count { color: var(--od-text-tertiary); }

.ob-chips .chip-toggle:hover .ob-chip-ico,
.ob-chips .chip-toggle.is-on .ob-chip-ico,
.ob-count b { color: var(--od-accent-text); }

.ob-foot {
  border-color: var(--od-border);
  background: color-mix(in srgb, var(--od-surface) 94%, transparent);
}

.ob-skip { color: var(--od-text-tertiary); font-size: var(--od-text-sm); }
.ob-skip:hover { color: var(--od-text-primary); }
.ob-done-mark {
  color: var(--od-accent-text);
  background: var(--od-accent-soft);
  border-color: var(--od-accent-soft-strong);
}
.ob-done-sub { color: var(--od-text-secondary); font-size: var(--od-text-sm); }

.memory-export-option b { color: var(--od-text-primary); font-size: var(--od-text-md); }
.memory-export-option span { color: var(--od-text-tertiary); font-size: var(--od-text-xs); }

/* Agent surfaces — same scale, denser rhythm */
.agent-dock-fab {
  border-color: var(--od-border);
  border-radius: var(--od-radius-pill);
  background: color-mix(in srgb, var(--od-surface) 92%, transparent);
  color: var(--od-accent-text);
  box-shadow: var(--od-shadow-md);
}

.agent-dock {
  background: color-mix(in srgb, var(--od-bg) 88%, transparent);
  border-color: var(--od-border);
  box-shadow: var(--od-shadow-lg);
}

.agent-dock-title {
  color: var(--od-text-primary);
  font-size: var(--od-text-md);
  font-weight: var(--od-weight-semibold);
  letter-spacing: var(--od-tracking-heading);
}

.agent-bubble {
  border-color: var(--od-border);
  background: var(--od-surface);
  color: var(--od-text-primary);
  font-size: var(--od-text-sm);
  line-height: var(--od-leading-body);
}

.agent-msg-user .agent-bubble,
.agent-msg-assistant .agent-bubble {
  border-color: var(--od-border);
  background: var(--od-surface);
  color: var(--od-text-primary);
}

.agent-msg-time { color: var(--od-text-tertiary); font-size: var(--od-text-2xs); }
.agent-tool-note { color: var(--od-text-tertiary); font-size: var(--od-text-xs); }
.agent-tool-note::before { background: var(--od-accent); }
.agent-bubble code { font-family: var(--od-font-mono); }

.va-conv { position: relative; }
.va-scroll-latest {
  position: absolute;
  right: 12px;
  bottom: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: var(--od-control-sm);
  padding: 0 10px;
  border: 1px solid var(--od-border-strong);
  border-radius: var(--od-radius-pill);
  background: color-mix(in srgb, var(--od-surface-raised) 94%, transparent);
  color: var(--od-text-secondary);
  font-size: var(--od-text-2xs);
  font-weight: var(--od-weight-semibold);
  box-shadow: var(--od-shadow-md);
  cursor: pointer;
}
.va-scroll-latest.has-connection-note { bottom: 32px; }
.va-scroll-latest:hover { color: var(--od-text-primary); border-color: var(--od-accent); }

.composer {
  border-color: var(--od-border);
  border-radius: var(--od-radius-lg);
  background: var(--od-surface-subtle);
  transition:
    border-color var(--od-duration-base) var(--od-ease-out),
    box-shadow var(--od-duration-base) var(--od-ease-out),
    background-color var(--od-duration-base) var(--od-ease-out);
}

.composer:focus-within {
  border-color: var(--od-accent);
  background: var(--od-surface);
  box-shadow: var(--od-focus-ring);
}

.composer textarea {
  color: var(--od-text-primary);
  font-size: var(--od-text-md);
  line-height: var(--od-leading-body);
}

.composer textarea::placeholder { color: var(--od-text-tertiary); }

.cbtn {
  width: 32px;
  height: 32px;
  border-radius: var(--od-radius-md);
  color: var(--od-text-tertiary);
  transition:
    color var(--od-duration-fast) var(--od-ease-out),
    background-color var(--od-duration-fast) var(--od-ease-out),
    transform var(--od-duration-fast) var(--od-ease-out);
}

.cbtn:hover { color: var(--od-text-primary); background: var(--od-accent-soft); }
.cbtn:active:not(:disabled) { transform: scale(0.96); }
.cbtn--send { color: var(--od-accent); }
.composer-bar { min-width: 0; }
.cbtn.cbtn--resume {
  flex: 0 0 auto;
  width: auto;
  min-width: 64px;
  padding-inline: 10px;
  gap: 5px;
  white-space: nowrap;
}
.cbtn.cbtn--resume.is-on,
.cbtn.cbtn--resume.is-on:hover {
  border-color: var(--od-accent-solid);
  background: var(--od-accent-solid);
  color: #08111f;
}

.va-qchip,
.va-runtime-pill,
.va-cloud-badge,
.va-card-cat {
  border-radius: var(--od-radius-pill);
  border-color: var(--od-border);
  background: transparent;
  color: var(--od-text-tertiary);
  font-weight: var(--od-weight-medium);
}

.va-qchip {
  min-height: var(--od-control-sm);
  padding: 0 var(--od-space-3);
  font-size: var(--od-text-xs);
}

.va-qchip:hover,
.va-runtime-pill:hover:not(:disabled),
.va-runtime-pill.is-open {
  border-color: var(--od-border-strong);
  background: var(--od-surface-subtle);
  color: var(--od-text-primary);
}

.va-cloud-badge,
.va-card-cat {
  min-height: 22px;
  padding: 0 var(--od-space-2);
  color: var(--od-accent-text);
  background: var(--od-accent-soft);
}

.va-blocker-btn,
.agent-link-add {
  min-height: var(--od-control-md);
  border-radius: var(--od-radius-md);
  background: var(--od-accent-solid);
  color: #ffffff;
  font-size: var(--od-text-sm);
  font-weight: var(--od-weight-semibold);
  transition:
    background-color var(--od-duration-fast) var(--od-ease-out),
    transform var(--od-duration-fast) var(--od-ease-out);
}

.va-blocker-btn:hover,
.agent-link-add:hover { background: var(--od-accent-solid-hover); opacity: 1; transform: translateY(-1px); }

:where(.cbtn, .va-qchip, .va-runtime-pill, .va-blocker-btn, .agent-link-add, .va-scroll-latest):focus-visible {
  outline: 2px solid var(--od-accent);
  outline-offset: 2px;
  box-shadow: var(--od-focus-ring);
}

/* Keep dark mode on the same semantic system; no separate component palette. */
html.dark .btn-primary,
html.dark .auth-submit,
html.dark .ob-submit {
  border-color: var(--od-accent-solid);
  background: var(--od-accent-solid);
  color: #08111f;
}

html.dark .btn-primary:hover:not(:disabled),
html.dark .auth-submit:hover:not(:disabled),
html.dark .ob-submit:hover:not(:disabled) {
  border-color: var(--od-accent-solid-hover);
  background: var(--od-accent-solid-hover);
  color: #08111f;
}

html.dark .filter-chip,
html.dark .chip-toggle {
  border-color: var(--od-border);
  background: var(--od-surface);
  color: var(--od-text-secondary);
}

html.dark .filter-chip:hover,
html.dark .chip-toggle:hover {
  border-color: var(--od-border-strong);
  background: var(--od-surface-subtle);
  color: var(--od-text-primary);
}

html.dark .filter-chip.is-active,
html.dark .chip-toggle.is-on,
html.dark .ob-chips .chip-toggle.is-on {
  border-color: color-mix(in srgb, var(--od-accent) 58%, transparent);
  background: var(--od-accent-soft);
  color: var(--od-accent-text);
  box-shadow: none;
}

html.dark .job-card,
html.dark .account-row,
html.dark .account-card,
html.dark .account-panel,
html.dark .memory-dialog-card,
html.dark .response-style-option,
html.dark .memory-export-option {
  border-color: var(--od-border);
  background: var(--od-surface);
  color: var(--od-text-primary);
}

html.dark .settings-nav-item { color: var(--od-text-secondary); }
html.dark .settings-nav-item:hover { background: var(--od-surface-subtle); color: var(--od-text-primary); }
html.dark .settings-nav-item.is-active { background: var(--od-accent-soft); color: var(--od-accent-text); }
html.dark .account-row-btn {
  border-color: var(--od-border);
  background: var(--od-surface);
  color: var(--od-text-secondary);
}
html.dark .account-row-btn.is-primary {
  border-color: var(--od-accent-solid);
  background: var(--od-accent-solid);
  color: #08111f;
}

html.dark .job-card-cover-badge.tone-amber,
html.dark .job-card-cover-badge.tone-rose,
html.dark .job-card-cover-badge.tone-purple,
html.dark .job-card-cover-badge.tone-emerald,
html.dark .job-card-cover-badge.tone-blue,
html.dark .job-card-cover-badge.tone-slate {
  background: color-mix(in srgb, var(--od-surface) 86%, transparent);
  color: var(--od-text-secondary);
}

html.dark .job-card-cover-badge.va-match {
  border-color: transparent;
  background: var(--od-accent-soft-strong);
  color: var(--od-accent-text);
}

@media (max-width: 640px) {
  .field-input,
  .memory-narrative-input,
  .agent-link-input,
  .composer textarea { font-size: var(--od-text-lg); }

  .btn-primary,
  .auth-submit,
  .auth-google-btn,
  .ob-submit,
  .ob-file-btn,
  .settings-danger-btn,
  .memory-dialog-danger { min-height: var(--od-control-lg); }

  .filter-chip,
  .chip-toggle,
  .account-row-btn,
  .va-qchip,
  .va-runtime-pill { min-height: 36px; }

  .cbtn,
  .nav-icon-btn,
  .account-modal-close,
  .auth-modal-close,
  .va-drawer-close {
    min-width: var(--od-control-lg);
    min-height: var(--od-control-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover:not(:disabled),
  .ob-submit:hover:not(:disabled),
  .va-blocker-btn:hover,
  .agent-link-add:hover { transform: none; }
}