/* ══════════════════════════════════════
   Resume Strips
══════════════════════════════════════ */

.resume-strips {
  background: var(--hero-bg);
  border-bottom: 1px solid var(--hero-border);
}

.strips-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 8px 12px;
}

.strips-label {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-mid);
  padding: 2px 0;
}

/* flex-wrap, not a fixed-column grid: each card sizes to its own content
   (design feedback: bars were too wide — should be only slightly wider than
   the "Last worked X" text) and wraps to the next line as needed, instead of
   stretching to fill an equal-fraction grid column. */
.strips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.resume-strip {
  /* A flat rgba(255,255,255,X) overlay only reads clearly against a DARK
     background — against light mode's already-light hero-bg it's nearly
     invisible, which is why light mode broke too once the card lost its
     old distinct color. Switched to the same var(--surface)/var(--border)
     pair every other card in the app uses (.card, global.css) — both are
     real per-theme colors already tuned to contrast against their
     surroundings in both themes, not a fixed-alpha guess. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.resume-strip:hover { background: var(--surface2); }

.strip-left {
  /* max-width, not a fixed width — short text (most real project names/
     dates) shrinks the card down to its actual size instead of always
     reserving dead space; a name/date longer than this still ellipses
     reliably because min-width:0 overrides the flex item's default
     min-width:auto (which would otherwise let the text's intrinsic width
     win over max-width). */
  max-width: 130px;
  min-width: 0;
}

.strip-name {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--hero-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.strip-detail {
  font-size: var(--fs-10);
  color: var(--hero-mid);
  font-family: var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

.strip-btn {
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.strip-btn:hover { opacity: 0.85; }

/* ══════════════════════════════════════
   Dashboard
══════════════════════════════════════ */

.projects-wrap {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 12px 12px 80px;
}

/* ── Wide-screen layout: "Jump back in" as a sidebar ──
   Design feedback: on a laptop-width screen, move the resume strips into
   a sidebar instead of a horizontal band above the project grid. Below
   the breakpoint, .db-layout stays a plain block (default) and every
   rule above this point applies unchanged — today's mobile/narrow layout
   is untouched, not just visually similar. Above it, .resume-strips
   switches from a full-bleed band to a sidebar column, and .strips-grid
   drops to one column (reusing the same single-column override the
   <480px mobile case already needed, just via min-width instead of
   max-width — a narrow sidebar has the same "no room for 3 columns"
   problem a narrow phone screen does). */
@media (min-width: 900px) {
  .db-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: var(--page-width-wide);
    margin: 0 auto;
    /* 16px horizontal, not 12px — matches .topbar-inner-wide's own padding
       (layout.css) exactly, so the topbar and body edges land at the same
       pixel instead of being 4px off from each other. */
    padding: 12px 16px 0;
  }

  .resume-strips {
    background: none;
    border-bottom: none;
    /* Shrink-wraps its actual content width (cards are shrink-to-fit too,
       see .strip-left) instead of reserving a flat guessed pixel width —
       design feedback: a fixed sidebar width left dead space between the
       cards and the project grid whenever the cards' real content (short
       names, short "Last worked" strings) didn't need the full width.
       max-width is just a safety ceiling for a pathologically long name. */
    flex: 0 0 auto;
    max-width: 230px;
    position: sticky;
    top: 12px;
  }

  .strips-inner {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--hero-bg);
    border: 1px solid var(--hero-border);
    border-radius: var(--radius-lg);
    padding: 12px;
  }

  /* Sidebar column: stack cards vertically rather than wrapping them
     side-by-side, but still shrink-to-fit width (not stretched to the
     260px sidebar) — same content-sized-card rule as the horizontal band. */
  .strips-grid {
    flex-direction: column;
    align-items: flex-start;
  }

  .projects-wrap {
    max-width: none;
    margin: 0;
    flex: 1;
    min-width: 0;
    /* Top padding matches .strips-inner's own 12px top padding, so "All
       Projects" lines up with "Jump back in" instead of sitting 12px
       higher (design feedback). */
    padding: 12px 0 80px;
  }
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--radius-xl);
  background: var(--accent-lt);
  color: var(--accent-text);
  font-size: var(--fs-10);
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: 0;
  text-transform: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Filter ── */
.filter-wrap { position: relative; }

/* Solid teal at rest (not just when active) — design feedback: "they should
   be teal period not after click, then turn darker teal just like the
   active knitting button." Hover matches .pd-track-btn's own darken-on-hover
   treatment (opacity dip) rather than a border/color shift. Safe to drop the
   color-as-state-indicator here because the label text already encodes
   state ("Filter" vs "Filter · N", "Show archived" vs "Hide archived") —
   the *-active class still exists (applied by dashboard.rs) but no longer
   needs to look different, since there's nothing left for it to indicate
   that the button doesn't already say in words. */
.filter-btn, .filter-btn-active,
.archived-toggle-btn, .archived-toggle-btn-active {
  font-size: var(--fs-12);
  color: var(--bg);
  cursor: pointer;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 500;
  white-space: nowrap;
  padding: 3px 8px;
  transition: opacity 0.15s;
}
.filter-btn:hover, .filter-btn-active:hover,
.archived-toggle-btn:hover, .archived-toggle-btn-active:hover { opacity: 0.85; }

/* position:fixed, top/right driven by inline style from the trigger
   button's live getBoundingClientRect() (menu_pos_below in dashboard.rs)
   — not position:absolute relative to .filter-wrap. .page-scroll sets
   overflow:auto on both axes, which clipped an absolutely-positioned
   dropdown that rendered partially outside its own box on a narrow
   phone-portrait viewport (the dropdown widened for the tab row).
   Rendered as a sibling of .page-scroll, immune to its overflow.
   z-index 200, not 100 — .page-scroll is itself position:fixed with
   z-index:101 (global.css), and now that the dropdown is a *sibling*
   of .page-scroll rather than a descendant, their z-index values
   compete directly in the same stacking context. 100 lost, rendering
   the dropdown behind the project cards ("the pop up shows up behind
   the cards"). 200 matches the same convention already used for
   ActiveTracking's equivalent portals (.at-back-menu/.at-opacity-popover). */
.filter-dropdown {
  position: fixed;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  min-width: 200px;
  max-width: 280px;
  overflow: hidden;
}

.filter-dropdown-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
}

/* ── Filter tabs (Tags/Craft/Category) — wayfinder rowbie#11's winning
   Filter UI structure (Variant B): one dropdown, a tab row switches
   between dimensions rather than stacking all three or splitting into
   separate buttons. Chosen specifically because it keeps the dropdown's
   height bounded to one dimension's content at a time. ── */
.filter-tab-row {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.filter-tab {
  flex: 1;
  font-size: var(--fs-12);
  font-weight: 500;
  padding: 8px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-mid);
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.filter-tab-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Tags-only AND/OR toggle (rowbie#8) — lives inside the Tags tab
   specifically, since it's the only dimension it has meaning for
   (Craft/Category multi-select is always internally OR). */
.filter-section-row {
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px 0;
}

.filter-match-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.filter-match-btn {
  font-size: var(--fs-10);
  font-weight: 600;
  padding: 2px 8px;
  background: transparent;
  border: none;
  color: var(--ink-mid);
  cursor: pointer;
  font-family: var(--font-sans);
}
.filter-match-btn-active { background: var(--accent); color: var(--bg); }

.filter-tag-chip {
  font-size: var(--fs-12);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--ink-mid);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  transition: all 0.12s;
}
.filter-tag-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-tag-chip-on { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.filter-empty {
  padding: 12px 14px;
  font-size: var(--fs-12);
  color: var(--ink-light);
  font-style: italic;
  text-align: center;
}

.filter-clear {
  display: block;
  width: 100%;
  padding: 7px 12px;
  text-align: center;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--ink-light);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.filter-clear:hover { background: var(--surface2); color: var(--ink); }

/* ── Sort ── */
.sort-wrap { position: relative; flex-shrink: 0; }

.sort-btn {
  font-size: var(--fs-12);
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-weight: 500;
  white-space: nowrap;
}
.sort-btn:hover { opacity: 0.75; }

/* position:fixed — same reason as .filter-dropdown above, including the
   z-index bump (200, not 100 — see that comment). */
.sort-dropdown {
  position: fixed;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  min-width: 130px;
  overflow: hidden;
}

.sort-option {
  display: block;
  width: 100%;
  padding: 7px 12px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s;
}
.sort-option:last-child { border-bottom: none; }
.sort-option:hover { background: var(--surface2); }
.sort-option-active { color: var(--accent); font-weight: 600; }

/* ── Project grid ── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 480px) and (orientation: portrait) {
  .project-grid { grid-template-columns: 1fr; }
}

.empty-filter {
  grid-column: 1 / -1;
  padding: 24px 0;
  text-align: center;
  font-size: var(--fs-12);
  color: var(--ink-light);
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.empty-filter-clear {
  font-size: var(--fs-12);
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
}

/* ── FAB ──
   Moved from bottom-center to bottom-right (design feedback): centered
   over the project grid meant it could sit directly on top of a card
   while scrolling. bottom:62px cleared the old BottomNav (48px + margin);
   now that BottomNav is gone (moved into TopBar), a standard 20px inset
   from the corner is enough. */
.fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  border: none;
  font-size: var(--fs-22);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 102;
  transition: opacity 0.15s, transform 0.15s;
}
.fab:hover { opacity: 0.88; transform: scale(1.05); }

/* ══════════════════════════════════════
   Project Card
══════════════════════════════════════ */

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}
.project-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.card-active { border-color: var(--accent); }

.card-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1;
}

.photo-wrap {
  width: 55%;
  flex-shrink: 0;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.card-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-emoji {
  font-size: var(--fs-24);
  line-height: 1;
  opacity: 0.45;
}

.card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--border);
}

.card-body {
  flex: 1;
  padding: 6px 7px 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card-name {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.badge {
  font-size: var(--fs-9);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  align-self: flex-start;
  white-space: nowrap;
}

.badge-active   { background: var(--accent-lt); color: var(--accent-text); }
.badge-paused   { background: var(--surface2);  color: var(--ink-mid); }
.badge-waiting  { background: var(--warn-lt);   color: var(--warn); }
.badge-completed { background: var(--ok-lt);    color: var(--ok); }
.badge-archived  { background: var(--surface2); color: var(--ink-light); }

.card-sub {
  font-size: var(--fs-10);
  color: var(--ink-mid);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-tags {
  padding: 0 7px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.tag-chip {
  font-size: var(--fs-9);
  font-weight: 500;
  padding: 1px 5px;
  border-radius: var(--radius-xl);
  background: var(--accent-lt);
  color: var(--accent-text);
  white-space: nowrap;
}

.card-stats {
  padding: 5px 7px 6px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.stat-lbl {
  font-size: var(--fs-9);
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.stat-val {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--fs-12);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}

.card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 4px 6px;
  border-top: 1px solid var(--border);
}

.archive-btn,
.delete-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  color: var(--ink-light);
}
.archive-btn:hover { border-color: var(--ink-mid); color: var(--ink); }
.delete-btn:hover  { border-color: var(--danger); color: var(--danger); background: var(--danger-lt); }