/* ============================================================
   THE LINEUP APP — NAV + HOME + DENSITY redesign boards
   Supplemental components on system.css (v2 design system):
   tiered cards, branded placeholder, the Where-to-Go toggle,
   the settings gear, board chrome for before/after.
   ============================================================ */

/* ============================================================
   v2 SOUL — the editorial treatment (Stacy 6/14: paper-led, one navy beat)
   These are the standard for the whole set, not overrides.
   ============================================================ */
.paper-screen{ background:#FBF8F2 !important; }                 /* warm paper, not cold grey */
.grain::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); }
/* accent-FRAMED photographic hero — the signature v2 web panel move, app-scaled */
.vhero{ margin:0 16px; border-radius:18px; background:var(--accent); padding:8px; position:relative;
  box-shadow:0 14px 34px rgba(142,51,88,.22); }
.vhero .vphoto{ position:relative; border-radius:12px; overflow:hidden; height:208px;
  display:flex; align-items:flex-end; padding:15px;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(201,166,70,.4), transparent 55%),
    linear-gradient(170deg, #5A2B4A 0%, #2A1A3E 46%, #122742 100%); }
.vhero .vphoto.evt{ background:radial-gradient(120% 90% at 78% 12%, rgba(201,166,70,.4), transparent 55%), linear-gradient(170deg,#5A2B4A,#2A1A3E 46%,#122742); }
.vhero .vphoto.place{ background:radial-gradient(120% 90% at 80% 14%, rgba(201,166,70,.34), transparent 52%), linear-gradient(165deg,#5A3318,#23303F 80%); }
.vhero .vphoto .vsig{ position:absolute; top:13px; right:15px; color:rgba(240,180,142,.55); }
.vhero .vphoto .vsig svg{ width:34px; height:34px; }
.vhero .vkick{ font:500 10.5px/1 var(--micro); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-line); }
.vhero .vh{ font:600 27px/1.08 var(--serif); letter-spacing:-.015em; color:#fff; margin-top:8px; max-width:92%; }
.vhero .vmeta{ font:500 12.5px/1.3 var(--sans); color:rgba(255,255,255,.85); padding:10px 8px 4px; }
/* warm editorial card (replaces the cold hairline card on paper) */
.wcard{ background:#fff; border:1px solid #EDE4D4; border-radius:15px; overflow:hidden;
  box-shadow:0 2px 0 rgba(120,90,40,.04); }
/* confident colored sigil tile — the brand texture, NOT a grey placeholder */
.csig{ width:46px; height:46px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.csig svg{ width:26px; height:26px; }
.csig.sm{ width:40px; height:40px; } .csig.sm svg{ width:22px; height:22px; }
/* navy editorial band — the ONE navy beat per screen */
.vband{ margin:18px 0 0; background:linear-gradient(160deg,#13233D,#0C1B2E); padding:18px 18px 20px; position:relative; overflow:hidden; }
.vband .vbsig{ position:absolute; right:-10px; top:-6px; color:rgba(142,51,88,.4); }
.vband .vbsig svg{ width:96px; height:96px; }
.vband .vbk{ font:500 10px/1 var(--micro); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-line); }
.vband .vbh{ font:600 21px/1.18 var(--serif); color:#fff; margin-top:7px; max-width:80%; }
.vband .vbm{ font:400 13px/1.5 var(--sans); color:rgba(255,255,255,.66); margin-top:6px; }
.vband .vbcta{ display:inline-flex; align-items:center; gap:7px; margin-top:13px; font:500 12.5px/1 var(--sans); color:#fff;
  border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:9px 15px; }

/* ---------- the settings GEAR (top-right, replaces You tab) ---------- */
.gear{ width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--n400); }

/* ---------- TIERED CARDS — the density fix ---------- */
/* TIER 1 · featured image card (a FEW per screen, at the top) */
.feature{ border-radius:16px; overflow:hidden; border:1px solid var(--n100); background:var(--n0); }
.feature .fimg{ height:168px; position:relative; display:flex; align-items:flex-end; padding:13px; }
.feature .fimg .fwm{ position:absolute; top:12px; right:13px; opacity:.5; }
.feature .fimg .fwm svg{ width:30px; height:30px; }
.feature .fbody{ padding:12px 14px 13px; }
.feature .fkick{ font:500 10px/1 var(--micro); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.feature .ftitle{ font:600 18px/1.2 var(--serif); color:var(--n700); margin-top:5px; }
.feature .fmeta{ font:400 12.5px/1.4 var(--sans); color:var(--n400); margin-top:5px; }
/* a featured card whose title plate rides ON the image */
.feature .fimg .fover{ position:relative; z-index:2; }
.feature .fimg .fover .ftitle{ color:#fff; }
.feature .fimg .fover .fkick{ color:var(--accent-line); }

/* TIER 2 · COMPACT ROW (the workhorse — most items) */
.crow{ display:flex; gap:12px; padding:11px 14px; align-items:center; background:var(--n0); }
.crow + .crow{ border-top:1px solid var(--n75); }
.crow .cthumb{ width:50px; height:50px; flex:none; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.crow .cb{ flex:1; min-width:0; }
.crow .ct{ font:500 15px/1.25 var(--sans); color:var(--n700); }
.crow .cm{ font:400 12.5px/1.35 var(--sans); color:var(--n400); margin-top:2px; }
.crow .cact{ flex:none; color:var(--n200); }
.crow .cwhen{ flex:none; text-align:right; }
.crow .cwhen .cd{ font:600 13px/1 var(--serif); color:var(--n700); }
.crow .cwhen .ch{ font:400 11px/1.2 var(--sans); color:var(--n300); margin-top:3px; }

/* TIER 3 · text-only line (no thumbnail at all — the lightest) */
.tline{ display:flex; gap:12px; padding:10px 14px; align-items:baseline; background:var(--n0); }
.tline + .tline{ border-top:1px solid var(--n75); }
.tline .tt{ flex:1; font:500 14.5px/1.3 var(--sans); color:var(--n700); }
.tline .tw{ flex:none; font:400 12px/1.3 var(--sans); color:var(--n400); }

/* ---------- BRANDED PLACEHOLDER (photoless, match the web) ---------- */
/* fills a thumbnail or a feature image when there's no photo:
   accent-washed ground + the category sigil + (optional) τ */
.ph{ background:var(--accent-wash); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.ph svg{ width:46%; height:46%; opacity:.7; }
.ph.lg{ position:relative; }
.ph.lg .phtau{ position:absolute; top:11px; left:13px; font:600 13px/1 var(--serif); color:var(--accent-deep); opacity:.6; }
.ph.lg .phtau .sq{ display:inline-block; border:1.3px solid var(--accent-deep); border-radius:4px; width:19px; height:19px; line-height:17px; text-align:center; font-size:11px; }
/* category tints for placeholders (reuse the family washes) */
.ph.music{ background:var(--cat-music-wash); color:var(--cat-music-text); }
.ph.food{ background:var(--cat-food-wash); color:var(--cat-food-text); }
.ph.outdoors{ background:var(--cat-outdoors-wash); color:var(--cat-outdoors-text); }
.ph.arts{ background:var(--cat-arts-wash); color:var(--cat-arts-text); }
.ph.community{ background:var(--cat-community-wash); color:var(--cat-community-text); }

/* ---------- the WHERE TO GO / THINGS TO DO toggle (P/Q fix) ---------- */
/* a real segmented switch — obviously two selectable options, not a title */
.wtoggle{ display:inline-flex; background:var(--n50); border:1px solid var(--n100); border-radius:12px;
  padding:3px; gap:2px; }
.wtoggle a{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:9px;
  font:500 14px/1 var(--sans); color:var(--n400); text-decoration:none; }
.wtoggle a.on{ background:var(--n0); color:var(--n700); border:1px solid var(--n100);
  box-shadow:0 1px 2px rgba(7,14,26,.06); }
.wtoggle a svg{ width:16px; height:16px; }
/* the OLD oversized "title" version, for the before */
.wold{ font:600 26px/1.1 var(--serif); color:var(--n700); }
.wold .alt{ color:var(--n200); }

/* section header that's a real label, not a giant title */
.shead{ display:flex; align-items:baseline; justify-content:space-between; padding:0 18px; margin-bottom:9px; }
.shead .st{ font:500 11px/1 var(--micro); letter-spacing:.09em; text-transform:uppercase; color:var(--n300); }
.shead .more{ font:500 12px/1 var(--sans); color:var(--accent); text-decoration:none; }

/* ---------- settings sheet (the gear destination) ---------- */
.setsheet{ position:absolute; inset:0; background:var(--n25); display:flex; flex-direction:column; }
.setrow{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--n0); }
.setrow + .setrow{ border-top:1px solid var(--n75); }
.setrow .si{ width:32px; height:32px; flex:none; border-radius:9px; background:var(--n50);
  display:flex; align-items:center; justify-content:center; color:var(--n400); }
.setrow .sl{ flex:1; font:500 14.5px/1.2 var(--sans); color:var(--n700); }
.setrow .sv{ font:400 12.5px/1 var(--sans); color:var(--n300); }
.setgroup{ font:500 11px/1 var(--micro); letter-spacing:.09em; text-transform:uppercase; color:var(--n300);
  padding:18px 18px 8px; }

/* ---------- before/after board chrome ---------- */
.ba{ display:flex; gap:30px; flex-wrap:wrap; align-items:flex-start; margin-top:24px; }
.ba .bacol{ flex:1; min-width:300px; }
.ba .batag{ display:inline-flex; align-items:center; gap:7px; font:600 11px/1 var(--micro);
  letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:7px; margin-bottom:12px; }
.ba .batag.before{ background:#FBECEC; color:#A8412F; border:1px solid #EBC9C4; }
.ba .batag.after{ background:#E5F1EA; color:#1E6A48; border:1px solid #C4DECF; }

/* eyebrow-copy options table */
.eyebrow-opt{ background:#fff; border:1px solid #E3DFD4; border-radius:12px; padding:14px 16px; margin-bottom:11px; }
.eyebrow-opt .leaked{ font:500 10px/1 var(--micro); letter-spacing:.1em; text-transform:uppercase;
  color:#A8412F; text-decoration:line-through; }
.eyebrow-opt .arrow{ color:var(--n300); margin:0 8px; }
.eyebrow-opt .pick{ font:500 10px/1 var(--micro); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.eyebrow-opt .opt-head{ font:600 15px/1.3 var(--serif); color:var(--n700); margin:8px 0 4px; }
.eyebrow-opt .opt-sub{ font:400 13px/1.5 var(--sans); color:var(--n400); }