/* =========================================================
   GrowGrowLocal Content Engine — Design System
   Palette lifted from the "storefront glow-up" flyer:
   cream background, espresso-brown cards, coral accent.
   ========================================================= */

:root{
  --cream:        #f4e9de;
  --cream-soft:   #f8f0e7;
  --cream-deep:   #ecdccb;
  --espresso:     #2c1c14;
  --espresso-2:   #3c2a1e;
  --coral:        #e2734a;
  --coral-dark:   #c85a34;
  --coral-soft:   #f3b79a;
  --ink:          #2a2118;
  --ink-soft:     #6b5d51;
  --line:         #e2d2c1;
  --white:        #fffaf5;
  --success:      #6f8f5c;
  --warn:         #c9922f;
  --danger:       #b3492f;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 18px 40px -20px rgba(44, 28, 20, 0.35);
  --shadow-card: 0 10px 30px -18px rgba(44, 28, 20, 0.28);

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin: 0 0 .4em; color: var(--espresso); }
p{ margin: 0 0 1em; }

.italic-accent{ font-style: italic; color: var(--coral); font-weight: 500; }

/* ---------- Layout shells ---------- */
.app-shell{
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
@media (max-width: 900px){
  .app-shell{ grid-template-columns: 1fr; }
}

.sidebar{
  background: var(--espresso);
  color: var(--cream-soft);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
@media (max-width: 900px){
  .sidebar{ position: static; height: auto; }
}

.brand-mark{
  display:flex; align-items:center; gap:10px;
  margin-bottom: 30px;
  padding: 0 6px;
}
.brand-mark img{ width: 30px; height: 30px; }
.brand-mark .brand-text{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--cream-soft);
  font-weight: 600;
}
.brand-mark .brand-text .dot{ color: var(--coral); }

.sidebar nav{ display:flex; flex-direction:column; gap: 3px; margin-top: 6px; }
.side-link{
  display:flex; align-items:center; gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--cream-deep);
  font-size: .92rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.side-link i{ width: 18px; text-align:center; color: var(--coral-soft); }
.side-link:hover{ background: rgba(255,255,255,.06); color: var(--white); }
.side-link.active{ background: var(--coral); color: var(--white); }
.side-link.active i{ color: var(--white); }

.sidebar-footer{
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.side-user{
  display:flex; align-items:center; gap: 10px;
  padding: 8px 6px;
}
.side-user .avatar{
  width: 34px; height:34px; border-radius:50%;
  background: var(--coral); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; flex-shrink:0;
}
.side-user .who{ font-size:.8rem; line-height:1.25; overflow:hidden; }
.side-user .who .name{ color: var(--white); font-weight:600; }
.side-user .who .role{ color: var(--cream-deep); text-transform: capitalize; }
.logout-btn{
  margin-top: 10px; width:100%;
  background: rgba(255,255,255,.08); color: var(--cream-soft);
  border: 1px solid rgba(255,255,255,.14);
  padding: 9px; border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 600;
}
.logout-btn:hover{ background: rgba(255,255,255,.16); }
.sidebar-legal-links{
  margin-top: 12px; text-align:center; font-size: .72rem;
  display:flex; align-items:center; justify-content:center; gap:6px;
  color: rgba(255,255,255,.4);
}
.sidebar-legal-links a{ color: rgba(255,255,255,.55); text-decoration: underline; }
.sidebar-legal-links a:hover{ color: var(--white); }

.main-content{
  padding: 34px 40px 60px;
  /* Was capped at max-width:1280px, which left a large empty gap on the
     right of every page on wide/large monitors — the grid cell itself
     (.app-shell's 1fr column) grows to fill all space after the fixed
     260px sidebar, but this child was refusing to grow past 1280px even
     when the cell was much wider, and (being a plain block, not centered)
     just sat flush-left inside that wider cell. Removed the cap so
     width:100% actually fills the real available space on any screen size. */
  width: 100%;
  /* .app-shell is a CSS grid; a grid item's default min-width is `auto`,
     which means it refuses to shrink below its CONTENT's intrinsic
     min-content width (e.g. a long heading or an image-filled card grid).
     On mobile the grid collapses to a single 1fr column, but without this
     override that column silently stayed as wide as its widest content
     demanded (was rendering ~718px inside a 390px viewport) — causing the
     ENTIRE page to scroll/overflow horizontally with nothing visually
     "cut off" in a static screenshot, which is why this symptom is easy to
     miss without an actual overflow-width check. min-width:0 lets this grid
     item shrink to fit the real viewport so its own content can wrap/scale
     down instead of forcing the whole page wider. */
  min-width: 0;
}
@media (max-width: 640px){
  .main-content{ padding: 22px 16px 40px; }
}

.page-header{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}
.page-header .eyebrow{
  text-transform: uppercase; letter-spacing:.08em; font-size:.72rem;
  color: var(--coral-dark); font-weight:700; margin-bottom:6px;
}
.page-header h1{ margin:0; font-size: 2rem; }
.page-header p.sub{ color: var(--ink-soft); margin: 6px 0 0; max-width: 560px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 20px; border-radius: 999px; border: none;
  font-weight: 600; font-size: .88rem; transition: transform .12s, box-shadow .12s, background .15s;
  white-space: nowrap;
}
.btn-primary{ background: var(--espresso); color: var(--white); }
.btn-primary:hover{ background: var(--espresso-2); transform: translateY(-1px); }
.btn-coral{ background: var(--coral); color: #fff; }
.btn-coral:hover{ background: var(--coral-dark); transform: translateY(-1px); }
.btn-outline{ background: transparent; border: 1.5px solid var(--espresso); color: var(--espresso); }
.btn-outline:hover{ background: var(--espresso); color: #fff; }
.btn-ghost{ background: transparent; color: var(--ink-soft); border: 1.5px solid var(--line); }
.btn-ghost:hover{ border-color: var(--coral); color: var(--coral-dark); }
.btn-danger{ background: var(--danger); color: #fff; }
.btn-danger:hover{ background: #8f3a25; transform: translateY(-1px); }
.btn-sm{ padding: 7px 14px; font-size: .78rem; }
.btn-block{ width: 100%; }
.btn:disabled{ opacity:.5; cursor: not-allowed; transform:none; }

/* ---------- Cards ---------- */
.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.card-dark{
  background: linear-gradient(155deg, var(--espresso) 0%, var(--espresso-2) 100%);
  color: var(--cream-soft);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-soft);
}
.card-dark h3, .card-dark h2{ color: #fff; }

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 13px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase;
}
.pill-dot{ width:6px; height:6px; border-radius:50%; background: currentColor; }
.pill-coral{ background: rgba(226,115,74,.14); color: var(--coral-dark); }
.pill-success{ background: rgba(111,143,92,.15); color: var(--success); }
.pill-warn{ background: rgba(201,146,47,.16); color: var(--warn); }
.pill-danger{ background: rgba(179,73,47,.14); color: var(--danger); }
.pill-muted{ background: var(--cream-deep); color: var(--ink-soft); }
.pill-dark{ background: rgba(255,255,255,.12); color: #fff; }

/* ---------- Grids / stats ---------- */
.stat-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 16px; margin-bottom: 28px;
}
.stat-card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 20px; box-shadow: var(--shadow-card);
}
.stat-card .label{ font-size:.76rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing:.05em; font-weight:600; }
.stat-card .value{ font-family: var(--font-display); font-size: 2rem; color: var(--espresso); margin-top:4px; }
.stat-card .delta{ font-size: .78rem; color: var(--success); margin-top:2px; font-weight:600;}

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .grid-2, .grid-3{ grid-template-columns: 1fr; } }

/* Fixed 4-up mini-stat grid (client/index.html "This Month's Engagement"
   Likes/Comments/Shares/Saves cards) — was a hardcoded inline
   grid-template-columns:repeat(4,1fr) with no mobile breakpoint, which made
   all 4 cards extremely cramped on a phone. Drops to 2 columns under 640px. */
.stat-grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 28px; }
@media (max-width: 640px){ .stat-grid-4{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Forms ---------- */
.field{ margin-bottom: 16px; }
.field label{ display:block; font-size:.8rem; font-weight:600; color: var(--espresso); margin-bottom: 6px; }
.field .hint{ font-size:.74rem; color: var(--ink-soft); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=url], input[type=tel],
select, textarea{
  width: 100%; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--white);
  font-size: .9rem; color: var(--ink); transition: border-color .15s;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--coral); }
textarea{ resize: vertical; min-height: 90px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px){ .form-row{ grid-template-columns: 1fr; } }
.form-row-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 760px){ .form-row-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .form-row-3{ grid-template-columns: 1fr; } }

.checkbox-row{ display:flex; align-items:center; gap:8px; }
.checkbox-row input{ width:auto; }

/* ---------- Language picker (Create a Post > Style & Generate) ---------- */
/* Radio-style single-select checkboxes (only one language mode can be
   active at a time; default is English Only) — see renderLanguagePicker()/
   pickLanguage() in client/generate.html. */
.language-row{ display:flex; align-items:flex-start; gap:8px; padding:6px 0; cursor:pointer; }
.language-row input{ width:auto; margin-top:3px; flex-shrink:0; }
.language-row .language-row-label{ font-size:.85rem; font-weight:600; color: var(--ink); }
.language-row .language-row-desc{ font-size:.76rem; color: var(--ink-soft); font-weight:400; }

/* ---------- Tables ---------- */
/* Wraps every <table class="data-table"> so a wide table (many columns)
   scrolls horizontally WITHIN its own card on a narrow/phone screen instead
   of forcing the entire page to scroll sideways (the classic "this page
   doesn't fit on mobile" symptom). min-width on the table keeps columns
   from being crushed unreadably thin; the wrapper is what actually scrolls. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table{ width:100%; min-width:640px; border-collapse: collapse; }
.data-table th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--ink-soft); padding: 10px 14px; border-bottom: 1.5px solid var(--line);
}
.data-table td{ padding: 13px 14px; border-bottom: 1px solid var(--line); font-size:.87rem; vertical-align: middle; }
.data-table tr:last-child td{ border-bottom:none; }
.data-table tr:hover td{ background: var(--cream-soft); }

/* ---------- Modal ---------- */
.modal-overlay{
  position: fixed; inset:0; background: rgba(44,28,20,.5);
  display:flex; align-items:center; justify-content:center; padding: 20px;
  z-index: 200; backdrop-filter: blur(2px);
}
.modal{
  background: var(--white); border-radius: var(--radius-lg); padding: 26px;
  max-width: 560px; width:100%; max-height: 92vh; overflow-y:auto;
  box-shadow: var(--shadow-soft);
}
/* Wider variant (openModal(html, 'modal-wide')) — used for content-dense
   modals (offer editor, post detail) so fields can sit two-per-row instead
   of every field stacking one below another, cutting how much the modal
   itself needs to scroll on a normal laptop screen. Still full-width (and
   therefore single-column, via .form-row's own breakpoint) on narrow/mobile
   viewports since width stays 100% up to this max. */
.modal.modal-wide{ max-width: 840px; }
/* Slightly tighter vertical rhythm inside a wide modal — there's more
   width to spread fields across (via .form-row), so less height is needed
   per field to still read comfortably. */
.modal.modal-wide .field{ margin-bottom: 12px; }
.modal.modal-wide textarea{ min-height: 70px; }
.modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.modal-close{ background:none; border:none; font-size:1.3rem; color: var(--ink-soft); }

/* ---------- Post detail modal (client/calendar.html) — puts the image/
   status/metrics column beside the editable fields instead of stacking
   everything in one long vertical column, so the wide modal (.modal-wide)
   actually cuts down how much it needs to scroll. Stacks back to one
   column on narrow/mobile widths. ---------- */
.post-detail-cols{ display:grid; grid-template-columns: 220px 1fr; gap: 20px; align-items:start; }
@media (max-width: 640px){ .post-detail-cols{ grid-template-columns: 1fr; } }

/* ---------- Video Ad review modal (client/video-ads.html) — reuses the
   same .post-detail-cols/.post-detail-fields two-column pattern as the
   post detail modal above, but the media itself is a VERTICAL/PORTRAIT
   9:16 video (see js/config.js's cropImageToAspectRatio() — the finished
   video is requested at 9:16, matching how people actually hold their
   phones for Instagram Reels, Facebook Stories/Reels, and TikTok), not a
   square post thumbnail. The base 220px-wide sidebar column (sized for a
   square post thumbnail) made a genuinely tall 9:16 video look squashed/
   cropped rather than a proper tall phone-style player, so this specific
   modal's media column gets its own .video-ad-cols variant — a bit wider
   than 220px and with the <video> element's own aspect-ratio locked to
   9/16 so it always renders as a true vertical clip — instead of changing
   the shared 220px column every other post-detail caller still relies on
   for a square/portrait image. ---------- */
.video-ad-cols{ grid-template-columns: 260px 1fr; }
.video-ad-cols .post-detail-media video{ width:100%; max-width:260px; aspect-ratio: 9/16; object-fit: cover; margin: 0 auto; display:block; }
@media (max-width: 640px){ .video-ad-cols{ grid-template-columns: 1fr; } .video-ad-cols .post-detail-media video{ max-width:220px; } }

/* ---------- Emoji picker (client/profile.html) ---------- */
.emoji-pick-grid{
  display:grid; grid-template-columns: repeat(8, 1fr); gap:6px;
  max-height: 320px; overflow-y:auto;
}
@media (max-width: 480px){ .emoji-pick-grid{ grid-template-columns: repeat(6, 1fr); } }
.emoji-pick-btn{
  background: var(--cream-soft); border: 1.5px solid transparent; border-radius: var(--radius-sm);
  font-size: 1.5rem; line-height:1; padding: 8px 0; transition: border-color .12s, background .12s;
}
.emoji-pick-btn:hover{ background: var(--cream-deep); border-color: var(--coral); }

/* ---------- Brand mark preview (client/profile.html) — wide box so an
   uploaded logo/icon reads at a useful size instead of a tiny thumbnail ---------- */
.brand-mark-box{
  width:100%; min-height:150px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  margin-bottom: 4px;
}

/* ---------- Post / asset cards ---------- */
.post-card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow:hidden; box-shadow: var(--shadow-card); display:flex; flex-direction:column;
}
.post-card .thumb{ aspect-ratio: 1/1; width:100%; object-fit:cover; background: var(--cream-deep); }
.post-card .body{ padding: 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post-card .cap{ font-size: .83rem; color: var(--ink-soft); max-height: 4.4em; overflow:hidden; }
.post-card .foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; }

.asset-card{ position: relative; border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--line); cursor:pointer; }
.asset-card img{ aspect-ratio:1/1; object-fit:cover; width:100%; }
.asset-card .tag-badge{ position:absolute; bottom:6px; left:6px; }
.asset-card.selected{ outline: 3px solid var(--coral); }
/* Numbered badge shown top-right of an asset-card when multi-select is in
   use (Create a Post > Choose Real Photo(s)) — shows the pick order (1-4)
   so it's clear which photos are selected and in what order they'll be
   sent to the AI as reference images. */
.asset-card .pick-badge{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%;
  background: var(--coral); color:#fff; font-size:.78rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* ---------- Style template picker (Create a Post > Style & Generate) ---------- */
/* Each card shows one of the 10 curated example ad images the AI should
   take visual inspiration (layout/mood/color/typography energy) from — NOT
   an exact copy target. See js/config.js's STYLE_TEMPLATES + the
   style-reference-image branch in buildOfferPostPrompt(). */
.style-template-card{
  position: relative; border-radius: var(--radius-sm); overflow:hidden;
  border:2px solid var(--line); cursor:pointer; background: var(--white);
  transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease;
}
/* Zooms the whole card up on hover (transform doesn't affect layout, so
   neighboring cards don't shift — this just visually overlaps them) so the
   client can actually make out the layout/typography/color details in a
   small grid thumbnail before picking it. A higher z-index + shadow lifts
   the zoomed card above its neighbors so the enlarged image isn't clipped
   underneath them. Scoped to hover (not touch) since there's no hover
   state on a phone anyway — tapping still just selects normally there. */
/* Only applies on devices with real hover capability (mouse/trackpad) — on
   a touchscreen, :hover can trigger (and visually stick) on tap instead of
   a real pointer hover, which would otherwise balloon a card to ~2x size
   and overlap the page layout until the client taps elsewhere. Tapping
   still selects the card normally on touch either way. */
@media (hover: hover) and (pointer: fine){
  .style-template-card:hover{
    transform: scale(1.9);
    z-index: 30;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    border-color: var(--coral);
  }
  .style-template-card.upload-own:hover{
    transform: none;
    z-index: auto;
    box-shadow: none;
    border-color: var(--line);
  }
}
.style-template-card img{ aspect-ratio:4/5; object-fit:cover; width:100%; display:block; }
.style-template-card .style-template-label{
  padding:8px 10px; font-size:.78rem; font-weight:600; color: var(--ink);
  line-height:1.25;
}
.style-template-card.selected{ border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.style-template-card .style-template-check{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  background: var(--coral); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; box-shadow:0 1px 4px rgba(0,0,0,.25);
}
/* "Upload your own style example" card — same footprint as the template
   cards but a dashed upload affordance instead of a photo. */
.style-template-card.upload-own{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; aspect-ratio:4/5; border-style:dashed; color: var(--ink-soft); text-align:center; padding:10px;
}
.style-template-card.upload-own i{ font-size:1.4rem; color: var(--coral-dark); }
.style-template-card.upload-own img{ aspect-ratio:auto; }

/* ---------- Login ---------- */
.login-wrap{
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 15% 10%, var(--cream-soft), var(--cream) 60%);
  padding: 20px;
}
.login-card{
  width: 100%; max-width: 420px; background: var(--white);
  border-radius: var(--radius-lg); padding: 40px 34px;
  box-shadow: var(--shadow-soft); border: 1px solid var(--line);
}
.login-brand{ display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom: 22px; }
.login-brand img{ width: 34px; }
.login-brand span{ font-family: var(--font-display); font-size: 1.35rem; color: var(--espresso); }
.login-brand span .dot{ color: var(--coral); }
.login-tab-row{ display:flex; gap:6px; background: var(--cream-soft); padding:5px; border-radius: 999px; margin-bottom: 22px; }
.login-tab{ flex:1; text-align:center; padding: 8px 0; border-radius: 999px; font-size:.8rem; font-weight:600; color: var(--ink-soft); border:none; background:none; cursor:pointer; font-family: inherit; }
.login-tab.active{ background: var(--espresso); color:#fff; }
.demo-creds{ background: var(--cream-soft); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .76rem; color: var(--ink-soft); margin-top: 18px; line-height:1.6; }
.demo-creds b{ color: var(--espresso); }
.login-error{ background: rgba(179,73,47,.1); color: var(--danger); border-radius: var(--radius-sm); padding: 10px 14px; font-size:.82rem; margin-bottom: 14px; display:none; }

/* ---------- Legal pages (Privacy Policy / Terms of Service) ---------- */
.legal-wrap{
  min-height: 100vh;
  background: var(--cream);
  padding: 0 0 60px;
}
.legal-topbar{
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding: 26px 20px; border-bottom: 1px solid var(--line);
  background: var(--white);
}
.legal-topbar img{ width: 30px; }
.legal-topbar span{ font-family: var(--font-display); font-size: 1.2rem; color: var(--espresso); }
.legal-topbar span .dot{ color: var(--coral); }
.legal-card{
  max-width: 820px; margin: 36px auto 0; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 40px 44px 50px; box-shadow: var(--shadow-card);
}
@media (max-width: 640px){
  .legal-card{ padding: 28px 20px 36px; margin-top: 20px; }
}
.legal-card h1{ font-size: 1.8rem; margin-bottom: 6px; }
.legal-updated{ color: var(--ink-soft); font-size: .82rem; margin-bottom: 28px; }
.legal-card h2{ font-size: 1.15rem; margin-top: 34px; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 24px; }
.legal-card h2:first-of-type{ border-top: none; padding-top: 0; }
.legal-card h3{ font-size: .98rem; margin-top: 18px; color: var(--espresso-2); }
.legal-card p, .legal-card li{ color: var(--ink); font-size: .93rem; line-height: 1.7; }
.legal-card ul, .legal-card ol{ margin: 0 0 1em; padding-left: 22px; }
.legal-card a{ color: var(--coral-dark); text-decoration: underline; }
.legal-card strong{ color: var(--espresso); }
.legal-nav-links{
  max-width: 820px; margin: 0 auto; padding: 0 44px; display:flex; gap:18px; font-size:.82rem;
}
@media (max-width: 640px){ .legal-nav-links{ padding: 0 20px; } }
.legal-nav-links a{ color: var(--ink-soft); text-decoration: underline; }
.legal-callout{
  background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: .86rem; color: var(--ink-soft); margin: 16px 0;
}
.login-footer-links{
  text-align:center; margin-top: 18px; font-size: .78rem; color: var(--ink-soft);
}
.login-footer-links a{ color: var(--ink-soft); text-decoration: underline; }

/* ---------- Calendar ---------- */
.cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-day-label{ text-align:center; font-size:.7rem; font-weight:700; color: var(--ink-soft); text-transform:uppercase; padding-bottom:4px; }
.cal-cell{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-sm);
  min-height: 96px; padding: 8px; font-size:.75rem; position:relative;
  /* .cal-grid is repeat(7, 1fr) — each .cal-cell is a grid item whose
     default min-width is `auto`, which sizes it to fit its own content's
     min-content width. .cal-post-chip uses white-space:nowrap (so long
     offer titles don't wrap mid-word), and an unbreakable line of text
     can't shrink below its own full width — so a single day with a long
     offer title/multiple chips was forcing JUST THAT ONE grid column much
     wider than the other 6 (measured: one column blew out to 144px while
     its neighbors were squeezed to ~32px), distorting the whole week's
     alignment even though the grid's total width still matched the
     viewport. min-width:0 + overflow:hidden let the cell actually shrink
     to its fair 1fr share; the chip's own overflow:hidden/text-overflow:
     ellipsis then correctly truncates long titles within that width
     instead of blowing the column out. */
  min-width: 0; overflow: hidden;
}
.cal-cell.empty{ background: transparent; border:none; }
.cal-cell.today{ border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); }
.cal-cell.today .date-num{ color: var(--coral-dark); }
.cal-cell .date-num{ font-weight:700; color: var(--ink-soft); font-size:.72rem; }
.cal-post-chip{
  margin-top:5px; padding:4px 7px; border-radius:7px; font-size:.68rem; font-weight:600;
  background: rgba(226,115,74,.15); color: var(--coral-dark); cursor:pointer; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.cal-post-chip.published{ background: rgba(111,143,92,.16); color: var(--success); }
.cal-post-chip.scheduled{ background: rgba(201,146,47,.16); color:var(--warn); }
/* The 7 fixed 1fr columns never literally overflow (they always sum to the
   container width), but with no breakpoint at all every cell got crushed to
   ~45px wide with a 96px min-height on a phone — hard to read the date
   number or tap a post chip. Shrinks cell height/padding/text instead of
   abandoning the 7-column week layout. */
@media (max-width: 640px){
  .cal-grid{ gap: 4px; }
  .cal-day-label{ font-size:.58rem; padding-bottom:2px; }
  .cal-cell{ min-height: 60px; padding: 4px 3px; font-size:.62rem; }
  .cal-cell .date-num{ font-size:.62rem; }
  .cal-post-chip{ margin-top:3px; padding:2px 3px; font-size:.56rem; border-radius:5px; }
}

/* ---------- Steps (post generator) ---------- */
.step-row{ display:flex; align-items:center; gap: 10px; margin-bottom: 26px; flex-wrap:wrap; }
.step-pill{
  display:flex; align-items:center; gap:8px; padding: 8px 16px; border-radius:999px;
  background: var(--cream-soft); font-size:.8rem; font-weight:600; color: var(--ink-soft);
}
.step-pill .num{
  width:20px; height:20px; border-radius:50%; background: var(--line); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; font-size:.7rem;
}
.step-pill.active{ background: var(--espresso); color:#fff; }
.step-pill.active .num{ background: var(--coral); color:#fff; }
.step-pill.done .num{ background: var(--success); color:#fff; }

.upload-zone{
  border: 2px dashed var(--line); border-radius: var(--radius-md); padding: 30px;
  text-align:center; color: var(--ink-soft); cursor:pointer; transition: border-color .15s, background .15s;
}
.upload-zone:hover{ border-color: var(--coral); background: var(--cream-soft); }
.upload-zone i{ font-size: 1.7rem; color: var(--coral); margin-bottom:8px; display:block; }

.quota-bar-track{ height:8px; border-radius:999px; background: var(--cream-deep); overflow:hidden; }
.quota-bar-fill{ height:100%; background: var(--coral); border-radius:999px; transition: width .3s; }

.empty-state{ text-align:center; padding: 50px 20px; color: var(--ink-soft); }
.empty-state i{ font-size: 2.2rem; color: var(--coral-soft); margin-bottom: 12px; display:block; }

/* ---------- AI generation loading overlay (client/generate.html Step 3) ---------- */
/* Full-panel overlay shown while an AI image+caption request is in flight —
   this call routinely takes 20-60+ seconds (longer still for the dual
   English+Spanish mode, which runs two full generations in parallel), so a
   clear "still working" state is needed to stop an impatient client from
   clicking Generate again and firing a second, wasted paid API call. Covers
   just the Step 3 card (not the whole page) so the step context stays
   visible underneath a dimmed backdrop. */
.gen-loading-overlay{
  position: absolute; inset: 0; z-index: 60;
  background: rgba(248, 240, 231, 0.94);
  border-radius: var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 30px 20px;
}
.gen-spinner{
  width: 54px; height: 54px; border-radius: 50%;
  border: 5px solid var(--cream-deep); border-top-color: var(--coral);
  animation: gglSpin 0.9s linear infinite;
  margin-bottom: 18px;
}
@keyframes gglSpin{ to{ transform: rotate(360deg); } }
.gen-loading-title{ font-family: var(--font-display); font-size: 1.15rem; color: var(--espresso); margin-bottom: 6px; }
.gen-loading-msg{ font-size: .86rem; color: var(--ink-soft); max-width: 380px; line-height: 1.5; }
.gen-loading-bar-track{
  width: 220px; height: 6px; border-radius: 999px; background: var(--cream-deep);
  overflow:hidden; margin: 18px 0 4px;
}
.gen-loading-bar-fill{
  height:100%; width: 30%; border-radius: 999px;
  background: linear-gradient(90deg, var(--coral-soft), var(--coral));
  animation: gglIndeterminate 1.6s ease-in-out infinite;
}
@keyframes gglIndeterminate{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(420%); }
}
.gen-loading-elapsed{ font-size: .72rem; color: var(--ink-soft); margin-top: 10px; opacity: .8; }

.toast{
  position: fixed; bottom: 24px; right: 24px; background: var(--espresso); color:#fff;
  padding: 13px 20px; border-radius: var(--radius-sm); font-size:.85rem; box-shadow: var(--shadow-soft);
  z-index: 400; opacity:0; transform: translateY(10px); transition: opacity .25s, transform .25s;
}
.toast.show{ opacity:1; transform: translateY(0); }

.section-title-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px; }

.tag-chip{ display:inline-block; background: var(--cream-deep); color: var(--ink-soft); font-size:.7rem; padding:3px 9px; border-radius: 999px; margin: 2px 4px 2px 0; }

hr.divider{ border:none; border-top: 1px solid var(--line); margin: 22px 0; }

.mobile-topbar{ display:none; }
@media (max-width: 900px){
  .mobile-topbar{
    display:flex; align-items:center; justify-content:space-between;
    background: var(--espresso); color:#fff; padding: 14px 18px; position: sticky; top:0; z-index: 50;
  }
  .mobile-topbar .brand-text{ font-family: var(--font-display); font-size:1.05rem; }
  .sidebar{ display:none; }
  .sidebar.open{ display:flex; position: fixed; inset: 0 20% 0 0; z-index: 100; height:100vh; }
}