/* ============================================================
   THE LINEUP APP v2 — design boards
   System CSS: tokens, type scale, phone chrome, app components,
   board (annotation) chrome.
   Market shown: Chattanooga (CTL) · accent Mountain Laurel Plum
   ============================================================ */

/* ---------- fonts ---------- */
@font-face { src: url('../fonts/FormaDJRText-Regular.woff2') format('woff2'); font-family:'Forma DJR Text'; font-weight:400; font-style:normal; }
@font-face { src: url('../fonts/FormaDJRText-Italic.woff2') format('woff2'); font-family:'Forma DJR Text'; font-weight:400; font-style:italic; }
@font-face { src: url('../fonts/FormaDJRText-Medium.woff2') format('woff2'); font-family:'Forma DJR Text'; font-weight:500; font-style:normal; }
@font-face { src: url('../fonts/FormaDJRText-Bold.woff2') format('woff2'); font-family:'Forma DJR Text'; font-weight:700; font-style:normal; }
@font-face { src: url('../fonts/FormaDJRMicro-Regular.woff2') format('woff2'); font-family:'Forma DJR Micro'; font-weight:400; font-style:normal; }
@font-face { src: url('../fonts/FormaDJRMicro-Medium.woff2') format('woff2'); font-family:'Forma DJR Micro'; font-weight:500; font-style:normal; }
@font-face { src: url('../fonts/FormaDJRDisplay-Regular.woff2') format('woff2'); font-family:'Forma DJR Display'; font-weight:400; font-style:normal; }
@font-face { src: url('../fonts/FormaDJRDisplay-Medium.woff2') format('woff2'); font-family:'Forma DJR Display'; font-weight:500; font-style:normal; }

/* ---------- tokens ---------- */
:root{
  /* navy ramp (shared web+app color system) */
  --n0:#FFFFFF; --n25:#FAFBFC; --n50:#F4F5F7; --n75:#E8E9EC; --n100:#D6D8DC;
  --n200:#A4A8B0; --n300:#6E7485; --n400:#475068; --n500:#2E3A52;
  --n600:#1C2840; --n700:#0F1D35; --n800:#0C1B2E; --n900:#070E1A;

  /* CTL market accent — Mountain Laurel Plum */
  --accent:#8E3358;
  --accent-deep:#6A2542;
  --accent-wash:#F7EDF2;
  --accent-line:#E3C7D3;

  /* live-status green (Open Now / Happening Now) */
  --live:#1E7A52; --live-wash:#E9F5EE;

  /* sponsor / featured grammar */
  --gold:#9A7B2D;           /* AA text-safe gold */
  --gold-bright:#C9A646;    /* badge fill, decorative */
  --paper:#FBF8F2;          /* sponsor-unit warm paper */
  --paper-line:#E9E0CC;

  /* category families (from shared color system) */
  --cat-music:#8B5CF6;     --cat-music-text:#4C1D95;  --cat-music-wash:#EDE9FE;
  --cat-food:#E67E22;      --cat-food-text:#7A4510;   --cat-food-wash:#FEF3E2;
  --cat-outdoors:#059669;  --cat-outdoors-text:#064E3B;--cat-outdoors-wash:#ECFDF5;
  --cat-arts:#0891B2;      --cat-arts-text:#164E63;   --cat-arts-wash:#E0F7FA;
  --cat-community:#2563EB; --cat-community-text:#1E3A5F;--cat-community-wash:#EFF6FF;

  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Forma DJR Text','Helvetica Neue',sans-serif;
  --micro:'Forma DJR Micro','Forma DJR Text',sans-serif;
  --display:'Forma DJR Display','Forma DJR Text',sans-serif;
}

/* ============================================================
   TYPE SCALE — the deliberate ramp (answers “too big / wrong
   weight”). Every in-app text role maps to exactly one class.
   ============================================================ */
.t-screen   { font:600 21px/1.15 var(--serif); letter-spacing:-0.01em; color:var(--n700); } /* screen title (was 24 system-bold) */
.t-date     { font:600 26px/1.1 var(--serif); letter-spacing:-0.015em; color:var(--n700); } /* Today masthead date — the one big serif moment */
.t-section  { font:500 11px/1 var(--micro); letter-spacing:0.09em; text-transform:uppercase; color:var(--n300); } /* section label */
.t-card     { font:500 15px/1.25 var(--sans); color:var(--n700); }   /* card / row title (working UI = sans) */
.t-card-ed  { font:600 17px/1.25 var(--serif); color:var(--n700); }  /* editorial pick title (brand voice = serif) */
.t-body     { font:400 14px/1.45 var(--sans); color:var(--n500); }
.t-meta     { font:400 12.5px/1.35 var(--sans); color:var(--n300); }
.t-meta-md  { font:500 12.5px/1.35 var(--sans); color:var(--n400); }
.t-chip     { font:500 12.5px/1 var(--sans); }
.t-tab      { font:500 10px/1 var(--micro); letter-spacing:0.01em; }
.t-button   { font:500 14px/1 var(--sans); }
.t-voice    { font:400 14.5px/1.5 var(--serif); font-style:italic; color:var(--n400); } /* the editor's aside */

/* ============================================================
   PHONE CHROME
   ============================================================ */
.phone{
  width:393px; flex:none; background:var(--n900); border-radius:54px;
  padding:10px; box-shadow:0 30px 80px rgba(7,14,26,.28), 0 4px 16px rgba(7,14,26,.18);
}
.screen{
  position:relative; background:var(--n25); border-radius:44px; overflow:hidden;
  display:flex; flex-direction:column; height:852px;
}
.statusbar{
  height:54px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:18px 30px 0; font:600 14px/1 var(--sans); color:var(--n700);
}
.statusbar .island{ position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:120px; height:34px; border-radius:18px; background:var(--n900); }
.statusbar.on-dark{ color:#fff; }
.sb-icons{ display:flex; gap:5px; align-items:center; }

.content{ flex:1; overflow:hidden; position:relative; }

/* app bar */
.appbar{ padding:6px 18px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.appbar .actions{ display:flex; gap:14px; align-items:center; color:var(--n400); }

/* mode chip — the living Local/Visiting mode */
.mode-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--accent-line); background:var(--accent-wash);
  color:var(--accent-deep); border-radius:999px; padding:6px 12px;
  font:500 12.5px/1 var(--sans);
}
.mode-chip .dot{ width:6px; height:6px; border-radius:3px; background:var(--accent); }
.mode-chip .caret{ opacity:.55; font-size:10px; }

/* ---------- tab bar ---------- */
.tabbar{
  flex:none; background:var(--n700); display:flex; padding:10px 8px 26px;
  border-top:1px solid var(--n600);
}
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:rgba(255,255,255,.48); text-decoration:none; }
.tab svg{ width:23px; height:23px; }
.tab .t-tab{ color:inherit; }
.tab.active{ color:#fff; }
.tab .pip{ width:4px; height:4px; border-radius:2px; background:transparent; }
.tab.active .pip{ background:var(--accent); box-shadow:0 0 6px var(--accent); }

/* ============================================================
   APP COMPONENTS
   ============================================================ */
.pad{ padding:0 18px; }
section.block{ margin-top:18px; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 18px; margin-bottom:9px; }
.sec-head .more{ font:500 12px/1 var(--sans); color:var(--accent); text-decoration:none; }

/* hairline card — no shadows, ever */
.card{ background:var(--n0); border:1px solid var(--n100); border-radius:14px; overflow:hidden; }

/* event / place row */
.row{ display:flex; gap:12px; padding:12px 14px; align-items:flex-start; background:var(--n0); }
.row + .row{ border-top:1px solid var(--n75); }
.row .sig{ width:34px; height:34px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.row .sig svg{ width:20px; height:20px; }
.row .rb{ flex:1; min-width:0; }
.row .save{ flex:none; color:var(--n200); padding-top:2px; }
.row .save.on{ color:var(--accent); }

/* chips */
.chiprow{ display:flex; gap:8px; padding:0 18px; overflow-x:hidden; }
.chip{ flex:none; border:1px solid var(--n100); background:var(--n0); color:var(--n400);
  border-radius:999px; padding:8px 13px; font:500 12.5px/1 var(--sans); }
.chip.on{ background:var(--n700); border-color:var(--n700); color:#fff; }
.chip.live{ display:inline-flex; align-items:center; gap:6px; color:var(--live); border-color:#BBDCC9; background:var(--live-wash); }
.chip.live .dot{ width:6px; height:6px; border-radius:3px; background:var(--live); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* date strip (chip-strip calendar) */
.datestrip{ display:flex; gap:8px; padding:0 18px; }
.day{ flex:none; width:52px; border:1px solid var(--n100); background:var(--n0); border-radius:12px;
  padding:8px 0 9px; text-align:center; }
.day .dw{ font:500 10px/1 var(--micro); letter-spacing:.08em; color:var(--n300); text-transform:uppercase; }
.day .dn{ font:600 17px/1.2 var(--serif); color:var(--n700); }
.day.on{ background:var(--n700); border-color:var(--n700); }
.day.on .dw{ color:rgba(255,255,255,.6); } .day.on .dn{ color:#fff; }

/* horizontal rail */
.rail{ display:flex; gap:12px; padding:0 18px; overflow:hidden; }
.rail .card{ flex:none; width:248px; }

/* tonight card art block */
.art{ height:108px; position:relative; display:flex; align-items:flex-end; padding:10px 12px; }
.art .sigwm{ position:absolute; top:10px; right:12px; opacity:.5; }
.art .sigwm svg{ width:30px; height:30px; }
.cardpad{ padding:11px 13px 13px; }

/* interest signal — quiet, pull-not-push */
.signal{ display:inline-flex; align-items:center; gap:7px; color:var(--accent-deep);
  font:500 12.5px/1.3 var(--sans); }
.signal .faces{ display:inline-flex; }
.face{ width:20px; height:20px; border-radius:10px; border:1.5px solid #fff;
  font:600 9px/17px var(--sans); color:#fff; text-align:center; }
.face + .face{ margin-left:-6px; }
.f1{ background:#5E9A88; } .f2{ background:#475068; } .f3{ background:#B0763B; } .f4{ background:#8E3358; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:11px; padding:13px 16px; font:500 14px/1 var(--sans); text-decoration:none; }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-quiet{ border:1px solid var(--n100); background:var(--n0); color:var(--n700); }
.btn-row{ display:flex; gap:10px; padding:0 18px; }
.btn-row .btn{ flex:1; }

/* SPONSOR unit — the magazine-ad grammar: warm paper, hairline,
   always labeled, never disguised as editorial */
.sponsor{ background:var(--paper); border:1px solid var(--paper-line); border-radius:14px; }
.sponsor-label{ display:flex; align-items:center; gap:8px; padding:10px 13px 0;
  font:500 9.5px/1 var(--micro); letter-spacing:.12em; color:var(--gold); text-transform:uppercase; }
.sponsor-label::after{ content:""; flex:1; height:1px; background:var(--paper-line); }

/* FEATURED badge — same product as web's gold badge */
.feat{ display:inline-flex; align-items:center; gap:4px; background:var(--gold-bright);
  color:#3D300E; border-radius:6px; padding:3.5px 7px;
  font:500 9.5px/1 var(--micro); letter-spacing:.1em; text-transform:uppercase; }

/* live status text */
.open-now{ color:var(--live); font-weight:500; }

/* proposal card (the differentiator) */
.proposal{ border:1px solid var(--n100); border-radius:16px; background:var(--n0); overflow:hidden; }
.proposal .phead{ background:var(--n700); color:#fff; padding:14px 16px; }
.opt{ display:flex; align-items:center; gap:11px; padding:12px 14px; }
.opt + .opt{ border-top:1px solid var(--n75); }
.opt .bar{ position:relative; flex:1; height:34px; border-radius:9px; background:var(--n50); overflow:hidden; }
.opt .fill{ position:absolute; inset:0 auto 0 0; background:var(--accent-wash); border-right:2px solid var(--accent); }
.opt .ol{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 11px;
  font:500 13px/1 var(--sans); color:var(--n700); }

/* segmented control */
.seg{ display:flex; background:var(--n50); border:1px solid var(--n75); border-radius:11px; padding:3px; margin:0 18px; }
.seg a{ flex:1; text-align:center; padding:8px 0; border-radius:8px; font:500 13px/1 var(--sans); color:var(--n300); text-decoration:none; }
.seg a.on{ background:var(--n0); color:var(--n700); border:1px solid var(--n100); }

/* avatars row */
.avs{ display:flex; }
.avs .face{ width:26px; height:26px; border-radius:13px; font-size:10.5px; line-height:23px; }

/* list inset wrapper */
.inset{ margin:0 18px; }

/* push notification mock */
.push{ background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid var(--n100);
  border-radius:16px; padding:12px 14px; display:flex; gap:11px; align-items:flex-start; }

/* fade hint at bottom of scrollable content */
.fade{ position:absolute; left:0; right:0; bottom:0; height:46px; pointer-events:none;
  background:linear-gradient(180deg, rgba(250,251,252,0), rgba(250,251,252,.9)); }

/* ============================================================
   BOARD CHROME (around the phones)
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }
body{ background:#F2EFE9; color:var(--n700); font:400 15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased; }
.bnav{ position:sticky; top:0; z-index:50; background:rgba(15,29,53,.97); padding:13px 28px;
  display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.bnav .wm{ color:#fff; font:600 14px/1 var(--serif); margin-right:14px; }
.bnav .wm .tau{ display:inline-block; border:1.5px solid #fff; border-radius:4px;
  width:20px; height:20px; text-align:center; line-height:18px; font:600 12px/18px var(--serif); margin-right:7px; vertical-align:-4px;}
.bnav a{ color:rgba(255,255,255,.62); text-decoration:none; font:500 12.5px/1 var(--sans);
  padding:7px 10px; border-radius:7px; }
.bnav a.on, .bnav a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.bwrap{ max-width:1240px; margin:0 auto; padding:48px 28px 90px; }
.bhead{ max-width:760px; margin-bottom:8px; }
.bkick{ font:500 11px/1 var(--micro); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
h1{ font:600 40px/1.1 var(--serif); letter-spacing:-0.015em; margin-bottom:14px; }
.bsub{ font:400 17px/1.55 var(--sans); color:var(--n400); max-width:64ch; }
.board-row{ display:flex; gap:44px; align-items:flex-start; margin-top:44px; }
.notes{ flex:1; min-width:300px; position:sticky; top:84px; }
.notes h2{ font:600 22px/1.2 var(--serif); margin-bottom:6px; }
.notes .nsub{ color:var(--n400); font-size:14px; margin-bottom:18px; }
.note{ background:#fff; border:1px solid #E3DFD4; border-radius:12px; padding:14px 16px; margin-bottom:11px; }
.note b{ font-weight:500; color:var(--n700); display:block; margin-bottom:3px; font-size:13.5px; }
.note p{ font-size:13px; color:var(--n400); line-height:1.5; }
.note .pin{ display:inline-block; font:600 10px/16px var(--sans); width:16px; height:16px; text-align:center;
  background:var(--accent); color:#fff; border-radius:8px; margin-right:6px; vertical-align:1px; }
.callout{ position:absolute; z-index:5; }
.callout .pin{ display:block; font:600 10px/17px var(--sans); width:17px; height:17px; text-align:center;
  background:var(--accent); color:#fff; border-radius:9px; border:1.5px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.status{ display:inline-flex; align-items:center; gap:5px; border-radius:6px; padding:3.5px 8px;
  font:500 10px/1 var(--micro); letter-spacing:.09em; text-transform:uppercase; margin-right:5px; }
.st-built{ background:#E5F1EA; color:#1E6A48; border:1px solid #C4DECF; }
.st-restyle{ background:#FBF2DC; color:#8A6A1B; border:1px solid #EBDBB0; }
.st-v2{ background:var(--accent-wash); color:var(--accent-deep); border:1px solid var(--accent-line); }
.phones{ display:flex; gap:36px; flex-wrap:wrap; }
.phonecap{ text-align:center; margin-top:14px; font:500 12px/1.4 var(--micro); letter-spacing:.08em;
  text-transform:uppercase; color:var(--n300); }
@media (max-width:1080px){ .board-row{ flex-direction:column; } .notes{ position:static; } }