/* AniMates web shell: glass panels over the scene, a light display face for the big numbers, one warm accent taken
   from the art's rim light. Widget sizes follow --u (a share of the screen) so layouts keep their proportions from a
   phone to a 5120x2160 wallpaper; dialogs use ordinary pixel sizes. */
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  --text: #fff; --muted: rgba(255,255,255,.72); --faint: rgba(255,255,255,.48);
  --glass: rgba(18, 14, 38, .42); --glass-2: rgba(16, 12, 34, .7); --line: rgba(255,255,255,.14); --line-2: rgba(255,255,255,.22);
  --warm: #ffb38a; --warm-ink: #2a1530; --bg: #0b0b12;
  --u: min(1vh, 1.1vw);
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--text); color-scheme: dark;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-tap-highlight-color: transparent;
}
body.idle { cursor: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.glass {
  background: var(--glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 24px 70px rgba(6,4,22,.38);
}

.scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } /* a finger stroking a pet mustn't scroll or zoom */
.scrim { position: fixed; inset: 0; pointer-events: none; transition: background .3s ease;
  background: linear-gradient(rgba(8,6,24,.32), rgba(8,6,24,0) 38%), linear-gradient(rgba(8,6,24,0) 72%, rgba(8,6,24,.3)); }

/* ---------- widgets ---------- */
.widgets { position: fixed; inset: 0; pointer-events: none; }
.widget {
  position: absolute; color: var(--ink, #fff); font-size: calc(var(--u) * 1.75 * var(--s, 1)); line-height: 1.2;
  white-space: nowrap; text-shadow: 0 2px 26px rgba(8,6,24,.42);
}
.widget[data-ink="ink"] { text-shadow: 0 1px 14px rgba(255,255,255,.35); }
.widget[data-align="end"] { text-align: right; }
.widget[data-align="center"] { text-align: center; }
.w-time { font-family: var(--display); font-weight: 250; font-size: 9.4em; line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.widget[data-weight="regular"] .w-time, .widget[data-weight="regular"] .w-words { font-weight: 400; }
.widget[data-weight="bold"] .w-time, .widget[data-weight="bold"] .w-words { font-weight: 700; }
.w-time .colon { opacity: .6; margin: 0 .01em; }
.w-time small { display: inline-block; vertical-align: top; margin: .14em 0 0 .3em; font-size: .19em; font-weight: 400; letter-spacing: .05em; opacity: .75; }
.w-time .w-sec { font-size: .3em; margin-left: .18em; opacity: .7; }
.w-date { margin-top: 1em; font-size: .92em; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
.w-date.big { margin: 0; font-size: 1.35em; letter-spacing: .2em; }
.w-analog { display: block; width: 11em; height: 11em; overflow: visible; }
.widget[data-align="end"] .w-analog { margin-left: auto; }
.widget[data-align="center"] .w-analog { margin: 0 auto; }
.w-analog line { stroke: currentColor; stroke-linecap: round; filter: drop-shadow(0 1px 3px rgba(8,6,24,.4)); }
.w-analog .face { fill: rgba(10,8,24,.2); stroke: currentColor; stroke-width: 1.2; }
.w-analog .sec { stroke: var(--warm); }
.w-analog .hub { fill: currentColor; stroke: none; }
.w-words { font-family: var(--display); font-weight: 300; font-size: 4.2em; line-height: 1.02; white-space: normal; width: 7.5em; }
.widget[data-align="end"] .w-words { margin-left: auto; }
.widget[data-align="center"] .w-words { margin: 0 auto; }
.w-wx { display: flex; align-items: center; gap: .5em; font-size: 1.25em; }
.widget[data-align="end"] .w-wx { justify-content: flex-end; }
.widget[data-align="center"] .w-wx { justify-content: center; }
.w-wx b { font-size: 1.25em; font-weight: 500; }
.w-wx span { opacity: .82; }
.w-wx em { font-style: normal; font-size: .75em; color: var(--warm); }
.w-wx.muted { opacity: .6; font-size: 1em; }
.w-icon svg { display: block; width: 1.45em; height: 1.45em; color: #ffe3b0; }
.w-forecast { display: flex; gap: 1.5em; }
.widget[data-align="end"] .w-forecast { justify-content: flex-end; }
.w-forecast > div { display: flex; flex-direction: column; align-items: center; gap: .25em; }
.w-forecast span { font-size: .85em; opacity: .75; }
.w-forecast i svg { width: 1.6em; height: 1.6em; color: #ffe3b0; }
.w-forecast b { font-size: 1.35em; font-weight: 500; }
.w-forecast small { opacity: .6; }
.w-count .big { font-family: var(--display); font-size: 3.2em; font-weight: 300; line-height: 1; }
.w-count .cap { margin-top: .4em; opacity: .82; letter-spacing: .03em; }
.w-count { position: relative; }
.w-count.today .big { background: linear-gradient(100deg, #ffd36a, #ff8ab0 45%, #8ad8ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 .35em rgba(255,200,120,.45)); }
.w-count .burst { position: absolute; left: .9em; top: .6em; width: 0; height: 0; pointer-events: none; }
.w-count .burst i { position: absolute; width: .32em; height: .14em; border-radius: 2px; opacity: 0; animation: cd-burst 7s ease-out infinite; }
.w-count .burst i:nth-child(5n+1) { background: #ff5a8a; } .w-count .burst i:nth-child(5n+2) { background: #ffd23f; } .w-count .burst i:nth-child(5n+3) { background: #5ad8ff; }
.w-count .burst i:nth-child(5n+4) { background: #7aff9a; } .w-count .burst i:nth-child(5n) { background: #b98aff; }
.w-count .burst i:nth-child(1) { --x: 0.00em; --y: -2.40em; --r: 0deg; animation-delay: 0s; }
.w-count .burst i:nth-child(2) { --x: 2.15em; --y: -2.79em; --r: 67deg; animation-delay: 0.04s; }
.w-count .burst i:nth-child(3) { --x: 4.75em; --y: -2.37em; --r: 134deg; animation-delay: 0.08s; }
.w-count .burst i:nth-child(4) { --x: 3.74em; --y: -0.53em; --r: 201deg; animation-delay: 0.12s; }
.w-count .burst i:nth-child(5) { --x: 4.84em; --y: 0.69em; --r: 268deg; animation-delay: 0s; }
.w-count .burst i:nth-child(6) { --x: 4.75em; --y: 2.37em; --r: 335deg; animation-delay: 0.04s; }
.w-count .burst i:nth-child(7) { --x: 1.67em; --y: 2.16em; --r: 42deg; animation-delay: 0.08s; }
.w-count .burst i:nth-child(8) { --x: 0.00em; --y: 3.10em; --r: 109deg; animation-delay: 0.12s; }
.w-count .burst i:nth-child(9) { --x: -2.64em; --y: 3.42em; --r: 176deg; animation-delay: 0s; }
.w-count .burst i:nth-child(10) { --x: -3.00em; --y: 1.50em; --r: 243deg; animation-delay: 0.04s; }
.w-count .burst i:nth-child(11) { --x: -4.84em; --y: 0.69em; --r: 310deg; animation-delay: 0.08s; }
.w-count .burst i:nth-child(12) { --x: -5.93em; --y: -0.85em; --r: 17deg; animation-delay: 0.12s; }
.w-count .burst i:nth-child(13) { --x: -3.00em; --y: -1.50em; --r: 84deg; animation-delay: 0s; }
.w-count .burst i:nth-child(14) { --x: -2.15em; --y: -2.79em; --r: 151deg; animation-delay: 0.04s; }
@keyframes cd-burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 14% { opacity: 1; } 22% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 1.2em)) rotate(var(--r)); } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 1.2em)) rotate(var(--r)); } }

/* Settings › Special days */
.moments { display: flex; flex-direction: column; gap: 10px; }
.moment { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.m-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.moment select { min-width: 0; }
.moment .m-month { width: 82px; } .moment .m-day { width: 64px; } .moment .m-kind { width: 150px; } .moment .m-who { flex: 1; min-width: 150px; }
.moment .m-title { flex: 1; min-width: 160px; } .moment .m-year { width: 84px; }
.m-when { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.m-remove { width: 34px; height: 34px; flex: none; }
.add-moment { margin-top: 12px; }
.hol-group { margin: 0 0 16px; }
.hol-group > b { display: block; margin: 0 2px 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.w-far { display: grid; gap: .3em; }
.w-far.muted { opacity: .6; font-size: .9em; }
.w-far .who { font-size: .85em; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.w-far b { font-family: var(--display); font-size: 2.6em; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.w-far b small { font-size: .35em; margin-left: .3em; opacity: .7; }
.w-far .part { font-size: .95em; opacity: .85; }
.w-far .meta { display: flex; align-items: center; gap: .5em; font-size: .9em; opacity: .85; }
.widget[data-align="end"] .w-far .meta, .widget[data-align="end"] .w-far .meet { justify-content: flex-end; }
.widget[data-align="center"] .w-far .meta, .widget[data-align="center"] .w-far .meet { justify-content: center; }
.w-far .meta .w-icon svg { width: 1.2em; height: 1.2em; }
.w-far .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.w-far .meet { display: flex; align-items: center; gap: .4em; margin-top: .2em; font-size: .9em; color: var(--warm); }
.w-far .meet svg { width: 1em; height: 1em; fill: currentColor; stroke: none; }
.w-world b { display: block; font-family: var(--display); font-size: 2.6em; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.w-world b small { font-size: .35em; margin-left: .3em; opacity: .7; }
.w-world span { display: block; margin-top: .4em; font-size: .85em; letter-spacing: .22em; text-transform: uppercase; opacity: .78; }
.w-caption { font-family: var(--display); font-size: 2em; font-weight: 300; letter-spacing: .02em; }
.w-caption.italic { font-style: italic; }
.w-moon { display: flex; align-items: center; gap: .8em; }
.widget[data-align="end"] .w-moon { flex-direction: row-reverse; }
.w-moon .phase { width: 2.6em; height: 2.6em; flex: none; }
.w-moon .dark { fill: rgba(255,255,255,.12); stroke: none; }
.w-moon .lit { fill: #f6f1e0; stroke: none; }
.w-moon b { display: block; font-weight: 600; }
.w-moon span { display: block; font-size: .85em; opacity: .75; }
/* the place widget: notes over a chip with the swap button and the time left before the next place */
.widget[data-type="place"] { display: flex; flex-direction: column; align-items: flex-start; }
.widget[data-type="place"][data-align="end"] { align-items: flex-end; }
.widget[data-type="place"] .w-body { display: flex; flex-direction: column; align-items: inherit; gap: .7em; }
.w-note, .w-chip { background: var(--glass); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--line); text-shadow: none; }
.w-note { padding: .5em 1.1em; border-radius: 999px; font-size: .85em; color: var(--muted); white-space: normal; max-width: 30em; }
.w-chip { display: inline-flex; align-items: center; gap: .85em; padding: .5em 1.5em .5em .5em; border-radius: 999px; pointer-events: auto; }
.w-swap { position: relative; flex: none; width: 2.9em; height: 2.9em; border-radius: 50%; display: grid; place-items: center; background: var(--warm); color: var(--warm-ink); transition: transform .15s ease; }
.w-swap > svg:not(.ring) { width: 1.2em; height: 1.2em; stroke-width: 2.2; }
.w-swap .ring { position: absolute; left: -.28em; top: -.28em; width: calc(100% + .56em); height: calc(100% + .56em); transform: rotate(-90deg); stroke: rgba(255,255,255,.85); stroke-width: 2; }
.w-swap:active { transform: scale(.94); }
/* a press passed on from the desktop (see clickAt in app.js) */
.tapped { animation: tap-squeeze .32s ease; }
.tap-ring { position: fixed; z-index: 50; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(.8);
  border: 4px solid #fff; background: rgba(255,214,170,.18); box-shadow: 0 0 30px 6px rgba(255,214,170,.85), inset 0 0 20px rgba(255,214,170,.6); animation: tap-ring .7s ease-out forwards; }
.tap-spin { position: fixed; z-index: 51; display: grid; place-items: center; pointer-events: none; animation: tap-spin-out .9s linear forwards; }
.tap-spin svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: tap-spin .8s cubic-bezier(.3, .1, .3, 1) forwards; }
@keyframes tap-squeeze { 0% { transform: scale(1); } 35% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes tap-ring { from { opacity: 1; transform: translate(-50%, -50%) scale(.8); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } }
@keyframes tap-spin { 0% { transform: rotate(0); } 70% { transform: rotate(390deg); } 100% { transform: rotate(360deg); } }
@keyframes tap-spin-out { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
.w-place { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.w-place b { font-size: 1.05em; font-weight: 600; }
.w-place span { font-size: .82em; color: var(--muted); margin-top: .12em; }

/* ---------- top-right controls (fade when the pointer is idle) ---------- */
.chrome { position: fixed; top: 24px; right: 24px; display: flex; gap: 10px; transition: opacity .4s ease; z-index: 5; }
body.idle .chrome { opacity: 0; pointer-events: none; }
body.idle .chrome:focus-within { opacity: 1; pointer-events: auto; }
/* the website's way back: the logo to the home page, Download to the download page */
.site-links { display: flex; align-items: center; height: 46px; padding: 0 6px; border-radius: 23px; }
.site-links[hidden] { display: none; }
.site-links a { display: flex; align-items: center; gap: 7px; height: 36px; border-radius: 18px; color: var(--text); text-decoration: none; transition: background-color .15s ease; }
.site-links a:hover { background: rgba(255,255,255,.12); }
.site-links a:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.site-home { padding: 1px; }
.site-home img { display: block; width: 34px; height: 34px; border-radius: 50%; }
.site-get { padding: 0 12px 0 9px; font-weight: 600; font-size: 14px; }
.site-get svg { width: 18px; height: 18px; }
.icon-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--text); transition: transform .15s ease, background-color .15s ease; }
.icon-btn:hover { background: rgba(255,255,255,.12); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 21px; height: 21px; }
.fs-exit, body.fullscreen .fs-enter { display: none; }
body.fullscreen .fs-exit { display: block; }
body.no-ui .scrim, body.no-ui .widgets, body.no-ui .chrome, body.no-ui .place-card { display: none; }

/* ---------- the place card ---------- */
.pet-menu { position: fixed; z-index: 7; display: grid; gap: 6px; padding: 12px; border-radius: 16px; min-width: 170px; animation: rise .16s ease-out; }
.pet-menu b { font-size: 13px; padding: 2px 6px 4px; color: var(--muted); letter-spacing: .04em; }
.pet-menu button { text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.pet-menu button:hover { background: rgba(255,255,255,.14); }
body.no-ui .pet-menu { display: none; }
.place-card { position: fixed; width: min(480px, calc(100vw - 32px)); padding: 26px 28px 24px; border-radius: 22px; z-index: 6; user-select: text; animation: rise .2s ease-out; }
@keyframes rise { from { transform: translateY(10px); } }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--warm); }
.pc-title { margin: 10px 0 2px; font-family: var(--display); font-size: 38px; font-weight: 500; letter-spacing: -.4px; }
.pc-country { color: var(--muted); font-size: 16px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 20px 0 16px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.stat b { display: block; margin-top: 4px; font-size: 18px; font-weight: 500; }
.pc-fact { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.pc-fact:empty { display: none; }
.pc-show { display: flex; align-items: center; gap: 12px; margin: -6px 0 20px; padding: 12px 14px; border-radius: 14px; background: rgba(255,179,138,.08); border: 1px solid rgba(255,179,138,.22); }
.pc-show[hidden] { display: none; }
.pc-show .t { flex: 1; display: grid; gap: 2px; }
.pc-show .t b { font-size: 14px; }
.pc-show .t span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.pc-show .btn { flex: none; }
.actions { display: flex; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 12px; font-size: 15px; font-weight: 600;
  background: rgba(255,255,255,.08); border: 1px solid var(--line-2); transition: background-color .15s ease; }
.btn:hover { background: rgba(255,255,255,.14); }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--warm); color: var(--warm-ink); border-color: transparent; }
.btn.primary:hover { background: #ffc4a2; }
.actions .btn { flex: 1; height: 48px; }

/* ---------- dialogs ---------- */
dialog { color: var(--text); padding: 0; border: 0; border-radius: 26px; max-width: none; max-height: none; user-select: text; }
dialog::backdrop { background: rgba(8,6,24,.5); backdrop-filter: blur(6px); }
dialog.glass { background: rgba(18,14,40,.78); }
dialog[open] { animation: pop .22s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { transform: scale(.98); } }
.head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.head h2 { margin: 0; font-family: var(--display); font-size: 32px; font-weight: 500; }
.head .sub { color: var(--muted); font-size: 15px; margin-top: 4px; }
.grow { flex: 1; }
.seg { display: inline-flex; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.seg button { padding: 8px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.seg button.on { background: rgba(255,255,255,.16); color: var(--text); }
.seg.small button { padding: 6px 12px; font-size: 13px; }
/* one look for every field: text, numbers, dates and times, and dropdowns with our own arrow (not the system's) */
select, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
input[type="url"], input[type="tel"], textarea {
  font: inherit; font-size: 15px; color: inherit; min-width: 0; background-color: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px;
  color-scheme: dark; /* the date and time pickers' own icons and calendars, light on dark */
}
select, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
input[type="url"], input[type="tel"] { height: 40px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; line-height: 38px; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4bfd2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
select:hover, input:hover:not([type="checkbox"]):not([type="range"]):not([type="color"]):not(:disabled), textarea:hover { border-color: rgba(255,255,255,.24); }
select:disabled, input:disabled, textarea:disabled { opacity: .5; cursor: default; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
select option, select optgroup { background: #1c1730; color: #f1eef8; }
.select select { height: 40px; }
textarea { width: 100%; resize: vertical; line-height: 1.45; font-size: 14px; }

/* the place picker */
.places-dialog { width: min(1500px, 94vw); max-height: 92vh; padding: 30px 34px 24px; overflow: auto; }
.places-search { width: 220px; }
.places-dialog .lists { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 20px; }
.list-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.list-chips button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.list-chips button small { font-size: 11px; font-weight: 700; color: var(--faint); }
.list-chips button.on { color: var(--ink, #fff); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.list-chips .pl-icon { width: 12px; height: 12px; fill: currentColor; stroke: none; display: none; }
.list-chips button.playing .pl-icon { display: block; color: var(--warm); }
.list-chips button.add { border-style: dashed; }
.list-chips .list-name { width: 180px; padding: 7px 12px; border-radius: 999px; font-size: 13px; }
.list-actions { display: flex; gap: 8px; }
.list-actions .playing-now { background: transparent; color: var(--warm); border: 1px solid var(--warm); cursor: default; }
.list-actions .danger { background: #c8323a; color: #fff; }
.places-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 26px; }
.tile { position: relative; text-align: left; border-radius: 16px; }
.tile .img { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 16px; background: #1c1730 center / cover; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(6,4,22,.3); transition: transform .18s ease, filter .2s ease; }
.tile:hover .img { transform: translateY(-2px); }
.tile .lbl { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.tile .lbl b { font-size: 15px; font-weight: 600; }
.tile .lbl span { font-size: 13px; color: var(--faint); }
.tile .check { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--warm); color: var(--warm-ink); }
.tile .check svg { width: 16px; height: 16px; stroke-width: 2.6; }
.tile.off .img { filter: saturate(.3) brightness(.6); }
.tile.off .check { background: rgba(10,8,24,.5); border: 1.5px solid rgba(255,255,255,.6); }
.tile.off .check svg { visibility: hidden; }
.tile.now .img { outline: 3px solid var(--warm); outline-offset: 3px; }
.tile .badge { position: absolute; left: 10px; top: 10px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(10,8,24,.6); }
.foot { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--faint); font-size: 14px; flex-wrap: wrap; }

/* settings */
.settings { width: min(1320px, 94vw); height: min(860px, 92vh); }
.settings-panel { display: flex; height: 100%; }
.nav { width: 290px; flex: none; padding: 28px 16px; background: rgba(10,8,26,.3); border-right: 1px solid var(--line); overflow: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 12px 24px; font-family: var(--display); font-size: 21px; font-weight: 600; }
.brand i { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #ff9a8a, #7b4fd6); }
.nav button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 12px; color: var(--muted); font-size: 15px; font-weight: 500; text-align: left; }
.nav button:hover { background: rgba(255,255,255,.06); }
.nav button.on { background: rgba(255,255,255,.12); color: var(--text); }
.nav button svg { width: 20px; height: 20px; flex: none; }
.body { position: relative; flex: 1; padding: 32px 44px 40px; overflow: auto; }
.body .close-settings { position: absolute; right: 20px; top: 20px; }
.body h2 { margin: 0 0 6px; font-family: var(--display); font-size: 30px; font-weight: 500; }
.body h3 { margin: 26px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.lead { margin: 0 0 22px; color: var(--muted); font-size: 15px; }
.hint { margin: 10px 2px; color: var(--faint); font-size: 13px; line-height: 1.45; }
.hint:empty { display: none; }
.rows { border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 18px; padding: 14px 18px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; font-size: 15px; font-weight: 500; }
html:not([lang="en"]) .row .t b { hyphens: auto; overflow-wrap: break-word; } /* long words in other languages ("Lizenzschlüssel") */
.row .t span { display: block; font-size: 13px; color: var(--faint); margin-top: 3px; line-height: 1.4; }
.row.stack { flex-direction: column; align-items: stretch; }
.row input[type="text"], .row input[type="email"], .row input[type="password"] { width: 220px; }
.row select { min-width: 200px; }
.range { display: flex; align-items: center; gap: 12px; }
.range input { width: 180px; accent-color: var(--warm); }
.range output { min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.search { display: flex; gap: 10px; flex: 1; }
.search input { flex: 1; }
.home-results { list-style: none; margin: 8px 0 0; padding: 0; }
.home-results button { display: block; width: 100%; text-align: left; padding: 10px 14px; border-radius: 10px; }
.home-results button:hover { background: rgba(255,255,255,.08); }
.home-results small { color: var(--faint); margin-left: 8px; }
input.switch { appearance: none; -webkit-appearance: none; margin: 0; }
.tog, input.switch { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.2); cursor: pointer; transition: background-color .15s ease; }
.tog::after, input.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s ease; }
.tog.on, input.switch:checked { background: var(--warm); }
.tog.on::after, input.switch:checked::after { left: 23px; background: var(--warm-ink); }
.tog[disabled] { opacity: .45; cursor: default; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.monitors { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.mon { display: flex; flex-direction: column; gap: 10px; }
.mon .screen { position: relative; border-radius: 10px; border: 2px solid var(--line-2); background: linear-gradient(135deg, #3a2c6a, #ff8f7a); }
.mon.on .screen { border-color: var(--warm); }
.mon .tog { position: absolute; right: 8px; top: 8px; }
.mon .name { font-size: 13px; color: var(--muted); }
.mon .btn { min-height: 34px; font-size: 13px; padding: 0 12px; border-radius: 10px; }
.reset.armed { background: color-mix(in srgb, var(--warm) 40%, transparent); }

/* ---------- the character maker ---------- */
.maker { width: min(1400px, 95vw); height: min(860px, 92vh); }
.maker[open] { display: flex; }
.maker-preview { position: relative; flex: 1.25; min-width: 0; background: #0b0b12; }
.maker-preview canvas { display: block; width: 100%; height: 100%; }
.maker-place { position: absolute; left: 18px; bottom: 16px; padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--muted); background: rgba(10,8,24,.55); backdrop-filter: blur(8px); }
.maker-panel { flex: 1; min-width: 360px; max-width: 560px; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.maker-head { display: flex; align-items: center; gap: 10px; padding: 22px 24px 12px; }
.maker-head h2 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 500; }
.maker-people { display: flex; gap: 8px; padding: 4px 24px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pt { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.pt i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); }
.pt.on { color: var(--text); background: rgba(255,255,255,.14); border-color: var(--line-2); }
.pt.add { border-style: dashed; }
.pt.rm { margin-left: auto; }
.maker-body { flex: 1; overflow: auto; padding: 6px 24px 18px; }
.maker-panel > .hint { padding: 0 24px 16px; }
.mk-group h3, .mk-two h3 { margin: 18px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.pet-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin-bottom: 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.pet-head { display: flex; align-items: center; justify-content: space-between; }
.pet-head b { font-size: 15px; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; } /* the compact button: cards, panels, the monitors map */
.add-pet { align-self: flex-start; }
.mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mk-parts { display: flex; margin-top: 20px; width: 100%; }
.mk-parts button { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { padding: 8px 13px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.chips button.on { color: var(--warm-ink); background: var(--warm); border-color: transparent; }
.chips.seg3 { flex-wrap: nowrap; }
.chips.seg3 button { flex: 1; padding: 8px 6px; }
.mk-swatches { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.mk-swatches button, .mk-swatches .custom { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); cursor: pointer; }
.mk-swatches button.on, .mk-swatches .custom.on { border-color: #fff; box-shadow: 0 0 0 2px var(--warm); }
.mk-swatches .custom { display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--muted); font-size: 18px; overflow: hidden; }
.mk-swatches .custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (max-width: 900px) { .maker[open] { flex-direction: column; } .maker-preview { flex: none; height: 38vh; } .maker-panel { max-width: none; min-width: 0; border-left: 0; } }
/* phone width: room for the longer words of other languages */
@media (max-width: 480px) {
  .mk-two { grid-template-columns: 1fr; gap: 0; }
  .mk-parts button { min-width: 0; padding: 8px 6px; font-size: 13px; }
  .setup .actions { flex-wrap: wrap; }
  .places-filter button { padding-inline: 10px; }
}

/* ---------- editing widgets ---------- */
body.editing .scrim { background: rgba(8,6,24,.28); }
body.editing .chrome, body.editing .place-card { display: none; }
body.editing .widgets { pointer-events: auto; }
body.editing .widget { pointer-events: auto; cursor: grab; outline: 1.5px dashed rgba(255,255,255,.45); outline-offset: .55em; border-radius: 6px; }
body.editing .widget * { pointer-events: none; }
body.editing .widget .w-grip, body.editing .widget .w-x, body.editing .widget .w-size { pointer-events: auto; }
body.editing .widget.sel { outline: 2px solid var(--warm); }
body.dragging .widget { cursor: grabbing; }
.w-grip, .w-x, .w-size { position: absolute; font-size: 16px; }
.w-grip { top: calc(-.55em * var(--s, 1) - 30px); left: 50%; transform: translateX(-50%); width: 46px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: rgba(16,12,34,.85); border: 1px solid var(--line-2); }
.w-grip svg { width: 16px; height: 16px; }
.w-x { top: -32px; right: -32px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(16,12,34,.9); border: 1px solid var(--line-2); color: #fff; }
.w-x svg { width: 12px; height: 12px; stroke-width: 2.4; }
.widget.handles-below .w-grip { top: auto; bottom: calc(-.55em * var(--s, 1) - 30px); }
.widget.handles-below .w-x { top: auto; right: auto; bottom: -32px; left: -32px; } /* the resize corner has the bottom right */
.w-size { right: -18px; bottom: -18px; width: 16px; height: 16px; border-radius: 5px; background: var(--warm); cursor: nwse-resize; }
.edit-zones, .edit-bar, .inspector, .tray { display: none; }
body.editing .edit-zones { display: grid; position: fixed; inset: 40px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 14px; pointer-events: none; }
.edit-zones i { border: 1.5px dashed rgba(255,255,255,.14); border-radius: 18px; transition: background-color .15s ease, border-color .15s ease; }
.edit-zones i.hot { border-color: rgba(255,179,138,.75); background: rgba(255,179,138,.07); }
body.editing .edit-bar { display: flex; position: fixed; left: 50%; top: 24px; transform: translateX(-50%); align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; white-space: nowrap; z-index: 8; }
.edit-bar b { font-size: 15px; font-weight: 600; }
.edit-bar .muted { color: var(--muted); font-size: 14px; }
.pillbtn { height: 40px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.pillbtn.primary { background: var(--warm); color: var(--warm-ink); border-color: transparent; }
body.editing .inspector { display: block; position: fixed; width: 360px; padding: 20px 20px 16px; border-radius: 22px; z-index: 8; user-select: none; }
body.editing .inspector[hidden] { display: none; }
.inspector h4 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.inspector .hint2 { color: var(--faint); font-size: 13px; }
.field { margin-top: 16px; }
.field > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.field.inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field.inline > span { margin: 0; letter-spacing: .08em; }
.field input, .field select { width: 100%; }
.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fonts > button { padding: 8px 4px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); display: grid; gap: 2px; place-items: center; color: var(--muted); }
.fonts > button.on { border: 2px solid var(--warm); color: var(--text); background: rgba(255,179,138,.1); }
.fonts b { font-size: 24px; font-weight: 400; color: var(--text); line-height: 1.1; }
.fonts span { font-size: 11px; }
.widget[style*="--fw"] .w-time, .widget[style*="--fw"] .w-world b { font-weight: var(--fw); }
.styles > button { height: 70px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.05); display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.styles > button.on { border: 2px solid var(--warm); color: var(--text); background: rgba(255,179,138,.1); }
.styles .dg { font-family: var(--display); font-weight: 250; font-size: 28px; color: var(--text); }
.styles svg { width: 40px; height: 40px; stroke-width: 2.4; }
.styles i { font-size: 13px; line-height: 1.2; text-align: center; }
.swatches { display: flex; gap: 10px; align-items: center; }
.swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; }
.swatches button.on { border-color: #fff; box-shadow: 0 0 0 2px var(--warm); }
.swatches button.auto { width: auto; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.1); }
/* the widget gallery while editing: live previews, each with one state (on screen, add, Plus) */
body.editing .tray { display: flex; flex-direction: column; position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(1080px, calc(100vw - 32px));
  padding: 12px 14px 14px; border-radius: 22px; z-index: 8; }
.wg-head { display: flex; align-items: center; gap: 12px; padding: 0 4px 10px; }
.wg-head > b { font-size: 15px; font-weight: 600; }
.wg-filters { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.wg-filters button { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); }
.wg-filters button.on { background: rgba(255,255,255,.16); color: var(--text); }
.wg-fold { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); }
.tray.folded .wg-grid, .tray.folded .wg-filters { display: none; }
.tray.folded .wg-head { padding-bottom: 0; }
.wg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: min(330px, 40vh); overflow-y: auto; padding: 2px; }
.wcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 8px; border-radius: 14px; text-align: left;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 13px; font-weight: 600; cursor: pointer; }
.wcard[hidden] { display: none; }
.wcard:hover { background: rgba(255,255,255,.1); border-color: var(--line-2); }
.wcard[data-state="on"] { border-color: color-mix(in srgb, var(--warm) 70%, transparent); background: rgba(255,179,138,.08); }
.wg-pv { position: relative; height: 82px; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, #3d5f92, #7a6aa5 60%, #c98e8a); } /* a sky behind, like the scene */
.wg-stage { --u: 9px; pointer-events: none; position: absolute; left: 50%; top: 50%; width: max-content; transform: translate(-50%, -50%); } /* centred even when wider than the tile, then shrunk */
.wg-stage .widget { position: static; transform-origin: center; }
.wcard[data-state="plus"] .wg-pv { filter: saturate(.6) brightness(.85); }
.wg-name { display: flex; align-items: center; gap: 6px; padding: 0 4px; min-width: 0; }
.wg-name svg { width: 15px; height: 15px; flex: none; color: #ffe3b0; }
.wg-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-state { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(16,12,34,.78); color: #fff; }
.wg-state svg { width: 11px; height: 11px; stroke-width: 3; }
.wcard[data-state="on"] .wg-state { background: var(--warm); color: var(--warm-ink); }
.wcard[data-state="off"] .wg-state span { display: none; }
.wcard[data-state="off"]:hover .wg-state span { display: inline; }
.wcard[data-state="plus"] .wg-state { background: #f3d77a; color: #3a2a06; }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .settings-panel { flex-direction: column; }
  .nav { width: auto; display: flex; gap: 6px; padding: 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav .brand { display: none; }
  .nav button { width: auto; white-space: nowrap; }
  .body { padding: 22px 18px 30px; }
  .two { grid-template-columns: 1fr; }
  .row { flex-wrap: wrap; }
  .row input[type="text"], .row input[type="email"], .row input[type="password"], .row select { width: 100%; }
  .places-dialog { padding: 20px; }
  body.editing .inspector { left: 12px !important; right: 12px !important; width: auto; bottom: 130px; top: auto !important; z-index: 9; } /* over the gallery, which shares its spot */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* keepsakes: a picture, a postcard, a clip */
.share-dialog { width: min(1280px, 94vw); max-height: 92vh; padding: 26px 30px 26px; overflow: auto; }
.share-dialog h2 { margin: 0; font-size: 24px; }
.share-body { display: flex; gap: 26px; margin-top: 20px; align-items: stretch; }
.share-stage { flex: 1; min-width: 0; display: grid; place-items: center; background: rgba(0,0,0,.25); border-radius: 18px; padding: 14px; min-height: 300px; }
.share-preview, .share-video { max-width: 100%; max-height: 62vh; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.share-preview[hidden], .share-video[hidden], .share-dialog [hidden] { display: none; }
.share-side { width: 320px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.share-side .grow { flex: 1; }
.share-side .hint { margin: 0; }
.share-side .field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.share-side .field input { width: 100%; }
.share-side .seg { margin-top: 12px; }
.share-show { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; }
.share-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); margin-top: 16px; overflow: hidden; }
.share-bar i { display: block; height: 100%; width: 0; background: var(--warm); }
.share-status { margin: 0; font-size: 13px; color: var(--muted); min-height: 18px; }
.share-dims { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.share-size button { flex: 1; }
.share-stage { position: relative; }
.share-dialog.drawing .share-preview { opacity: .45; transition: opacity .2s; }
.share-dialog.drawing .share-stage::after { content: "Drawing it…"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.share-side .actions { flex-wrap: wrap; }
.share-dialog.recording .share-record { background: #e2445c; color: #fff; border-color: transparent; }
@media (max-width: 900px) { .share-body { flex-direction: column; } .share-side { width: auto; } }

/* the screensaver: the scene and its widgets only, no cursor */
.saver, .saver * { cursor: none !important; }
.saver .chrome, .saver .place-card { display: none !important; }

/* first run: a short welcome */
.setup { width: min(640px, 92vw); padding: 30px 34px 26px; }
.setup h2 { margin: 0 0 8px; font-family: var(--display); font-size: 30px; font-weight: 500; }
.setup .lead { margin-bottom: 18px; }
.setup .rows { margin-bottom: 6px; }
.setup .actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.setup .actions .grow { flex: 1; }
.setup .actions .btn { flex: none; height: 44px; }
.setup [hidden] { display: none; }
.setup-city-now { margin: 12px 2px 0; font-size: 15px; }
.setup-city-now:empty { display: none; }
.setup-dots { display: flex; gap: 6px; margin-bottom: 18px; }
.setup-dots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.setup-dots i.on { background: var(--warm); }

/* AniMates Plus: the licence section and what's locked */
.plus-list { margin: 0; padding: 0 0 0 2px; list-style: none; display: grid; gap: 8px; }
.plus-list li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; }
.plus-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warm); flex: none; }
.plan-enter .search { max-width: 520px; }
.plus-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--warm-ink); background: var(--warm); vertical-align: 2px; }
.tile.locked .img { filter: saturate(.25) brightness(.5); }
.tile.locked .check { display: none; }
.tile .lock { position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--warm-ink); background: var(--warm); }
.share-tabs button.locked::after { content: "Plus"; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700; color: var(--warm-ink); background: var(--warm); }
.row.locked .t b::after { content: "Plus"; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; color: var(--warm-ink); background: var(--warm); vertical-align: 2px; }
section.locked .row:not(.locked) { opacity: .5; }

/* ---------- more widgets (widgets-more.js) ----------
   Themes restyle these through --t-panel, --t-panel-border, --t-radius, --t-accent, --t-accent-ink and --t-muted
   (and --ink and --display, as for every widget); the fallbacks are the plain look over the scene. */
.widget .w-btn, .widget .w-todo-item { pointer-events: auto; } /* clickable outside edit mode, and through clickAt on the desktop */
.w-panel { background: var(--t-panel, none); border: var(--t-panel-border, 0 solid transparent); border-radius: var(--t-radius, .9em); padding: var(--t-panel-pad, 0); }
.w-btn { flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, currentColor 16%, transparent); transition: transform .15s ease, opacity .2s ease; }
.w-btn svg { width: 1em; height: 1em; stroke-width: 2; fill: currentColor; }
.w-btn.main, .w-btn[data-act="start"] { background: var(--t-accent, var(--warm)); color: var(--t-accent-ink, var(--warm-ink)); }
.w-btn:active { transform: scale(.92); }
.w-btn:disabled { opacity: .35; cursor: default; }
.w-btns { display: flex; gap: .45em; align-items: center; }
.widget[data-align="end"] .w-btns { justify-content: flex-end; }
.w-off { display: flex; align-items: center; gap: .7em; }
.w-off > svg { flex: none; width: 1.6em; height: 1.6em; opacity: .85; }
.w-off b { display: block; font-weight: 600; }
.w-off span { display: block; width: max-content; max-width: 17em; white-space: normal; font-size: .85em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.widget[data-align="end"] .w-off { flex-direction: row-reverse; }
.w-empty, .w-more { margin-top: .45em; font-size: .85em; white-space: normal; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.widget .muted { color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }

/* together: the days, and a burst on round numbers and each year */
.w-together { position: relative; }
.w-together .w-big { font-family: var(--display); font-size: 4.2em; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.w-together .w-cap { margin-top: .35em; letter-spacing: .03em; opacity: .88; white-space: normal; width: max-content; max-width: 20em; }
.w-together .w-sub { margin-top: .3em; font-size: .85em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-together.today .w-big { font-size: 2.6em; color: var(--t-accent, var(--warm)); }
.w-burst { position: absolute; left: 1.2em; top: 1em; width: 0; height: 0; pointer-events: none; }
.w-burst i { position: absolute; width: .45em; height: .45em; border-radius: 50%; background: var(--t-accent, var(--warm)); opacity: 0; animation: w-burst 6s ease-out infinite; }
.w-burst i:nth-child(2n) { width: .3em; height: .3em; filter: hue-rotate(60deg); }
.w-burst i:nth-child(3n) { filter: hue-rotate(-70deg); }
.w-burst i:nth-child(1) { --x: 0em; --y: -2.6em; } .w-burst i:nth-child(2) { --x: 2.4em; --y: -2em; animation-delay: .05s; }
.w-burst i:nth-child(3) { --x: 3.6em; --y: -.2em; animation-delay: .1s; } .w-burst i:nth-child(4) { --x: 2.6em; --y: 1.9em; animation-delay: .15s; }
.w-burst i:nth-child(5) { --x: 0em; --y: 2.8em; } .w-burst i:nth-child(6) { --x: -2.5em; --y: 2em; animation-delay: .05s; }
.w-burst i:nth-child(7) { --x: -3.4em; --y: 0em; animation-delay: .1s; } .w-burst i:nth-child(8) { --x: -2.4em; --y: -2.1em; animation-delay: .15s; }
.w-burst i:nth-child(9) { --x: 4.6em; --y: -2.4em; animation-delay: .2s; } .w-burst i:nth-child(10) { --x: 5.2em; --y: 1.4em; animation-delay: .2s; }
@keyframes w-burst { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 4% { opacity: 1; } 22% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } 100% { opacity: 0; } }

/* love note: the note, a heart, and who it's from underneath */
.w-love { margin: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6em; width: max-content; max-width: 24em; white-space: normal; }
.widget[data-align="end"] .w-love { flex-direction: row-reverse; margin-left: auto; }
.w-love-heart svg { display: block; width: 1.2em; height: 1.2em; margin-top: .35em; fill: var(--t-accent, var(--warm)); stroke: none; }
.w-love-text { flex: 1; min-width: 0; margin: 0; font-family: var(--display); font-size: 1.55em; line-height: 1.25; }
.w-love.empty .w-love-text { font-size: 1em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-love-from { flex-basis: 100%; padding-left: 1.8em; font-size: .9em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-love-from::before { content: "— "; }
.widget[data-align="end"] .w-love-from { padding: 0 1.8em 0 0; text-align: right; }

/* passport */
.w-pass-head { display: flex; align-items: baseline; gap: .45em; }
.widget[data-align="end"] .w-pass-head { justify-content: flex-end; }
.w-pass-count { font-family: var(--display); font-size: 2.8em; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.w-pass-head span { color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-stamps { display: grid; grid-template-columns: repeat(3, 3.7em); gap: .5em; margin-top: .7em; }
.widget[data-align="end"] .w-stamps { justify-content: end; }
.widget[data-align="center"] .w-stamps { justify-content: center; }
.w-stamp { width: 3.7em; height: 3.7em; display: grid; place-content: center; gap: .1em; padding: .25em; text-align: center; font-style: normal; text-shadow: none; white-space: normal;
  color: var(--t-accent, var(--warm)); filter: hue-rotate(var(--hue, 0deg)); transform: rotate(var(--tilt, 0deg));
  border: .1em dashed currentColor; border-radius: .55em; background: color-mix(in srgb, currentColor 13%, transparent); }
.w-stamp.s1 { border-radius: 50%; border-style: solid; outline: .06em solid currentColor; outline-offset: -.34em; }
.w-stamp.s2 { border-style: double; border-width: .22em; border-radius: .2em; }
.w-stamp b { font-size: .5em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.05; overflow: hidden; max-height: 3.2em; }
.w-stamp small { font-size: .42em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }

/* say it like a local */
.w-ph-label { font-size: .78em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-ph-row { margin-top: .35em; }
.w-ph-text { font-family: var(--display); font-size: 1.8em; font-weight: 400; line-height: 1.15; }
.w-ph-row.big .w-ph-text { font-size: 3em; font-weight: 300; }
.w-ph-say { display: flex; gap: .6em; align-items: baseline; font-size: .95em; margin-top: .15em; }
.widget[data-align="end"] .w-ph-say { justify-content: flex-end; }
.widget[data-align="center"] .w-ph-say { justify-content: center; }
.w-ph-roman { font-weight: 600; }
.w-ph-sound { font-style: italic; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-ph-means { font-size: .85em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
/* the arrows through the phrases: clickable on the wallpaper too */
.w-ph-nav { display: flex; align-items: center; gap: .5em; margin-top: .55em; font-size: .85em; }
.widget[data-align="end"] .w-ph-nav { justify-content: flex-end; }
.widget[data-align="center"] .w-ph-nav { justify-content: center; }
.w-ph-step { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); cursor: pointer; pointer-events: auto; }
.w-ph-step:hover { background: color-mix(in srgb, currentColor 24%, transparent); }
.w-ph-step svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.w-ph-count { font-variant-numeric: tabular-nums; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-phrase.all .w-ph-row { margin-top: .6em; }

/* photo memory: a polaroid (its paper is the photo's own, not the theme's: --t-photo-frame and --t-photo-ink change it) */
.w-polaroid { margin: 0; display: inline-block; padding: .65em .65em 0; background: var(--t-photo-frame, #f7f3ea); color: var(--t-photo-ink, #3b3442); text-shadow: none;
  border-radius: calc(var(--t-radius, .9em) * .15); transform: rotate(var(--tilt, 0deg)); box-shadow: 0 .7em 1.8em rgba(8,6,24,.38), 0 .1em .3em rgba(8,6,24,.25); }
.w-photo-img { width: 11em; height: 11em; display: grid; place-items: center; background: color-mix(in srgb, currentColor 10%, transparent) center / cover no-repeat; animation: w-photo-in 1.6s ease; }
.w-polaroid.tall .w-photo-img { height: 13.5em; }
.w-photo-img svg { width: 3em; height: 3em; opacity: .4; }
.w-polaroid figcaption { max-width: 11em; padding: .5em .2em .6em; text-align: center; font-family: var(--display); font-size: 1.05em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-polaroid.empty figcaption { white-space: normal; font-size: .9em; }
@keyframes w-photo-in { from { opacity: 0; filter: saturate(.4) brightness(1.15); } to { opacity: 1; filter: none; } }

/* focus timer */
.w-focus { display: flex; align-items: center; gap: .8em; }
.widget[data-align="end"] .w-focus { flex-direction: row-reverse; }
.w-focus-ring { flex: none; width: 3.4em; height: 3.4em; transform: rotate(-90deg); }
.w-focus-ring circle { fill: none; stroke-width: 3.2; }
.w-focus-ring .w-track { stroke: color-mix(in srgb, currentColor 20%, transparent); }
.w-focus-ring .w-prog { stroke: var(--t-accent, var(--warm)); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.w-focus-main { display: grid; }
.w-focus-time { font-family: var(--display); font-size: 2.4em; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.w-focus-label { font-size: .85em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-focus.done .w-focus-time { color: var(--t-accent, var(--warm)); }

/* gentle nudges: a soft line that fades in and breathes, never a pop-up */
.w-nudge { display: inline-flex; align-items: center; gap: .6em; }
.widget[data-align="end"] .w-nudge { flex-direction: row-reverse; }
.w-nudge-icon svg { display: block; width: 1.3em; height: 1.3em; color: var(--t-accent, var(--warm)); }
.w-nudge.on { font-size: 1.2em; animation: w-nudge-in 2.4s ease, w-breathe 5s ease-in-out 2.4s infinite; }
.w-nudge.idle { font-size: .9em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
@keyframes w-nudge-in { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@keyframes w-breathe { 50% { opacity: .72; } }

/* to-do list */
.w-todo { width: max-content; min-width: 13em; max-width: 24em; }
.w-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.4em; }
.w-head b { font-size: 1.15em; font-weight: 600; }
.w-head span { font-size: .85em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-todo-list { list-style: none; margin: .5em 0 0; padding: 0; display: grid; gap: .2em; }
.w-todo-item { display: flex; align-items: center; gap: .6em; width: 100%; padding: .22em 0; text-align: left; white-space: normal; line-height: 1.25; }
.widget[data-align="end"] .w-todo-item { flex-direction: row-reverse; text-align: right; }
.w-check { flex: none; width: 1.15em; height: 1.15em; border-radius: .35em; border: .12em solid currentColor; display: grid; place-items: center; opacity: .9; }
.w-check svg { width: .8em; height: .8em; stroke-width: 3.2; visibility: hidden; }
.w-todo-item.done .w-check { background: var(--t-accent, var(--warm)); border-color: var(--t-accent, var(--warm)); color: var(--t-accent-ink, var(--warm-ink)); }
.w-todo-item.done .w-check svg { visibility: visible; }
.w-todo-item.done .w-todo-text { text-decoration: line-through; opacity: .55; }

/* now playing */
.w-media { display: flex; align-items: center; gap: .9em; width: max-content; max-width: 27em; }
.widget[data-align="end"] .w-media { flex-direction: row-reverse; }
.w-art { flex: none; width: 4.6em; height: 4.6em; border-radius: calc(var(--t-radius, .9em) * .6); background: center / cover no-repeat; box-shadow: 0 .4em 1.2em rgba(8,6,24,.35); }
.w-art.none { position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--c1, #8a7ad0), var(--c2, #2c2850)); }
.w-art.none svg { position: relative; width: 1.7em; height: 1.7em; opacity: .92; filter: drop-shadow(0 .1em .25em rgba(0,0,0,.35)); }
/* the record slipping out of the sleeve */
.w-disc { position: absolute; width: 86%; aspect-ratio: 1; right: -40%; top: 7%; border-radius: 50%; opacity: .8;
  background: radial-gradient(circle, var(--c1, #8a7ad0) 0 13%, #16141c 14% 17%, transparent 18%), repeating-radial-gradient(circle, #1d1b24 0 2px, #2a2733 2px 3px); }
.w-media-main { min-width: 0; display: grid; gap: .1em; }
.w-media-title, .w-media-sub { max-width: 17em; overflow: hidden; text-overflow: ellipsis; }
.w-media-title { font-size: 1.15em; font-weight: 600; }
.w-media-sub { font-size: .85em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-media .w-btns { margin-top: .45em; }

/* calendar */
.w-cal { width: max-content; min-width: 14em; max-width: 26em; }
.w-cal-list { list-style: none; margin: .5em 0 0; padding: 0; display: grid; gap: .45em; }
.w-cal-item { display: grid; grid-template-columns: 5.6em 1fr auto; align-items: baseline; gap: .7em; line-height: 1.25; }
.w-cal-when { display: grid; font-size: .82em; }
.w-cal-when b { font-weight: 600; }
.w-cal-when i { font-style: normal; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); font-variant-numeric: tabular-nums; }
.w-cal-what { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.w-cal-item.now .w-cal-when i { color: var(--t-accent, var(--warm)); font-weight: 600; }
.w-cal-tag { align-self: center; color: var(--t-accent, var(--warm)); }
.w-cal-tag svg { width: 1.1em; height: 1.1em; }
.widget[data-align="end"] .w-cal-item { direction: rtl; text-align: right; }
.widget[data-align="end"] .w-cal-item > * { direction: ltr; }

/* system */
.w-sys { display: grid; gap: .5em; min-width: 14em; }
.w-sys-row { display: grid; grid-template-columns: 4.8em 1fr auto; align-items: center; gap: .7em; }
.w-sys-label { font-size: .85em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-bar { display: block; height: .38em; border-radius: 1em; overflow: hidden; background: color-mix(in srgb, currentColor 18%, transparent); }
.w-bar b { display: block; height: 100%; border-radius: inherit; background: var(--t-accent, var(--warm)); transition: width .8s ease; }
.w-sys-row em { min-width: 2.8em; font-style: normal; font-size: .9em; text-align: right; font-variant-numeric: tabular-nums; }
.w-sys-row em small { margin-left: .3em; font-size: .8em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }

/* the editor for notes, the to-do list, photos and the passport */
.w-editor { width: min(760px, 94vw); max-height: 88vh; padding: 26px 30px 28px; overflow: auto; color: var(--text); border-radius: 24px; }
.w-editor::backdrop { background: rgba(6,4,18,.45); }
.we-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.we-head h2 { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 500; }
.we-head .lead { margin: 6px 0 20px; }
.we-add { display: grid; gap: 10px; margin-bottom: 14px; }
.we-row { display: flex; align-items: center; gap: 10px; }
.we-row input[type="text"] { flex: 1; }

.we-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.we-item input[type="text"] { flex: 1; }
.we-note { flex-direction: column; align-items: stretch; }
.we-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.icon-btn.small { width: 34px; height: 34px; flex: none; }
.icon-btn.small svg { width: 16px; height: 16px; }
.icon-btn:disabled { opacity: .3; cursor: default; }
.we-todo.done input[type="text"] { text-decoration: line-through; opacity: .6; }
.we-todo .tog { flex: none; }
.we-foot { margin-top: 18px; }
.we-file { cursor: pointer; }
.we-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.we-photo { display: grid; gap: 8px; }
.we-thumb { aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,.06) center / cover no-repeat; }
.we-photo input[type="date"] { flex: 1; padding: 6px 8px; font-size: 13px; }
.we-photo input[type="text"] { font-size: 14px; padding: 7px 10px; }
.we-count { margin: 0 0 14px; color: var(--muted); }
.we-count b { font-family: var(--display); font-size: 30px; font-weight: 500; color: var(--text); margin-right: 4px; }
.we-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; max-height: 46vh; overflow: auto; }
.we-stamp { padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 12px; }
.we-stamp b { display: block; font-size: 14px; font-weight: 600; }
.we-stamp span { font-size: 12px; color: var(--muted); }

/* lists and panels read left to right wherever the widget is anchored (a right-hand to-do list kept its checkboxes ragged) */
.widget .w-panel { text-align: left; }

/* ---------- Your account and Friends (account.js) ---------- */
.nav button { position: relative; }
.nav .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
  font: 700 11px/1 "Segoe UI", sans-serif; font-style: normal; color: var(--warm-ink); background: var(--warm); }
.acct-mode { margin-bottom: 14px; }
.btn.link { min-height: 0; padding: 4px 2px; border: 0; background: none; color: var(--muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.btn.link:hover { background: none; color: var(--text); }
.btn.danger { background: #c8323a; color: #fff; border-color: transparent; }
.btn.danger:hover { background: #d8434b; }
.btn:disabled { opacity: .5; cursor: default; }
.hint.bad { color: #ffb0a8; }
code.friend-code { font: 700 17px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em; padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px dashed var(--line-2); user-select: all; }
.fr-person .fr-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--warm-ink);
  background: color-mix(in srgb, var(--warm) 80%, #fff); }
.fr-photo-row { align-items: flex-start; flex-wrap: wrap; }
.fr-photo { position: relative; width: 168px; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px dashed var(--line-2); color: var(--faint); font-size: 13px; }
.fr-photo video, .fr-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr-photo video { transform: scaleX(-1); } /* a selfie, as in a mirror (and sent the same way) */
.fr-photo-btns { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fr-count { font-size: 13px; color: var(--faint); }
.fr-post { flex-wrap: wrap; }
.fr-post .t b { font-weight: 500; overflow-wrap: anywhere; }
.fr-thumb { flex: none; width: 54px; height: 54px; border-radius: 10px; background: rgba(255,255,255,.08) center / cover no-repeat; }
.fr-post-btns { display: flex; gap: 6px; }
.fr-report { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fr-report select { min-width: 180px; }
.fr-to .hint { margin: 0; }

/* Continue with Google: Google's own light button (their branding guidelines), then "or with your email" */
.google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px; border-radius: 12px;
  background: #fff; color: #1f1f1f; border: 1px solid #747775; font: 600 15px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.google-btn:hover { background: #f4f6fb; }
.google-btn:disabled { opacity: .6; cursor: default; }
.google-btn svg { width: 20px; height: 20px; flex: none; }
.acct-google-wrap .or, .setup-google-wrap .or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--faint); font-size: 13px; }
.acct-google-wrap .or::before, .acct-google-wrap .or::after, .setup-google-wrap .or::before, .setup-google-wrap .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Plus, quietly: a placed Plus widget on the free plan, and the Plus tags in the widget tray and the theme picker */
.w-plus { display: inline-flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: 999px; font-size: .55em;
  background: rgba(18,14,38,.35); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8); }
.w-plus svg { width: 1.2em; height: 1.2em; }
.w-plus b { font-size: .8em; font-weight: 700; padding: .1em .55em; border-radius: 999px; color: var(--warm-ink); background: var(--warm); }
.theme-tile .lock { position: absolute; top: 6px; right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; color: var(--warm-ink); background: var(--warm); }
.theme-tile { position: relative; }

/* a soft veil behind a widget whose text the sky behind it would wash out (widgets.js, veils): a static gradient, no
   filter, so it costs nothing per frame; it only fades in or out when the light changes */
.w-veil { position: absolute; inset: -.9em -1.6em; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 2.5s ease;
  background: radial-gradient(closest-side, rgb(var(--veil-rgb, 10 12 32) / var(--veil, .3)), rgb(var(--veil-rgb, 10 12 32) / calc(var(--veil, .3) * .6)) 55%, rgb(var(--veil-rgb, 10 12 32) / 0)); }
.widget[data-veil] > .w-veil { opacity: 1; }

/* ---------- friends on the bench (bench-social.js): the partner's glow, hearts, the day's question ----------
   Sized from the viewport's height like the rest of the overlay. No backdrop blur: the scene repaints under these
   every frame on the wallpaper, and a solid tint costs nothing. */
.bench-social { position: fixed; inset: 0; pointer-events: none; z-index: 4; font-size: clamp(12px, 1.3vh, 30px); }
body.no-ui .bench-social, .saver .bench-social { display: none; }
.bench-glow { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 1.6s ease;
  background: radial-gradient(closest-side, rgba(255,228,182,.66), rgba(255,204,150,.3) 48%, rgba(255,190,140,0)); mix-blend-mode: screen; }
.bench-glow.on { opacity: 1; }
.bench-chip { position: absolute; display: flex; align-items: center; gap: .5em; padding: .38em .85em .38em .7em; border-radius: 999px; white-space: nowrap;
  transform: translate(-50%, -100%); opacity: 0; transition: opacity 1.2s ease; font-weight: 600; font-size: .95em; color: #fff7ee;
  background: rgba(22,16,40,.55); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 .4em 1.4em rgba(6,4,22,.25); }
.bench-chip.on { opacity: 1; }
.bench-chip i { width: .55em; height: .55em; border-radius: 50%; background: #9ff0b8; box-shadow: 0 0 .5em rgba(159,240,184,.9); }
.bench-bubble { position: absolute; width: max-content; max-width: min(24em, calc(100vw - 32px)); padding: .9em 1.1em .8em; border-radius: 1.2em;
  transform: translate(-50%, calc(-100% - .7em)) scale(.96); transform-origin: 50% 100%; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; color: #2a1d33; background: rgba(255,250,243,.94); box-shadow: 0 .6em 2em rgba(6,4,22,.28); }
.bench-bubble.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, calc(-100% - .7em)); transition: opacity .5s ease, transform .5s ease; }
.bench-bubble::after { content: ""; position: absolute; left: calc(50% + var(--tail, 0px)); bottom: -.55em; width: 1.1em; height: 1.1em; transform: translateX(-50%) rotate(45deg);
  background: inherit; border-radius: 0 0 .25em 0; }
.bb-who { font-size: .78em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9a6a7a; }
.bb-text { margin-top: .25em; font-family: var(--display, Georgia, serif); font-size: 1.3em; line-height: 1.3; }
.bb-btns { display: flex; gap: .5em; margin-top: .65em; }
.bb-btns button { padding: .4em .9em; border-radius: 999px; font-size: .9em; font-weight: 600; color: #2a1d33; background: rgba(42,29,51,.08); }
.bb-btns .bb-go { color: var(--warm-ink); background: var(--warm); }
.bench-line { position: absolute; max-width: min(30em, calc(100vw - 32px)); padding: .45em 1em; border-radius: 999px; text-align: center;
  transform: translateX(-50%); opacity: 0; transition: opacity .8s ease; color: #fff7ee; font-size: 1.05em; font-weight: 500;
  background: rgba(22,16,40,.5); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.bench-line.on { opacity: 1; }
.bench-heart { position: absolute; transform: translate(-50%, -50%); opacity: 0; animation: bench-heart 3.4s cubic-bezier(.2,.6,.3,1) forwards; }
.bench-heart svg { display: block; width: 100%; height: 100%; fill: #ff8fa8; filter: drop-shadow(0 .1em .3em rgba(120,20,60,.35)); }
@keyframes bench-heart {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.85) rotate(var(--spin)); }
}
@media (prefers-reduced-motion: reduce) { .bench-heart { display: none; } }

/* the question widget */
.w-question { width: max-content; max-width: 22em; white-space: normal; }
.w-q-head { display: flex; align-items: center; gap: .45em; font-size: .85em; letter-spacing: .04em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-q-head svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.w-q-text { margin-top: .3em; font-family: var(--display); font-size: 1.45em; line-height: 1.25; }
.w-q-foot { margin-top: .4em; font-size: .85em; color: var(--t-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.w-q-pair { display: grid; gap: .4em; margin-top: .45em; }
.w-q-pair div { font-family: var(--display); font-size: 1.15em; line-height: 1.25; }
.w-q-pair b { display: block; font-family: inherit; font-size: .62em; letter-spacing: .05em; text-transform: uppercase; color: var(--t-accent, var(--warm)); }

/* Settings › Friends: the bench, the question, reactions and replies */
.fr-avatar.here { box-shadow: 0 0 0 2px #9ff0b8, 0 0 12px rgba(159,240,184,.6); }
.fr-q .fr-q-text { margin: 0 0 10px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.fr-q textarea { width: 100%; }
.fr-q-foot { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-top: 8px; }
.fr-q-foot .hint { margin: 0; }
.fr-q-status:empty, .fr-reply-status:empty { display: none; }
.fr-reply-status { margin: 6px 0 0; }
.fr-q-both { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fr-q-both div, .fr-q-old { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.fr-q-both b, .fr-q-old b { font-size: 13px; color: var(--muted); }
.fr-q-past { margin-top: 6px; }
.fr-q-list { display: grid; gap: 8px; margin-top: 8px; }
.fr-q-old span { font-size: 14px; }
.fr-answer { flex: 1 1 100%; display: grid; gap: 8px; }
.fr-answer:empty { display: none; }
.fr-react { display: flex; flex-wrap: wrap; gap: 4px; }
.fr-react button { padding: 4px 8px; border-radius: 10px; font-size: 16px; line-height: 1.2; background: rgba(255,255,255,.05); border: 1px solid transparent; filter: grayscale(.4); opacity: .75; }
.fr-react button:hover { opacity: 1; filter: none; }
.fr-react button.on { opacity: 1; filter: none; border-color: var(--warm); background: rgba(255,179,138,.14); }
.fr-reply { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fr-reply span { flex: 1; overflow-wrap: anywhere; }
.fr-reply b { margin-right: 4px; }
.fr-reply.mine span { color: var(--muted); }
.fr-reply-form { display: flex; gap: 8px; }
.fr-reply-form input { flex: 1; min-width: 0; }
.fr-reacted { font-size: 14px; color: var(--muted); }

/* the corner buttons hide behind anything modal (the journal, places, the maker, keepsakes), where they couldn't be
   clicked anyway; with the side sheet open they stay and work */
body:has(dialog:modal) .chrome { visibility: hidden; }

/* Settings › Screens: the monitors as they sit on the desk */
.screen-map { display: grid; place-items: center; padding: 14px 12px; margin-bottom: 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); overflow: hidden; }
.sm-box { position: relative; max-width: 100%; }
.sm-mon { position: absolute; display: grid; place-content: center; gap: 1px; padding: 2px; border-radius: 6px; text-align: center; overflow: hidden;
  background: rgba(255,255,255,.08); border: 2px solid var(--line-2); color: var(--muted); font-size: 11px; line-height: 1.15; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.sm-mon b { font-size: 12px; color: var(--text); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-mon span { font-size: 10px; }
.sm-mon:hover { border-color: rgba(255,255,255,.4); }
.sm-mon.on { border-color: var(--warm); background: rgba(255,179,138,.16); }
.sm-mon.off { opacity: .55; }
.sm-mon.off b::after { content: " · " attr(data-off); font-weight: 500; } /* "off" in the app's language (app.js) */

/* the inspector: room for a widget's own things and its Style group */
body.editing .inspector { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
.field.content > .w-content { display: grid; gap: 8px; max-height: 42vh; overflow-y: auto; padding-right: 2px; }
.we-inline .we-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.we-inline textarea, .we-inline input[type="text"] { font-size: 13.5px; }
.w-style { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.w-style > summary { cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); list-style: none; }
.w-style > summary::after { content: " +"; }
.w-style[open] > summary::after { content: " −"; }
.swatches.wrap { flex-wrap: wrap; gap: 8px; }
.swatches.wrap button { width: 24px; height: 24px; }
.swatches.wrap button.auto { width: auto; } /* the "Theme" chip fits its word ("Design", "Thème") */
.swatches .pick { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: conic-gradient(#ff8fa8, #ffd06a, #8ff0d0, #9fd8ff, #c8b6ff, #ff8fa8); color: #1a1430; cursor: pointer; border: 2px solid transparent; }
.swatches .pick.on { border-color: #fff; box-shadow: 0 0 0 2px var(--warm); }
.swatches .pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.field.inline input[type="range"] { flex: 1; accent-color: var(--warm); }
.field.inline em { font-style: normal; font-size: 12px; color: var(--muted); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.field.inline input[type="color"] { width: 44px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; }

/* a widget's own background, shadow and see-through (its Style group) */
.widget[data-bg] > .w-body { background: var(--w-bg); border-radius: var(--w-radius, 16px); padding: .45em .8em; }
.widget[data-bg] .w-panel { background: transparent; border-color: transparent; box-shadow: none; }
.widget[data-ink="custom"] { text-shadow: 0 2px 22px rgba(8,6,24,.42); }
.widget[data-shadow="none"], .widget[data-shadow="none"] * { text-shadow: none; }
.widget[data-shadow="strong"] { text-shadow: 0 2px 6px rgba(8,6,24,.75), 0 0 22px rgba(8,6,24,.55); }
.we-inline .we-item { display: flex; align-items: center; gap: 6px; }
.we-inline .we-item input[type="text"], .we-inline .we-item textarea { flex: 1; min-width: 0; }
.we-inline .we-item .icon-btn.small { flex: none; width: 26px; height: 26px; }

/* a widget dragged out of the gallery: its preview follows the pointer; over the gallery it fades (dropping there cancels) */
.wg-ghost { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; opacity: .92; filter: drop-shadow(0 12px 28px rgba(6,4,22,.45)); }
.wg-ghost.away { opacity: .35; }
.wg-ghost .widget { position: static; transform-origin: center; }
.wg-ghost * { pointer-events: none !important; } /* so the hit test sees what is under it */

/* search in Settings */
.set-search { position: relative; margin: -6px 52px 22px 0; }
.set-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.set-search input { width: 100%; padding-left: 42px; padding-right: 14px; } /* the field look, with room for its magnifier */
.set-search input:focus { outline: none; border-color: var(--warm); background: rgba(255,255,255,.08); }
.set-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.settings.searching .body section[data-section] { display: none; }
.set-results { display: grid; gap: 4px; }
.set-hit { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; text-align: left; }
.set-hit:hover, .set-hit:focus-visible { background: rgba(255,255,255,.07); border-color: var(--line); outline: none; }
.set-hit b { font-size: 15px; font-weight: 600; }
.set-hit span { font-size: 12.5px; color: var(--faint); }
.set-none { margin: 8px 2px; color: var(--muted); font-size: 14px; }
.row.found, section.found > h2 { animation: set-found 1.8s ease-out; }
@keyframes set-found { 0%, 35% { background: rgba(255,179,138,.18); box-shadow: inset 3px 0 0 var(--warm); } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .row.found, section.found > h2 { animation: none; background: rgba(255,179,138,.14); } }

/* Settings › Feedback */
.fb-kind { margin: 0 0 12px; flex-wrap: wrap; }
.fb-text { display: block; width: 100%; min-height: 140px; margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.05);
  color: var(--text); font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
.fb-text:focus { outline: none; border-color: var(--warm); }
.fb-email { min-width: 0; width: min(260px, 100%); }
.fb-actions { display: flex; align-items: center; gap: 14px; margin: 16px 0 6px; }
.fb-status { color: var(--muted); font-size: 14px; }
.fb-item .t b { font-weight: 500; }
/* hear a phrase: the voices on this computer (widgets-more.js) */
.w-ph-line { display: flex; align-items: center; gap: .45em; }
.widget[data-align="end"] .w-ph-line { justify-content: flex-end; }
.widget[data-align="center"] .w-ph-line { justify-content: center; }
.w-ph-play { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; color: inherit; cursor: pointer; pointer-events: auto;
  background: color-mix(in srgb, currentColor 12%, transparent); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.w-ph-play:hover, .w-ph-play.on { background: color-mix(in srgb, currentColor 26%, transparent); }
.w-ph-play svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the tour after the welcome (tour.js) */
body.touring .chrome { opacity: 1; pointer-events: none; }
.tour-ring { position: fixed; z-index: 40; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 2px var(--warm), 0 0 0 9999px rgba(8,6,22,.55);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.tour-ring.off { box-shadow: 0 0 0 9999px rgba(8,6,22,.55); width: 0 !important; height: 0 !important; left: 50% !important; top: 50% !important; }
.tour { position: fixed; z-index: 41; width: min(340px, calc(100vw - 32px)); padding: 18px 20px 16px; border-radius: 18px; color: var(--text); transition: left .25s ease, top .25s ease; }
.tour::before { content: ""; position: absolute; top: -7px; left: var(--arrow, 30px); width: 14px; height: 14px; transform: rotate(45deg); background: inherit; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.tour.centre { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour.centre::before { display: none; }
.tour h3 { margin: 6px 0 6px; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.tour-text { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 16px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); }
.tour-dots i.on { background: var(--warm); }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-actions .grow { flex: 1; }
.tour-skip { font-size: 13px; color: var(--faint); padding: 6px 2px; }
.tour-skip:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .tour, .tour-ring { transition: none; } }

/* a pet's coat (maker): the pet in its coat, the breed's coats, and the owner's own colour per family */
.pet-head { gap: 10px; }
.pet-head b { flex: 1; }
.pet-thumb { flex: none; width: 52px; height: 52px; border-radius: 12px; background: rgba(255,255,255,.07); display: grid; place-items: center; }
.pet-thumb svg { width: 44px; height: 44px; }
.coat-name { font-size: 13px; color: var(--muted); margin-bottom: -2px; }
.own-colours > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.own-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; margin-top: 10px; align-items: center; }
.own-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.own-row input[type="color"] { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }

/* a holiday at home, under the date (holidays.js) */
.w-date-hol { margin-top: .3em; font-size: .9em; font-weight: 500; color: var(--t-muted, color-mix(in srgb, currentColor 78%, transparent)); }
.home-holidays { margin-bottom: 6px; }

/* Make your own place (place-maker.js) */
.place-maker { width: min(1180px, 96vw); max-height: 94vh; padding: 0; border-radius: 24px; color: var(--text); }
.place-maker[open] { display: flex; flex-direction: column; }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 12px; }
.pm-head h2 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 500; }
.pm-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 24px; padding: 0 24px; overflow: auto; min-height: 0; }
.pm-view { position: sticky; top: 0; align-self: start; }
.pm-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid var(--line); background: #1c1730; }
.pm-times { margin-top: 10px; }
.pm-form { display: grid; gap: 14px; padding-bottom: 16px; }
.pm-field { display: grid; gap: 7px; transition: opacity .15s ease; }
.pm-field > span { font-size: 12.5px; font-weight: 600; color: var(--faint); }
.pm-field.dim { opacity: .45; }
.pm-field input[type="text"] { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); font: inherit; font-size: 15px; }
.pm-field input[type="text"]:focus { outline: none; border-color: var(--warm); }
.pm-chips { gap: 6px; }
.pm-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--line); }
.pm-foot .grow { flex: 1; }
@media (max-width: 860px) { .pm-body { grid-template-columns: 1fr; } .pm-view { position: static; } }
.tile.make-place .img { display: grid; place-items: center; background: rgba(255,255,255,.04); border-style: dashed; box-shadow: none; }
.tile.make-place .img svg { width: 40px; height: 40px; fill: none; stroke: var(--warm); stroke-width: 1.8; stroke-linecap: round; }
.tile .edit-place { position: absolute; top: 8px; left: 8px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #1a1430; background: rgba(255,255,255,.88); }
.tile .edit-place:hover { background: #fff; }

/* customising by keyboard: the widget with focus shows it */
body.editing .widget:focus-visible { outline: 2px solid var(--warm); outline-offset: 6px; border-radius: 12px; }

/* Settings › Pets: a card per pet, its look, its day, its nature and its routine */
.pets-list { display: grid; gap: 12px; margin-bottom: 12px; }
.pet-row { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.pr-head { display: flex; align-items: center; gap: 12px; }
.pr-head .t { flex: 1; min-width: 0; display: grid; }
.pr-head .t b { font-size: 15px; }
.pr-head .t span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-grid { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pr-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pr-field > span { font-size: 13.5px; color: var(--muted); }
.pr-day { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-day select, .pr-day input { width: auto; min-width: 0; }
.pr-day input[type="number"] { width: 84px; }
.pr-routine { display: flex; align-items: center; gap: 10px; }
.pr-routine input[type="time"] { width: auto; }
.pr-routine input[type="time"]:disabled { opacity: .45; }
.pets-actions { margin-bottom: 18px; }

/* a pet asking for its walk or play (care moments): a small bubble over it, pointing down */
.pet-ask { position: fixed; z-index: 7; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 10px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.pet-ask svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pet-ask::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: inherit; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pet-ask:hover { filter: brightness(1.1); }
body.no-ui .pet-ask { display: none; }

/* the owner's notices (reporting.js): an announcement, "please update", maintenance; a small card at the top */
.app-notice { position: fixed; z-index: 9; top: 74px; left: 50%; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 16px; font-size: 14px; line-height: 1.4; color: var(--text); }
.app-notice > span { flex: 1; }
.app-notice a { color: var(--warm); font-weight: 600; white-space: nowrap; }
.app-notice.update, .app-notice.maintenance { border-color: var(--warm); }
.app-notice .icon-btn { flex: none; }
.wn-list { margin: 4px 0 0; padding-left: 18px; color: var(--faint); font-size: 13px; line-height: 1.4; } /* like a row's small line */
.wn-list li + li { margin-top: 3px; }
body:has(dialog[open]) .app-notice { display: none; } /* back when Settings or the maker close */
/* on a narrow screen the side sheet fills nearly the width: the corner buttons would sit on its search box */
@media (max-width: 760px) { body:has(dialog.settings[open]) .chrome { visibility: hidden; } }

/* customising on a phone: the bar fits the width (its "This screen" goes), the gallery's filters get a line of their own */
@media (max-width: 600px) {
  body.editing .edit-bar { left: 10px; right: 10px; top: 12px; transform: none; gap: 8px; padding: 6px 6px 6px 14px; }
  .edit-bar b { font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .edit-bar .muted { display: none; }
  .edit-bar .pillbtn { padding: 7px 12px; font-size: 13px; }
  .wg-head { gap: 8px; flex-wrap: wrap; }
  .wg-head > .grow { display: none; }
  .wg-head > b { flex: 1; }
  .wg-filters { order: 3; flex: 1 0 100%; }
  .wg-filters button { flex: 1; white-space: nowrap; padding: 6px 4px; }
}
/* the places picker on a phone: the title with its close button, then search, the kinds, and the two choices */
@media (max-width: 600px) {
  .places-dialog .head > div:first-child { flex: 1 1 0; min-width: 0; }
  .places-dialog .lists { margin-top: 6px; }
  .places-dialog .head > .grow { display: none; }
  .places-dialog .close-places { order: 1; }
  .places-dialog .places-search { order: 2; flex: 1 0 100%; width: 100%; }
  .places-dialog .places-filter { order: 3; flex: 1 0 100%; }
  .places-dialog .places-filter button { flex: 1; }
  .places-dialog .head .select { order: 4; flex: 1 1 0; }
  .places-dialog .head .select select { width: 100%; }
}
/* the corner buttons on a phone: along the bottom, over the pavement, so they don't cover the clock at the top */
@media (max-width: 600px) and (orientation: portrait) {
  .chrome { top: auto; right: auto; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
  .site-links .site-get { display: none; } /* a phone can't run the Windows app; the logo still goes home */
}
/* keepsakes and the maker on a phone: the title keeps its line with the close (or Cancel and Save), the tabs go under */
@media (max-width: 600px) {
  .share-dialog .head { flex-wrap: wrap; }
  .share-dialog .head h2 { flex: 1 1 0; min-width: 0; }
  .share-dialog .head > .grow { display: none; }
  .share-dialog .close-share { order: 1; }
  .share-dialog .share-tabs { order: 2; flex: 1 0 100%; }
  .share-dialog .share-tabs button { flex: 1; }
  .maker-head { padding: 16px 16px 10px; gap: 8px; }
  .maker-head h2 { font-size: 21px; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .maker-head > .grow { display: none; }
  .maker-head .btn { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; } /* as .btn.small */
}