/* Smart add v2: one Liquid Glass card right above the keys (js/smartadd.js; proposals/smart-add-v2.html; Drew,
   2026-11-12 04:18, with screenshots of a quick-add card: "This is what it should look like, positioning, size, Liquid
   Glass, size, and everything design-wise"; 05:06: "Answer is cards two across, just make sure it's cohesive with
   guesses also being cards … Build"). Measured from the screenshots: 132 pt tall, 35 pt corners, 16 pt inside; rows of
   46, 34 and 35 pt; 12.5 pt from each edge and 13 pt above the keys when the window is narrow; 479 pt wide and centred
   in the space above the keyboard when it is wide. It sits beside the native strip (--sar) and above the keyboard
   (--sa-kb, from the visual viewport). Above the page and its sheets' scrims (z 64, as Search), under the menus it
   opens (z 80). Motion is transform/opacity only; reduced motion: no loops. */
.sa, .pop.sa-menu { --sa-warn: #ff9f0a; --sa-warnText: color-mix(in srgb, #ff9f0a 70%, var(--ink)); } /* orange text that keeps its contrast in Light and Dark */
/* --sa-veil: how much of the card's own colour lies over what is behind it; --sa-blur: how soft that shows. The web
   stand-in for the app's clear glass (Drew, 2026-11-12 14:33: "Turn down the frost on quick add Liquid Glass I want it
   like the screenshot I gave you from craft"): little of either, so the page reads through as soft shapes. */
.sa, .pop.sa-menu { --sa-veil: 26%; --sa-blur: 7px; }
.sa { position: fixed; inset: 0; z-index: 64; --sa-kb: 0px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  padding: calc(max(var(--sat), 4px) + 8px) 0 calc(max(var(--sa-kb), var(--sab)) + 13px); }
/* nothing dims the page: the glass has to show what is behind it (Drew, 2026-11-12: "Where is Liquid Glass", the card
   read as a flat dark slab); the scrim only takes the tap that closes the card */
.sa-scrim { position: absolute; inset: 0; background: transparent; }
.sa-pal { position: relative; flex: none; box-sizing: border-box; min-height: 132px; margin: 0 calc(12.5px + var(--sar)) 0 calc(12.5px + var(--sal)); padding: 0 16px; border-radius: 35px; color: var(--ink);
  transform-origin: 50% 100%; isolation: isolate;
  /* the web stand-in for glass (browser, Mac, an older app): a thin fill, a light blur so shapes behind stay readable
     as shapes, and a bright rim (--sa-veil, --sa-blur above). In the iPhone app (build 21+) the app draws the real
     thing and this card is hidden. */
  background: color-mix(in srgb, var(--sheet) var(--sa-veil), transparent); -webkit-backdrop-filter: saturate(1.6) blur(var(--sa-blur)); backdrop-filter: saturate(1.6) blur(var(--sa-blur));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), inset 0 1px 0 0 color-mix(in srgb, #fff 42%, transparent), inset 0 -1px 0 0 color-mix(in srgb, #fff 10%, transparent), 0 18px 40px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18); }
.sa-pal > div { position: relative; z-index: 1; }
/* the app's Liquid Glass card is up (js/smartadd.js "the native card"): this one stays laid out where the app's card is
   (--sa-n*, so the pill that flies off on Create starts there) but is neither seen nor touched */
.sa.native .sa-pal { visibility: hidden; position: fixed; left: var(--sa-nx, 12.5px); top: var(--sa-ny, 0px); width: var(--sa-nw, auto); margin: 0; max-width: none; }
@media (min-width: 600px) {
  .sa { justify-content: center; align-items: center; padding-bottom: max(var(--sa-kb), var(--sab)); }
  .sa-pal { width: 479px; max-width: calc(100% - 25px - var(--sal) - var(--sar)); margin: 0; }
}
.sa button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sa .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* row 1: where it goes · the small note · × */
.sa-r1 { height: 46px; display: flex; align-items: center; gap: 8px; }
.sa-destw { flex: 0 1 auto; min-width: 0; display: flex; margin-left: -6px; }
.sa .sa-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 14px; font-size: 13.5px; font-weight: 600; background: var(--fill8); color: var(--ink85); white-space: nowrap; max-width: 100%; box-sizing: border-box; min-width: 0; }
.sa-chip svg { flex: none; }
.sa-chip .lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sa-chip .sa-ai, .sa-card .sa-ai { display: inline-flex; flex: none; color: var(--accent); }
.sa-chip .qm { font-weight: 800; flex: none; }
.sa .sa-chip.sa-dest { height: 34px; padding: 0 8px 0 6px; gap: 7px; border-radius: 12px; font-size: 16.5px; font-weight: 600; color: var(--ink85); background: none; }
.sa .sa-chip.sa-dest:active { background: var(--fill8); }
.sa-dest .cv { display: inline-flex; flex: none; color: var(--ink40); }
/* the words name another place: a small orange ✦ after where it goes (the menu leads with that place) */
.sa-dest .sa-hint { display: inline-flex; flex: none; margin-left: 1px; color: var(--sa-warn); }
/* a guess Claude is unsure of: in the same spot, in orange */
.sa .sa-chip.sa-dest.sug { color: var(--sa-warnText); background: none; box-shadow: none; } /* the name and ✦ in orange: no pill */
.sa-dest.sug .sa-ai { color: var(--sa-warn); } .sa-dest.sug .cv { color: var(--sa-warnText); opacity: .7; }
/* a pin: its kind's icon on its area's colour, as on Home */
.sa-tile { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--abg); color: var(--afg); }
.sa-dest .sa-tile { width: 22px; height: 22px; border-radius: 6.5px; }
.sa-stat { flex: 1 1 0; min-width: 24px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink40); white-space: nowrap; overflow: hidden; }
.sa-stat .t, .sa-stat .src { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 4px; }
.sa-stat .t.ai { color: var(--accent); }
.sa-stat .dots { flex: none; }
.sa-stat .dots i { display: inline-block; width: 4px; height: 4px; border-radius: 2px; background: currentColor; margin: 0 1.5px; animation: sa-dot 1s ease-in-out infinite; }
.sa-stat .dots i:nth-child(2) { animation-delay: .15s; } .sa-stat .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sa-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.sa-x { position: relative; flex: none; width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 34%, transparent); color: var(--sheet); }
.sa .sa-x { background: color-mix(in srgb, var(--ink) 34%, transparent); color: var(--sheet); }
.sa-x::after { content: ''; position: absolute; inset: -12px; } /* a 44 pt target */

/* row 2: the kind icon (a tap changes the kind) · the field */
.sa-bar { height: 34px; display: flex; align-items: center; gap: 10px; margin-top: -5px; }
.sa-badge { position: relative; flex: none; width: 34px; height: 34px; border-radius: 17px; margin-left: -2px; display: grid; place-items: center; }
.sa .sa-badge { background: var(--a12); color: var(--accent); }
.sa-badge .g { position: absolute; inset: 0; display: grid; place-items: center; }
.sa-badge .ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--accent); opacity: 0; pointer-events: none; }
.sa-badge .ok { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 8px; background: var(--accent); color: var(--onAccent, #fff); display: grid; place-items: center; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sheet) 80%, transparent); opacity: 0; pointer-events: none; }
.sa-in { flex: 1; min-width: 0; height: 34px; padding: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: 19px; font-weight: 500; color: var(--ink); caret-color: var(--accent); -webkit-appearance: none; appearance: none; }
.sa-in::placeholder { color: var(--ink40); }
.sa .sa-in:focus, .sa .sa-in:focus-visible { outline: none; } /* the caret is the cue (no blue box on a field being typed in) */
.sa-mic { flex: none; width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; color: var(--ink55); }
.sa-mic:active { background: var(--fill8); }
.sa .sa-mic.on { color: #ff453a; background: rgba(255,69,58,.14); }
/* thinking: a light sweep along the card (one translated layer) and a soft breathing rim */
.sa-sweep { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; overflow: hidden; border-radius: inherit; }
.sa-sweep::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, var(--a12), rgba(255,255,255,.10), var(--a12), transparent); transform: translateX(-110%); }
.sa-glow { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--a70), 0 0 18px var(--a24); opacity: 0; }
.sa-pal.thinking .sa-sweep { opacity: 1; }
.sa-pal.thinking .sa-sweep::before { animation: sa-sweep 1.25s cubic-bezier(.45,0,.35,1) infinite; }
.sa-pal.thinking .sa-glow { animation: sa-breathe 1.25s ease-in-out infinite; }
.sa-pal.thinking .sa-badge .g svg { animation: sa-twinkle 1.25s ease-in-out infinite; }
@keyframes sa-sweep { to { transform: translateX(330%); } }
@keyframes sa-breathe { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes sa-twinkle { 0%, 100% { transform: scale(.88) rotate(0deg); opacity: .7; } 50% { transform: scale(1.06) rotate(18deg); opacity: 1; } }

/* only when needed: a link's Kind that Claude is unsure of (one orange chip) */
.sa-pv:empty { display: none; }
.sa-xr { display: flex; align-items: center; gap: 6px; height: 34px; padding-left: 42px; overflow: hidden; }
.sa .sa-chip.sug { background: repeating-linear-gradient(135deg, rgba(255,159,10,.10) 0 6px, transparent 6px 12px); color: var(--sa-warnText); box-shadow: inset 0 0 0 1.5px rgba(255,159,10,.6); }
.sa-chip.sug .sa-ai { color: var(--sa-warn); }

/* row 3: Schedule · Deadline (plain labels; set = the accent colour) · Create */
.sa-r3 { box-sizing: content-box; height: 35px; display: flex; align-items: center; gap: 14px; margin-top: 13px; padding-bottom: 8.5px; }
.sa-pv:not(:empty) + .sa-r3 { margin-top: 4px; }
.sa-labs { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 20px; overflow: hidden; }
.sa .sa-chip.sa-lab { flex: 0 1 auto; height: 35px; padding: 0; gap: 7px; border-radius: 8px; background: none; font-size: 17px; font-weight: 600; color: var(--accent); }
.sa .sa-chip.sa-lab.ghost { flex: none; color: var(--ink40); font-weight: 500; }
.sa .sa-chip.sa-lab.q { color: var(--sa-warnText); }
.sa .sa-chip.sa-lab:active { opacity: .6; }
@media (max-width: 599px) { .sa-lab.ico .lb { display: none; } } /* a narrow card with a day set: Deadline is its flag alone */
.sa-row.best { flex: none; margin-left: auto; margin-right: -9px; height: 35px; padding: 0 17px; border-radius: 17.5px; display: inline-flex; align-items: center; box-sizing: border-box; }
.sa .sa-row.best { background: var(--accent); color: var(--onAccent, #fff); }
.sa-row.best b { font-size: 17px; font-weight: 700; white-space: nowrap; }
.sa .sa-row.best:active { opacity: .8; }
.sa .sa-row.best.off { background: var(--fill8); color: var(--ink40); }

/* where it goes: cards, two across, in the same glass. Guesses first (a blue edge and ✦; orange when Claude is unsure),
   then the pins, then the Inbox */
.pop.sa-menu { width: 357px; max-width: calc(100vw - 20px - var(--sar) - var(--sal)); padding: 6px; border-radius: 24px; box-sizing: border-box; scrollbar-width: none; overscroll-behavior: contain;
  /* the menu lies over rows of the page: a little more veil than the card, the same soft blur */
  background: color-mix(in srgb, var(--sheet) calc(var(--sa-veil) + 24%), transparent); -webkit-backdrop-filter: saturate(1.6) blur(calc(var(--sa-blur) * 2)); backdrop-filter: saturate(1.6) blur(calc(var(--sa-blur) * 2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent), inset 0 1px 0 0 color-mix(in srgb, #fff 42%, transparent), 0 18px 40px rgba(0,0,0,.3); }
.pop.sa-menu::-webkit-scrollbar { display: none; }
.sa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.sa-card { display: flex; align-items: center; gap: 8px; height: 44px; min-width: 0; padding: 0 9px; border: 0; border-radius: 14px; box-sizing: border-box; background: var(--fill4); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sa-card:active { background: var(--fill8); }
.sa-card .l { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-card.on { background: var(--a12); } .sa-card.on .l { color: var(--accent); }
.sa-card.guess { box-shadow: inset 0 0 0 1.5px var(--a70); background: var(--a8); }
.sa-card.guess.u { box-shadow: inset 0 0 0 1.5px rgba(255,159,10,.6); background: rgba(255,159,10,.08); }
.sa-card.guess.u .l { color: var(--sa-warnText); } .sa-card.guess.u .sa-ai, .sa-card.guess.u .sa-on { color: var(--sa-warn); }
.pop .sa-card .sa-on { flex: none; margin-left: 0; color: var(--accent); font-weight: 700; }

/* a tag Smart add made by itself: "new" beside it in an item's properties, until it is tapped (kept) */
.chip.tag .newtag { margin-left: 5px; padding: 1px 5px; border-radius: 6px; font-size: 10.5px; font-weight: 700; line-height: 14px; background: var(--a12); color: var(--accent); cursor: pointer; }

/* "AI is offline": in the palette, then at the top of today's + menu */
.sa-ban { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255,159,10,.14); color: #ff9f0a; font-size: 13.5px; text-align: left; }
.sa-ban > svg { flex: none; }
.sa-ban > span { min-width: 0; flex: 1; }
.sa-ban b { display: block; font-weight: 650; }
.sa-ban small { display: block; font-weight: 500; color: var(--ink55); font-size: 12.5px; line-height: 16px; }
.sa-ban small:empty { display: none; }
.sa-ban button { flex: none; height: 32px; padding: 0 8px; border: 0; background: none; font: inherit; color: var(--accent); font-weight: 650; font-size: 13.5px; cursor: pointer; }
.qc .sa-ban { margin: 4px 0 10px; }
.sa-pal > .sa-ban { margin: 12px -4px 0; }

/* adding: the pill that flies to where the item lands */
.sa-ghost { position: fixed; z-index: 85; pointer-events: none; border-radius: 16px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; transform-origin: 0 0; color: var(--ink);
  background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(30px); backdrop-filter: saturate(1.6) blur(30px); box-shadow: var(--glassRing), var(--sm); }
.sa-ghost span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sa-ghost svg { color: var(--accent); flex: none; }

/* Settings › Smart add: its own sheet; the body scrolls when the closed Duo is too short for it (the grabber closes it) */
.sheet .sh-scroll { max-height: calc(100dvh - var(--sat) - var(--sab) - 64px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; }
.sheet .sh-scroll::-webkit-scrollbar { display: none; }
.sa-set .seg { display: flex; width: 100%; }
.sa-set .seg button { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 13.5px; white-space: nowrap; }
.sr.sa-sr { height: auto; min-height: 50px; padding: 8px 14px; }
.sr.sa-sr::before { left: 14px; }
.sa-sr .l { min-width: 0; flex: 1; }
.sa-sr .l small { display: block; font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--ink40); }
.sa-sr .r { flex: none; }
.sa-sr .r.ok { color: #30d158; } .sa-sr .r.bad { color: #ff9f0a; }

@media (prefers-reduced-motion: reduce) {
  .sa-pal.thinking .sa-sweep::before, .sa-pal.thinking .sa-glow, .sa-pal.thinking .sa-badge .g svg, .sa-stat .dots i { animation: none !important; }
  .sa-pal.thinking .sa-glow { opacity: .7; }
  .sa-pal.thinking .sa-sweep { opacity: 0; }
}