/* Material Design 3 color tokens — auto-generated from source #C26A3A.
   Light + dark schemes + manual data-theme overrides live in m3-palette.css. */
@import url('/vendor/m3-palette.css');

/* Manual token overrides — these run AFTER the auto-generated palette so
   they win the cascade in both light and dark schemes. */
[data-theme="dark"] {
  --md-sys-color-surface-container-high: #6d5042;
}
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-surface-container-high: #6d5042;
  }
}

:root {
  /* M3 shape scale */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* M3 elevation (composite shadows, light scheme) */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level3: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level4: 0 2px 3px rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level5: 0 4px 4px rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15);

  /* M3 motion */
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);

  /* Layout */
  --tabbar-h: 64px;
  --topbar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Material Web component-level theming hooks (read by @material/web) */
  --md-sys-typescale-body-large-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-ref-typeface-brand: var(--md-sys-typescale-body-large-font);
  --md-ref-typeface-plain: var(--md-sys-typescale-body-large-font);

  /* Legacy alias bridge — maps the pre-M3 token names used throughout this
     stylesheet to the new M3 color roles. Lets us swap the palette without
     rewriting every selector.
     --border maps to outline (not outline-variant) because the legacy CSS
     uses it for high-contrast boundaries like input borders, where M3's
     decorative outline-variant is too subtle, especially in dark mode. */
  --bg: var(--md-sys-color-background);
  --surface: var(--md-sys-color-surface-container);
  --surface-2: var(--md-sys-color-surface-container-high);
  --border: var(--md-sys-color-outline);
  --border-soft: var(--md-sys-color-outline-variant);
  --text: var(--md-sys-color-on-surface);
  --muted: var(--md-sys-color-on-surface-variant);
  --primary: var(--md-sys-color-primary);
  --primary-hover: var(--md-sys-color-primary);
  --primary-soft: var(--md-sys-color-primary-container);
  --danger: var(--md-sys-color-error);
  --success: #2e7d32;
  --shadow: var(--md-sys-elevation-level1);
  --radius: var(--md-sys-shape-corner-large);
  --radius-sm: var(--md-sys-shape-corner-small);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbars on phone/tablet widths; laptop & monitor widths keep them.
   The native app (.native-app) always hides them since its WebView reports a
   desktop-sized viewport width. */
@media (max-width: 1023px) {
  * { scrollbar-width: none; }
  *::-webkit-scrollbar { display: none; }
}

.native-app, .native-app * { scrollbar-width: none; }
.native-app::-webkit-scrollbar, .native-app *::-webkit-scrollbar { display: none; }

button { font-family: inherit; }

.hidden { display: none !important; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error {
  color: var(--danger);
  font-size: 0.9rem;
  margin: 4px 0 0;
}

/* AUTH */
.auth-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--md-sys-color-surface-container-high);
  border: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  box-shadow: var(--md-sys-elevation-level2);
  padding: 28px;
}
.auth-brand {
  text-align: center;
  margin-bottom: 18px;
}
.auth-brand h1 { margin: 8px 0 4px; font-size: 1.5rem; }
.auth-brand .paw { font-size: 2.2rem; }
.tabs {
  display: flex;
  gap: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  margin-bottom: 18px;
}
.tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 12px 16px;
  border-radius: 0;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  font-weight: 500;
  position: relative;
}
.tab.active { background: transparent; color: var(--md-sys-color-primary); box-shadow: none; }
.tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--md-sys-color-primary);
  border-radius: 3px 3px 0 0;
}

.auth-form { display: flex; flex-direction: column; gap: 12px; }

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 0.7em;
  font-size: 0.9rem;
  color: var(--muted);
}
label > input,
label > select,
label > textarea,
.form input,
.form select,
.form textarea {
  font: inherit;
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

textarea { resize: vertical; min-height: 60px; font-family: inherit; }

.btn {
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); box-shadow: var(--md-sys-elevation-level0); }
.btn.primary:hover { background: var(--primary-hover); box-shadow: var(--md-sys-elevation-level1); }
.btn.ghost { background: transparent; color: var(--md-sys-color-primary); }
.btn.ghost:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.btn.small { margin-top:auto; margin-bottom:auto; font-size: 0.85rem; }
.btn.block { width: 100%; }
.btn.loading {
  position: relative;
  overflow: hidden;
  cursor: wait;
}
.btn.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  animation: btn-progress 1.2s linear infinite;
  pointer-events: none;
}
@keyframes btn-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* APP */
.app {
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  transition: filter 0.35s ease;
}

.app-loading {
  filter: grayscale(0.85) brightness(0.6);
  pointer-events: none;
}

.topbar {
  position: sticky;
  top: 0;
  background: var(--md-sys-color-surface);
  border-bottom: 0;
  box-shadow: var(--md-sys-elevation-level0);
  z-index: 50;
  height: var(--topbar-h);
}
.topbar-inner {
  height: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; flex-shrink: 0; }
.brand .paw { font-size: 1.3rem; }
.brand-btn {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.brand-btn:hover { opacity: 0.8; }
.current-user-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.current-user-btn:hover { color: var(--primary); }
.user-menu-wrap { position: relative; }
.user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 150px;
  z-index: 200;
  overflow: hidden;
}
.user-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text);
}
.user-dropdown-item:hover { background: var(--surface-2); }
.dog-name-clickable { cursor: pointer; }
.dog-name-clickable:hover { color: var(--primary); }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.dog-switcher {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.dog-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
}
.dog-switcher-btn:hover { border-color: var(--primary); }
.dog-switcher-btn .caret { font-size: 0.8rem; color: var(--muted); }
.dog-switcher-btn span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.dog-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 220px;
  max-width: 80vw;
  z-index: 60;
  overflow: hidden;
}
.dog-switcher-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text);
  font-size: 0.9rem;
}
.dog-switcher-item:hover { background: var(--surface-2); }
.dog-switcher-item.active { color: var(--primary); font-weight: 600; }
.dog-switcher-item .check { margin-left: auto; }
.dog-switcher-divider { height: 1px; background: var(--border); }
.dog-switcher-add {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
}
.dog-switcher-add:hover { background: var(--primary-soft); }

/* Calendar export popover */
.cal-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.cal-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 170px;
  z-index: 60;
  overflow: hidden;
}
.cal-wrap--up .cal-menu {
  top: auto;
  bottom: calc(100% + 4px);
}
.cal-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text);
  font-size: 0.9rem;
}
.cal-menu-item:hover { background: var(--surface-2); }

/* No-dogs empty state */
.empty-screen {
  min-height: calc(100dvh - var(--topbar-h) - var(--tabbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.empty-card {
  text-align: center;
  background: var(--md-sys-color-surface-container-high);
  border: 0;
  border-radius: var(--radius);
  padding: 36px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--md-sys-elevation-level1);
}
.empty-card .paw.big { font-size: 3rem; margin-bottom: 8px; }
.empty-card h2 { margin: 8px 0 4px; }
.empty-card p { margin: 0 0 18px; }

/* Profile head + member list */
.profile-head,
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22px 0 10px;
}
.profile-head { margin-bottom: 12px; }
.section-head .section-title { margin: 0; flex: 1; }

.profile-section {
  background: var(--md-sys-color-surface-container-high);
  border: 0;
  border-radius: var(--radius);
  padding: 18px;
  margin: 12px 0;
  box-shadow: var(--md-sys-elevation-level1);
}
.profile-section .section-title { margin: 0 0 6px; }
.profile-section .section-title:not(:first-child) { margin-top: 0; }
.profile-section > p.muted { margin: 0 0 12px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--md-sys-color-primary-container, #e0e7ff);
  color: var(--md-sys-color-on-primary-container, #1e293b);
}
.pill.muted {
  background: var(--md-sys-color-surface-container-highest, #e5e7eb);
  color: var(--md-sys-color-on-surface-variant, #475569);
}
.premium-active { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.premium-status { margin-bottom: 12px; }
.premium-plans { display: flex; flex-direction: column; gap: 8px; }
.premium-plan-btn { margin: 0; }

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-top: 10px;
}

.entry-meta.future {
  color: var(--primary);
  font-weight: 500;
}
.no-margin { margin: 0 !important; }

.member-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.member-item .username { font-weight: 500; }
.member-item .you { color: var(--muted); font-size: 0.8rem; margin-left: 6px; }
.member-remove {
  background: transparent;
  border: 0;
  color: var(--danger);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 6px;
  margin-top:auto; 
  margin-bottom:auto;
}
.member-remove:hover { background: var(--surface-2); }

.form-inline {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.form-inline input {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.btn.danger { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.btn.danger:hover { background: #b91c1c; }
.btn.timer-btn { font-variant-numeric: tabular-nums; margin-top: 10px; background: var(--surface-2); }
.timer-running { color: var(--danger) !important; border: 1px solid var(--danger); background: transparent; }
.section-title.danger { color: var(--danger); }

.main {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}
.view { animation: fade 0.18s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.view-title { margin: 0 0 14px; font-size: 1.25rem; }
.section-title { margin: 22px 0 10px; font-size: 1rem; color: var(--muted); font-weight: 600; }
.section-title.collapsible { cursor: pointer; user-select: none; }
.section-title.collapsible::after { content: " ▾"; font-size: 0.75em; opacity: 0.6; }
.section-collapsed .section-title.collapsible::after { content: " ›"; }
.section-collapsed .section-body { display: none; }

/* info tooltips */
.info-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
  padding: 2px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.info-tip-btn md-icon { --md-icon-size: 17px; font-size: 17px; }
.info-tip-btn:hover,
.info-tip-btn[aria-expanded="true"] { color: var(--primary); }
.info-tip-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.info-tip-bubble {
  position: fixed;
  z-index: 1200;
  max-width: min(280px, 90vw);
  padding: 10px 12px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--md-sys-elevation-level2);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
}
.info-tip-bubble.hidden { display: none; }
.entry-list.peek .entry-item:nth-child(n+3) { display: none; }
.entry-list.peek .entry-item:nth-child(2) {
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  pointer-events: none;
  height:3em;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.entry-item.peeked {
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  pointer-events: none;
  height: 3em;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.section-show-more {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 12px;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--surface-2);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--surface-2);
}
.section-show-more:hover { background: var(--primary-soft); }
.section-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0 0; }

/* TAB BAR */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: calc(8px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--md-sys-color-surface-container);
  border-top: 0;
  box-shadow: var(--md-sys-elevation-level2);
  z-index: 40;
}
.navbtn {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.navbtn .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
/*  width: 64px;
  height: 32px;*/
  border-radius: var(--md-sys-shape-corner-large);
  font-size: 22px;
  transition: background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.navbtn.active {
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 600;
}
.navbtn.active .ico {
  background: var(--md-sys-color-secondary-container);
}

/* DOG CARD */
.dog-card {
  background: var(--md-sys-color-surface-container-high);
  border: 0;
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.dog-photo-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
  position: relative;
}
.dog-photo-wrap.large { width: 120px; height: 120px; margin: 0 auto 12px; display: block; }
.dog-card.vertical { flex-direction: column; align-items: center; }
.dog-card.dog-card-link { cursor: pointer; }
.dog-card.dog-card-link:hover { background: var(--md-sys-color-surface-container-highest); box-shadow: var(--md-sys-elevation-level2); }
.dog-photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photo-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--muted);
}
.photo-placeholder.large { font-size: 2.5rem; }
.dog-meta h2 { margin: 0; font-size: 1.15rem; }
.dog-meta p { margin: 2px 0 0; }

/* SUMMARY GRID */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.summary-tile {
  position: relative;
  isolation: isolate;
  background: var(--md-sys-color-surface-container-high);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: left;
  transition: background 0.15s;
  cursor: pointer;
  box-shadow: var(--md-sys-elevation-level1);
}
.summary-tile:hover { background: var(--md-sys-color-surface-container-highest); box-shadow: var(--md-sys-elevation-level2); }
.summary-tile:active { transform: scale(0.97); }
.summary-tile .label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.summary-tile .count { font-size: 1.4rem; font-weight: 700; margin-top: 2px; color: var(--text); }
.summary-tile .sub { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.summary-tile::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius-sm) + 3px);
  background: conic-gradient(
    from -90deg,
    var(--primary) calc(var(--hold-progress, 0) * 1turn),
    transparent calc(var(--hold-progress, 0) * 1turn)
  );
  pointer-events: none;
  opacity: 0;
}
.summary-tile::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: var(--radius-sm);
  background: var(--md-sys-color-surface-container-high);
  pointer-events: none;
}
.summary-tile.holding::before { opacity: 1; }
.summary-tile.holding:active { transform: none; }
.summary-tile > * { position: relative; z-index: 1; }

/* LOG GRID */
.log-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.log-tile {
  background: var(--md-sys-color-surface-container-high);
  border: 0;
  padding: 18px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text);
  transition: transform 0.08s;
  box-shadow: var(--md-sys-elevation-level1);
  border-radius: var(--radius);
}
.log-tile:hover { background: var(--md-sys-color-surface-container-highest); box-shadow: var(--md-sys-elevation-level2); }
.log-tile:active { transform: scale(0.97); }
.log-tile .big { font-size: 1.8rem; }
.log-category { margin-bottom: 20px; }
.log-category-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* ENTRY LIST */
.entry-list { display: flex; flex-direction: column; gap: 8px; }
.entry-item {
  background: var(--md-sys-color-surface-container-high);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: var(--md-sys-elevation-level1);
  user-select: none;
  -webkit-user-select: none;
}
.entry-item:hover { background: var(--md-sys-color-surface-container-highest); box-shadow: var(--md-sys-elevation-level2); }
.entry-item.predictive { border: 1px dashed var(--muted); opacity: 0.70; }
.entry-item.predictive:hover { border-color: var(--primary); opacity: 1; }
.entry-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.entry-body { flex: 1; min-width: 0; margin-top: auto; margin-bottom: auto; }
.entry-title { font-weight: 600; }
.entry-sub { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.entry-meta { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
.entry-thumb {
  width: 56px; height: 56px;
  border-radius: 8px; object-fit: cover;
  flex-shrink: 0;
}

.empty {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

/* CALENDAR */
.cal-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.cal-controls .icon-btn {
  width: 36px;
  height: 36px;
  font-size: 1.3rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.cal-controls .icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.cal-month-label {
  font-weight: 600;
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.cal-header {
  background: var(--surface-2);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cal-cell {
  background: var(--surface);
  min-height: 60px;
  padding: 4px 4px 6px;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  text-align: left;
  font: inherit;
  color: var(--text);
}
.cal-cell:hover { background: var(--surface-2); }
.cal-cell.outside { color: var(--muted); opacity: 0.55; }
.cal-cell.today .cal-day-num {
  background: var(--primary);
  color: white;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
}
.cal-cell.selected { background: var(--primary-soft); }
.cal-cell.selected.today { background: var(--primary-soft); }
.cal-day-num {
  font-size: 0.8rem;
  line-height: 1;
  align-self: flex-start;
}
.cal-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  line-height: 1;
  margin-top: auto;
}
.cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--muted);
  flex: 0 0 auto;
}
.cal-more {
  font-size: 0.62rem;
  color: var(--muted);
  align-self: center;
  font-weight: 600;
}

@media (min-width: 720px) {
  .cal-cell { min-height: 80px; padding: 6px; }
  .cal-day-num { font-size: 0.9rem; }
  .cal-dot { width: 9px; height: 9px; }
}

/* FILTER ROW */
.filter-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filter-row select { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
#history-search { flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1rem; }
.date-filter-label { flex: 1; min-width: 0; }

/* FORM */
.form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.form .row { display: flex; gap: 10px; flex-wrap: wrap; }
.form .row > label { flex: 1; min-width: 140px; }
.range-overridden select { opacity: 0.45; }
.range-overridden-note { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
.range-overridden-note.hidden { display: none; }

.stars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 0;
}
.star-btn {
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: transform 0.08s, color 0.1s;
}
.star-btn:hover { background: var(--surface-2); }
.star-btn:active { transform: scale(0.92); }
.star-btn.active { color: #f59e0b; }

.file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
}
.file-button input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* PHOTO QUEUE */
#entry-photo-queue { display: flex; flex-direction: column; gap: 8px; }

.photo-slot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.photo-slot-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  cursor: zoom-in;
}

.photo-slot-status {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.photo-slot-status.ready {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.photo-slot-status.uploaded {
  background: #dcfce7;
  color: #16a34a;
}

.photo-slot-label {
  flex: 1;
  font-size: 0.85rem;
  color: var(--muted);
}

.photo-slot-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
}
.photo-slot-remove:hover { color: var(--danger); }

.photo-slot .file-button { flex: 1; }

/* MODAL */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: fade 0.15s;
  touch-action: none;
  overscroll-behavior: contain;
}
.modal-card {
  background: var(--surface);
  width: 100%;
  max-width: 520px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 18px;
  max-height: 90dvh;
  overflow-y: auto;
  animation: slideup 0.2s ease-out;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
body.modal-open { overflow: hidden; touch-action: none; }
@keyframes slideup { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-width: 640px) {
  .modal { align-items: center; padding: 24px; }
  .modal-card { border-radius: var(--radius); max-height: 80dvh; }
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.modal-head h3 { margin: 0; }
.icon-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}

#entry-photo-preview-wrap img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* TOAST */
.toast {
  position: fixed;
  bottom: calc(var(--tabbar-h) + 16px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  padding: 14px 16px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  font-size: 0.9rem;
  z-index: 200;
  box-shadow: var(--md-sys-elevation-level3);
  animation: toastin 0.18s ease-out;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast.toast-success { background: #15803d; color: #fff; }
.toast.toast-error { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }

/* DESKTOP REFINEMENTS */
@media (min-width: 720px) {
  .tabbar {
    position: static;
    height: auto;
    grid-template-columns: repeat(5, max-content);
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    justify-content: center;
  }
  .navbtn {
    flex-direction: row;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
  }
  .navbtn.active { background: var(--md-sys-color-secondary-container); }
  .navbtn.active .ico { background: none; }
  .app { padding-bottom: 0; }
  .toast { bottom: 24px; }
}

.section-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ai-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.ai-provider-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-provider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ai-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.ai-badge.on { background: rgba(22, 163, 74, 0.12); color: var(--success); }
.ai-badge.off { background: var(--surface-2); color: var(--muted); }
.ai-provider-card .form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-provider-card .form-inline input {
  flex: 1 1 140px;
  min-width: 0;
}
.ai-output {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.6;
}
.ai-output h3, .ai-output h4 {
  margin: 14px 0 4px;
  font-weight: 600;
  color: var(--text);
}
.ai-output h3 { font-size: 15px; }
.ai-output h4 { font-size: 14px; }
.ai-output p { margin: 6px 0; color: var(--text); }
.ai-output ul, .ai-output ol { margin: 6px 0 6px 18px; padding: 0; }
.ai-output li { margin: 3px 0; }
.ai-output :first-child { margin-top: 0; }
.ai-output :last-child { margin-bottom: 0; }

/* Past insights history */
.ai-history { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
.ai-history-meta { margin-top: 8px; }

/* Barcode scanner */
.barcode-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.barcode-row input {
  flex: 1 1 auto;
  min-width: 0;
}
.barcode-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.supplements-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
.supplement-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.supplement-row .supp-name {
  flex: 2 1 0;
  min-width: 0;
}
.supplement-row .supp-amount {
  flex: 1 1 0;
  min-width: 0;
}
.supp-remove {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.supp-remove:hover { color: var(--danger, #dc2626); }
.supp-add-btn {
  margin-top: 2px;
  font-size: 0.85rem;
}
.scanner-reader {
  width: 100%;
  min-height: 240px;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.verdict-banner {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 14px;
}
.verdict-banner.verdict-unsafe {
  background: rgba(220, 38, 38, 0.10);
  border-color: rgba(220, 38, 38, 0.45);
  color: #b91c1c;
}
.verdict-banner.verdict-safe {
  background: rgba(22, 163, 74, 0.10);
  border-color: rgba(22, 163, 74, 0.45);
  color: #15803d;
}
.verdict-banner.verdict-unknown {
  background: rgba(234, 179, 8, 0.10);
  border-color: rgba(234, 179, 8, 0.45);
  color: #a16207;
}
.verdict-title {
  font-weight: 600;
}
.verdict-disclaimer {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.85;
}
.food-check-output {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.food-check-img {
  max-width: 120px;
  max-height: 120px;
  border-radius: var(--radius-sm);
  display: block;
  margin-bottom: 8px;
}
.food-check-name {
  margin: 4px 0;
  font-size: 16px;
}
.cal-day-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cal-select-all {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.cal-bulk-buttons {
  display: flex;
  gap: 8px;
}
.entry-item.selectable {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.entry-item .entry-select {
  margin-top: auto;
  margin-bottom: auto;
  flex-shrink: 0;
}
.entry-item.selected {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.entry-item.holding {
  opacity: 0.6;
  transform: scale(0.98);
  transition: opacity 0.1s, transform 0.1s;
}
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.checkbox-row md-checkbox {
  flex-shrink: 0;
}

/* ----- lightbox ----- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.lightbox.hidden { display: none; }

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 301;
  opacity: 0.8;
}
.lightbox-close:hover { opacity: 1; }

.lightbox-img-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.lightbox-img-wrap.grabbing { cursor: grabbing; }

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.05s linear;
}

#entry-photo-preview { cursor: zoom-in; }

/* ===== Stats subtab ===== */
.stats-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 14px;
}
.stats-range-presets {
  display: flex;
  flex-wrap: wrap;
  /*gap: 6px;*/
}
.when-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.stats-range-presets .btn.active {
  background: var(--surface);
  color: var(--text);
  border-color: var(--text);
}
.stats-range-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.stats-section-title {
  margin: 22px 0 10px;
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
}
.stats-dashboard {
  display: flex;
  flex-direction: column;
}
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.stats-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 260px;
}
.stats-card.wide {
  flex: 0 0 100%;
}
.stats-card-title {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}
.stats-card-body { flex: 1; min-width: 0; }
.stats-canvas-wrap {
  position: relative;
  width: 100%;
}
.stats-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.stats-kpi-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.stats-kpi-label {
  font-size: 0.8rem;
  color: var(--muted);
}
.stats-kpi-sub {
  font-size: 0.75rem;
  color: var(--muted);
}
.stats-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
}
.stats-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.stats-list-row:last-child { border-bottom: none; }
.stats-list-title { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-list-sub { color: var(--muted); font-size: 0.85rem; }
.stats-pill {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  text-transform: capitalize;
}
.stats-pill.sev-mild { background: rgba(96,165,250,0.18); color: #60a5fa; }
.stats-pill.sev-moderate { background: rgba(251,191,36,0.18); color: #fbbf24; }
.stats-pill.sev-severe { background: rgba(251,113,133,0.18); color: #fb7185; }
.stats-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.stats-heatmap-wrap {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.stats-heatmap-days {
  display: grid;
  grid-template-rows: 16px repeat(7, 16px);
  gap: 3px;
  flex-shrink: 0;
}
.stats-heatmap-month-spacer { height: 16px; }
.stats-heatmap-day-label {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 16px;
  text-align: right;
  white-space: nowrap;
}
.stats-heatmap-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stats-heatmap-months {
  position: relative;
  height: 16px;
  flex-shrink: 0;
}
.stats-heatmap-month-label {
  position: absolute;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 16px;
  white-space: nowrap;
}
.stats-heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 16px);
  gap: 3px;
}
.stats-heat-cell {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--surface-2);
  cursor: pointer;
}
.stats-heat-cell.heat-1 { background: rgba(129,140,248,0.25); }
.stats-heat-cell.heat-2 { background: rgba(129,140,248,0.5); }
.stats-heat-cell.heat-3 { background: rgba(129,140,248,0.75); }
.stats-heat-cell.heat-4 { background: #818cf8; }
.stats-heat-cell.selected { outline: 2px solid #818cf8; outline-offset: 1px; }
.stats-heat-info {
  display: none;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text);
  text-align: center;
}
.stats-heat-info.visible { display: block; }

/* ---- comments + mentions + notifications ---- */

.notif-banner {
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--primary-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.notif-banner:hover { filter: brightness(0.98); }
.notif-banner .notif-excerpt {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.notif-banner .notif-more {
  margin-left: 0.4rem;
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}
.notif-banner-dismiss {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted);
  padding: 0 0.15rem;
  opacity: 0.6;
}
.notif-banner-dismiss:hover { opacity: 1; }

.navbtn { position: relative; }
.navbtn .ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.navbtn-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  line-height: 10px;
  text-align: center;
  font-weight: 700;
  pointer-events: none;
  box-sizing: border-box;
  border: 1.5px solid var(--surface);
}

#comments-section { margin-top: 0.5rem; }
.comment-item { align-items: flex-start; }
.mention {
  display: inline-block;
  padding: 0 4px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 4px;
  font-weight: 600;
}

.mention-input-wrap {
  position: relative;
  width: 100%;
}
.mention-input-wrap > textarea {
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.mention-menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  width: 100%;
  max-height: 220px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 60;
}
.mention-menu-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.mention-menu-item:hover,
.mention-menu-item.active {
  background: var(--surface-2);
  color: var(--primary);
}

.notif-item { cursor: pointer; }
.notif-item.notif-unread {
  border-left: 3px solid var(--primary);
}

/* modal structural helpers */
.modal-body { padding: 8px 0; }
.modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* alerts tab header */
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 10px;
}
.section-title-row .section-title { margin: 0; }

/* btn-link: text-only button that looks like a link */
.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  text-decoration: underline;
}
.btn-link:hover { opacity: 0.8; }

/* alert subscriptions modal */
.alert-subs-bulk-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.85rem;
}
.alert-subs-grid { display: flex; flex-direction: column; gap: 16px; }
.alert-subs-category {}
.alert-subs-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.alert-subs-cat-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.alert-subs-cat-bulk { display: flex; gap: 6px; align-items: center; font-size: 0.8rem; }
.alert-subs-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.alert-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  transition: border-color 0.1s, background 0.1s;
}
.alert-sub-item:hover { border-color: var(--primary); }
.alert-sub-item.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.alert-sub-item .sub-icon { font-size: 1.2rem; }

/* entry alert cards in the alerts list */
.entry-alert-card { cursor: pointer; }
.entry-alert-card .entry-alert-icon { font-size: 1.4rem; margin-right: 4px; }

/* =====================================================================
   Material Design 3 — component-level styles and Material Web overrides
   ===================================================================== */

/* Material Web component theming via documented CSS custom properties.
   See https://m3.material.io/develop/web — each role token can be re-read
   per element by setting --md-sys-color-* on a parent. */
md-filled-button,
md-outlined-button,
md-text-button,
md-filled-tonal-button {
  --md-filled-button-container-shape: var(--md-sys-shape-corner-full);
  --md-outlined-button-container-shape: var(--md-sys-shape-corner-full);
  --md-text-button-container-shape: var(--md-sys-shape-corner-full);
  --md-filled-tonal-button-container-shape: var(--md-sys-shape-corner-full);
}
md-filled-button md-icon[slot="icon"],
md-outlined-button md-icon[slot="icon"],
md-text-button md-icon[slot="icon"],
md-filled-tonal-button md-icon[slot="icon"] {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
/* Full-width variant — mirrors the legacy .btn.block helper. The host
   element stays inline-flex (Material Web's default) so its internal Lit
   template lays out correctly; we just stretch it to full container width. */
md-filled-button.block,
md-outlined-button.block,
md-text-button.block,
md-filled-tonal-button.block {
  width: 100%;
  margin-top: 10px;
}

/* Danger-flavored filled button: scope the primary role to error so the
   exact same <md-filled-button class="error"> reads error colors. */
md-filled-button.error {
  --md-sys-color-primary: var(--md-sys-color-error);
  --md-sys-color-on-primary: var(--md-sys-color-on-error);
}

/* Outlined text-field default corner + density */
md-outlined-text-field,
md-filled-text-field,
md-outlined-select,
md-filled-select {
  width: 100%;
  --md-outlined-text-field-container-shape: var(--md-sys-shape-corner-small);
  --md-filled-text-field-container-shape: var(--md-sys-shape-corner-small);
  --md-outlined-select-text-field-container-shape: var(--md-sys-shape-corner-small);
}

/* Dialog: make the dialog itself adopt our shape + max-width on mobile */
md-dialog {
  --md-dialog-container-shape: var(--md-sys-shape-corner-extra-large);
  max-width: min(560px, calc(100vw - 32px));
}
md-dialog form,
md-dialog [slot="content"] > .form,
md-dialog [slot="content"] > .form-inline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* FAB — quick-entry button, anchored above the bottom nav bar */
md-fab.quick-entry-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  z-index: 40;
}

/* Floating progress indicator inside a loading button */
md-filled-button md-circular-progress,
md-outlined-button md-circular-progress,
md-filled-tonal-button md-circular-progress {
  --md-circular-progress-size: 20px;
  --md-circular-progress-active-indicator-width: 12;
}

/* =====================================================================
   M3 top app bar — scrolled state elevation change
   ===================================================================== */
.topbar.scrolled {
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-level2);
}

/* Toast action link */
.toast a, .toast .toast-action {
  color: var(--md-sys-color-inverse-primary);
}

/* ===== Video ===== */

/* Lightbox video player */
.lightbox-video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}

/* Play badge overlay on a video poster thumbnail */
.entry-thumb-wrap,
.video-thumb-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.video-play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  pointer-events: none;
}

/* Video slot states in the entry photo queue */
.video-thumb-wrap {
  width: 56px; height: 56px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #000;
  cursor: zoom-in;
  overflow: hidden;
}
.video-thumb-empty {
  width: 56px; height: 56px;
  border-radius: 8px;
  background: var(--surface-2, #e5e7eb);
}
.photo-slot-thumb.video-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: default;
  background: var(--surface-2, #e5e7eb);
  font-size: 9px;
  color: var(--muted);
}
.video-processing-text { font-size: 8px; }
.photo-slot-thumb.video-failed,
.entry-thumb.video-failed,
.entry-thumb.video-processing-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, #e5e7eb);
  color: var(--muted);
  font-size: 20px;
  cursor: default;
}
.photo-slot-status.processing {
  background: #fef9c3;
  color: #ca8a04;
}
.photo-slot-status.failed {
  background: #fee2e2;
  color: #dc2626;
}

.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary, #2563eb);
  border-radius: 50%;
  animation: video-spin 0.8s linear infinite;
}
@keyframes video-spin { to { transform: rotate(360deg); } }

/* Trim modal */
.trim-card { max-width: 560px; }
.trim-video {
  width: 100%;
  max-height: 50dvh;
  background: #000;
  border-radius: 8px;
}
.trim-controls {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trim-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trim-label {
  width: 40px;
  font-size: 0.85rem;
  color: var(--muted);
}
.trim-range { flex: 1; }
.trim-time {
  width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.trim-summary {
  font-size: 0.9rem;
  color: var(--muted);
}
.trim-summary.over {
  color: var(--danger, #dc2626);
  font-weight: 600;
}
.trim-status {
  font-size: 0.9rem;
  color: var(--primary, #2563eb);
  font-weight: 600;
}
.trim-status.hidden { display: none; }