/* Scene 8 - your data is yours: a phone, a laptop and a browser share one habit list through YOUR server.
 * Design space (desktop 820x700, mobile 360x600) scaled into the slot by scene code.
 * Reference: lib/backup.dart + settings (Export / Import backup), the sync note ("stays on this device unless you sign in"). */
.data-slot { left: max(33%, calc(var(--gutter) + min(24rem, 32vw) + 24px)); right: 108px; top: 70px; bottom: 22px; z-index: 3; }
.data-copy { width: min(24rem, 32vw); }
.data-copy .ticks li { --on: 0; transition: none;
  background: color-mix(in srgb, var(--accent-soft) calc(var(--on) * 100%), color-mix(in srgb, var(--surface) 70%, transparent));
  color: color-mix(in srgb, var(--accent-ink) calc(var(--on) * 100%), var(--ink-muted)); }
.data-copy .ticks li::before { background: color-mix(in srgb, var(--accent-ink) calc(30% + var(--on) * 70%), var(--ink4)); }

.dt-stage { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; will-change: transform, opacity; font-variation-settings: 'ROND' 60; color: var(--ink); }
.dt-links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.dt-basep { fill: none; stroke: var(--ink4); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.dt-lit { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 1; }
.dt-pulse { position: absolute; left: 0; top: 0; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: #fff; opacity: 0; z-index: 6; will-change: transform, opacity;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 42%, transparent), 0 0 18px 5px color-mix(in srgb, var(--accent) 65%, transparent); }
.dt-cut { position: absolute; left: 0; top: 0; z-index: 7; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: var(--surface); color: var(--red); box-shadow: var(--shadow-soft), inset 0 0 0 1.5px color-mix(in srgb, var(--red) 55%, transparent); }
.dt-cut .ms { font-size: 18px; font-variation-settings: 'wght' 600; }

.dt-dev { position: absolute; will-change: transform, opacity; }
.dt-cap { position: absolute; left: 4px; top: -20px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.dt-screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); }
.dt-screen::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--glow) 90%, transparent), transparent 70%), radial-gradient(70% 50% at 0% 0%, color-mix(in srgb, var(--accent-soft) 55%, transparent), transparent 70%); }

/* laptop */
.dt-lid { width: 100%; height: calc(100% - 12px); padding: 9px 9px 10px; border-radius: 20px 20px 6px 6px; background: color-mix(in srgb, var(--ink) 86%, var(--surface)); box-shadow: var(--shadow-lift); }
.dt-lid .dt-screen { border-radius: 12px 12px 3px 3px; }
.dt-lbase { position: absolute; left: -5%; right: -5%; bottom: 0; height: 12px; border-radius: 2px 2px 16px 16px; background: color-mix(in srgb, var(--ink) 30%, var(--surface3)); box-shadow: 0 6px 14px color-mix(in srgb, var(--shadow-c) 22%, transparent); }
.dt-lbase::before { content: ''; position: absolute; left: 50%; top: 0; width: 18%; height: 4px; margin-left: -9%; border-radius: 0 0 6px 6px; background: color-mix(in srgb, var(--ink) 25%, var(--surface3)); }
/* browser */
.dt-frame { width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line2); }
.dt-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: var(--surface2); }
.dt-dots { display: flex; gap: 5px; }
.dt-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink4); }
.dt-url { flex: 1; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border-radius: 11px; background: var(--inset); font-size: 11px; font-weight: 600; color: var(--ink2); white-space: nowrap; overflow: hidden; }
.dt-url .ms { font-size: 13px; color: var(--health-ink); font-variation-settings: 'FILL' 1; }
.dt-frame .dt-screen { flex: 1; min-height: 0; }
/* phone */
.dt-pbody { position: relative; width: 100%; height: 100%; padding: 7px; border-radius: 32px; background: color-mix(in srgb, var(--ink) 86%, var(--surface)); box-shadow: var(--shadow-lift); }
.dt-pbody .dt-screen { border-radius: 26px; }
.dt-notch { position: absolute; left: 50%; top: 13px; z-index: 3; width: 44px; height: 11px; margin-left: -22px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 92%, #000); }
.dt-home { position: absolute; left: 50%; bottom: 7px; z-index: 3; width: 56px; height: 4px; margin-left: -28px; border-radius: 2px; background: var(--ink3); opacity: 0.6; }

/* the habit list (same content on every device) */
.dt-app { position: relative; height: 100%; padding: 14px 16px 12px; }
.dt-phone .dt-app { padding-top: 32px; }
.dt-hd { display: flex; align-items: center; justify-content: space-between; height: 32px; }
.dt-hd h4 { margin: 0; font-size: 19px; font-weight: 600; font-variation-settings: 'ROND' 100; }
.dt-cnt { display: inline-grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dt-row { display: flex; align-items: center; gap: 11px; height: 46px; }
.dt-row .hbtn { width: 34px; height: 34px; }
.dt-row .hbtn .hb-i { font-size: 18px; } .dt-row .hbtn .hb-c { font-size: 20px; }
.dt-rt { min-width: 0; }
.dt-rn { font-size: 13.5px; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.dt-rs { margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--ink2); }
.dt-phone .dt-row { height: 54px; gap: 9px; }
.dt-phone .dt-rn { font-size: 12.5px; }

/* status chip under each device */
.dt-chipw { position: absolute; left: 0; right: 0; bottom: -16px; display: flex; justify-content: center; pointer-events: none; z-index: 4; }
.dt-laptop .dt-chipw { bottom: -27px; }
.dt-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border-radius: 14px; white-space: nowrap; will-change: transform, opacity;
  background: var(--surface); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--line2); font-size: 11.5px; font-weight: 700; color: var(--ink2);
  transition: background var(--dur-effects) var(--ease-effects), color var(--dur-effects) var(--ease-effects); }
.dt-chip .ms { font-size: 16px; font-variation-settings: 'FILL' 1; }
.dt-chip.s-local { background: var(--accent-soft); color: var(--accent-ink); }
.dt-chip.s-off { background: var(--inset); color: var(--ink2); }
.dt-chip.s-wait { background: color-mix(in srgb, var(--amber) 24%, var(--surface)); color: color-mix(in srgb, var(--amber) 50%, var(--ink)); }
.dt-chip.s-sync { background: var(--health-soft); color: var(--health-ink); }

.dt-call { position: absolute; z-index: 8; padding: 9px 14px; border-radius: 16px 16px 16px 4px; max-width: 170px; font-size: 12px; font-weight: 700; line-height: 1.25; opacity: 0; will-change: transform, opacity;
  background: var(--ink); color: var(--surface); box-shadow: var(--shadow-lift); }

/* the server */
.dt-server { display: block; }
.dt-sbody { position: absolute; left: 50%; top: 0; width: 104px; height: 104px; margin-left: -52px; }
.dt-sbody svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dt-sbody path { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-opacity: 0.5; }
.dt-sbody .ms { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; color: var(--accent-ink); font-variation-settings: 'FILL' 1; }
.dt-ring { position: absolute; left: 50%; top: 0; width: 104px; height: 104px; margin-left: -52px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; will-change: transform, opacity; }
.dt-slab { position: absolute; left: -10px; right: -10px; top: 112px; text-align: center; }
.dt-slab b { display: block; font-size: 15px; font-weight: 700; }
.dt-slab i { display: block; margin-top: 1px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink2); }

/* backup toolbar + the file it makes */
.dt-bk { position: absolute; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 5px; border-radius: 28px; background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--line2); will-change: transform, opacity; }
.dt-bb { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 0 12px; border-radius: 22px; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); white-space: nowrap;
  transition: background var(--dur-effects) var(--ease-effects), transform var(--dur-spatial-fast) var(--ease-spatial-fast), border-radius var(--dur-spatial-fast) var(--ease-spatial-fast); }
.dt-bb .ms { font-size: 18px; }
.dt-bb.on { background: var(--accent-soft); }
.dt-bb.is-press { transform: scale(0.94); border-radius: 15px; background: var(--accent-soft); }
.dt-file { position: absolute; display: flex; align-items: center; gap: 11px; padding: 0 16px 0 10px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line); will-change: transform, opacity; }
.dt-file .tile { width: 42px; height: 42px; border-radius: 15px; }
.dt-fn { min-width: 0; }
.dt-fn b { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-fn i { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink2); }
.dt-fn i .ms { font-size: 15px; color: var(--health-ink); font-variation-settings: 'FILL' 1; display: none; }
.dt-file.ok .dt-fn i { color: var(--health-ink); }
.dt-file.ok .dt-fn i .ms { display: inline-block; }

/* ---- mobile design space (360x600) ---- */
.dt-m .dt-cap { top: -17px; font-size: 9.5px; }
.dt-m .dt-app { padding: 10px 11px 8px; }
.dt-m .dt-phone .dt-app { padding-top: 26px; }
.dt-m .dt-hd { height: 26px; } .dt-m .dt-hd h4 { font-size: 15px; } .dt-m .dt-cnt { height: 19px; font-size: 10px; padding: 0 7px; }
.dt-m .dt-row { height: 34px; gap: 8px; }
.dt-m .dt-row .hbtn { width: 26px; height: 26px; } .dt-m .dt-row .hbtn .hb-i { font-size: 14px; } .dt-m .dt-row .hbtn .hb-c { font-size: 16px; }
.dt-m .dt-rn { font-size: 11.5px; } .dt-m .dt-rs { display: none; }
.dt-m .dt-phone .dt-row { height: 42px; gap: 7px; }
.dt-m .dt-phone .dt-app { padding-left: 9px; padding-right: 5px; }
.dt-m .dt-phone .dt-rn { font-size: 10.5px; }
.dt-m .dt-lid { padding: 6px 6px 7px; border-radius: 14px 14px 5px 5px; }
.dt-m .dt-pbody { padding: 5px; border-radius: 24px; } .dt-m .dt-pbody .dt-screen { border-radius: 19px; }
.dt-m .dt-notch { top: 9px; width: 34px; height: 8px; margin-left: -17px; }
.dt-m .dt-bar { height: 28px; padding: 0 9px; } .dt-m .dt-url { height: 19px; font-size: 9.5px; }
.dt-m .dt-frame { border-radius: 16px; }
.dt-m .dt-chip { height: 24px; padding: 0 9px 0 7px; font-size: 10px; } .dt-m .dt-chip .ms { font-size: 14px; }
.dt-m .dt-chipw { bottom: -13px; } .dt-m .dt-laptop .dt-chipw { bottom: -21px; }
.dt-m .dt-sbody, .dt-m .dt-ring { width: 88px; height: 88px; margin-left: -44px; }
.dt-m .dt-sbody .ms { font-size: 38px; }
.dt-m .dt-slab { top: 94px; } .dt-m .dt-slab b { font-size: 13px; } .dt-m .dt-slab i { font-size: 10.5px; }
.dt-m .dt-bb { font-size: 11.5px; padding: 0 8px; } .dt-m .dt-bb .ms { font-size: 16px; }
.dt-m .dt-file .tile { width: 36px; height: 36px; border-radius: 13px; }
.dt-m .dt-fn b { font-size: 10.5px; } .dt-m .dt-fn i { font-size: 10px; }
.dt-m .dt-call { display: none; }

@media (max-width: 759px) {
  .data-slot { left: 0; right: 0; top: 150px; bottom: 56px; }
  .data-copy { width: auto; }
  .data-copy .lead, .data-copy .ticks { display: none; }
  .static .data-copy .lead, .static .data-copy .ticks { display: block; }
  .static .data-copy .ticks { display: flex; }
  .static #data .stage { min-height: 1180px; }
  .static #data .data-slot { top: 500px; bottom: 24px; }
}