/**
 * Shared component classes (shadcn-inspired). Used with tokens.css.
 */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-btn);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: background-color var(--motion-fast, 150ms) var(--ease-in-out, ease),
    border-color var(--motion-fast, 150ms) var(--ease-in-out, ease),
    color var(--motion-fast, 150ms) var(--ease-in-out, ease),
    box-shadow var(--motion-fast, 150ms) var(--ease-in-out, ease),
    transform var(--motion-fast, 150ms) var(--ease-in-out, ease);
}
.ui-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.ui-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-btn-sm { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
.ui-btn-lg { min-height: 2.75rem; padding: 0.5rem 1rem; }

.ui-btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 1px 2px rgb(2 132 199 / 0.35);
}
.ui-btn-primary:hover { background: var(--brand-700); color: #fff; }
.ui-btn-primary:active { transform: translateY(1px); }

.ui-btn-secondary {
  background: var(--bg-elevated);
  color: var(--ink);
  border-color: var(--border);
}
.ui-btn-secondary:hover { background: var(--bg-muted); }

.ui-btn-ghost {
  background: transparent;
  color: var(--ink-muted);
}
.ui-btn-ghost:hover { background: var(--bg-muted); color: var(--ink); }

.ui-btn-destructive {
  background: #e11d48;
  color: #fff;
}
.ui-btn-destructive:hover { background: #be123c; }

.ui-btn-tree {
  background: var(--tree-deep);
  color: #fff;
}
.ui-btn-tree:hover { filter: brightness(1.05); }

.ui-btn-ai {
  background: var(--ai-deep);
  color: #fff;
}
.ui-btn-ai:hover { filter: brightness(1.05); }
.ui-btn-warning {
  background: #d97706;
  color: #fff;
}

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid transparent;
  line-height: 1.25rem;
}
.ui-badge-sky { background: var(--brand-50); color: var(--brand-700); border-color: #bae6fd; }
.ui-badge-tree { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ui-badge-tree-solid { background: var(--tree-deep); color: #fff; border-color: var(--tree-deep); }
/* Ready = emerald outline, open fill (not mastered solid) */
.ui-badge-ready {
  background: var(--map-ready-fill, #fff);
  color: var(--map-ready-ink, #064e3b);
  border-color: var(--map-ready-border, #059669);
}
.ui-badge-ready-on {
  box-shadow: 0 0 0 2px rgb(5 150 105 / 0.35);
  font-weight: 600;
}
.ui-badge-slate { background: #f1f5f9; color: #475569; }
.ui-badge-amber { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.ui-badge-ai { background: #f5f3ff; color: var(--ai-ink); }
.ui-badge-rose { background: #fff1f2; color: #9f1239; }

html.dark .ui-badge-sky { background: var(--brand-50); color: var(--brand-700); }
html.dark .ui-badge-tree { background: rgba(16, 185, 129, 0.15); color: #a7f3d0; border-color: rgba(52, 211, 153, 0.35); }
html.dark .ui-badge-slate { background: #1e293b; color: #cbd5e1; }
html.dark .ui-badge-ai { background: rgba(139, 92, 246, 0.15); color: var(--ai-ink); }
html.dark .ui-badge-ready { background: var(--map-ready-fill); color: var(--map-ready-ink); border-color: var(--map-ready-border); }
html.dark .ui-nav { box-shadow: 0 1px 0 rgb(0 0 0 / 0.4); }
html.dark .ui-page-title { color: var(--ink); }

.ui-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.ui-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.25;
}
.ui-page-lede {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  max-width: 40rem;
  line-height: 1.45;
}

:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
}

.ui-nav {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgb(15 23 42 / 0.04), 0 8px 24px -16px rgb(15 23 42 / 0.18);
  padding-top: var(--app-safe-top);
}

body:not(.km-page) {
  padding-left: var(--app-safe-left);
  padding-right: var(--app-safe-right);
  padding-bottom: var(--app-safe-bottom);
}

body:not(.km-page):not(:has(.ui-nav)) {
  padding-top: var(--app-safe-top);
}

#nav-drawer-panel {
  padding-top: var(--app-safe-top);
  padding-bottom: var(--app-safe-bottom);
}

.fixed.top-3 {
  top: max(0.75rem, var(--app-safe-top));
}

@media print {
  .ui-nav { padding-top: 0; }
  body:not(.km-page) {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 0;
  }
}
.ui-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--ink-muted);
}
.ui-nav-link:hover { background: var(--bg-muted); color: var(--ink); }
.ui-nav-link.is-active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}
.ui-nav-link .ui-icon { width: 0.95rem; height: 0.95rem; opacity: 0.85; }

.ui-settings-nav {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ui-settings-nav a {
  display: block;
  padding: 0.4rem 0.65rem;
  border-radius: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}
.ui-settings-nav a:hover { background: var(--bg-muted); color: var(--ink); }
.ui-settings-nav a.is-active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}

.ui-alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.ui-alert-info { background: var(--brand-50); border-color: #bae6fd; color: var(--brand-700); }
.ui-alert-success { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.ui-alert-warning { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.ui-alert-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.ui-alert .ui-btn-ghost { color: inherit; }
html.dark .ui-alert-info { border-color: rgba(14, 165, 233, 0.35); }

.ui-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(15 23 42 / 0.5);
  z-index: 50;
}
.ui-dialog-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 32rem;
  width: calc(100% - 2rem);
}

.ui-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/*
 * In-page menus (desktop <select> popup, search listboxes).
 * Native desktop pickers ignore page CSS and often paint white first;
 * these surfaces must be opaque from the first frame — no bg transitions.
 */
.ui-select-menu,
.ui-menu,
.km-results,
[data-skill-results] {
  box-sizing: border-box;
  color-scheme: inherit;
  background: var(--bg-elevated, #fff);
  color: var(--ink, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(15 23 42 / 0.12));
  transition: none;
}
html.dark .ui-select-menu,
html.dark .ui-menu,
html.dark .km-results,
html.dark [data-skill-results] {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

.ui-select-menu {
  position: fixed;
  z-index: 80;
  min-width: 8rem;
  min-height: 2.25rem;
  max-height: 16rem;
  overflow: auto;
  padding: 0.25rem 0;
  margin: 0;
  list-style: none;
}
.ui-select-menu [role="option"] {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  cursor: pointer;
  border-radius: 0;
}
.ui-select-menu [role="option"]:hover,
.ui-select-menu [role="option"].is-active {
  background: var(--bg-muted, #f1f5f9);
}
html.dark .ui-select-menu [role="option"]:hover,
html.dark .ui-select-menu [role="option"].is-active {
  background: #1e293b;
}
.ui-select-menu [role="option"].is-selected {
  font-weight: 600;
}
.ui-select-menu [role="option"]:disabled,
.ui-select-menu [role="option"][aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}
.ui-select-menu__group {
  padding: 0.4rem 0.75rem 0.15rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted, #64748b);
}
.ui-select-menu__empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-muted, #64748b);
}

@media (forced-colors: active) {
  .ui-select-menu,
  .ui-menu,
  .km-results,
  [data-skill-results] {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }
}

@media print {
  .ui-select-menu { display: none !important; }
  .progress-bar-fill {
    transform: none !important;
    animation: none !important;
  }
}

/* ── Switch ─────────────────────────────────────────────── */
.ui-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;
}
.ui-switch[data-disabled],
.ui-switch:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}
.ui-switch-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ui-switch-track {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: #cbd5e1;
  border: 1px solid #94a3b8;
  transition: background-color var(--motion-fast, 150ms) var(--ease-in-out, ease),
    border-color var(--motion-fast, 150ms) var(--ease-in-out, ease);
}
html.dark .ui-switch-track {
  background: #334155;
  border-color: #475569;
}
.ui-switch-thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.25);
  transform: translateX(0);
  transition: transform var(--motion-fast, 150ms) var(--ease-out, ease);
}
.ui-switch-input:checked + .ui-switch-track {
  background: var(--brand-600);
  border-color: var(--brand-700);
}
.ui-switch-input:checked + .ui-switch-track .ui-switch-thumb {
  transform: translateX(1rem);
}
.ui-switch-input:focus-visible + .ui-switch-track {
  box-shadow: var(--focus);
}
.ui-switch-label {
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.3;
}

/* ── Toasts ─────────────────────────────────────────────── */
.ui-toast-host {
  position: fixed;
  z-index: 80;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 1.5rem));
  pointer-events: none;
}
.ui-toast-host .ui-alert {
  pointer-events: auto;
  margin-bottom: 0;
  box-shadow: var(--shadow);
  transform: translateY(0);
  opacity: 1;
  transition: opacity var(--motion-base, 200ms) var(--ease-out, ease),
    transform var(--motion-base, 200ms) var(--ease-out, ease);
}
.ui-toast-host .ui-alert.is-leaving {
  opacity: 0;
  transform: translateY(6px);
}

/* ── Dialog / overlay motion ────────────────────────────── */
.ui-dialog-backdrop,
[data-modal-backdrop] {
  opacity: 1;
  transition: opacity var(--motion-base, 200ms) var(--ease-out, ease);
}
.ui-dialog-panel,
[data-modal-panel] {
  transition: opacity var(--motion-base, 200ms) var(--ease-out, ease),
    transform var(--motion-base, 200ms) var(--ease-out, ease);
}
[role="dialog"].is-entering > [data-modal-backdrop],
[role="dialog"].is-entering > .ui-dialog-backdrop,
[role="dialog"].is-leaving > [data-modal-backdrop],
[role="dialog"].is-leaving > .ui-dialog-backdrop {
  opacity: 0;
}
[role="dialog"].is-entering [data-modal-panel],
[role="dialog"].is-entering .ui-dialog-panel,
[role="dialog"].is-leaving [data-modal-panel],
[role="dialog"].is-leaving .ui-dialog-panel {
  opacity: 0;
  transform: translateY(8px);
}
@media (max-width: 639px) {
  [role="dialog"].is-entering [data-modal-panel],
  [role="dialog"].is-entering .ui-dialog-panel,
  [role="dialog"].is-leaving [data-modal-panel],
  [role="dialog"].is-leaving .ui-dialog-panel {
    transform: translateY(12px);
  }
}

/* ── Nav drawer ─────────────────────────────────────────── */
#nav-drawer:not(.is-open) { pointer-events: none; }
#nav-drawer:not(.is-open) #nav-drawer-panel {
  transform: translateX(100%);
}
#nav-drawer:not(.is-open) #nav-drawer-backdrop {
  opacity: 0;
}
#nav-drawer.is-open #nav-drawer-panel {
  transform: translateX(0);
}
#nav-drawer.is-open #nav-drawer-backdrop {
  opacity: 1;
}
#nav-drawer-panel {
  transition: transform var(--motion-base, 200ms) var(--ease-out, ease);
}
#nav-drawer-backdrop {
  transition: opacity var(--motion-base, 200ms) var(--ease-out, ease);
}

/* ── Theme chrome ───────────────────────────────────────── */
body,
.ui-nav,
.ui-card {
  transition: background-color var(--motion-base, 200ms) var(--ease-in-out, ease),
    color var(--motion-base, 200ms) var(--ease-in-out, ease),
    border-color var(--motion-base, 200ms) var(--ease-in-out, ease);
}

/* ── List insert ────────────────────────────────────────── */
.ui-list-enter {
  animation: ui-list-in var(--motion-base, 200ms) var(--ease-out, ease);
}

/* Local progress view (year / YTD) — display only, not the household default */
.progress-view-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-width: 15rem;
  padding: 0.15rem;
  border-radius: var(--radius-btn);
  background: var(--brand-50);
  border: 1px solid color-mix(in srgb, var(--brand-600) 28%, var(--border));
  cursor: pointer;
  font: inherit;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}
.progress-view-switch__pip {
  position: absolute;
  z-index: 0;
  top: 0.15rem;
  bottom: 0.15rem;
  left: 0.15rem;
  width: calc(50% - 0.15rem);
  border-radius: calc(var(--radius-btn) - 0.1rem);
  background: var(--brand-600);
  box-shadow: 0 1px 2px rgb(2 132 199 / 0.35);
  transform: translateX(0);
  transition: transform var(--motion-base, 200ms) var(--ease-out, ease);
}
.progress-view-switch.is-ytd .progress-view-switch__pip {
  transform: translateX(100%);
}
.progress-view-switch__opt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.4rem 0.55rem;
  color: var(--brand-700);
  white-space: nowrap;
}
.progress-view-switch:not(.is-ytd) .progress-view-switch__opt[data-mode="year"],
.progress-view-switch.is-ytd .progress-view-switch__opt[data-mode="ytd"] {
  color: #fff;
}
.progress-view-switch:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.progress-bar-seg { min-width: 0; }
.progress-bar-fill {
  transform-origin: left center;
  animation: ui-progress-fill 420ms var(--ease-out, ease) both;
}
div > .compliance-bar-wrap:nth-child(2) .progress-bar-fill { animation-delay: 70ms; }
div > .compliance-bar-wrap:nth-child(3) .progress-bar-fill { animation-delay: 140ms; }
div > .compliance-bar-wrap:nth-child(4) .progress-bar-fill { animation-delay: 210ms; }
details:not([open]) .progress-bar-fill {
  animation: none;
  transform: scaleX(0);
}
@keyframes ui-progress-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.js-plan-item.is-drag-source {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0;
  border-width: 0 !important;
  pointer-events: none;
}

/* Planning drag: spacer only (no fill). Sky lives on the day-column edge, not in the gap. */
.js-drop-indicator {
  list-style: none;
  pointer-events: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.js-drop-indicator.is-line {
  height: 0.375rem;
  margin: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--brand-500);
}
.js-day-drop-target {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-500) 55%, transparent);
}
.js-drag-ghost {
  transform: rotate(1deg) scale(1.03);
  box-shadow: 0 12px 28px rgb(15 23 42 / 0.22);
}
@keyframes ui-list-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-btn,
  .ui-switch-track,
  .ui-switch-thumb,
  .ui-toast-host .ui-alert,
  .ui-dialog-backdrop,
  .ui-dialog-panel,
  [data-modal-backdrop],
  [data-modal-panel],
  #nav-drawer-panel,
  #nav-drawer-backdrop,
  body,
  .ui-nav,
  .ui-card {
    transition: none !important;
  }
  .ui-list-enter {
    animation: none !important;
  }
  .progress-bar-fill {
    transform: none !important;
    animation: none !important;
  }
  .progress-view-switch__pip {
    transition: none !important;
  }
  .js-plan-item.is-drag-source {
    height: auto !important;
    overflow: visible !important;
    opacity: 0.4;
  }
  [role="dialog"].is-entering [data-modal-panel],
  [role="dialog"].is-entering .ui-dialog-panel,
  [role="dialog"].is-leaving [data-modal-panel],
  [role="dialog"].is-leaving .ui-dialog-panel {
    transform: none;
    opacity: 1;
  }
}