/* DWARFLAB semantic component layer — loaded after the Figma geometry styles. */

html,
body {
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family);
}

button {
  color: inherit;
  font-family: var(--font-family);
}

button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

button:disabled,
button[aria-disabled="true"] {
  color: var(--color-on-surface-variant);
  cursor: not-allowed;
  opacity: .56;
}

button.is-error,
button[data-state="error"] {
  background: var(--color-error);
  color: var(--color-on-error);
}

.app {
  background: var(--color-surface-dim);
  color: var(--color-on-surface);
}

/* Camera chrome remains a media overlay in both themes. */
.rail {
  background: var(--color-mask-strong);
  color: var(--color-on-primary);
}

.icon-btn,
.mode-icon,
.auto-icon,
.shoot-panel button:not(.record) {
  border-radius: var(--radius-medium);
}

.icon-btn:active,
.mode-icon:active,
.auto-icon:active,
.shoot-panel button:not(.record):active,
.media-detail-toolbar button:active,
.album-tabs button:active {
  box-shadow: inset 0 0 0 100vmax var(--color-pressed-10);
}

.icon-btn.active,
.auto-icon.active {
  background: var(--color-mask-weak);
}

.icon-btn.active img,
.album-tabs .active img {
  filter: none;
}

.top-settings,
.params,
.status {
  color: var(--color-on-primary);
}

.top-settings {
  gap: var(--space-8);
}

.top-settings b,
.detector-label {
  font: var(--typography-label-large);
}

.shoot-panel small,
.params,
.status {
  font: var(--typography-label-medium);
}

.lens-switch {
  padding: var(--space-4);
  gap: var(--space-4);
  border-radius: var(--radius-rounded);
  background: var(--color-mask-weak);
}

.lens-switch button {
  background: var(--color-mask-medium);
  color: var(--color-on-primary);
}

.lens-switch .selected {
  color: var(--color-primary);
}

.record {
  border-color: var(--color-on-primary) !important;
}

.record i,
.timer {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}

.timer {
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-rounded);
  font: var(--typography-label-large-emphasized);
}

.joystick {
  border-color: var(--color-pressed-10);
  background: var(--color-mask-weakest);
}

.joystick button {
  color: var(--color-on-primary);
}

.joystick i {
  background: var(--color-on-primary);
}

.pip,
.pip-target {
  border-color: var(--color-primary);
}

.target-pill {
  padding: var(--space-4) var(--space-12);
  gap: var(--space-8);
  border-color: var(--color-border-variant);
  border-radius: var(--radius-rounded);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}

.target-pill.detecting .detector-label::after {
  background: var(--color-primary);
  box-shadow: 8px 0 var(--color-primary-container), 16px 0 var(--color-border);
}

.pill-stop {
  border-radius: var(--radius-small);
}

.target-icon-bar {
  padding: var(--space-4) var(--space-12);
  gap: var(--space-12);
  border-color: var(--color-border);
  border-radius: var(--radius-extra-large);
  background: var(--color-surface-container);
  box-shadow: none;
}

.target-icon-bar button {
  border-radius: var(--radius-rounded);
}

.target-icon-bar button.selected {
  background: var(--color-surface-container-highest);
}

.target-icon-bar button:active {
  background: var(--color-pressed-10);
}

.target-box {
  border-radius: var(--radius-extra-small);
}

.target-box.visible {
  border-color: var(--color-primary);
  background:
    linear-gradient(var(--color-on-primary), var(--color-on-primary)) left top / 18px 2px no-repeat,
    linear-gradient(var(--color-on-primary), var(--color-on-primary)) left top / 2px 18px no-repeat,
    linear-gradient(var(--color-on-primary), var(--color-on-primary)) right top / 18px 2px no-repeat,
    linear-gradient(var(--color-on-primary), var(--color-on-primary)) right top / 2px 18px no-repeat,
    linear-gradient(var(--color-on-primary), var(--color-on-primary)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--color-on-primary), var(--color-on-primary)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--color-on-primary), var(--color-on-primary)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--color-on-primary), var(--color-on-primary)) right bottom / 2px 18px no-repeat;
  box-shadow: none;
}

.tracking-label {
  min-height: var(--space-24);
  padding: 0 var(--space-8);
  gap: var(--space-8);
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  box-shadow: none;
}

.tracking-label b {
  font: var(--typography-label-medium-emphasized);
}

.tracking-label em {
  padding-left: var(--space-8);
  border-left-color: var(--color-on-primary-container);
  color: var(--color-on-primary-container);
  font: var(--typography-label-small-emphasized);
}

.parameter-panel {
  padding: var(--space-12);
  border-color: var(--color-border-variant);
  border-radius: var(--radius-large);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  box-shadow: none;
}

.parameter-panel header {
  margin-bottom: var(--space-8);
}

.parameter-panel header b {
  font: var(--typography-title-small-emphasized);
}

.parameter-panel header button {
  border-radius: var(--radius-rounded);
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
}

.parameter-panel label {
  border-top-color: var(--color-border-variant);
  font: var(--typography-body-small);
}

.parameter-panel label span {
  color: var(--color-on-surface-variant);
}

.toast {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-small);
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
  font: var(--typography-body-small);
  box-shadow: none;
}

/* Mode selection: MD3 modal structure with DWARFLAB visual tokens. */
.mode-entry {
  background: var(--color-mask-medium);
}

.mode-select-panel {
  padding: var(--space-12) var(--space-16) var(--space-16);
  border-radius: var(--radius-extra-large);
  background: var(--color-surface);
  color: var(--color-on-surface);
}

.mode-select-panel header {
  padding-left: var(--space-8);
}

.mode-select-panel h1 {
  font: var(--typography-title-medium-emphasized);
}

.mode-select-panel header button {
  padding: var(--space-12);
  border-radius: var(--radius-large);
  background: var(--color-surface-container-high);
}

.mode-grid {
  gap: var(--space-8);
}

.mode-card {
  border-radius: var(--radius-large);
  background: var(--color-surface-container);
  color: var(--color-on-primary);
}

.mode-card::after {
  background: var(--color-mask-weakest);
}

.mode-card span {
  font: var(--typography-label-medium-emphasized);
  text-shadow: none;
}

.auto-track-mode {
  outline: 1px solid var(--color-border-variant);
}

.auto-track-mode:hover,
.auto-track-mode:focus-visible {
  outline-color: var(--color-primary);
}

.mode-card:active::after {
  background: var(--color-pressed-10);
}

:root[data-theme="light"] .mode-card:first-child::after {
  background: var(--color-mask-medium);
}

/* Creation album. */
.creation-album,
.creation-top,
.media-detail-view {
  background: var(--color-surface);
  color: var(--color-on-surface);
}

.creation-top h1 {
  font: var(--typography-title-large-emphasized);
}

.creation-body {
  padding: var(--space-16) var(--space-16) 108px;
}

.task-entry,
.creation-shortcuts button {
  border-radius: var(--radius-large);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}

.task-entry {
  gap: var(--space-4);
}

.creation-shortcuts {
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.task-entry span,
.creation-shortcuts span {
  font: var(--typography-label-medium-emphasized);
}

.task-entry:active,
.creation-shortcuts button:active,
.album-toolbar button:active,
.media-card:active {
  box-shadow: inset 0 0 0 100vmax var(--color-pressed-10);
}

.album-toolbar button {
  padding: var(--space-4) var(--space-12);
  gap: var(--space-4);
  border-radius: var(--radius-rounded);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  font: var(--typography-label-medium);
}

.creation-body h2 {
  font: var(--typography-title-small);
}

.media-card {
  background: var(--color-surface-container-high);
}

.media-card::after {
  background: linear-gradient(transparent, var(--color-mask-medium));
}

.media-card em,
.video-duration {
  border-color: var(--color-on-primary);
  border-radius: var(--radius-extra-small);
  background: var(--color-mask-medium);
  color: var(--color-on-primary);
  font: var(--typography-label-small);
}

.capture-live,
.media-card.selected::before {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Species uses the album's existing RAW badge treatment. */
.captured-video-card.capturing .capture-live {
  top: auto;
  bottom: var(--space-4);
  left: auto;
  right: var(--space-4);
}

.capture-live {
  border-radius: var(--radius-extra-small);
  font: var(--typography-label-small-emphasized);
}

.capturing .capture-live {
  background: var(--color-error);
  color: var(--color-on-error);
}

.media-card.selected {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.media-card small {
  color: var(--color-on-primary);
  font: var(--typography-label-small);
  text-shadow: none;
}

.album-tabs {
  padding: var(--space-8) var(--space-8) var(--space-24);
  gap: var(--space-4);
  border-top-color: var(--color-border-variant);
  background: var(--color-surface-container-low);
}

.album-tabs button {
  color: var(--color-on-surface-variant);
  font: var(--typography-label-medium);
}

.album-tabs .active {
  color: var(--color-primary);
  font: var(--typography-label-medium-emphasized);
}

.me-tab i {
  background: var(--color-error);
}

/* Media preview. */
.media-detail-nav {
  padding: 0 var(--space-16);
}

.media-detail-nav button {
  padding: var(--space-12) var(--space-8);
  border-radius: var(--radius-large);
}

.media-detail-nav h1 {
  font: var(--typography-title-medium);
}

.media-detail-content {
  padding: 0 var(--space-16);
}

.bird-media-frame {
  background: var(--color-surface-container-lowest);
}

.ai-track-label,
.media-duration {
  border-radius: var(--radius-small);
  background: var(--color-mask-medium);
  color: var(--color-on-primary);
  font: var(--typography-label-small-emphasized);
}

.ai-track-label::before,
.ai-track-frame {
  border-color: var(--color-primary);
}

.ai-track-label::before,
.ai-track-frame i {
  background: var(--color-primary);
}

.ai-track-frame i {
  border-color: var(--color-primary);
}

.ai-summary-card {
  padding: var(--space-12);
  border-color: var(--color-border-variant);
  border-radius: var(--radius-medium);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}

.bird-name-only h2 {
  font: var(--typography-title-large-emphasized);
}

.bird-name-only {
  gap: var(--space-8);
}

.bird-name-confidence {
  color: var(--color-primary);
  font: var(--typography-label-large-emphasized);
}

.media-detail-toolbar {
  background: var(--color-surface-container-low);
}

#mediaDelete {
  margin: var(--space-4) var(--space-8);
  border-radius: var(--radius-rounded);
  background: var(--color-error-container);
  color: var(--color-on-error-container);
}

/* Rasterized Figma icons are authored for dark surfaces; adapt them in Light Mode. */
:root[data-theme="light"] .mode-select-panel header img,
:root[data-theme="light"] .task-entry img,
:root[data-theme="light"] .creation-shortcuts img,
:root[data-theme="light"] .album-toolbar img,
:root[data-theme="light"] .album-tabs img,
:root[data-theme="light"] .ios-status img,
:root[data-theme="light"] .media-status img,
:root[data-theme="light"] .media-detail-nav button img,
:root[data-theme="light"] .media-detail-toolbar img {
  filter: invert(1);
}

/* Optional recognition overlays remain token-compliant for Plan A. */
.media-detail-content:has(.album-bird-info) {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 8px 16px;
}
.album-preview-fit {
  position: absolute;
  top: 8px;
  left: 50%;
  width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--album-preview-scale, 1));
}
.media-detail-view:has(.album-preview-fit) .media-detail-top { flex-basis: 86px; }
.media-detail-view:has(.album-preview-fit) .media-status { height: 38px; padding-top: 8px; }
.media-detail-view:has(.album-preview-fit) .media-detail-toolbar { flex-basis: 64px; }
.media-detail-content:has(.album-bird-info) .bird-media-frame {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.album-bird-info {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-medium);
}
.album-bird-info[hidden] { display: none; }
.bird-result-heading { display: flex; align-items: center; justify-content: space-between; font-size: 10px; line-height: 16px; }
.bird-result-heading > span:first-child { display: flex; align-items: center; gap: 5px; }
.bird-result-heading i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.bird-result-status { color: var(--color-gradient-primary-end); background: color-mix(in srgb, var(--color-primary) 18%, transparent); padding: 1px 6px; border-radius: var(--radius-rounded); font-size: 9px; }
.bird-result-identity { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.bird-result-identity h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 650; }
.bird-result-identity h2 small { color: var(--color-on-surface-variant); font-size: 11px; font-weight: 500; }
.bird-result-identity p { margin: 2px 0 0; font-size: 10px; line-height: 15px; color: var(--color-on-surface-variant); }
.bird-result-score { --confidence: 96%; flex: 0 0 43px; width: 43px; height: 43px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--color-gradient-primary-end) var(--confidence), var(--color-border-variant) 0); }
.bird-result-score > span { width: 100%; height: 100%; border-radius: 50%; background: var(--color-surface-container); display: flex; align-items: center; justify-content: center; }
.bird-result-score b { font-size: 15px; line-height: 20px; }
.bird-result-score small { font-size: 8px; align-self: center; margin-top: -5px; }
.bird-result-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 7px; }
.bird-result-tags span { background: var(--color-surface-container-high); color: var(--color-on-surface-variant); padding: 2px 5px; border-radius: 4px; font-size: 9px; line-height: 14px; }
.bird-basic-info { border-top: 1px solid var(--color-border-variant); padding-top: 7px; }
.bird-basic-heading { display: flex; align-items: center; gap: 8px; }
.bird-basic-heading > img { width: 58px; height: 40px; object-fit: cover; object-position: 45% center; border-radius: 8px; }
.bird-basic-heading h3 { font-size: 12px; line-height: 17px; margin: 0; }
.bird-basic-heading p { margin: 0; color: var(--color-on-surface-variant); font-size: 9px; line-height: 13px; }
.bird-basic-heading > div > span { color: var(--color-primary); font-size: 9px; line-height: 13px; }
.bird-facts { margin: 9px 0 7px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.bird-facts > div { display: flex; align-items: center; gap: 3px; min-width: 0; padding: 7px 3px; background: var(--color-surface-container-high); border-radius: 7px; }
.bird-fact-icon { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; background: color-mix(in srgb, var(--color-primary) 18%, transparent); border-radius: 50%; }
.bird-fact-icon img { width: 12px; height: 12px; filter: invert(65%) sepia(78%) saturate(446%) hue-rotate(110deg) brightness(101%); }
.bird-facts dt { font-size: 9px; line-height: 13px; font-weight: 600; }
.bird-facts dd { margin: 0; font-size: 8px; line-height: 12px; color: var(--color-on-surface-variant); white-space: nowrap; }
.bird-basic-description { margin: 0; font-size: 10px; line-height: 16px; color: var(--color-on-surface-variant); }
.bird-knowledge-heading, .bird-knowledge-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bird-knowledge-heading { margin-bottom: 7px; }
.bird-knowledge-heading h3 { margin: 0; font-size: 14px; line-height: 20px; }
.bird-knowledge-heading > span { color: var(--color-on-surface-variant); font-size: 11px; }
.bird-reference-heading { justify-content: flex-start; gap: 9px; }
.bird-reference-trigger { position: relative; flex: 0 0 64px; width: 64px; height: 44px; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: var(--color-surface-container-high); cursor: zoom-in; }
.bird-reference-trigger img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }
.bird-reference-trigger > span { position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: var(--color-mask-strong); color: white; font-size: 14px; line-height: 16px; }
.bird-reference-dialog { width: min(874px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 12px; border: 1px solid var(--color-border-variant); border-radius: 12px; background: var(--color-surface-container); color: var(--color-on-surface); overflow: hidden; }
.bird-reference-dialog::backdrop { background: rgba(0, 0, 0, .8); }
.bird-reference-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.bird-reference-dialog h2 { margin: 0; font-size: 14px; line-height: 20px; }
.bird-reference-dialog header button { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--color-surface-container-high); color: var(--color-on-surface); font-size: 26px; cursor: pointer; }
.bird-reference-dialog > img { display: block; width: 100%; max-height: calc(100dvh - 100px); object-fit: contain; border-radius: 6px; }
.bird-reference-heading > div > span { font-size: 10px; line-height: 16px; color: var(--color-on-surface-variant); }
.bird-knowledge-list { display: grid; gap: 6px; }
.bird-knowledge-item { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-variant); }
.bird-knowledge-title { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; }
.bird-knowledge-title h4, .bird-habits dt { margin: 0; font-size: 13px; line-height: 20px; font-weight: 600; }
.album-bird-info a { color: var(--color-gradient-primary-end); text-underline-offset: 3px; }
.album-bird-info a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 3px; }
.bird-knowledge-title a { display: inline-flex; align-items: center; min-height: 28px; font-size: 11px; line-height: 18px; white-space: nowrap; }
.bird-knowledge-item p, .bird-habits dd { margin: 0; font-size: 12px; line-height: 18px; color: var(--color-on-surface); }
.bird-sound-item h4 { color: var(--color-gradient-primary-end); }
.bird-habits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 7px 0; }
.bird-habits > div { padding: 6px 7px; background: var(--color-surface-container-high); border-radius: 7px; }
.bird-habits dd { color: var(--color-on-surface-variant); }
.bird-reference-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 5px 12px; }
.bird-reference-facts > div { display: flex; gap: 5px; font-size: 11px; line-height: 18px; }
.bird-reference-facts dt { color: var(--color-on-surface-variant); }
.bird-reference-facts dd { margin: 0; }
.bird-knowledge-footer { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--color-border-variant); font-size: 10px; line-height: 16px; color: var(--color-on-surface-variant); }
.bird-knowledge-footer p { margin: 0; }
.bird-knowledge-footer a { display: inline-flex; align-items: center; min-height: 28px; font-size: 11px; }
@media (max-height: 700px) {
  .bird-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-detail-content:has(.album-bird-info) { justify-content: flex-start; }
}

.species-chip,
.species-peek,
.bird-profile-view,
.ai-info-sheet {
  border-color: var(--color-border-variant);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  box-shadow: none;
}

.species-chip {
  padding: var(--space-4) var(--space-8);
  gap: var(--space-8);
  border-radius: var(--radius-small);
}

.scan-dot,
.profile-network-state i,
.profile-network-toggle i,
.ai-summary-title span i,
.ai-source-note i {
  background: var(--color-primary);
}

.species-chip small,
.species-peek header p,
.species-peek h2 small,
.peek-body p,
.mini-tags span,
.bird-profile-header small,
.profile-summary,
.profile-data-note,
.profile-online p,
.profile-range small,
.ai-summary-title span,
.ai-summary-main p,
.ai-traits small,
.ai-source-note span,
.ai-info-sheet footer {
  color: var(--color-on-surface-variant);
}

.species-peek {
  padding: var(--space-12);
  border-radius: var(--radius-large) var(--radius-large) 0 0;
}

.species-peek header > button,
.ai-info-sheet header button {
  border-radius: var(--radius-rounded);
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
}

.eyebrow,
.confidence,
.profile-details-toolbar > span,
.profile-network-state {
  color: var(--color-primary);
}

.confidence,
.profile-network-toggle {
  border-color: var(--color-primary-container);
  border-radius: var(--radius-rounded);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.mini-tags span,
.profile-source-badges span,
.profile-traits span,
.ai-traits span {
  border-color: var(--color-border-variant);
  border-radius: var(--radius-small);
  background: var(--color-surface-container-highest);
}

.bird-profile-view {
  background: var(--color-surface);
}

.bird-profile-header {
  padding: 0 var(--space-12);
  gap: var(--space-8);
  border-bottom-color: var(--color-border-variant);
  background: var(--color-surface-container-low);
}

.bird-profile-header > button {
  border-radius: var(--radius-small);
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
}

.profile-details {
  padding: var(--space-12) var(--space-16) var(--space-16);
}

.profile-source-badges,
.profile-traits,
.profile-online {
  gap: var(--space-4);
}

.profile-section {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top-color: var(--color-border-variant);
}

.profile-score {
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
}

.profile-range {
  border-radius: var(--radius-small);
  background: var(--gradient-secondary);
}

.profile-network-toggle.off {
  border-color: var(--color-border);
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface-variant);
}

.profile-network-toggle.off i,
.ai-source-note span:last-child i {
  background: var(--color-on-surface-variant);
}

.ai-info-sheet {
  padding: var(--space-16);
  border-radius: var(--radius-extra-large) var(--radius-extra-large) 0 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}