/* ThriftyNifty look, v2 (2026-11). One place for the app's colors, type, shapes and shared pieces.
   Mock: "Homepage Theme Refresh" artifact. Rules: one style per button role and per status-pill role,
   the same on every page; nothing under 15px. Pages use these classes instead of inline colors. */

:root {
  /* Brand */
  --tn-green: #1e6b3c;        /* primary actions, active states, prices */
  --tn-green-dark: #16522e;   /* pressed / hover */
  --tn-green-tint: #e6efe6;   /* active nav pill, selected chips */
  --tn-green-soft: #eef3ec;   /* icon tiles, date tiles */
  --tn-logo: var(--tn-green-dark); /* wordmark text colour (follows the brand green) */
  --tn-orange: #c8781f;       /* badges, attention counts */
  --tn-gold: #c8a23a;         /* news / announcements edge */
  --tn-gold-soft: #f7f0dc;
  --tn-gold-ink: #8a6a12;     /* text/icons on gold-soft */
  --tn-red: #a83030;          /* late, problems, destructive */
  --tn-red-line: #e6c0c0;

  /* Neutrals */
  --tn-bg: #ffffff;
  --tn-ink: #15201a;          /* main text */
  --tn-ink-2: #5a6560;        /* secondary text */
  --tn-line: #eceee9;         /* dividers */
  --tn-border: #d9ddd6;       /* outlined buttons, inputs */
  --tn-field: #f5f6f3;        /* search field, photo wells, quiet chips */
  --tn-chip: #f2f3f0;         /* round icon buttons */

  /* Status pills */
  --tn-pill-active-bg: #d8e4ca;   --tn-pill-active-fg: #2e5546;
  --tn-pill-pending-bg: #ebd1a6;  --tn-pill-pending-fg: #8a4a0a;
  --tn-pill-problem-bg: #f3d4d4;  --tn-pill-problem-fg: #a83030;
  --tn-pill-neutral-bg: #f2f3f0;  --tn-pill-neutral-fg: #5a6560;

  /* Type (Figtree everywhere; body 17px; nothing under 15px) */
  --tn-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tn-fs-body: 17px;
  --tn-fs-meta: 17px;    /* secondary text (same size as body; lighter colour) */
  --tn-fs-small: 15px;   /* small details only: timestamps, ids, tab counts, footnotes */
  --tn-fs-title: 17px;   /* card/row titles: same size as text, bold */
  --tn-fs-section: 21px;
  --tn-fs-page: 21px;

  /* Shape */
  --tn-r-btn: 12px;
  --tn-r-card: 16px;
  --tn-r-card-lg: 18px;
  --tn-shadow: 0 1px 2px rgba(21, 32, 26, 0.06), 0 4px 12px rgba(21, 32, 26, 0.07);
  --tn-gutter: 16px;
}

/* ---------- Base ---------- */
body { background: var(--tn-bg); color: var(--tn-ink); font-family: var(--tn-font); font-size: var(--tn-fs-body); }

/* ---------- Text ---------- */
.tn-page-title { font-size: var(--tn-fs-page); font-weight: 700; margin: 0; }
.tn-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.tn-section-title { font-size: var(--tn-fs-section); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.tn-section-link { font-size: var(--tn-fs-meta); font-weight: 600; color: var(--tn-green); text-decoration: none; white-space: nowrap; }
.tn-title { font-size: var(--tn-fs-title); font-weight: 700; margin: 0; }
.tn-meta { font-size: var(--tn-fs-meta); color: var(--tn-ink-2); margin: 0; }
.tn-small { font-size: var(--tn-fs-small); color: var(--tn-ink-2); margin: 0; }
.tn-price { font-weight: 800; color: var(--tn-green); }

/* ---------- Cards ---------- */
.tn-card { background: #ffffff; border-radius: var(--tn-r-card); box-shadow: var(--tn-shadow); padding: 16px; }
.tn-card--lg { border-radius: var(--tn-r-card-lg); }
.tn-card--flat { box-shadow: none; background: var(--tn-field); }
.tn-card--link { display: block; text-decoration: none; color: inherit; }

/* Activity row: colored left edge + tile + text + chevron (homepage Activities, lists). */
.tn-row { display: flex; align-items: center; gap: 12px; background: #ffffff; border-radius: var(--tn-r-card); box-shadow: var(--tn-shadow); padding: 12px 12px 12px 0; text-decoration: none; color: var(--tn-ink); overflow: hidden; }
.tn-row::before { content: ''; width: 5px; align-self: stretch; border-radius: 0 4px 4px 0; background: var(--tn-row-edge, var(--tn-green)); flex-shrink: 0; }
.tn-row--alert { --tn-row-edge: var(--tn-red); }
.tn-row--ready { --tn-row-edge: var(--tn-green); }
.tn-row--news  { --tn-row-edge: var(--tn-gold); }
.tn-row__body { flex: 1; min-width: 0; }
.tn-row__chev { flex-shrink: 0; color: var(--tn-ink-2); }

/* Icon / date tiles */
.tn-tile { width: 48px; height: 48px; border-radius: 12px; background: var(--tn-green-soft); color: var(--tn-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tn-tile--gold { background: var(--tn-gold-soft); color: var(--tn-gold-ink); }
/* Same footprint as .tn-tile so an event row is no taller than any other row. Day name 14px all caps and day number 18px are deliberate exceptions
   to the type scale (Steve, 2026-11-02): caps read larger, and it keeps the badge uncramped. */
.tn-date { width: 48px; height: 48px; box-sizing: border-box; border-radius: 12px; background: var(--tn-green-soft); text-align: center; padding: 0; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tn-date__dow { display: block; font-size: 14px; font-weight: 700; line-height: 1; color: var(--tn-green); text-transform: uppercase; }
.tn-date__day { display: block; font-size: 18px; font-weight: 800; line-height: 1.05; color: var(--tn-ink); }

/* ---------- Buttons (one style per role) ---------- */
.tn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 18px; border-radius: var(--tn-r-btn); font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; box-sizing: border-box; }
.tn-btn--primary { background: var(--tn-green); color: #ffffff; border-color: var(--tn-green); font-weight: 700; }
.tn-btn--primary:hover { background: var(--tn-green-dark); border-color: var(--tn-green-dark); }
.tn-btn--secondary { background: #ffffff; color: var(--tn-ink); border-color: var(--tn-border); }
.tn-btn--secondary:hover { background: var(--tn-field); }
.tn-btn--danger { background: #ffffff; color: var(--tn-red); border-color: var(--tn-red-line); }
.tn-btn--quiet { background: transparent; color: var(--tn-green); border-color: transparent; padding: 0 6px; }
.tn-btn--block { display: flex; width: 100%; }
.tn-btn--lg { min-height: 52px; font-size: 17px; border-radius: 14px; }
.tn-btn:disabled, .tn-btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }

/* Round icon button (header bell, back, share) */
.tn-iconbtn { width: 50px; height: 50px; border-radius: 50%; /* 50 = Back/Refresh/Print (app-modern), so every round header button matches (Steve, 2026-11-03) */ border: none; background: var(--tn-chip); color: var(--tn-ink); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; flex-shrink: 0; }
/* Line icons (@icon) in round header buttons: same 22px as the Back chevron beside them (Steve, 2026-11-03). */
.tn-iconbtn .tn-i { width: 22px; height: 22px; }

/* ---------- Pills (status) and chips ---------- */
.tn-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 50px; font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.tn-pill--active  { background: var(--tn-pill-active-bg);  color: var(--tn-pill-active-fg); }
.tn-pill--pending { background: var(--tn-pill-pending-bg); color: var(--tn-pill-pending-fg); }
.tn-pill--problem { background: var(--tn-pill-problem-bg); color: var(--tn-pill-problem-fg); }
.tn-pill--neutral { background: var(--tn-pill-neutral-bg); color: var(--tn-pill-neutral-fg); }
.tn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 50px; background: var(--tn-field); color: var(--tn-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.tn-chip--on { background: var(--tn-green-tint); color: var(--tn-green); }
.tn-badge { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--tn-orange); color: #ffffff; font-size: 15px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }

/* ---------- Fields ---------- */
.tn-field { display: flex; align-items: center; gap: 10px; min-height: 52px; border-radius: var(--tn-r-card); background: var(--tn-field); padding: 0 16px; box-sizing: border-box; }
.tn-field input, .tn-field select, .tn-field textarea { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--tn-fs-body); color: var(--tn-ink); }

/* ---------- Activities rows (homepage) ---------- */
.tn-date--gold { background: var(--tn-gold-soft); }
.tn-date--gold .tn-date__dow { color: #8a6a12; }
.act-list { display: flex; flex-direction: column; gap: 10px; }
.act-row { padding-right: 6px; }
.act-row[hidden] { display: none; }
.act-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.act-title { display: block; font-size: var(--tn-fs-title); font-weight: 700; color: var(--tn-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-sub { display: block; font-size: var(--tn-fs-meta); color: var(--tn-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-when { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.15; }
.act-when-top { font-size: 15px; font-weight: 500; color: var(--tn-ink-2); }
.act-when-main { font-size: 17px; font-weight: 800; }
.act-dismiss { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--tn-ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-height: unset; }
.act-dismiss:hover { background: var(--tn-chip); }
.act-more-btn { margin-top: 6px; }
/* A little more room in Activities rows (homepage + Activities page): 52px tiles/date badges, 15px row padding. */
.act-row { padding-top: 15px; padding-bottom: 15px; }
.act-row .tn-tile, .act-row .tn-date { width: 52px; height: 52px; }
.act-row .tn-date__dow { margin-bottom: 1px; }

/* ---------- Homepage ---------- */
.home-search { display: flex; gap: 10px; margin: 0; }
/* Homepage search band: directly under the sticky header, same white, so search reads as part of the header. */
.home-search-band { background: #ffffff; padding: 2px 16px 12px; position: sticky; top: 66px; z-index: 89; border-bottom: 1px solid transparent; transition: border-bottom-color 0.15s; }
.home-search-band.is-scrolled { border-bottom-color: var(--tn-line); }
/* The header's own scrolled divider would sit between the logo and the search: hide it on the homepage. */
body:has(.home-search-band) .top-strip.top-strip-scrolled { border-bottom-color: transparent; }
.home-search-band-inner { max-width: 640px; margin: 0 auto; }
.home-quick-wrap { margin-top: -4px; }
.home-search-field { flex: 1; min-width: 0; }
.home-search-field input { min-height: unset; height: 50px; -webkit-appearance: none; appearance: none; }
.home-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.home-search-field:focus-within { box-shadow: 0 0 0 2px var(--tn-green-tint); }
.home-search-photo { width: 52px; height: 52px; border-radius: var(--tn-r-card); background: var(--tn-field); color: var(--tn-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; }

.home-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home-quick-tile { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--tn-r-card); background: #ffffff; box-shadow: var(--tn-shadow); text-decoration: none; color: var(--tn-ink); font-size: 17px; font-weight: 600; white-space: nowrap; }
.home-quick-tile .tn-i { width: 26px; height: 26px; color: var(--tn-green); }
@media (min-width: 640px) { .home-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Store page shortcuts: three homepage quick tiles in a row, icon above label at every width (Steve, 2026-11-03). */
.tn-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tn-shortcuts .home-quick-tile { flex-direction: column; justify-content: center; gap: 6px; padding: 14px 6px 12px; text-align: center; }

.home-banner { display: flex; align-items: stretch; border-radius: 20px; background: var(--tn-green); color: #ffffff; overflow: hidden; min-height: 150px; }
.home-banner-text { flex: 1; padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.home-banner-title { font-size: 22px; font-weight: 800; line-height: 1.15; margin: 0; color: #ffffff; text-wrap: balance; }
.home-banner-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--tn-r-btn); background: #ffffff; color: var(--tn-green); font-weight: 700; font-size: 17px; text-decoration: none; }
.home-banner-btn .tn-i { color: var(--tn-green); }
.home-banner-art { width: 110px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.10); }
.home-banner-art .tn-i { width: 56px; height: 56px; color: rgba(255, 255, 255, 0.9); stroke-width: 1.4; }

.home-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 0; }
.home-count { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--tn-ink); }
.home-count + .home-count { border-left: 1px solid var(--tn-line); }
.home-count-n { display: inline-flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 800; color: var(--tn-green); line-height: 1.1; }
.home-count-n .tn-i { width: 22px; height: 22px; color: currentColor; }
.home-count-l { font-size: 15px; font-weight: 600; }
.home-count.is-zero .home-count-n { color: var(--tn-orange); }

.home-review-stars { display: flex; gap: 6px; }
.home-review-stars button { background: none; border: none; font-size: 32px; line-height: 1; cursor: pointer; padding: 0 2px; min-height: unset; color: #d6d9d3; transition: color 0.15s; }
.home-review-stars button.on { color: var(--tn-orange); }

/* Page dots under horizontal item rows */
.home-dots { display: flex; justify-content: center; gap: 5px; padding-top: 8px; }
.home-dots span { width: 6px; height: 6px; border-radius: 50%; background: #d9ddd6; transition: all 0.15s; }
.home-dots span.on { background: var(--tn-green); width: 16px; border-radius: 3px; }

/* Icons inside tiles read at a glance */
.tn-tile .tn-i { width: 24px; height: 24px; }
.tn-chip .tn-i, .tn-pill .tn-i { width: 16px; height: 16px; color: currentColor; }


.tn-tile .tn-i { color: currentColor; }


/* Activity edge colours (Steve, 2026-11-02): red = late, orange = waiting (on time), green = ready/confirmed,
   blue = getting started (setup + giving back), gold = news. */
.tn-row--wait  { --tn-row-edge: var(--tn-orange); }
.tn-row--setup { --tn-row-edge: #3b6fb6; }
.tn-tile--blue { background: #e7eef8; color: #2f5f9e; }

/* Activities as ONE card with dividers (Steve, 2026-11-02 trial). Each row keeps its coloured left bar. */
.act-list { gap: 0; background: #ffffff; border-radius: var(--tn-r-card); box-shadow: var(--tn-shadow); overflow: hidden; }
.act-list .tn-row { box-shadow: none; border-radius: 0; background: transparent; }
.act-list .tn-row + .tn-row { border-top: 1px solid var(--tn-line); }
.act-list .tn-row::before { border-radius: 0; }

/* Homepage search input: no inner box or focus outline (the field's soft glow shows focus); text starts nearer the icon. */
.home-search-field input,
.home-search-field input:focus,
.home-search-field input:focus-visible { border: none !important; outline: none !important; box-shadow: none !important; padding: 0 4px !important; background: transparent; }

/* Chrome autofill paints inputs light blue; keep the field's own colour (applies to every v2 field). */
.tn-field input:-webkit-autofill,
.tn-field input:-webkit-autofill:hover,
.tn-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tn-field) inset !important;
  box-shadow: 0 0 0 1000px var(--tn-field) inset !important;
  -webkit-text-fill-color: var(--tn-ink) !important;
  caret-color: var(--tn-ink);
  transition: background-color 99999s ease-out 0s;
}

/* Homepage search: text a little further left, and a small clear (x) that shows only with text. */
.home-search-field { gap: 6px; }
.home-search-field input, .home-search-field input:focus, .home-search-field input:focus-visible { padding: 0 2px !important; }
.home-search-clear { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none; background: #e3e6e0; color: var(--tn-ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; min-height: unset; margin-right: -6px; }
.home-search-clear[hidden] { display: none; }

/* The whole browse banner is one link. */
.home-banner { text-decoration: none; }
.home-banner:active { opacity: 0.92; }


/* Segmented switch (e.g. Near me: Stores | Items) */
.tn-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--tn-field); }
.tn-seg a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border-radius: 10px; font-size: 17px; font-weight: 600; color: var(--tn-ink-2); text-decoration: none; }
/* THE switch look (2026-11-02), used by every page switch (Near me, Inquiries, New inquiry, Donate, Pickups, Profile):
   grey track radius 14 / padding 4, tabs radius 10, selected = white + green text 700 + one soft shadow. */
.tn-seg a.on { background: #ffffff; color: var(--tn-green); font-weight: 700; box-shadow: 0 1px 3px rgba(21, 32, 26, 0.10); }
/* Same switch with <button> tabs (store pages that swap panels in place). Never wraps: scrolls sideways if too wide;
   tighter tabs on phones. Script toggles .on (never inline styles). */
.tn-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tn-seg::-webkit-scrollbar { display: none; }
.tn-seg a, .tn-seg button { flex-shrink: 0; white-space: nowrap; }
.tn-seg button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border: 0; border-radius: 10px; background: transparent; font-family: inherit; font-size: 17px; font-weight: 600; color: var(--tn-ink-2); cursor: pointer; }
.tn-seg button.on { background: #ffffff; color: var(--tn-green); font-weight: 700; box-shadow: 0 1px 3px rgba(21, 32, 26, 0.10); }
@media (max-width: 520px) { .tn-seg a, .tn-seg button { padding: 0 12px; } }

/* ---------- Browse items (v2): toolbar, view buttons, list + grid cards ---------- */
.bi-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; }
.bi-count { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; color: var(--tn-ink-2); }
/* Chips get their own full-width line under the count + view buttons, and wrap. */
.bi-chips { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.bi-chips::-webkit-scrollbar { display: none; }
.bi-chips .tn-chip { white-space: nowrap; }
.bi-chip-n { font-weight: 500; opacity: 0.75; }
.bi-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--tn-field); flex-shrink: 0; }
.bi-view { width: 38px; height: 38px; border-radius: 9px; border: none; background: transparent; color: var(--tn-ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; min-height: unset; text-decoration: none; }
.bi-view[aria-pressed="true"] { background: #ffffff; color: var(--tn-green); box-shadow: 0 1px 2px rgba(21, 32, 26, 0.10); }

.bi-items { display: flex; flex-direction: column; gap: 10px; }
.bi-card { display: flex; align-items: center; gap: 14px; background: #ffffff; border-radius: var(--tn-r-card); box-shadow: var(--tn-shadow); padding: 12px; text-decoration: none; color: var(--tn-ink); min-width: 0; }
.bi-img { flex-shrink: 0; width: 92px; height: 92px; border-radius: 12px; background: var(--tn-field); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--tn-ink-2); }
.bi-img img { width: 100%; height: 100%; object-fit: contain; }
.bi-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bi-badge { align-self: flex-start; margin-bottom: 3px; font-size: 15px; }
.bi-cat { font-size: 15px; color: var(--tn-ink-2); }
.bi-title { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-store { font-size: 17px; color: var(--tn-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-meta { font-size: 15px; color: var(--tn-ink-2); }
.bi-price-cell { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; }
.bi-price { font-size: 17px; font-weight: 800; color: var(--tn-green); }

/* Grid: photo tiles, 2 across on phones, more on wider screens (like the homepage item cards). */
.bi-items.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .bi-items.is-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } }
.bi-items.is-grid .bi-card { flex-direction: column; align-items: stretch; gap: 0; padding: 6px; background: var(--tn-field); box-shadow: none; border-radius: 18px; }
.bi-items.is-grid .bi-img { width: 100%; height: auto; aspect-ratio: 1 / 1; background: #ffffff; border-radius: 14px; }
.bi-items.is-grid .bi-body { padding: 10px 6px 0; }
.bi-items.is-grid .bi-price-cell { align-items: flex-start; text-align: left; padding: 2px 6px 6px; }
.bi-items.is-grid .bi-store, .bi-items.is-grid .bi-ago, .bi-items.is-grid .bi-pay, .bi-items.is-grid .bi-cat { display: none; }
.bi-items.is-grid .bi-title { font-size: 17px; }
.bi-items.is-grid .bi-price { font-size: 17px; }
@media (max-width: 480px) { .bi-items.is-list .bi-img { width: 76px; height: 76px; } .bi-items.is-list .bi-pay { display: none; } }

/* Icons inside buttons take the button's text colour (so they show on green). */
.tn-btn .tn-i { color: currentColor; }


/* Homepage left nav rail (desktop >= 1280px): same bands as the account menu. */
.home-nav-rail { flex-direction: column; gap: 2px; }
.home-nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; font-size: 17px; font-weight: 600; color: var(--tn-ink); text-decoration: none; }
.home-nav-item .tn-i { width: 22px; height: 22px; color: var(--tn-ink-2); }
.home-nav-item:hover { background: var(--tn-field); }
.home-nav-item.home-nav-active { background: var(--tn-green-tint); color: var(--tn-green); }
.home-nav-item.home-nav-active .tn-i { color: var(--tn-green); }
.home-nav-divider { border-top: 1px solid var(--tn-line); margin: 8px 4px; }

/* Page notices (session success / error / info). Success gets the filled green OK button. */
.tn-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.tn-notice p { margin: 0; min-width: 0; }
.tn-notice--ok { background: var(--tn-green-tint); color: var(--tn-green-dark); }
.tn-notice--error { background: var(--tn-pill-problem-bg); color: var(--tn-red); }
.tn-notice--info { background: var(--tn-field); color: var(--tn-ink); }
.tn-notice .tn-btn { min-height: 40px; padding: 0 16px; flex-shrink: 0; }

/* Wide screens (1280px+), homepage only: the top bar uses the homepage's columns (240 | 640 | 300, 32px gaps,
   capped at 1308px and centred) so the logo sits over the left menu, the search over the feed and the
   account buttons over the right panel. Keep in step with .home-shell in item-requests/index.blade.php. */
.top-strip-search { display: none; }
@media (min-width: 1280px) {
  body:has(.home-search-band) .top-strip { display: grid; grid-template-columns: 240px minmax(0, 640px) 300px; column-gap: 32px; padding-left: max(32px, calc(50% - 622px)); padding-right: max(32px, calc(50% - 622px)); }
  body:has(.home-search-band) .top-strip > :last-child { justify-self: end; }
  .top-strip-search { display: flex; min-width: 0; }
  .top-strip-search .home-search { width: 100%; }
  .top-strip-search .home-search-field input { height: 46px; }
  .top-strip-search .home-search-photo { width: 48px; height: 48px; }
  .home-search-band { display: none; }
  body:has(.home-search-band) .top-strip.top-strip-scrolled { border-bottom-color: var(--tn-line); }
}
/* Left menu at 1000px+ replaces the bottom nav (its first band is Home / Browse / My List / Card). */
@media (min-width: 1000px) {
  body:has(.home-nav-rail) .bottom-nav { display: none !important; }
}
.home-nav-item { position: relative; }
.home-nav-badge { margin-left: auto; position: static; }
/* Still scrolls when the window is shorter than the menu, just without a visible scrollbar. */
.home-nav-rail { scrollbar-width: none; -ms-overflow-style: none; }
.home-nav-rail::-webkit-scrollbar { display: none; }

/* Right panel (homepage, 1280px+): Your stores + Find more stores, then Drawings. */
.home-rail { flex-direction: column; gap: 16px; }
.hr-card { display: flex; flex-direction: column; gap: 2px; padding: 16px; }
.hr-title { font-size: var(--tn-fs-title); font-weight: 800; color: var(--tn-ink); margin: 0 0 6px; }
.hr-store { display: flex; align-items: center; gap: 12px; padding: 8px 0; text-decoration: none; color: inherit; }
.hr-store + .hr-store { border-top: 1px solid var(--tn-line); }
.hr-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--tn-field); }
.hr-logo--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--tn-ink-2); }
.hr-store-text { display: flex; flex-direction: column; min-width: 0; }
.hr-store-name { font-size: 17px; font-weight: 600; color: var(--tn-ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-store:hover .hr-store-name { color: var(--tn-green); }
.hr-store-hours { font-size: 15px; color: var(--tn-ink-2); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-store-hours--open { color: var(--tn-green); }
.hr-empty { font-size: 15px; color: var(--tn-ink-2); margin: 0 0 4px; }
.hr-more { margin-top: 10px; min-height: 44px; font-size: 15px; }
.hr-drawing { padding: 8px 0; }
.hr-drawing + .hr-drawing { border-top: 1px solid var(--tn-line); }
.hr-entered { font-size: 15px; font-weight: 600; color: var(--tn-green); margin: 4px 0 0; display: flex; align-items: center; gap: 4px; }
.hr-more--alone { margin-top: 0; }

/* TRIAL (2026-11-02): four-across quick actions stack the icon above the label so "Ways to earn" fits.
   To put it back: delete this block and use the short label "Earn" in item-requests/index.blade.php. */
@media (min-width: 640px) {
  .home-quick-tile { flex-direction: column; justify-content: center; gap: 6px; padding: 14px 6px 12px; text-align: center; }
}

/* 1000-1279px, homepage only: the top bar uses the page's two columns (240 | 640, 32px gap, max 976px centred),
   so the logo sits over the left menu and the bell/account end at the feed's right edge. */
@media (min-width: 1000px) and (max-width: 1279px) {
  body:has(.home-search-band) .top-strip { display: grid; grid-template-columns: 240px minmax(0, 640px); column-gap: 32px; padding-left: max(32px, calc(50% - 456px)); padding-right: max(32px, calc(50% - 456px)); }
  body:has(.home-search-band) .top-strip > :last-child { justify-self: end; }
}

/* Checkboxes and radios everywhere use the brand green (not the browser blue). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--tn-green); color: var(--tn-green); --tw-ring-color: var(--tn-green-tint); }

/* Collapsible section (same idea as the store dashboard's sections): the title row is a button with a
   chevron before the title; collapsed hides .tn-collapse-body and draws a line across the row so it reads
   as "something is folded here". State is remembered per device by tnToggleCollapse (layout). */
.tn-collapse-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; margin: -4px -6px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; min-height: unset; }
/* Mouse devices only: on Android a tap leaves :hover stuck until the page reloads (Steve, 2026-11-03). */
@media (hover: hover) { .tn-collapse-toggle:hover { background: var(--tn-field); } }
.tn-collapse-chev { flex-shrink: 0; color: var(--tn-ink-2); transform: rotate(90deg); transition: transform 0.15s; }
.tn-collapse[data-collapsed="1"] .tn-collapse-chev { transform: rotate(0deg); }
.tn-collapse[data-collapsed="1"] .tn-collapse-body { display: none !important; }
.tn-collapse-line { display: none; flex: 1; height: 1px; background: var(--tn-border); margin-left: 6px; }
.tn-collapse[data-collapsed="1"] .tn-collapse-line { display: block; }
.tn-collapse .tn-section-head { margin-bottom: 10px; }
.tn-collapse[data-collapsed="1"] .tn-section-head { margin-bottom: 0; }

/* Activities page: List | Calendar (2026-11-02). */
.act-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.act-view { display: flex; flex-direction: column; gap: 22px; }
.act-view[hidden] { display: none; }
.act-cal-card { padding: 14px; }
.act-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.act-cal-title { font-size: var(--tn-fs-title); font-weight: 800; color: var(--tn-ink); margin: 0; }
.act-cal-dow, .act-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.act-cal-dow { text-align: center; font-size: 15px; font-weight: 600; color: var(--tn-ink-2); margin-bottom: 4px; }
.act-cal-day { min-height: 50px; padding: 4px 0; border: 0; border-radius: 12px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 17px; font-weight: 600; color: var(--tn-ink); cursor: pointer; }
.act-cal-day:hover { background: var(--tn-field); }
.act-cal-day.is-past { color: var(--tn-ink-2); font-weight: 500; }
.act-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--tn-green-tint); color: var(--tn-green); }
.act-cal-day.is-selected { background: var(--tn-green); color: #ffffff; box-shadow: none; }
.act-dots { display: flex; gap: 3px; height: 7px; }
.act-dot { width: 7px; height: 7px; border-radius: 50%; }
.act-dot--alert { background: var(--tn-red); }
.act-dot--wait { background: var(--tn-orange); }
.act-dot--ready { background: var(--tn-green); }
.act-dot--setup { background: #3b6fb6; }
.act-dot--news { background: var(--tn-gold); }
.act-cal-day.is-selected .act-dot { box-shadow: 0 0 0 1.5px #ffffff; }

/* RULE (2026-11-02): empty state = <x-tn-empty> (flat grey, centred, bold title). Info alongside content = .tn-tip
   (slim grey strip, left-aligned, green icon, no title). Same grey; the shape says "missing" vs "note". */
.tn-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--tn-field); border-radius: var(--tn-r-card); padding: 28px 20px; text-align: center; }
.tn-empty[hidden] { display: none; }
.tn-empty__icon .tn-i { width: 34px; height: 34px; color: var(--tn-ink-2); opacity: 0.6; margin-bottom: 2px; }
.tn-empty__title { font-size: 17px; font-weight: 700; color: var(--tn-ink); margin: 0; text-wrap: balance; }
.tn-empty__text { font-size: 15px; color: var(--tn-ink-2); margin: 0; line-height: 1.45; max-width: 440px; text-wrap: pretty; }
.tn-empty__action { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tn-tip { display: flex; gap: 10px; align-items: flex-start; background: var(--tn-field); border-radius: 12px; padding: 10px 14px; font-size: 15px; color: var(--tn-ink-2); line-height: 1.4; }
.tn-tip > .tn-i { color: var(--tn-green); flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.tn-tip p { margin: 0; }

/* TYPE RULE (Steve, 2026-11-02 — shoppers may be older): two reading sizes app-wide. 17px for everything you read
   (titles bold, labels semi-bold, text regular); 15px only for small details (times, ids, footnotes); 21px page and
   section titles; numbers that ARE the point (prices, balances, counts) may be larger. No 16px / 18px text.
   Originally a homepage trial: one main-text size inside homepage cards — Quick actions labels, Counts labels and
   Activities titles all 17px (= body), and so are Activities details + In your community cards; weight shows rank.
   To undo: delete this block. */
:root { --tn-fs-card: 17px; }
.home-quick-tile, .home-count-l, .act-title, .act-sub,
.home-community .tn-title, .home-community .tn-small { font-size: var(--tn-fs-card); }
/* Community card buttons: green outline + green text (same as the welcome page's Sign in) — brand colour, still secondary. */
.home-community .tn-btn--secondary, .tn-btn--green-line { color: var(--tn-green); border: 1.5px solid var(--tn-green); }
.home-community .tn-btn--secondary:hover, .tn-btn--green-line:hover { background: var(--tn-green-tint); }
/* Title vs text differ by WEIGHT only (Steve, 2026-11-02): titles 700, labels 600, text 400. */

/* Very narrow phones (under 380px): the "Ways to earn" quick action shortens to "Earn" (Steve, 2026-11-02). */
.home-quick-tile .qa-short { display: none; }
@media (max-width: 379px) {
  .home-quick-tile .qa-long { display: none; }
  .home-quick-tile .qa-short { display: inline; }
}

/* Shared form pieces (x-input-label / x-text-input / x-input-error). */
.tn-label { display: block; font-size: 17px; font-weight: 600; color: var(--tn-ink); margin-bottom: 4px; }
.tn-input { display: block; min-height: 48px; padding: 0 14px; font-family: inherit; font-size: 17px; color: var(--tn-ink); background: #ffffff; border: 1px solid var(--tn-border); border-radius: 12px; box-shadow: none; }
.tn-input:focus { outline: none; border-color: var(--tn-green); box-shadow: 0 0 0 3px var(--tn-green-tint); }
.tn-input.pl-7 { padding-left: 28px; } /* room for a "$" prefix (price fields); .tn-input's padding would otherwise win */
.tn-input-error { list-style: none; margin: 6px 0 0; padding: 0; font-size: 15px; color: var(--tn-red); }

/* Focused form fields are green everywhere (Tailwind's forms plugin defaults to blue). */
[type='text']:focus, [type='email']:focus, [type='password']:focus, [type='tel']:focus, [type='number']:focus,
[type='url']:focus, [type='date']:focus, textarea:focus, select:focus {
  --tw-ring-color: var(--tn-green-tint); border-color: var(--tn-green); outline-color: var(--tn-green);
}

/* 640-999px, homepage: the top bar lines up with the centred 640px content column (logo over its left edge,
   account button at its right edge). Below 640 both already use the 16px gutter; from 1000px the column grid takes over. */
@media (min-width: 640px) and (max-width: 999px) {
  body:has(.home-search-band) .top-strip { padding-left: max(16px, calc(50% - 320px)); padding-right: max(16px, calc(50% - 320px)); }
}

/* Shopper pages (640px+): the top bar and the page-title bar line up with the 640px content column, like the
   homepage. Opt out with .tn-wide-page on a wider page (Browse's grid). The homepage has its own column rules. */
@media (min-width: 640px) and (max-width: 999px) {
  body.tn-shopper:not(:has(.tn-wide-page)):not(:has(.home-search-band)) .top-strip { padding-left: max(16px, calc(50% - 320px)); padding-right: max(16px, calc(50% - 320px)); }
}
@media (min-width: 640px) {
  body.tn-shopper:not(:has(.tn-wide-page)):not(:has(.home-search-band)) .sub-header-inner { max-width: 640px; }
}

/* ===== Desktop shell for shopper pages (layout .tn-shell; the homepage has its own .home-shell with the same numbers).
   1000-1279: menu 240 | 32 | content 640.  1280+: menu 240 | 32 | content 640 | 32 | right 300 (blank for now).
   Page wrappers are 672px with 16px side padding, so the content column pulls them out by 16px each side to land
   the content exactly where the homepage feed sits. Wide pages (.tn-wide-page, Browse) get menu + a flexible column. */
.tn-shell .home-nav-rail, .tn-shell-right { display: none; }
@media (min-width: 1000px) {
  .tn-shell { display: grid; grid-template-columns: 240px minmax(0, 640px); column-gap: 32px; align-items: start; max-width: 976px; margin: 0 auto; padding: 0 32px; }
  .tn-shell-main { grid-column: 2; min-width: 0; }
  .tn-shell-main > main, .tn-shell-main > .sub-header { margin-left: -16px; margin-right: -16px; }
  .tn-shell-main > .sub-header { border-bottom: 0; }
  .tn-shell .home-nav-rail { display: flex; grid-column: 1; grid-row: 1; position: sticky; top: 82px; margin-top: 12px; max-height: calc(100vh - 98px); overflow-y: auto; }
  body:has(.tn-shell) .top-strip { display: grid; grid-template-columns: 240px minmax(0, 640px); column-gap: 32px; padding-left: max(32px, calc(50% - 456px)); padding-right: max(32px, calc(50% - 456px)); }
  body:has(.tn-shell) .top-strip > :last-child { justify-self: end; }
}
@media (min-width: 1280px) {
  .tn-shell { grid-template-columns: 240px minmax(0, 640px) 300px; max-width: 1308px; }
  .tn-shell-right { display: block; grid-column: 3; }
  body:has(.tn-shell) .top-strip { grid-template-columns: 240px minmax(0, 640px) 300px; padding-left: max(32px, calc(50% - 622px)); padding-right: max(32px, calc(50% - 622px)); }
  body:has(.tn-shell) .top-strip > :last-child { grid-column: 3; }
}

/* Shopper pages other than the homepage (1000px+): the header search is always there and fills the space between
   the logo column and the bell/account, instead of matching the content column (Steve, 2026-11-02). */
@media (min-width: 1000px) {
  body:has(.tn-shell) .top-strip { grid-template-columns: 240px minmax(0, 1fr) auto; }
  body:has(.tn-shell) .top-strip > :last-child { grid-column: auto; }
  body:has(.tn-shell) .top-strip-search { display: flex; min-width: 0; }
  body:has(.tn-shell) .top-strip-search .home-search { width: 100%; }
  body:has(.tn-shell) .top-strip-search .home-search-field input { height: 46px; }
  body:has(.tn-shell) .top-strip-search .home-search-photo { width: 48px; height: 48px; }
}
/* 1280px+: every shopper page shows a right panel (layout default = Your stores), so Browse's grid stays in the 640 column. */
@media (min-width: 1280px) {
  body:has(.tn-shell) .top-strip { grid-template-columns: 240px minmax(0, 1fr) auto; }
  body:has(.tn-shell) .top-strip > :last-child { grid-column: auto; }
  /* Right panel on every shopper page: the default (Your stores) or the page's own; sticky like the homepage's. */
  .tn-shell-right .home-rail { display: flex; position: sticky; top: 82px; margin-top: 12px; }
}
/* Homepage search results (title bar "Looking for ...") on desktop: the left menu starts below the title bar instead of
   being pulled up beside the search, and the title lines up with the results column (bug fix 2026-11-02). */
@media (min-width: 1000px) {
  /* The menu starts right under the header, beside the search + title (like every other page); the title bar has no
     full-width divider, so nothing runs under the menu. */
  body:has(.home-search-band) .sub-header { padding-left: 32px; padding-right: 32px; border-bottom-color: transparent; background: transparent; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  body:has(.home-search-band) .sub-header-inner { max-width: 912px; padding-left: 272px; box-sizing: border-box; }
  body:has(.home-search-band):has(.sub-header) .home-shell .home-nav-rail { margin-top: -148px !important; top: 68px !important; }
}
@media (min-width: 1280px) {
  body:has(.home-search-band) .sub-header-inner { max-width: 1244px; padding-left: 272px; padding-right: 332px; box-sizing: border-box; }
  body:has(.home-search-band):has(.sub-header) .home-shell .home-nav-rail { margin-top: -69px !important; top: 82px !important; }
  body:has(.home-search-band):has(.sub-header) .home-shell .home-rail { margin-top: -69px !important; top: 82px !important; }
}
@media (min-width: 640px) and (max-width: 999px) {
  body:has(.home-search-band) .sub-header-inner { max-width: 640px; }
}

/* The ThriftyNifty wordmark for standalone pages: exactly the app header logo (46px bag, 28px word, 8px gap,
   word 2px lower beside the bag). Markup: <a class="tn-wordmark" href="/"><img ...mascot...><span>ThriftyNifty</span></a> */
.tn-wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: 'Fraunces', Georgia, serif; font-weight: 800; font-variation-settings: 'SOFT' 100, 'opsz' 144; font-size: 28px; line-height: 1; letter-spacing: 0.01em; color: var(--tn-logo); }
.tn-wordmark img { width: 46px; height: auto; }
.tn-wordmark span { position: relative; top: 2px; }

/* Date/time fields have a built-in minimum width in Chrome/Safari; let them shrink to their column instead of running off a phone screen. */
input[type="date"], input[type="datetime-local"], input[type="time"] { min-width: 0; max-width: 100%; }

/* File inputs: the browser's grey 'Choose File' button becomes a white secondary button (one style per role). */
input[type="file"] { font-family: inherit; font-size: 15px; color: var(--tn-ink-2); max-width: 100%; }
input[type="file"]::file-selector-button { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--tn-ink); background: #ffffff; border: 1px solid var(--tn-border); border-radius: 10px; padding: 8px 14px; margin-right: 10px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--tn-field); }

/* Press feedback (see public/js/tn-press.js). Shrink only on .tn-btn — other buttons may use transform for positioning,
   so they get a brief darken instead. .tn-pressed = the tap is leaving the page: dimmed and not tappable again. */
.tn-btn { transition: transform .08s ease, filter .08s ease, opacity .15s ease; }
.tn-btn:active { transform: scale(.97); }
button:not(:disabled):active, a.tn-btn:active, [role="button"]:active { filter: brightness(.92); }
.tn-pressed { opacity: .6 !important; pointer-events: none !important; }