/* Content calendar (/calendar) + the feeds' "assign to a day" popover.
   Every class is cc- prefixed: this file loads on every page (stylesheet_link_tag :app),
   and the app already owns .btn/.card/.modal/.toast. Colours come from the theme
   variables so light mode works. See docs/features/content-calendar.md. */

.cc-root, .cc-pop, .cc-backdrop, .cc-toast {
  --cc-bg: var(--bg-primary, #0d1824);
  --cc-bg2: var(--bg-secondary, #152635);
  --cc-bg3: color-mix(in srgb, var(--text-primary, #fff) 7%, var(--bg-secondary, #152635));
  --cc-line: color-mix(in srgb, var(--text-primary, #fff) 14%, transparent);
  --cc-text: var(--text-primary, #fff);
  --cc-muted: var(--text-secondary, #babdc1);
  --cc-accent: var(--accent, #ecc879);
  --cc-accent-ink: #1a1408;
  --cc-done: #4caf7d;
  --cc-danger: var(--danger-color, #e5675f);
  --cc-money: #e0b84f; --cc-fitness: #5fb3e5; --cc-girls: #e57fb0; --cc-mentality: #9d8cf0; --cc-lifestyle: #4fc495; --cc-spontaneous: #ff8f3c;
  color: var(--cc-text);
  font-size: 14px; line-height: 1.4;
}
.cc-root *, .cc-pop *, .cc-backdrop * { box-sizing: border-box; }
.cc-root button, .cc-pop button, .cc-backdrop button { font: inherit; color: inherit; cursor: pointer; }

.cc-root { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; min-height: calc(100vh - 80px); }
.cc-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--cc-line); flex-wrap: wrap; }
.cc-head h1 { font-size: 18px; margin: 0 12px 0 0; }
.cc-btn { background: var(--cc-bg2); border: 1px solid var(--cc-line); border-radius: 8px; padding: 6px 12px; }
.cc-btn:hover { background: var(--cc-bg3); }
a.cc-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--cc-text) !important; }
.cc-btn.primary { background: var(--cc-accent); color: var(--cc-accent-ink); border-color: var(--cc-accent); font-weight: 600; }
.cc-btn.ghost { background: none; border-color: transparent; }
.cc-btn.danger { color: var(--cc-danger); }
.cc-btn.danger-fill { background: var(--cc-danger); border-color: var(--cc-danger); color: #fff; }
.cc-btn:disabled { opacity: .5; cursor: wait; }
.cc-seg { display: inline-flex; border: 1px solid var(--cc-line); border-radius: 8px; overflow: hidden; }
.cc-seg button { background: var(--cc-bg2); border: 0; padding: 6px 12px; }
.cc-seg button.on { background: var(--cc-accent); color: var(--cc-accent-ink); font-weight: 600; }
.cc-period { font-size: 17px; font-weight: 600; }
.cc-spacer { flex: 1; }
.cc-view { flex: 1; padding: 12px 18px 24px; }
.cc-legend { display: flex; gap: 12px; font-size: 12px; color: var(--cc-muted); }
.cc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }
.cc-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* month */
.cc-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--cc-line); border-radius: 10px; overflow: hidden; }
.cc-dow { text-align: center; font-size: 11px; color: var(--cc-muted); padding: 6px 0; background: var(--cc-bg2); border-bottom: 1px solid var(--cc-line); text-transform: uppercase; letter-spacing: .05em; }
.cc-cell { min-height: 118px; border-right: 1px solid var(--cc-line); border-bottom: 1px solid var(--cc-line); padding: 4px; cursor: pointer; min-width: 0; }
.cc-cell:nth-child(7n) { border-right: 0; }
.cc-cell.other { opacity: .4; }
.cc-cell.past .cc-pill:not(.done) { opacity: .65; }
.cc-cell:hover { background: color-mix(in srgb, var(--cc-text) 4%, transparent); }
.cc-daynum { font-size: 12px; text-align: center; margin: 2px 0 4px; }
.cc-cell.today .cc-daynum span { background: var(--cc-accent); color: var(--cc-accent-ink); border-radius: 50%; padding: 2px 6px; font-weight: 700; }
.cc-pill { display: flex; align-items: center; gap: 5px; font-size: 12px; border-radius: 5px; padding: 2px 6px; margin-bottom: 3px; background: color-mix(in srgb, var(--c) 22%, transparent); border-left: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background .12s, box-shadow .12s; }
.cc-pill:hover { background: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 0 1px var(--c); }
.cc-pill .chk { width: 12px; height: 12px; border: 1.5px solid var(--c); border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 9px; }
.cc-pill.done { text-decoration: line-through; opacity: .6; }
.cc-pill.done .chk { background: var(--c); color: var(--cc-bg); }
.cc-pill .sub, .cc-card .sub { font-size: 10px; opacity: .7; }
.cc-more { font-size: 11px; color: var(--cc-muted); padding-left: 4px; }
.cc-autohint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--cc-muted); opacity: .7; padding: 2px 6px; border: 1px dashed var(--cc-line); border-radius: 5px; margin-top: 2px; }

/* week */
.cc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cc-wcol { cursor: pointer; background: var(--cc-bg2); border: 1px solid var(--cc-line); border-radius: 10px; padding: 8px; min-height: 380px; min-width: 0; }
.cc-wcol.today { border-color: var(--cc-accent); }
.cc-wcol.past { opacity: .6; }
.cc-wcol h3 { margin: 0 0 8px; font-size: 12px; color: var(--cc-muted); font-weight: 500; display: flex; justify-content: space-between; }
.cc-wcol h3 b { color: var(--cc-text); font-size: 15px; }
.cc-wcol .cc-autohint { padding: 10px 6px; text-align: center; }
.cc-card { border-radius: 8px; padding: 8px; margin-bottom: 8px; background: color-mix(in srgb, var(--c) 14%, var(--cc-bg)); border-left: 3px solid var(--c); cursor: pointer; transition: background .12s, box-shadow .12s, transform .12s; }
.cc-card:hover { background: color-mix(in srgb, var(--c) 26%, var(--cc-bg)); box-shadow: 0 0 0 1px var(--c), 0 4px 14px #0006; transform: translateY(-1px); }
.cc-card.done { opacity: .55; }
.cc-card .t { font-weight: 600; font-size: 13px; }
.cc-card .s { font-size: 11px; color: var(--cc-muted); margin-top: 3px; }
.cc-thumb { position: relative; width: 100%; aspect-ratio: 9/12; border-radius: 6px; margin-top: 6px; display: flex; align-items: flex-end; padding: 6px; font-size: 11px; font-weight: 600; text-shadow: 0 1px 3px #000; color: #fff; background: linear-gradient(160deg, #333, #111); overflow: hidden; }
.cc-thumb .cc-thumbmedia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cc-thumb > span { position: relative; z-index: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cc-thumb::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #000a); pointer-events: none; }
.cc-thumb > span { z-index: 2; }
.cc-emptyclip { margin-top: 6px; border: 1px dashed var(--cc-line); border-radius: 6px; padding: 10px 4px; text-align: center; font-size: 11px; color: var(--cc-muted); }

/* day + the topic row (also the popup body) */
.cc-dayview { max-width: 760px; }
.cc-dayview h2 { margin: 4px 0; }
.cc-dayview .sub { color: var(--cc-muted); margin-bottom: 16px; }
.cc-row { position: relative; display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; background: var(--cc-bg2); border: 1px solid var(--cc-line); border-left: 4px solid var(--c); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.cc-row.done .cc-thumb, .cc-row.done .cc-emptyclip, .cc-row.done .t { opacity: .55; }
.cc-row.done .t { text-decoration: line-through; }
.cc-row .cc-thumb { margin: 0; aspect-ratio: 9/14; cursor: pointer; }
.cc-row .cc-emptyclip { margin: 0; aspect-ratio: 9/14; display: grid; place-items: center; }
.cc-row .t { font-size: 16px; font-weight: 600; }
.cc-row .meta { color: var(--cc-muted); font-size: 12px; margin-top: 4px; }
.cc-row .acts { display: flex; flex-direction: column; gap: 6px; }
.cc-row .xbtn { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--cc-muted); font-size: 14px; }
.cc-donetick { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: color-mix(in srgb, var(--cc-done) 18%, transparent); color: var(--cc-done) !important; border: 1px solid var(--cc-done); border-radius: 8px; padding: 6px 12px; font-weight: 600; }
.cc-donetick:hover::after { content: ' · undo'; font-weight: 400; opacity: .8; }
.cc-input, .cc-pop select, .cc-backdrop select, .cc-backdrop input[type=date] { width: 100%; background: var(--cc-bg); color: var(--cc-text); border: 1px solid var(--cc-line); border-radius: 8px; padding: 8px 10px; font: inherit; }
.cc-linkin { margin-top: 8px; max-width: 420px; font-size: 13px; padding: 6px 10px; }
.cc-linkin.saved { border-color: var(--cc-done); }
/* A topic's note — the Weekly Clips 📝 badge and "Add a note?" box, in theme colours. */
.cc-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; max-width: 420px; min-width: 0; padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1.35;
  background: color-mix(in srgb, var(--cc-accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--cc-accent) 35%, transparent); color: var(--cc-accent); cursor: pointer; }
.cc-note .txt { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.cc-note[hidden] { display: none; }   /* while its edit box is open */
.cc-row .cc-note { max-height: 13.5em; overflow-y: auto; overscroll-behavior: contain; }   /* a long paragraph scrolls inside its badge */
.cc-card .cc-note { margin-top: 6px; padding: 2px 6px; font-size: 11px; cursor: inherit; }
.cc-card .cc-note .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-noteedit { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; max-width: 420px; animation: cc-grow .16s var(--cc-ease) both; }
.cc-noteedit .cc-input { font-size: 13px; line-height: 1.35; padding: 6px 10px; resize: none; min-height: 32px; max-height: 40vh; overflow-y: auto; }
.cc-noteedit > span { padding-top: 6px; }
.cc-noteedit .cc-input:focus { outline: none; border-color: var(--cc-accent); }
.cc-noteedit button { flex-shrink: 0; width: 30px; height: 30px; border-radius: 6px; color: var(--cc-accent);
  background: color-mix(in srgb, var(--cc-accent) 20%, transparent); border: 1px solid color-mix(in srgb, var(--cc-accent) 50%, transparent); }
.cc-noteedit button:hover { background: color-mix(in srgb, var(--cc-accent) 35%, transparent); }

/* popovers */
.cc-pop { position: fixed; z-index: 16500; width: 260px; background: var(--cc-bg2); border: 1px solid var(--cc-line); border-radius: 10px; box-shadow: 0 10px 30px #0008; padding: 10px; }
.cc-pop h4 { margin: 0 0 8px; font-size: 12px; color: var(--cc-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.cc-pop.evpop { width: 600px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 0; background: none; border: 0; box-shadow: 0 14px 40px #000c; }
.cc-pop.evpop .cc-row { margin: 0; }
.cc-pop.evpop .cc-row .acts { padding-top: 20px; }   /* clear of the ✕ */
.cc-pop.autopop { width: 320px; }
.cc-pop .status { font-size: 12px; color: var(--cc-muted); margin: 10px 0 0; }
.cc-daylist button { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; padding: 7px 8px; border-radius: 6px; text-align: left; }
.cc-daylist button:hover:not(:disabled) { background: var(--cc-bg3); }
.cc-daylist button:disabled { opacity: .35; cursor: not-allowed; }
.cc-daylist small, .cc-opt small { color: var(--cc-muted); }
.cc-opt { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 7px 8px; border-radius: 6px; text-align: left; }
.cc-opt:hover:not(:disabled) { background: var(--cc-bg3); }
.cc-opt:disabled { opacity: .45; cursor: not-allowed; }
/* popup header with a close button */
.cc-pophead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cc-pophead h4 { margin: 0; }
.cc-x { background: none; border: 0; color: var(--cc-muted); font-size: 16px; line-height: 1; width: 32px; height: 32px; margin: -6px -6px -6px 0; border-radius: 8px; flex: none; }
.cc-x:hover { background: var(--cc-bg3); color: var(--cc-text); }

/* the feeds' assign list: days with their topics, scrolls when long, day names stick */
.cc-pop.cc-assign { width: 300px; }
.cc-assignlist { max-height: min(420px, 60vh); overflow-y: auto; overscroll-behavior: contain; margin: 0 -10px; padding: 0 10px; }
.cc-assignlist section { padding-bottom: 6px; }
.cc-dayhead { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; background: var(--cc-bg2); padding: 7px 2px 4px; font-weight: 600; border-bottom: 1px solid var(--cc-line); margin-bottom: 2px; }
.cc-dayhead small { color: var(--cc-muted); font-weight: 400; }
.cc-assignlist .cc-opt { padding: 6px 8px 6px 10px; }
.cc-assignlist .cc-opt small { margin-left: auto; }
.cc-assignlist .cc-opt.taken .cc-tick { color: var(--cc-done); font-weight: 700; }
.cc-newsel { width: 100%; margin-top: 2px; background: none; border: 1px dashed var(--cc-line); border-radius: 6px; padding: 5px 8px; color: var(--cc-muted); font: inherit; font-size: 12px; cursor: pointer; }
.cc-newsel:hover { border-color: var(--cc-accent); color: var(--cc-text); }
.cc-newsel option, .cc-newsel optgroup { background: var(--cc-bg2); color: var(--cc-text); }
.cc-pop .note { color: var(--cc-muted); font-size: 12px; padding: 4px 8px; }

/* dialogs */
.cc-backdrop { position: fixed; inset: 0; background: #0009; z-index: 16600; display: grid; place-items: center; }
.cc-modal { background: var(--cc-bg2); border: 1px solid var(--cc-line); border-radius: 14px; width: min(560px, 94vw); max-height: 88vh; overflow: auto; padding: 20px; }
.cc-modal h3 { margin: 0 0 6px; }
.cc-modal p.hint { color: var(--cc-muted); margin: 0 0 14px; font-size: 13px; }
.cc-field { margin-bottom: 14px; }
.cc-field label { display: block; font-size: 12px; color: var(--cc-muted); margin-bottom: 5px; }
.cc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.cc-stepper { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-stepper button { width: 38px; height: 34px; border-radius: 8px; border: 1px solid var(--cc-line); background: var(--cc-bg); }
.cc-stepper button.on { background: var(--cc-accent); color: var(--cc-accent-ink); font-weight: 700; }
.cc-check { display: flex; gap: 10px; align-items: flex-start; background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.cc-check input { margin-top: 3px; accent-color: var(--cc-accent); width: 16px; height: 16px; }
.cc-check b { display: block; }
.cc-check small { color: var(--cc-muted); }
.cc-curating { text-align: center; padding: 34px 0 20px; color: var(--cc-muted); }
.cc-curating .spin { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid var(--cc-line); border-top-color: var(--cc-accent); border-radius: 50%; animation: cc-spin .8s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-player video { width: 100%; max-height: 75vh; border-radius: 10px; background: #000; }

/* auto-plan chip */
.cc-autochip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 12px; border: 1px solid var(--cc-line); background: var(--cc-bg2); }
.cc-autochip .led { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-muted); opacity: .5; }
.cc-autochip.on { border-color: color-mix(in srgb, var(--cc-done) 60%, transparent); color: var(--cc-done); }
.cc-autochip.on .led { background: var(--cc-done); opacity: 1; box-shadow: 0 0 8px var(--cc-done); }

/* the reveal after Generate */
@keyframes cc-popin { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 2px var(--cc-accent); } 100% { transform: none; } }
.cc-fresh { animation: cc-popin .5s ease-out both; }

.cc-toast { position: fixed; right: 20px; top: 80px; z-index: 16700; width: 340px; background: #f4f4f4; color: #222; border-radius: 10px; box-shadow: 0 10px 30px #000a; padding: 12px 14px; display: flex; gap: 10px; animation: cc-slide .18s cubic-bezier(.2, .8, .2, 1); cursor: pointer; }
.cc-toast.error { background: #fde8e7; }
@keyframes cc-slide { from { transform: translateX(30px); opacity: 0; } }

/* the calendar button in feeds */
.cc-assign-btn.assigned { color: var(--accent, #ecc879); }

/* The app hides .navbar unless a page opts in (desktop_video.css / mobile_video.css);
   the calendar shows it on desktop and swaps it for the mobile header on phones. */
body.content-calendar-page .navbar { display: block !important; }
/* mobile_video.css locks the whole document (html, body { overflow: hidden; height: 100vh })
   for the full-screen feeds, on every page and at every width. The calendar is a normal
   page that is often taller than the screen, so it scrolls the document again. */
html:has(> body.content-calendar-page) { overflow-x: hidden; overflow-y: auto; height: auto; }
body.content-calendar-page { overflow: visible; height: auto; min-height: 100vh; }
/* The app's .mobile-header styles would show this header on desktop too. */
header.mobile-header.cc-mobile-header { display: none !important; }
.cc-root a, .cc-pop a { color: var(--cc-accent); }

/* mobile web (the app's own breakpoint) */
@media (max-width: 768px) {
  body.content-calendar-page .navbar { display: none !important; }
  header.mobile-header.cc-mobile-header { display: flex !important; position: fixed; top: 0; left: 0; right: 0; z-index: 16000; background: var(--bg-primary, #0d1824); border-bottom: 1px solid color-mix(in srgb, var(--text-primary, #fff) 12%, transparent); flex-direction: column; }
  .cc-root { padding-top: var(--mobile-header-height, var(--header-height, 50px)); min-height: 100vh; }

  .cc-head { padding: 10px 12px; gap: 8px; }
  .cc-head h1, .cc-legend, .cc-lbl { display: none; }
  .cc-period { order: 1; flex: 1; font-size: 16px; }
  .cc-head [data-cc=today] { order: 2; padding: 5px 10px; }
  .cc-head [data-cc=prev] { order: 3; } .cc-head [data-cc=next] { order: 4; }
  .cc-head [data-cc=prev], .cc-head [data-cc=next] { padding: 5px 8px; }
  .cc-head .cc-spacer { order: 5; flex-basis: 100%; height: 0; }
  .cc-head .cc-seg { order: 6; flex: 1; } .cc-head .cc-seg button { flex: 1; padding: 7px 0; }
  .cc-head [data-cc=add] { order: 7; width: 40px; padding: 6px 0; font-size: 17px; }
  .cc-head [data-cc=generate] { order: 8; width: 40px; padding: 6px 0; }
  .cc-head [data-cc=clear] { order: 7; width: 40px; padding: 6px 0; }
  .cc-head .cc-autochip { order: 9; flex-basis: 100%; justify-content: center; font-size: 12px; padding: 5px 10px; }
  .cc-view { padding: 8px 8px 20px; }

  /* month: tiny chips, the whole cell opens the day */
  .cc-cell { min-height: 74px; padding: 2px; }
  .cc-daynum { font-size: 11px; margin: 1px 0 2px; }
  .cc-pill { font-size: 9px; padding: 1px 3px; margin-bottom: 2px; border-left-width: 2px; gap: 0; pointer-events: none; }
  .cc-pill .chk, .cc-pill .sub { display: none; }
  .cc-more { font-size: 9px; padding-left: 2px; }
  .cc-autohint { font-size: 9px; padding: 1px 3px; }
  .cc-dow { font-size: 10px; }

  /* week: an agenda */
  .cc-week { grid-template-columns: 1fr; }
  .cc-wcol { min-height: 0; }
  .cc-wcol.past { opacity: .5; }
  .cc-card { display: grid; grid-template-columns: 1fr 34px; column-gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 6px; }
  .cc-card .t, .cc-card .s { grid-column: 1; }
  .cc-card .cc-thumb, .cc-card .cc-emptyclip { grid-column: 2; grid-row: 1 / span 2; width: 34px; margin: 0; aspect-ratio: 9/14; font-size: 0; padding: 0; }
  .cc-card:hover { transform: none; }

  /* day */
  .cc-dayview h2 { font-size: 20px; }
  .cc-row { grid-template-columns: 64px 1fr; gap: 10px; }
  .cc-row .cc-emptyclip { font-size: 9px; }
  .cc-row .t { font-size: 15px; }
  /* phone actions: the main one full width, the rest two per row */
  .cc-row .acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .cc-row .acts > * { white-space: nowrap; min-width: 0; }
  .cc-row .acts > :first-child { grid-column: 1 / -1; }
  .cc-pop.evpop .cc-row .acts { padding-top: 0; }
  .cc-linkin, .cc-note, .cc-noteedit { max-width: none; }

  /* every popover is a bottom sheet; the giant shadow dims the page */
  .cc-pop { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100% !important; max-width: none;
            border-radius: 16px 16px 0 0; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 0 0 100vmax #0009; animation: cc-sheet .2s ease-out; }
  .cc-pop.evpop { padding: 0; background: var(--cc-bg2); max-height: 88vh; }
  .cc-pop.evpop .cc-row { border-radius: 16px 16px 0 0; border-left: 0; border-top: 4px solid var(--c); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  @keyframes cc-sheet { from { transform: translateY(40px); opacity: 0; } }
  .cc-backdrop { place-items: end center; }
  .cc-modal { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); animation: cc-sheet .2s ease-out; }
  .cc-toast { left: 10px; right: 10px; width: auto; top: 10px; }
}

/* ---------- motion: short and snappy (120–200ms, ease-out) ----------
   Enter/leave classes are added by the JS (content_calendar_ui.js `dismiss`, the
   controller's render). Everything here is switched off for prefers-reduced-motion. */
.cc-root { --cc-ease: cubic-bezier(.2, .8, .2, 1); }
.cc-pop, .cc-backdrop, .cc-toast { --cc-ease: cubic-bezier(.2, .8, .2, 1); }

/* press feedback */
.cc-btn, .cc-seg button, .cc-stepper button, .cc-autochip, .cc-donetick, .cc-opt, .cc-daylist button, .cc-check {
  transition: transform .08s ease-out, background-color .12s, color .12s, border-color .12s, box-shadow .12s;
}
.cc-btn:active, .cc-seg button:active, .cc-stepper button:active, .cc-autochip:active,
.cc-donetick:active, .cc-opt:active:not(:disabled), .cc-daylist button:active:not(:disabled) { transform: scale(.95); }
.cc-autochip .led { transition: background-color .2s, box-shadow .2s, opacity .2s; }
.cc-autochip.on .led { animation: cc-led 2.4s ease-in-out infinite; }
@keyframes cc-led { 50% { box-shadow: 0 0 3px var(--cc-done); } }

/* view changes: fade for Day/Week/Month/Today, slide for ‹ ›, zoom into a day */
.cc-enter-fade { animation: cc-fade .16s var(--cc-ease) both; }
.cc-enter-next { animation: cc-from-right .18s var(--cc-ease) both; }
.cc-enter-prev { animation: cc-from-left .18s var(--cc-ease) both; }
.cc-enter-zoom { animation: cc-zoom .18s var(--cc-ease) both; }
.cc-dayview[class*="cc-enter"] .cc-row { animation: cc-rise .2s var(--cc-ease) both; }
.cc-dayview .cc-row:nth-of-type(2) { animation-delay: .03s; }
.cc-dayview .cc-row:nth-of-type(3) { animation-delay: .06s; }
.cc-dayview .cc-row:nth-of-type(4) { animation-delay: .09s; }
.cc-dayview .cc-row:nth-of-type(n+5) { animation-delay: .12s; }
@keyframes cc-fade { from { opacity: 0; } }
@keyframes cc-from-right { from { opacity: 0; transform: translateX(14px); } }
@keyframes cc-from-left { from { opacity: 0; transform: translateX(-14px); } }
@keyframes cc-zoom { from { opacity: 0; transform: scale(.98); } }
@keyframes cc-rise { from { opacity: 0; transform: translateY(6px); } }

/* popovers, dialogs, toasts: in and out */
.cc-pop { animation: cc-pop-in .14s var(--cc-ease) both; transform-origin: top left; }
.cc-pop.cc-out { animation: cc-pop-out .1s ease-in both; }
.cc-backdrop { animation: cc-fade .14s ease-out both; }
.cc-backdrop .cc-modal { animation: cc-modal-in .18s var(--cc-ease) both; }
.cc-backdrop.cc-out { animation: cc-fade-out .12s ease-in both; }
.cc-backdrop.cc-out .cc-modal { animation: cc-modal-out .12s ease-in both; }
.cc-toast.cc-out { animation: cc-toast-out .16s ease-in both; }
.cc-pop-step { animation: cc-from-right .14s var(--cc-ease) both; }
.cc-pop-step.back { animation-name: cc-from-left; }
.cc-curating { animation: cc-fade .14s ease-out both; }
@keyframes cc-pop-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
@keyframes cc-pop-out { to { opacity: 0; transform: scale(.97); } }
@keyframes cc-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes cc-modal-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes cc-fade-out { to { opacity: 0; } }
@keyframes cc-toast-out { to { opacity: 0; transform: translateX(24px); } }

/* mark posted: the link box opens, the check pops, the row flashes green */
.cc-linkin[data-pending] { animation: cc-grow .16s var(--cc-ease) both; }
@keyframes cc-grow { from { opacity: 0; transform: translateY(-4px); } }
.cc-justdone .chk, .cc-justdone.cc-donetick, .cc-justdone .cc-donetick { animation: cc-check .32s var(--cc-ease) both; }
.cc-row.cc-justdone, .cc-card.cc-justdone, .cc-pill.cc-justdone { animation: cc-flash .5s ease-out both; }
@keyframes cc-check { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes cc-flash { from { box-shadow: 0 0 0 2px var(--cc-done); } }

/* re-roll: the new archetype flips in */
.cc-rolled .t { animation: cc-flipin .32s var(--cc-ease) both; }
.cc-rolled { animation: cc-flash-accent .6s ease-out both; }
@keyframes cc-flipin { from { opacity: 0; transform: rotateX(80deg) translateY(-4px); } }
@keyframes cc-flash-accent { from { box-shadow: 0 0 0 2px var(--cc-accent); } }
[data-reroll]:disabled { opacity: .6; cursor: wait; }

/* delete: shrink away before the reload */
.cc-leave { animation: cc-leave .15s ease-in both; pointer-events: none; }
@keyframes cc-leave { to { opacity: 0; transform: scale(.94); } }

/* the feed's calendar button, once a clip is on the calendar */
.cc-assign-btn.assigned i { animation: cc-check .32s var(--cc-ease); }

@media (max-width: 768px) {
  .cc-pop { animation: cc-sheet-in .18s var(--cc-ease) both; }
  .cc-pop.cc-out { animation: cc-sheet-out .14s ease-in both; }
  .cc-pop.cc-pop-step { animation: cc-fade .14s ease-out both; }
  .cc-backdrop .cc-modal { animation: cc-sheet-in .2s var(--cc-ease) both; }
  .cc-backdrop.cc-out .cc-modal { animation: cc-sheet-out .14s ease-in both; }
  .cc-toast.cc-out { animation-name: cc-toast-up; }
  @keyframes cc-sheet-in { from { transform: translateY(100%); } }
  @keyframes cc-sheet-out { to { transform: translateY(100%); } }
  @keyframes cc-toast-up { to { opacity: 0; transform: translateY(-16px); } }
}

@media (prefers-reduced-motion: reduce) {
  .cc-root *, .cc-root, .cc-pop, .cc-pop *, .cc-backdrop, .cc-backdrop *, .cc-toast, .cc-assign-btn i {
    animation: none !important; transition: none !important;
  }
}