.context-navigation { display:flex; gap:6px; margin:0 0 10px; }
.context-navigation button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:11px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); }
.back-button .icon { transform:rotate(180deg); }
.modal-navigation { position:static; width:max-content; max-width:100%; margin-bottom:12px; }
.modal-navigation .context-navigation { padding:3px; margin-bottom:10px; }
.brand-mark { --mark-size:36px; width:var(--mark-size); height:var(--mark-size); aspect-ratio:1; padding:0; border-radius:calc(var(--mark-size) * .3125); display:inline-grid; place-items:center; position:relative; flex:0 0 var(--mark-size); overflow:hidden; font-size:0!important; line-height:0; letter-spacing:0; background:var(--accent); color:#342820; }
.brand-mark > svg { display:block; width:82%; height:82%; fill:none; stroke:currentColor; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.brand .brand-mark { --mark-size:32px; }
.boot .brand-mark { --mark-size:62px; border-radius:calc(var(--mark-size) * .3125); }
.page-footer { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; width:100%; text-align:center; }
.page-footer .brand-mark { --mark-size:23px; }
.leader-me > .habit-emoji { width:38px; height:38px; flex-shrink:0; }
.leader-streak .habit-emoji { width:24px; height:24px; vertical-align:middle; }
.leader-streak { display:flex; align-items:center; gap:5px; }
.reference-shell .check-button { border-width:2px; border-radius:50%; }
.reference-shell .check-button > .icon { stroke-width:3.8; stroke-linecap:round; stroke-linejoin:round; transform:translateY(1.5px); }
.reference-shell .check-button.checked { border-color:color-mix(in srgb,var(--card-color) 65%,transparent); box-shadow:inset 0 1px 1px #ffffff20; }
.switch-field .toggle { width:46px; height:28px; padding:3px; box-shadow:inset 0 1px 3px #0002; }
.switch-field .toggle::after { width:22px; height:22px; transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.switch-field input:checked + .toggle::after { transform:translateX(18px); }
#settings-status { min-height:24px; color:var(--accent); }
:root[data-theme="light"] #settings-status { color:#406141; }
:root[data-glass="true"] body { background:radial-gradient(ellipse at 5% 5%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 54%),radial-gradient(ellipse at 100% 45%,#8e9dff1f,transparent 58%),radial-gradient(ellipse at 35% 100%,#ff9de31a,transparent 54%),var(--bg); background-attachment:fixed; }
:root[data-glass="true"] :is(.panel,.together-banner,.quick-tile,.context-navigation button,.menu-choice) { background:radial-gradient(circle at 8% 0%,#ffffff24,transparent 32%),linear-gradient(115deg,#ffffff0f,#9ddfff0b 35%,#f0a8ff12 60%,#ffffff08 76%),color-mix(in srgb,var(--surface) 50%,transparent); background-size:auto,220% 220%,auto; border:1px solid color-mix(in srgb,var(--text) 18%,transparent); box-shadow:inset 0 1px 0 #ffffff36,inset 1px 0 0 #ffffff12,inset 0 -1px 0 #ffffff08,0 14px 40px #0002; backdrop-filter:blur(28px) saturate(1.65) brightness(1.08); -webkit-backdrop-filter:blur(28px) saturate(1.65) brightness(1.08); animation:glass-glint 10s ease-in-out infinite alternate; }
:root[data-glass="true"] :is(dialog,.mobile-nav) { background:radial-gradient(circle at 10% 0%,#ffffff2b,transparent 34%),linear-gradient(115deg,#ffffff13,#9ddfff0d 36%,#f0a8ff13 62%,#ffffff08 78%),color-mix(in srgb,var(--surface) 62%,transparent); background-size:auto,230% 230%,auto; border:1px solid color-mix(in srgb,var(--text) 24%,transparent); box-shadow:inset 0 1px 1px #ffffff45,inset 1px 0 0 #ffffff16,inset 0 -1px 0 #ffffff0d,0 20px 70px #0005; backdrop-filter:blur(38px) saturate(1.75) brightness(1.08); -webkit-backdrop-filter:blur(38px) saturate(1.75) brightness(1.08); animation:glass-glint 11s ease-in-out infinite alternate; }
:root[data-theme="light"][data-glass="true"] :is(.panel,.together-banner,.quick-tile,.context-navigation button,.menu-choice) { background-color:#ffffff6b; border-color:#ffffffb8; box-shadow:inset 0 1px 1px #fff,inset 1px 0 0 #ffffffb0,0 14px 36px #3c496012; }
:root[data-theme="light"][data-glass="true"] :is(dialog,.mobile-nav) { background-color:#ffffff94; border-color:#fff; box-shadow:inset 0 1px 1px #fff,inset 1px 0 0 #ffffffcc,0 18px 55px #40506a1c; }
:root[data-glass="true"] .habit-card { box-shadow:inset 0 1px 1px #ffffff26,inset 1px 0 0 #ffffff09,0 12px 32px #0002; }
:root[data-glass="true"] .mobile-nav button.active { box-shadow:inset 0 1px 0 #ffffff28,0 4px 12px #0001; }
:root[data-glass="false"] :is(dialog,.mobile-nav,.modal-navigation) { background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none; }
button,.habit-card,.panel,.theme-option span { transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s,border-color .3s,opacity .2s; }
.main-content { animation:screen-enter .25s ease-out; }
dialog[open] { animation:sheet-enter .32s cubic-bezier(.16,1,.3,1) both; }
dialog[open]::backdrop { animation:veil-enter .25s ease-out both; }
.menu-choice { animation:screen-enter .35s ease-out both; }
.menu-choice:nth-child(2) { animation-delay:30ms; }
.menu-choice:nth-child(3) { animation-delay:60ms; }
.menu-choice:nth-child(4) { animation-delay:90ms; }
.menu-choice:nth-child(5) { animation-delay:120ms; }
.menu-choice:nth-child(6) { animation-delay:150ms; }
@media (hover:hover) { button:not(:disabled):hover { transform:translateY(-2px); } .habit-card:hover { transform:translateY(-3px); } }
button:not(:disabled):active { transform:scale(.96); }
@keyframes screen-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes sheet-enter { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes veil-enter { from { opacity:0; } to { opacity:1; } }
@keyframes glass-glint { from { background-position:0 0,0% 50%,0 0; } to { background-position:0 0,100% 50%,0 0; } }
.theme-picker { margin-bottom:24px; }
.profile-layout > *, .settings-sections, .heading > div, .field, .button-row > *, .ai-grid > *, .meal-grid > * { min-width:0; }
.field input,.field select,.field textarea { max-width:100%; min-width:0; }
.heading h1,.modal-head h2,.leader-row > b,.task-row b,.meal-row b { overflow-wrap:anywhere; }
.modal-head { align-items:flex-start; gap:12px; }
.modal-head .icon-button { flex-shrink:0; }
.modal-controls { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.modal-controls .context-navigation { margin:0; gap:4px; }
.modal-controls :is(.context-navigation button,.icon-button) { width:36px; height:36px; min-height:36px; padding:8px; border-radius:50%; }
.modal-controls .icon { width:20px; height:20px; }
.modal-head { align-items:center; }
@media(max-width:400px) { .modal-head h2 { font-size:20px; } .modal-head { gap:8px; } .modal-controls { gap:2px; } .modal-controls .context-navigation { gap:2px; } }
.button-row { flex-wrap:wrap; row-gap:12px; }
.switch-field { gap:16px; }
.settings-panel > .form-grid { row-gap:8px; }
dialog { max-width:calc(100vw - 24px); overscroll-behavior:contain; }
body:has(dialog[open]) { overflow:hidden; }
.reference-shell .page-footer { padding-bottom:130px; line-height:1.8; letter-spacing:1px; }
@media(max-width:400px) {
  .settings-panel .form-grid { grid-template-columns:1fr; }
  .theme-option > span { flex-direction:column; gap:7px; }
  .reference-shell .heading { gap:12px; }
  .leader-me .text-button { margin-left:0; }
  .detail-actions { flex-wrap:wrap; }
  .detail-actions > button { flex:1 1 140px; }
}

/* iOS visual viewport, keyboard and horizontal containment */
html,body { width:100%; max-width:100%; overflow-x:clip; overscroll-behavior-x:none; overscroll-behavior-y:none; }
body { touch-action:pan-y; }
.workspace,.main-content,.profile-layout,.settings-sections,dialog,dialog form,dialog .form-grid,dialog .field { min-inline-size:0; max-inline-size:100%; }
dialog { position:fixed; inset:0; box-sizing:border-box; inline-size:min(500px,calc(var(--visual-width,100vw) - 24px)); max-inline-size:calc(var(--visual-width,100vw) - 24px); max-block-size:min(88dvh,calc(var(--visual-height,100dvh) - 24px)); margin:auto; overflow-x:hidden; overflow-y:auto; }
dialog.large { inline-size:min(760px,calc(var(--visual-width,100vw) - 24px)); }
dialog :is(input,select,textarea,button) { box-sizing:border-box; min-inline-size:0; max-inline-size:100%; }
dialog .field :is(input,select,textarea),.settings-panel .field :is(input,select,textarea) { inline-size:100%!important; width:100%!important; min-width:0!important; }
dialog input[type="time"],dialog input[type="date"],dialog input[type="datetime-local"],.settings-panel input[type="time"] { display:block; box-sizing:border-box; inline-size:100%!important; width:100%!important; min-inline-size:0!important; min-width:0!important; max-inline-size:100%!important; max-width:100%!important; overflow:hidden; contain:inline-size; -webkit-appearance:none; appearance:none; }
input[type="time"]::-webkit-date-and-time-value,input[type="date"]::-webkit-date-and-time-value,input[type="datetime-local"]::-webkit-date-and-time-value { box-sizing:border-box; width:100%; min-width:0; text-align:left; }
input[type="time"]::-webkit-calendar-picker-indicator,input[type="date"]::-webkit-calendar-picker-indicator,input[type="datetime-local"]::-webkit-calendar-picker-indicator { flex:0 0 auto; margin:0; padding:0; }
#keyboard-done { position:fixed; left:50%; z-index:2147483647; width:min(180px,calc(100vw - 32px)); min-height:46px; transform:translate(-50%,-100%); border:1px solid color-mix(in srgb,var(--accent) 55%,#fff); border-radius:16px; background:color-mix(in srgb,var(--surface) 80%,var(--accent) 20%); color:var(--text); box-shadow:0 10px 35px #0008,inset 0 1px 0 #ffffff35; backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); font-size:16px; font-weight:800; }
#keyboard-done[hidden] { display:none; }

/* Continuous interaction feedback */
button,.toggle,.theme-option span,.color-picker span,.days-picker span,.status-pill,input,select,textarea { transition:color .34s ease,background-color .34s ease,background .34s ease,border-color .34s ease,box-shadow .34s ease,opacity .28s ease,transform .34s cubic-bezier(.2,.8,.2,1),filter .34s ease; }
button { -webkit-tap-highlight-color:transparent; transform-origin:center; }
button:not(:disabled):active { transform:scale(.97); filter:brightness(1.08) saturate(1.03); transition-duration:.1s; transition-timing-function:ease-out; }
.main-content>* { animation:content-rise .42s cubic-bezier(.16,1,.3,1) both; }
.main-content>*:nth-child(2) { animation-delay:35ms; }.main-content>*:nth-child(3) { animation-delay:70ms; }.main-content>*:nth-child(4) { animation-delay:105ms; }
@keyframes content-rise { from { opacity:0; transform:translateY(10px) scale(.995); } to { opacity:1; transform:none; } }

/* Emoji swap uses only round gradients, avoiding WebKit filter layer rectangles. */
.starter-emoji-stage::before { display:none!important; content:none!important; }
.starter-emoji-stage .emoji-frame { filter:none!important; transform:translate3d(18px,9px,0) rotate(14deg) scale(.72); transition:opacity 1.45s cubic-bezier(.22,1,.36,1),transform 1.65s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; image-rendering:auto; }
.starter-emoji-stage .emoji-frame.is-visible { filter:none!important; transform:translate3d(0,0,0) rotate(0) scale(1); }
.starter-emoji-stage .emoji-frame.is-leaving { filter:none!important; opacity:0; transform:translate3d(-16px,-9px,0) rotate(-13deg) scale(.82); }

/* Requests and multi account AI cards */
.request-list,.ai-accounts,.invite-options { display:grid; gap:12px; }
.request-card,.ai-account { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb,var(--surface) 76%,transparent); }
.request-card>div:first-child { display:flex; align-items:center; gap:12px; min-width:0; }
.request-card b,.request-card small,.ai-account b,.ai-account small { display:block; overflow-wrap:anywhere; }
.request-card small,.ai-account small { margin-top:4px; color:var(--muted); font-size:12px; }
.request-actions,.account-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.request-actions button { padding:10px 13px; }
.provider-heading { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:center; margin-bottom:18px; }
.provider-heading h2,.provider-heading p { margin:0; }
.provider-logo { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:var(--text); background:color-mix(in srgb,var(--accent) 16%,var(--surface-2)); }
.provider-logo svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.provider-logo.anthropic { color:#d79a70; }.provider-logo.anthropic svg { stroke-width:3; }
.ai-account>div:first-child { min-width:0; }.ai-account .status-pill { display:inline-flex; margin:6px 0 0 8px; }.ai-account .status-pill.connected { color:var(--accent); }
.ai-account { display:block; }.ai-account-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.ai-account-head>div { min-width:0; }.ai-account .status-pill.tracking { color:var(--peach,var(--accent)); }
.limit-windows { display:grid; gap:13px; margin:16px 0; }.limit-window { padding:13px; border-radius:15px; background:color-mix(in srgb,var(--surface-2) 80%,transparent); }.limit-window>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; }.limit-window strong { color:var(--accent); font-variant-numeric:tabular-nums; }.usage-bar { height:8px; margin:9px 0 7px; overflow:hidden; border-radius:99px; background:color-mix(in srgb,var(--text) 9%,transparent); }.usage-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 74%,white),var(--accent)); transition:width .7s cubic-bezier(.16,1,.3,1); }.limit-window small { display:block; color:var(--muted); font-size:11px; }.usage-edit-block { margin:16px 0; padding:15px; border-radius:18px; background:var(--surface-2); }.usage-edit-block h3 { margin:0 0 12px; }.download-link { display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; margin:14px 0; }
.provider-resets { margin:16px 0; }.invite-options section { padding:16px; border-radius:18px; background:var(--surface-2); }.invite-options h3 { margin-bottom:10px; }
.invite-habit-list { display:grid; gap:10px; }
.invite-habit-choice { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; width:100%; padding:14px 15px; text-align:left; border:1px solid var(--border); border-radius:17px; background:var(--surface-2); }
.invite-habit-choice .habit-emoji { font-size:38px; }.invite-habit-choice span { min-width:0; }.invite-habit-choice b,.invite-habit-choice small { display:block; }.invite-habit-choice b { overflow-wrap:anywhere; }.invite-habit-choice small { margin-top:3px; color:var(--muted); font-size:11px; }.invite-habit-choice>.icon { width:18px; color:var(--muted); }
.invite-share-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:13px; }.invite-share-card>.habit-emoji { font-size:42px; }.invite-share-card>.wide { grid-column:1/-1; }.invite-share-card .help { margin-bottom:0; }

@media(max-width:700px) {
  dialog :is(input,select,textarea),.settings-panel :is(input,select,textarea) { font-size:16px!important; }
  dialog { padding:20px; inline-size:calc(var(--visual-width,100vw) - 20px); max-inline-size:calc(var(--visual-width,100vw) - 20px); }
  dialog.large { inline-size:calc(var(--visual-width,100vw) - 20px); }
  .days-picker { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); width:100%; }
  .days-picker label,.days-picker span { min-width:0; }
  .request-card,.ai-account { align-items:flex-start; flex-direction:column; }
  .request-actions,.account-actions { width:100%; }
  .request-actions button { flex:1; }
}
@media(max-width:700px) { .reference-shell h1 { overflow-wrap:break-word; } .leader-me { flex-wrap:wrap; } }
@media(max-width:700px) {
  .reference-shell .heading > .primary { font-size:0; flex-shrink:0; }
  .reference-shell .heading > .primary .icon { width:22px; height:22px; }
  .reference-shell .card-top { flex-wrap:wrap; row-gap:8px; }
  .reference-shell .card-body h3 { overflow-wrap:anywhere; }
  .quick-access { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .quick-tile { min-width:0; flex-wrap:wrap; }
  .leader-me > div { flex:1 1 160px; min-width:0; }
  .leader-me > .text-button { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Complete Apple emoji catalog. Each icon is a 160 px asset for sharp Retina rendering. */
.habit-emoji { display:inline-block; width:1em!important; height:1em!important; flex:0 0 1em; font-size:34px; object-fit:contain; filter:none; user-select:none; -webkit-user-select:none; image-rendering:auto; }
.habit-symbol .habit-emoji { font-size:35px; }.detail-icon .habit-emoji { font-size:66px; }.leader-me>.habit-emoji { font-size:38px; }.leader-streak .habit-emoji { font-size:24px; }
.starter-emoji-stage .emoji-frame { font-size:56px; width:1em!important; height:1em!important; }
.emoji-category-nav { display:flex; align-items:center; gap:6px; block-size:48px; max-inline-size:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; margin:2px 0 10px; padding:3px 2px; box-sizing:border-box; overscroll-behavior-x:contain; isolation:isolate; }
.emoji-category-nav::-webkit-scrollbar { display:none; }
.emoji-category-nav button { flex:0 0 40px; inline-size:40px; block-size:40px; min-inline-size:40px; min-block-size:40px; padding:0; display:grid; place-items:center; line-height:0; overflow:hidden; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); box-sizing:border-box; }
.emoji-category-nav button:active { background:color-mix(in srgb,var(--accent) 14%,var(--surface-2)); }
.emoji-category-nav .habit-emoji { display:block; inline-size:23px!important; block-size:23px!important; width:23px!important; height:23px!important; margin:auto; font-size:23px; object-fit:contain; }
.habit-icon-picker { position:relative; display:block; max-height:350px; margin:0; padding:0 6px 10px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; scrollbar-width:none; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb,var(--surface-2) 58%,transparent); isolation:isolate; }
.habit-icon-picker::-webkit-scrollbar { display:none; }
.emoji-category-section + .emoji-category-section { margin-top:14px; }
.emoji-category-section h4 { position:sticky; top:0; z-index:2; margin:0 -6px 8px; padding:10px 11px 8px; color:var(--muted); background:color-mix(in srgb,var(--surface) 94%,transparent); border-radius:17px 17px 10px 10px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); font-size:12px; font-weight:760; letter-spacing:-.1px; }
.emoji-category-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.habit-icon-picker .emoji-choice { min-width:0; height:84px; padding:7px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid transparent; border-radius:16px; background:var(--surface-2); }
.habit-icon-picker .emoji-choice .habit-emoji { display:inline-block; font-size:41px; border:0; border-radius:0; background:transparent; object-fit:contain; cursor:default; }
.habit-icon-picker .emoji-choice small { width:100%; padding:0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; line-height:1.15; }
.habit-icon-picker .emoji-choice.selected { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,var(--surface-2)); box-shadow:inset 0 1px 0 #ffffff24; }
.habit-icon-picker .emoji-choice.selected small { color:var(--text); }
.emoji-count { min-height:14px; margin:6px 3px 17px; color:var(--muted); font-size:10px; text-align:right; font-variant-numeric:tabular-nums; }
.request-list + .together-banner { margin-top:30px; }
.reference-shell .heading > .primary,.reference-shell .heading > .glass-add { inline-size:48px; block-size:48px; min-inline-size:48px; min-block-size:48px; aspect-ratio:1; padding:0; border-radius:50%; display:grid; place-items:center; flex:0 0 48px; }
.reference-shell .heading > :is(.primary,.glass-add) > .icon { display:block; align-self:center; justify-self:center; margin:0; transform:translateY(5px); }
.optional-settings { margin-top:22px; }.optional-settings .switch-field { margin:0 0 14px; padding:15px; border-radius:16px; background:var(--surface-2); }
.optional-settings>div { animation:content-rise .28s ease-out both; }.optional-settings>div[hidden] { display:none; }
.recipe-catalog { display:grid; gap:11px; padding:18px; }
.recipe-card { display:flex; align-items:center; gap:14px; padding:15px; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb,var(--surface-2) 72%,transparent); }
.recipe-main { flex:1; min-width:0; text-align:left; }.recipe-main b,.recipe-main small,.recipe-main span { display:block; }.recipe-main b { font-size:16px; overflow-wrap:anywhere; }.recipe-main small { margin-top:5px; color:var(--muted); font-size:12px; }.recipe-main span { margin-top:7px; color:var(--accent); font-size:11px; }
.recipe-actions { display:flex; align-items:center; gap:7px; }.recipe-actions .primary { padding:10px 13px; min-height:38px; }
.recipe-empty { padding:20px; text-align:center; }.recipe-empty p { margin:0 auto 16px; max-width:440px; color:var(--muted); line-height:1.65; }
@media(max-width:700px) {
  .habit-symbol .habit-emoji { font-size:30px; }.detail-icon .habit-emoji { font-size:58px; }
  .habit-icon-picker { max-height:320px; }
  .emoji-category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .habit-icon-picker .emoji-choice { height:78px; }.habit-icon-picker .emoji-choice .habit-emoji { font-size:38px; }
  .recipe-card { align-items:stretch; flex-direction:column; }.recipe-actions { width:100%; }.recipe-actions .primary { flex:1; }
}

/* Keep native iOS date and time controls inside their settings cards. */
:root { --accent:#e9c09a; scroll-padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
.settings-sections, #settings-form, .settings-panel, .settings-panel .form-grid, .settings-panel .field { min-width:0; max-width:100%; }
.settings-panel .field { inline-size:100%; overflow:clip; }
.settings-panel .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
.settings-panel .field :is(input,select,textarea) { display:block; box-sizing:border-box; width:100%; min-width:0; min-inline-size:0; max-width:100%; max-inline-size:100%; }
.settings-panel .field :is(input,select,textarea):focus { scroll-margin-bottom:calc(115px + env(safe-area-inset-bottom)); }
.modal-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.modal-head h2 { min-width:0; line-height:1.22; }
.modal-controls { min-width:0; }
.modal-controls button:focus-visible { outline-offset:-3px; }
.reference-shell .starter-card { border-color:color-mix(in srgb,var(--accent) 23%,transparent); background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 8%,transparent),color-mix(in srgb,var(--accent) 4%,transparent)); }
.starter-card > .starter-emoji-stage { display:block; position:relative; width:60px; height:60px; margin-bottom:18px; isolation:isolate; }
.starter-emoji-stage::before { content:none!important; display:none!important; }
.starter-emoji-stage .emoji-frame { position:absolute; inset:0; width:56px; height:56px; object-fit:contain; opacity:0; transform:translate3d(14px,8px,0) rotate(12deg) scale(.78); filter:blur(5px); transform-origin:50% 65%; transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.1s ease; will-change:opacity,transform,filter; }
.starter-emoji-stage .emoji-frame.is-visible { opacity:1; transform:translate3d(0,0,0) rotate(0) scale(1); filter:blur(0); }
.starter-emoji-stage .emoji-frame.is-leaving { opacity:0; transform:translate3d(-11px,-8px,0) rotate(-10deg) scale(.9); filter:blur(5px); }
.starter-emoji-stage .emoji-frame.is-queued { transition:none; }
@media(max-width:700px) {
  :root[data-glass="true"] body { background-attachment:scroll; }
  .reference-shell .main-content { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
  .request-list + .together-banner { margin-top:26px; }
  .reference-shell .heading > .primary,.reference-shell .heading > .glass-add { inline-size:44px; block-size:44px; min-inline-size:44px; min-block-size:44px; flex-basis:44px; }
  .settings-panel .form-grid { grid-template-columns:minmax(0,1fr); }
  dialog { width:min(500px,calc(100vw - 24px)); max-width:calc(100vw - 24px); }
  dialog .form-grid { grid-template-columns:minmax(0,1fr); width:100%; min-width:0; }
  dialog .form-grid .field, dialog .form-grid :is(input,select,textarea) { min-width:0; max-width:100%; min-inline-size:0; max-inline-size:100%; }
}
@media(max-width:400px) {
  .settings-panel .form-grid { grid-template-columns:minmax(0,1fr); }
  .modal-head { gap:8px; }
  .modal-controls { gap:6px; }
  .modal-controls .context-navigation { gap:6px; }
  .modal-controls :is(.context-navigation button,.icon-button) { width:34px; height:34px; min-height:34px; padding:7px; }
}

/* Apple-style interaction polish: immediate feedback, reversible sheets and clear hierarchy. */
button,.toggle,.theme-option span,.color-picker span,.days-picker span { touch-action:manipulation; }
.primary,.soft-button,.quick-tile,.theme-option > span,.days-picker span { min-block-size:44px; }
dialog.is-closing { pointer-events:none; animation:sheet-exit .19s cubic-bezier(.4,0,1,1) both; }
dialog.is-closing::backdrop { animation:veil-exit .19s ease-in both; }
@keyframes sheet-exit { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(14px) scale(.985); } }
@keyframes veil-exit { from { opacity:1; } to { opacity:0; } }

/* Keep compact circular controls while preserving a forgiving touch target. */
@media(pointer:coarse) {
  .reference-shell :is(.glass-add,.topbar .icon-button,.section-title > .icon-button) { min-inline-size:44px; min-block-size:44px; }
  .reference-shell :is(.check-button,.task-check) { position:relative; z-index:1; }
  .reference-shell :is(.check-button,.task-check)::after { content:""; position:absolute; inset:-8px; border-radius:50%; }
  .modal-controls :is(.context-navigation button,.icon-button) { width:38px; height:38px; min-height:38px; }
}

/* Nested controls use a stable material instead of stacking translucent glass. */
:root[data-glass="true"] dialog :is(.menu-choice,.context-navigation button) {
  background:color-mix(in srgb,var(--surface-2) 92%,var(--accent) 8%);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 #ffffff20;
}

/* Respect the platform accessibility material and contrast preferences. */
@media(prefers-reduced-transparency:reduce) {
  :root[data-glass="true"] body { background:var(--bg); }
  :root[data-glass="true"] :is(dialog,.mobile-nav,.panel,.together-banner,.quick-tile,.context-navigation button,.menu-choice) {
    background:var(--surface);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    animation:none;
    box-shadow:0 10px 34px #0003;
  }
  :root[data-theme="light"][data-glass="true"] :is(dialog,.mobile-nav,.panel,.together-banner,.quick-tile,.context-navigation button,.menu-choice) { background:#fff; }
}
@media(prefers-contrast:more) {
  :root { --border:#ffffff52; --muted:#d0d0d5; --subtle:#aaaab1; }
  :root[data-theme="light"] { --border:#00000052; --muted:#45454b; --subtle:#5f5f66; }
  :is(dialog,.mobile-nav,.panel,.quick-tile,.menu-choice,input,select,textarea) { border-color:var(--border)!important; }
  .mobile-nav > button.active,.segmented .selected { outline:2px solid currentColor; outline-offset:-3px; }
}