/* Interactive demos, modelled on the app's Swipe, Gallery (Similar Photos) and Smart Contacts screens.
   Colours mirror Colors.swift; the app uses the iOS system font. */

/* ---------- iPhone ---------- */
.iphone {
  --frame: 12px;
  position: relative; width: 340px; max-width: calc(100vw - 56px); aspect-ratio: 340 / 720;
  padding: var(--frame); border-radius: 60px;
  background: linear-gradient(145deg, #5b5d63 0%, #2b2c30 18%, #1a1b1e 50%, #2e2f33 82%, #6a6c72 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.18),
    inset 0 0 0 4px #0b0b0c,
    0 50px 90px -30px rgba(15, 30, 80, .55),
    0 18px 36px -18px rgba(0, 0, 0, .45);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; color-scheme: light; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
/* side buttons: action + volume on the left, power on the right */
.iphone .btn-side { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #45464b, #1c1d20); }
.iphone .btn-side.action { left: -3px; top: 15%; height: 4.5%; }
.iphone .btn-side.vol-up { left: -3px; top: 23%; height: 8%; }
.iphone .btn-side.vol-down { left: -3px; top: 33%; height: 8%; }
.iphone .btn-side.power { right: -3px; top: 27%; height: 13%; background: linear-gradient(270deg, #45464b, #1c1d20); }

.iscreen {
  position: absolute; inset: var(--frame); border-radius: 48px; overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* clip rounded corners in Safari during transforms */
  background: #F7F7F7; color: #101010; isolation: isolate;
}
.island { position: absolute; z-index: 30; top: 11px; left: 50%; transform: translateX(-50%); width: 34%; height: 32px; border-radius: 20px; background: #000; pointer-events: none; }

.sb {
  position: absolute; z-index: 25; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between;
  padding: 4px 28px 0 40px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; pointer-events: none; color: #000;
}
.sb.light { color: #fff; }
.sb .right { display: flex; gap: 6px; align-items: center; }
.sb svg { display: block; fill: currentColor; }

.app { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 54px; }
.app.dark { background: #0F0F0F; color: #fff; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.home-ind { position: absolute; z-index: 45; bottom: 7px; left: 50%; transform: translateX(-50%); width: 36%; height: 5px; border-radius: 3px; background: #000; opacity: .85; pointer-events: none; }
.home-ind.light { background: #fff; }

.tap { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.tap:focus-visible { outline: 2px solid #3981F7; outline-offset: 2px; border-radius: 10px; }

/* nav pieces */
.circle-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); flex: none; }
.dark .circle-btn, .arch-view .circle-btn { background: rgba(255,255,255,.1); box-shadow: none; color: #fff; }
.chev { width: 10px; height: 10px; border-left: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor; transform: translateX(2px) rotate(45deg); border-radius: 1px; }
.pill { background: #fff; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 9px 14px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }

/* iOS alert */
.ios-dim { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.35); display: grid; place-items: center; animation: fadeIn .18s ease; }
.ios-alert { width: 76%; border-radius: 16px; overflow: hidden; background: rgba(242,242,247,.97); color: #000; text-align: center; animation: pop .22s cubic-bezier(.2,.9,.3,1.2); }
.ios-alert .body { padding: 18px 16px 16px; }
.ios-alert h5 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; }
.ios-alert p { margin: 4px 0 0; font-size: 13px; line-height: 1.3; }
.ios-alert .btns { display: flex; border-top: .5px solid rgba(60,60,67,.3); }
.ios-alert .btns button { flex: 1; padding: 12px 6px; font-size: 16px; color: #007AFF; font-family: inherit; background: none; border: 0; cursor: pointer; }
.ios-alert .btns button + button { border-left: .5px solid rgba(60,60,67,.3); }
.ios-alert .btns .bold { font-weight: 600; }
.ios-alert .btns .destructive { color: #FF3B30; }
.ios-alert .btns button:active { background: rgba(0,0,0,.06); }
.ios-alert .thumbs { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.ios-alert .thumbs i { width: 34px; height: 34px; border-radius: 6px; background: #ccc center / cover; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes pop { from { transform: scale(1.12); opacity: 0; } }

/* toast */
.toast { position: absolute; z-index: 35; left: 50%; bottom: 100px; transform: translateX(-50%); width: 84%; background: rgba(28,28,30,.94); color: #fff; border-radius: 16px; padding: 12px 14px; font-size: 13px; line-height: 1.35; text-align: center; animation: toastIn .3s ease; }
.toast b { display: block; font-size: 15px; margin-bottom: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------- Swipe ---------- */
.sw-nav { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 6px 16px 14px; text-align: center; }
.sw-nav b { display: block; font-size: 17px; font-weight: 600; }
.sw-nav small { display: block; font-size: 12px; color: rgba(255,255,255,.6); margin-top: 1px; }
.sw-stack { position: relative; flex: 1; margin: 0 16px; min-height: 0; }
.sw-card {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: #1c1c1e;
  box-shadow: 0 8px 22px rgba(0,0,0,.45); touch-action: none; cursor: grab; will-change: transform;
  transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s;
}
.sw-card.dragging { transition: none; cursor: grabbing; }
.sw-card.n1 { transform: scale(.955) translateY(12px); }
.sw-card.n2 { transform: scale(.91) translateY(24px); opacity: .6; }
.sw-card .bg { position: absolute; inset: -20px; background: center / cover no-repeat; filter: blur(18px) brightness(.55); }
.sw-card .fg { position: absolute; inset: 0; background: center / contain no-repeat; }
.sw-card .ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; opacity: 0; color: #fff; }
.sw-card .ov svg { width: 64px; height: 64px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.sw-card .ov span { font-size: 24px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.35); }
.sw-card .ov.keep { background: rgba(0,220,122,.8); }
.sw-card .ov.arch { background: rgba(255,94,81,.8); }
.sw-card .heart { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; transform: translate(-50%,-50%) scale(.2); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.4), opacity .35s; }
.sw-card .heart.show { transform: translate(-50%,-50%) scale(1); opacity: 1; }
.sw-btns { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 18px 12px 16px; }
.sw-btn { flex: none; width: 54px; height: 54px; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: transform .12s, opacity .2s, background .2s; }
.sw-btn.big { width: 66px; height: 66px; }
.sw-btn svg { width: 26px; height: 26px; }
.sw-btn.big svg { width: 32px; height: 32px; }
.sw-btn:active { transform: scale(.9); }
.sw-btn:disabled { background: #2C2C2E; box-shadow: none; cursor: default; }
.sw-btn:disabled svg { stroke: #636366; }
.sw-foot { padding: 0 16px 30px; }
.blue-btn { display: block; width: 100%; height: 54px; border-radius: 16px; background: #3981F7; color: #fff; font-weight: 600; font-size: 17px; }
.blue-btn:disabled { opacity: .5; cursor: default; }
.red-btn { display: block; width: 100%; height: 54px; border-radius: 16px; background: #F93636; color: #fff; font-weight: 600; font-size: 17px; transition: background .2s; }
.red-btn:disabled { background: #FBD3D3; cursor: default; }

/* archive view */
.arch-view { position: absolute; inset: 0; z-index: 20; background: #0F0F0F; color: #fff; display: flex; flex-direction: column; padding-top: 54px; animation: slideUp .3s cubic-bezier(.2,.8,.2,1); }
@keyframes slideUp { from { transform: translateY(100%); } }
.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 16px; }
.arch-grid i { aspect-ratio: 1; border-radius: 8px; background: #333 center / cover; transition: opacity .35s, transform .35s; }
.arch-grid i.gone { opacity: 0; transform: scale(.6); }
.empty { text-align: center; padding: 40px 24px; color: inherit; }
.empty .ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,220,122,.15); color: #00C26C; }
.empty .ic svg { width: 30px; height: 30px; }
.empty b { display: block; font-size: 19px; }
.empty p { margin: 6px 0 0; font-size: 14px; opacity: .65; }

/* ---------- Gallery: Similar Photos ---------- */
.g-nav { display: flex; align-items: center; gap: 12px; padding: 6px 16px 10px; }
.g-nav .t { flex: 1; min-width: 0; }
.g-nav .t b { display: block; font-size: 15px; font-weight: 600; }
.g-nav .t small { display: block; font-size: 12px; color: #83838A; }
.scan-pill { color: #4AD8AF; font-size: 13px; padding: 8px 12px; }
.scan-pill i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #4AD8AF; }
.g-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 16px 12px; }
.g-head h4 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.g-head small { display: block; font-size: 14px; color: #83838A; margin-top: 2px; }
.filter-btn span, .filter-btn span::before, .filter-btn span::after { display: block; height: 2px; border-radius: 1px; background: #101010; }
.filter-btn span { width: 16px; position: relative; }
.filter-btn span::before { content: ""; position: absolute; width: 20px; left: -2px; top: -5px; }
.filter-btn span::after { content: ""; position: absolute; width: 10px; left: 3px; top: 5px; }
.g-group { margin: 0 16px 16px; }
.g-ghead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.g-ghead b { display: block; font-size: 16px; font-weight: 600; }
.g-ghead small { color: #83838A; font-size: 12px; }
.g-ghead .sel-all { display: flex; align-items: center; gap: 6px; color: #3981F7; font-size: 13px; font-weight: 500; }
.g-ghead .sel-all img { width: 22px; height: 22px; }
.g-ghead .sel-all img.off { filter: invert(.75); }
.g-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.g-cell { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #fff center / cover no-repeat; transition: transform .1s, opacity .35s; }
.g-cell:active { transform: scale(.95); }
.g-cell.gone { opacity: 0; transform: scale(.7); }
.g-cell .best { position: absolute; left: 8px; top: 8px; height: 22px; padding: 0 8px; border-radius: 6px; background: #3981F7; color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; }
.g-cell .sel { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.g-cell .mb { position: absolute; left: 8px; bottom: 9px; color: #fff; font-size: 11px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.g-sheet { flex: none; background: #fff; border-radius: 26px 26px 0 0; padding: 16px 16px 30px; box-shadow: 0 -4px 20px rgba(0,0,0,.05); text-align: center; }
.g-sheet b { display: block; font-size: 19px; font-weight: 700; margin-bottom: 12px; }

/* ---------- Contacts ---------- */
.c-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 16px 12px; }
.c-nav .t { text-align: center; }
.c-nav .t b { display: block; font-size: 15px; font-weight: 600; }
.c-nav .t small { display: block; font-size: 11px; color: #83838A; }
.c-del { justify-self: end; color: #F93636; }
.c-del:disabled { color: rgba(249,54,54,.35); cursor: default; }
.c-seg { display: grid; grid-template-columns: 1fr 1fr; margin: 0 16px 14px; padding: 3px; background: #E5E5EA; border-radius: 14px; }
.c-seg button { padding: 9px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #83838A; }
.c-seg button[aria-selected="true"] { background: #3981F7; color: #fff; }
.c-card { background: #fff; border-radius: 20px; margin: 0 16px 12px; padding: 18px 16px; }
.c-card h4 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.c-card p { margin: 6px 0 14px; color: #83838A; font-size: 14px; }
.c-sum { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ol-btn { border: 1px solid #3981F7; color: #3981F7; border-radius: 999px; font-size: 13px; font-weight: 500; padding: 6px 12px; white-space: nowrap; flex: none; background: #fff; }
.c-group { background: #fff; border-radius: 20px; margin: 0 16px 12px; padding: 12px; overflow: hidden; max-height: 240px; transition: opacity .3s, transform .3s, max-height .4s .1s, margin .4s .1s, padding .4s .1s; }
.c-group.gone { opacity: 0; transform: translateX(-24px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.c-row { display: flex; align-items: center; gap: 12px; }
.c-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #E8F0FE; color: #3981F7; font-weight: 600; font-size: 15px; flex: none; }
.c-name { flex: 1; min-width: 0; }
.c-name b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-name small { color: #83838A; font-size: 13px; }
.c-dup { margin-top: 10px; background: #F2F2F7; border-radius: 16px; padding: 10px 12px; width: 100%; }
.c-dup .arrow { color: #3981F7; font-size: 16px; }
.c-dup .c-av { width: 38px; height: 38px; font-size: 13px; }
.c-dup img { width: 26px; height: 26px; flex: none; }
.c-dup img.off { filter: invert(.75); }
.c-pad { height: 96px; }
.c-tabbar {
  position: absolute; z-index: 22; left: 12px; right: 12px; bottom: 20px; height: 62px; border-radius: 32px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 6px 24px rgba(0,0,0,.12), inset 0 0 0 .5px rgba(255,255,255,.8);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 6px; pointer-events: none;
}
.c-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; color: #101010; padding: 6px 0; border-radius: 26px; }
.c-tabbar span.on { color: #3981F7; background: rgba(0,0,0,.06); }
.c-tabbar svg { width: 24px; height: 24px; fill: currentColor; }
.c-all { padding: 0 16px; }
.c-all h6 { margin: 10px 4px 6px; font-size: 13px; color: #83838A; font-weight: 600; }
.c-all .list { background: #fff; border-radius: 16px; overflow: hidden; }
.c-all .row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: .5px solid #E5E5EA; }
.c-all .row:last-child { border-bottom: 0; }
.c-all .c-av { width: 36px; height: 36px; font-size: 13px; }
.preview-sheet { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.3); display: flex; align-items: flex-end; animation: fadeIn .2s; }
.preview-sheet .sheet { width: 100%; background: #F7F7F7; border-radius: 24px 24px 0 0; padding: 10px 16px 30px; animation: slideUp .28s cubic-bezier(.2,.8,.2,1); }
.preview-sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: #C7C7CC; margin: 0 auto 12px; }
.preview-sheet h5 { margin: 0 0 12px; font-size: 17px; font-weight: 700; text-align: center; }
.preview-sheet .cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.preview-sheet .col { background: #fff; border-radius: 16px; padding: 12px 8px; font-size: 11.5px; text-align: center; min-width: 0; overflow-wrap: anywhere; }
.preview-sheet .col .c-av { margin: 0 auto 8px; }
.preview-sheet .col b { display: block; font-size: 14px; }
.preview-sheet .col em { display: inline-block; white-space: nowrap; margin-top: 8px; font-style: normal; font-weight: 700; font-size: 11px; padding: 3px 8px; border-radius: 6px; }
.preview-sheet .keep-tag { background: rgba(0,194,108,.12); color: #00A85E; }
.preview-sheet .rm-tag { background: rgba(249,54,54,.1); color: #F93636; }
.preview-sheet .blue-btn { margin-top: 14px; height: 48px; }

@media (prefers-reduced-motion: reduce) {
  .sw-card, .c-group, .g-cell, .arch-view, .ios-dim, .ios-alert, .toast, .preview-sheet, .preview-sheet .sheet { transition: none !important; animation: none !important; }
}

[hidden] { display: none !important; }
.g-nav .t b, .g-nav .t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-sum span { min-width: 0; line-height: 1.3; }

.iphone section { padding: 0; }

/* Contact summary row fits on one line; toggle button slightly smaller */
.c-sum { font-size: 12.5px; }
.c-card .ol-btn { font-size: 12px; padding: 5px 10px; }
/* Disabled swipe buttons: everything grey, including the filled heart */
.sw-btn:disabled svg, .sw-btn:disabled svg path { stroke: #636366; }
.sw-btn[data-act="fav"]:disabled svg { fill: #636366; }

.c-name small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-group .c-row .ol-btn { padding: 5px 10px; font-size: 12px; }

/* Narrow screens: give contact names a bit more room (longer button labels in nl/de) */
@media (max-width: 420px) {
  .c-group { padding: 10px; }
  .c-row { gap: 8px; }
  .c-av { width: 38px; height: 38px; font-size: 13px; }
  .c-dup { padding: 8px 10px; }
  .c-dup .c-av { width: 32px; height: 32px; font-size: 12px; }
  .c-group .c-row .ol-btn { padding: 4px 8px; font-size: 11px; }
  .c-name b { font-size: 15px; }
}

/* ---------- Demo switch (iOS segmented control above the phone) ---------- */
.demo-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 340px; max-width: calc(100vw - 56px);
  padding: 3px; border-radius: 14px; background: color-mix(in srgb, var(--text) 8%, transparent);
}
.demo-seg button {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: none; border: 0;
  padding: 8px 6px; border-radius: 11px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s;
}
.demo-seg button svg { width: 16px; height: 16px; flex: none; }
.demo-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
.demo-seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
@media (max-width: 380px) { .demo-seg button svg { display: none; } }

/* iOS Safari centres text in <button>s by default */
.c-dup, .c-dup .c-name, .demo-seg button span { text-align: left; }

.g-sheet b { font-size: 17px; }
.g-head small { font-size: 13px; }