/* Scheduler — Instagram design language ("another Instagram, but it's the scheduler").
   Binding specs: docs/DESIGN-TARGETS.md (base + TOP-STEALS ADDENDUM + GLM ADVISORY V2).
   Type ramp STRICT: 11/12/13/14/17/22 only, tabular-nums on numbers/times/dates.
   Radii: cards 8, sheets 12 (stop ~92vh), pills/avatars round.
   Color law: white surface, #262626 ink, #8E8E8E secondary, #DBDBDB hairlines,
   #0095F6 blue for links + the scheduled-story ring only, #ED4956 red for alerts/failed,
   #127a33 green ONLY for: active tab dot, quota good/target state, the approve success flash,
   the universal posted-check badge, today's-scheduled-tile border. Never a green background block. */

:root {
  --white: #ffffff;
  --ink: #262626;
  --ink-soft: #8E8E8E;
  --hairline: #DBDBDB;
  --blue: #0095F6;
  --blue-btn: #0B72C4;      /* white text passes 4.98:1 */
  --blue-btn-press: #095C9E;
  --red: #ED4956;
  --green: #127a33;
  --green-press: #0e5f28;
  --amber: #FF9500;
  --gray-bg: #F0F0F0;
  --scrim: rgba(0, 0, 0, .55);
  --dim-active: rgba(0, 0, 0, .03);
  --sheet-dim: rgba(0, 0, 0, .4);
  --r-card: 8px;
  --r-sheet: 12px;
  --r-pill: 999px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  overscroll-behavior-y: none;
  overflow-x: hidden;
  max-width: 100vw;
  font-variant-numeric: normal;
}

body { overflow: hidden; }

svg { display: block; flex-shrink: 0; }

button {
  font-family: inherit;
  font-size: 14px;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color .15s ease;
}
/* IG taps DIM, never scale/ripple */
button:active { background-color: var(--dim-active); }
button.no-dim:active { background-color: transparent; }
button:disabled { opacity: 0.4; pointer-events: none; }

input, textarea, select {
  font-family: inherit;
  font-size: 17px; /* >=16 prevents iOS auto-zoom on focus */
}

img, video { max-width: 100%; display: block; }

.hidden { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }

#app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

.main-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- Header: 44px, centered wordmark only, hairline bottom ---------- */

.app-header {
  flex-shrink: 0;
  height: calc(44px + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}
.header-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.1px;
}

/* ---------- Scroll area ---------- */

.main-scroll {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}
.view { max-width: 100%; }

.pull-spinner {
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
  color: var(--ink-soft);
}
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= STORIES ROW ================= */

.stories-row {
  scrollbar-width: none;
  display: flex;
  gap: 14px;
  padding: 12px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--hairline);
}
.stories-row::-webkit-scrollbar { display: none; }
.story-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 62px;
  flex-shrink: 0;
  text-align: center;
}
.story-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 2px;
  position: relative;
  flex-shrink: 0;
}
.story-ring.live {
  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
}
.story-ring.scheduled {
  background: none;
  border: 2px solid var(--hairline);
  padding: 0;
}
.story-ring.expired {
  background: var(--hairline);
}
.story-ring.new {
  background: none;
  border: 1.5px solid var(--hairline);
}
.story-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 2px;
  background: var(--white);
}
.story-ring.scheduled .story-ring-inner,
.story-ring.new .story-ring-inner { padding: 0; }
.story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gray-bg);
  display: block;
}
.story-new-plus {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--gray-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.story-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: var(--r-pill);
  border: 1.5px solid #fff;
  font-variant-numeric: tabular-nums;
}
.story-label {
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62px;
}
.story-label.live-label { color: var(--ink); font-weight: 600; }

/* ================= WEEK NAV RAIL (Home) ================= */

.week-rail {
  display: flex;
  padding: 10px 8px;
  border-bottom: 1px solid var(--hairline);
}
.rail-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
}
.rail-day .letter {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.rail-day .num {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.rail-day.today .num { color: var(--ink); font-weight: 700; border: 1.3px solid var(--ink); }
.rail-day .rail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-dot.posted { background: var(--green); }
.rail-dot.scheduled { background: transparent; border: 1.6px solid var(--green); }
.rail-dot.none { background: transparent; }

/* ================= QUOTA PILL ================= */

.quota-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
}
.quota-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--gray-bg);
  font-size: 13px;
  font-weight: 600;
}
.quota-pill .qdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.quota-pill.behind .qdot { background: var(--red); }
.quota-pill.behind { color: var(--red); }
.quota-pill.minimum .qdot { background: var(--amber); }
.quota-pill.minimum { color: var(--amber); }
.quota-pill.good .qdot, .quota-pill.target .qdot { background: var(--green); }
.quota-pill.good { color: var(--green); }
.quota-pill.target { color: var(--green); }
.quota-count { font-variant-numeric: tabular-nums; }
.quota-sub { font-size: 11px; color: var(--ink-soft); }

/* ================= SUGGESTION CARDS (Home feed) ================= */

.suggestions-feed { display: flex; flex-direction: column; }
.sugg-card {
  border-bottom: 1px solid var(--hairline);
  padding: 12px 16px 14px;
  transition: opacity .5s ease, transform .5s ease;
}
.sugg-card.approving { opacity: .5; pointer-events: none; }
.sugg-card.leaving { opacity: 0; transform: scale(.96); }
.sugg-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.sugg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sugg-name { font-size: 13px; font-weight: 600; }
.sugg-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--gray-bg);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.sugg-time { margin-left: auto; font-size: 12px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

.sugg-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--gray-bg);
}
.sugg-media img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.sugg-clock-chip {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px 3px 6px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.sugg-clock-chip.approved { color: var(--green); }
.sugg-clock-chip svg { width: 11px; height: 11px; }

.sugg-actionbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 4px;
}
.sugg-heart { display: flex; align-items: center; gap: 5px; color: var(--ink-soft); }
.sugg-heart svg { width: 22px; height: 22px; }
.sugg-heart-count { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sugg-comment { color: var(--ink); display: flex; }
.sugg-comment svg { width: 21px; height: 21px; }
.sugg-approve {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 2px;
}
.sugg-approve.approving { color: var(--ink-soft); }

.sugg-caption-line {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}
.sugg-caption-line b { font-weight: 600; }
.sugg-reason {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.sugg-caption-full {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  white-space: pre-wrap;
  margin-top: 6px;
}

/* ================= GRID ================= */

.seg-toggle {
  display: flex;
  gap: 0;
  margin: 10px 16px;
  background: var(--gray-bg);
  border-radius: var(--r-card);
  padding: 3px;
}
.seg-btn {
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: 6px;
}
.seg-btn.active { background: #fff; color: var(--ink); }

.grid-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Flush, like the real profile grid. The 2px gap read as a grey border
     around every tile (Dion 2026-08-09). */
  gap: 0;
}
.grid-tile {
  position: relative;
  /* Instagram's profile grid is 4:5 portrait. A 1:1 preview crops differently
     from the real feed, which makes it useless for judging a post. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* No fill: a grey plate behind a loading image is the 'grey border' he saw. */
  background: transparent;
}
.grid-tile img, .grid-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.grid-tile.is-scheduled img { opacity: .6; }
.grid-tile.is-today-scheduled { outline: 2px solid var(--green); outline-offset: -2px; }
.grid-tile.is-suggestion {
  border: 1.5px dashed var(--hairline);
  background: var(--white);
}
.grid-tile.is-suggestion img { opacity: .4; }
.grid-kind-glyph {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #fff;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.6));
}
.grid-kind-glyph svg { width: 16px; height: 16px; }
.grid-engagement {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 6px 5px;
  background: linear-gradient(to top, var(--scrim), transparent);
  display: flex;
  align-items: center;
  gap: 3px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.grid-engagement svg { width: 12px; height: 12px; }
.grid-clock-chip {
  position: absolute;
  left: 5px;
  bottom: 5px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px 3px 5px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.grid-clock-chip svg { width: 10px; height: 10px; }
.grid-state-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.grid-state-badge.is-posted { background: var(--brand, #127a33); }
.grid-state-badge.is-failed { background: #ED4956; }
.grid-state-badge svg { width: 10px; height: 10px; }
.grid-sugg-label {
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.stories-history { display: flex; flex-direction: column; }
.hist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
  width: 100%;
  text-align: left;
}
.hist-thumb-wrap { position: relative; flex-shrink: 0; }
.hist-thumb { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--gray-bg); }
.hist-meta { flex: 1; min-width: 0; }
.hist-title { font-size: 14px; font-weight: 600; }
.hist-sub { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.hist-sub.live-sub { color: var(--ink); font-weight: 600; }

/* ================= CALENDAR ================= */

.cal-monthbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 4px 16px 10px;
}
.cal-nav { color: var(--ink); padding: 6px; border-radius: 50%; }
.cal-month-label { font-size: 17px; font-weight: 600; min-width: 140px; text-align: center; }

.cal-weekday-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 8px;
  margin-bottom: 4px;
}
.cal-weekday-header span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 0 8px 12px;
}
.cal-day {
  aspect-ratio: 1 / 1.05;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  overflow: hidden;
  position: relative;
}
.cal-day.pad { border-color: transparent; }
.cal-day.today { border: 1.5px solid var(--ink); }
.cal-num { font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal-day.pad .cal-num { color: var(--ink-soft); opacity: .4; }
.cal-thumbs { display: flex; gap: 2px; flex: 1; }
.cal-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; background: var(--gray-bg); }
.cal-dots { display: flex; gap: 3px; align-items: center; position: absolute; bottom: 3px; left: 4px; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.cal-dot.posted { background: var(--green); }
.cal-dot.scheduled { background: var(--amber); }
.cal-dot.story { background: none; border: 1px solid var(--blue); }
.cal-sugg-word {
  font-size: 11px;
  /* #8E8E8E measures 3.28:1 on white, under the 4.5 floor */
  color: #707070;
  font-style: normal;
  /* A day cell is ~46px wide on a 375px phone, so "Explainer?" ran outside it
     and got clipped mid-word. Constrain and ellipsize instead. */
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
.cal-day { overflow: hidden; }

.week-agenda { padding: 4px 16px 8px; }
.agenda-day { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.agenda-day-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.agenda-day-head .title { font-size: 14px; font-weight: 600; }
.agenda-day-head .today-badge { font-size: 11px; font-weight: 700; color: var(--green); }
.agenda-empty { font-size: 12px; color: var(--ink-soft); padding: 4px 0; }
.agenda-add {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0;
}

/* ================= Shared: item rows, status pills/badges ================= */

.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  width: 100%;
  text-align: left;
}
.item-row + .item-row { border-top: 1px solid var(--hairline); }
.item-thumb {
  width: 44px; height: 44px;
  border-radius: var(--r-card);
  object-fit: cover;
  background: var(--gray-bg);
  flex-shrink: 0;
}
.item-meta { flex: 1; min-width: 0; }
.item-title { font-size: 14px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.badge svg { width: 12px; height: 12px; }
.badge-posted { background: rgba(18,122,51,.1); color: var(--green); }
.badge-scheduled { background: rgba(255,149,0,.12); color: var(--amber); }
.badge-publishing { background: rgba(0,149,246,.1); color: var(--blue); }
.badge-failed { background: rgba(237,73,86,.1); color: var(--red); }
.badge-cancelled { background: var(--gray-bg); color: var(--ink-soft); }
.badge-inbox { background: var(--gray-bg); color: var(--ink-soft); }

.more-toggle {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
}

.gap-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 10px 4px;
  border-radius: var(--r-card);
  color: var(--ink);
}
.gap-main { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.gap-main svg { color: var(--ink-soft); }
.gap-cta { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--blue); }
.gap-cta svg { width: 12px; height: 12px; }

.empty-state { text-align: center; padding: 40px 16px 16px; color: var(--ink-soft); }
.empty-state p { margin: 4px 0; font-size: 14px; font-weight: 600; }
.empty-state .empty-sub { font-weight: 400; font-size: 12px; }

/* ---------- Buttons ---------- */

.btn-primary {
  background: var(--blue-btn);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  width: 100%;
}
.btn-primary:active { background: var(--blue-btn-press); }
.btn-secondary {
  background: var(--gray-bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  width: 100%;
}
.btn-link {
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  height: 44px;
  padding: 0 24px;
  width: 100%;
}
.btn-danger-link {
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
  height: 44px;
  padding: 0 24px;
  width: 100%;
}

/* ---------- Tab bar: icons only, active = tiny green dot ---------- */

.tab-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: calc(49px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  border-top: 1px solid var(--hairline);
  background: var(--white);
}
.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--ink-soft);
  height: 100%;
}
.tab-btn.active { color: var(--ink); }
.tab-btn .tab-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  margin-top: 3px;
}
.tab-btn.active .tab-dot { background: var(--green); }
.tab-create {
  flex: 0.9;
  color: var(--ink);
  /* Its neighbours reserve 4px dot + 3px margin below the icon; without the
     same reserve the plus rendered 3px low and read as misaligned. */
  padding-bottom: 7px;
}

/* ---------- Bottom sheet: IG physics (0.4 dim, spring, stop ~92%, 36x5 grabber) ---------- */

.sheet-backdrop {
  position: fixed; inset: 0;
  background: var(--sheet-dim);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.sheet-backdrop.open { opacity: 1; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 92vh;
  background: var(--white);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  z-index: 41;
  transform: translateY(102%);
  transition: transform 0.34s cubic-bezier(0.32, 0.9, 0.32, 1);
  display: flex;
  flex-direction: column;
}
.sheet.open { transform: translateY(0); }
.sheet-drag-zone {
  flex-shrink: 0;
  padding: 8px 0 6px;
  touch-action: none;
  cursor: grab;
}
.sheet-grabber {
  width: 36px; height: 5px;
  background: var(--hairline);
  border-radius: var(--r-pill);
  margin: 0 auto;
}
.sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 16px;
}
.sheet-body.snap { scroll-snap-type: y proximity; }
.sheet-footer {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--white);
}
.sheet-title { font-size: 17px; font-weight: 700; margin: 4px 0 12px; }
.sheet-section-label { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.3px; margin: 16px 0 8px; }

.sheet-media-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sheet);
  background: var(--gray-bg);
  overflow: hidden;
  margin-bottom: 12px;
}
.sheet-media-preview img, .sheet-media-preview video { width: 100%; height: 100%; object-fit: cover; }
/* stories are 9:16 — show them whole, phone-story sized, never cropped square */
.sheet-media-preview.story-preview {
  aspect-ratio: 9 / 16;
  width: auto;
  height: min(52vh, 480px);
  margin-left: auto;
  margin-right: auto;
}

.sheet-caption { font-size: 14px; line-height: 1.35; white-space: pre-wrap; margin: 0 0 12px; }

.field-row { display: flex; gap: 8px; margin: 8px 0 12px; }
.field-row .field { flex: 1; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.field input[type="date"], .field input[type="time"] {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--r-card);
  border: 1.5px solid var(--hairline);
  background: var(--white);
  color: var(--ink);
}

textarea.caption-input {
  width: 100%;
  min-height: 88px;
  padding: 12px;
  border-radius: var(--r-card);
  border: 1.5px solid var(--hairline);
  resize: vertical;
  margin-bottom: 4px;
}

.file-input-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: var(--r-card);
  border: 1.5px dashed var(--hairline);
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}
.file-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.file-thumb { position: relative; width: 64px; height: 64px; border-radius: var(--r-card); overflow: hidden; background: var(--gray-bg); }
.file-thumb img, .file-thumb video { width: 100%; height: 100%; object-fit: cover; }
.file-thumb .remove-file {
  position: absolute; top: 4px; right: 4px;
  width: 16px; height: 16px;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.file-thumb .remove-file svg { width: 8px; height: 8px; }

.segmented {
  display: flex;
  background: var(--gray-bg);
  border-radius: var(--r-card);
  padding: 4px;
  margin-bottom: 12px;
}
.segmented input { display: none; }
.segmented label {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  color: var(--ink-soft);
}
.segmented input:checked + label {
  background: var(--white);
  color: var(--ink);
}

.disclosure-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  padding: 8px 0;
}
.disclosure-btn svg { transition: transform 0.2s ease; }
.disclosure-btn.expanded svg { transform: rotate(90deg); }

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip-radio { display: none; }
.chip-label {
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--gray-bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.chip-radio:checked + .chip-label { background: var(--ink); color: #fff; }

.library-row, .library-pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  width: 100%;
  text-align: left;
  scroll-snap-align: start;
}
.library-row + .library-row,
.library-pick-row + .library-pick-row { border-top: 1px solid var(--hairline); }
.library-thumb { width: 52px; height: 52px; border-radius: var(--r-card); object-fit: cover; background: var(--gray-bg); flex-shrink: 0; }
.library-meta { flex: 1; min-width: 0; }
.library-caption { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.library-tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 600; color: var(--ink-soft); background: var(--gray-bg); padding: 2px 8px; border-radius: var(--r-pill); }

.upload-new-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: var(--r-card);
  border: 1.5px dashed var(--hairline);
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  scroll-snap-align: start;
}

.sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.error-text { font-size: 12px; color: var(--red); margin: 4px 0 8px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  top: calc(var(--safe-top) + 8px);
  left: 16px; right: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--r-sheet);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: var(--red); }
.toast-retry { margin-left: auto; font-weight: 700; text-decoration: underline; color: #fff; }

/* ================= STORY PLAN (staged class-schedule nights) ================= */

.storyplan { border-bottom: 1px solid var(--hairline); }
.storyplan:empty { border-bottom: none; }
.sp-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 12px 16px 4px;
}
.sp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  cursor: pointer;
  transition: opacity .28s ease, transform .28s ease;
}
.sp-row.leaving { opacity: 0; transform: scale(.96); }
.sp-row:active { background: var(--dim-active); }
.sp-daybox {
  width: 40px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 4px 0 5px;
}
.sp-dow { font-size: 10px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; }
.sp-num { font-size: 15px; font-weight: 700; line-height: 1.15; }
.sp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-title { font-size: 14px; font-weight: 600; }
.sp-sub {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-thumbs { display: flex; flex-shrink: 0; }
.sp-thumbs img {
  width: 26px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1.5px solid var(--white);
  background: var(--gray-bg);
}
.sp-thumbs img + img { margin-left: -8px; }
.sp-approve {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  padding: 7px 14px;
  border-radius: var(--r-pill);
}
.sp-approve:active { background: #000; }
.sp-approve:disabled { opacity: .55; }

.sp-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.sp-sheet-row + .sp-sheet-row { border-top: 1px solid var(--hairline); }
.sp-sheet-thumb {
  width: 34px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--gray-bg);
  flex-shrink: 0;
  display: block;
}
.sp-sheet-note { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; line-height: 1.4; }

/* ---------- Desktop: centered phone column (the IG-web pattern) ---------- */

@media (min-width: 700px) {
  body { background: #FAFAFA; overflow: hidden; }
  #app {
    max-width: 430px;
    margin: 0 auto;
    border-left: 1px solid var(--hairline);
    border-right: 1px solid var(--hairline);
    background: var(--white);
  }
  /* sheets + toasts stay inside the column */
  .sheet {
    max-width: 430px;
    left: 50%;
    right: auto;
    width: 100%;
    transform: translate(-50%, 102%);
  }
  .sheet.open { transform: translate(-50%, 0); }
  .toast {
    max-width: 398px;
    left: 50%;
    right: auto;
    width: calc(100% - 32px);
    transform: translate(-50%, -12px);
  }
  .toast.show { transform: translate(-50%, 0); }
  /* pointer niceties: hover dim instead of tap dim */
  .tab-btn:hover, .cal-nav:hover, .seg-btn:hover:not(.active),
  .sugg-approve:hover, .more-toggle:hover { background-color: var(--dim-active); }
  .sp-row:hover { background: var(--dim-active); }
}

/* ---------- Auth gate ---------- */

.auth-gate {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-gate-card { text-align: center; max-width: 320px; width: 100%; }
.auth-gate-icon { color: var(--ink); margin-bottom: 8px; display: flex; justify-content: center; }
.auth-gate-card h1 { font-size: 17px; margin: 0 0 4px; }
.auth-gate-card p { font-size: 14px; color: var(--ink-soft); margin: 0 0 24px; }

/* ---------- APPROVED: distilled to picture, one line, one button ----------
   Dion: "there are no images there... drastically reduce the amount of text...
   make it a lot more minimalistic." So the thumbnail nearly doubled, the card
   halved in height, and the pillar tag, reason sentence, Other time and Post
   now all moved into the detail sheet behind a tap. */

.approved-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px 2px;
}
.approved-title { font-size: 17px; font-weight: 700; margin: 0; }
.approved-count { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Five segments do not fit a 375px phone at equal width, so this row scrolls
   instead of crushing the labels below the 11px floor. */
/* Pills, not a segmented slab: separate rounded chips with air between them. */
#approvedSeg {
  background: none;
  padding: 0;
  gap: 8px;
  margin: 12px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
#approvedSeg::-webkit-scrollbar { display: none; }
#approvedSeg .seg-btn {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--white);
  color: #707070;
  font-weight: 600;
}
#approvedSeg .seg-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: none;
}

.approved-list { padding: 4px 16px 8px; }

/* Grid so the picture spans both rows: text on top, the single action beneath
   it, and no nested containers. */
.approved-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas: "thumb text" "thumb action";
  column-gap: 14px;
  /* Never tight under the text: one full spacing step, as a token. */
  row-gap: 14px;
  padding: 16px 0;
  align-items: start;
}
.approved-card + .approved-card { border-top: 1px solid var(--hairline); }

.approved-thumbbtn { grid-area: thumb; padding: 0; }
.approved-thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--r-card);
  object-fit: cover;
  background: var(--gray-bg);
  display: block;
}

.approved-textbtn {
  grid-area: text;
  text-align: left;
  padding: 0;
  min-width: 0;
  display: block;
}
/* One line. The whole caption is one tap away, and two lines of it here was
   most of what made the screen feel heavy. */
.approved-caption {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approved-when {
  display: block;
  font-size: 12px;
  /* NOT --ink-soft (#8E8E8E): that measures 3.28:1 on white, under the 4.5
     floor, and this line is now one of only two pieces of text on the card —
     it carries WHEN the thing posts. #707070 measures 4.95:1. The global token
     is left alone deliberately; changing it would restyle the whole app. */
  color: #707070;
  margin-top: 3px;
}

.approved-actions { grid-area: action; display: flex; gap: 8px; align-self: end; flex-wrap: wrap; }
.approved-actions .btn-sm {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 34px;
  font-size: 13px;
  padding: 0 16px;
}
/* Scheduled-with-undo: the visible state change plus the reversal window IS
   the confirmation, which is why this action needs no modal. */
.approved-card.is-scheduled { opacity: .72; }
.approved-done {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  align-self: center;
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.approved-actions .btn-link.btn-sm { min-width: 0; padding: 0 6px; font-size: 13px; }

/* Backlog count on the tab itself, so it is visible without opening the tab. */
.tab-btn .tab-count {
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tab-btn { position: relative; }

.confirm-warning {
  font-size: 13px;
  color: var(--red);
  margin: 10px 0 0;
  text-align: center;
}

/* Posting day (Mon/Wed/Fri/Sun) with nothing on it yet: say a post is DUE.
   Amber, not red — this is a heads-up to prepare, not a failure. */
.cal-day-due { border: 1.3px dashed var(--amber); border-radius: var(--r-card); }
.cal-due-word {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  margin-top: 2px;
}

/* Open preview: a shareable copy with no password, no publishing and no writes.
   Amber, stated once at the top, so nobody mistakes it for the real thing. */
.preview-bar {
  flex-shrink: 0;
  background: var(--amber);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 5px 12px;
  letter-spacing: .01em;
}

/* Remove from the list: old carousels pile up and have to go in one tap.
   Sits top-right of the card, quiet until you look for it. */
.approved-remove {
  grid-area: text;
  justify-self: end;
  align-self: start;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  margin: -4px -4px 0 0;
}
.approved-remove:active { background: var(--gray-bg); }
.approved-card.is-removing { opacity: .4; }
/* The title must not run under the remove control. */
.approved-textbtn { padding-right: 30px; }

/* The honest empty state: never "you're set" while the quota says behind. */
.empty-head { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }

/* Home's pick: three things worth posting, each with its reason. */
.home-pick-head {
  font-size: 17px;
  font-weight: 700;
  margin: 18px 16px 2px;
}
.approved-why {
  display: block;
  font-size: 12px;
  color: #707070;      /* not --ink-soft: that measures 3.28:1 on white */
  margin-top: 4px;
  line-height: 1.35;
}