/* The to-do mockup in the start page's Pro section (assets/todos.js plays it): an HTML replica of
   the app's SwiftUI views (TodosSubView / HubListComponents.swift, QuickAddBar.swift,
   UndoToast.swift, ProfileAddButton.swift), sized in points of a 402 pt wide iPhone screen (--pt)
   so it scales with its container. Strings are the app's own (Localizable.xcstrings); the German
   page gets them through tools/i18n/de.json. */
.ios { --ios-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', Inter, system-ui, sans-serif; font-family: var(--ios-font);
  color: #000; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
.ios-frame { position: relative; width: 100%; max-width: 340px; margin: 0 auto; padding: 2.3%; border-radius: 15.5% / 7.2%; background: #0b0b0c;
  box-shadow: inset 0 0 0 1.5px #3a3a3c, 0 30px 60px rgba(60, 30, 10, 0.18); }
.ios-screen { position: relative; container-type: inline-size; overflow: hidden; aspect-ratio: 402 / 874; border-radius: 13.4% / 6.2%; background: #f2f2f7; }
/* One point of the 402 pt wide screen, for everything on it (cqw: the screen is the container). */
.ios-screen > * { --pt: calc(100cqw / 402); }
.ios-screen * { box-sizing: border-box; }
.ios [hidden] { display: none !important; }
.ios-status { position: absolute; inset: 0 0 auto; height: calc(54 * var(--pt)); display: flex; align-items: center; justify-content: space-between;
  padding: calc(6 * var(--pt)) calc(34 * var(--pt)) 0 calc(48 * var(--pt)); font: 600 calc(17 * var(--pt))/1 var(--ios-font); z-index: 5; }
.ios-island { position: absolute; left: 50%; top: calc(11 * var(--pt)); width: calc(124 * var(--pt)); height: calc(36 * var(--pt)); transform: translateX(-50%);
  border-radius: 999px; background: #000; z-index: 6; }
.ios-status-icons { display: flex; gap: calc(6 * var(--pt)); align-items: center; }
.ios-status-icons i { display: block; background: #000; border-radius: calc(2 * var(--pt)); }
.ios-status-icons .sig { width: calc(18 * var(--pt)); height: calc(11 * var(--pt)); clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 0; }
.ios-status-icons .bat { width: calc(26 * var(--pt)); height: calc(12 * var(--pt)); border-radius: calc(3.5 * var(--pt)); }
.ios-home { position: absolute; left: 50%; bottom: calc(8 * var(--pt)); width: calc(140 * var(--pt)); height: calc(5 * var(--pt)); transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 6; }

/* Navigation bar with iOS 26 glass buttons */
.ios-nav { position: absolute; inset: calc(54 * var(--pt)) 0 auto; display: flex; align-items: center; justify-content: space-between; height: calc(54 * var(--pt)); padding: 0 calc(16 * var(--pt)); z-index: 4; }
.ios-glass-btn { display: grid; place-items: center; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 999px; background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); box-shadow: 0 calc(1 * var(--pt)) calc(6 * var(--pt)) rgba(0, 0, 0, 0.1), inset 0 0 0 0.5px rgba(255, 255, 255, 0.9); }
.ios-glass-btn svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); color: #000; }
.ios-nav-title { font: 600 calc(17 * var(--pt))/1.2 var(--ios-font); }

.ios-glass-btn.tint svg, .ios-glass-group .tint svg { color: #fc4d02; }
.ios-glass-group { display: flex; align-items: center; gap: calc(26 * var(--pt)); height: calc(44 * var(--pt)); margin-left: auto; margin-right: calc(10 * var(--pt)); padding: 0 calc(16 * var(--pt));
  border-radius: 999px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 calc(1 * var(--pt)) calc(6 * var(--pt)) rgba(0, 0, 0, 0.1); }
.ios-glass-group i { display: block; width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
.ios-glass-group i svg { width: 100%; height: 100%; }
.ios-glass-group .heart { color: #ff2d55; }

/* Contact profile header (ContactProfile): photo, name, subtitle, status line, quick actions, tabs */
.profile-head { position: absolute; top: calc(115 * var(--pt)); left: calc(15 * var(--pt)); right: calc(15 * var(--pt)); display: flex; align-items: center; gap: calc(14 * var(--pt)); }
.profile-head img { width: calc(73 * var(--pt)); height: calc(73 * var(--pt)); border-radius: 999px; object-fit: cover; }
.profile-name { font: 600 calc(23 * var(--pt))/1.15 var(--ios-font); letter-spacing: -0.02em; }
.profile-sub { margin-top: calc(3 * var(--pt)); font: 400 calc(15.5 * var(--pt))/1.25 var(--ios-font); color: rgba(60, 60, 67, 0.6); }
.profile-status { display: flex; align-items: center; gap: calc(6 * var(--pt)); margin-top: calc(3 * var(--pt)); font: 600 calc(15.5 * var(--pt))/1.25 var(--ios-font); }
.profile-status svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); color: #fc4d02; }
.profile-actions { position: absolute; top: calc(203 * var(--pt)); left: calc(15 * var(--pt)); right: calc(15 * var(--pt)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(9 * var(--pt)); }
.profile-actions > div { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--pt)); padding: calc(7 * var(--pt)) 0 calc(6 * var(--pt)); border-radius: calc(14 * var(--pt)); background: #fff; font: 500 calc(11.5 * var(--pt))/1.2 var(--ios-font); }
.profile-actions i { display: block; width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); }
.profile-actions svg { width: 100%; height: 100%; }
.profile-tabs { position: absolute; top: calc(264 * var(--pt)); left: calc(15 * var(--pt)); right: calc(15 * var(--pt)); display: grid; grid-template-columns: repeat(3, 1fr); padding: calc(3 * var(--pt)); border-radius: 999px;
  background: rgba(255, 255, 255, 0.75); box-shadow: 0 calc(1 * var(--pt)) calc(6 * var(--pt)) rgba(0, 0, 0, 0.08); }
.profile-tabs div { padding: calc(6 * var(--pt)) 0; border-radius: 999px; text-align: center; font: 500 calc(15.5 * var(--pt))/1.2 var(--ios-font); color: rgba(60, 60, 67, 0.6); }
.profile-tabs .on { background: #fbdccd; color: #fc4d02; font-weight: 600; }

/* Tab bar (iOS 26: a floating glass capsule) */
.ios-tabbar { position: absolute; left: calc(19 * var(--pt)); right: calc(19 * var(--pt)); bottom: calc(20 * var(--pt)); display: grid; grid-template-columns: repeat(5, 1fr); padding: calc(4 * var(--pt)); border-radius: 999px;
  background: rgba(255, 255, 255, 0.86); box-shadow: 0 calc(2 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, 0.12); z-index: 3; }
.ios-tabbar div { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--pt)); padding: calc(5 * var(--pt)) 0 calc(4 * var(--pt)); border-radius: 999px; font: 500 calc(9.5 * var(--pt))/1.1 var(--ios-font); }
.ios-tabbar svg { width: calc(23 * var(--pt)); height: calc(23 * var(--pt)); }
.ios-tabbar .on { background: rgba(0, 0, 0, 0.07); color: #fc4d02; }

/* Inset-grouped list */
.ios-body { position: absolute; inset: calc(312 * var(--pt)) 0 0; overflow: hidden; }
.ios-chips { display: flex; gap: calc(8 * var(--pt)); padding: calc(6 * var(--pt)) calc(16 * var(--pt)); white-space: nowrap; }
.ios-chip { display: inline-flex; align-items: center; gap: calc(5 * var(--pt)); padding: calc(7 * var(--pt)) calc(14 * var(--pt)); border-radius: 999px; background: #fff;
  font: 600 calc(15 * var(--pt))/1.25 var(--ios-font); }
.ios-chip .n { font-weight: 400; color: rgba(60, 60, 67, 0.6); }
.ios-chip.on { background: #000; color: #fff; }
.ios-chip.on .n { color: rgba(255, 255, 255, 0.7); }
.ios-card { margin: calc(12 * var(--pt)) calc(16 * var(--pt)) 0; border-radius: calc(26 * var(--pt)); background: #fff; overflow: hidden; }
.ios-section-head { margin: calc(18 * var(--pt)) calc(36 * var(--pt)) calc(-4 * var(--pt)); font: 600 calc(13 * var(--pt))/1.3 var(--ios-font); color: rgba(60, 60, 67, 0.6); text-transform: uppercase; }

/* To-do row (TodoRow / HubRow / HubCheckbox) */
.todo-row { position: relative; display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(10 * var(--pt)) calc(14 * var(--pt)); min-height: calc(60 * var(--pt)); }
.todo-row + .todo-row::before { content: ""; position: absolute; top: 0; right: 0; left: calc(56 * var(--pt)); height: 0.5px; background: rgba(60, 60, 67, 0.29); }
.todo-check { position: relative; flex: none; width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); }
.todo-check svg { position: absolute; inset: calc(3 * var(--pt)); width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
.todo-check .open { color: rgba(60, 60, 67, 0.42); }
.todo-check .done { color: #fc4d02; opacity: 0; transform: scale(0.4); }
.todo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.todo-title { font: 400 calc(17 * var(--pt))/1.29 var(--ios-font); letter-spacing: -0.02em; transition: color 0.25s ease; }
.todo-title s { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 55% / 0 1px no-repeat; transition: background-size 0.3s ease; }
.todo-detail { display: flex; align-items: center; gap: calc(4 * var(--pt)); max-height: calc(18 * var(--pt)); margin-top: calc(3 * var(--pt)); overflow: hidden; font: 400 calc(13 * var(--pt))/1.3 var(--ios-font); color: rgba(60, 60, 67, 0.6);
  transition: opacity 0.18s ease, max-height 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), margin-top 0.32s cubic-bezier(0.3, 0.9, 0.3, 1); }
.todo-detail svg { width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); }
.todo-detail.overdue { color: #ff3b30; }
.todo-info { flex: none; display: grid; place-items: center; width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); color: #fc4d02; transition: opacity 0.2s ease; }
.todo-info svg { width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); }
.todo-row.is-done .todo-check .open { opacity: 0; transform: scale(0.4); }
.todo-row.is-done .todo-check .done { opacity: 1; transform: none; }
.todo-row.is-done .todo-title { color: rgba(60, 60, 67, 0.6); }
.todo-row.is-done .todo-title s { background-size: 100% 1px; }
/* Checked off (TodoRow in the To-dos list): the title greys and is struck through, the due-date line
   and the (i) go (the row has no details once done; only the mixed All list says "To-do · Done"),
   and the row stays in place until the next day. */
.todo-row.is-done .todo-detail { opacity: 0; max-height: 0; margin-top: 0; }
.todo-row.is-done .todo-info { opacity: 0; }
.todo-row.is-new { animation: todo-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes todo-in { from { opacity: 0; transform: translateY(calc(-8 * var(--pt))); } }

/* Floating "+ To-do" capsule (ProfileAddButton) */
.ios-fab { position: absolute; right: calc(18 * var(--pt)); bottom: calc(89 * var(--pt)); display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); min-height: calc(50 * var(--pt));
  padding: 0 calc(18 * var(--pt)); border-radius: 999px; background: #fc4d02; color: #fff; font: 600 calc(16 * var(--pt))/1 var(--ios-font); box-shadow: 0 calc(4 * var(--pt)) calc(10 * var(--pt)) rgba(0, 0, 0, 0.22); z-index: 3;
  transition: transform 0.2s ease; }
.ios-fab svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.ios-fab.is-pressed { transform: scale(0.94); }

/* Undo toast (UndoToast: .regularMaterial capsule at the top) */
.ios-toast { position: absolute; left: calc(24 * var(--pt)); right: calc(24 * var(--pt)); top: calc(318 * var(--pt)); display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--pt));
  padding: calc(10 * var(--pt)) calc(16 * var(--pt)); border-radius: 999px; background: rgba(250, 250, 252, 0.82); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 calc(4 * var(--pt)) calc(10 * var(--pt)) rgba(0, 0, 0, 0.12), inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); font: 500 calc(15 * var(--pt))/1.3 var(--ios-font); z-index: 7;
  opacity: 0; transform: translateY(calc(-30 * var(--pt))); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); }
.ios-toast span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ios-toast b { flex: none; font-weight: 600; color: #fc4d02; }
.ios-toast.is-shown { opacity: 1; transform: none; }

/* Quick-add drawer (QuickAddBar): an opaque sheet sized to its content */
.ios-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(8 * var(--pt)) 0 0; border-radius: calc(36 * var(--pt)) calc(36 * var(--pt)) 0 0; background: #f2f2f7;
  box-shadow: 0 calc(-2 * var(--pt)) calc(30 * var(--pt)) rgba(0, 0, 0, 0.18); z-index: 8; transform: translateY(105%); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }
.ios-sheet.is-shown { transform: none; }
.ios-sheet::before { content: ""; display: block; width: calc(36 * var(--pt)); height: calc(5 * var(--pt)); margin: 0 auto calc(6 * var(--pt)); border-radius: 999px; background: rgba(60, 60, 67, 0.3); }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(16 * var(--pt)) calc(8 * var(--pt)); }
.sheet-bar .ios-glass-btn { background: #fff; }
.sheet-bar .ok { background: #fc4d02; }
.sheet-bar .ok svg { color: #fff; }
.sheet-rows { display: flex; flex-direction: column; gap: calc(12 * var(--pt)); padding: calc(4 * var(--pt)) calc(16 * var(--pt)) 0; }
.sheet-person { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); padding: calc(5 * var(--pt)) calc(11 * var(--pt)) calc(5 * var(--pt)) calc(5 * var(--pt)); border-radius: 999px; background: #fff; color: #000;
  color: #000; font: 500 calc(15 * var(--pt))/1.2 var(--ios-font); }
.ios-avatar { display: grid; place-items: center; border-radius: 999px; background: linear-gradient(#a5abb6, #858994); color: #fff; font-weight: 600; }
.sheet-person img { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); border-radius: 999px; object-fit: cover; }
.sheet-bar .x svg { color: #fc4d02; }
.ios-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 0.35s ease; z-index: 7; }
.ios-sheet.is-shown ~ .ios-dim, .ios-dim.is-shown { opacity: 1; }
.ios-keyboard { margin-top: calc(14 * var(--pt)); padding: calc(10 * var(--pt)) calc(4 * var(--pt)) calc(46 * var(--pt)); background: #d8dadf; border-radius: calc(28 * var(--pt)) calc(28 * var(--pt)) 0 0; }
.ios-keyboard > div { display: flex; justify-content: center; gap: calc(6 * var(--pt)); margin-bottom: calc(11 * var(--pt)); }
.ios-keyboard i { flex: 0 1 calc(33 * var(--pt)); height: calc(42 * var(--pt)); display: grid; place-items: center; border-radius: calc(6 * var(--pt)); background: #fff; font: 400 calc(22 * var(--pt))/1 var(--ios-font); font-style: normal; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.ios-keyboard .kb-last i.w { flex: 0 0 calc(92 * var(--pt)); font-size: calc(16 * var(--pt)); background: #abb0ba; }
.ios-keyboard .kb-last i.space { flex: 1; }
.ios-keyboard i::before { content: attr(data-k); }
.ios-keyboard i.s { flex: 0 0 calc(44 * var(--pt)); background: #abb0ba; font-size: calc(18 * var(--pt)); }
.ios-keyboard i.s:first-child { margin-right: calc(8 * var(--pt)); }
.ios-keyboard i.s:last-child { margin-left: calc(8 * var(--pt)); }
.sheet-field { position: relative; padding: calc(11 * var(--pt)) calc(12 * var(--pt)); border-radius: calc(12 * var(--pt)); background: #fff; font: 400 calc(17 * var(--pt))/1.29 var(--ios-font); min-height: calc(44 * var(--pt)); }
.sheet-field .ph { color: rgba(60, 60, 67, 0.3); }
.sheet-field .typed { white-space: pre; }
.sheet-field .caret { display: inline-block; width: calc(2 * var(--pt)); height: 1.1em; margin-left: 1px; vertical-align: -0.15em; background: #fc4d02; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.sheet-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--pt)); }
.hub-chip { display: inline-flex; align-items: center; gap: calc(5 * var(--pt)); padding: calc(6 * var(--pt)) calc(11 * var(--pt)); border-radius: 999px; background: #fff; color: #000; font: 500 calc(15 * var(--pt))/1.25 var(--ios-font); }
.hub-chip svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.hub-chip.recognised { background: rgba(252, 77, 2, 0.15); color: #fc4d02; }
.hub-chip.selected { background: #000; color: #fff; }
.hub-chip[hidden] { display: none; }
.sheet-added { display: flex; align-items: center; gap: calc(5 * var(--pt)); min-height: calc(18 * var(--pt)); font: 400 calc(13 * var(--pt))/1.3 var(--ios-font); color: rgba(60, 60, 67, 0.6); opacity: 0; transition: opacity 0.3s ease; }
.sheet-added svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
.sheet-added.is-shown { opacity: 1; }


/* Fitted into the original site's to-do card: the phone below the text, on the card's warm gradient. */
.todo-card .mockup-todos { width: min(300px, 78%); margin: auto auto 28px; }
.todo-card .ios-frame { padding: 4%; background: linear-gradient(145deg, #ffffff, #e9e9ee 45%, #f7f7f9); box-shadow: inset 0 0 0 1.5px #d5d5db, 0 2px 4px rgba(0, 0, 0, 0.06), 0 24px 50px rgba(120, 70, 20, 0.28); }
.todo-card .ios-screen { box-shadow: 0 0 0 1.5px #0c0c0e; }
.todo-card .wpb_text_column { margin-bottom: 1.75rem !important; }

/* Played by assets/todos.js once visible; reduced motion shows the still state. */
@media (prefers-reduced-motion: reduce) {
  .ios *, .ios *::before { transition: none !important; animation: none !important; }
}

/* Quick actions as set up for the site's images (QuickActionsManager: WhatsApp, Telegram, Instagram,
   Event). The brand glyphs are the app's Font Awesome Free 6 icons (CC BY 4.0). */
.profile-actions span { white-space: nowrap; }

/* AI Note Summary mockup (assets/summary.js plays it): Maria's Notes (NotesSubView / NoteRowView). A
   new note is saved in the note editor (NoteEditView), shows up with its first three lines, and its
   AI summary replaces them: "✨ summary" in italics, as the app shows a note that has one. */
.note-list { display: flex; flex-direction: column; gap: calc(12 * var(--pt)); padding: calc(12 * var(--pt)) calc(16 * var(--pt)) 0; }
.note-card { position: relative; padding: calc(12 * var(--pt)) calc(16 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(24 * var(--pt)); background: #fff; }
.note-tags { display: flex; gap: calc(6 * var(--pt)); margin-bottom: calc(8 * var(--pt)); }
.note-tag { display: inline-flex; align-items: center; gap: calc(5 * var(--pt)); padding: calc(4 * var(--pt)) calc(10 * var(--pt)); border-radius: 999px; background: rgba(118, 118, 128, 0.12);
  font: 400 calc(13.5 * var(--pt))/1.25 var(--ios-font); color: rgba(60, 60, 67, 0.85); white-space: nowrap; }
.note-tag svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.note-tag.person { padding-left: calc(4 * var(--pt)); color: #000; }
.note-tag.person img { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); border-radius: 999px; object-fit: cover; }
.note-body, .note-summary { font: 400 calc(16.5 * var(--pt))/1.3 var(--ios-font); letter-spacing: -0.015em; }
.note-body p, .editor-text p { margin: 0 !important; padding: 0; }
.note-body u, .editor-text u { text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.note-new .note-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.note-summary { font-style: italic; }
.note-summary .spark { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.25em; vertical-align: -0.1em; color: #fc4d02; }
/* The new note's two states: its first lines, then its summary (.is-summarized). */
.note-new .note-body, .note-new .note-summary { max-height: calc(110 * var(--pt)); transition: max-height 0.5s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.35s ease; }
.note-new .note-summary { max-height: 0; opacity: 0; overflow: hidden; }
.note-new.is-summarized .note-body { max-height: 0; opacity: 0; }
.note-new.is-summarized .note-summary { max-height: calc(110 * var(--pt)); opacity: 1; }
.note-new.is-summarized .spark { animation: spark-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes spark-pop { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } }
/* While the summary is written: a soft glow runs along the card's edge and over its text. */
.note-new::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  padding: calc(2 * var(--pt)); background: conic-gradient(from var(--glow-a, 0deg), #ff9f0a, #fc4d02, #ff2d92, #a855f7, #3b82f6, #ff9f0a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.note-new.is-working::after { opacity: 1; animation: note-glow 1.6s linear infinite; }
.note-new.is-working .note-body { -webkit-mask-image: linear-gradient(100deg, #000 30%, rgba(0, 0, 0, 0.35) 45%, #000 60%); -webkit-mask-size: 300% 100%; animation: note-shimmer 1.4s linear infinite; }
@property --glow-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes note-glow { to { --glow-a: 360deg; } }
@keyframes note-shimmer { from { -webkit-mask-position: 100% 0; } to { -webkit-mask-position: 0 0; } }
.note-new.is-hidden { display: none; }
.note-new.is-in { animation: todo-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

/* The note editor sheet (NoteEditView, new note) */
.note-sheet { top: calc(62 * var(--pt)); padding-top: calc(8 * var(--pt)); }
.note-sheet .sheet-bar { padding-bottom: calc(10 * var(--pt)); }
.note-sheet .sheet-title { font: 600 calc(17 * var(--pt))/1.2 var(--ios-font); }
.note-sheet .ok { position: relative; }
.note-sheet .ok svg { position: absolute; transition: opacity 0.2s ease, transform 0.3s ease; }
.note-sheet .ok .edit { opacity: 0; transform: scale(0.5); }
.note-sheet.is-saved .ok { background: #fff; }
.note-sheet.is-saved .ok .save { opacity: 0; transform: scale(0.5); }
.note-sheet.is-saved .ok .edit { opacity: 1; transform: none; color: #fc4d02; }
.ios-glass-btn.is-pressed { transform: scale(0.88); }
.note-sheet .ios-glass-btn { transition: transform 0.15s ease, background 0.2s ease; }
.editor-tags { padding: 0 calc(16 * var(--pt)); }
.editor-title { padding: calc(10 * var(--pt)) calc(16 * var(--pt)) calc(6 * var(--pt)); font: 700 calc(22 * var(--pt))/1.2 var(--ios-font); color: rgba(60, 60, 67, 0.3); }
.editor-text { padding: 0 calc(16 * var(--pt)); font: 400 calc(17 * var(--pt))/1.4 var(--ios-font); letter-spacing: -0.02em; }
.note-sheet { bottom: 0; }

/* Fitted into the AI Note Summary card: a graphite iPhone below the text, on the card's dark blue. */
.ai-card > .vc_column-inner { display: flex; flex-direction: column; height: 100%; }
.ai-card .mockup-summary { position: relative; width: min(300px, 78%); margin: auto auto 28px; }
.ai-card .mockup-summary::before { content: ""; position: absolute; inset: 8% -30% -4%; z-index: 0; background: radial-gradient(closest-side, rgba(252, 77, 2, 0.32), rgba(168, 85, 247, 0.16) 55%, rgba(10, 18, 38, 0) 100%); filter: blur(10px); }
.ai-card .ios-frame { position: relative; z-index: 1; padding: 4%; background: linear-gradient(145deg, #4a4a50, #1f1f22 45%, #3a3a3f); box-shadow: inset 0 0 0 1.5px #66666e, 0 2px 4px rgba(0, 0, 0, 0.3), 0 30px 60px rgba(0, 0, 0, 0.5); }
.ai-card .ios-screen { box-shadow: 0 0 0 1.5px #0c0c0e; }
.ai-card .wpb_text_column { margin-bottom: 1.75rem !important; }
@media (prefers-reduced-motion: reduce) { .note-new *, .note-new::after { animation: none !important; transition: none !important; } }