/* Rewinch demo: the top-right corner of a Mac with the real panel ported 1:1.
   Every number below is a PanelMetrics / PanelMotion value from Rewinch/Panel. */

.demo { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.demo-wrap { position: relative; margin: 0 auto; }

.mac {
  --motion: 1;
  --t-press: calc(0.14s * var(--motion));
  --t-hover: calc(0.14s * var(--motion));
  --t-puck: calc(0.34s * var(--motion));
  --t-morph: calc(0.24s * var(--motion));
  --t-grow: calc(0.26s * var(--motion));
  --t-list: calc(0.32s * var(--motion));
  --e-out: cubic-bezier(0, 0, 0.58, 1);
  --e-in: cubic-bezier(0.42, 0, 1, 1);
  --e-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);   /* replaced by a linear() spring at runtime */
  --e-puck: cubic-bezier(0.2, 0.8, 0.2, 1);
  --e-snappy: cubic-bezier(0.2, 0.8, 0.2, 1);
  --card-w: 344px; --card-h: 57px; --card-r: 20px;
  --secondary: rgba(255,255,255,0.55);
  --yellow: rgba(255,214,10,0.9);
  --red: #ff453a;
  position: relative; width: 378px; height: 480px; overflow: hidden; contain: paint;
  transform-origin: top left; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 60px 120px rgba(0,0,0,0.7);
  font: 13px var(--font); color: #fff; -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none; cursor: default; text-align: left;
  background:
    radial-gradient(ellipse 60% 50% at 18% 30%, #4f5fd6 0%, rgba(79,95,214,0) 70%),
    radial-gradient(ellipse 50% 60% at 80% 20%, #8a5cf5 0%, rgba(138,92,245,0) 70%),
    radial-gradient(ellipse 70% 50% at 60% 90%, #1c5fb8 0%, rgba(28,95,184,0) 70%),
    radial-gradient(ellipse 40% 40% at 35% 75%, #e26a9a 0%, rgba(226,106,154,0) 70%),
    linear-gradient(180deg, #151a3a 0%, #0b1030 100%);
}
.mac * { box-sizing: border-box; }
:where(.mac) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: default; }
.mac svg { display: block; overflow: visible; }
.mac-filters { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- menu bar ------------------------------------------------------------ */
.mac-menubar { position: absolute; left: 0; right: 0; top: 0; height: 25px; display: flex; align-items: center;
  justify-content: flex-end; padding: 0 16px 0 0; gap: 0; font-size: 13px; font-weight: 500;
  color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.25); background: linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0)); }
.mb-item { height: 22px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 5px; }
.mb-item svg { width: 17px; height: 17px; fill: #fff; }
.mb-bell svg { width: 16px; height: 16px; }
.mb-clock { padding: 0 0 0 8px; white-space: nowrap; letter-spacing: 0.01em; }
.mb-wifi svg { width: 16px; height: 16px; fill: none; }
.mb-battery svg { width: 27px; height: 13px; }
.mb-cc svg { width: 16px; height: 16px; }

/* ---- the panel window ---------------------------------------------------- */
.rw-window { position: absolute; top: 25px; right: -11px; width: 400px; opacity: 0; }
.rw-content { padding: 16px 28px 28px 28px; display: flex; flex-direction: column; gap: 8px; }
.rw-row { display: flex; gap: 8px; height: 32px; }

/* Liquid Glass base. No backdrop-filter: the wallpaper under the panel is a smooth gradient, so a
   22px blur of it looks the same as the gradient itself, while every backdrop-filter element is
   re-sampled on each scroll frame (a dozen of them made Firefox drop frames). Only the sort
   menu, which floats over card text, keeps a real blur while it is open. */
.glass { position: relative; isolation: isolate; }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.1); }
.glass-chrome { background: rgba(88,88,96,0.44); box-shadow: 0 2px 5px rgba(0,0,0,0.35); }
.glass-card { background: rgba(33,33,36,0.9); box-shadow: 0 3px 7px rgba(0,0,0,0.35); }
.glass-chip { background: rgba(88,88,96,0.44); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }

/* row 1: search + ellipsis */
.rw-search { flex: 1; height: 32px; border-radius: 16px; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.rw-search svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: var(--secondary); stroke-width: 2.4; stroke-linecap: round; }
.rw-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; padding: 0; margin: 0;
  font: 13px var(--font); color: #fff; caret-color: #fff; user-select: text; -webkit-user-select: text; }
.rw-search input::placeholder { color: var(--secondary); }
.rw-search-clear { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity var(--t-hover) var(--e-out), transform var(--t-hover) var(--e-out); }
.rw-search-clear svg { width: 14px; height: 14px; fill: var(--secondary); }
.rw-search.has-query .rw-search-clear { opacity: 1; transform: none; pointer-events: auto; }
.rw-menu { width: 32px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-press) var(--e-smooth); }
.rw-menu svg { width: 16px; height: 16px; fill: #fff; }
.rw-menu:active, .rw-search:active, .rw-clearall:active, .rw-chip:active, .rw-card:active { transform: scale(0.97); }

/* row 2: tabs + clear all */
.rw-tabs { --i: 1; flex: 1; min-width: 0; height: 32px; border-radius: 16px; padding: 3px; display: flex; gap: 2px; }
.rw-tabs button { flex: 1 1 0; min-width: 0; height: 26px; padding: 0 4px; border-radius: 13px; font-size: 12px; font-weight: 500;
  color: var(--secondary); position: relative; z-index: 1; white-space: nowrap;
  transition: color var(--t-puck) var(--e-out), font-weight 0s, transform var(--t-press) var(--e-smooth); }
.rw-tabs button.on { color: #fff; font-weight: 600; }
.rw-tabs button:active { transform: scale(0.94); }
.rw-puck { position: absolute; top: 3px; height: 26px; border-radius: 13px; background: rgba(255,255,255,0.16); z-index: 0;
  width: calc((100% - 10px) / 3); left: calc(3px + var(--i) * ((100% - 10px) / 3 + 2px));
  transition: left var(--t-puck) var(--e-puck), width 0s; }
.rw-clearall { flex: 0 0 auto; height: 32px; padding: 0 10px; border-radius: 16px; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; transition: opacity var(--t-hover) var(--e-out), transform var(--t-press) var(--e-smooth); }
.rw-clearall.empty { opacity: 0.4; pointer-events: none; }
.rw-clearall.armed { color: var(--red); }

/* growing label: every candidate is laid out invisibly, the shown one sets the width */
/* Clipped like the panel's `.clipped()`: the wider incoming text is revealed by the growing box
   instead of ghosting past the capsule. */
.rw-grow { position: relative; display: inline-block; height: 100%; overflow: hidden;
  transition: width var(--t-grow) var(--e-smooth); }
/* Centred on the box, the way the panel's `.frame(width:)` centres its text. Right-anchored, the
   label took its full width the instant it swapped while the box was still growing, so "Confirm
   delete" hung out over the pill's left border for the whole grow (user 2026-09-20: "confirm
   delete not centered"). A hidden candidate is never clickable either way. */
.rw-grow span { position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 100%;
  display: flex; align-items: center; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--t-grow) var(--e-smooth); }
.rw-grow span.on { opacity: 1; }

/* the list */
/* the scroll box carries the 28 pt side margin and the 8 pt row gap as padding, so the
   hover badges hanging 4 pt over the first card's top edge are not clipped */
.rw-list { position: relative; display: flex; flex-direction: column; gap: 8px; max-height: 323px; overflow-y: auto;
  scrollbar-width: none; margin: -8px -28px 0; padding: 8px 28px 0; }
.rw-list::-webkit-scrollbar { display: none; }
.rw-slot { position: relative; width: var(--card-w); flex: 0 0 auto; }
.rw-slot.detached { position: absolute; pointer-events: none; }
.rw-slot[data-swiping] .rw-card { cursor: grabbing; }
.rw-card { touch-action: pan-y; }
.rw-slot-chip { display: flex; justify-content: center; }
.rw-echo { position: absolute; height: var(--card-h); border-radius: var(--card-r); background: rgba(255,255,255,0.1); z-index: 0;
  transition: opacity var(--t-list) var(--e-smooth); }
.rw-echo-1 { left: 8px; right: 8px; top: 5px; }
.rw-echo-2 { left: 16px; right: 16px; top: 10px; }

/* the card: exactly a banner, 344 x 57, radius 20 */
.rw-card { position: relative; z-index: 1; width: var(--card-w); height: var(--card-h); border-radius: var(--card-r);
  display: flex; align-items: center; padding: 0 14px 0 13px; gap: 13.5px;
  transition: transform var(--t-press) var(--e-smooth); }
.rw-icon { width: 32px; height: 32px; flex: 0 0 auto; display: block; }
.rw-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rw-titlerow { display: flex; align-items: center; gap: 8px; height: 18px; }
.rw-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-body { font-size: 13px; line-height: 16px; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-corner { position: relative; flex: 0 0 auto; height: 18px; display: flex; align-items: center; justify-content: flex-end; }
.rw-time { font-size: 11px; color: var(--secondary); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: opacity var(--t-hover) var(--e-out); }
.rw-pills { position: absolute; right: 0; top: 0; height: 18px; display: none; align-items: center; gap: 4px; opacity: 0;
  transition: opacity var(--t-hover) var(--e-out); }
.rw-card.dismissed .rw-pills { display: flex; }
.rw-card.dismissed:hover .rw-pills, .rw-card.dismissed.armed .rw-pills { opacity: 1; }
.rw-card.dismissed:hover .rw-time, .rw-card.dismissed.armed .rw-time { opacity: 0; }
.rw-pill { height: 18px; padding: 0 7px; border-radius: 9px; background: rgba(255,255,255,0.1); font-size: 11px; font-weight: 500;
  display: flex; align-items: center; white-space: nowrap; transition: opacity var(--t-grow) var(--e-smooth), background var(--t-grow) var(--e-smooth), transform var(--t-press) var(--e-smooth); }
.rw-pill:active { transform: scale(0.94); }
.rw-pill-delete { color: var(--red); }
.rw-card.armed .rw-pill-delete { background: rgba(255,69,58,0.22); }
.rw-card.armed .rw-pill-restore { opacity: 0; pointer-events: none; }

/* hover badges: 20 pt disks, centre 4 pt in and 6 pt down from the corner */
.rw-badge { position: absolute; top: -4px; width: 20px; height: 20px; border-radius: 10px; z-index: 2;
  background: rgb(46,46,46); box-shadow: inset 0 0 0 1px rgb(58,58,58); color: rgb(161,161,161);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity var(--t-hover) var(--e-out), transform var(--t-hover) var(--e-out); }
.rw-badge svg { width: 10px; height: 10px; }
.rw-badge-x { left: -6px; }
.rw-badge-x svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rw-badge-star { right: -6px; }
.rw-badge-star .st-out { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.rw-badge-star .st-fill { fill: var(--yellow); display: none; }
.rw-card:hover .rw-badge, .rw-card.pinned .rw-badge-star { opacity: 1; transform: none; pointer-events: auto; }
.rw-card.pinned .rw-badge-star .st-out { display: none; }
.rw-card.pinned .rw-badge-star .st-fill { display: block; }
.rw-card.dismissed .rw-badge { display: none; }

/* chips (Show less, empty state) */
.rw-chip { height: 24px; padding: 0 10px 0 8px; border-radius: 12px; font-size: 12px; font-weight: 600; display: flex; align-items: center;
  transition: transform var(--t-press) var(--e-smooth); }
.rw-chip.rw-empty { font-weight: 500; color: var(--secondary); padding: 0 10px; }

/* sort menu, a native-looking NSMenu */
.rw-sortmenu { position: absolute; z-index: 5; min-width: 132px; padding: 5px; border-radius: 10px; display: none;
  background: rgba(44,44,48,0.82); border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08); }
.rw-sortmenu.on { display: block; }
.rw-sortmenu button { display: flex; align-items: center; gap: 6px; width: 100%; height: 22px; padding: 0 8px 0 6px;
  border-radius: 5px; font-size: 13px; text-align: left; }
.rw-sortmenu button:hover { background: #3478f6; }
.rw-sortmenu button .chk { width: 12px; height: 12px; visibility: hidden; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rw-sortmenu button.checked .chk { visibility: visible; }
.rw-sortmenu hr { border: 0; height: 1px; margin: 5px 8px; background: rgba(255,255,255,0.14); }

/* scroll indicator: a 4 pt capsule in a 14 pt grab column */
.rw-indicator { position: absolute; right: 28px; width: 14px; top: 112px; bottom: 28px; display: none; z-index: 3; }
.rw-indicator.on { display: block; }
.rw-knob { position: absolute; right: 3px; width: 4px; border-radius: 2px; background: rgba(255,255,255,0.38);
  transition: background 0.15s ease; }
.rw-indicator:hover .rw-knob, .rw-indicator.drag .rw-knob { background: rgba(255,255,255,0.55); }