/*
 * Village Square — feed-first layout (FEATURE_SQUARE_FEED_FIRST).
 * Loaded only when the flag is on. Puts "Today", a share prompt and the feed
 * at the top on phones; every existing section stays further down the page.
 * Colours come from the theme tokens so light and dark both work.
 */

/* ── Today strip ── */
.sqc-today {
  padding: 0 0.75rem 0.25rem;
}

.sqc-today__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.sqc-today__title {
  margin: 0;
  font-family: var(--ep-serif, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
}

.sqc-today__date {
  font-size: 0.75rem;
  color: var(--sqc-fg-subtle);
}

.sqc-today__tiles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
  max-width: 36rem;
}

/* ── Daily Brief bar (plays in place) ── */
.sqc-brief-bar {
  --brief-bg: var(--color-village-green-dark, #1a6b1a);
  --brief-fg: #fff;
  --brief-sub: color-mix(in oklab, #fff 82%, transparent);
  --brief-accent: #c9e7b4;
  --brief-motif: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 36rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem 0.9rem;
  overflow: hidden;
  border-radius: 0.9rem;
  background-color: var(--brief-bg);
  background-image: var(--brief-motif);
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: auto 85%;
  color: var(--brief-fg);
}

.sqc-brief-bar__play {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 9999px;
  background: #fff;
  color: var(--brief-bg);
  cursor: pointer;
}

.sqc-brief-bar__play:focus-visible {
  outline: 3px solid var(--brief-accent);
  outline-offset: 2px;
}

.sqc-brief-bar__icon-pause,
.sqc-brief-bar__play.is-playing .sqc-brief-bar__icon-play {
  display: none;
}

.sqc-brief-bar__play.is-playing .sqc-brief-bar__icon-pause {
  display: block;
}

.sqc-brief-bar__body {
  position: relative;
  flex: 1;
  min-width: 0;
}

.sqc-brief-bar__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.sqc-brief-bar__date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brief-accent);
  font-variant-numeric: tabular-nums;
}

.sqc-brief-bar__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: var(--brief-sub);
}

.sqc-brief-bar__greeting {
  font-weight: 700;
  color: var(--brief-accent);
}

.sqc-brief-bar__track {
  height: 4px;
  margin-top: 0.45rem;
  border-radius: 2px;
  background: color-mix(in oklab, #000 28%, var(--brief-bg));
}

.sqc-brief-bar__progress {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--brief-accent);
  transition: width 0.25s linear;
}

/* Special days: themed colour + a quiet motif on the right */
.sqc-brief-bar[data-occasion] .sqc-brief-bar__body {
  padding-right: 4.25rem;
}

.sqc-brief-bar--halloween {
  --brief-bg: #2a1638;
  --brief-accent: #ff9a3c;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Ccircle cx='96' cy='22' r='16' fill='%23ff9a3c' opacity='.85'/%3E%3Ccircle cx='103' cy='17' r='14' fill='%232a1638'/%3E%3Cpath d='M44 34c4-6 9-7 12-3 2-4 5-5 8-2 3-3 6-2 8 2 3-4 8-3 12 3-5-2-9 0-10 4-2-2-5-2-6 1-1-3-4-3-6-1-1-4-5-6-10-4z' fill='%23140a1c'/%3E%3C/svg%3E");
}

.sqc-brief-bar--christmas,
.sqc-brief-bar--christmas-eve,
.sqc-brief-bar--st-stephen {
  --brief-bg: #7a1622;
  --brief-accent: #f6d77a;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' opacity='.45'%3E%3Cg transform='translate(92 30)'%3E%3Cpath d='M0-18V18M-16-9L16 9M-16 9L16-9M-4-14L0-10 4-14M-4 14L0 10 4 14'/%3E%3C/g%3E%3Cg transform='translate(62 16) scale(.5)'%3E%3Cpath d='M0-18V18M-16-9L16 9M-16 9L16-9'/%3E%3C/g%3E%3C/svg%3E");
}

.sqc-brief-bar--easter {
  --brief-bg: #4b3a7a;
  --brief-accent: #ffd86b;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cellipse cx='94' cy='32' rx='14' ry='18' fill='%23ffd86b' opacity='.8'/%3E%3Cpath d='M80 30l5-4 5 4 5-4 5 4 5-4 3 2' stroke='%234b3a7a' stroke-width='2.5' fill='none'/%3E%3Cellipse cx='66' cy='38' rx='8' ry='10' fill='%23b9e4c9' opacity='.75'/%3E%3C/svg%3E");
}

.sqc-brief-bar--eid {
  --brief-bg: #10314d;
  --brief-accent: #f2c75c;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Ccircle cx='94' cy='30' r='17' fill='%23f2c75c'/%3E%3Ccircle cx='101' cy='25' r='15' fill='%2310314d'/%3E%3Cpath d='M70 14l2 5 5 .5-4 3.5 1.5 5-4.5-2.8-4.5 2.8 1.5-5-4-3.5 5-.5z' fill='%23f2c75c'/%3E%3C/svg%3E");
}

.sqc-brief-bar--st-patrick {
  --brief-bg: #0f5a2a;
  --brief-accent: #f6c867;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='%23ffffff' opacity='.35'%3E%3Ccircle cx='94' cy='20' r='9'/%3E%3Ccircle cx='85' cy='33' r='9'/%3E%3Ccircle cx='103' cy='33' r='9'/%3E%3Cpath d='M93 34q2 12 8 20' stroke='%23ffffff' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}

.sqc-brief-bar--st-brigid {
  --brief-bg: #2f5b3a;
  --brief-accent: #f1d98a;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' stroke='%23f1d98a' stroke-width='3' opacity='.5'%3E%3Cpath d='M94 8v44M72 30h44M90 16h8M90 44h8M80 26v8M108 26v8'/%3E%3C/svg%3E");
}

/* New Year's Day: daytime sky with a rising sun (Eve keeps the night sky) */
.sqc-brief-bar--new-year {
  --brief-bg: #23699a;
  --brief-accent: #ffe08a;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Ccircle cx='94' cy='40' r='13' fill='%23ffd34d'/%3E%3Cg stroke='%23ffd34d' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M94 20v-6M78 26l-4-4M110 26l4-4M72 40h-6M116 40h6'/%3E%3C/g%3E%3Cpath d='M60 60c12-12 26-14 40-8 8-5 16-5 22-2v10z' fill='%23bfe3a4'/%3E%3Cpath d='M70 60c10-7 22-8 34-3 6-2 12-1 18 3z' fill='%238cc66e'/%3E%3Cg fill='%23ffffff' opacity='.8'%3E%3Ccircle cx='66' cy='12' r='1.6'/%3E%3Crect x='112' y='8' width='3' height='3' rx='.5' transform='rotate(20 113 9)'/%3E%3Ccircle cx='76' cy='6' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}

.sqc-brief-bar--new-years-eve {
  --brief-bg: #16244d;
  --brief-accent: #f5d36e;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='%23f5d36e'%3E%3Cpath d='M94 12l2.5 7 7 2.5-7 2.5-2.5 7-2.5-7-7-2.5 7-2.5z'/%3E%3Cpath d='M74 34l1.5 4 4 1.5-4 1.5-1.5 4-1.5-4-4-1.5 4-1.5z' opacity='.7'/%3E%3Ccircle cx='108' cy='44' r='2' opacity='.6'/%3E%3C/svg%3E");
}

.sqc-today__tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 4.75rem;
  min-width: 0;
  padding: 0.7rem 0.75rem;
  border-radius: 0.9rem;
  border: 1px solid var(--sqc-border);
  background: var(--sqc-bg);
  color: var(--sqc-fg);
  text-decoration: none;
}

a.sqc-today__tile:hover {
  border-color: var(--sqc-accent-border);
}

.sqc-today__tile svg {
  color: var(--color-primary);
}

.sqc-today__tile-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}

.sqc-today__tile-sub {
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--sqc-fg-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqc-brief-bar--valentines {
  --brief-bg: #8a1538;
  --brief-accent: #ffc2d4;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='%23ffc2d4'%3E%3Cpath d='M94 50C80 40 76 32 76 25a9 9 0 0118-3 9 9 0 0118 3c0 7-4 15-18 25z' opacity='.8'/%3E%3Cpath d='M68 26c-6-4-8-8-8-11a4 4 0 018-1 4 4 0 018 1c0 3-2 7-8 11z' opacity='.55'/%3E%3C/svg%3E");
}

.sqc-brief-bar--pancake-tuesday {
  --brief-bg: #7a4a12;
  --brief-accent: #ffd27a;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%23ffd27a'%3E%3Cellipse cx='94' cy='46' rx='20' ry='5'/%3E%3Cellipse cx='94' cy='39' rx='18' ry='5' opacity='.9'/%3E%3Cellipse cx='94' cy='32' rx='16' ry='5' opacity='.8'/%3E%3C/g%3E%3Cpath d='M86 28c2 5 6 6 8 10' stroke='%23fff3d6' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sqc-brief-bar--mothers-day {
  --brief-bg: #8c2f5b;
  --brief-accent: #ffd1e3;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%23ffd1e3' opacity='.8'%3E%3Ccircle cx='94' cy='18' r='7'/%3E%3Ccircle cx='103' cy='26' r='7'/%3E%3Ccircle cx='99' cy='37' r='7'/%3E%3Ccircle cx='88' cy='37' r='7'/%3E%3Ccircle cx='85' cy='26' r='7'/%3E%3C/g%3E%3Ccircle cx='94' cy='28' r='5' fill='%23ffd86b'/%3E%3C/svg%3E");
}

.sqc-brief-bar--fathers-day {
  --brief-bg: #173f5f;
  --brief-accent: #9fd3ff;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='%239fd3ff' opacity='.75'%3E%3Cpath d='M94 14l-6 6 3 4-5 24 8 6 8-6-5-24 3-4z'/%3E%3C/svg%3E");
}

.sqc-brief-bar--bealtaine {
  --brief-bg: #2d5a1e;
  --brief-accent: #ffd86b;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M94 52c-10 0-14-8-10-16 2 4 5 5 6 3-2-8 2-16 8-20-1 6 3 9 6 12 4 5 3 21-10 21z' fill='%23ffb347' opacity='.85'/%3E%3Cpath d='M94 52c-4 0-6-4-4-8 1 2 3 2 3 0 0-4 2-6 4-7 0 4 4 7 2 11-1 3-3 4-5 4z' fill='%23ffe08a'/%3E%3C/svg%3E");
}

.sqc-brief-bar--lughnasa {
  --brief-bg: #4a4a12;
  --brief-accent: #f3d27a;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' stroke='%23f3d27a' stroke-width='2' fill='%23f3d27a' stroke-linecap='round' opacity='.7'%3E%3Cpath d='M94 56V14M86 56l4-30M102 56l-4-30' fill='none'/%3E%3Cellipse cx='94' cy='14' rx='3' ry='6'/%3E%3Cellipse cx='90' cy='24' rx='2.5' ry='5'/%3E%3Cellipse cx='98' cy='24' rx='2.5' ry='5'/%3E%3C/svg%3E");
}

.sqc-brief-bar--bloomsday {
  --brief-bg: #23325a;
  --brief-accent: #f0dca0;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='none' stroke='%23f0dca0' stroke-width='2.5' opacity='.65'%3E%3Cpath d='M94 20c-6-4-14-4-18-2v28c4-2 12-2 18 2 6-4 14-4 18-2V18c-4-2-12-2-18 2zM94 20v28'/%3E%3C/svg%3E");
}

.sqc-brief-bar--hanukkah {
  --brief-bg: #173a7a;
  --brief-accent: #ffd86b;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg stroke='%23cfe0ff' stroke-width='2' fill='none' opacity='.8'%3E%3Cpath d='M94 22v30M86 52h16M76 34c0 10 8 14 18 14s18-4 18-14M82 34c0 7 5 10 12 10s12-3 12-10M88 34c0 4 3 6 6 6s6-2 6-6'/%3E%3C/g%3E%3Cg fill='%23ffd86b'%3E%3Cellipse cx='94' cy='17' rx='2' ry='4'/%3E%3Cellipse cx='76' cy='29' rx='1.6' ry='3'/%3E%3Cellipse cx='82' cy='29' rx='1.6' ry='3'/%3E%3Cellipse cx='88' cy='29' rx='1.6' ry='3'/%3E%3Cellipse cx='100' cy='29' rx='1.6' ry='3'/%3E%3Cellipse cx='106' cy='29' rx='1.6' ry='3'/%3E%3Cellipse cx='112' cy='29' rx='1.6' ry='3'/%3E%3C/g%3E%3C/svg%3E");
}

.sqc-brief-bar--diwali {
  --brief-bg: #5a1650;
  --brief-accent: #ffc34d;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M78 38h32c-2 8-8 12-16 12s-14-4-16-12z' fill='%23e8893a'/%3E%3Cpath d='M94 36c-5-4-4-10 0-16 4 6 5 12 0 16z' fill='%23ffc34d'/%3E%3Ccircle cx='70' cy='18' r='2' fill='%23ffc34d' opacity='.7'/%3E%3Ccircle cx='112' cy='14' r='1.6' fill='%23ffc34d' opacity='.6'/%3E%3C/svg%3E");
}

.sqc-brief-bar--lunar-new-year {
  --brief-bg: #a3141c;
  --brief-accent: #ffd34d;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M94 4v8' stroke='%23ffd34d' stroke-width='2'/%3E%3Crect x='88' y='12' width='12' height='3' rx='1' fill='%23ffd34d'/%3E%3Cellipse cx='94' cy='29' rx='14' ry='14' fill='%23ffd34d' opacity='.9'/%3E%3Cpath d='M86 18q-4 11 0 22M102 18q4 11 0 22M94 15v28' stroke='%23a3141c' stroke-width='1.5' fill='none'/%3E%3Crect x='88' y='43' width='12' height='3' rx='1' fill='%23ffd34d'/%3E%3Cpath d='M94 46v8' stroke='%23ffd34d' stroke-width='2'/%3E%3C/svg%3E");
}

.sqc-brief-bar--holi {
  --brief-bg: #4a2b7a;
  --brief-accent: #ffd34d;
  --brief-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Ccircle cx='92' cy='22' r='10' fill='%23ff5fa2' opacity='.85'/%3E%3Ccircle cx='104' cy='34' r='9' fill='%23ffd34d' opacity='.85'/%3E%3Ccircle cx='86' cy='40' r='8' fill='%2335c9a6' opacity='.85'/%3E%3Ccircle cx='72' cy='24' r='4' fill='%2366b3ff' opacity='.8'/%3E%3Ccircle cx='110' cy='14' r='3' fill='%23ff8a3c' opacity='.8'/%3E%3C/svg%3E");
}

/* ── Share prompt ── */
.sqc-share {
  padding: 0.75rem 0.75rem 1rem;
}

.sqc-share__prompt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--sqc-border);
  background: var(--sqc-bg);
  color: var(--sqc-fg-muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.sqc-share__prompt:hover {
  border-color: var(--sqc-accent-border);
  color: var(--sqc-fg);
}

.sqc-share__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqc-share__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--color-primary);
  color: var(--color-primary-content);
}

/* ── Follow on post cards ── */
.sqc-feed-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sqc-feed-card__head > .sqc-post-identity {
  flex: 1;
  min-width: 0;
}

.sqc-feed-follow,
.sqc-feed-card__head > .sqc-feed-follow__btn {
  flex: none;
  order: 2;
  margin: 0;
}

.sqc-feed-follow__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  min-width: 5rem;
  padding: 0 0.9rem;
  border-radius: 9999px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.sqc-feed-follow__btn:hover {
  background: var(--sqc-accent-soft);
  color: var(--color-primary);
}

.sqc-feed-follow__btn.is-following {
  border-color: var(--sqc-border);
  background: var(--sqc-bg-soft);
  color: var(--sqc-fg-muted);
}

.sqc-feed-follow__btn:focus-visible {
  outline: 2px solid var(--sqc-focus);
  outline-offset: 2px;
}

/* Tiles that used to sit above the feed now follow it. */
.sqc-feed-first-shortcuts {
  margin: 1.25rem 0 0.5rem;
}

/* ── Phones: a shorter place header so the feed starts sooner ── */
@media (max-width: 639px) {
  .sqc-feed-first .lp-place-header {
    min-height: 0;
  }

  .sqc-feed-first .lp-place-photo {
    height: 120px;
  }

  .sqc-feed-first .lp-place-copy {
    padding: 14px 16px;
  }

  .sqc-feed-first.lp-square .sqc-page-title {
    font-size: 24px !important;
  }

  .sqc-feed-first .sqc-title-actions {
    margin-top: 6px;
  }

  .sqc-feed-first #square-layout {
    padding-top: 0.75rem;
  }

  /* The card head takes the identity's slot; the identity keeps its left inset. */
  .sqc-feed-card__head {
    order: 1;
    padding: 0 20px 20px 0;
  }

  .sqc-feed-card__head > .sqc-post-identity {
    padding-right: 0;
    padding-bottom: 0;
  }
}

@media (min-width: 640px) {
  .sqc-today,
  .sqc-share {
    padding-inline: 0;
  }
}