/* ============================================================
   POD HQ — Global stylesheet
   Theme variables + shell layout + components
   ============================================================ */

/* ----- THEMES -----
   Luna Digital Studios planner palettes (planner-theme-palettes skill).
   Theme ids are the ones buyers already have saved: "blush" = Blush & Sage,
   "neutral" = Neutral, "dark" = Dark. "rainbow-pastel" is new in V2.
   Keep the token names; only these selectors are app-specific. */
:root, :root[data-theme="blush"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FAF7F5;
  --nav-bg: #EFD6D2; --nav-text: #4A2F33; --nav-icon: #9A5E66; --nav-hover-bg: #E9CAC5; --nav-active-bg: #FAF7F5; --nav-active-text: #3B2427;
  --text: #3A2E30; --text-muted: #73666A; --heading: #3A2E30; --link: #5A745D; /* one step deeper than the skill's #5E7A62: passes 4.5:1 on surface-alt hovers */
  --border: #EDE3E0; --border-accent: #E1C1C1; --divider: #F2ECEA;
  --btn-primary-bg: #AFC2B0; --btn-primary-text: #22362A; --btn-primary-hover: #9DB49F;
  --btn-secondary-bg: #EFD6D2; --btn-secondary-text: #5A3439; --btn-secondary-hover: #E6C6C1;
  --btn-ghost-text: #5A745D; --btn-ghost-border: #AFC2B0;
  --accent-1: #E1C1C1; --accent-1-deep: #A86B72; --accent-2: #AFC2B0; --accent-2-deep: #5E7A62;
  --chip-1-bg: #F6E4E1; --chip-1-text: #7A424A; --chip-2-bg: #E4ECE4; --chip-2-text: #3E5A44;
  --chip-3-bg: #F3ECE8; --chip-3-text: #6A5552; --chip-4-bg: #F2E6DA; --chip-4-text: #7A5634;
  --chart-1: #E1C1C1; --chart-2: #AFC2B0; --chart-3: #C9979D; --chart-4: #84A088; --chart-5: #D9AFAA; --chart-6: #D4BFA6;
  --chart-edge: #B88A90; --chart-track: #F3ECEA; --progress-track: #F3E8E6; --progress-fill: #AFC2B0;
  --success-bg: #E4ECE4; --success-text: #3E5A44; --warning-bg: #F6E6D3; --warning-text: #7A5226;
  --danger-bg: #F6DCDD; --danger-text: #8E3E48; --info-bg: #F6E4E1; --info-text: #6E3E45;
  --callout-bg: #F7E6E3; --callout-border: #E1C1C1; --focus-ring: #A86B72; --brand-stripe: none;
}

:root[data-theme="rainbow-pastel"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FBFAF8;
  --nav-bg: #EFEDF5; --nav-text: #36305E; --nav-icon: #6B62A8; --nav-hover-bg: #E6E3F0; --nav-active-bg: #FFFFFF; --nav-active-text: #2B2552;
  --text: #2F2D3A; --text-muted: #696676; --heading: #2F2D3A; --link: #3F6A9C;
  --border: #ECEAF0; --border-accent: #D8D4F2; --divider: #F1EFF3;
  --btn-primary-bg: #C9DDF2; --btn-primary-text: #1F3A5C; --btn-primary-hover: #B5CFEC;
  --btn-secondary-bg: #F6D1C1; --btn-secondary-text: #6E3520; --btn-secondary-hover: #F1C2AE;
  --btn-ghost-text: #4F4793; --btn-ghost-border: #D8D4F2;
  --accent-1: #D8D4F2; --accent-1-deep: #6B62A8; --accent-2: #C9DDF2; --accent-2-deep: #3F6A9C;
  --chip-1-bg: #FBE5DB; --chip-1-text: #7E3B22; --chip-2-bg: #F8E7CF; --chip-2-text: #77501C;
  --chip-3-bg: #F7F0CF; --chip-3-text: #655619; --chip-4-bg: #E0EEE5; --chip-4-text: #2F5C40;
  --chip-5-bg: #E0EBF8; --chip-5-text: #264E7C; --chip-6-bg: #E8E5F8; --chip-6-text: #463E86;
  --chart-1: #F2B9A3; --chart-2: #EDC690; --chart-3: #E6D488; --chart-4: #A8D0B6; --chart-5: #A6C6E8; --chart-6: #BCB5EA;
  --chart-edge: #8F87C4; --chart-track: #F1EFF3; --progress-track: #EFEDF6;
  --progress-fill: linear-gradient(90deg,#F6D1C1,#F3D8B5,#F1E4B3,#CFE3D6,#C9DDF2,#D8D4F2);
  --success-bg: #E0EEE5; --success-text: #2F5C40; --warning-bg: #F8E7CF; --warning-text: #77501C;
  --danger-bg: #FBE0D6; --danger-text: #8A3A22; --info-bg: #E0EBF8; --info-text: #264E7C;
  --callout-bg: #F1EFFA; --callout-border: #D8D4F2; --focus-ring: #6B62A8;
  --brand-stripe: linear-gradient(90deg,#F6D1C1,#F3D8B5,#F1E4B3,#CFE3D6,#C9DDF2,#D8D4F2);
}

:root[data-theme="neutral"] {
  color-scheme: light;
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #FAF8F4;
  --nav-bg: #C5D9D8; --nav-text: #243B3A; --nav-icon: #4E6C6B; --nav-hover-bg: #B6CECD; --nav-active-bg: #FAF8F4; --nav-active-text: #1F3332;
  --text: #2D3133; --text-muted: #676D70; --heading: #2D3133; --link: #555F80;
  --border: #ECE9E5; --border-accent: #C5D9D8; --divider: #F1EFEB;
  --btn-primary-bg: #666F8F; --btn-primary-text: #FFFFFF; --btn-primary-hover: #596282;
  --btn-secondary-bg: #C5D9D8; --btn-secondary-text: #243B3A; --btn-secondary-hover: #B6CECD;
  --btn-ghost-text: #555F80; --btn-ghost-border: #AEB6D2;
  --accent-1: #A2B6B5; --accent-1-deep: #4E6C6B; --accent-2: #AEB6D2; --accent-2-deep: #555F80;
  --chip-1-bg: #E3EDEC; --chip-1-text: #2F4D4C; --chip-2-bg: #E6E9F3; --chip-2-text: #3E4768;
  --chip-3-bg: #EFECE7; --chip-3-text: #5A544B; --chip-4-bg: #DCE3E2; --chip-4-text: #34494A;
  --chart-1: #A2B6B5; --chart-2: #7D86A4; --chart-3: #C5D9D8; --chart-4: #AEB6D2; --chart-5: #D3CABE; --chart-6: #5F7A79;
  --chart-edge: #6E8786; --chart-track: #F1EFEB; --progress-track: #ECE9E5; --progress-fill: #A2B6B5;
  --success-bg: #E3EDEC; --success-text: #2F4D4C; --warning-bg: #F1E8DA; --warning-text: #6B5126;
  --danger-bg: #F2E1DF; --danger-text: #83423E; --info-bg: #E6E9F3; --info-text: #3E4768;
  --callout-bg: #EEF4F3; --callout-border: #C5D9D8; --focus-ring: #7D86A4; --brand-stripe: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1D1E23; --surface: #25272E; --surface-alt: #2B2D35;
  --nav-bg: #2C2F39; --nav-text: #E3E1EA; --nav-icon: #A9B0D6; --nav-hover-bg: #353947; --nav-active-bg: #3B4052; --nav-active-text: #F3F1F6;
  --text: #E8E6E3; --text-muted: #A9A7B0; --heading: #F1EFEC; --link: #A9C4E6;
  --border: #363944; --border-accent: #4A4F64; --divider: #30333C;
  --btn-primary-bg: #A9B0D6; --btn-primary-text: #1D1E2B; --btn-primary-hover: #BBC1E0;
  --btn-secondary-bg: #3A3E4D; --btn-secondary-text: #E8E6EF; --btn-secondary-hover: #454A5C;
  --btn-ghost-text: #C2C8E6; --btn-ghost-border: #555B75;
  --accent-1: #A9B0D6; --accent-1-deep: #C2C8E6; --accent-2: #9DB8A0; --accent-2-deep: #B6CDB8;
  --chip-1-bg: #3A3550; --chip-1-text: #D6D1F2; --chip-2-bg: #2F4136; --chip-2-text: #C8E0CC;
  --chip-3-bg: #4A3437; --chip-3-text: #F0CFCF; --chip-4-bg: #2E3C4E; --chip-4-text: #C9DCF2;
  --chart-1: #A9B0D6; --chart-2: #9DB8A0; --chart-3: #E3B5B5; --chart-4: #9CC3E6; --chart-5: #E6D29A; --chart-6: #E8B49E;
  --chart-edge: #1D1E23; --chart-track: #30333C; --progress-track: #30333C; --progress-fill: #9DB8A0;
  --success-bg: #2F4136; --success-text: #C8E0CC; --warning-bg: #463D2B; --warning-text: #EBD9A9;
  --danger-bg: #4A3437; --danger-text: #F0C4C4; --info-bg: #2E3C4E; --info-text: #C9DCF2;
  --callout-bg: #2B2D3A; --callout-border: #4A4F64; --focus-ring: #C2C8E6; --brand-stripe: none;
  --shadow-card:     0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-elevated: 0 2px 8px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.4);
}

/* Older POD HQ variable names, mapped onto the palette tokens so existing
   rules and page code keep working. State colours (--success etc.) map to the
   deep "-text" shades so they are always readable when used as text. */
:root {
  --bg-main: var(--bg);
  --bg-secondary: var(--surface-alt);
  --bg-card: var(--surface);
  --bg-card-elevated: var(--surface-alt);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --accent-primary: var(--accent-1);
  --accent-hover: var(--accent-1-deep);
  --accent-light: var(--chip-1-bg);
  --accent-text: var(--chip-1-text);
  --accent2: var(--accent-2);
  --accent2-hover: var(--accent-2-deep);
  --accent2-light: var(--chip-2-bg);
  --accent2-text: var(--chip-2-text);
  --success: var(--success-text);
  --warning: var(--warning-text);
  --error: var(--danger-text);
  --info: var(--info-text);
  --btn-bg: var(--btn-primary-bg);
  --btn-bg-hover: var(--btn-primary-hover);
  --on-accent: var(--btn-primary-text);
  --success-ink: var(--success-text);
  --warning-ink: var(--warning-text);
  --error-ink: var(--danger-text);
  --info-ink: var(--info-text);
  --shadow-card:     0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.03);
  --shadow-elevated: 0 2px 8px rgba(0,0,0,0.07), 0 8px 24px rgba(0,0,0,0.05);
}

/* ----- RESET / BASE ----- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  background: var(--bg-main);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* DM Serif Display for h1-h3 titles */
.serif { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }
h1, h2, h3, .page-title, .card-title, .section-heading, .modal-title { color: var(--heading); }
.mono  { font-family: 'DM Mono', 'SF Mono', Consolas, monospace; }

/* ----- ACCESSIBILITY ----- */
.skip-link {
  position: absolute; top: -100px; left: 8px;
  background: var(--accent-light); color: var(--accent-text);
  padding: 0.5rem 0.875rem; border-radius: 8px; z-index: 9999;
  font-weight: 500;
}
.skip-link:focus { top: 8px; }

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On the tinted menu the focus ring uses the menu text colour (3:1+ on every nav-bg) */
.sidebar :focus-visible, .mobile-nav :focus-visible, .nav-drawer :focus-visible { outline-color: var(--nav-text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----- LAYOUT SHELL ----- */
.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.app-shell.collapsed { grid-template-columns: 64px 1fr; }

.sidebar {
  background: var(--nav-bg);
  color: var(--nav-text);
  border-right: 1px solid var(--border);
  padding: 1.25rem 0.875rem;
  display: flex; flex-direction: column;
  gap: 1rem;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0 0.5rem;
}
/* Signature stripe across the top of the menu (Rainbow Pastel; "none" elsewhere) */
.sidebar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--brand-stripe);
  pointer-events: none;
}
.sidebar-brand img { width: 32px; height: 32px; border-radius: 8px; }
.sidebar-brand .name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.25rem;
}
.app-shell.collapsed .sidebar-brand .name,
.app-shell.collapsed .sidebar-search,
.app-shell.collapsed .nav-group-label,
.app-shell.collapsed .nav-item-label,
.app-shell.collapsed .sidebar-footer { display: none; }

.sidebar-search {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: border-color 150ms ease;
}
@media (hover: hover) { .sidebar-search:hover { border-color: var(--focus-ring); } }
.sidebar-search kbd {
  margin-left: auto;
  background: var(--bg-secondary);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-family: 'DM Mono', monospace;
  border: 1px solid var(--border);
}

.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-group-label {
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--nav-text);
  padding: 0.75rem 0.75rem 0.4rem;
}

.nav-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--nav-text);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}
.nav-item i, .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--nav-icon); }
@media (hover: hover) { .nav-item:hover { background: var(--nav-hover-bg); color: var(--nav-text); } }
.nav-item.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  box-shadow: inset 3px 0 0 var(--accent-1-deep);
  font-weight: 600;
}
/* Rainbow Pastel: menu icons cycle through the six hues */
:root[data-theme="rainbow-pastel"] .nav-group .nav-item:nth-child(6n+1) svg { color: var(--chip-1-text); }
:root[data-theme="rainbow-pastel"] .nav-group .nav-item:nth-child(6n+2) svg { color: var(--chip-2-text); }
:root[data-theme="rainbow-pastel"] .nav-group .nav-item:nth-child(6n+3) svg { color: var(--chip-3-text); }
:root[data-theme="rainbow-pastel"] .nav-group .nav-item:nth-child(6n+4) svg { color: var(--chip-4-text); }
:root[data-theme="rainbow-pastel"] .nav-group .nav-item:nth-child(6n+5) svg { color: var(--chip-5-text); }
:root[data-theme="rainbow-pastel"] .nav-group .nav-item:nth-child(6n+6) svg { color: var(--chip-6-text); }

.sidebar-footer {
  margin-top: auto;
  padding: 0.75rem;
  font-size: 0.7rem;
  color: var(--nav-text);
  text-align: center;
  border-top: 1px solid var(--nav-hover-bg);
}

.sidebar-collapse-btn {
  position: absolute;
  top: 1rem; right: 0.5rem;
  background: transparent;
  border: 0;
  color: var(--nav-icon);
  padding: 4px;
  border-radius: 6px;
}
@media (hover: hover) { .sidebar-collapse-btn:hover { background: var(--nav-hover-bg); color: var(--nav-text); } }

/* Main area */
.main-content {
  display: flex; flex-direction: column;
  min-width: 0;
}

.top-bar {
  display: flex; align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.5rem;
  background: var(--bg-main);
  border-bottom: 1px solid var(--divider);
  position: sticky; top: 0; z-index: 50;
}

.top-bar .icon-btn {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  padding: 0.5rem;
  border-radius: 8px;
  display: inline-flex;
  transition: background 150ms ease, color 150ms ease;
}
@media (hover: hover) { .top-bar .icon-btn:hover { background: var(--bg-secondary); color: var(--text-primary); } }

.page-content {
  padding: 1.5rem;
  flex: 1;
  animation: pageEnter 250ms ease forwards;
  opacity: 0;
}

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--nav-bg);
  border-top: 1px solid var(--border);
  padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  z-index: 100;
  justify-content: space-around;
}
.mobile-nav .nav-item {
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.25rem;
  font-size: 0.625rem;
  border-left: 0;
  margin: 0;
}
.mobile-nav::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--brand-stripe);
  pointer-events: none;
}
.mobile-nav .nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-text); box-shadow: inset 0 3px 0 var(--accent-1-deep); }
.mobile-nav .nav-item i, .mobile-nav .nav-item svg { width: 22px; height: 22px; }

/* ----- COMPONENTS ----- */

/* Card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.card-elevated { box-shadow: var(--shadow-elevated); background: var(--bg-card-elevated); }
@media (hover: hover) { .card-hover:hover { transform: translateY(-1px); box-shadow: var(--shadow-elevated); } }

.card-title {
  font-size: 1.125rem; font-weight: 600;
  margin: 0 0 1rem 0;
  display: flex; align-items: center; gap: 0.5rem;
}
.card-title a { color: var(--link); font-size: 0.8125rem; margin-left: auto; font-weight: 500; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  transition: transform 100ms ease, background 150ms ease, border-color 150ms ease;
  text-decoration: none;
}
@media (hover: hover) { .btn:hover { background: var(--btn-secondary-hover); } }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
@media (hover: hover) { .btn-primary:hover { background: var(--btn-primary-hover); color: var(--btn-primary-text); } }
.btn-secondary { background: var(--surface); color: var(--btn-ghost-text); border-color: var(--btn-ghost-border); }
@media (hover: hover) { .btn-secondary:hover { background: var(--surface-alt); } }
.btn-danger { background: transparent; color: var(--danger-text); border-color: var(--danger-text); }
@media (hover: hover) { .btn-danger:hover { background: var(--danger-bg); color: var(--danger-text); } }
.btn-ghost { background: transparent; color: var(--btn-ghost-text); }
@media (hover: hover) { .btn-ghost:hover { background: var(--surface-alt); color: var(--btn-ghost-text); } }
.btn:disabled, .btn[disabled] { background: transparent; color: var(--text-muted); border-color: var(--btn-ghost-border); cursor: not-allowed; transform: none; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn i, .btn svg { width: 16px; height: 16px; }

/* Inputs */
.input, .textarea, .select {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  /* 16px on mobile to prevent iOS zoom; smaller on desktop for density */
  font-size: 16px;
  color: var(--text-primary);
  transition: border-color 150ms ease;
}
@media (min-width: 768px) {
  .input, .textarea, .select { font-size: 0.9375rem; }
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 1px var(--focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B817C' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; }

.label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}
.label-required::after { content: ' *'; color: var(--error); }

.field-help { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.field-error { font-size: 0.75rem; color: var(--error); margin-top: 0.25rem; }

.form-row { display: grid; gap: 0.875rem; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .form-row-2, .form-row-3 { grid-template-columns: 1fr; } }

/* Badges / pills */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-error   { background: var(--danger-bg); color: var(--danger-text); }
.badge-info    { background: var(--info-bg); color: var(--info-text); }
.badge-accent  { background: var(--accent-light); color: var(--accent-text); }
.badge-accent2 { background: var(--accent2-light); color: var(--accent2-text); }

/* Status dots */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }
.dot-success { background: var(--success); }
.dot-warning { background: var(--warning); }
.dot-error   { background: var(--error); }
.dot-info    { background: var(--info); }
.dot-muted   { background: var(--text-muted); }

/* Tag input */
.tag-input-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 42px;
}
.tag-input-wrap:focus-within { border-color: var(--focus-ring); }
.tag-input-wrap input {
  flex: 1; min-width: 120px;
  background: transparent; border: 0; outline: 0;
  font-size: 0.875rem; color: var(--text-primary);
  padding: 0.2rem;
}
.tag-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--accent-light); color: var(--accent-text);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
}
.tag-pill button {
  background: transparent; border: 0; padding: 0;
  color: var(--accent-text); opacity: 0.7;
  font-size: 1rem; line-height: 1;
}
@media (hover: hover) { .tag-pill button:hover { opacity: 1; } }

/* Checkbox & toggle */
.checkbox {
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer; font-size: 0.875rem;
}
.checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent-2);
}

.toggle {
  position: relative;
  display: inline-block;
  width: 38px; height: 22px;
  background: var(--surface-alt);
  border-radius: 999px;
  border: 1px solid var(--btn-ghost-border);
  cursor: pointer;
  transition: background 150ms ease;
}
.toggle input { opacity: 0; position: absolute; }
.toggle::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--bg-card);
  border-radius: 50%;
  transition: transform 150ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.toggle.on { background: var(--accent-2-deep); border-color: var(--accent-2-deep); }
.toggle.on::after { transform: translateX(16px); background: var(--surface); }

/* Stars */
.stars { display: inline-flex; gap: 2px; }
.star { color: var(--text-muted); cursor: pointer; }
.star.filled { color: var(--warning); }

/* Modals */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 18, 16, 0.45);
  backdrop-filter: blur(2px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal-container {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  background: var(--bg-card);
  border-radius: 16px;
  width: 92%;
  max-width: 720px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  z-index: 201;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  box-shadow: var(--shadow-elevated);
}
.modal-container.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%);
}

.modal-header {
  display: flex; align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--divider);
}
.modal-title { font-size: 1.125rem; font-weight: 600; margin: 0; }
.modal-close {
  margin-left: auto;
  background: transparent; border: 0;
  color: var(--text-muted);
  padding: 0.25rem;
  border-radius: 6px;
}
@media (hover: hover) { .modal-close:hover { color: var(--text-primary); background: var(--bg-secondary); } }
.modal-body { padding: 1.5rem; }
.modal-footer {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--divider);
}

@media (max-width: 640px) {
  .modal-container {
    inset: auto 0 0 0;
    transform: translateY(100%);
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-height: 92dvh;
    left: 0;
    top: auto;
  }
  .modal-container.open { transform: translateY(0); }
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 300;
  display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-1-deep);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-elevated);
  font-size: 0.875rem;
  display: flex; align-items: center; gap: 0.65rem;
  animation: toastIn 200ms ease forwards;
  pointer-events: auto;
}
.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.error   { border-left-color: var(--error); }
.toast.info    { border-left-color: var(--info); }
.toast.exit { animation: toastOut 200ms ease forwards; }

@media (max-width: 640px) {
  .toast-container { bottom: calc(5rem + env(safe-area-inset-bottom)); left: 1rem; right: 1rem; max-width: none; }
}

/* Install prompt */
.install-prompt {
  position: fixed; top: 1rem; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  box-shadow: var(--shadow-elevated);
  display: flex; align-items: center; gap: 0.75rem;
  z-index: 250;
  max-width: 95%;
  font-size: 0.875rem;
}
.install-prompt .btn { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }
.install-prompt .close-btn {
  background: transparent; border: 0; color: var(--text-muted);
  padding: 0.25rem;
}

/* Update banner */
#update-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 10px 16px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
#update-banner span { flex: 1; text-align: center; }
#update-banner button {
  background: var(--btn-primary-text);
  color: var(--btn-primary-bg);
  border: 0;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
#update-banner button.dismiss-btn {
  background: transparent;
  color: var(--btn-primary-text);
  font-size: 1.25rem;
  padding: 0 4px;
  opacity: 0.8;
  font-weight: 400;
}

/* Free demo (only when demo-shim.js set window.PODHQ_DEMO; inert in the paid app) */
html.is-demo .demo-hide { display: none !important; }
.demo-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.5rem 0.875rem; padding: 0.5rem 1rem;
  background: var(--accent-light); color: var(--accent-text);
  font-size: 0.875rem; font-weight: 500; text-align: center;
  border-bottom: 1px solid var(--border);
}
.demo-bar .btn { white-space: nowrap; }
.demo-card { border: 2px solid var(--accent-1); background: var(--surface); }

/* FAB */
.fab {
  display: none;
  position: fixed;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  right: 1.25rem;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 0;
  box-shadow: var(--shadow-elevated);
  z-index: 90;
  align-items: center;
  justify-content: center;
}
.fab i { width: 24px; height: 24px; }
.fab:active { transform: scale(0.95); }

/* Page-level utilities */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.page-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.75rem; font-weight: 400; margin: 0; }
.page-subtitle { color: var(--text-secondary); font-size: 0.9375rem; margin-top: 0.25rem; }
.page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Section heading */
.section-heading {
  font-size: 1.0625rem; font-weight: 600;
  margin: 1.5rem 0 0.75rem;
  display: flex; align-items: center; gap: 0.5rem;
}

/* Empty state */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-secondary);
}
.empty-state-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent-text);
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
.empty-state-icon i { width: 32px; height: 32px; }
.empty-state h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--heading);
  margin: 0 0 0.5rem;
}
.empty-state p { max-width: 400px; line-height: 1.5; margin: 0 0 1.5rem; }

/* Filter bar */
.filter-bar {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1.25rem;
}
.chip {
  padding: 0.35rem 0.85rem;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}
@media (hover: hover) { .chip:hover { background: var(--bg-card); border-color: var(--border); } }
.chip.active { background: var(--chip-1-bg); color: var(--chip-1-text); border-color: var(--accent-1-deep); }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--divider);
  background: var(--bg-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
@media (hover: hover) { .table tr:hover { background: var(--bg-secondary); } }

/* KPI card */
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}
.kpi-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent-text);
  display: grid; place-items: center;
  margin-bottom: 0.75rem;
}
.kpi-icon i { width: 20px; height: 20px; }
.kpi-card:nth-child(4n+2) .kpi-icon { background: var(--chip-2-bg); color: var(--chip-2-text); }
.kpi-card:nth-child(4n+3) .kpi-icon { background: var(--chip-3-bg); color: var(--chip-3-text); }
.kpi-card:nth-child(4n+4) .kpi-icon { background: var(--chip-4-bg); color: var(--chip-4-text); }
.kpi-value { font-family: 'DM Serif Display', Georgia, serif; font-size: 2rem; line-height: 1; margin: 0; }
.kpi-label { color: var(--text-secondary); font-size: 0.8125rem; margin-top: 0.4rem; }
.kpi-trend { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 500; margin-top: 0.4rem; }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--error); }

/* ---------- Luna Sync (Settings card + linking modals) ---------- */
.sync-code {
  font-family: 'DM Mono', 'SF Mono', Consolas, monospace;
  font-size: 2.25rem; font-weight: 500; letter-spacing: 0.12em;
  text-align: center; margin: 0.25rem 0 0.75rem; color: var(--heading);
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem;
}
.sync-code-input { font-family: 'DM Mono', monospace; font-size: 1.5rem; letter-spacing: 0.15em; text-align: center; }
.sync-pics { display: flex; justify-content: center; gap: 1.25rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; }
.sync-pics > span { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.sync-pic { font-size: 2.5rem; line-height: 1; }
.sync-key {
  display: block; width: 100%; text-align: left;
  font-family: 'DM Mono', monospace; font-size: 0.9375rem; line-height: 1.6; word-break: break-all;
  background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem;
}
.sync-key-hidden { color: transparent; text-shadow: 0 0 8px var(--text-muted); cursor: pointer; user-select: none; }

/* ---------- Dashboard welcome panel ----------
   Greeting, one line about the shop, the illustration (components/hero-art.js)
   and the four KPI tiles. Colours are the --hero-* / --art-* tokens below.
   Laid out by the panel's own width (container query), not the viewport:
   phones keep the picture small beside the greeting so Today's Priorities
   stays near the top; wider panels give it the right-hand column.
   Compact density (Settings) and print: plain card, no picture. */
.ph-hero {
  container-type: inline-size;
  position: relative; overflow: hidden;
  background: var(--hero-bg, var(--surface));
  border: 1.5px solid var(--hero-border, var(--border));
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  margin-bottom: 1.25rem;
}
.ph-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  grid-template-areas: "text art" "foot foot";
  gap: 0.75rem;
  align-items: center;
  padding: 1rem;
}
.ph-hero__text { grid-area: text; min-width: 0; }
.ph-hero__art { grid-area: art; line-height: 0; min-width: 0; }
.ph-hero__art svg { width: 100%; height: auto; display: block; }
.ph-hero__foot { grid-area: foot; min-width: 0; container: phfoot / inline-size; }
.ph-hero__eyebrow {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--hero-eyebrow-bg, var(--surface-alt));
  color: var(--hero-eyebrow-text, var(--text));
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
.ph-hero__title {
  margin: 0.5rem 0 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.4rem; font-weight: 400; line-height: 1.2;
  color: var(--heading);
}
.ph-hero__line { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--text); line-height: 1.45; }

/* KPI tiles inside the panel: compact, 2 × 2 until there's room for a row of 4 */
.ph-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.ph-tiles .kpi-card { padding: 0.75rem 0.875rem; box-shadow: none; background: var(--surface); }
.ph-tiles .kpi-icon { width: 28px; height: 28px; border-radius: 8px; margin-bottom: 0.5rem; }
.ph-tiles .kpi-icon i, .ph-tiles .kpi-icon svg { width: 16px; height: 16px; }
.ph-tiles .kpi-value { font-size: 1.35rem; }
.ph-tiles .kpi-label { margin-top: 0.3rem; }
@container phfoot (min-width: 540px) {
  .ph-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container (min-width: 600px) {
  .ph-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.5rem;
  }
  .ph-hero__title { font-size: 1.75rem; }
  .ph-hero__line { font-size: 0.9375rem; }
  .ph-tiles .kpi-value { font-size: 1.5rem; }
}
/* Wide enough for the tiles to sit beside the picture without squeezing */
@container (min-width: 880px) {
  .ph-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-areas: "text art" "foot art";
  }
  .ph-hero__art { align-self: end; }
}

.ph-hero--compact { background: var(--surface); border-color: var(--border); }
.ph-hero--compact .ph-hero__art { display: none; }
.ph-hero--compact .ph-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "foot"; }

@media print {
  .ph-hero { background: #fff; border-color: #ccc; box-shadow: none; }
  .ph-hero__art { display: none; }
  .ph-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "foot"; }
}

/* Illustration fills (classes, not fill attributes — see hero-art.js) */
.pa-glow { fill: var(--art-glow); }
.pa-shadow { fill: var(--art-shadow); opacity: 0.08; }
.pa-spark { fill: var(--art-spark); transform-box: fill-box; transform-origin: center; animation: paTwinkle 4.8s ease-in-out infinite; }
.pa-spark--b { animation-delay: 1.6s; }
.pa-spark--soft { opacity: 0.55; animation-delay: 3.2s; }
.pa-frame { fill: var(--art-frame); }
.pa-mat, .pa-print, .pa-label { fill: var(--art-page); }
.pa-sky { fill: var(--art-sky); }
.pa-sun { fill: var(--art-sun); }
.pa-hill1 { fill: var(--art-hill1); }
.pa-hill2 { fill: var(--art-hill2); }
.pa-ink-line { fill: var(--art-ink); opacity: 0.3; }
.pa-shirt { fill: var(--art-shirt); }
.pa-collar { fill: none; stroke: var(--art-ink); stroke-width: 3.5; stroke-linecap: round; opacity: 0.18; }
.pa-fold { fill: var(--art-ink); opacity: 0.06; }
.pa-leaf, .pa-stem { fill: var(--art-leaf); }
.pa-flower { fill: var(--art-flower); }
.pa-string { fill: none; stroke: var(--art-string); stroke-width: 1.4; stroke-linecap: round; opacity: 0.7; }
.pa-tag { fill: var(--art-tag); }
.pa-tag-hole { fill: var(--art-hole); }
.pa-mug { fill: var(--art-mug); }
.pa-mug-print { fill: var(--art-mug-print); }
.pa-mug-rim { fill: var(--art-ink); opacity: 0.1; }
.pa-handle { fill: none; stroke: var(--art-mug); stroke-width: 6; }
.pa-box { fill: var(--art-box); }
.pa-box-shade { fill: var(--art-ink); opacity: 0.08; }
.pa-tape { fill: var(--art-tape); opacity: 0.85; }
@keyframes paTwinkle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) { .pa-spark { animation: none; } }

/* Per-theme panel + illustration tokens. Each points at the theme's own palette
   tokens (mapped by eye per theme), so a palette edit carries through. */
:root, :root[data-theme="blush"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-2-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-1-bg); --hero-eyebrow-text: var(--chip-1-text);
  --art-glow: var(--chip-1-bg); --art-page: var(--surface); --art-ink: var(--text); --art-string: var(--text-muted); --art-shadow: var(--text); --art-hole: var(--surface);
  --art-frame: var(--chart-3); --art-sky: var(--chip-2-bg); --art-sun: var(--chart-6); --art-hill1: var(--chart-2); --art-hill2: var(--chart-4);
  --art-shirt: var(--chart-2); --art-leaf: var(--chart-4); --art-flower: var(--chart-3);
  --art-tag: var(--chart-6); --art-mug: var(--chart-5); --art-mug-print: var(--chart-2);
  --art-box: var(--chart-6); --art-tape: var(--chart-1); --art-spark: var(--accent-1-deep);
}
:root[data-theme="rainbow-pastel"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-5-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-6-bg); --hero-eyebrow-text: var(--chip-6-text);
  --art-glow: var(--chip-3-bg); --art-page: var(--surface); --art-ink: var(--text); --art-string: var(--text-muted); --art-shadow: var(--text); --art-hole: var(--surface);
  --art-frame: var(--chart-6); --art-sky: var(--chip-5-bg); --art-sun: var(--chart-3); --art-hill1: var(--chart-4); --art-hill2: var(--chart-5);
  --art-shirt: var(--chart-1); --art-leaf: var(--chart-4); --art-flower: var(--chart-6);
  --art-tag: var(--chart-6); --art-mug: var(--chart-5); --art-mug-print: var(--chart-3);
  --art-box: var(--chart-2); --art-tape: var(--chart-4); --art-spark: var(--accent-1-deep);
}
:root[data-theme="neutral"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-2-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-1-bg); --hero-eyebrow-text: var(--chip-1-text);
  --art-glow: var(--chip-3-bg); --art-page: var(--surface); --art-ink: var(--text); --art-string: var(--text-muted); --art-shadow: var(--text); --art-hole: var(--surface);
  --art-frame: var(--chart-2); --art-sky: var(--chip-1-bg); --art-sun: var(--chart-5); --art-hill1: var(--chart-1); --art-hill2: var(--chart-6);
  --art-shirt: var(--chart-4); --art-leaf: var(--chart-6); --art-flower: var(--chart-2);
  --art-tag: var(--chart-3); --art-mug: var(--chart-1); --art-mug-print: var(--chart-2);
  --art-box: var(--chart-5); --art-tape: var(--chart-6); --art-spark: var(--accent-1-deep);
}
/* Dark: the print, mat and labels are light "paper", so the lines on them use a
   dark ink; the tag string sits on the dark panel, so it uses muted text. */
:root[data-theme="dark"] {
  --hero-bg: linear-gradient(118deg, var(--callout-bg) 0%, var(--surface) 55%, var(--chip-4-bg) 100%);
  --hero-border: var(--callout-border); --hero-eyebrow-bg: var(--chip-1-bg); --hero-eyebrow-text: var(--chip-1-text);
  --art-glow: var(--chip-1-bg); --art-page: #E3E1EA; --art-ink: #25272E; --art-string: var(--text-muted); --art-shadow: #000000; --art-hole: var(--surface);
  --art-frame: var(--chart-1); --art-sky: var(--chip-4-text); --art-sun: var(--chart-5); --art-hill1: var(--chart-2); --art-hill2: var(--chart-4);
  --art-shirt: var(--chart-3); --art-leaf: var(--chip-2-bg); --art-flower: var(--chart-6);
  --art-tag: var(--chart-5); --art-mug: var(--chart-4); --art-mug-print: var(--chart-3);
  --art-box: var(--chart-6); --art-tape: var(--chart-1); --art-spark: var(--chart-5);
}

/* Progress */
.progress-track { background: var(--progress-track); border-radius: 999px; height: 8px; overflow: hidden; }
.progress-fill { background: var(--progress-fill); height: 100%; transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 999px; }
.progress-fill.success { background: var(--success); }
.progress-fill.warning { background: var(--warning); }

/* Circular progress (using conic-gradient) */
.circ-prog {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: conic-gradient(var(--chart-2) calc(var(--p) * 1%), var(--chart-track) 0);
  display: grid; place-items: center;
  position: relative;
}
.circ-prog::before {
  content: '';
  position: absolute;
  inset: 6px;
  background: var(--bg-card);
  border-radius: 50%;
}
.circ-prog span { position: relative; font-weight: 600; font-size: 0.875rem; }

/* Animations */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

@keyframes confettiBurst {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--cx), var(--cy)) rotate(720deg); opacity: 0; }
}
.confetti { position: fixed; pointer-events: none; z-index: 999; }
.confetti span {
  position: absolute; width: 8px; height: 14px; border-radius: 2px;
  animation: confettiBurst 1200ms ease forwards;
}

/* Responsive */
@media (max-width: 1023px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .mobile-nav { display: flex; }
  .fab { display: inline-flex; }
  .page-content { padding: 1rem; padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* Mobile drawer for full nav */
.nav-drawer {
  position: fixed; inset: 0;
  background: var(--nav-bg);
  z-index: 199;
  display: none;
  flex-direction: column;
  padding: 1rem;
  overflow-y: auto;
}
.nav-drawer.open { display: flex; }
.nav-drawer-header {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem;
}
.nav-drawer-close {
  background: transparent; border: 0; color: var(--nav-text);
  padding: 0.4rem;
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.grid-dash { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }
/* Let grid columns shrink below their content. Without this a Chart.js canvas holds
   its column at the width it was drawn at, and phones lay the page out zoomed out. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-dash > * { min-width: 0; }
@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-dash { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

/* Misc utility classes */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error   { color: var(--error); }
.text-accent  { color: var(--accent-text); }
.row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 0.5rem; }
.center { display: grid; place-items: center; }
.between { justify-content: space-between; }
.divider { height: 1px; background: var(--divider); margin: 1rem 0; }
.spacer { flex: 1; }

.swatch {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: inline-block;
  cursor: pointer;
}

/* Theme swatch picker (Settings) */
.theme-card {
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  background: var(--bg-card);
  transition: border-color 150ms ease;
}
@media (hover: hover) { .theme-card:hover { border-color: var(--border-accent); } }
.theme-card.active { border-color: var(--focus-ring); }
.theme-swatches { display: flex; gap: 6px; margin-bottom: 0.5rem; }
.theme-swatches div { width: 24px; height: 24px; border-radius: 6px; }


/* ---------- Audit fixes (v2.0.0 pre-release, PODHQ-audit-v2.0.0.md) ---------- */
/* iOS: don't let Safari resize text on its own in landscape */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* A long unbroken name or pasted link wraps instead of pushing the page sideways on phones */
.card, .kpi-card, .table td, .modal-body, .toast { overflow-wrap: anywhere; }
/* Form rows: let each field shrink with the screen */
.form-row > * { min-width: 0; }
/* iPhone draws date/time boxes at its own width and ignores width:100% (pushed forms sideways) */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] {
  -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%;
}
input::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
/* Tailwind's reset removes list markers: numbered steps showed no numbers */
.page-content ol, .modal-body ol { list-style: decimal; }
.page-content ul.list, .modal-body ul.list { list-style: disc; }
/* Elements hidden with the hidden attribute stay hidden whatever their display rule */
[hidden] { display: none !important; }

/* ---------- Print: just the page's content, in plain document flow ---------- */
@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-alt: #F5F5F5; --text: #222222; --text-muted: #555555; --heading: #111111;
    --border: #CCCCCC; --divider: #DDDDDD; --chip-1-bg: #EEEEEE; --chip-1-text: #333333; --chip-2-bg: #EEEEEE; --chip-2-text: #333333;
  }
  html, body { background: #fff !important; min-height: 0 !important; }
  .sidebar, .top-bar, .mobile-nav, .nav-drawer, .fab, .toast-container, #update-banner, .install-prompt,
  .modal-overlay, .modal-container, .page-actions, .filter-bar, .skip-link, .btn, .sidebar-collapse-btn, .demo-bar { display: none !important; }
  .app-shell { display: block !important; min-height: 0 !important; }
  .main-content { display: block !important; }
  .page-content { padding: 0 !important; animation: none !important; opacity: 1 !important; }
  .card, .kpi-card { box-shadow: none !important; break-inside: avoid; border-color: #ccc !important; }
  .grid-dash, .grid-2, .grid-3 { grid-template-columns: 1fr 1fr !important; }
  .table-wrap { overflow: visible !important; }
  a { color: inherit !important; text-decoration: none !important; }
}