/* Apitheek Design System v1 — authoritative presentation layer (v89). */
:root {
  --ds-forest: #24483a;
  --ds-forest-strong: #173d31;
  --ds-sage: #789685;
  --ds-honey: #e5a82b;
  --ds-cream: #f8f5ed;
  --ds-surface: #fffefa;
  --ds-charcoal: #26302b;
  --ds-muted: #707a74;
  --ds-border: #dfe4dc;
  --ds-danger: #c95345;
  --ds-blue: #527a9d;
  --ds-radius-control: 12px;
  --ds-radius-card: 16px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-shadow-card: 0 8px 24px rgba(36,72,58,.065);
  --ds-focus: 0 0 0 3px rgba(229,168,43,.32);
  --metric-hive-bg: #edf3ee;
  --metric-super-bg: #fff6df;
  --metric-task-bg: #fff0ed;
  --metric-visit-bg: #eef4f7;
}

html { color-scheme: light; }
body,
button,
input,
select,
textarea { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
body { background: var(--ds-cream); color: var(--ds-charcoal); }

/* Type hierarchy */
.headline h2,
.apiary-detail-heading h3,
.hive-profile-heading h3,
.new-task-heading h3,
.task-success h3,
.modal > h3 {
  font-family: Lora, Georgia, serif !important;
  color: var(--ds-forest) !important;
  font-weight: 700;
  letter-spacing: -.025em;
}
.headline h2 { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.18; }
.section-title h3,
.dashboard-head h3,
.task-detail-group h5 { color: var(--ds-charcoal); font-size: 1.125rem; line-height: 1.34; font-weight: 650; }
.headline p,
.detail-meta,
.field,
.empty { color: var(--ds-muted); }

/* Canonical controls */
.btn,
.mini-btn,
.linkbtn,
.icon-btn,
.close,
.route-back { min-height: 44px; font-weight: 650; }
.btn {
  border-radius: var(--ds-radius-control);
  padding: 11px 16px;
  background: var(--ds-forest);
  color: white;
}
.btn:hover { background: var(--ds-forest-strong); }
.btn.ghost,
.mini-btn {
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-forest);
}
.btn.gold { background: var(--ds-honey); color: var(--ds-charcoal); }
.btn:focus-visible,
.mini-btn:focus-visible,
.linkbtn:focus-visible,
.close:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.field input,
.field select,
.field textarea {
  min-height: 48px;
  margin-top: var(--ds-space-2);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-control);
  background: var(--ds-surface);
  color: var(--ds-charcoal);
}
.field textarea { min-height: 96px; }

/* Canonical containers */
.panel.light,
.task,
.apiary-card,
.hive,
.task-detail-group,
.content-card,
.section-box,
.selection-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-card);
}
.task-detail-group { padding: var(--ds-space-4); }
.selection-card { min-height: 64px; padding: var(--ds-space-3); }
.group { border-radius: var(--ds-radius-card); background: rgba(255,254,250,.82); }

/* Shared metric language: icon → value → label. */
.metric-card,
.dash-stat,
.apiary-card-metrics > span,
.detail-stat.site-metric,
#detailStats .detail-stat {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: center;
  gap: 5px;
  min-width: 0;
  border: 0;
  border-radius: var(--ds-radius-card);
  box-shadow: none;
  text-align: center;
}
.metric-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--ds-forest);
}
.metric-icon .ui-icon { width: 18px; height: 18px; }
.metric-hive,
.site-metric-hives { background: var(--metric-hive-bg) !important; }
.metric-super,
.site-metric-supers { background: var(--metric-super-bg) !important; }
.metric-task,
.site-metric-tasks { background: var(--metric-task-bg) !important; }
.metric-visit,
.site-metric-visit { background: var(--metric-visit-bg) !important; }
.metric-card strong,
.dash-stat strong,
.apiary-card-metrics strong,
.detail-stat b {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--ds-forest);
  font-family: Inter, sans-serif;
  font-size: 1.25rem;
  line-height: 1.15;
  font-weight: 750;
  text-align: center;
  overflow-wrap: anywhere;
}
.metric-card small,
.dash-stat span,
.apiary-card-metrics small,
.detail-stat span {
  display: block;
  width: 100%;
  margin: 0;
  color: #42544b;
  font-size: .75rem;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
}

/* Today keeps exactly the three approved metrics. */
.dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-3); }
.dash-stat { min-height: 116px; padding: var(--ds-space-4); background: var(--metric-visit-bg); }
.dash-stat::before {
  position: static;
  inset: auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--ds-forest);
  font-size: 1rem;
  opacity: 1;
}
.dash-stat:nth-child(1)::before { content: "✓"; background: #fbe8e4; color: var(--ds-danger); }
.dash-stat:nth-child(2)::before { content: "!"; background: #fbe8e4; color: var(--ds-danger); font-weight: 800; }
.dash-stat:nth-child(3)::before { content: "⌂"; background: #e5efe8; }
.dash-stat > i { position: absolute; right: 13px; bottom: 11px; color: var(--ds-sage); font-style: normal; }
.dash-stat.danger { background: var(--metric-task-bg); }
.dash-stat.warn { background: var(--metric-super-bg); }

/* Site cards and detail use the same metric grammar. */
.apiary-card { border-radius: var(--ds-radius-card); }
.apiary-card h3 { color: var(--ds-forest); }
.apiary-card-metrics { gap: var(--ds-space-2); }
.apiary-card-metrics > span { min-height: 76px; padding: 9px; }
.apiary-card-metrics > span:nth-child(1) { background: var(--metric-hive-bg); }
.apiary-card-metrics > span:nth-child(2) { background: var(--metric-super-bg); }
.apiary-card-metrics > span:nth-child(3) { background: var(--metric-task-bg); }
.apiary-card-metrics .metric-icon { margin-bottom: 1px; }
.routed-detail-page:not(.routed-hive-page) .apiary-detail-stats { gap: var(--ds-space-2); }
.routed-detail-page:not(.routed-hive-page) .apiary-detail-stats .site-metric {
  min-height: 92px;
  padding: 10px 8px;
}
.routed-detail-page:not(.routed-hive-page) .site-type-chip { border-color: rgba(255,255,255,.5); }

/* Hive profile and tabs */
#detailStats { gap: var(--ds-space-2); }
#detailStats .detail-stat { min-height: 92px; padding: 10px; background: var(--metric-hive-bg); }
#detailStats .detail-stat:nth-child(2) { background: var(--metric-super-bg); }
#detailStats .detail-stat:nth-child(3) { background: var(--metric-visit-bg); }
.hive-detail-tabs,
.apiary-detail-tabs,
.entry-tabs,
.task-target-kinds,
.task-date-quick,
.task-repeat-toggle {
  padding: 4px;
  border-radius: var(--ds-radius-control);
  background: #ecefe9;
}
.hive-detail-tab,
.apiary-detail-tab,
.entry-tab { min-height: 44px; border-radius: 9px; }
.hive-detail-tab.active,
.apiary-detail-tab.active,
.entry-tab.active { background: var(--ds-surface); color: var(--ds-forest); box-shadow: 0 2px 8px rgba(36,72,58,.09); }
.chip-choice-grid button,
.apiary-tab,
.site-type-chip { font-weight: 650; }

/* Create and operation flows share one visual rhythm. */
.new-task-flow,
.create-flow { background: var(--ds-surface); }
.new-task-progress span { color: var(--ds-muted); }
.new-task-progress span.active { border-bottom-color: var(--ds-forest); color: var(--ds-forest); }
.new-task-progress span.active i,
.new-task-progress span.complete i { background: var(--ds-forest); color: white; }
.create-choice-grid button,
.task-type-grid button,
.create-site-list button,
.task-target-summary { border-color: var(--ds-border); border-radius: var(--ds-radius-control); background: var(--ds-surface); }
.create-choice-grid button.active,
.chip-choice-grid button.active,
.create-site-list button.active { border-color: var(--ds-forest); background: var(--metric-hive-bg); }

/* Shared Botanical + Bee fragments. Forms and modals remain deliberately quiet. */
.app {
  position: relative;
  isolation: isolate;
}
.app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url('/apitheek-background-botanical.webp'),
    url('/apitheek-background-bee.webp');
  background-position:
    left bottom,
    right 62%;
  background-size:
    min(230px, 22vw) auto,
    min(185px, 18vw) auto;
  background-repeat: no-repeat;
  opacity: .16;
}

/* Selected top-level pages receive one restrained flying-bee accent.
   The accepted v91 botanical canvas above remains unchanged. */
#todayView,
#apiariesView { position: relative; }
#todayView::after,
#apiariesView::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 58px;
  right: clamp(4px, 2.5vw, 28px);
  width: clamp(82px, 12vw, 124px);
  aspect-ratio: 410 / 230;
  pointer-events: none;
  background-image: url('/apitheek-bee-inward.webp');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 164% auto;
  opacity: .36;
}
dialog .modal { background: var(--ds-surface); }

@media (max-width: 780px) {
  .app::before {
    background-position: left bottom, right 68%;
    background-size: 138px auto, 112px auto;
    opacity: .14;
  }
  #todayView::after,
  #apiariesView::after {
    top: 56px;
    right: 2px;
    width: clamp(76px, 23vw, 96px);
    opacity: .34;
  }
  .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dash-stat { min-height: 106px; padding: 10px 8px; }
  .dash-stat strong { font-size: 1.12rem; }
  .dash-stat span { font-size: .68rem; }
  .apiary-card-metrics > span { min-height: 70px; padding: 7px; }
  .metric-icon { width: 25px; height: 25px; }
  .metric-icon .ui-icon { width: 16px; height: 16px; }
  .routed-detail-page:not(.routed-hive-page) .apiary-detail-stats .site-metric,
  #detailStats .detail-stat { min-height: 80px; padding: 8px 5px; }
  .routed-detail-page:not(.routed-hive-page) .apiary-detail-stats .site-metric b,
  #detailStats .detail-stat b { font-size: .9rem; line-height: 1.16; }
  .routed-detail-page:not(.routed-hive-page) .apiary-detail-stats .site-metric span,
  #detailStats .detail-stat span { font-size: .64rem; }
}

@media (max-width: 390px) {
  .dashboard-stats { gap: 4px; }
  .dash-stat { padding: 8px 6px; }
  .routed-detail-page:not(.routed-hive-page) .apiary-detail-stats { gap: 4px; }
  .routed-detail-page:not(.routed-hive-page) .apiary-detail-stats .site-metric { padding-inline: 3px; }
}

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