.btn {
  height: 40px; padding: 0 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  font-size: 14px; font-weight: 560; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform 140ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn .ic { width: 18px; height: 18px; stroke-width: 2; }
.btn-primary { background: var(--button); color: var(--button-text); box-shadow: 0 8px 20px -12px rgba(11, 13, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.btn-secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.btn-text { height: 32px; padding: 0 8px; border-radius: 8px; color: var(--accent); font-weight: 560; }

.search { position: relative; flex: 1 1 280px; max-width: 420px; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.input, .select {
  width: 100%; height: 40px; border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--field); border: 1px solid var(--hairline-strong);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.input { padding: 0 12px 0 38px; }
.input::placeholder { color: var(--text-3); }
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.input::-webkit-search-cancel-button { display: none; }
.select-wrap { position: relative; flex: none; }
.select { appearance: none; -webkit-appearance: none; padding: 0 36px 0 12px; cursor: pointer; }
.select[data-active="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline-strong)); background: var(--accent-soft); font-weight: 560; }
.select-wrap .ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }

/* Glass track with a lens: the segmented control and the manager quick views. The track is clear glass; the lens is
   a raised droplet behind the selected item (liquid-glass.js placeLens) that swells slightly while pressed. */
.segmented { display: inline-flex; padding: 4px; border-radius: 999px; }
.segmented > .seg-items, .track-items { position: relative; display: flex; gap: 2px; }
.segmented button, .track-items > button {
  position: relative; z-index: 1; height: 34px; padding: 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-size: 14px; font-weight: 520; color: var(--text-2); white-space: nowrap;
  transition: color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.segmented button:active, .track-items > button:active { transform: scale(0.97); }
.segmented button[aria-pressed="true"], .track-items > button[aria-pressed="true"] { color: var(--ink); }
.segmented .count { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lens {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%; border-radius: 999px;
  background: var(--lens-fill); box-shadow: var(--lens-shadow);
  transform-origin: left center;
  transition: scale 180ms var(--ease-out), opacity 160ms var(--ease-out);
}
.seg-items:has([aria-pressed="true"]:active) > .lens, .track-items:has([aria-pressed="true"]:active) > .lens { scale: 1.05; }

/* Floating glass toolbar: search and filters on regular glass. It sticks under the bar, so the list scrolls beneath
   it and stays filterable at any depth; fields inside are light wells, not glass of their own. */
.glass-toolbar {
  position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); z-index: 30;
  border-radius: 20px;
}
.glass-toolbar .input, .glass-toolbar .select, .glass-toolbar .date summary { background: var(--well); }
html:has(.glass-toolbar) { scroll-padding-top: 168px; } /* focused rows land below the bar and the stuck toolbar */
@media (max-width: 720px) {
  .glass-toolbar { position: relative; top: auto; } /* a wrapped toolbar is too tall to pin on a phone */
  html:has(.glass-toolbar) { scroll-padding-top: 76px; }
}

  /* Quick views: a clear glass track; the lens slides to the chosen view. */
  .views-track { display: inline-flex; max-width: 100%; padding: 4px; border-radius: 999px; margin-bottom: 12px; }
  .track-items > .view { padding: 0 12px; gap: 7px; font-size: 13.5px; }
  .view .n { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .view[data-alert="true"] .n { color: var(--danger); font-weight: 600; }

  .at-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; margin-bottom: 12px; }
  .list { overflow: hidden; }
  .at-toolbar .search { flex: 1 1 240px; max-width: 340px; }
  .date { position: relative; }
  .date summary { list-style: none; height: 40px; padding: 0 14px 0 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--hairline-strong); cursor: pointer; user-select: none; }
  .date summary::-webkit-details-marker { display: none; }
  .date summary .ic { width: 16px; height: 16px; color: var(--text-3); }
  .date[open] summary { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-ring); }
  /* The date panel grows out of its summary capsule, like the bar popovers. */
  .date .pop {
    right: 0; left: auto; width: 300px; padding: 12px;
    visibility: visible; opacity: 1; transform: none; pointer-events: auto; clip-path: inset(0 round 18px);
    transition: clip-path 300ms cubic-bezier(0.32, 0.72, 0, 1), transform 300ms cubic-bezier(0.32, 0.72, 0, 1), opacity 90ms var(--ease-out);
  }
  .date .pop > * { opacity: 1; transition: opacity 200ms var(--ease-out) 70ms; }
  @starting-style {
    .date[open] .pop { opacity: 0; transform: translateY(-4px); clip-path: inset(0 0 calc(100% - 40px) calc(100% - 170px) round 20px); }
    .date[open] .pop > * { opacity: 0; }
  }
  .date-presets { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip-btn { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-strong); transition: transform 120ms var(--ease-out); }
  .chip-btn:active { transform: scale(0.97); }
  .date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--text-3); }
  .date-fields .input { padding: 0 10px; margin-top: 4px; }
  .mobile-sort { display: none; }

  .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
  .active-filters[hidden] { display: none; }
  .active-label { font-size: 12px; font-weight: 560; color: var(--text-3); }
  .fchips { display: flex; flex-wrap: wrap; gap: 8px; }
  .notif-icon[data-status="overdue"] { --st: var(--danger); }
  .fchip { height: 28px; padding: 0 6px 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); }
  .fchip button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); }
  .fchip .ic { width: 14px; height: 14px; stroke-width: 2; }

  .at-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--text-3); }
  .at-footer-right { display: flex; align-items: center; gap: 16px; }
  .page-size { display: inline-flex; align-items: center; gap: 8px; }
  .page-size .select { height: 32px; width: 72px; font-size: 13px; padding-right: 28px; }
  .page-size .select-wrap .ic { right: 8px; }
  .pager { display: flex; align-items: center; gap: 4px; }
  .pager .icon-btn { width: 32px; height: 32px; }
  .pager .icon-btn:disabled { opacity: 0.4; cursor: default; }
  .pager .current { min-width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--hover-strong); font-variant-numeric: tabular-nums; }

  .tab-menu { width: 220px; }
@media (hover: hover) and (pointer: fine) {
  .chip-btn:hover, .fchip button:hover { background: var(--hover-strong); }
  .date summary:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hairline-strong) 50%, var(--accent)); }
}
@media (max-width: 720px) {
  .views-track { display: flex; overflow: hidden; }
  .track-items { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .track-items::-webkit-scrollbar { display: none; }
  .at-toolbar .search { flex-basis: 100%; max-width: none; }
  .at-toolbar .select-wrap { flex: 1 1 calc(50% - 4px); }
  .at-toolbar .date, .at-toolbar .mobile-sort { flex: 1 1 100%; }
  .at-toolbar .select, .date summary { width: 100%; }
  .date .pop { left: 0; right: auto; width: calc(100vw - 64px); }
  @starting-style { .date[open] .pop { clip-path: inset(0 calc(100% - 170px) calc(100% - 40px) 0 round 20px); } }
  .at-footer { justify-content: center; }
  .page-size { display: none; }
}
.btn-danger { background: var(--danger); color: var(--on-danger); }
.btn-danger-quiet { background: var(--surface); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); }
@media (pointer: coarse) { .btn { height: 44px; } }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; transform: none; cursor: not-allowed; }
.btn:disabled:active, .btn[aria-disabled="true"]:active { transform: none; }
.btn[aria-busy="true"], .submit[aria-busy="true"] { cursor: progress; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .btn-danger:hover { background: color-mix(in srgb, var(--danger) 92%, #000); }
  .btn-danger-quiet:hover { background: var(--danger-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .input, .select, .segmented button, .track-items > button, .lens, .chip-btn, .updates, .sort { transition-duration: 0ms; }
  .btn:active, .segmented button:active, .track-items > button:active, .chip-btn:active { transform: none; }
  .lens { scale: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none !important; }
  .date .pop, .date[open] .pop { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .date[open] .pop > * { opacity: 1 !important; transition: none !important; }
}