/* ================================================================
   Feed — monotone design system
   cream white · light grey · dusty black
   ================================================================ */

:root {
  color-scheme: light dark;
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --surface-soft: #F1F0EC;
  --surface-hover: #F6F5F1;
  --border: #E8E7E3;
  --border-strong: #D9D8D2;
  --ink: #2B2A28;
  --ink-soft: #6E6C66;
  --ink-faint: #A3A19A;
  --ink-hover: #43413E;
  --hover-weak: rgba(43, 42, 40, 0.04);
  --hover-med: rgba(43, 42, 40, 0.08);
  --header-bg: rgba(250, 249, 246, 0.86);
  --selection: rgba(43, 42, 40, 0.12);
  --scrim: rgba(43, 42, 40, 0.28);
  --danger: #8C3B32;
  --danger-hover: #7a332b;
  --on-danger: #FDFCFA;
  --audio: #5F8A55;
  --on-audio: #FAF9F6;
  --vo: #4E6E8A;
  --on-vo: #FAF9F6;
  --shadow-sm: 0 1px 2px var(--hover-med);
  --shadow-md: 0 4px 16px rgba(43, 42, 40, 0.07);
  --shadow-lg: 0 12px 40px rgba(43, 42, 40, 0.14);
  /* tooltip bubbles: dusty black on light, true black on dark */
  --tip-bg: #2B2A28;
  --tip-fg: #FAF9F6;
  /* per-series colors: ten fixed tints, handed out in the order series
     first appear in a project (app.js sets --series-color inline) */
  --series-c1: #3F6FA8;
  --series-c2: #C2611E;
  --series-c3: #3E8A5A;
  --series-c4: #8A4FB8;
  --series-c5: #B08A1A;
  --series-c6: #2A8C8C;
  --series-c7: #C9457A;
  --series-c8: #7A8A2A;
  --series-c9: #B04A3A;
  --series-c10: #5F5FC4;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* the centered page column every view lays out in; wider on large
     desktop displays so the plan, table and dashboard grid use the room */
  --page-max: 1080px;
}
@media (min-width: 1440px) { :root { --page-max: 1240px; } }
@media (min-width: 1800px) { :root { --page-max: 1440px; } }

/* dusty dark counterpart, driven by the OS setting */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --surface: #1F1E1C;
    --surface-soft: #2A2926;
    --surface-hover: #262523;
    --border: #33322E;
    --border-strong: #44423C;
    --ink: #E9E7E2;
    --ink-soft: #A8A59D;
    --ink-faint: #6F6C65;
    --ink-hover: #D6D4CE;
    --hover-weak: rgba(233, 231, 226, 0.05);
    --hover-med: rgba(233, 231, 226, 0.08);
    --header-bg: rgba(23, 22, 20, 0.86);
    --selection: rgba(233, 231, 226, 0.22);
    --scrim: rgba(0, 0, 0, 0.55);
    --danger: #C4685E;
    --danger-hover: #D07B71;
    --on-danger: #1B1A18;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --tip-bg: #000000;
    --tip-fg: #F2F0EB;
    --series-c1: #7FA8DB;
    --series-c2: #E8935A;
    --series-c3: #6FC08A;
    --series-c4: #B98BE0;
    --series-c5: #E0BE5A;
    --series-c6: #5FC4C4;
    --series-c7: #E87DA6;
    --series-c8: #B2C25A;
    --series-c9: #E07C6B;
    --series-c10: #9A9AE8;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* the page never scrolls sideways; on macOS with scrollbars always shown,
   anything a hair too wide would otherwise show a horizontal bar with
   nothing to scroll to. On html only: this propagates to the viewport,
   while on body it would make body the scroller and unstick the headers */
html { overflow-x: hidden; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

::selection { background: var(--selection); }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }

/* ================= Header ================= */

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* header content lines up with the centered page column */
  padding: 16px max(40px, calc((100% - var(--page-max)) / 2 + 40px));
  /* installed on a phone the page runs under the status bar */
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.wordmark-icon { color: var(--ink); border-radius: 7px; }

.editor-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* sync status: a dot and a word in every header saying whether what's
   on screen is the latest — checking (ring drawing), up to date (solid),
   saving (pulsing), offline (hollow), conflict (red). Click for details */
.sync-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-size: 12.5px;
  color: var(--ink-faint);
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.sync-status:hover, .sync-status[aria-expanded="true"] { background: var(--surface-soft); color: var(--ink-soft); }
.sync-status[aria-expanded="true"]::after { display: none; } /* no tooltip over the open popover */
.sync-status[hidden] { display: none; }
.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--audio);
  flex: none;
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sync-status[data-state="checking"] .sync-dot {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-top-color: var(--ink-soft);
  animation: ref-spin 0.8s linear infinite;
}
.sync-status[data-state="saving"] .sync-dot {
  background: var(--ink-faint);
  animation: sync-pulse 1.2s ease-in-out infinite;
}
.sync-status[data-state="offline"] .sync-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-faint);
}
.sync-status[data-state="conflict"] { color: var(--danger); }
.sync-status[data-state="conflict"] .sync-dot { background: var(--danger); }
@keyframes sync-pulse { 50% { opacity: 0.35; } }
.sync-status.analytics-update-available .sync-dot {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--audio) 16%, transparent);
  animation: sync-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sync-status .sync-dot { animation: none !important; }
}
@media (max-width: 560px) {
  /* the dot alone, sized like the icon buttons; the word stays for
     screen readers */
  .sync-status { min-width: 28px; min-height: 28px; padding: 4px 8px; justify-content: center; }
  .sync-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.switcher-menu.sync-menu {
  min-width: 260px;
  max-width: 300px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: default;
}
.sync-menu-title { font-weight: 600; margin-bottom: 4px; }
.sync-menu-text { color: var(--ink-soft); line-height: 1.45; }
.sync-menu-text + .sync-menu-text { margin-top: 4px; }
.sync-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-faint);
}
.sync-menu-actions { display: flex; gap: 8px; margin-top: 10px; }
.sync-menu-actions .btn { flex: 1; justify-content: center; padding: 7px 10px; font-size: 12.5px; }
.sync-menu-link {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sync-menu-link:hover { color: var(--ink); }
.sync-menu-link:disabled { color: var(--ink-faint); text-decoration: none; }
.sync-menu-project { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.sync-menu-project:first-of-type { margin-top: 6px; }
.sync-menu-project .sync-menu-title { font-size: 13px; }

/* ================= Buttons ================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 8px 16px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              box-shadow 0.2s var(--ease), transform 0.1s var(--ease);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover { background: var(--ink-hover); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-hover); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  padding: 8px 12px;
}
.btn-ghost:hover { background: var(--surface-soft); color: var(--ink); }

.btn-danger {
  background: var(--danger);
  color: var(--on-danger);
}
.btn-danger:hover { background: var(--danger-hover); }

/* ================= Dashboard ================= */

/* one shared page container: every view centers content identically */
.dash-main,
.editor-main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 44px 40px 120px;
}

.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px 18px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.list-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.list-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--bg);
  flex-shrink: 0;
}
.list-badge svg { width: 15px; height: 15px; }

.list-badge-lg {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.list-badge-lg svg { width: 19px; height: 19px; }

.list-card h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.list-card .card-desc {
  color: var(--ink-soft);
  font-size: 13.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}

.list-card .card-meta {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-stats {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.card-edited {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.card-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.list-card:hover .card-actions,
.list-card:focus-within .card-actions { opacity: 1; }

/* card hover actions sit in the top-right corner, one white rounded
   tile per icon */
.list-card .card-actions {
  top: 12px;
  right: 12px;
}
.card-actions { gap: 6px; }
.card-actions .icon-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  color: var(--ink-soft);
}
.card-actions .icon-btn:hover { background: var(--surface-hover); color: var(--ink); }
.card-actions .icon-btn.icon-btn-danger:hover { color: var(--danger); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.icon-btn:hover { background: var(--surface-soft); color: var(--ink); }
.icon-btn.icon-btn-danger:hover { color: var(--danger); }

/* ================= Tooltips ================= */
/* button/link titles become data-tip on hover (app.js) and render as
   a small dark bubble instead of the slow native popup */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tip-bg);
  color: var(--tip-fg);
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.35;
  padding: 4px 9px;
  border-radius: 6px;
  width: max-content;
  max-width: min(300px, calc(100vw - 32px));
  white-space: pre-line;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease) 0s;
  z-index: 200;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transition-delay: 0.35s;
}
/* header controls tip downward so the bubble stays on screen */
.app-header [data-tip]::after {
  bottom: auto;
  top: calc(100% + 7px);
}
@media (hover: none) { [data-tip]::after { display: none; } }

/* ================= Empty states ================= */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 96px 24px;
  color: var(--ink-faint);
}
.empty-state h2 {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.empty-state p { color: var(--ink-soft); max-width: 380px; }
.empty-state .btn { margin-top: 14px; }

.empty-state-inline { padding: 48px 24px 24px; }

/* ================= Editor ================= */

/* badge on the left, title with description/context stacked beside it */
.editor-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

.editor-meta-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* keep the two text lines the same height as the badge beside them */
.editor-meta .list-badge-lg { width: 46px; height: 46px; border-radius: 13px; }
.editor-meta .list-badge-lg svg { width: 22px; height: 22px; }
.editor-meta-text .editor-title {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.15;
}
.editor-meta-text .editor-desc {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.35;
}
.editor-meta-text .editor-context { margin-top: 0; }

.editor-title,
.editor-desc {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin-left: -8px;
  transition: background 0.2s var(--ease);
}
.editor-title:hover, .editor-desc:hover { background: var(--hover-weak); }
.editor-title:focus, .editor-desc:focus { background: var(--hover-med); }

.editor-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.editor-title::placeholder { color: var(--ink-faint); }

.editor-desc {
  font-size: 15px;
  color: var(--ink-soft);
}
.editor-desc::placeholder { color: var(--ink-faint); }

/* notes + tasks live in the sticky header so they stay at hand while
   the plan scrolls; the notes tile inverts while its drawer is open */
#btn-notes, #btn-tasks { position: relative; }
a.icon-btn { text-decoration: none; }
#btn-notes[aria-pressed="true"],
#btn-tasks[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* the tasks button counts open tasks in the same corner; the post page's
   workflow button counts the steps still open the same way */
#btn-tasks[data-count]::before,
#btn-workflow[data-count]::before {
  content: attr(data-count);
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  border: 2px solid var(--bg);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
#btn-tasks[data-count][aria-pressed="true"]::before { display: none; }

/* the notes tooltip previews the notes themselves: a wrapping bubble that
   hangs below the button, flush with its right edge so it stays on screen */
#btn-notes[data-tip]::after {
  top: calc(100% + 8px);
  bottom: auto;
  left: auto;
  right: 0;
  transform: none;
  width: max-content;
  max-width: min(340px, 80vw);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ================= Project notes panel ================= */
/* part of the page, not a layer over it: on a wide window the planner
   is a two-column grid — header over plan at the left, and an open panel
   as the second column running the window's full height, sticky while
   the plan scrolls. The plan keeps its centered column, the sticky
   header and the full-bleed table and timeline lay out in the width
   that is left (--page-w), so nothing slides off the left edge. The
   panel takes its full width when it can and shrinks to leave the page
   760px, the least the desktop header lays out in; a window too narrow
   even for that (under 1080px) gets the panel as a fixed overlay, and
   on phones it fills the screen behind a scrim */
/* --vw is the viewport width the page actually lays out in: app.js keeps
   it at the root element's client width, which leaves out a classic
   (non-overlay) vertical scrollbar that 100vw would count, and would
   otherwise push anything sized from it a scrollbar's width past the
   right edge, giving the page a horizontal scrollbar with nothing to
   scroll to */
:root { --vw: 100vw; --page-w: var(--vw); --sidebar-max-w: 500px; }
.view[hidden] { display: none !important; }
.notes-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90; /* above the sticky header, below modals */
  width: min(var(--sidebar-max-w), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(calc(100% + 24px));
  visibility: hidden;
  transition: transform 0.28s var(--ease), visibility 0s linear 0.28s;
}
.notes-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.28s var(--ease), visibility 0s;
}
@media (min-width: 1080px) {
  body.drawer-notes, body.drawer-tasks, body.drawer-followers { --panel-w: clamp(320px, calc(var(--vw) - 760px), var(--sidebar-max-w)); }
  body.drawer-notes, body.drawer-tasks, body.drawer-followers { --page-w: calc(var(--vw) - var(--panel-w)); }
  #view-planner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--panel-w, 0px);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    transition: grid-template-columns 0.28s var(--ease);
  }
  #view-planner > .app-header { grid-column: 1; grid-row: 1; }
  /* auto margins would shrink a grid item to its content; a set width
     keeps the column's own centering at up to the usual --page-max */
  #view-planner > .editor-main { grid-column: 1; grid-row: 2; width: 100%; }
  #view-planner > .notes-drawer {
    grid-column: 2;
    grid-row: 1 / 3;
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    z-index: 55; /* over the plan's sticky header, so its menus win */
    width: auto;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    box-shadow: none;
    transform: none;
    transition: visibility 0s linear 0.28s;
  }
  #view-planner > .notes-drawer.open { transition: visibility 0s; }
  /* closed, the column is 0px wide but the panel's 1px border would still
     stick out past the viewport and give the page a horizontal scrollbar */
  #view-planner > .notes-drawer:not(.open) { border-left-width: 0; }
  /* the panel's innards keep their width while the column opens, so the
     column reveals them rather than squeezing them */
  #view-planner > .notes-drawer > * { min-width: var(--panel-w, 0px); }
}

.notes-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 18px 12px 26px;
  padding-top: calc(22px + env(safe-area-inset-top, 0px));
}
.notes-head-text { min-width: 0; }
.notes-head h2 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.notes-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notes-body {
  flex: 1;
  min-height: 0;
  /* the panel scrolls its list, never sideways: text wraps or ellipsizes */
  overflow: hidden auto;
  padding: 2px 26px 26px;
}

/* the textarea reads like a page: no box, just text on the surface */
.notes-textarea {
  display: block;
  width: 100%;
  min-height: 100%;
  resize: none;
  overflow: hidden; /* autogrow sizes it; the body scrolls */
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.65;
  padding: 6px 0;
  -webkit-text-size-adjust: 100%;
}
.notes-textarea::placeholder { color: var(--ink-faint); }

.notes-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px 12px 26px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-faint);
}
.notes-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-hint { flex: none; }

.notes-scrim {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--scrim);
  animation: fade-in 0.18s var(--ease);
  display: none;
}

@media (max-width: 720px) {
  .notes-drawer { width: 100vw; border-left: none; }
  .notes-scrim:not([hidden]) { display: block; }
  .notes-hint { display: none; }
  .notes-head { padding: calc(16px + env(safe-area-inset-top, 0px)) 12px 8px 18px; }
  .notes-body { padding: 0 18px 18px; }
  .notes-foot { padding: 8px 18px calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ================= Statistics ================= */

.stats-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  animation: card-in 0.25s var(--ease);
}

.stats-empty {
  color: var(--ink-faint);
  font-size: 13.5px;
  text-align: center;
  padding: 8px 0;
}

.stats-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.stat-tile {
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 2px;
}

.stats-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.donut-title {
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.donut-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.donut {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  display: block;
}

.donut-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.donut-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  min-width: 0;
}

.legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}

.legend-label {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-note {
  margin-left: auto;
  color: var(--ink-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ================= Shot cards ================= */

.shot-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.shot-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 15px 20px 17px 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease),
              opacity 0.2s var(--ease);
}
.shot-card:hover { border-color: var(--border-strong); }

.shot-card.dragging {
  opacity: 0.35;
}


.drop-indicator {
  position: absolute;
  left: 44px;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  pointer-events: none;
  z-index: 10;
  transition: top 0.12s var(--ease);
}
.drop-indicator::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  touch-action: none;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint);
  cursor: grab;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.drag-handle:hover { background: var(--surface-soft); color: var(--ink); }
.drag-handle:active { cursor: grabbing; }

.shot-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  padding: 0 1px;
  flex-shrink: 0;
}

.shot-check {
  width: 21px;
  height: 21px;
  margin-right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  flex-shrink: 0;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), transform 0.1s var(--ease);
}
.shot-check:hover { border-color: var(--ink-faint); color: var(--ink-faint); }
.shot-check:active { transform: scale(0.9); }
.shot-check.checked {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.shot-check.checked:hover { background: var(--ink-hover); border-color: var(--ink-hover); }

.shot-card.done { background: var(--surface-hover); }
.shot-card.done :is(.shot-num, .type-chip, .dur-btn, .audio-btn, .shot-textarea, .ref-strip, .audio-row) {
  opacity: 0.45;
}

.shot-row-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.shot-collapse svg { transform: rotate(180deg); }

/* ---------- Completed shot: one-line row ---------- */

.shot-line {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 7px 14px 7px 12px;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              opacity 0.2s var(--ease);
}
.shot-line:hover { background: var(--surface); border-color: var(--border-strong); }
.shot-line.dragging { opacity: 0.35; }

.shot-line .shot-check { margin-top: 0; }

.shot-line-type {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
}

.shot-line-desc {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: rgba(43, 42, 40, 0.25);
}

.shot-line-dur {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.shot-line-delete {
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.shot-line:hover .shot-line-delete { opacity: 1; }

.shot-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shot-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
}

.shot-duration {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px 5px 8px;
  cursor: text;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.shot-duration:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.shot-duration:focus-within { border-color: var(--ink-faint); }

.shot-duration-input {
  width: 38px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.shot-duration-input::-webkit-outer-spin-button,
.shot-duration-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.shot-duration-input::placeholder { color: var(--ink-faint); }

.shot-duration-suffix {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* camera-angle chip: styled face + invisible native select on top */
.type-chip {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.type-chip .type-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.type-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.type-chip:hover .type-face {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--ink-soft);
}
.type-chip:focus-within .type-face { border-color: var(--ink-faint); }

.type-face.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  padding: 0 13px;
}
.type-chip:hover .type-face.active {
  background: var(--ink-hover);
  border-color: var(--ink-hover);
  color: var(--bg);
}

.shot-textarea {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-left: -10px;
  resize: none;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  min-height: 32px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.shot-textarea:hover { background: var(--hover-weak); }
.shot-textarea:focus { background: var(--bg); border-color: var(--border); }
.shot-textarea::placeholder { color: var(--ink-faint); }

/* ---------- Duration chip ---------- */

.dur-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-faint);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.1s var(--ease);
}
.dur-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--ink-soft);
}
.dur-btn:active { transform: scale(0.92); }

.dur-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  padding: 0 13px;
}
.dur-btn.active:hover { background: var(--ink-hover); border-color: var(--ink-hover); }

/* ---------- Audio icon button ---------- */

.audio-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--ink-faint);
  flex-shrink: 0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.1s var(--ease);
}
.audio-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--ink-soft);
}
.audio-btn:active { transform: scale(0.92); }

.audio-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.audio-btn.active:hover { background: var(--ink-hover); border-color: var(--ink-hover); }

/* Hidden bubbles still affect scroll bounds: keep their wrapping and width
   identical before, during and after hover. */
.type-chip[data-tip]::after,
.audio-btn[data-tip]::after,
.post-card-info[data-tip]::after,
.cal-chip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 300px;
  background: var(--tip-bg);
  color: var(--tip-fg);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  white-space: pre-line;
  pointer-events: none;
  z-index: 30;
}
/* the arrow rests hidden like the bubble does, and fades in on the same
   delay; otherwise it would pop up alone before the bubble arrives */
.type-chip[data-tip]::before,
.audio-btn[data-tip]::before,
.post-card-info[data-tip]::before,
.cal-chip[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: var(--tip-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease) 0s;
  z-index: 29;
}
.type-chip[data-tip]:hover::before,
.audio-btn[data-tip]:hover::before,
.post-card-info[data-tip]:hover::before,
.post-card-info[data-tip]:focus-visible::before,
.cal-chip[data-tip]:hover::before,
.cal-chip[data-tip]:focus-visible::before {
  opacity: 1;
  transition-delay: 0.35s;
}

.notes-btn.active { width: auto; min-width: 30px; padding: 0 11px; gap: 5px; border-radius: 999px; }
.notes-count { font-size: 11.5px; font-weight: 600; }

/* ---------- Notes editor ---------- */

.notes-row {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.notes-row:focus-within {
  background: var(--bg);
  border-color: var(--border);
}

.notes-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  line-height: 1.4;
  padding: 5px 0;
  color: var(--ink);
}
.notes-input + .notes-input { border-top: 1px solid var(--border); }
.notes-input::placeholder { color: var(--ink-faint); }

/* ---------- Audio row ---------- */

.audio-row {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: text;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.audio-row:hover { background: var(--surface-hover); }
.audio-row:focus-within {
  background: var(--bg);
  border-color: var(--border);
}

.audio-row-icon {
  display: flex;
  align-items: center;
  color: var(--ink-faint);
  padding-top: 4px;
  flex-shrink: 0;
}

.audio-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  resize: none;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 21px;
  color: var(--ink);
}
.audio-input::placeholder { color: var(--ink-faint); }

/* ---------- Reference images ---------- */

.ref-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease), outline-color 0.2s var(--ease);
  outline: 2px dashed transparent;
  outline-offset: 4px;
}
.ref-strip.drag-over {
  background: var(--surface-soft);
  outline-color: var(--border-strong);
}

.ref-thumb {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.ref-thumb:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reference thumbnails use the same quiet skeleton pulse as section loaders. */
.ref-thumb.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface-soft);
  animation: skeleton-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
.ref-thumb.loading img { opacity: 0; }

/* Instagram embed page scaled down to tile size; the negative top crops the
   embed's profile header so the media fills the tile. Clicks stay on the
   tile link (pointer-events: none). */
.ref-thumb-embed {
  position: absolute;
  /* the embed is 320px wide with a ~50px profile header; the scale maps it
     onto the tile (0.2 = the 64px reference tiles, overridden per mood tile) */
  top: calc(-50px * var(--embed-scale, 0.2));
  left: 0;
  width: 320px;
  height: 430px;
  border: 0;
  transform: scale(var(--embed-scale, 0.2));
  transform-origin: top left;
  pointer-events: none;
  background: #fff;
}

/* fallback tile when the URL isn't a direct image (e.g. an Instagram post) */
.ref-thumb.ref-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
}
.ref-thumb.ref-link-card:hover { background: var(--surface-hover); }

.ref-link-icon {
  display: flex;
  color: var(--ink-soft);
}
.ref-link-icon svg { width: 15px; height: 15px; }

.ref-link-domain {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

.ref-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(43, 42, 40, 0.65);
  color: #FDFCFA;
  opacity: 0;
  transition: opacity 0.15s var(--ease), background 0.15s var(--ease);
  cursor: pointer;
}
.ref-thumb:hover .ref-thumb-remove { opacity: 1; }
.ref-thumb-remove:hover { background: rgba(43, 42, 40, 0.9); }

.ref-add {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.ref-add:hover {
  border-color: var(--ink-faint);
  color: var(--ink-soft);
  background: var(--surface-soft);
}

.shot-delete {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.shot-card:hover .shot-delete,
.shot-card:focus-within .shot-delete { opacity: 1; }

/* ================= Scene rows ================= */

.scene-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 0 12px 0 2px;
}
.scene-row:first-child { margin-top: 0; }
.scene-row.dragging { opacity: 0.35; }

.scene-title {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.scene-title:hover { background: var(--hover-weak); }
.scene-title:focus { background: var(--hover-med); color: var(--ink); }
.scene-title::placeholder {
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

.scene-stats {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-right: 2px;
}

.scene-chevron svg {
  transition: transform 0.2s var(--ease);
}
.scene-row.collapsed .scene-chevron svg {
  transform: rotate(-90deg);
}

.scene-delete {
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.scene-row:hover .scene-delete,
.scene-row:focus-within .scene-delete { opacity: 1; }

.add-shot-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: -2px 0 4px 40px;
  padding: 5px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  font-size: 12.5px;
  font-weight: 500;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.add-shot-inline:hover { color: var(--ink); background: var(--surface-soft); }
.add-shot-inline svg { width: 11px; height: 11px; }

/* ================= Add shot / scene ================= */

.add-row {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.add-row[hidden] { display: none; }

.btn-add-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 2;
  padding: 14px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.btn-add-shot:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
  background: var(--surface);
}

.btn-add-scene { flex: 1; }

/* ================= Modals ================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade-in 0.18s var(--ease);
  padding: 24px;
}

.modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  animation: modal-in 0.22s var(--ease);
}
/* the project dialog grew a workflow list: scroll on short windows */
#modal-list .modal { max-height: calc(100vh - 48px); overflow-y: auto; }

.modal h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.modal-text { color: var(--ink-soft); font-size: 14px; }

.field { display: block; margin-bottom: 16px; }

.field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-faint);
}

/* collapsible field: the label doubles as the toggle, chevron points
   right while folded and down while open (like scene rows) */
.field-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
}
.field-toggle .field-label { margin-bottom: 0; }
.field-toggle svg {
  flex: none;
  transform: rotate(-90deg);
  transition: transform 0.2s var(--ease);
}
.field-toggle:hover .field-label { color: var(--ink); }
.field-toggle:focus-visible { outline: 2px solid var(--ink-faint); outline-offset: 3px; border-radius: 3px; }
.field-collapsible.open .field-toggle { margin-bottom: 6px; }
.field-collapsible.open .field-toggle svg { transform: none; }
.field-collapsible:not(.open) textarea,
.field-collapsible:not(.open) .wf-list { display: none; }

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  padding: 9px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink-faint);
  box-shadow: 0 0 0 3px rgba(43, 42, 40, 0.07);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }
.field textarea { resize: vertical; min-height: 60px; line-height: 1.5; }

/* series dropdown: a select-look button opening a switcher menu whose
   last row is a free-text input for a new series */
.series-switcher { display: block; }
.series-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  padding: 9px 12px;
  font-size: 14px;
  text-align: left;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.series-select:focus-visible,
.series-select[aria-expanded="true"] {
  outline: none;
  border-color: var(--ink-faint);
  box-shadow: 0 0 0 3px rgba(43, 42, 40, 0.07);
}
.series-select > svg { flex-shrink: 0; color: var(--ink-soft); }
.series-select[aria-expanded="true"] > svg { transform: rotate(180deg); }
.series-select-value {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.series-select-value.empty { color: var(--ink-faint); }
.series-select-value.has-series { color: var(--series-color); font-weight: 600; }
.series-select-value .series-mark { margin-right: 7px; }

/* series select + icon button side by side */
.series-controls { display: flex; gap: 8px; }
.series-controls .series-switcher { flex: 1; min-width: 0; }
.series-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--series-color, var(--ink-faint));
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.series-icon-btn:disabled { cursor: default; opacity: 0.5; }
.series-icon-btn:not(:disabled):hover,
.series-icon-btn[aria-expanded="true"] { border-color: var(--ink-faint); }
.series-icon-btn .series-mark { margin: 0; }
.series-icon-btn .series-mark.has-icon svg { width: 16px; height: 16px; }
.series-icon-btn .series-mark:not(.has-icon)::before { width: 8px; height: 8px; }
/* opens upward: the series row sits at the bottom of the post modal */
.switcher-menu.series-icon-menu {
  top: auto;
  bottom: calc(100% + 6px);
  min-width: 0;
  width: 302px;
  max-width: none;
  padding: 8px;
}
.series-icon-menu .icon-cell { font-size: 18px; line-height: 1; }
.series-menu-heading {
  padding: 2px 4px 8px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.series-icon-menu .series-rename-input { margin-bottom: 8px; font-weight: 600; }
.series-icon-menu .switcher-divider { margin-bottom: 8px; }

/* the project dialog's series list: swatch, mark, name, how many posts carry it */
.series-editor .series-row { grid-template-columns: auto auto auto minmax(0, 1fr) auto auto auto; gap: 6px; }
.series-editor .series-row .drag-handle { margin-right: -4px; }
.series-editor .series-row .icon-btn { margin-left: -4px; }
.series-color-btn {
  width: 18px;
  height: 18px;
  margin: 0 4px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--series-color, var(--ink-faint));
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px transparent;
  transition: transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
}
.series-color-btn:hover { transform: scale(1.1); }
.series-color-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink); }
/* opens upward like the icon menu: the series list sits at the bottom of the dialog */
.switcher-menu.series-color-menu {
  top: auto;
  bottom: calc(100% + 6px);
  min-width: 0;
  width: max-content;
  max-width: 210px;
  padding: 10px;
}
.series-color-menu .color-swatch.none { background: var(--surface-soft); }
.series-editor .series-icon-btn { width: 30px; height: 28px; }
.series-editor .series-icon-btn .series-mark.has-icon svg { width: 14px; height: 14px; }
.series-editor .series-icon-btn .series-mark:not(.has-icon)::before { width: 7px; height: 7px; }
.series-editor .wf-row-input { font-weight: 600; color: var(--series-color, var(--ink)); }
.series-editor .series-row-count {
  padding-right: 6px;
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.switcher-menu.series-menu { min-width: 100%; max-width: 280px; width: max-content; }
.switcher-menu.menu-right { left: auto; right: 0; }
.series-menu-input {
  width: 100%;
  border: none;
  background: var(--surface-soft);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13.5px;
  outline: none;
}
.series-menu-input::placeholder { color: var(--ink-faint); }

/* cover image field: URL box + upload button, preview above when set */
.cover-controls { display: flex; gap: 8px; }
.cover-controls input { flex: 1; min-width: 0; }
.cover-preview {
  position: relative;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}
.cover-preview img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}
.cover-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(23, 22, 20, 0.65);
  color: #faf9f6;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.cover-remove:hover { background: rgba(23, 22, 20, 0.85); }

/* compact side-by-side fields in wider modals */
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }
.field-row .field-grow { flex: 2; }

.modal-wide {
  max-width: 540px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

/* ---------- Color & icon pickers ---------- */

.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-swatch {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
}
.color-swatch:hover { transform: scale(1.08); }
.color-swatch.selected {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
}

.color-swatch.none {
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
}
.color-swatch.none::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-top: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg) translateY(6px);
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.icon-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
              border-color 0.15s var(--ease);
}
.icon-cell:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.icon-cell.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.icon-cell svg { width: 16px; height: 16px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.modal-overlay.alert [data-close] { display: none; }

/* ================= Sharing ================= */

/* share UI is hidden unless a sync API was detected */
.share-ui { display: none !important; }
body.sync-enabled .share-ui { display: inline-flex !important; }

.icon-btn.shared { color: var(--ink); }
#btn-voiceover.shared { color: var(--vo); }

/* the faces of everyone on a shared project, in the card's meta row */
.card-members {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 6px; /* balances the first face's negative margin */
}
.card-face { display: inline-flex; margin-left: -6px; }
.card-face:hover { z-index: 2; }
.card-members .avatar { box-shadow: 0 0 0 2px var(--surface); }
.card-members .avatar-count { font-size: 9px; font-weight: 700; }

.share-link-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.modal-subhead {
  margin-top: 24px;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.share-link-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  outline: none;
}
.share-link-row input:focus { border-color: var(--ink-faint); }

/* a checkbox row under a modal paragraph, e.g. "Include tasks" in the feed */
.modal-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.modal-check input {
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--ink);
}
/* a choice that only applies when the one above it is on */
.modal-check-sub { margin-top: 8px; padding-left: 22px; }

#btn-leave-project { margin-right: auto; }

.share-error {
  color: var(--danger);
  margin-top: 8px;
}

.member-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
}
.member-row .avatar { flex-shrink: 0; }
.member-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.member-name {
  font-size: 13.5px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-code {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.member-owner-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.member-row .btn-small {
  padding: 4px 10px;
  font-size: 12px;
}

#share-code-input { text-transform: uppercase; }
#share-code-input::placeholder { text-transform: none; }

/* ================= People: avatars ================= */

/* a colored circle wearing one of the ten faces; the face's head shapes
   fill with --avatar-color so ears and eyes layer correctly */
.avatar {
  --avatar-color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--avatar-color);
  color: #FAF9F6;
  flex-shrink: 0;
  overflow: hidden;
}
/* the drawing sits at 84% of its circle wherever an avatar appears, so
   faces look the same at every size: only the circle changes */
.avatar svg { width: 84%; height: 84%; }
.avatar-xs { width: 20px; height: 20px; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 60px; height: 60px; }
.avatar-count {
  --avatar-color: var(--surface-soft);
  color: var(--ink-soft);
  border: 1px solid var(--border-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* header stack: faces overlap, owner first; hover lifts one out */
.member-stack {
  display: flex;
  align-items: center;
  padding-left: 8px; /* balances the first face's negative margin */
}
.member-stack[hidden] { display: none; }
.avatar-btn {
  display: inline-flex;
  margin-left: -8px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.avatar-btn .avatar { box-shadow: 0 0 0 2px var(--bg); }
.avatar-btn:hover,
.avatar-btn:focus-visible { transform: translateY(-2px) scale(1.06); z-index: 2; }
.avatar-btn:focus-visible { outline: none; }
.avatar-btn:focus-visible .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink-faint); }

/* the dashboard's account button wears your own face */
#btn-account { gap: 8px; padding-left: 10px; }

/* modal tabs: a segmented switch under the title, one panel at a time */
.modal-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: -4px 0 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}
.modal-tab {
  flex: 1;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.modal-tab:hover { color: var(--ink); }
.modal-tab.active { background: var(--ink); color: var(--bg); }
.modal-tab:focus-visible { outline: 2px solid var(--ink-faint); outline-offset: 2px; }
.modal-panel > .modal-subhead:first-child { margin-top: 0; }

/* profile editor in the account modal */
#modal-account .modal {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.profile-head .field { flex: 1; margin-bottom: 0; }
.avatar-grid { grid-template-columns: repeat(5, 1fr); }
.avatar-cell {
  --avatar-color: var(--surface-soft);
  height: 46px;
  border-radius: 12px;
}
.avatar-cell:hover { --avatar-color: var(--surface-hover); }
.avatar-cell.selected { --avatar-color: var(--ink); }
.avatar-cell svg { width: 30px; height: 30px; }
.profile-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
}

/* ================= Animations ================= */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.shot-card.just-added { animation: card-in 0.25s var(--ease); }

[hidden] { display: none !important; }

/* ================= Planner ================= */

/* read-only context line under the post title in the shot editor:
   "3/7 done · ~28s", then where and when the post is planned */
.editor-context {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.editor-context-count { font-weight: 500; color: var(--ink); }

/* breadcrumb header: Feed › project, with a switcher dropdown */
.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* cancel the crumb-home pill padding so the logo sits exactly where
     the dashboard wordmark does — no jump when switching views */
  margin-left: -7px;
}

.crumb-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 7px;
  border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease);
}
.crumb-home:hover { background: var(--surface-hover); }
.crumb-home svg { display: block; }

.crumb-sep {
  color: var(--ink-faint);
  font-size: 15px;
  user-select: none;
  flex-shrink: 0;
}

.switcher {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* title + caret grouped as one pill-shaped control */
.crumb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: calc(var(--page-w) * 0.34);
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  padding: 5px 7px 5px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease);
}
.crumb-btn:hover { background: var(--surface-hover); }
.crumb-btn[aria-expanded="true"] { background: var(--surface-hover); }

.crumb-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumb-caret {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--ink-soft);
}
.crumb-btn:hover .crumb-caret { color: var(--ink); }
.crumb-btn[aria-expanded="true"] .crumb-caret svg { transform: rotate(180deg); }

.switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 250px;
  max-width: 330px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(26, 24, 22, 0.16);
  padding: 6px;
  animation: modal-in 0.14s var(--ease);
}

.switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--ink);
  transition: background 0.15s var(--ease);
}
.switcher-item:hover { background: var(--surface-hover); }
.switcher-item.current { background: var(--surface-soft); font-weight: 650; }

.switcher-item-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.switcher-item-meta {
  flex-shrink: 0;
  color: var(--ink-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.switcher-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}
.switcher-badge svg { width: 13px; height: 13px; }

.switcher-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

.switcher-new { color: var(--ink-soft); font-weight: 600; }
.switcher-new svg { width: 13px; height: 13px; }

/* split crumb: the title is a link to its page, the caret alone opens the
   switcher. Hovering anywhere lifts the whole pill; the half under the
   pointer gets its own wash on top (and the caret darkens) so it's clear
   which of the two you're about to press */
.crumb-split {
  max-width: calc(var(--page-w) * 0.34);
  align-items: stretch;
  border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease);
}
.crumb-split:hover,
.crumb-split:has(.crumb-toggle[aria-expanded="true"]) { background: var(--surface-hover); }
.crumb-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  line-height: normal;
  padding: 5px 4px 5px 8px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  transition: background 0.2s var(--ease);
}
.crumb-link:hover { background: var(--hover-med); }
.crumb-split .crumb-toggle {
  max-width: none;
  padding: 5px 7px 5px 4px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.crumb-split .crumb-toggle:hover,
.crumb-split .crumb-toggle[aria-expanded="true"] { background: var(--hover-med); }
.crumb-split:hover .crumb-caret { color: var(--ink-soft); }
.crumb-split .crumb-toggle:hover .crumb-caret,
.crumb-split .crumb-toggle[aria-expanded="true"] .crumb-caret { color: var(--ink); }

/* with a third (post) level, keep each crumb from hogging the header */
#crumbs-editor .crumb-btn, #crumbs-editor .crumb-split { max-width: calc(var(--page-w) * 0.22); }

@media (max-width: 560px) {
  .crumb-home span { display: none; }
  .crumb-btn, .crumb-split { max-width: calc(var(--page-w) * 0.4); }
  #crumbs-editor .crumb-btn, #crumbs-editor .crumb-split { max-width: calc(var(--page-w) * 0.26); }
}

/* toolbar: platform filter icon + dropdown, sitting with the other
   header actions on the right */
.plan-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* month / week grouping as a two-way pill switch */
.plan-group {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
}
.plan-group-btn {
  height: 22px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.plan-group-btn:hover { color: var(--ink); }
.plan-group-btn.active {
  background: var(--ink);
  color: var(--bg);
}

/* phones: the layout switch sits in its own row under the project title,
   stretched edge to edge with equal segments (see renderPlanToolbar) */
.plan-viewbar { display: flex; margin: -16px 0 20px; }
.plan-viewbar .plan-group { width: 100%; height: 34px; }
.plan-viewbar .plan-group-btn {
  flex: 1;
  height: 28px;
  line-height: 28px;
  padding: 0;
  font-size: 13px;
}

/* the button is at the right edge, so the dropdown hangs left */
.plan-toolbar .switcher-menu {
  left: auto;
  right: 0;
}

/* ================= Tasks panel ================= */
/* All side panels share the notes drawer width; only one is open at a time. */

/* ================= Followers panel ================= */
/* Instagram follower history the browser extension mirrors into the
   project: the same side panel as tasks, with shared goals, drawn with the
   extension's own chart code (js/vendor/ig/), which reads the --chart
   and --line/--muted/--fg/--card/--bg variables set here */
.followers-drawer {
  --line: var(--border);
  --muted: var(--ink-soft);
  --fg: var(--ink);
  --card: var(--surface-soft);
  --chart-cur: #D6249F;
  --chart-cmp: var(--ink-faint);
}
.followers-body { position: relative; z-index: 0; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.followers-body > * { flex-shrink: 0; }
.followers-drawer { overflow: hidden; height: 100dvh; }
.followers-drawer > .followers-header, .followers-drawer > .notes-foot { flex-shrink: 0; }
body.drawer-followers { overflow: hidden; }
/* Overlay sidebars own scrolling on narrow windows. Lock the root too:
   its horizontal overflow rule otherwise leaves the page scrollbar visible. */
@media (max-width: 1079px) {
  html:has(body:is(.drawer-followers, .drawer-tasks, .drawer-notes)),
  body:is(.drawer-followers, .drawer-tasks, .drawer-notes) { overflow: hidden; }
}

@media (min-width: 1080px) {
  body.drawer-followers #view-planner { height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  /* The desktop scroll container needs ordinary end spacing, rather than
     the page's 120px reserve, which makes fitting calendars overflow. */
  body.drawer-followers #view-planner > .editor-main { min-height: 0; padding-bottom: 44px; overflow-y: auto; overflow-x: hidden; }
  body.drawer-followers #view-planner > .followers-drawer { height: 100dvh; }
  #view-planner > .followers-drawer > :is(.followers-header, .notes-body, .notes-foot) { min-width: 0; width: 100%; }
}
.followers-goals-button[aria-expanded="true"] { background: var(--surface-soft); }
.followers-goal-row-actions { display: flex; align-items: center; gap: 4px; }
.followers-goal-edit { border: 0; background: transparent; color: var(--ink-soft); padding: 5px; font: inherit; font-size: 11px; cursor: pointer; }
.followers-goal-edit:hover { color: var(--ink); }
.followers-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.followers-handle { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.followers-handle:hover { text-decoration: underline; }
.followers-account {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  max-width: 60%;
}
.followers-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.followers-tiles .stat-value.up { color: var(--series-c3); }
.followers-tiles .stat-value.down { color: var(--danger); }
.followers-tiles .stat-tile { min-width: 0; }
.followers-gained-value { display: flex; align-items: flex-start; flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
.followers-gain-ticker { display: inline-flex; flex-direction: column; gap: 1px; padding-top: 1px; font-size: 10px; line-height: 1.1; font-weight: 600; letter-spacing: 0; }
.followers-gain-ticker.up { color: var(--series-c3); }
.followers-gain-ticker.down { color: var(--danger); }
.followers-gain-ticker.flat { color: var(--ink-soft); }
.followers-gain-delta { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.followers-gain-arrow { font-size: 12px; line-height: 10px; }
.followers-gain-percent { font-size: 9px; font-weight: 500; opacity: 0.8; white-space: nowrap; }
.followers-card { background: var(--surface-soft); border-radius: var(--radius-md); padding: 12px 14px; }
.followers-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.followers-card .followers-post-counts { margin-top: 4px; text-align: left; }
.followers-chart-controls { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; }
.followers-daily-toggle { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 4px 0; font-size: 11.5px; color: var(--ink-soft); background: transparent; cursor: pointer; }
.followers-daily-toggle::after { content: ''; width: 26px; height: 16px; border-radius: 999px; background: radial-gradient(circle at 8px 8px, var(--surface) 5px, transparent 5.5px), var(--ink-faint); }
.followers-daily-toggle[aria-checked="true"]::after { background: radial-gradient(circle at 18px 8px, var(--surface) 5px, transparent 5.5px), var(--chart-cur); }
.followers-daily-toggle[aria-checked="true"] { color: var(--ink); }
.followers-daily-toggle:focus-visible { outline: 2px solid var(--chart-cur); outline-offset: 3px; border-radius: 3px; }
.followers-card h3 { font-size: 13px; font-weight: 600; }
.followers-card .sub { font-size: 11.5px; color: var(--ink-soft); text-align: right; }
.followers-note { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
.followers-events { list-style: none; display: flex; flex-direction: column; }
.followers-event { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; min-width: 0; }
.followers-event:first-child { border-top: none; padding-top: 0; }
.followers-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
.followers-event-who { flex: 1; min-width: 0; overflow: hidden; }
.followers-event-who a { color: var(--ink); font-weight: 600; text-decoration: none; }
.followers-event-who a:hover { text-decoration: underline; }
.followers-event-who .name { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.followers-type { flex-shrink: 0; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; background: var(--surface); color: var(--ink-soft); }
.followers-type.followed { color: var(--series-c3); background: rgba(111, 192, 138, 0.16); }
.followers-type.unfollowed { color: var(--danger); background: rgba(196, 104, 94, 0.14); }
.followers-when { flex-shrink: 0; font-size: 11.5px; color: var(--ink-faint); }
.followers-remove { align-self: flex-start; }
/* nothing mirrored yet: the steps read as guidance, not an error */
.followers-connect { align-items: stretch; text-align: left; gap: 12px; padding: 20px 0; color: var(--ink-soft); }
.followers-connect h2 { font-size: 15px; font-weight: 600; color: var(--ink); }
.followers-connect p { max-width: none; font-size: 13.5px; }
.followers-connect ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.followers-connect ol b { color: var(--ink); }
.followers-connect ol a { color: var(--ink); }
.followers-connect .share-link-row { margin-top: 8px; }
.followers-connect .foot { font-size: 12px; color: var(--ink-faint); }
.followers-offline { font-size: 12px; color: var(--danger); }
/* the chart's own classes, from the extension's dashboard.css */
.followers-drawer .chart { position: relative; width: 100%; }
.followers-drawer .chart-svg { display: block; width: 100%; height: auto; }
.followers-drawer .chart-gridline { stroke: var(--line); stroke-width: 1; }
.followers-drawer .chart-zero { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.followers-drawer .chart-tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.followers-drawer .chart-value { fill: var(--fg); font-size: 12px; font-weight: 600; }
.followers-drawer .chart-ring { fill: var(--card); }
.followers-drawer .chart-crosshair { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
.followers-drawer .chart-hit { cursor: crosshair; }
.followers-drawer .chart-bar { transition: opacity .1s; }
.followers-drawer .chart-bar.lit { opacity: .75; }
.followers-drawer .chart-tip { position: absolute; pointer-events: none; background: color-mix(in srgb, var(--bg) 50%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.1); width: 260px; max-width: calc(100% - 8px); box-sizing: border-box; z-index: 2; }
.followers-drawer .chart-tip-band { position: absolute; top: 0; left: 0; width: 100%; height: 0; pointer-events: none; z-index: 3; }
.followers-drawer .chart-tip-band .chart-tip { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding: 9px 11px; box-shadow: none; isolation: isolate; }
.followers-drawer .chart-tip-band .chart-tip::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 6px); background: color-mix(in srgb, var(--bg) 50%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); clip-path: var(--tip-shape); z-index: -1; }
.followers-drawer .chart-tip-outline { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.followers-drawer .chart-tip-title { color: var(--muted); margin-bottom: 4px; }
.followers-drawer .chart-tip-row { display: flex; align-items: center; gap: 6px; }
.followers-drawer .chart-tip-row.muted strong { font-weight: 500; }
.followers-drawer .chart-tip-row strong { font-variant-numeric: tabular-nums; flex-shrink: 0; }
.followers-drawer .chart-tip-key { display: inline-block; width: 14px; flex-shrink: 0; border-top: 2px solid var(--key); border-radius: 2px; }
.followers-drawer .chart-tip-key.dashed { border-top-style: dashed; }
.followers-drawer .chart-tip-label { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.followers-drawer .chart-post-marker { cursor: pointer; outline: none; }
.followers-drawer .chart-post-marker:focus-visible > rect { stroke-width: 2; }
.followers-drawer .chart-tip-post { align-items: center; margin-top: 5px; }
.followers-drawer .chart-tip-post .chart-tip-label { color: var(--fg); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.followers-drawer .chart-tip-post strong { font-weight: 500; color: var(--muted); }
.followers-drawer .chart-tip-post.muted > :first-child { opacity: .25; }

.tasks-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.tasks-head-actions .plan-toolbar .switcher-menu { left: auto; right: 0; }

/* the post filter menu: series marks before the titles; a long list of
   posts scrolls inside the menu */
.tasks-filter-menu {
  /* hangs from a narrow button, so shrink-to-fit would stop at the
     min-width; size to the titles instead, up to a cap */
  width: max-content;
  min-width: 250px;
  max-width: min(360px, calc(100vw - 32px));
  max-height: min(60vh, 480px);
  overflow-y: auto;
}
.tasks-filter-menu .plan-filter-item { gap: 8px; }
.tasks-filter-menu .plan-filter-check { margin-right: 2px; }
.tasks-filter-menu .series-row-mark .series-mark { margin: 0; }
.tasks-filter-menu .task-filter-none { color: var(--ink-faint); width: 14px; justify-content: center; }
.tasks-filter-menu .switcher-item-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-filter-menu .switcher-item-meta { margin-left: auto; flex-shrink: 0; }

.tasks-body { padding: 4px 18px 22px 26px; }

/* link in the shot editor's context line */
.editor-context-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color 0.15s var(--ease);
}
.editor-context-link:hover { border-color: var(--ink); }

/* quick add: a bordered field with the preset chips underneath */
.tasks-add { margin: 2px 0 16px; }
.task-input {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.task-input::placeholder { color: var(--ink-faint); }
.task-input:focus { outline: none; border-color: var(--ink-faint); box-shadow: var(--shadow-sm); }

/* the quick-add bolt sits inside the input at its right edge; its menu
   of usual chores hangs below, right-aligned */
.tasks-quick-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-faint);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.tasks-quick-btn svg { width: 15px; height: 15px; }
.tasks-quick-btn:hover { background: var(--surface-hover); color: var(--ink); }
.tasks-quick-btn[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
.tasks-add .switcher-menu { left: auto; right: 0; }
/* its tooltip opens leftward over the input: above it sits under the
   panel header, below is where the menu drops */
.tasks-quick-btn[data-tip]::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%);
}

/* rows: box · title (+ note) · hover actions, with the pills tucked
   under the title, grouped under due-date headers */
.task-list { border-top: 1px solid var(--border); }
.task-group {
  padding: 12px 0 4px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.task-group.overdue { color: var(--danger); }
.task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 10px;
  padding: 7px 0 9px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s var(--ease);
}
.task-row.just-added { animation: task-in 0.5s var(--ease); }
/* the grip sits in the gutter left of the box and shows on hover; a
   dragged row fades, the slot it would land in draws a line */
.task-row { position: relative; }
.task-grip {
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 24px;
  opacity: 0;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), opacity 0.15s var(--ease);
}
.task-row:hover .task-grip { opacity: 1; }
.task-row.dragging { opacity: 0.35; }
.task-row.drop-before { box-shadow: 0 -2px 0 0 var(--ink); }
.task-row.drop-after { box-shadow: 0 2px 0 0 var(--ink); }
.task-group.drop-target { color: var(--ink); box-shadow: 0 2px 0 0 var(--ink); }
@media (hover: none) { .task-grip { display: none; } }
@keyframes task-in {
  from { background: var(--hover-med); }
  to { background: transparent; }
}

.task-check {
  width: 16px;
  height: 16px;
  margin: 0 0 0 2px;
  accent-color: var(--ink);
  cursor: pointer;
  align-self: center;
}

.task-body { min-width: 0; display: flex; flex-direction: column; }
.task-title,
.task-note {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  margin-left: -8px;
  color: var(--ink);
  transition: background 0.2s var(--ease);
}
.task-title { font-size: 14px; font-weight: 600; }
.task-title::placeholder, .task-note::placeholder { color: var(--ink-faint); font-weight: 500; }
.task-title:hover, .task-note:hover { background: var(--hover-weak); }
.task-title:focus, .task-note:focus { background: var(--hover-med); }
.task-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
  padding-top: 0;
  resize: none;
  font-family: var(--font);
  /* grows with the text (app.js) up to three lines, then scrolls */
  max-height: calc(3 * 1.4em + 4px);
  overflow-y: auto;
}
.task-row.done .task-title { text-decoration: line-through; color: var(--ink-faint); font-weight: 500; }
.task-row.done .task-note { color: var(--ink-faint); }

/* the row's right side: post / assignee / due icons, then the "more"
   button, all along the title's line */
.task-side {
  grid-row: 1;
  grid-column: 3;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}
/* icon pills: post, assignee, due date. At rest only the set ones are
   drawn, bare; empty ones and the more button wait for the row's hover.
   They keep their place so nothing shifts. What a pill holds is the tooltip */
.task-pick:not(.set),
.task-more { opacity: 0; }
.task-row:hover .task-pick,
.task-row:focus-within .task-pick,
.task-row:hover .task-more,
.task-row:focus-within .task-more,
.task-pick[aria-expanded="true"],
.task-more[aria-expanded="true"] { opacity: 1; }
.task-pills {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.task-pick-wrap { position: relative; display: inline-flex; align-items: center; }
.task-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  min-width: 24px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), opacity 0.15s var(--ease);
}
.task-pick svg { flex-shrink: 0; }
/* a face fills the pill: 24px pill, 1px border, 22px face */
.task-pick .avatar-xs { width: 22px; height: 22px; margin-left: 0; }
.task-pick-icon { display: inline-flex; }
.task-pick:hover,
.task-pick[aria-expanded="true"] { background: var(--surface-hover); color: var(--ink); border-color: var(--border); }
/* a set pill is bare at rest; its outline comes with its own hover */
.task-pick.set { color: var(--ink-soft); }
.task-pick.set:hover, .task-pick.set[aria-expanded="true"] { color: var(--ink); border-color: var(--border-strong); }
.task-row.done .task-pick.set { opacity: 0.6; }
.task-row.overdue .task-due-btn.set { color: var(--danger); }
.task-row.overdue .task-due-btn.set:hover { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.task-due-btn.today { color: var(--ink); }
/* tooltips hang off the panel's right edge, so they open leftward */
.task-side [data-tip]::after { left: auto; right: 0; transform: none; }

/* the post pill carries its series' mark and color; no series, a camera */
.task-post-btn .series-row-mark { width: auto; }
.task-post-btn .series-mark { margin: 0; }
.task-post-btn.has-series.set:hover,
.task-post-btn.has-series.set[aria-expanded="true"] { border-color: color-mix(in srgb, var(--series-color) 45%, transparent); }
.task-menu-mark .series-mark { margin: 0; }
.task-menu-mark .series-mark.has-icon svg { width: 14px; height: 14px; }

/* the assignee pill is faces only; who they are shows on hover */
.task-who-btn .task-faces { margin-left: 0; }
.task-who-btn .task-faces .avatar-xs { margin-left: 0; }
.task-who-btn .task-faces .avatar + .avatar { margin-left: -6px; }
.task-who-btn.set { padding: 0; }

/* pick menus hang from the pill's right edge, like the more menu, so
   they stay inside the panel; near its bottom they open upward instead
   (app.js adds .up) */
.task-pick-wrap .switcher-menu { left: auto; right: 0; }
/* several assignees: overlapping faces on the pill and the calendar row */
.task-faces { display: inline-flex; align-items: center; flex-shrink: 0; }
.task-faces .avatar { box-shadow: 0 0 0 1.5px var(--bg); }
.task-faces .avatar + .avatar { margin-left: -6px; }
.task-faces .avatar-count { font-size: 9px; font-weight: 700; }
.task-pick .task-faces { margin-left: 0; }
.cal-task .task-faces .avatar + .avatar { margin-left: -5px; }

/* a tick on the chosen rows of a pick menu */
.task-menu-check { display: none; margin-left: auto; color: var(--ink); }
.task-menu-check svg { width: 11px; height: 11px; }
.task-menu .switcher-item.current .task-menu-check { display: inline-flex; }
.task-menu .switcher-item .switcher-item-meta { margin-left: auto; }
.task-menu .switcher-item .switcher-item-meta + .task-menu-check { margin-left: 8px; }

.switcher-badge-none { background: transparent; border: 1px dashed var(--border-strong); }
.task-menu { min-width: 210px; }
.task-menu.up { top: auto; bottom: calc(100% + 6px); }
/* a group label inside a pick menu, e.g. "Past posts" */
.task-menu-heading {
  padding: 4px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.task-menu .switcher-item[aria-checked="true"] { font-weight: 650; }

/* the due pill's calendar: quick picks, month header with arrows, a
   seven-column grid; the chosen day is inked, today outlined */
.date-menu { width: 268px; min-width: 0; max-height: none; padding: 10px; overflow: hidden; }
.date-quick { display: flex; gap: 4px; margin-bottom: 10px; }
.date-quick-btn {
  flex: 1;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  font-size: 12px;
  font-weight: 550;
  color: var(--ink-soft);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.date-quick-btn:hover { background: var(--surface-hover); color: var(--ink); }
.date-quick-btn.current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  margin-bottom: 2px;
  padding-left: 4px;
}
.date-month { font-size: 13px; font-weight: 650; color: var(--ink); }
.date-nav-group { display: inline-flex; gap: 2px; }
.date-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-soft);
}
.date-nav:hover { background: var(--surface-hover); color: var(--ink); }
.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-wd {
  padding: 2px 0 4px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.date-day {
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: background 0.15s var(--ease);
}
.date-day:hover { background: var(--surface-hover); }
.date-day.out { color: var(--ink-faint); }
.date-day.today { font-weight: 700; border-color: var(--border-strong); }
.date-day.current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.date-day.current:hover { background: var(--ink-hover); }
.date-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.date-clear { padding: 6px 4px; }

/* the "more" button: a pill-sized dot menu holding note and delete;
   its menu hangs right-aligned so it stays inside the panel */
.task-more-wrap { position: relative; }
.task-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-faint);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), opacity 0.15s var(--ease);
}
.task-more:hover,
.task-more[aria-expanded="true"] { background: var(--surface-hover); color: var(--ink); }
.task-more-menu { left: auto; right: 0; min-width: 170px; }
.switcher-item-danger { color: var(--danger); }
.switcher-item-danger .switcher-badge { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* done tasks fold away under the open ones */
.tasks-done { margin-top: 2px; }
.tasks-done-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 2px 6px;
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  user-select: none;
}
.tasks-done-summary::-webkit-details-marker { display: none; }
.tasks-done-summary:hover { color: var(--ink); }
.tasks-done-caret { display: inline-flex; color: var(--ink-faint); transition: transform 0.2s var(--ease); transform: rotate(-90deg); }
.tasks-done[open] .tasks-done-caret { transform: none; }
.tasks-done-count {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tasks-done .task-row:first-of-type { border-top: 1px solid var(--border); }

.tasks-empty {
  padding: 36px 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-faint);
}

/* no hover on touch, so everything stays in view */
@media (hover: none) {
  .task-pick:not(.set), .task-more { opacity: 1; }
}

@media (max-width: 720px) {
  .tasks-drawer, .followers-drawer { width: 100vw; }
  .tasks-body { padding: 0 14px 18px 18px; }
}

.plan-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.plan-filter-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.plan-filter-btn.active,
.plan-filter-btn[aria-expanded="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* count of selected platforms, riding on the funnel button */
.plan-filter-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.plan-filter-menu { min-width: 180px; }

.plan-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--ink);
  transition: background 0.15s var(--ease);
}
.plan-filter-item:hover { background: var(--surface-hover); }

/* checkbox square; the tick appears when the platform is selected */
.plan-filter-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  color: transparent;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
              color 0.15s var(--ease);
}
.plan-filter-item.checked { font-weight: 650; }
.plan-filter-item.checked .plan-filter-check {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* the posts: cards grouped by month, each opening its shot list */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}

/* dashed add-a-post card at the end of the grid */
.post-card-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 128px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.post-card-add:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
  background: var(--hover-weak);
}
.post-card-add svg { width: 15px; height: 15px; }

.post-month {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin-bottom: -4px;
}
.post-month:not(:first-child) { margin-top: 14px; }

/* calendar grouping: continuous Mon–Sun weeks inside the post grid; the
   7-column grid wraps rows itself and month titles span a full row */
.post-calendar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  /* lets the day boxes size their height from the calendar's width */
  container-type: inline-size;
}
/* weekday row stays pinned under the sticky app header while the
   calendar scrolls; the page background hides cells passing beneath */
.cal-weekdays {
  position: sticky;
  top: var(--plan-header-h, 60px);
  z-index: 5;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: -6px;
  padding: 6px 0 4px;
  background: var(--bg);
}
.cal-weekday {
  padding: 0 8px 2px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
}
.cal-weekday-short { display: none; }
.post-calendar .post-month { margin: 10px 0 0; }
.post-calendar .post-month:first-of-type { margin-top: 4px; }

.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* square by default (min-height = column width); a day with more
     chips than fit grows its whole row, unlike aspect-ratio which would
     stretch that one cell alone */
  min-height: calc((100cqw - 6 * 6px) / 7);
  min-width: 0;
  padding: 6px 6px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.cal-day:hover { border-color: var(--border-strong); background: var(--surface-hover); }
/* days already gone fade back; hovering brings one forward again */
.cal-day.is-past { opacity: 0.5; transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.cal-day.is-past:hover,
.cal-day.is-past:focus-within,
.cal-day.is-past.drop-target { opacity: 1; }
.cal-day.is-first { border-color: var(--border-strong); }
.cal-day-num {
  align-self: flex-end;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cal-day.is-first .cal-day-num { color: var(--ink); }
.cal-day.is-today .cal-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
}
.cal-day-posts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
/* dated tasks under the day's posts: a tick box and a quiet one-liner */
.cal-day-tasks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-top: 3px;
}
.cal-task {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 2px 4px 2px 3px;
  border-radius: 5px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.cal-task:hover, .cal-task:focus-visible { background: var(--hover-med); color: var(--ink); outline: none; }
.cal-task-check {
  width: 12px;
  height: 12px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.cal-task-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-task .avatar-xxs { width: 14px; height: 14px; }
.cal-task.overdue { color: var(--danger); }
.cal-task.done { color: var(--ink-faint); }
.cal-task.done .cal-task-title { text-decoration: line-through; }

.cal-day-add {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 0.15s var(--ease), color 0.15s var(--ease);
}
.cal-day-add svg { width: 13px; height: 13px; }
.cal-day:hover .cal-day-add,
.cal-day:focus-within .cal-day-add { opacity: 1; }

/* compact post inside a day: series colour bar, mark, episode, title */
.cal-chip {
  --series-color: var(--ink-faint);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  min-width: 0;
  padding: 3px 6px 3px 5px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--series-color);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.cal-chip:hover,
.cal-chip:focus-visible { border-color: var(--border-strong); border-left-color: var(--series-color); background: var(--surface-hover); }
.cal-chip .series-mark { margin: 0; }
/* Series and episode share the top slot; the post type sits underneath. */
.cal-chip .series-mark { margin-top: 1.5px; }
.cal-chip-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.cal-chip-ep {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1.2;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.cal-chip-title {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* Room for the stacked series and type icons. */
.cal-chip.has-ep .cal-chip-title { min-height: calc(2 * 1.25em); }
.cal-chip-check { display: inline-flex; flex-shrink: 0; margin-top: 1px; color: var(--audio); }
/* edit pencil floating over the chip's top-right corner while hovered */
.cal-chip-edit {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.cal-chip-edit svg { width: 12px; height: 12px; }
.cal-chip:hover .cal-chip-edit,
.cal-chip:focus-within .cal-chip-edit { opacity: 1; }
.cal-chip-edit:hover { color: var(--ink); border-color: var(--border-strong); }
.cal-chip.dragging .cal-chip-edit { opacity: 0; }
/* the chip's bubble sits above the calendar cells; it yields to the
   pencil's own tooltip while that is hovered, and to a drag */
.cal-chip[data-tip]:hover::after { z-index: 60; }
.cal-chip[data-tip]:hover::before { z-index: 59; }
.cal-chip:has(.cal-chip-edit:hover)::after,
.cal-chip:has(.cal-chip-edit:hover)::before,
.cal-chip.dragging::after,
.cal-chip.dragging::before { opacity: 0; }
.cal-chip-check svg { width: 12px; height: 12px; }
.cal-chip.status-scheduled {
  border-color: color-mix(in srgb, var(--vo) 40%, var(--border));
  border-left-color: var(--series-color);
  background: color-mix(in srgb, var(--vo) 10%, var(--surface));
}
.cal-chip.status-posted { background: var(--surface-soft); color: var(--ink-soft); }
/* dragging a chip onto another day */
.cal-chip.dragging { opacity: 0.35; }
.cal-day.drop-target {
  border-color: var(--vo);
  background: color-mix(in srgb, var(--vo) 8%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--vo) 35%, transparent);
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.post-card:hover,
.post-card:focus-visible {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.post-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  /* leave room for the hover actions in the corner */
  padding-right: 56px;
}

/* custom cover image: large picture on top of the card, inset with
   rounded corners; the card grows to fit */
.post-card-cover {
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--radius-md) - 5px);
  overflow: hidden;
  background: var(--surface-soft);
}
.post-card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-card-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* up to two lines, then an ellipsis */
.post-card-title {
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* series · episode eyebrow above the title; always rendered (kept at
   one line height when empty) so titles line up across cards */
.post-card-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 18px;
}
/* the series name in the kicker: mark + tinted text; the episode after
   the dot keeps the soft ink */
.series-tag { color: var(--series-color); }
/* the mark before a series name: the series icon, or a dot by default */
.series-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* middle-aligned 1em box: the dot and an icon sit at the same height
     regardless of content (an inline-flex baseline would depend on it) */
  height: 1em;
  vertical-align: middle;
  margin-right: 6px;
  color: var(--series-color);
  flex-shrink: 0;
}
.series-mark:not(.has-icon)::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--series-color);
}
.series-mark.has-icon svg { width: 13px; height: 13px; display: block; }
/* inline next to text, middle sits on the x-height; lift the mark to
   center it on the cap height (flex-centered spots need no nudge) */
.series-tag .series-mark,
.series-select-value .series-mark { position: relative; top: -2px; }
/* dropdown rows: fixed-width slot so titles line up */
.series-row-mark { display: inline-flex; width: 14px; justify-content: center; flex-shrink: 0; }
.series-row-mark .series-mark { margin: 0; }
.post-card.status-posted .post-card-kicker .series-tag { color: var(--series-color); opacity: 0.7; }

.post-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 2px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* format · type · shot count as one plain meta line; flex: 1 keeps the
   info icon and date packed to the right when all three are present */
.post-card-shots {
  flex: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-faint);
}
.post-card-shots.active { color: var(--ink-soft); }

.post-card-date {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* [i] showing the post description as a tooltip (never on the card itself) */
.post-card-info {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--ink-faint);
  cursor: help;
}
.post-card-info:hover,
.post-card-info:focus-visible { color: var(--ink-soft); }
.post-card-info:focus-visible { outline: none; }
.post-card-date.empty { color: var(--ink-faint); }

/* status looks: scheduled = committed to a date, posted = settled/done */
.post-card.status-scheduled {
  border-color: color-mix(in srgb, var(--vo) 40%, var(--border));
}
.post-card.status-scheduled:hover,
.post-card.status-scheduled:focus-visible {
  border-color: color-mix(in srgb, var(--vo) 60%, var(--border-strong));
}
.post-card.status-posted {
  background: var(--surface-soft);
  border-color: var(--border);
}
.post-card.status-posted .post-card-title,
.post-card.status-posted .post-card-kicker { color: var(--ink-soft); }

/* scheduled: the date turns into a filled blue pill with a timer;
   posted: plain date with an outlined green circle-check beside it */
.post-card-date.scheduled {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--vo);
  color: var(--on-vo);
}
.post-card-date.scheduled svg { width: 12px; height: 12px; flex-shrink: 0; }
.post-card-date.posted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.post-card-date.posted svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--audio); }

.post-card .card-actions { top: 10px; right: 10px; }
.post-card:hover .card-actions,
.post-card:focus-within .card-actions { opacity: 1; }

/* ================= Timeline ================= */

.timeline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* break out of the centered page column to near-full viewport width */
  margin-inline: calc(50% - var(--page-w) / 2 + 20px);
}

.timeline-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.timeline-add-scene {
  font-size: 12.5px;
  padding: 5px 10px;
  gap: 6px;
}
.timeline-add-scene svg { width: 12px; height: 12px; }

.timeline-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.timeline-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.timeline-zoom-btn { width: 26px; height: 26px; }

.timeline-zoom-pct {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.timeline-audio-toggle.shared { color: var(--audio); }

.timeline-empty {
  margin: 0;
  padding: 28px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.timeline-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.timeline-inner {
  position: relative;
  min-width: 100%;
}

.timeline-ruler {
  position: relative;
  height: 24px;
  border-bottom: 1px solid var(--border);
}

.timeline-tick {
  position: absolute;
  top: 4px;
  font-size: 10px;
  color: var(--ink-faint);
  transform: translateX(3px);
  font-variant-numeric: tabular-nums;
}
.timeline-tick::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 12px;
  width: 1px;
  height: 8px;
  background: var(--border-strong);
}

.timeline-track {
  position: relative;
  height: 82px;
  border-bottom: 1px solid var(--border);
  cursor: crosshair; /* drag on blank space draws a new shot */
}
.timeline-track:last-child { border-bottom: none; }

.timeline-track-name {
  position: sticky;
  left: 8px;
  z-index: 3;
  display: inline-block;
  margin-top: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-faint);
  pointer-events: none;
}
.timeline-track-name.renamable {
  pointer-events: auto;
  cursor: text;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.timeline-track-name.renamable:hover {
  color: var(--ink-soft);
  background: var(--surface-hover);
}

.timeline-track-rename {
  position: sticky;
  left: 8px;
  z-index: 3;
  margin-top: 3px;
  padding: 1px 5px;
  width: 180px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink);
}
.timeline-track-rename:focus { outline: none; border-color: var(--ink-faint); }

.timeline-clip {
  position: absolute;
  top: 19px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  color: #FAF9F6;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer; /* opens the shot details modal */
}
.timeline-clip.neutral {
  background: var(--surface-soft);
  color: var(--ink-soft);
  border: 1px solid var(--border-strong);
}
.timeline-clip.placeholder {
  background: var(--surface-soft);
  color: var(--ink-soft);
  border: 1.5px dashed var(--clip-accent, var(--border-strong));
}
.timeline-clip.done { opacity: .55; }
.timeline-clip.just-added { animation: card-in 0.25s var(--ease); }
.timeline-ghost {
  background: var(--surface-soft);
  color: var(--ink-soft);
  border: 1.5px dashed var(--clip-accent, var(--border-strong));
  justify-content: flex-end;
  pointer-events: none;
}

/* green audio strip below a clip that has audio notes */
.timeline-track.has-audio { height: 104px; }

.timeline-audio {
  position: absolute;
  top: 80px;
  height: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 5px;
  background: var(--audio);
  color: var(--on-audio);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer; /* opens the shot details modal, like the clip above it */
}
.timeline-audio.done { opacity: .55; }

.timeline-audio-icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: .7;
}
.timeline-audio-icon svg { width: 10px; height: 10px; }

.timeline-audio-text {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* voice-over track: one row of chat-bubble cards parsed from the post text */
.timeline-track.timeline-vo-track {
  height: 54px;
  cursor: pointer; /* the whole row opens the voice-over editor */
}

.timeline-vo {
  position: absolute;
  top: 19px;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--vo);
  color: var(--on-vo);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab; /* drag sideways to grow/shrink the pause before it */
  touch-action: none;
}
.timeline-vo:active { cursor: grabbing; }

.timeline-vo.placeholder {
  background: transparent;
  border: 1.5px dashed var(--vo);
  color: var(--ink-soft);
  cursor: pointer;
}

.timeline-vo-text {
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---------- Inspiration mood board ---------- */

.mood-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 15px 20px 17px;
  box-shadow: var(--shadow-sm);
}
.inspiration-panel { margin-bottom: 24px; }

/* Pinterest-style masonry: a 4-column grid with 1px auto-rows; JS spans
   each tile over as many rows as its natural height (sizeMoodTile), so
   images keep their aspect ratio and a highlighted tile can span two
   columns — something CSS multi-column flow can't do */
.mood-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1px;
  grid-auto-flow: dense;
  column-gap: 10px;
}
.mood-grid .ref-thumb,
.mood-grid .ref-add {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.mood-grid .ref-thumb.big { grid-column: span 2; }
.mood-grid .ref-thumb img { height: auto; }
/* fixed ratio where no natural image height exists: while resolving, for
   the IG embed, the link-card fallback, and the add tile */
.mood-grid .ref-thumb.loading,
.mood-grid .ref-thumb.mood-tile-embed,
.mood-grid .ref-thumb.ref-link-card,
.mood-grid .ref-add { aspect-ratio: 1; }
/* drag-to-swap: dim the tile in flight, ring the tile it would trade
   places with */
.mood-grid .ref-thumb.dragging { opacity: 0.35; }
.mood-grid .ref-thumb.drop-target,
.mood-grid .ref-add.drop-target { box-shadow: 0 0 0 3px var(--vo); }

.mood-grid .ref-link-icon svg { width: 22px; height: 22px; }
.mood-grid .ref-link-domain { font-size: 11px; }
/* the row inherits audio-row's 200px flex-basis, which in the card's column
   layout would become its height */
.mood-input-row { flex: none; margin-top: 2px; }

/* highlight toggle: top-left twin of the remove button; stays visible
   (accent-filled) while the tile is highlighted */
.ref-thumb-big-btn {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(43, 42, 40, 0.65);
  color: #FDFCFA;
  opacity: 0;
  transition: opacity 0.15s var(--ease), background 0.15s var(--ease);
  cursor: pointer;
}
.ref-thumb:hover .ref-thumb-big-btn { opacity: 1; }
.ref-thumb-big-btn:hover { background: rgba(43, 42, 40, 0.9); }
/* active keeps only the accent fill — still hidden until the tile is
   hovered, like the remove button */
.ref-thumb-big-btn.active {
  background: var(--vo);
  color: var(--on-vo);
}

/* private / shared switch: bottom-left. On a private tile it stays
   visible (accent-filled) as the "only me" badge */
.ref-thumb-lock-btn {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(43, 42, 40, 0.65);
  color: #FDFCFA;
  opacity: 0;
  transition: opacity 0.15s var(--ease), background 0.15s var(--ease);
  cursor: pointer;
}
.ref-thumb:hover .ref-thumb-lock-btn { opacity: 1; }
.ref-thumb-lock-btn:hover { background: rgba(43, 42, 40, 0.9); }
.ref-thumb-lock-btn.active {
  opacity: 1;
  background: var(--vo);
  color: var(--on-vo);
}
.mood-grid .ref-thumb.private { border-color: var(--vo); }

/* "Only me" switch beside the paste field */
.mood-private-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: center;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.mood-private-toggle:hover { background: var(--surface-hover); color: var(--ink); }
.mood-private-toggle.active {
  background: var(--vo);
  border-color: var(--vo);
  color: var(--on-vo);
}
.mood-private-toggle svg { width: 11px; height: 11px; }

@media (max-width: 560px) {
  .mood-grid { grid-template-columns: repeat(2, 1fr); column-gap: 8px; }
  .mood-grid .ref-thumb,
  .mood-grid .ref-add { margin-bottom: 8px; }
  .ref-thumb-big-btn,
  .ref-thumb-lock-btn { opacity: 1; }
}

/* list-view voice-over card: same text, shown as a wrapping bubble flow */
.vo-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 15px 20px 17px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color 0.25s var(--ease);
}
.vo-card:hover { border-color: var(--border-strong); }

.vo-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.vo-card-icon { display: inline-flex; color: var(--vo); }

.vo-card-bubbles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 7px;
}

.vo-bubble {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--vo);
  color: var(--on-vo);
  font-size: 12.5px;
  font-weight: 500;
}

.vo-pause {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1.5px dashed var(--border-strong);
  color: var(--ink-faint);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.vo-card-empty {
  font-size: 13px;
  color: var(--ink-faint);
}

/* shot details modal: hosts the regular shot card */
.modal-shot { max-width: 640px; padding: 20px 22px 22px; }

.modal-shot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.modal-shot-head h2 { margin: 0; }

/* the embedded card keeps its familiar look but drops list-only controls */
.modal-shot .shot-card { box-shadow: none; }
.modal-shot .drag-handle,
.modal-shot .shot-collapse { display: none; }

/* voice-over modal: one big textarea, live-parsed onto the timeline */
.modal-vo { max-width: 560px; padding: 20px 22px 22px; }

.vo-hint {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.vo-textarea {
  width: 100%;
  min-height: 160px;
  resize: none;
  overflow: hidden; /* autogrow sizes it to its content */
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
}
.vo-textarea:focus {
  outline: none;
  border-color: var(--ink-faint);
}

.timeline-clip-desc {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-width: 0;
}

.timeline-clip-dur {
  margin-left: auto;
  font-size: 10px;
  opacity: .85;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.timeline-clip-thumb {
  width: 40px;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
  margin-left: -8px;
}

.timeline-clip-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}
.timeline-clip-handle.left { left: 0; }
.timeline-clip-handle.right { right: 0; }
.timeline-clip-handle::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 4px;
  width: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity .15s var(--ease);
}
.timeline-clip:hover .timeline-clip-handle::after { opacity: .7; }

/* ================= Touch devices ================= */

@media (hover: none) {
  /* hover-revealed controls must always be visible on touch */
  .card-actions,
  .cal-day-add,
  .cal-chip-edit,
  .shot-delete,
  .scene-delete,
  .shot-line-delete,
  .ref-thumb-remove { opacity: 1; }

  .ref-thumb-remove { width: 24px; height: 24px; }

  .timeline-clip-handle::after { opacity: .7; }
}

@media (hover: none) and (pointer: coarse) {
  /* iOS zooms into focused fields below 16px — keep editable text at 16px */
  .shot-textarea,
  .audio-input,
  .notes-input,
  .editor-desc,
  .scene-title,
  .field input,
  .field select,
  .field textarea,
  .share-link-row input { font-size: 16px; }

  .shot-duration-input { font-size: 15px; width: 46px; }

  .scene-title::placeholder { font-size: 14px; }

  /* larger touch targets */
  .drag-handle { width: 34px; height: 34px; }
  .icon-btn { width: 34px; height: 34px; }
  .shot-check { width: 24px; height: 24px; }
  .timeline-clip-handle { width: 18px; }
  .timeline-zoom-btn { width: 30px; height: 30px; }
}

/* ================= Small screens ================= */

@media (max-width: 720px) {
  .app-header { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .header-actions { gap: 8px; }
  .editor-header-right { gap: 8px; }
  /* the print button sits out on phones: the header is full, and the
     browser's own Print still prints the sheet */
  #btn-print { display: none; }
  /* faces go compact so the stack fits beside the other header actions */
  .member-stack { padding-left: 10px; }
  .avatar-btn { margin-left: -10px; }
  .avatar-btn .avatar { width: 24px; height: 24px; }
  .avatar-count { font-size: 10px; }

  .dash-main,
  .editor-main { padding: 20px 14px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .timeline { margin-inline: calc(50% - var(--page-w) / 2 + 14px); }
  .list-grid { grid-template-columns: 1fr; gap: 12px; }
  .list-card { padding: 18px 18px 14px; }

  .post-grid { grid-template-columns: 1fr; gap: 12px; }
  .plan-toolbar { gap: 6px; }
  .plan-group-btn { padding: 0 8px; }

  /* calendar: seven narrow columns; chips collapse to a colour block
     (bar + series mark), the title stays on the chip's tooltip */
  .post-calendar,
  .cal-weekdays { gap: 3px; }
  .cal-weekdays { margin-bottom: -3px; }
  .cal-weekday { padding: 0 4px 2px; text-align: center; }
  .cal-weekday-long { display: none; }
  .cal-weekday-short { display: inline; }
  .cal-day { min-height: calc((100cqw - 6 * 3px) / 7); padding: 4px 3px 18px; border-radius: 6px; gap: 3px; }
  .cal-day-num { font-size: 10px; }
  .cal-day.is-today .cal-day-num { min-width: 16px; height: 16px; padding: 0 4px; }
  .cal-chip { padding: 3px; gap: 0; justify-content: center; align-items: center; font-size: 10px; min-height: 16px; }
  .cal-chip .series-mark,
  .cal-chip-check { margin-top: 0; }
  .cal-chip.has-ep .cal-chip-title { min-height: 0; }
  .cal-chip-ep,
  .cal-chip-title,
  .cal-chip-edit { display: none; }
  .cal-chip-check svg { width: 10px; height: 10px; }
  .cal-day-add { width: 18px; height: 18px; right: 2px; bottom: 2px; }
  .editor-title { font-size: 22px; }
  .editor-meta { margin-bottom: 22px; }

  .shot-card { padding: 12px 14px 14px 8px; }
  .shot-row-left { gap: 6px; }
  .shot-line { gap: 8px; padding: 7px 12px 7px 8px; }

  .scene-row { margin-top: 14px; padding-right: 2px; }
  .scene-stats { font-size: 11px; }

  .add-shot-inline { margin-left: 28px; }

  .btn { padding: 7px 12px; font-size: 13px; }
  .btn-add-shot { padding: 12px; font-size: 13px; }

  .modal { padding: 22px 18px; }
  .modal-overlay { padding: 14px; }

  .stats-panel { padding: 16px; gap: 14px; }
  .stats-tiles { grid-template-columns: repeat(2, 1fr); }
  .stats-charts { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 460px) {
  .wordmark span { display: none; }
}

/* ================= Platform chips (modals) ================= */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.platform-chip {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 550;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
              border-color 0.15s var(--ease);
}
.platform-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.platform-chip.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  font-weight: 650;
}
.platform-chip.selected:hover { background: var(--ink-hover); border-color: var(--ink-hover); }

/* ================= Workflow checklist ================= */

/* one row per step: a square that fills with a tick, the label struck
   through once done. The same rows serve the post dialog (.wf-list) and
   the dropdown behind the header icon / table pill (.wf-menu) */
.wf-list { display: flex; flex-direction: column; gap: 1px; margin: 0 -10px; }
.wf-menu { min-width: 230px; }
.wf-menu .switcher-item-title { white-space: normal; }
#workflow-switcher .switcher-menu { left: auto; right: 0; }

.wf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--ink);
  transition: background 0.15s var(--ease);
}
.wf-item:hover { background: var(--surface-hover); }
.wf-item-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  color: transparent;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
              color 0.15s var(--ease);
}
.wf-item:hover .wf-item-check { border-color: var(--ink-faint); }
.wf-item.checked .wf-item-check {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.wf-item.checked .switcher-item-title { color: var(--ink-faint); text-decoration: line-through; }

/* the header icon carries the steps still open, like the tasks icon */
#btn-workflow { position: relative; }
#btn-workflow[aria-expanded="true"] { background: var(--ink); color: var(--bg); }
#btn-workflow[data-count][aria-expanded="true"]::before { display: none; }

/* the project dialog's step editor: one row per step */
.wf-editor { display: flex; flex-direction: column; gap: 4px; }
.wf-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 2px;
  align-items: center;
  border-radius: 8px;
}
.wf-row.dragging { opacity: 0.35; }
.wf-row.drop-before { box-shadow: 0 -2px 0 0 var(--ink); }
.wf-row.drop-after { box-shadow: 0 2px 0 0 var(--ink); }
.wf-row .drag-handle { width: 24px; height: 28px; cursor: grab; touch-action: none; }
.wf-row .icon-btn { width: 26px; height: 26px; }
.wf-row .icon-btn:disabled { opacity: 0.3; pointer-events: none; }
.wf-row-input {
  min-width: 0;
  padding: 6px 8px;
  font-size: 13.5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
}
.wf-row-input:hover { border-color: var(--border); }
.wf-row-input:focus { border-color: var(--border-strong); background: var(--bg); outline: none; }
.wf-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.wf-add:hover { border-color: var(--ink-faint); color: var(--ink); }

/* several platforms squeeze into the card tile */
.post-card-tile.multi { font-size: 10.5px; letter-spacing: 0; }

/* ================= Planner table view ================= */

/* full-bleed like the timeline: the table gets the whole viewport */
.post-table-wrap { margin-inline: calc(50% - var(--page-w) / 2 + 20px); }

.post-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.post-table th {
  position: sticky;
  top: 0;
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--surface-soft);
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.post-table td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0;
  vertical-align: middle;
  min-width: 96px;
}
.post-table td:last-child { border-right: none; }
.post-table tbody tr:last-child td { border-bottom: none; }
.post-table tbody tr:hover td { background: var(--hover-weak); }

/* borderless inputs filling their cells, spreadsheet-style */
.pt-input,
.pt-select {
  width: 100%;
  border: none;
  background: none;
  color: var(--ink);
  font-size: 13px;
  padding: 9px 10px;
  outline: none;
  border-radius: 0;
}
.pt-input:focus,
.pt-select:focus { background: var(--hover-med); box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
.pt-input::placeholder { color: var(--ink-faint); }
.pt-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.pt-select.empty { color: var(--ink-faint); }

.pt-title-cell { min-width: 180px; }
.pt-input-title { font-weight: 600; }
.pt-date { min-width: 128px; font-variant-numeric: tabular-nums; }
.pt-lang { text-transform: uppercase; }
/* series column: tinted text with a hue dot on the left; the dot sits in
   the cell so the input keeps its full-cell click target */
.post-table td:has(.pt-series) { position: relative; min-width: 150px; }
.has-series .pt-series { color: var(--series-color); font-weight: 600; padding-left: 28px; }
.post-table td.has-series > .series-mark {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  pointer-events: none;
}
.post-table td:has(.pt-lang) { min-width: 60px; }

/* inline platform toggles */
.pt-platform-cell { padding: 0 8px; white-space: nowrap; }
.pt-chips { display: inline-flex; gap: 4px; }

.pt-chip {
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
              border-color 0.15s var(--ease);
}
.pt-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.pt-chip.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.pt-chip.selected:hover { background: var(--ink-hover); border-color: var(--ink-hover); }

/* the workflow pill opens the post's checklist right there */
.pt-workflow-cell { padding: 0 8px; white-space: nowrap; }
.pt-workflow.done { color: var(--ink-faint); }
.pt-workflow[aria-expanded="true"] { background: var(--surface-soft); color: var(--ink); }

/* shots summary opens the post's shot list */
.pt-shots-cell { padding: 0 8px; white-space: nowrap; }

.pt-shots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--ink-faint);
  font-size: 12.5px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.pt-shots.active { color: var(--ink-soft); }
.pt-shots:hover { background: var(--surface-soft); color: var(--ink); }
.pt-shots svg { width: 13px; height: 13px; flex-shrink: 0; }

.pt-actions { padding: 0 6px; min-width: 0; white-space: nowrap; }

/* dashed add row below the table, echoing the add card */
.post-table-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 550;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              background 0.2s var(--ease);
}
.post-table-add:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
  background: var(--hover-weak);
}
.post-table-add svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  .post-table-wrap { margin-inline: calc(50% - var(--page-w) / 2 + 14px); }
}

@media (hover: none) and (pointer: coarse) {
  /* keep table cells at 16px so iOS doesn't zoom into them */
  .pt-input, .pt-select { font-size: 16px; }
}

/* ================= Pull to refresh ================= */

/* a badge that rides down with the finger from under the top edge; it
   turns as it comes, fills in once far enough, and spins while the page
   reloads (app.js drives transform and --pull-turn) */
.pull-refresh {
  --pull-turn: 0deg;
  position: fixed;
  top: -44px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  color: var(--ink-faint);
  z-index: 95; /* over the drawers, below modals */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s var(--ease), color 0.18s var(--ease);
}
.pull-refresh.pulling { opacity: 1; }
.pull-refresh.settling { transition: transform 0.28s var(--ease), opacity 0.18s var(--ease); }
.pull-refresh.armed { color: var(--ink); border-color: var(--border-strong); }
.pull-refresh-icon {
  display: flex;
  transform: rotate(var(--pull-turn));
}
.pull-refresh.busy .pull-refresh-icon { animation: pull-refresh-spin 0.7s linear infinite; }
@keyframes pull-refresh-spin {
  from { transform: rotate(var(--pull-turn)); }
  to { transform: rotate(calc(var(--pull-turn) + 360deg)); }
}

/* the installed app: the pull is ours, not the system's bounce */
@media (display-mode: standalone) {
  html { overscroll-behavior-y: none; }
}

/* ================= Print ================= */
/* the sheet lives only on paper: app.js fills #print-sheet as a print
   starts and marks the body `printing`; these styles then show the sheet
   in place of the app. Colors are fixed — paper is white whatever the OS
   theme says — and sizes are in points */
.print-sheet { display: none; }

@media print {
  @page { margin: 14mm 14mm 16mm; }

  body.printing { background: #fff !important; color: #111 !important; min-height: 0; }
  body.printing > :not(.print-sheet) { display: none !important; }
  body.printing .print-sheet {
    display: block;
    color: #111;
    font-family: var(--font);
    font-size: 10.5pt;
    line-height: 1.35;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24pt;
    padding-bottom: 8pt;
    border-bottom: 1.5pt solid #111;
    margin-bottom: 12pt;
  }
  .print-kicker {
    font-size: 8.5pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
  }
  .print-title {
    font-size: 20pt;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 2pt 0 3pt;
  }
  .print-context { font-size: 9.5pt; color: #444; }
  .print-facts {
    flex: none;
    text-align: right;
    font-size: 9pt;
    line-height: 1.45;
    color: #444;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .print-vo {
    border: 1pt solid #bbb;
    border-radius: 6pt;
    padding: 8pt 11pt 9pt;
    margin-bottom: 14pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .print-vo h2 {
    font-size: 8.5pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
    margin-bottom: 4pt;
  }
  .print-vo p { margin: 0 0 2pt; }
  .print-vo-pause { font-size: 8.5pt; font-style: italic; color: #888; margin: 3pt 0 !important; }

  .print-empty { color: #777; font-style: italic; }

  .print-scene { margin-bottom: 12pt; }
  .print-scene-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12pt;
    font-size: 12.5pt;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-bottom: 1pt solid #999;
    padding-bottom: 3pt;
    margin-bottom: 2pt;
    break-after: avoid;
    page-break-after: avoid;
  }
  .print-scene-stats { font-size: 9pt; font-weight: 500; color: #666; white-space: nowrap; }

  .print-shots { width: 100%; border-collapse: collapse; }
  .print-shot { break-inside: avoid; page-break-inside: avoid; }
  .print-shot td {
    vertical-align: top;
    padding: 6pt 5pt 6pt 0;
    border-bottom: 0.75pt solid #ddd;
  }
  .print-scene .print-shot:last-child td { border-bottom: none; }

  .print-check { width: 18pt; padding-top: 5pt !important; }
  .print-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13pt;
    height: 13pt;
    border: 1.25pt solid #111;
    border-radius: 3pt;
    color: #111;
  }
  .print-box svg { width: 9pt; height: 9pt; }

  .print-num {
    width: 22pt;
    font-size: 9.5pt;
    color: #666;
    font-variant-numeric: tabular-nums;
    padding-top: 7pt !important;
  }
  .print-angle { width: 66pt; }
  .print-angle b { display: block; font-size: 10pt; letter-spacing: 0.02em; }
  .print-angle small { display: block; font-size: 7.5pt; line-height: 1.25; color: #666; }
  .print-angle .print-pace { color: #111; font-weight: 600; margin-top: 1pt; }
  .print-len {
    width: 34pt;
    font-size: 9.5pt;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding-top: 7pt !important;
  }
  .print-body { width: auto; }
  .print-desc { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .print-desc.empty { color: #999; font-style: italic; }
  .print-shot.done .print-desc { color: #777; }

  .print-line {
    display: flex;
    align-items: flex-start;
    gap: 6pt;
    margin-top: 3pt;
    font-size: 9pt;
    color: #333;
  }
  .print-k {
    flex: 0 0 30pt;
    font-size: 7pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #777;
    padding-top: 1.5pt;
  }
  .print-v { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .print-notes { margin: 0; padding-left: 10pt; }
  .print-notes li { margin: 0; }
}

/* Shared follower milestones */
.followers-account-heading { display: flex; align-items: center; min-width: 0; min-height: 22px; }
.followers-toolbar .plan-group { margin-left: auto; }
.followers-toolbar .followers-account { max-width: 100%; }
.followers-header { position: relative; z-index: 4; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.followers-header .notes-head { align-items: center; padding-bottom: 14px; }
.followers-header-progress { padding: 0 26px 16px; }
.followers-goal-complete-icon { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--ink); cursor: pointer; }
.followers-goal-complete-icon:hover { background: var(--surface-soft); }
.followers-goal-missed-icon { flex-shrink: 0; color: #c47128; font-size: 12px; font-weight: 600; }
.followers-goal-replay { padding: 0; margin-left: 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; }
.followers-loading { color: var(--ink-soft); font-size: 13px; }
.followers-loading .btn { margin-top: 12px; }
.followers-loading-skeleton { height: 96px; margin-top: 16px; border-radius: 12px; background: var(--surface-soft); }
.followers-goals { margin: -5px 0 0; }
.followers-goal-meter { --goal-color: var(--ink-soft); display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 7px 0; }
.followers-goal-meter.on-track, .followers-goal-meter.reached { --goal-color: #36835b; }
.followers-goal-meter.behind { --goal-color: #c47128; }
.followers-goal-meter:focus-visible { outline: 2px solid var(--goal-color); outline-offset: 4px; border-radius: 4px; }
.followers-goal-tooltip { position: absolute; top: calc(100% + 4px); width: min(360px, calc(100% + 28px)); padding: 20px 16px 14px; box-sizing: border-box; color: #f5f5f1; font-size: 12px; line-height: 1.45; z-index: 200; isolation: isolate; visibility: hidden; opacity: 0; transition: opacity .15s var(--ease), visibility .15s; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.followers-goal-meter:not(.tooltip-dismissed):is(:hover, :focus-visible) .followers-goal-tooltip { visibility: visible; opacity: 1; }
.followers-goal-meter:not(.tooltip-dismissed):is(:hover, :focus-visible) .followers-goal-tooltip { pointer-events: auto; }
.followers-goal-tooltip::before { content: ''; position: absolute; inset: 0; background: rgba(34,36,33,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); clip-path: var(--tip-shape); z-index: -1; }
.followers-goal-tooltip::after { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 5px; }
.followers-goal-tip-heading, .followers-goal-tip-progress, .followers-goal-tip-note { color: #b9bcb5; }
.followers-goal-tip-heading { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.followers-goal-tip-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 16px; margin-top: 12px; }
.followers-goal-tip-align-right { text-align: right; }
.followers-goal-tip-count { display: block; margin-top: 2px; font-size: 22px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.followers-goal-tip-progress { margin-top: 4px; font-size: 10px; }
.followers-goal-tip-forecast { margin-top: 12px; font-size: 11px; font-weight: 500; color: #f5f5f1; }
.followers-goal-tip-milestone { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.followers-goal-tip-milestone .followers-goal-tip-grid { margin-top: 0; }
.followers-goal-tip-due { margin-top: 3px; font-size: 12px; }
.followers-goal-tip-milestone strong { display: block; margin-top: 3px; font-size: 14px; font-variant-numeric: tabular-nums; }
.followers-goal-tip-note { margin-top: 12px; font-size: 10px; }
.followers-goal-endpoints { flex-shrink: 0; color: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.followers-goal-strip { display: flex; align-items: center; gap: 10px; min-height: 24px; }
/* Raise the track's stacking context so its tooltip clears the header tabs. */
.followers-goal-track { position: relative; z-index: 1; flex: 1; min-width: 0; isolation: isolate; }
.followers-goal-tick { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 10px; background: var(--ink-faint); pointer-events: none; }
.followers-goal-pace { position: absolute; top: 50%; transform: translate(-50%, -50%); height: 18px; border-left: 1px dotted var(--ink); opacity: .25; pointer-events: none; z-index: -1; }
.followers-goal-strip progress { display: block; flex: 1; min-width: 0; width: 100%; height: 4px; appearance: none; border: 0; border-radius: 99px; overflow: hidden; background: var(--border); color: var(--goal-color); }
.followers-goal-strip progress::-webkit-progress-bar { background: var(--border); border-radius: 99px; }
.followers-goal-strip progress::-webkit-progress-value { background: var(--goal-color); border-radius: 99px; }
.followers-goal-strip progress::-moz-progress-bar { background: var(--goal-color); border-radius: 99px; }
.followers-goal-manage, .followers-goal-delete { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--ink-soft); background: transparent; font: inherit; font-size: 19px; line-height: 1; cursor: pointer; }
.followers-goal-manage:hover, .followers-goal-delete:hover { color: var(--ink); background: var(--surface-soft); }
.followers-goal-manage[aria-expanded="true"] { background: var(--surface-soft); }
.followers-goal-empty { flex: 1; font-size: 11px; color: var(--ink-faint); }
.followers-goal-manager { margin-top: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.followers-goal-manager h3 { font-size: 12px; font-weight: 600; }
.followers-goal-form { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.followers-goal-form h4 { font-size: 12px; font-weight: 600; }
.followers-goal-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.followers-goal-form label { display: grid; gap: 4px; font-size: 11px; color: var(--ink-soft); }
.followers-goal-form input, .followers-goal-form select { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 6px; color: var(--ink); background: var(--surface); font: inherit; }
.followers-goal-actions { display: flex; gap: 8px; }
.followers-reward-field { display: grid; gap: 4px; }
.followers-reward-inputs { display: flex; gap: 6px; }
.followers-reward-inputs .followers-reward-emoji-input { flex: 0 0 44px; width: 44px; text-align: center; font-size: 16px; padding: 6px; }
.followers-goal-reward { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; font-size: 17px; cursor: help; }
.followers-goal-reward:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 3px; border-radius: 4px; }
.followers-reward-tooltip { position: absolute; top: calc(100% + 8px); right: 0; width: max-content; max-width: min(240px, 65vw); padding: 8px 10px; border-radius: 6px; background: rgba(34,36,33,.97); color: #f5f5f1; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; z-index: 200; visibility: hidden; opacity: 0; pointer-events: none; }
.followers-goal-reward:is(:hover, :focus) .followers-reward-tooltip { visibility: visible; opacity: 1; }
.followers-goal-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.followers-goal-group-title { margin-top: 14px; color: var(--ink-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.followers-goal-group.previous { margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--border); }
.followers-goal-group.previous .followers-goal-group-title { margin-top: 0; color: var(--ink); font-size: 12px; }
.followers-goal-group .followers-goal-row:last-child { border-bottom: 0; }
.followers-goal-status { display: inline-block; color: var(--ink-soft); font-size: 11px; }
.followers-goal-status.accomplished { color: #32815b; font-weight: 600; }
.followers-goal-status.missed { color: #c47128; font-weight: 600; }
#btn-followers { position: relative; }
.followers-notifications { position: absolute; top: 1px; right: 1px; display: flex; gap: 2px; pointer-events: none; }
.followers-notification { display: block; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.followers-notification.accomplished { background: #111; }
.followers-notification.missed { background: #e88a35; }
@media (prefers-color-scheme: dark) { .followers-notification.accomplished { outline: 1px solid var(--ink-faint); } }
/* A milestone gets a moment of its own, with confetti across the viewport. */
.followers-celebration {
  position: absolute; top: 80px; left: 20px; right: 20px; z-index: 5; min-width: 0 !important; max-height: calc(100% - 100px);
  display: flex; flex-direction: column; align-items: center; padding: 20px 18px;
  border: 1px solid #d9b968; border-radius: 22px; color: var(--ink); background: var(--surface);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(246, 202, 96, .24), transparent 70%);
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 0 0 5px rgba(224,181,88,.08);
  overflow: auto; text-align: center; isolation: isolate;
  animation: follower-milestone-enter .6s cubic-bezier(.16,1,.3,1) both;
}
.followers-celebration::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(246,218,143,.28) 47%, transparent 64%);
  transform: translateX(-110%); animation: follower-milestone-shine 1.4s .25s ease-out both;
}
.followers-celebration-medal { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid rgba(188,141,48,.35); border-radius: 50%; background: linear-gradient(145deg,#fff2bf,#edc368); color: #805719; box-shadow: 0 6px 22px rgba(180,127,30,.2), inset 0 1px 0 #fff8df; margin-bottom: 12px; }
.followers-celebration-medal svg { width: 32px; height: 32px; }
.followers-celebration-eyebrow { color: var(--ink-soft); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; }
.followers-celebration .followers-celebration-title { font-size: 20px; letter-spacing: -.04em; line-height: 1.2; margin-top: 8px; }
.followers-celebration-count { font-size: 44px; line-height: 1.1; font-weight: 650; letter-spacing: -.055em; font-variant-numeric: tabular-nums; margin-top: 12px; }
.followers-celebration-unit { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.followers-celebration-copy { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 16px; }
.followers-celebration-close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); font: inherit; font-size: 23px; cursor: pointer; }
.followers-celebration-close:hover { background: var(--surface-soft); color: var(--ink); }
.followers-celebration-done { border: 0; border-radius: 999px; background: var(--ink); color: var(--surface); padding: 10px 24px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.followers-celebration-done:hover { opacity: .85; }
.followers-celebration button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
canvas.followers-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 96; pointer-events: none; }
@keyframes follower-milestone-enter { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes follower-milestone-shine { to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  .followers-confetti { display: none; }
  .followers-celebration, .followers-celebration::before { animation: none; }
}
@media (max-height: 600px) {
  .followers-celebration { top: 52px; padding: 16px; }
  .followers-celebration-medal { width: 48px; height: 48px; margin-bottom: 10px; }
  .followers-celebration-medal svg { width: 32px; height: 32px; }
  .followers-celebration-count { font-size: 44px; margin-top: 12px; }
  .followers-celebration-copy { margin: 12px 0; }
}

/* Competitors uses the shared Feed modal and surface palette. */
.competitor-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
.competitor-header h2 { font-size:30px; font-weight:650; letter-spacing:-.03em; margin:0 0 3px; }
.competitor-subtitle,.competitor-note { color:var(--ink-soft); font-size:13px; line-height:1.65; }
.followers-insights button,.followers-insights input,.followers-insights select,.followers-insights textarea { font:inherit; color:var(--ink); border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--radius-sm); padding:9px 12px; min-width:0; }
.followers-insights button { cursor:pointer; transition:background .15s var(--ease); }
.followers-insights button:hover { background:var(--surface-soft); }
.followers-insights button:focus-visible,.followers-insights input:focus-visible,.followers-insights select:focus-visible,.followers-insights textarea:focus-visible { outline:2px solid var(--ink-faint); outline-offset:3px; }
.followers-insights .competitor-close { padding:0; width:32px; height:32px; border:0; border-radius:50%; background:var(--surface-soft); font-size:22px; color:var(--ink-soft); flex-shrink:0; }
.followers-insights .competitor-primary { background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:600; }
.followers-insights .competitor-primary:hover { background:var(--ink-hover); }
.competitor-navigation { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.competitor-tabs { width:480px; max-width:100%; margin:0; flex-shrink:0; }
.followers-insights .modal-tab { height:36px; font-size:14px; white-space:nowrap; padding:0 12px; border:0; border-radius:999px; background:none; color:var(--ink-soft); }
.followers-insights .modal-tab.active { background:var(--surface); color:var(--ink); box-shadow:0 1px 5px var(--hover-med); }
.competitor-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.competitor-header-status { position:relative; font-size:13px; }
.competitor-header-status summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; padding:8px 0; color:var(--ink-soft); }
.competitor-header-status summary::-webkit-details-marker { display:none; }
.competitor-header-status summary:focus-visible { outline:2px solid var(--ink-faint); outline-offset:4px; border-radius:6px; }
.competitor-header-status summary .competitor-status-dot { margin:0; }
.competitor-header-status-details { position:absolute; top:100%; right:0; width:340px; max-width:calc(100vw - 64px); z-index:5; padding:18px; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-lg); }
.competitor-dialog.is-loading .competitor-header-tracking,.competitor-dialog.is-unavailable .competitor-header-tracking { display:none; }
.competitor-overview-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.competitor-post-toolbar { display:flex; align-items:center; gap:8px; }
.competitor-post-toolbar .competitor-dropdown:first-child { width:clamp(150px,17vw,220px); }
.competitor-post-toolbar .competitor-dropdown:last-child { width:180px; }
.followers-insights .competitor-post-toolbar .competitor-dropdown-trigger { min-height:42px; padding:9px 14px; border-radius:999px; font-size:14px; gap:10px; }
.competitor-post-toolbar .competitor-dropdown:last-child .competitor-dropdown-menu { left:auto; right:0; min-width:220px; }
.competitor-dropdown { position:relative; min-width:0; }
.followers-insights .competitor-dropdown-trigger { width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border-radius:12px; border-color:var(--border); background:var(--surface); font-size:16px; text-align:left; box-shadow:0 1px 3px var(--hover-weak); }
.competitor-dropdown-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.competitor-dropdown-chevron { display:block; width:16px; height:16px; color:var(--ink-soft); flex-shrink:0; }
.competitor-dropdown-menu { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:10; max-height:280px; overflow:auto; padding:6px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-lg); }
.competitor-dropdown-menu [role="option"] { position:relative; padding:12px 30px 12px 12px; border-radius:8px; font-size:15px; cursor:pointer; overflow-wrap:anywhere; }
.competitor-dropdown-menu [role="option"]:hover,.competitor-dropdown-menu [role="option"].is-active { background:var(--surface-soft); }
.competitor-dropdown-menu [aria-selected="true"] { font-weight:600; }
.competitor-dropdown-menu [aria-selected="true"]::after { content:'\2713'; position:absolute; right:12px; }
.competitor-manage-row > .competitor-dropdown { min-width:160px; }
.competitor-table .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.competitor-table td.competitor-account-action { width:44px; padding-left:4px; padding-right:4px; }
.followers-insights .competitor-insights-link { width:36px; height:36px; padding:0; border:0; border-radius:0; background:transparent; color:var(--ink-soft); font-size:21px; }
.competitor-chart-comparison .competitor-chart-date-tooltip { position:absolute; z-index:2; padding:3px 7px; border:1px solid var(--border-strong); border-radius:5px; background:var(--surface); color:var(--ink); font-size:10px; line-height:1.4; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
.competitor-chart-tooltip { width:400px; border-radius:14px; padding:14px; }
.competitor-chart-comparison .competitor-chart-tip-row { display:flex; height:36px; margin:0; padding:0 8px; gap:10px; font-size:13px; }
.competitor-chart-comparison .competitor-chart-tip-row.is-own { border:0; border-radius:8px; margin:0; }
.competitor-chart-comparison .competitor-chart-tip-identity { display:block; flex:1; overflow:hidden; }
.competitor-chart-comparison .competitor-chart-account { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.competitor-chart-comparison .competitor-chart-tip-row strong { font-size:13px; font-variant-numeric:tabular-nums; }
.competitor-chart-comparison .competitor-chart-tip-date { font-variant-numeric:tabular-nums; white-space:nowrap; }
.competitor-content { display:flex; flex-direction:column; gap:20px; }
/* Keep the first load focused on one status, with close/Escape still available. */
.competitor-dialog.is-loading .competitor-navigation,.competitor-dialog.is-loading .competitor-subtitle,
.competitor-dialog.is-unavailable .competitor-navigation,.competitor-dialog.is-unavailable .competitor-subtitle { display:none; }
.competitor-loader { min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:var(--ink-soft); }
.competitor-spinner { width:28px; height:28px; border:2px solid var(--border-strong); border-top-color:var(--ink); border-radius:50%; animation:competitor-spin .8s linear infinite; }
@keyframes competitor-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .competitor-spinner { animation:none; } }
.competitor-message:empty { display:none; }
.competitor-message { color:var(--danger); margin-bottom:14px; }
.competitor-controls { display:flex; align-items:flex-end; gap:16px; }
.competitor-field { display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.competitor-field > span { color:var(--ink-soft); font-size:13px; font-weight:600; }
.competitor-field select,.competitor-field input { width:100%; }
.competitor-periods { display:flex; gap:2px; background:var(--surface-soft); border-radius:999px; padding:3px; flex-shrink:0; }
.followers-insights .competitor-periods button { padding:6px 15px; border:0; background:none; border-radius:999px; color:var(--ink-soft); }
.followers-insights .competitor-periods button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:0 1px 5px var(--hover-med); }
.competitor-panel { border:1px solid var(--border); border-radius:20px; background:var(--surface); padding:24px; min-width:0; box-shadow:0 2px 8px var(--hover-weak); }
.competitor-section-heading { margin-bottom:12px; }
.competitor-section-heading h3 { font-size:18px; font-weight:600; letter-spacing:-.01em; }
.competitor-section-heading p { color:var(--ink-soft); font-size:13px; margin-top:3px; }
.competitor-table-wrap { overflow:auto; }
.competitor-table { width:100%; border-collapse:collapse; font-size:16px; font-variant-numeric:tabular-nums; margin-bottom:12px; }
.competitor-table th { color:var(--ink-soft); font-size:13px; font-weight:600; white-space:nowrap; }
.competitor-table th,.competitor-table td { text-align:left; padding:18px 12px; border-bottom:1px solid var(--border); }
.competitor-table th:not(:first-child),.competitor-table td:not(:first-child) { text-align:right; }
.competitor-table td:first-child { min-width:150px; }
.competitor-table tr:last-child td { border:0; }
.competitor-table tr.selected { background:var(--surface-hover); }
.followers-insights .competitor-account-link { padding:0; border:0; background:none; font-weight:600; text-align:left; }
/* Sorting buttons inherit the table alignment and remain keyboard accessible. */
.followers-insights .competitor-sort { display:inline-flex; align-items:center; justify-content:flex-end; gap:7px; padding:6px 0; border:0; background:transparent; color:var(--ink-soft); font-size:13px; font-weight:600; white-space:nowrap; }
.followers-insights .competitor-sort:hover,.competitor-table th[aria-sort="ascending"] .competitor-sort,.competitor-table th[aria-sort="descending"] .competitor-sort { color:var(--ink); background:transparent; }
.competitor-sort-icon { font-size:14px; color:var(--ink-faint); }
.competitor-table th[aria-sort]:not([aria-sort="none"]) .competitor-sort-icon { color:var(--ink); }
.competitor-table tbody tr { transition:background .15s var(--ease); }
.competitor-table tbody tr:hover { background:var(--surface-hover); }
.competitor-table td:not(:first-child) { font-weight:500; white-space:nowrap; }
.competitor-posts-current { color:var(--ink); font-weight:500; }
.competitor-posts-previous { color:var(--ink-soft); font-weight:500; }
.competitor-restriction-dot { display:inline-block; width:7px; height:7px; margin-left:7px; border-radius:50%; background:var(--danger); vertical-align:middle; cursor:help; }
.competitor-restriction-dot:focus-visible { outline:2px solid var(--danger); outline-offset:3px; }
.competitor-table .competitor-updated { display:block; margin-top:4px; font-size:10px; color:var(--ink-soft); font-weight:400; }
.competitor-negative { color:var(--danger); }
/* Shared heading explanations: hover, focus or tap the info button. */
.competitor-info { display:inline-flex; vertical-align:middle; margin-left:6px; }
.followers-insights .competitor-info-button { display:inline-grid; place-items:center; width:24px; height:24px; padding:0; border:0; background:transparent; color:var(--ink-soft); cursor:pointer; }
.competitor-info-button span { display:grid; place-items:center; width:15px; height:15px; border:1.4px solid currentColor; border-radius:50%; font:600 10px/1 Georgia,serif; }
.followers-insights .competitor-info-button:hover { background:transparent; color:var(--ink); }
.followers-insights .competitor-info-button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:50%; }
.competitor-account-tooltip.competitor-info-tooltip { width:340px; max-height:calc(100dvh - 16px); overflow:auto; pointer-events:auto; background:var(--tip-bg); color:var(--tip-fg); box-shadow:var(--shadow-md); padding:12px 14px; }
.competitor-section-heading .competitor-info-tooltip p { color:inherit; font-size:12px; line-height:1.5; margin:0; }
.competitor-section-heading .competitor-info-tooltip p + p { margin-top:8px; }
.competitor-mobile-sort { display:none; }
.competitor-role { display:block; color:var(--ink-soft); font-size:12px; margin-top:4px; }
.competitor-positive { color:var(--series-c3); }
.competitor-chart { margin:0; min-width:0; }
.competitor-chart-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:18px; font-weight:600; margin-bottom:20px; }
.competitor-chart-summaries { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:28px; }
.competitor-chart-summary { display:flex; flex-direction:column; gap:8px; min-width:0; padding:16px; background:var(--surface-hover); border-radius:14px; }
.competitor-chart-account { font-size:13px; color:var(--ink-soft); overflow-wrap:anywhere; }
.competitor-chart-account::before { content:''; display:inline-block; width:12px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle; background:var(--series-color); }
.competitor-chart-summary > strong { font-size:30px; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.competitor-chart-change { color:var(--ink-soft); font-size:12px; line-height:1.6; }
.competitor-chart-plot { position:relative; min-width:0; }
.competitor-chart-plot svg { width:100%; height:240px; display:block; overflow:visible; }
.competitor-chart-grid { stroke:var(--border); stroke-width:1; }
.competitor-chart-tick { fill:var(--ink-soft); font-size:10px; font-variant-numeric:tabular-nums; }
.competitor-chart-crosshair { stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:3 3; pointer-events:none; }
.competitor-chart-plot rect[role="slider"] { cursor:crosshair; }
.competitor-chart-tooltip { position:absolute; top:0; pointer-events:none; background:color-mix(in srgb,var(--surface) 85%,transparent); backdrop-filter:blur(14px); border:1px solid var(--border-strong); border-radius:8px; padding:10px 12px; box-shadow:0 4px 16px #0002; max-width:100%; box-sizing:border-box; z-index:2; }
.competitor-chart-tip-date { font-size:12px; color:var(--ink-soft); margin-bottom:7px; }
.competitor-chart-tip-row { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:8px; font-size:13px; }
.competitor-chart-tip-row strong { font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
.competitor-chart-tip-identity { min-width:0; display:flex; flex-direction:column; gap:3px; }
.competitor-chart-tip-row.is-own { padding:8px; margin:4px -4px 8px; border:1px solid color-mix(in srgb,var(--series-color) 50%,var(--border)); border-radius:6px; background:color-mix(in srgb,var(--series-color) 12%,var(--surface)); }
.competitor-chart-tip-row.is-own .competitor-chart-account { color:var(--ink); font-weight:650; }
.competitor-chart-own-label { font-size:11px; color:var(--ink); font-weight:600; }
.competitor-chart-tip-observed { font-size:11px; color:var(--ink-soft); }
.competitor-chart-pending { padding:14px 16px; background:var(--surface-soft); border-radius:var(--radius-sm); font-size:12px; color:var(--ink-soft); }
.competitor-trend-metrics { display:flex; flex-wrap:wrap; gap:6px; }
.followers-insights .competitor-trend-metrics button { padding:7px 12px; border-radius:999px; font-size:11px; }
.followers-insights .competitor-trend-metrics button[aria-pressed="true"] { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.competitor-empty { padding:26px 20px; text-align:center; border-radius:var(--radius-sm); background:var(--surface-soft); color:var(--ink-soft); }
.competitor-empty strong { display:block; color:var(--ink); font-size:13px; font-weight:600; }
.competitor-empty p { max-width:440px; margin:7px auto 0; font-size:12px; }
.competitor-schedule { padding:20px; border-radius:var(--radius-md); background:var(--surface-soft); }
.competitor-schedule-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:18px 0; }
.competitor-schedule-grid > div+div { border-left:1px solid var(--border-strong); padding-left:22px; }
.competitor-eyebrow { display:block; color:var(--ink-soft); font-size:10px; line-height:1.5; }
.competitor-schedule-grid strong { display:block; font-size:14px; font-weight:600; margin:5px 0; }
.competitor-schedule-grid p { color:var(--ink-soft); font-size:12px; line-height:1.6; }
.competitor-status { display:flex; align-items:flex-start; gap:10px; }
.competitor-status strong { font-size:14px; font-weight:600; }
.competitor-status p { color:var(--ink-soft); font-size:13px; margin-top:3px; }
.competitor-status-dot { width:7px; height:7px; margin-top:6px; border-radius:50%; background:var(--series-c3); flex-shrink:0; }
.competitor-status-dot.paused { background:var(--ink-faint); }
.competitor-status .competitor-status-warning { color:var(--danger); }
.competitor-posts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; border-radius:var(--radius-md); overflow:hidden; }
.competitor-post { min-width:0; }
.competitor-post.is-in-trend .competitor-post-cover::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border:2px solid rgba(255,255,255,.95); border-radius:inherit; }
.competitor-post-trend-badge { display:none; position:absolute; top:10px; left:10px; z-index:3; padding:4px 8px; border-radius:6px; background:#fff; color:#222; font-size:10px; font-weight:700; box-shadow:0 2px 8px #0003; pointer-events:none; }
.competitor-post.is-in-trend .competitor-post-trend-badge { display:block; }
.competitor-post-cover { aspect-ratio:3/4; background:#343434; position:relative; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; isolation:isolate; }
.competitor-post-placeholder { position:absolute; top:22%; left:0; right:0; padding:16px; color:#cfcfcf; text-align:center; }
.competitor-post-cover img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:0; }
.followers-insights .competitor-post-select { position:absolute; inset:0; z-index:1; width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; }
.followers-insights .competitor-post-select:hover { background:transparent; }
.followers-insights .competitor-post-select:focus-visible { outline:3px solid #fff; outline-offset:-4px; }
.competitor-post-labels { pointer-events:none; position:absolute; top:10px; right:10px; z-index:4; display:flex; align-items:center; gap:5px; }
.competitor-post-type, .competitor-post-ad { padding:3px 7px; border-radius:4px; background:rgba(0,0,0,.65); color:#fff; font-size:10px; }
.competitor-post-type { pointer-events:none; }
.followers-insights .competitor-post-ad { pointer-events:auto; padding:3px 7px; border:1px solid #ffffff80; border-radius:4px; background:rgba(0,0,0,.65); color:#fff; font-size:10px; font-weight:700; cursor:pointer; line-height:inherit; }
.followers-insights .competitor-post-ad:hover { background:rgba(0,0,0,.85); }
.content-ad-match { padding:12px 0; border-bottom:1px solid var(--border); }
.content-ad-match a { display:block; margin:8px 0; }
.content-ad-pairing { display:grid; gap:10px; margin:16px 0; }
.competitor-post-body { position:absolute; bottom:0; left:0; right:0; z-index:2; padding:36px 12px 10px; background:linear-gradient(transparent,rgba(0,0,0,.72) 28%,rgba(0,0,0,.88)); pointer-events:none; }
.competitor-post-stats { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.competitor-post-stats > div { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.competitor-post-stats svg { width:14px; height:14px; flex-shrink:0; }
.competitor-post-stats strong { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.2; }
.competitor-post-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px; margin-top:10px; border-top:1px solid rgba(255,255,255,.2); padding-top:8px; }
.competitor-post-footer > span { font-size:9px; color:rgba(255,255,255,.85); }
.followers-insights .competitor-post-footer > button { pointer-events:auto; flex-shrink:0; padding:3px 0; border:0; border-radius:0; background:transparent; color:#fff; font-size:10px; text-decoration:underline; text-underline-offset:3px; }
.followers-insights .competitor-post-footer > button:hover { background:transparent; color:#ddd; }
.competitor-post-date { padding-right:36px; min-height:32px; font-size:9px; color:rgba(255,255,255,.6); margin-top:5px; }
.competitor-post-history:not(:empty) { padding:20px; border:1px solid var(--border); border-radius:var(--radius-md); margin-top:16px; }
.competitor-post-history figure { margin-top:18px; }
@media(min-width:701px) and (max-width:950px) { .competitor-posts { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.competitor-account-list { display:grid; gap:8px; }
.competitor-manage-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px; border:1px solid var(--border); border-radius:var(--radius-md); }
.competitor-account-name { flex:1; min-width:145px; }
.competitor-account-name strong { font-size:12px; font-weight:600; }
.competitor-account-name span { display:block; color:var(--ink-soft); font-size:10px; }
.competitor-check { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-soft); }
.competitor-check input { accent-color:var(--ink); }
.competitor-check:has(input:disabled) { opacity:.45; }
.competitor-row-actions { display:flex; gap:8px; }
.followers-insights .competitor-remove { border:0; color:var(--ink-soft); }
.followers-insights .competitor-remove:hover { color:var(--danger); }
.competitor-add-form { display:flex; gap:12px; align-items:flex-end; }
.competitor-imports { display:flex; flex-wrap:wrap; gap:8px; }
.followers-insights textarea { display:block; width:100%; margin:12px 0; font-size:11px; }
.competitor-panel > button { margin:12px 8px 0 0; }
@media(min-width:701px) and (max-width:1050px) { .competitor-tabs { width:420px; } .competitor-overview-toolbar > .competitor-note { display:none; } }
@media(max-width:700px) {
 .followers-insights .competitor-tabs .modal-tab { font-size:12px; padding:0 6px; white-space:nowrap; }
 .competitor-header { position:relative; padding-right:38px; flex-wrap:wrap; gap:8px; }
 .competitor-header-actions { justify-content:flex-start; }
 .competitor-header-actions .competitor-close { position:absolute; top:0; right:0; }
 .competitor-header-status summary { font-size:12px; padding:0; }
 .competitor-header-status-details { right:auto; left:0; }
 .competitor-navigation-controls { width:100%; }
 .competitor-post-toolbar .competitor-dropdown:first-child,.competitor-post-toolbar .competitor-dropdown:last-child { flex:1; width:0; }
 .competitor-post-toolbar .competitor-dropdown-menu { width:min(260px,calc(100vw - 72px)); right:auto; }
 .competitor-overview-toolbar { justify-content:space-between; }
 .competitor-chart-comparison .competitor-chart-tooltip { padding:10px 6px; }
 .competitor-chart-comparison .competitor-chart-account,.competitor-chart-comparison .competitor-chart-tip-row strong { font-size:12px; }
 .competitor-controls .competitor-dropdown-menu { width:min(260px,calc(100vw - 72px)); right:auto; }
 .competitor-controls .competitor-field:last-child .competitor-dropdown-menu { left:auto; right:0; }
 .competitor-controls { flex-wrap:wrap; gap:12px; }
 .competitor-controls .competitor-field { flex-basis:calc(50% - 12px); }
 .competitor-periods { margin-left:auto; }
 .competitor-panel,.competitor-schedule { padding:16px; }
 .competitor-schedule-grid { grid-template-columns:1fr; gap:14px; }
 .competitor-schedule-grid > div+div { border-left:0; border-top:1px solid var(--border-strong); padding:14px 0 0; }
 .competitor-posts { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .competitor-post-cover { aspect-ratio:3/5; }
 .competitor-post-body { padding:28px 8px 8px; }
 .competitor-post-stats { gap:3px; }
 .competitor-post-stats > div { gap:2px; }
 .competitor-post-stats svg { width:11px; height:11px; }
 .competitor-post-stats strong { font-size:9px; }
 .competitor-post-footer { flex-wrap:wrap; gap:2px; }
 .competitor-add-form { flex-wrap:wrap; }
 .competitor-add-form .competitor-field { flex-basis:100%; }
 .competitor-manage-row > .competitor-dropdown { flex:1; }
 .competitor-table th,.competitor-table td { padding:10px 8px; }
 .competitor-table { min-width:0; }
 .competitor-mobile-sort { display:flex; align-items:flex-end; gap:8px; margin:16px 0; }
 .competitor-mobile-sort .competitor-sort-direction { min-width:52px; height:52px; }
 .competitor-chart-summaries { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .competitor-chart-summary { padding:12px; }
 .competitor-chart-summary > strong { font-size:26px; }
 .competitor-table thead { display:none; }
 .competitor-table tbody { display:grid; gap:8px; }
 .competitor-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; border:1px solid var(--border); border-radius:var(--radius-sm); }
 .competitor-table td,.competitor-table td:not(:first-child) { display:block; border:0; padding:6px; text-align:left; }
 .competitor-table td:first-child { grid-column:1; min-width:0; }
 .competitor-table td.competitor-account-action { grid-column:2; grid-row:1; justify-self:end; width:auto; }
 .competitor-table td.competitor-updated { grid-column:1/-1; }
 .competitor-table td::before { content:attr(data-label); display:block; color:var(--ink-soft); font-size:12px; margin-bottom:4px; }
}

/* Public collection restrictions are visible wherever tracked accounts appear. */
.competitor-restriction-label { display:inline-flex; width:fit-content; max-width:100%; margin-top:6px; padding:3px 7px; border:1px solid currentColor; border-radius:6px; color:var(--danger); font-size:10px; font-weight:600; line-height:1.5; }
.competitor-account-name .competitor-restriction-label { display:inline-flex; color:var(--danger); }
.competitor-restriction-note { max-width:350px; margin-top:6px; color:var(--ink-soft); font-size:11px; line-height:1.5; }
.competitor-restriction-notice { padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); }
.competitor-restriction-notice .competitor-restriction-label { margin-top:0; }
.competitor-restriction-notice p { margin-top:6px; color:var(--ink-soft); font-size:12px; line-height:1.5; }
.competitor-status-dot.restricted { background:var(--danger); }

/* Account-centered analytics inside the existing Followers panel. */
.followers-drawer { container-type:inline-size; }
.followers-primary { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; padding:0 18px 12px; }
.followers-primary a { color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
.followers-tabs { display:flex; gap:4px; margin:4px 18px 0; padding:0; border-bottom:1px solid var(--border); }
.followers-tabs button { flex:1; position:relative; border:0; border-radius:var(--radius-sm) var(--radius-sm) 0 0; padding:12px 5px; font:inherit; font-size:12px; font-weight:500; color:var(--ink-soft); background:transparent; cursor:pointer; transition:color .2s var(--ease), background .2s var(--ease); }
.followers-tabs button:hover { color:var(--ink); background:var(--surface-hover); }
.followers-tabs button[aria-selected=true] { color:var(--ink); font-weight:600; }
.followers-tabs button[aria-selected=true]::after { content:""; position:absolute; bottom:-1px; left:12px; right:12px; height:2px; border-radius:2px; background:var(--ink); }
.followers-tabs button:focus-visible { outline:2px solid var(--chart-cur); outline-offset:2px; }
.ads-filters { display:grid; gap:12px; }
.ads-search-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:10px; }
.ads-filters .competitor-field { min-width:0; margin:0; }
.ads-filter-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ads-status-filters { display:flex; gap:3px; padding:3px; border-radius:8px; background:var(--surface-soft); }
.followers-insights .ads-status-filters button { padding:6px 12px; border:0; border-radius:5px; background:transparent; color:var(--ink-soft); font-size:11px; }
.followers-insights .ads-status-filters button[aria-pressed=true] { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px #0001; }
.ads-more-filters { position:relative; font-size:11px; }
.ads-more-filters > summary { cursor:pointer; color:var(--ink-soft); }
.ads-more-filter-fields { position:absolute; top:calc(100% + 10px); right:0; z-index:5; width:220px; padding:14px; display:grid; gap:12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); box-shadow:0 8px 24px #0001; }
.followers-insights .ads-pairing-shortcut { margin-left:auto; padding:5px 0; border:0; background:none; color:var(--ink-soft); font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.ads-result-status { margin:0; }
.ads-filters input,.ads-settings-row input { width:100%; min-width:0; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font:inherit; }
.ads-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.ads-stat { display:flex; flex-direction:column; gap:8px; padding:18px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.ads-stat strong { font-size:26px; font-weight:600; line-height:1.15; overflow-wrap:anywhere; }
.ads-stat span { color:var(--ink-soft); font-size:12px; }
.ads-stat small { color:var(--ink-soft); font-size:10px; line-height:1.5; }
.ads-reach-note { grid-column:1/-1; margin:0; }
.ads-card-body .ads-card-reach { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--surface-soft); }
.ads-card-reach span { color:var(--ink-soft); font-size:11px; }
.ads-card-reach strong { font-size:18px; }
.ads-grid { display:grid; grid-template-columns:repeat(auto-fill,min(100%,280px)); gap:14px; }
.ads-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.ads-card-identity { padding:14px 16px 12px; }
.ads-card-identity p { margin:5px 0 0; font-size:11px; }
.ads-preview { aspect-ratio:16/10; position:relative; display:grid; place-items:center; background:var(--surface-hover); color:var(--ink-soft); font-size:12px; }
.ads-preview:not(:has(img)) { aspect-ratio:auto; min-height:100px; }
.ads-preview img { position:absolute; inset:0; height:100%; width:100%; object-fit:contain; background:var(--surface-hover); }
.ads-card-body { padding:16px; display:flex; flex-direction:column; gap:10px; }
.ads-card-body p { margin:0; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.ads-card-heading,.ads-card-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; }
.ads-card-heading strong { overflow-wrap:anywhere; }
.ads-status { font-size:10px; text-transform:uppercase; border:1px solid var(--border); padding:3px 7px; border-radius:20px; }
.ads-card-copy { white-space:pre-wrap; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ads-card-actions a { font-size:11px; color:var(--ink-soft); text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.followers-insights .ads-card-actions button { padding:6px 12px; font-size:11px; }
.ads-coverage { display:flex; flex-direction:column; gap:8px; }
.ads-collection { border-top:1px solid var(--border); padding-top:16px; font-size:12px; }
.ads-collection > summary { cursor:pointer; font-weight:600; }
.ads-collection > p { margin:12px 0; }
.ads-collection-hint { margin-left:12px; font-size:11px; font-weight:400; color:var(--ink-soft); }
.ads-collection-status { padding:12px 0; border-bottom:1px solid var(--border); font-size:12px; }
.ads-collection-details { margin-top:8px; font-size:11px; color:var(--ink-soft); }
.ads-collection-details > summary { cursor:pointer; }
.ads-collection-status p { margin:5px 0 0; }
.ads-collection-status.is-stale { border-style:dashed; }
.ads-settings-row { display:flex; flex-wrap:wrap; gap:10px; align-items:end; padding:10px 0; }
.ads-settings-row .competitor-field { flex:1 1 230px; }
.ads-settings-row [role=status] { flex-basis:100%; }
.ads-matching { border-top:1px solid var(--border); padding-top:16px; }
.ads-matching > summary { font-size:13px; font-weight:600; cursor:pointer; padding:4px 0 14px; }
.ads-matching-panel { display:flex; flex-direction:column; gap:12px; }
.ads-matching-list { display:grid; }
.ads-match-row { padding:14px 0; border-bottom:1px solid var(--border); min-width:0; }
.ads-match-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:24px; align-items:start; }
.ads-match-pair { position:relative; }
.ads-match-pair::before { content:'→'; position:absolute; left:-20px; top:19px; color:var(--ink-faint); }
.ads-match-editor > summary { cursor:pointer; color:var(--ink-soft); font-size:11px; text-align:right; padding-top:8px; }
.ads-match-editor[open] > *:not(summary) { margin-top:12px; }
.ads-match-row h4,.ads-match-row p { margin:0; }
.ads-match-row h4 { font-size:13px; }
.ads-match-row a,.ads-match-row strong { overflow-wrap:anywhere; }
.ads-match-row a { color:var(--ink); text-decoration-color:var(--border); text-underline-offset:3px; }
.ads-match-row button:disabled { opacity:.45; cursor:not-allowed; }
.ads-match-identity,.ads-match-pair { display:flex; flex-direction:column; gap:5px; min-width:0; font-size:12px; }
.ads-match-label { color:var(--ink-soft); font-size:10px; }
.ads-suggestion-toggle { grid-column:1/-1; font-size:12px; }
.ads-match-actions,.ads-match-suggestions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:12px; }
.ads-match-suggestions .competitor-field { flex:1 1 100%; min-width:0; }
.ads-manual { width:100%; font-size:12px; }
.ads-manual summary { cursor:pointer; color:var(--ink-soft); }
.ads-dialog { width:min(700px,calc(100vw - 32px)); max-height:85vh; overflow:auto; padding:24px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); color:var(--ink); box-shadow:0 12px 60px #0003; }
.ads-dialog::backdrop { background:#0006; }
.ads-dialog h3 { margin:0 0 12px; }
.ads-dialog h4 { margin:24px 0 8px; }
.ads-copy,.ads-disclosure { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.7; }
.ads-observations { padding-left:20px; font-size:12px; line-height:1.8; }
.followers-insights { min-width:0; font:13px/1.5 var(--font); }
.followers-insights .competitor-navigation-controls { margin-bottom:14px; }
.followers-insights .competitor-navigation-controls:empty { display:none; }
.followers-insights .competitor-dropdown-trigger { font-size:12px; min-height:36px; padding:8px 10px; border-radius:var(--radius-sm); box-shadow:none; }
.followers-insights .competitor-post-toolbar .competitor-dropdown { flex:1; width:0; }
.followers-insights .competitor-post-toolbar .competitor-dropdown-trigger { font-size:12px; min-height:36px; padding:8px 10px; border-radius:var(--radius-sm); }
.followers-insights .competitor-dropdown-menu [role=option] { font-size:12px; padding:8px 24px 8px 8px; }
.followers-insights .competitor-panel { padding:12px; }
.followers-insights .competitor-section-heading h3,.followers-drawer .competitor-chart-head { font-size:13px; margin-bottom:10px; }
.followers-insights .competitor-section-heading p,.followers-drawer .competitor-note { font-size:11px; }
.followers-insights .competitor-posts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.followers-insights .competitor-post-body { padding:28px 8px 8px; }
.followers-insights .competitor-post-stats { display:flex; flex-wrap:nowrap; gap:4px; }
.followers-insights .competitor-post-stats > div { gap:3px; }
.followers-insights .competitor-post-stats svg { width:12px; height:12px; }
.followers-insights .competitor-post-stats strong { font-size:11px; }
.followers-insights .competitor-post-footer { flex-wrap:wrap; }
.followers-insights .competitor-post-history:not(:empty) { padding:12px; }
.followers-content-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.followers-content-summary > div { display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:var(--radius-sm); background:var(--surface-soft); }
.followers-content-summary strong { font-size:24px; font-weight:600; }
.followers-content-summary span { color:var(--ink-soft); font-size:11px; }
.followers-connection summary { cursor:pointer; font-weight:600; padding:10px 0; }
.followers-connection .competitor-panel { padding:0; }
.followers-comparison .competitor-field { margin-bottom:14px; }
.followers-comparison button { font:inherit; font-size:11px; border:1px solid var(--border); color:var(--ink); background:var(--surface); border-radius:var(--radius-sm); padding:6px 9px; cursor:pointer; }
.followers-comparison .competitor-dropdown-trigger { display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; }
.followers-comparison .competitor-periods button[aria-pressed=true] { background:var(--ink); color:var(--surface); }
.followers-drawer .competitor-chart-head { gap:8px; margin-bottom:12px; }
.followers-drawer .competitor-chart-plot svg { height:auto; }
.competitor-chart-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; margin-bottom:12px; }
.followers-insights .competitor-chart-legend-item { display:grid; grid-template-columns:minmax(0,1fr) 9ch; align-items:center; gap:8px; width:100%; min-width:0; padding:7px 8px; border:0; border-radius:6px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.followers-insights .competitor-chart-legend-item:hover { background:var(--surface-hover); }
.competitor-chart-legend-value { text-align:right; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.competitor-chart-legend-item[aria-pressed="false"] { --series-color:var(--ink-soft)!important; opacity:.45; }
.competitor-chart-legend-item[aria-pressed="false"] .competitor-chart-legend-value { color:var(--ink-soft); }
@media(max-width:600px) { .competitor-chart-legend { grid-template-columns:minmax(0,1fr); } }
.followers-drawer .competitor-chart-legend .competitor-chart-account { font-size:11px; }
.followers-insights .competitor-add-form { flex-wrap:wrap; }
.followers-insights .competitor-add-form .competitor-field { flex-basis:100%; }
.followers-insights .competitor-schedule-grid { grid-template-columns:1fr; gap:12px; }
.followers-insights .competitor-schedule-grid > div+div { border-left:0; border-top:1px solid var(--border); padding:12px 0 0; }
.followers-drawer.expanded { width:min(820px,100vw); }
@media(min-width:1080px) {
 body.drawer-followers.followers-expanded { --panel-w:clamp(500px,60vw,820px); }
 #view-planner > .followers-drawer.expanded { width:auto; }
}
/* Keep account rows tabular at every sidebar width. */
.followers-insights .competitor-table { width:100%; min-width:0; font-size:11px; }
.followers-insights .competitor-table thead { display:table-header-group; }
.followers-insights .competitor-table tbody { display:table-row-group; }
.followers-insights .competitor-table tr { display:table-row; padding:0; border:0; border-radius:0; }
.followers-insights .competitor-table th,.followers-insights .competitor-table td { display:table-cell; padding:10px 6px; border-bottom:1px solid var(--border); text-align:left; }
.followers-insights .competitor-table th:not(:first-child),.followers-insights .competitor-table td:not(:first-child) { text-align:right; }
.followers-insights .competitor-table tr:last-child td { border:0; }
.followers-insights .competitor-table td:first-child { min-width:0; }
.followers-insights .competitor-table td::before { display:none; }
.followers-insights .competitor-table td.competitor-account-action { width:28px; padding:10px 2px; }
.followers-insights .competitor-table .competitor-insights-link { width:24px; height:28px; }
.followers-insights .competitor-sort { font-size:10px; white-space:normal; gap:4px; }
.followers-insights .competitor-sort > span:first-child { max-width:90px; }
.followers-insights .competitor-mobile-sort { display:none; }
@container (max-width:600px) {
 .followers-insights .competitor-table th:nth-child(4),.followers-insights .competitor-table td:nth-child(4),
 .followers-insights .competitor-table th:nth-child(5),.followers-insights .competitor-table td:nth-child(5),
 .followers-insights .competitor-table th:nth-child(6),.followers-insights .competitor-table td:nth-child(6),
 .followers-insights .competitor-table th:nth-child(7),.followers-insights .competitor-table td:nth-child(7),
 .followers-insights .competitor-table th:nth-child(8),.followers-insights .competitor-table td:nth-child(8),
 .followers-insights .competitor-table th:nth-child(9),.followers-insights .competitor-table td:nth-child(9) { display:none; }
 .followers-insights .competitor-account-link { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
}
@container (min-width:601px) {
 .followers-insights .competitor-posts { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:500px) { #btn-followers-expand { display:none; } }

@media(min-width:1080px) {
 body.followers-expanded #view-planner > .app-header { flex-wrap:wrap; gap:8px; }
 body.followers-expanded #view-planner > .app-header .crumbs { flex-shrink:0; }
 body.followers-expanded #view-planner > .app-header .editor-header-right { flex-wrap:wrap; justify-content:flex-end; margin-left:auto; gap:8px; min-width:0; }
}

/* Tracking details stay in the header and open by hover, focus or touch. */
.followers-tracking-status { position:relative; flex-shrink:0; }
.followers-tracking-indicator { display:grid; place-items:center; border-radius:50%; -webkit-tap-highlight-color:transparent; }
.followers-tracking-dot { display:block; width:8px; height:8px; border-radius:50%; background:var(--ink-faint); }
.followers-tracking-status[data-state=healthy] .followers-tracking-dot { background:var(--series-c3); }
.followers-tracking-status[data-state=warning] .followers-tracking-dot { background:#e88a35; }
.followers-tracking-status[data-state=error] .followers-tracking-dot { background:var(--danger); }
.followers-tracking-tooltip { position:absolute; top:calc(100% + 8px); right:0; z-index:200; width:min(300px,calc(100vw - 36px)); padding:10px 12px; border-radius:8px; background:var(--tip-bg); color:var(--tip-fg); box-shadow:var(--shadow-md); font-size:11.5px; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; pointer-events:none; }
.followers-tracking-tooltip[hidden] { display:none; }

.followers-header-progress.followers-goal-add-first { display:block; width:100%; border:0; background:transparent; padding:6px 26px 16px; text-align:left; font:inherit; font-size:11px; color:var(--ink-soft); cursor:pointer; }
.followers-goal-add-first:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.followers-goal-edit-inline { flex-shrink:0; width:24px; height:24px; }
.followers-goal-manager-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }

.tasks-filter-heading { padding: 6px 12px; font-size: 11px; font-weight: 600; color: var(--ink-soft); }

/* Goals share the top header on every Followers screen. */
#followers-header-goal { flex: 1; min-width: 70px; }
.followers-header .notes-head-text, .followers-header .tasks-head-actions { flex-shrink: 0; }
#followers-header-goal .followers-header-progress { padding: 0; }
#followers-header-goal .followers-goal-add-first { padding: 6px 0; }
.followers-goal-reward { cursor: pointer; }
.followers-reward-edit { display: none; }
.followers-goal-reward:is(:hover, :focus-visible) .followers-reward-emoji { display: none; }
.followers-goal-reward:is(:hover, :focus-visible) .followers-reward-edit { display: grid; }
@container (max-width: 480px) {
 .followers-header .notes-head { flex-wrap: wrap; }
 #followers-header-goal { order: 3; flex-basis: 100%; }
}

.competitor-coverage-dot { display:inline-block; width:7px; height:7px; margin-left:7px; border-radius:50%; background:#eab308; vertical-align:middle; cursor:help; }
.competitor-coverage-dot:focus-visible { outline:2px solid #eab308; outline-offset:3px; }

.competitor-account-tooltip { position:fixed; inset:auto; margin:0; width:max-content; max-width:min(300px,calc(100vw - 16px)); box-sizing:border-box; padding:8px 10px; border:0; border-radius:6px; background:rgba(34,36,33,.97); color:#f5f5f1; font-family:inherit; font-size:12px; font-weight:400; line-height:1.45; white-space:normal; overflow-wrap:anywhere; pointer-events:none; }


.competitor-account-tooltip.competitor-health-tooltip { width:290px; padding:15px 16px; border:1px solid #ffffff14; border-radius:12px; background:#262824; box-shadow:0 12px 32px #0003,0 2px 6px #0002; text-align:left; }
.competitor-health-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.competitor-health-heading strong { color:#f5f5f1; font-size:13px; font-weight:600; letter-spacing:-.01em; }
.competitor-health-badge { flex-shrink:0; padding:3px 8px; border-radius:6px; background:#dbab581c; color:#f0c783; font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; }
.competitor-health-since { display:flex; flex-direction:column; gap:3px; margin-top:13px; }
.competitor-health-since > span { color:#b9bcb4; font-size:10px; }
.competitor-health-since time { color:#f5f5f1; font-size:12px; font-variant-numeric:tabular-nums; }
.competitor-health-note { display:block; margin-top:13px; padding-top:11px; border-top:1px solid #ffffff17; color:#c1c4bc; font-size:11px; line-height:1.55; }
.competitor-health-failure { display:block; margin-top:10px; color:#f0c783; font-size:11px; line-height:1.5; }

.competitor-chart-legend-values { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 10px; }

.competitor-trend-tabs { width:fit-content; max-width:100%; margin:14px 0; }
.competitor-trend-periods { width:fit-content; max-width:100%; margin:14px 0; }
.followers-insights .competitor-trend-periods button { padding:6px 12px; }
.competitor-trend-post-key { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.competitor-trend-post-identity { display:flex; align-items:center; gap:8px; flex:1 1 140px; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-soft); }
.competitor-trend-post-identity img { width:30px; height:36px; border-radius:4px; object-fit:cover; }
.competitor-trend-post-identity > div { flex:1; min-width:0; }
.competitor-trend-post-identity strong { display:block; font-size:11px; }
.competitor-trend-post-identity span { display:block; font-size:10px; color:var(--ink-soft); }
.competitor-trend-remove { flex-shrink:0; min-width:32px; min-height:32px; padding:4px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--ink-soft); font-size:20px; cursor:pointer; }
.competitor-trend-remove:hover { color:var(--ink); background:var(--surface-soft); }
.competitor-trend-post-identity svg { width:30px; height:8px; flex-shrink:0; color:var(--ink); }
.competitor-chart-post-metrics .competitor-chart-legend { grid-template-columns:1fr; gap:2px; border:1px solid var(--border); border-radius:8px; padding:4px; }
.followers-insights .competitor-chart-post-metrics .competitor-chart-legend-item { grid-template-columns:100px minmax(0,1fr); padding:8px; }
.competitor-chart-post-metrics .competitor-chart-legend-item + .competitor-chart-legend-item { border-top:1px solid var(--border); border-radius:0; }
.competitor-chart-post-metrics .competitor-chart-legend-values { gap:6px 12px; }
.competitor-chart-post-value { display:inline-flex; align-items:center; gap:6px; min-width:72px; justify-content:space-between; }
.competitor-chart-post-number { font-size:9px; color:var(--ink-soft); border:1px solid var(--border); border-radius:4px; padding:2px 4px; white-space:nowrap; }
.competitor-post-history:not(:empty) { margin-bottom:16px; }

.weekday-panel .competitor-periods { width:fit-content; margin:12px 0 30px; flex-wrap:wrap; }
.weekday-bars { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; padding:0 4px; }
.weekday-column { min-width:0; text-align:center; border-radius:4px; }
.weekday-column:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.weekday-track { height:160px; position:relative; display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--border); }
.weekday-bar { width:65%; max-width:42px; background:var(--ink); border-radius:4px 4px 0 0; }
.weekday-value { position:absolute; top:-24px; font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.weekday-label { display:block; margin-top:8px; font-size:12px; }
.weekday-sample { display:block; font-size:10px; color:var(--ink-soft); min-height:16px; }

.weekday-average-bar { position:absolute; bottom:0; width:95%; max-width:62px; background:var(--ink); opacity:.18; border-radius:4px 4px 0 0; }
.weekday-bar { position:relative; }
.weekday-legend { display:flex; gap:18px; flex-wrap:wrap; margin:-18px 0 36px; font-size:11px; color:var(--ink-soft); }
.weekday-legend span { display:flex; gap:6px; align-items:center; }
.weekday-legend span::before { content:''; width:10px; height:10px; border-radius:2px; background:var(--ink); }
.weekday-legend-average::before { opacity:.18; }

.weekday-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0 30px; }
.weekday-panel .weekday-controls .competitor-periods { margin:0; }
.followers-insights .weekday-drilldown { border:1px solid var(--border); border-radius:999px; padding:7px 12px; font-size:12px; }
.followers-insights .weekday-drilldown[aria-pressed=true] { background:var(--ink); color:var(--surface); }
.weekday-bars[hidden],.weekday-hourly[hidden],.weekday-hour-details[hidden] { display:none; }
.weekday-hourly { overflow:auto; max-height:520px; }
.weekday-hour-table { border-collapse:separate; border-spacing:3px; width:100%; min-width:350px; table-layout:fixed; font-size:10px; }
.weekday-hour-table caption { text-align:left; padding:0 0 10px; color:var(--ink-soft); }
.weekday-hour-table th { font-weight:500; background:var(--surface); position:sticky; top:0; z-index:2; padding:5px 0; }
.weekday-hour-table th:first-child { width:38px; }
.followers-insights .weekday-hour-cell { position:relative; display:flex; flex-direction:column; justify-content:center; width:100%; height:38px; padding:2px; border:0; border-radius:4px; background:var(--surface-soft); overflow:hidden; font-size:10px; }
.weekday-hour-fill,.weekday-hour-average { position:absolute; left:0; height:50%; background:var(--ink); opacity:.22; }
.weekday-hour-fill { top:0; }
.weekday-hour-average { bottom:0; opacity:.10; }
.weekday-hour-value,.weekday-hour-peer { position:relative; z-index:1; }
.weekday-hour-peer { color:var(--ink-soft); font-size:9px; }
.weekday-hour-cell:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }

/* Optional industry benchmarks stay compact until requested. */
.competitor-chart-leaders { margin-bottom:12px; border-top:1px solid var(--border); padding-top:10px; }
.competitor-chart-leaders summary { cursor:pointer; color:var(--ink-soft); font-size:12px; padding:4px 0; }
.competitor-chart-leaders .competitor-chart-legend { margin:8px 0 0; }
.followers-insights .competitor-table .competitor-account-group th { text-align:left; padding:16px 12px 8px; font-size:12px; color:var(--ink-soft); border-bottom:1px solid var(--border); background:var(--surface-soft); }

.weekday-panel .weekday-leaders-toggle { margin:16px 0 12px; width:fit-content; max-width:100%; line-height:1.5; }
.weekday-leaders-toggle input { flex-shrink:0; }

.competitor-accounts-panel .competitor-group-toggle { margin:14px 0; width:fit-content; line-height:1.5; }

.followers-period { padding:16px 18px; }
.followers-period .followers-toolbar { justify-content:flex-end; gap:12px; }
.followers-period-divider { color:var(--ink-soft); padding:0 5px; align-self:center; user-select:none; }
.followers-period-label { color:var(--ink-soft); font-size:11px; font-weight:500; }
.followers-period .plan-group { margin-left:0; height:32px; padding:3px; border-radius:var(--radius-sm); max-width:100%; }
.followers-period .plan-group-btn { height:24px; line-height:24px; padding:0 9px; border-radius:5px; font-size:11px; }
.followers-period .plan-group-btn:focus-visible { outline:2px solid var(--chart-cur); outline-offset:2px; }
.followers-hour-dropdown { position:relative; }
.followers-hour-dropdown summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:5px; }
.followers-hour-dropdown summary::-webkit-details-marker { display:none; }
.followers-hour-dropdown summary::after { content:'▾'; font-size:9px; }
.followers-hour-menu { display:none; position:absolute; top:100%; left:0; min-width:70px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:0 6px 18px #0002; z-index:20; }
.followers-hour-dropdown[open] .followers-hour-menu,
.followers-hour-dropdown:hover:not(.dismissed) .followers-hour-menu { display:flex; flex-direction:column; gap:3px; }
.followers-period .followers-hour-menu .plan-group-btn { width:100%; text-align:left; flex:none; }
@container (max-width: 420px) {
 .followers-period .followers-toolbar { gap:8px; }
 .followers-period .plan-group { flex:1; }
 .followers-period .plan-group-btn { flex:1; padding:0 5px; }
}

.competitor-crawl-toggle { margin:0 0 14px; }
.competitor-trend-post-identity .competitor-first-crawl { margin-top:4px; color:var(--ink); font-variant-numeric:tabular-nums; }

.competitor-chart-comparison .competitor-chart-date-tooltip.is-crawl-aligned { max-width:100%; white-space:normal; overflow-wrap:anywhere; box-sizing:border-box; }

/* Updating the trend above the cards must not shift the sidebar's scroll position. */
.followers-body:has(.competitor-post-history) { overflow-anchor:none; }

.competitor-post-instagram { position:absolute; bottom:10px; right:10px; z-index:4; display:grid; place-items:center; width:32px; height:32px; border:1px solid #ffffff60; border-radius:8px; color:#fff; background:#0008; }
.competitor-post-instagram:hover { background:#000c; }
.competitor-post-instagram svg { width:18px; height:18px; }
.competitor-post-instagram:focus-visible { outline:2px solid #fff; outline-offset:2px; }

.competitor-chart-tooltip.weekday-tooltip { position:fixed; inset:auto; margin:0; width:400px; max-width:calc(100vw - 16px); color:var(--ink); font-family:inherit; }

/* Consistent tiny post-type symbols in every planner view. */
.post-type-icon { display: inline-flex; width: 13px; height: 13px; flex: 0 0 13px; align-items: center; justify-content: center; color: var(--ink-soft); vertical-align: -1px; }
.post-type-icon svg { display: block; width: 13px; height: 13px; }
.post-card-title > .post-type-icon { margin-right: 6px; }
 .cal-chip-series { display: grid; min-width: 13px; height: 14px; align-items: center; justify-items: center; }
.cal-chip-series > .series-mark,
.cal-chip-series > .cal-chip-ep { grid-area: 1 / 1; transition: opacity 120ms ease; }
.cal-chip-series > .cal-chip-ep { opacity: 0; white-space: nowrap; }
.cal-chip:is(:hover, :focus-within) .cal-chip-series.has-episode > .series-mark { opacity: 0; }
.cal-chip:is(:hover, :focus-within) .cal-chip-series > .cal-chip-ep { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cal-chip-series > .series-mark,
  .cal-chip-series > .cal-chip-ep { transition: none; }
}
.post-type-control { display: flex; align-items: center; gap: 5px; }
.post-type-control .pt-select { min-width: 0; }
.post-type-preview { display: inline-flex; align-items: center; }
.post-type-preview:empty { display: none; }
.post-type-field { position: relative; }
.post-type-field > .post-type-preview { position: absolute; left: 10px; bottom: 12px; pointer-events: none; }
.post-type-field:has(> .post-type-preview:not(:empty)) > select { padding-left: 30px; }

/* Shared platform shell */
body.platform { --platform-width: 76px; --vw: calc(100vw - var(--platform-width)); margin-left: var(--platform-width); }
.platform-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--platform-width); z-index: 92; display: flex; align-items: center; flex-direction: column; gap: 16px; padding: 24px 12px 18px; box-sizing: border-box; background: color-mix(in srgb, var(--surface) 88%, var(--bg)); border-right: 1px solid var(--border); }
.rail-control { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; color: var(--ink-soft); text-decoration: none; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.rail-control > svg { width: 22px; height: 22px; }
.rail-control:hover { background: var(--surface-soft); color: var(--ink); }
.rail-control:active { transform: scale(.95); }
.rail-control:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 4px; }
.rail-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.platform-brand { color: var(--ink); }
.platform-brand > svg { width: 32px; height: 32px; stroke-width: 1.7; }
.rail-divider { width: 20px; height: 1px; background: var(--border); margin: 0; }
.platform-sidebar nav { display: grid; gap: 10px; }
.platform-sidebar nav a[aria-current] { background: var(--ink); color: var(--bg); box-shadow: 0 3px 8px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--bg) 18%, transparent); }
.platform-all[aria-current] { background: var(--surface-soft); color: var(--ink); }
.platform-all { margin-top: 6px; }
#platform-utilities { margin-top: auto; display: flex; align-items: center; flex-direction: column; gap: 16px; }
#platform-utilities .sync-status { width: 36px; height: 36px; justify-content: center; padding: 0; border-radius: 50%; }
#platform-utilities .sync-label, #platform-utilities #btn-account > span:not(.avatar) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#platform-utilities #btn-account { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 5px rgba(0,0,0,.03); }
#platform-utilities #btn-account .avatar { width: 28px; height: 28px; }
.platform-sidebar [data-rail-label]::after { content: attr(data-rail-label); position: absolute; z-index: 210; left: calc(100% + 16px); top: 50%; bottom: auto; transform: translate(3px, -50%); padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-md); font-size: 12px; font-weight: 500; line-height: 1.4; max-width: 220px; width: max-content; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.platform-sidebar [data-rail-label]:is(:hover,:focus-visible,:focus-within)::after { opacity: 1; visibility: visible; transform: translate(0, -50%); }
/* The rail owns its tooltips; retain the existing sync-status tooltip. */
.platform-sidebar [data-rail-label][data-tip]::before { display: none; }
.platform-sidebar .followers-notifications { top: 5px; right: 4px; }
.platform-sidebar .followers-notification { width: 6px; height: 6px; box-shadow: 0 0 0 2px var(--surface); }
.platform-menu { display: none; }
body.platform .view > .app-header { width: 100%; }
body.platform .view > .app-header .sync-status-wrap { display: none; }
body.platform .view { min-width: 0; }
#view-analytics:not([hidden]) { display: block; height: 100dvh; }
#view-analytics .followers-drawer { position: relative; inset: auto; transform: none; visibility: visible; width: 100%; max-width: none; height: 100dvh; border: 0; box-shadow: none; display: flex; flex-direction: column; }
#view-analytics .followers-header, #view-analytics .notes-foot { padding-left: 28px; padding-right: 28px; }
#view-analytics .followers-body { flex: 1; min-height: 0; padding: 24px 28px; overflow-y: auto; }
#view-analytics #btn-followers-close, #view-analytics #btn-followers-expand, #followers-scrim { display: none; }
#view-analytics #followers-title { font-size: 24px; margin: 0; }
body.platform.followers-expanded { --panel-w: 0px; }
.shotlist-library-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; color: var(--ink); text-decoration: none; }
.shotlist-library-card h2 { font-size: 18px; margin: 0; }
#shotlist-back { margin-bottom: 24px; text-decoration: none; }
#post-open-shotlist { margin-bottom: 18px; }
@media (max-width: 760px) {
  body.platform { margin-left: 0; --vw: 100vw; padding-top: 56px; }
  .platform-menu { display: flex; align-items: center; justify-content: center; position: fixed; top: 8px; left: 12px; width: 40px; height: 40px; padding: 0; border-radius: 12px; background: var(--surface); }
  .platform-menu svg { width: 20px; height: 20px; }
  .platform-sidebar { transform: translateX(-100%); padding-top: 72px; width: 76px; }
  .platform-nav-open .platform-sidebar { transform: none; }
  .platform-scrim:not([hidden]) { position: fixed; inset: 0; background: var(--scrim); z-index: 85; }
  #view-analytics:not([hidden]), #view-analytics .followers-drawer { height: calc(100dvh - 56px); }
  #view-analytics .followers-header, #view-analytics .followers-body, #view-analytics .notes-foot { padding-left: 16px; padding-right: 16px; }
}
@media print {
  body.platform { margin: 0; padding: 0; --vw: 100vw; }
  .platform-sidebar, .platform-menu, .platform-scrim, #shotlist-back { display: none !important; }
}
/* Workspace content stays below platform navigation and modal overlays. */
#view-analytics .followers-drawer { z-index: 1; }
.platform-sidebar { z-index: 92; }
.platform-menu { z-index: 94; }
.platform-scrim:not([hidden]) { z-index: 91; }
@media (max-width: 760px) { body.platform .app-header { top: 56px; } }

@media (prefers-reduced-motion: reduce) { .rail-control, .platform-sidebar [data-rail-label]::after { transition: none; } }

.platform-sidebar .sync-status[data-tip]::after { left: calc(100% + 18px); top: 50%; bottom: auto; transform: translateY(-50%); max-width: 220px; border-radius: 9px; padding: 8px 11px; }

@media(max-width:600px) { .ads-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.ads-account-scroll { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.ads-account-table { width:100%; border-collapse:collapse; font-size:13px; }
.ads-account-table th,.ads-account-table td { padding:16px; text-align:right; border-bottom:1px solid var(--border); }
.ads-account-table th:first-child { text-align:left; }
.ads-account-table thead th { color:var(--ink-soft); font-size:11px; font-weight:500; white-space:nowrap; background:var(--surface-soft); }
.ads-account-table small { display:block; margin-top:5px; color:var(--ink-soft); font-size:10px; font-weight:400; }
.followers-insights .ads-account-toggle { border:0; background:transparent; color:var(--ink); padding:0; font:inherit; font-weight:600; text-align:left; white-space:nowrap; cursor:pointer; }
.ads-account-toggle:focus-visible { outline:2px solid var(--ink-soft); outline-offset:4px; }
.ads-account-detail > td { padding:20px; text-align:left; background:var(--surface-soft); }
.ads-account-detail[hidden] { display:none; }
.ads-account-table .ads-card { text-align:left; }
@media(max-width:600px) { .ads-account-table th,.ads-account-table td { padding:12px; } .ads-account-detail > td { padding:12px; } }

/* Planning title and period controls share the top row. */
#view-planner > .app-header { gap: 24px; }
#view-planner > .app-header > .editor-meta { flex: 1; min-width: 0; margin-bottom: 0; }
#view-planner > .app-header > .editor-header-right { margin-left: auto; flex-shrink: 0; }
#view-planner > .planner-main { padding-top: 24px; }
@media (max-width: 760px) {
  #view-planner > .app-header { flex-wrap: wrap; gap: 12px; }
  #view-planner > .app-header > .editor-meta { flex-basis: 100%; }
  #view-planner > .planner-main { padding-top: 20px; }
  #view-planner .plan-viewbar { margin-top: 0; }
}

.shotlist-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.shotlist-filters [aria-pressed="true"] { background: var(--ink); color: var(--paper, #fff); }
.followers-goals-expand { margin-left: auto; flex-shrink: 0; }
.followers-header-progress + .followers-header-progress { margin-top: 12px; }
.followers-goal-row-label { color: var(--ink-soft); font-size: 11px; margin-bottom: 4px; }
/* Header landmarks stay anchored to the first goal row as the list grows. */
.followers-header .notes-head { align-items: flex-start; }
.followers-header .notes-head-text, .followers-header .tasks-head-actions { align-self: flex-start; }
.followers-header .tasks-head-actions { padding-top: 2px; }
.followers-goals-expand svg { transition: transform .15s var(--ease); }
.followers-goals-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.followers-goals-expand, .followers-goals-chevron-space { width: 28px; height: 28px; flex: 0 0 28px; }
.followers-goal-endpoints { min-width: 64px; }
.followers-header-progress { position: relative; }
.followers-header-progress:has(.followers-goal-meter:not(.tooltip-dismissed):is(:hover, :focus-visible)) { z-index: 220; }

/* Compact, comparable goal forecasts and the recent-pace endpoint. */
.followers-goal-forecasts { margin-top: 14px; display: grid; gap: 10px; }
.followers-goal-forecast-row { display: grid; gap: 3px; }
.followers-goal-forecast-label { display: flex; align-items: center; gap: 6px; color: #b9bcb5; font-size: 10px; }
.followers-goal-forecast-result { padding-left: 13px; font-size: 12px; font-weight: 500; }
.followers-goal-status, .followers-goal-recent-marker { --pace-color: #a5aaa2; }
.followers-goal-status.green, .followers-goal-recent-marker.green { --pace-color: #55b780; }
.followers-goal-status.yellow, .followers-goal-recent-marker.yellow { --pace-color: #e7bd50; }
.followers-goal-status.red, .followers-goal-recent-marker.red { --pace-color: #e5756c; }
.followers-goal-status { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pace-color); flex-shrink: 0; }
.followers-goal-recent-marker { position: absolute; top: 50%; width: 10px; height: 10px; box-sizing: border-box; transform: translate(-50%, -50%) rotate(45deg); background: var(--pace-color); border: 2px solid var(--bg, #fff); box-shadow: 0 0 0 1px var(--ink-soft); pointer-events: none; }
.followers-goal-bar-legend { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 2px; color: var(--ink-soft); font-size: 10px; }

.followers-goal-days-left { margin-left: auto; flex-shrink: 0; white-space: nowrap; }

/* Keep completed goals compact beneath the selected goal editor. */
.followers-goal-history-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.followers-goal-history-outcome { flex-shrink: 0; white-space: nowrap; font-size: 11px; }
.followers-goal-history-outcome.accomplished { color: #32815b; }
.followers-goal-history-outcome.missed { color: #c47128; }
.followers-goal-row > .followers-goal-edit { flex-shrink: 0; }
.followers-goal-actions { flex-wrap: wrap; }
.followers-goal-remove { margin-left: auto; }

.followers-goal-title { color: var(--ink); font-weight: 500; padding-right: 8px; overflow-wrap: anywhere; }

.competitor-account-menu { position: relative; text-align: left; }
.competitor-account-menu > summary { cursor: pointer; list-style: none; padding: 8px; border-radius: 8px; font-size: 16px; }
.competitor-account-menu > summary::-webkit-details-marker { display: none; }
.competitor-account-menu-items { position: fixed; z-index: 30; min-width: 180px; padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px #0003; }
.competitor-account-menu-items > * { display: block; width: 100%; padding: 10px; text-align: left; background: transparent; border: 0; color: inherit; font: inherit; text-decoration: none; border-radius: 6px; cursor: pointer; }
.competitor-account-menu-items > *:hover { background: var(--surface); }
body[data-workspace="settings"] #followers-tabs, body[data-workspace="settings"] #followers-primary { display: none; }

.project-settings-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 24px; }

/* Account actions share the quiet surfaces and spacing of workspace menus. */
.followers-insights .competitor-account-menu > summary { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--ink-soft); border: 1px solid transparent; transition: background .15s var(--ease), color .15s var(--ease); }
.followers-insights .competitor-account-menu > summary:hover,
.followers-insights .competitor-account-menu[open] > summary { color: var(--ink); background: var(--surface-soft); border-color: var(--border); }
.followers-insights .competitor-account-menu > summary:focus-visible { outline: 2px solid var(--ink-faint); outline-offset: 3px; }
.followers-insights .competitor-account-menu-items { width: 208px; min-width: 0; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.followers-insights .competitor-account-menu-items > :is(button,a) { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 450; line-height: 1.4; text-align: left; text-decoration: none; }
.followers-insights .competitor-account-menu-items > :is(button,a):is(:hover,:focus-visible) { background: var(--surface-soft); }
.competitor-account-menu-items svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--ink-soft); }
.competitor-account-menu-items > a { margin-top: 4px; position: relative; }
.competitor-account-menu-items > a::before { content: ''; position: absolute; top: -3px; left: 8px; right: 8px; height: 1px; background: var(--border); }
dialog.competitor-account-dialog { margin: auto; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--border); color: var(--ink); overflow: auto; }
.competitor-account-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.competitor-account-dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.competitor-account-dialog-heading .competitor-section-heading { margin: 0; }
.competitor-account-dialog .competitor-dialog-close { display: grid; place-items: center; flex: 0 0 30px; height: 30px; padding: 0; border: 0; background: transparent; font-size: 22px; color: var(--ink-soft); }
.competitor-account-dialog .competitor-manage-row { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 0; border: 0; }
.competitor-account-dialog .competitor-account-name { display: none; }
.competitor-account-dialog .competitor-check { justify-content: flex-start; }
.competitor-account-dialog .competitor-row-actions { justify-content: flex-end; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--border); }

.followers-insights .competitor-account-menu-items[popover] { inset: auto; margin: 0; color: var(--ink); overflow: visible; }
.followers-insights .ads-account-status {
  --status-color: #666a70; --status-bg: #f1f2f3;
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
  min-height:26px; border:0; border-radius:6px; background:var(--status-bg);
  color:var(--status-color); white-space:nowrap; font-size:11px; line-height:18px;
  font-weight:500; cursor:pointer; transition:filter .15s,box-shadow .15s;
}
.followers-insights .ads-account-status:hover { filter:brightness(.96); box-shadow:0 0 0 1px currentColor; }
.followers-insights .ads-account-status:focus-visible { outline:2px solid var(--status-color); outline-offset:3px; }
.followers-insights .ads-account-status.is-matched { --status-color:#247453; --status-bg:#eaf5ef; }
.followers-insights .ads-account-status.is-pending { --status-color:#416aab; --status-bg:#edf2fa; }
.followers-insights .ads-account-status.is-warning { --status-color:#8a641b; --status-bg:#fbf3e3; }
.followers-insights .ads-account-status.is-error { --status-color:#a34a43; --status-bg:#faeeec; }
.ads-status-dot { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:currentColor; }
.ads-status-chevron { width:5px; height:5px; flex-shrink:0; margin:-3px 1px 0 3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.6; }
.ads-modal-collection { border-top:1px solid var(--border); margin-top:20px; padding-top:4px; }
.ads-account-dialog .ads-match-row { border:0; padding:12px 0; }
.ads-account-dialog .ads-match-main { grid-template-columns:1fr; }
.ads-account-dialog .ads-match-actions { margin-top:16px; }

.ads-account-table .ads-account-group th { text-align:left; background:var(--surface-soft); color:var(--ink-soft); font-size:12px; }
.ads-account-table th[aria-sort]:not([aria-sort="none"]) .competitor-sort { color:var(--ink); }
.ads-account-table th[aria-sort]:not([aria-sort="none"]) .competitor-sort-icon { color:var(--ink); }

/* Period growth reports */
.growth-report{display:grid;gap:24px;padding:4px 0 24px;--report-accent:#9beeae}
.report-controls,.report-date-nav,.report-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.report-periods{display:flex;gap:4px;padding:4px;border:1px solid var(--border,#34363b);border-radius:14px;background:rgba(128,128,128,.06)}
.report-periods button,.report-date-nav button{border:0;border-radius:10px;padding:9px 16px;background:transparent;color:inherit;cursor:pointer;font:inherit}
.report-periods button[aria-pressed=true]{background:var(--report-accent);color:#102d1c;box-shadow:0 2px 10px #0001}
.report-date-nav{justify-content:flex-start}.report-date-nav>div{flex:1}.report-date-nav h2{margin:0 0 4px;font-size:26px;letter-spacing:-.8px}.report-date-nav span{font-size:12px;opacity:.6}.report-date-nav button{border:1px solid var(--border,#34363b)}.report-date-nav button:disabled{opacity:.25;cursor:default}.report-date-nav .report-reset{font-size:12px}
.report-hero{position:relative;overflow:hidden;padding:28px;border-radius:22px;background:radial-gradient(ellipse at 100% 0%,#94ecac30,transparent 65%),linear-gradient(120deg,#172b24,#101b22);color:#f4fff7;border:1px solid #a6e8bc30;box-shadow:0 14px 40px #0001}
.report-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#addec0}.report-hero h3{font-size:24px;letter-spacing:-.7px;font-weight:500;margin:12px 0 28px}.report-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.report-metric{display:flex;flex-direction:column;gap:8px;min-width:0}.report-metric>span{font-size:11px;opacity:.7}.report-metric strong{font-variant-numeric:tabular-nums;font-size:32px;letter-spacing:-1px;font-weight:600;color:#b2f6c6}.report-section{margin-top:28px}.report-section h3{font-size:18px;letter-spacing:-.3px;margin:0}.report-section-heading{justify-content:flex-start}.report-count{font-size:11px;border:1px solid var(--border,#34363b);border-radius:20px;padding:3px 9px;opacity:.65}.report-empty{padding:22px;border:1px dashed var(--border,#34363b);border-radius:14px;font-size:13px;opacity:.6}.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}.report-card{overflow:hidden;border:1px solid var(--border,#34363b);border-radius:16px;background:rgba(128,128,128,.035);transition:transform .2s,box-shadow .2s}.report-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px #0002}.report-preview{display:block;color:inherit}.report-cover{aspect-ratio:4/5;position:relative;overflow:hidden}.report-cover img{width:100%;height:100%;object-fit:cover}.report-card-body{padding:16px}.report-card h4{margin:0 0 16px;font-size:13px;font-weight:500;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5}.report-card-metrics{display:flex;gap:22px;flex-wrap:wrap}.report-card .report-metric strong{font-size:22px;color:var(--text,#a3d9b5);letter-spacing:-.5px}.growth-report button:focus-visible,.report-preview:focus-visible{outline:2px solid #65bd83;outline-offset:3px}
@media(max-width:540px){.report-hero{padding:22px 18px}.report-hero h3{font-size:21px}.report-totals{gap:10px}.report-metric strong{font-size:25px}.report-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.report-card-body{padding:12px}.report-card-metrics{gap:12px}.report-controls>.competitor-dropdown{flex:1}.report-date-nav h2{font-size:21px}}
.competitor-crawl-warning{display:inline-flex;align-items:center;justify-content:center;margin-left:7px;width:17px;height:17px;border:1px solid #dbab58;border-radius:50%;color:#dbab58;vertical-align:middle;cursor:help;font-size:11px;font-weight:700}
.competitor-crawl-warning::before{content:'!'}
.competitor-crawl-warning:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.request-table{width:100%;border-collapse:collapse;font-size:12px}.request-table th,.request-table td{text-align:left;padding:8px;border-bottom:1px solid var(--border,#ddd)}.followers-insights .request-log{display:block;width:100%;margin:12px 0;font-family:monospace;line-height:1.5;resize:vertical}

.followers-tabs .followers-logs-tab { flex:0 0 40px; display:grid; place-items:center; }

/* Minimal workspace system: neutral surfaces and restrained hierarchy. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --bg-primary: #fff;
  --bg-secondary: #f5f5f7;
  --label-primary: #1d1d1f;
  --label-secondary: #636366;
  --fill-secondary: #eeeef0;
  --separator: #e5e5e7;
  --accent: #0071e3;
  --bg: var(--bg-primary);
  --surface: var(--bg-primary);
  --surface-soft: var(--fill-secondary);
  --surface-hover: var(--bg-secondary);
  --border: var(--separator);
  --border-strong: #c7c7cc;
  --ink: var(--label-primary);
  --ink-soft: var(--label-secondary);
  --ink-faint: #707075;
  --ink-hover: #38383a;
  --header-bg: var(--bg-primary);
  --selection: #0071e326;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: none;
  --shadow-md: 0 4px 16px #0000000a;
  --shadow-lg: 0 12px 40px #0000001f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1c1c1e;
    --bg-secondary: #242426;
    --label-primary: #f5f5f7;
    --label-secondary: #b2b2b8;
    --fill-secondary: #2c2c2e;
    --separator: #38383a;
    --accent: #409cff;
    --border-strong: #545458;
    --ink-faint: #a1a1a8;
    --ink-hover: #d2d2d7;
    --shadow-lg: 0 12px 40px #00000052;
  }
}
.app-header h1, #followers-title, .editor-title { letter-spacing: -.025em; }
.app-header h1 { font-weight: 600; }
.app-header { border-bottom: 1px solid var(--separator); backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn { border-radius: 7px; font-weight: 500; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: none; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.list-card { padding: 24px; }
.list-card h3, .shotlist-library-card h2 { letter-spacing: -.02em; }
.list-card, .post-card { box-shadow: none; }
.list-card:hover, .post-card:hover, .post-card:focus-visible { transform: none; box-shadow: none; background: var(--surface-hover); }
.stat-tile { border-radius: 0; background: transparent; border: 0; border-left: 1px solid var(--separator); padding: 8px 16px; }
.stat-value { font-weight: 600; }
.stat-label { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--label-secondary); }
#view-analytics .followers-drawer, #view-analytics .followers-header { background: var(--bg); }
#view-analytics .followers-body { gap: 24px; }
@media (max-width: 760px) {
  body.platform {
    --mobile-nav-height: calc(78px + env(safe-area-inset-bottom, 0px));
    margin-left: 0; padding-top: 0; padding-bottom: var(--mobile-nav-height);
  }
  .platform-menu, .platform-scrim { display: none !important; }
  .platform-sidebar, .platform-nav-open .platform-sidebar {
    inset: auto 0 0; width: 100%; height: var(--mobile-nav-height);
    transform: none; flex-direction: row; justify-content: space-around; gap: 0;
    padding: 8px max(6px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: var(--surface); border: 0; border-top: 1px solid var(--border);
    border-radius: 24px 24px 0 0; box-shadow: 0 -6px 30px rgba(25,28,34,.04);
  }
  .platform-sidebar .rail-divider { display: none; }
  .platform-sidebar nav, #platform-utilities { display: contents; }
  #platform-utilities .sync-status-wrap { display: none; }
  .platform-sidebar .rail-control, #platform-utilities #btn-account {
    flex: 1; min-width: 0; max-width: 68px; width: auto; height: 58px;
    display: flex; flex-direction: column; gap: 5px; border: 0;
    border-radius: 16px; background: transparent; box-shadow: none;
    font-size: 10px; font-weight: 500; color: var(--ink-soft);
  }
  .platform-sidebar .rail-control > svg { width: 22px; height: 22px; }
  .platform-sidebar .rail-label {
    position: static; width: auto; height: auto; margin: 0; clip-path: none; overflow: visible;
  }
  .platform-brand::before { content: 'Projects'; order: 1; }
  #platform-utilities #btn-account::before { content: 'Account'; order: 1; }
  #platform-utilities #btn-account .avatar { width: 22px; height: 22px; }
  .platform-sidebar nav a[aria-current], .platform-sidebar .platform-brand[aria-current],
  #platform-utilities #btn-settings[aria-current] {
    background: var(--ink); color: var(--surface); box-shadow: none;
  }
  .platform-sidebar [data-rail-label]::after { display: none; }
  body.platform .app-header { top: 0; }
  body.platform .view > .app-header .sync-status-wrap { display: block; }
  .app-header h1 { font-size: 25px; }
  #view-analytics:not([hidden]), #view-analytics .followers-drawer {
    height: calc(100dvh - var(--mobile-nav-height));
  }
  .list-card { padding: 22px; }
  .dash-main { padding-top: 28px; }
}
@media print { body.platform { padding: 0; } }

.shotlist-filters .btn { background: var(--surface-soft); color: var(--ink-soft); }
.shotlist-filters [aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* Full-width analytics tabs and compact, right-aligned period controls. */
.followers-tabs { margin-left: 0; margin-right: 0; width: 100%; }
.followers-tabs button { min-width: 0; white-space: nowrap; }
.followers-period .followers-toolbar { width: 100%; }
.followers-period .plan-group { flex: 0 1 auto; }
.followers-period .plan-group > .plan-group-btn,
.followers-period .followers-hour-dropdown { flex: 0 0 auto; text-align: center; }
.followers-period .followers-hour-dropdown summary { justify-content: center; }
.chart-svg, .competitor-chart-plot svg {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
@media (max-width: 760px) {
  body.platform { --mobile-nav-height: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .platform-sidebar .rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .platform-brand::before, #platform-utilities #btn-account::before { content: none; }
  .platform-sidebar .rail-control, #platform-utilities #btn-account { height: 46px; gap: 0; }
}
@media (max-width: 760px) {
  .followers-period { padding: 16px 0; }
  .followers-period-label { display: none; }
  .followers-period .plan-group { width: 100%; min-width: 0; }
  .followers-period .plan-group > .plan-group-btn,
  .followers-period .followers-hour-dropdown { flex: 1; }
}

/* Navigation is a quiet landmark; the selected destination uses the accent. */
.platform-sidebar { background: var(--bg-secondary); }
.platform-sidebar nav a[aria-current] {
  background: var(--fill-secondary); color: var(--accent); box-shadow: none;
}
.rail-control { border-radius: 8px; }
.modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal { border: 1px solid var(--separator); }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.field :is(input, select, textarea):focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* Reports use the same typographic hierarchy as planning and analytics. */
.growth-report { --report-accent: var(--fill-secondary); }
.report-hero { background: var(--bg-secondary); color: var(--label-primary); border: 0; border-radius: 10px; box-shadow: none; }
.report-eyebrow { color: var(--label-secondary); letter-spacing: .06em; }
.report-metric strong, .report-card .report-metric strong { color: var(--label-primary); }
.report-periods { border: 0; border-radius: 8px; background: var(--fill-secondary); }
.report-periods button { border-radius: 6px; }
.report-periods button[aria-pressed=true] { background: var(--surface); color: var(--label-primary); box-shadow: none; }
.report-card { border-radius: 10px; background: var(--surface); }
.report-card:hover { transform: none; box-shadow: none; border-color: var(--border-strong); }
.report-count { border: 0; background: var(--fill-secondary); opacity: 1; color: var(--label-secondary); }
@media (max-width: 760px) {
  .platform-sidebar, .platform-nav-open .platform-sidebar { border-radius: 0; box-shadow: none; background: var(--bg-primary); }
  .platform-sidebar nav a[aria-current], .platform-sidebar .platform-brand[aria-current],
  #platform-utilities #btn-settings[aria-current] { background: var(--fill-secondary); color: var(--accent); }
  .list-card { padding: 20px; }
  .app-header h1 { font-size: 22px; }
  .btn { min-height: 44px; }
  .btn-primary { border-radius: 22px; }
  .field :is(input, select, textarea) { font-size: 16px; min-height: 44px; }
}
@media (pointer: coarse) {
  .icon-btn { min-width: 44px; min-height: 44px; }
  .plan-group-btn, .plan-layout-btn, .followers-tabs button,
  .report-periods button, .report-date-nav button { min-height: 44px; }
}
@media (prefers-contrast: more) {
  :root { --separator: var(--label-secondary); --border-strong: var(--label-primary); --ink-faint: var(--label-secondary); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* A shot list library reads as a list, with shared columns on desktop. */
#shotlist-library { display: flex; flex-direction: column; gap: 0; }
#shotlist-library .shotlist-library-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 160px 170px;
  align-items: center; gap: 24px; padding: 22px 0;
  border: 0; border-bottom: 1px solid var(--separator); border-radius: 0;
}
#shotlist-library .shotlist-library-card h2 { font-size: 17px; font-weight: 600; }
#shotlist-library .shotlist-library-card > span { font-size: 13px; color: var(--label-secondary); }
#shotlist-library .shotlist-library-card > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  #shotlist-library .shotlist-library-card { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 20px 0; }
  #shotlist-library .shotlist-library-card h2 { grid-column: 1 / -1; }
}
@media (prefers-reduced-transparency: reduce) {
  .followers-drawer .chart-tip, .followers-drawer .chart-tip-band .chart-tip::before,
  .competitor-chart-tooltip { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Keep touch targets inside the period track in every interaction state. */
@media (pointer: coarse) {
  .followers-period .plan-group { height: 52px; }
  .followers-period .plan-group-btn {
    height: 44px; min-height: 44px; line-height: 44px;
  }
}
/* Draw sort chevrons with strokes so iOS never substitutes emoji glyphs. */
.competitor-sort-icon {
  position: relative; display: inline-block; flex: 0 0 12px;
  width: 12px; height: 18px; font-size: 0;
}
.competitor-sort-icon::before, .competitor-sort-icon::after {
  content: ''; position: absolute; left: 3px; width: 6px; height: 6px;
  border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor;
}
.competitor-sort-icon::before { top: 3px; transform: rotate(45deg); }
.competitor-sort-icon::after { bottom: 3px; transform: rotate(225deg); }
th[aria-sort="ascending"] .competitor-sort-icon::after,
th[aria-sort="descending"] .competitor-sort-icon::before { display: none; }
/* Extend only the separator; tab labels retain their content alignment. */
#view-analytics .followers-tabs { position: relative; border-bottom: 0; }
#view-analytics .followers-tabs::before {
  content: ''; position: absolute; left: -28px; right: -28px; bottom: 0;
  height: 1px; background: var(--separator); pointer-events: none;
}
@media (max-width: 760px) {
  #view-analytics .followers-tabs::before { left: -16px; right: -16px; }
}

/* Layout-shaped placeholders shared across all asynchronous sections. */
.section-skeleton { width: 100%; padding: 16px 0; }
.skeleton-layout { display: grid; gap: 20px; }
.skeleton-block { background: var(--surface-soft); border-radius: 6px; animation: skeleton-pulse 1.6s ease-in-out infinite; }
.skeleton-heading { width: 42%; height: 22px; }
.skeleton-line { width: 100%; height: 14px; }
.skeleton-label { width: 60%; height: 10px; }
.skeleton-value { width: 56px; height: 26px; max-width: 100%; }
.skeleton-metrics, .skeleton-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.skeleton-metric, .skeleton-card { display: grid; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.skeleton-chart { height: 190px; }
.skeleton-cover { aspect-ratio: 4 / 5; }
.skeleton-rows { display: grid; gap: 16px; }
.skeleton-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 56px; align-items: center; gap: 14px; }
.skeleton-avatar { width: 30px; height: 30px; border-radius: 50%; }
.competitor-first-crawl .section-skeleton { width: 110px; padding: 4px 0; }
@keyframes skeleton-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (max-width: 480px) { .skeleton-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skeleton-card:last-child { display: none; } .skeleton-metric { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .skeleton-block, .ref-thumb.loading::after { animation: none; } }

/* Reports: a quiet, interactive account overview. */
.growth-report{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif}
.report-hero{padding:28px;border:1px solid var(--separator,var(--border));border-radius:20px;background:var(--surface);overflow:hidden}
.report-hero-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.report-hero h3{font-size:28px;font-weight:600;letter-spacing:-1px;margin:8px 0 0}.report-period-badge{padding:7px 11px;border-radius:8px;background:var(--fill-secondary);color:var(--label-secondary);font-size:12px;white-space:nowrap}
.report-drivers{margin-top:24px;border-top:1px solid var(--separator,var(--border));padding-top:20px}.report-drivers .report-section-heading>span{font-size:11px;color:var(--label-secondary)}.report-driver{display:grid;grid-template-columns:110px 1fr 38px;gap:16px;align-items:center;margin-top:18px;font-size:12px}.report-driver strong{text-align:right;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}.report-driver-track{height:6px;overflow:hidden;border-radius:4px;background:var(--fill-secondary)}.report-driver-track>div{height:100%;border-radius:4px;background:var(--label-primary)}.report-driver:nth-of-type(3) .report-driver-track>div{opacity:.45}.report-driver-note{margin:16px 0 0;font-size:11px;color:var(--label-secondary)}
@media(max-width:600px){.report-hero{padding:20px 14px;border-radius:16px}.report-hero h3{font-size:24px}.report-eyebrow{font-size:9px;overflow-wrap:anywhere}.report-summary-metric{padding:12px 8px;gap:8px}.report-summary-metric strong{font-size:24px;letter-spacing:-.8px}.report-summary-metric>span:first-child{font-size:11px}.report-comparison{font-size:10px}.report-coverage{font-size:9px}.report-trend-heading{align-items:flex-start;flex-direction:column}.report-chart-scale{top:88px}.report-driver{grid-template-columns:90px 1fr 32px;gap:10px}.report-controls button,.report-date-nav button{min-height:44px}.report-period-badge{font-size:10px}}
@media(prefers-reduced-motion:reduce){.report-summary-metric,.report-card{transition:none}}
@media(prefers-contrast:more){.report-summary-metric{border-color:var(--label-secondary)}.report-chart-grid{stroke:var(--label-secondary)}}

.feed-move-banner { position: fixed; z-index: 10000; inset: auto 16px 90px; max-width: 620px; margin: auto; padding: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 32px #0002; }

.report-totals{gap:12px}
.report-summary-metric{min-width:0;display:flex;align-items:center;gap:12px;padding:18px 16px;border:1px solid var(--separator,var(--border));border-radius:12px;background:var(--bg-secondary);color:var(--label-primary)}
.report-summary-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:10px}
.report-summary-label{font-size:12px;color:var(--label-secondary)}
.report-summary-metric strong{font-size:clamp(24px,3vw,38px);font-weight:600;letter-spacing:-1.3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.report-comparison{font-size:11px;line-height:1.5;color:var(--label-secondary)}
.report-coverage{font-size:10px;color:var(--label-secondary)}
.report-sparkline{flex:0 0 32%;max-width:120px;min-width:48px}
.report-sparkline svg{display:block;width:100%;height:auto;overflow:visible}
.report-chart-grid{stroke:var(--separator,var(--border));stroke-dasharray:3 5}
.report-chart-line{stroke:var(--label-primary);stroke-linecap:round;stroke-linejoin:round}
.report-chart-dot{fill:var(--label-primary)}
.report-sparkline-empty{display:block;font-size:10px;line-height:1.5;text-align:center;color:var(--label-secondary)}
.report-drivers h4{margin:0;font-size:13px;font-weight:600}
@media(max-width:900px){.report-totals{grid-template-columns:1fr}.report-sparkline{flex-basis:120px}}
@media(max-width:450px){.report-summary-metric{padding:14px}.report-summary-metric strong{font-size:30px}.report-summary-copy{gap:8px}.report-sparkline{flex-basis:30%}}