/* Reminders-style Tasks: inset grouped lists, smart-list tiles, round
   completion checks, swipe actions and the details sheet. */
#page-tasks, .rem-sheet {
    --rem-ink: #1c1c1e;
    --rem-muted: #6e6e73;
    --rem-faint: #aeaeb2;
    --rem-hairline: rgba(60, 60, 67, 0.14);
    --rem-group: rgba(255, 255, 255, 0.86);
    --rem-group-solid: #ffffff;
    --rem-fill: rgba(118, 118, 128, 0.12);
    --rem-red: #ff3b30;
    --rem-orange: #ff9500;
    --rem-blue: #007aff;
    --rem-green: #34c759;
    --rem-radius: 1rem;
}
.dark #page-tasks, .dark .rem-sheet {
    --rem-ink: #f2f2f7;
    --rem-muted: #a1a1a6;
    --rem-faint: #636366;
    --rem-hairline: rgba(84, 84, 88, 0.5);
    --rem-group: rgba(28, 28, 30, 0.86);
    --rem-group-solid: #1c1c1e;
    --rem-fill: rgba(118, 118, 128, 0.24);
}

.rem-app { color: var(--rem-ink); max-width: 44rem; margin: 0 auto; padding-bottom: 7rem; }
.rem-app [hidden], .rem-sheet [hidden] { display: none !important; }
.rem-app button { -webkit-tap-highlight-color: transparent; }

/* --- Home --- */
.rem-home-header { display: flex; align-items: flex-end; justify-content: space-between; padding: .25rem .25rem .75rem; }
.rem-home-header h1, .rem-list-title { margin: 0; font-size: 2.125rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; }
.rem-summary { margin: .3rem 0 0; color: var(--rem-muted); font-size: .9rem; font-weight: 500; }

.rem-search { display: flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 .7rem; margin-bottom: 1rem; border-radius: .75rem; background: var(--rem-fill); color: var(--rem-muted); }
.rem-search svg { width: 1.05rem; height: 1.05rem; flex: none; }
.rem-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--rem-ink); font-size: 1rem; }
.rem-search input::-webkit-search-cancel-button { display: none; }
.rem-search:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rem-blue) 40%, transparent); }
.rem-search-clear { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--rem-faint); color: #fff; }
.rem-search-clear svg { width: .8rem; height: .8rem; }
.rem-search-empty { padding: 2rem 1rem; text-align: center; color: var(--rem-muted); }

.rem-smart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.6rem; }
.rem-smart-tile { display: flex; flex-direction: column; gap: .55rem; padding: .7rem .8rem .75rem; text-align: left; border-radius: var(--rem-radius); background: var(--rem-group);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px -10px rgba(0, 0, 0, .18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform .15s ease; }
.rem-smart-tile:active { transform: scale(.97); }
.rem-smart-top { display: flex; align-items: center; justify-content: space-between; }
.rem-smart-count { font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rem-smart-name { color: var(--rem-muted); font-weight: 700; font-size: .95rem; }

.rem-list-icon, .rem-row-icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: var(--tile-color, var(--rem-blue)); }
.rem-list-icon svg { width: 1.05rem; height: 1.05rem; stroke-width: 2.4; }
.rem-row-icon { width: 1.85rem; height: 1.85rem; border-radius: .5rem; }
.rem-row-icon svg { width: 1rem; height: 1rem; }

.rem-my-lists h2, .rem-section-label { display: flex; align-items: baseline; justify-content: space-between; margin: 0 .3rem .5rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.rem-group { border-radius: var(--rem-radius); background: var(--rem-group); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -14px rgba(0, 0, 0, .2);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.rem-list-row { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 3.25rem; padding: .55rem .9rem; text-align: left; position: relative; }
.rem-list-row + .rem-list-row::before { content: ''; position: absolute; top: 0; left: 3.7rem; right: 0; border-top: 1px solid var(--rem-hairline); }
.rem-list-row:active { background: var(--rem-fill); }
.rem-list-row-name { flex: 1; min-width: 0; font-size: 1.02rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-list-row-count { color: var(--rem-muted); font-variant-numeric: tabular-nums; }
.rem-chevron { width: 1rem; height: 1rem; color: var(--rem-faint); }
.rem-add-list { display: inline-flex; align-items: center; gap: .4rem; margin: 1rem .3rem 0; color: var(--rem-blue); font-weight: 600; font-size: 1rem; min-height: 2.75rem; }
.rem-add-list svg { width: 1.2rem; height: 1.2rem; }

.rem-reward { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; margin-bottom: 1rem; border-radius: var(--rem-radius); background: var(--rem-group); box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .2); }
.rem-reward > div { flex: 1; min-width: 0; }
.rem-reward-title { margin: 0; font-weight: 700; }
.rem-reward-copy { margin: 0; color: var(--rem-muted); font-size: .85rem; }
.rem-reward-claim { padding: .45rem 1rem; border-radius: 999px; background: var(--rem-orange); color: #fff; font-weight: 700; min-height: 2.5rem; }

/* --- List view --- */
.rem-list-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; margin-bottom: .2rem; }
.rem-nav-back { display: inline-flex; align-items: center; gap: .05rem; color: var(--list-color, var(--rem-blue)); font-size: 1.05rem; font-weight: 500; min-height: 2.75rem; margin-left: -.4rem; }
.rem-nav-back svg { width: 1.6rem; height: 1.6rem; }
.rem-nav-actions { display: flex; align-items: center; gap: .4rem; }
.rem-nav-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border-radius: 999px; background: var(--rem-fill); color: var(--list-color, var(--rem-blue)); font-size: .82rem; font-weight: 600; min-height: 2.25rem; }
.rem-nav-pill svg { width: .95rem; height: .95rem; }
.rem-nav-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--rem-fill); color: var(--list-color, var(--rem-blue)); }
.rem-nav-icon svg { width: 1.1rem; height: 1.1rem; }
.rem-list-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0 .25rem .9rem; }
.rem-list-title { color: var(--list-color, var(--rem-ink)); overflow-wrap: anywhere; }
.rem-list-count { font-size: 2rem; font-weight: 700; color: var(--list-color, var(--rem-ink)); font-variant-numeric: tabular-nums; }
.rem-day-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .9rem; }
.rem-day-label { flex: 1; min-height: 2.25rem; border-radius: 999px; background: var(--rem-fill); font-weight: 700; }

.rem-content { display: grid; gap: 1.35rem; }
.rem-section-label { font-size: 1.1rem; }
.rem-section-label span { color: var(--rem-muted); font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rem-section--overdue .rem-section-label { color: var(--rem-red); }
.rem-section--today .rem-section-label { color: var(--rem-blue); }
.rem-section--completed .rem-section-label { color: var(--rem-muted); }

/* Rows: content slides over the swipe affordances underneath. */
.rem-row { position: relative; overflow: hidden; touch-action: pan-y; }
.rem-row + .rem-row .rem-row-content::before { content: ''; position: absolute; top: 0; left: 3.05rem; right: 0; border-top: 1px solid var(--rem-hairline); }
.rem-row-content { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: .25rem; padding: .3rem .35rem .3rem .2rem; background: var(--rem-group-solid);
    transition: transform .28s cubic-bezier(.2, .9, .3, 1); will-change: transform; }
.rem-row.is-dragging .rem-row-content { transition: none; }
.rem-swipe-lead { position: absolute; inset: 0 auto 0 0; width: 100%; display: flex; align-items: center; padding-left: 1.4rem; background: var(--rem-green); color: #fff; opacity: .55; transition: opacity .15s; }
.rem-row.will-complete .rem-swipe-lead { opacity: 1; }
.rem-swipe-lead svg { width: 1.4rem; height: 1.4rem; }
.rem-swipe-actions { position: absolute; inset: 0 0 0 auto; display: flex; z-index: 0; }
.rem-row:not(.is-dragging):not(.is-swiped) .rem-swipe-actions { visibility: hidden; }
.rem-row:not(.is-dragging):not(.is-swiped) .rem-swipe-lead { visibility: hidden; }
.rem-row.is-swiped .rem-swipe-lead { visibility: hidden; }
.rem-swipe-actions button { width: 4.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; color: #fff; font-size: .75rem; font-weight: 600; }
.rem-swipe-actions svg { width: 1.2rem; height: 1.2rem; }
.rem-swipe-flag { background: var(--rem-orange); }
.rem-swipe-delete { background: var(--rem-red); }

.rem-check { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.rem-check-ring { position: relative; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--rem-faint) 90%, transparent);
    transition: border-color .2s, background-color .25s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.rem-check-ring svg { width: 1rem; height: 1rem; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .3s ease .08s; }
.rem-check:hover .rem-check-ring { border-color: var(--row-color, var(--rem-blue)); }
.rem-row.is-completed .rem-check-ring, .rem-row.is-checked .rem-check-ring, .rem-step.is-done .rem-check-ring {
    border-color: var(--row-color, var(--rem-blue)); background: var(--row-color, var(--rem-blue)); }
.rem-row.is-completed .rem-check-ring svg, .rem-row.is-checked .rem-check-ring svg, .rem-step.is-done .rem-check-ring svg { stroke-dashoffset: 0; }
.rem-row.is-checked .rem-check-ring { animation: rem-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.rem-check--ghost .rem-check-ring { border-style: dashed; }
@keyframes rem-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.rem-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; padding: .62rem 0; text-align: left; }
.rem-row-title { font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; transition: color .25s; }
.rem-row.is-completed .rem-row-title, .rem-row.is-checked .rem-row-title { color: var(--rem-muted); }
.rem-prio { margin-right: .3rem; color: var(--row-color, var(--rem-blue)); font-weight: 800; }
.rem-row-notes { color: var(--rem-muted); font-size: .86rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rem-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; color: var(--rem-muted); font-size: .8rem; }
.rem-row-meta svg { width: .85rem; height: .85rem; }
.rem-meta-date.is-overdue { color: var(--rem-red); font-weight: 600; }
.rem-meta-steps, .rem-meta-owner { display: inline-flex; align-items: center; gap: .2rem; }
.rem-meta-list { color: var(--chip-color); font-weight: 600; }
.rem-meta-reward { color: var(--rem-orange); display: inline-flex; }
.rem-row-flag { flex: none; padding-top: .85rem; color: var(--rem-orange); }
.rem-row-flag svg { width: 1rem; height: 1rem; fill: currentColor; }
.rem-info { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.75rem; color: var(--row-color, var(--rem-blue)); opacity: .55; }
.rem-info svg { width: 1.2rem; height: 1.2rem; }
.rem-info:hover, .rem-info:focus-visible { opacity: 1; }
.rem-row.is-leaving { animation: rem-leave .28s ease forwards; }
@keyframes rem-leave { to { opacity: 0; max-height: 0; transform: translateX(1.5rem); } }
.rem-row.is-leaving { max-height: 8rem; }

.rem-quick-add { display: flex; align-items: center; gap: .25rem; margin-top: .6rem; padding: .1rem .35rem .1rem .2rem; border-radius: var(--rem-radius); background: var(--rem-group); --row-color: var(--list-color); }
.rem-quick-add input:focus, .rem-quick-add input:focus-visible, .rem-step--new input:focus, .rem-title-input:focus, .rem-notes-input:focus, .rem-search input:focus { outline: none !important; box-shadow: none !important; }
.rem-quick-add:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--list-color, var(--rem-blue)) 35%, transparent); }
.rem-quick-add input { flex: 1; min-width: 0; min-height: 2.9rem; border: 0; outline: 0; background: transparent; color: var(--rem-ink); font-size: 1.02rem; }
.rem-quick-add input::placeholder { color: var(--rem-faint); }
.rem-quick-submit { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--list-color, var(--rem-blue)); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.rem-quick-add:focus-within .rem-quick-submit { opacity: 1; transform: none; }
.rem-quick-submit svg { width: 1.1rem; height: 1.1rem; }

.rem-empty { display: grid; justify-items: center; gap: .35rem; padding: 3rem 1.5rem 2rem; text-align: center; color: var(--rem-muted); }
.rem-empty h2 { margin: .4rem 0 0; color: var(--rem-ink); font-size: 1.15rem; font-weight: 700; }
.rem-empty p { margin: 0; font-size: .92rem; }
.rem-empty-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: color-mix(in srgb, var(--list-color, var(--rem-blue)) 14%, transparent); color: var(--list-color, var(--rem-blue)); }
.rem-empty-icon svg { width: 1.6rem; height: 1.6rem; }

.rem-timeline { border-radius: var(--rem-radius); background: var(--rem-group); }
.rem-event-block { background: color-mix(in srgb, var(--row-color) 18%, var(--rem-group-solid)) !important; border-left: 3px solid var(--row-color) !important; color: var(--rem-ink) !important; }

#page-tasks .task-fab { background: var(--list-color, var(--rem-blue)) !important; }

/* --- Details & list sheets --- */
/* The sheets are opaque: the page behind them only ever read as smudges
   under the form. The sheet itself never scrolls; its body does. */
#task-detail-sheet.rem-sheet, #task-list-sheet.rem-sheet {
    max-height: min(92dvh, calc(100dvh - var(--sat) - 1rem));
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    background: #f4efe2 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.dark #task-detail-sheet.rem-sheet, .dark #task-list-sheet.rem-sheet { background: #000 !important; }
.rem-sheet-form { display: flex; flex-direction: column; min-height: 0; flex: 1; color: var(--rem-ink); }
.rem-sheet-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .6rem 1rem .5rem; }
.rem-sheet-header h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.rem-sheet-link { justify-self: start; min-height: 2.75rem; padding: 0 .25rem; color: var(--rem-blue); font-size: 1.02rem; }
.rem-sheet-link--strong { justify-self: end; font-weight: 700; }
.rem-sheet-link:disabled { opacity: .5; }
/* A column of groups that keep their natural height. As grid rows inside a
   height-limited scroller, the overflow-hidden groups were squeezed and
   clipped: Time, Reminder, Repeat, Reward and the add-subtask row vanished. */
.rem-sheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .25rem 1rem calc(1.25rem + var(--sab)); display: flex; flex-direction: column; gap: 1.1rem; }
.rem-sheet-scroll > * { flex: none; }
.rem-sheet-header { flex: none; }
/* The white group already frames these fields; a focus ring inside it read as a stray box. */
.rem-sheet .rem-title-input:focus-visible, .rem-sheet .rem-notes-input:focus-visible, .rem-sheet .rem-step--new input:focus-visible { outline: none !important; }
.rem-form-group { margin: 0; padding: 0; border: 0; min-width: 0; border-radius: var(--rem-radius); background: var(--rem-group-solid); overflow: hidden; }
.rem-form-legend { float: left; width: 100%; padding: .7rem .95rem .2rem; color: var(--rem-muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rem-title-input, .rem-notes-input { display: block; width: 100%; border: 0; outline: 0; background: transparent; color: var(--rem-ink); padding: .8rem .95rem; resize: none; }
.rem-title-input { font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid var(--rem-hairline); }
.rem-notes-input { font-size: .98rem; min-height: 3.2rem; }
.rem-form-row { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 3.1rem; padding: .4rem .95rem; margin: 0; border: 0; width: 100%; }
.rem-form-row + .rem-form-row::before, .rem-form-sub + .rem-form-row::before, #task-date-extras .rem-form-row::before { content: ''; position: absolute; top: 0; left: 3.55rem; right: 0; border-top: 1px solid var(--rem-hairline); }
.rem-form-row.is-disabled { opacity: .45; }
.rem-form-label { flex: 1; font-size: 1rem; }
.rem-form-sub { padding: 0 .95rem .65rem 3.55rem; }
.rem-inline-input, .rem-select, .rem-inline-text { border: 0; outline: 0; border-radius: .55rem; background: var(--rem-fill); color: var(--rem-ink); font-size: .95rem; padding: .45rem .6rem; min-height: 2.25rem; }
.rem-inline-input { width: 100%; }
.rem-select { max-width: 55%; color: var(--rem-blue); font-weight: 500; }
.rem-inline-text { width: 50%; text-align: right; background: transparent; padding-right: 0; }
.rem-time-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.rem-time-pair label { display: grid; gap: .25rem; font-size: .78rem; color: var(--rem-muted); font-weight: 600; }
.rem-time-pair em { font-weight: 400; }

.rem-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 3.1rem; height: 1.9rem; border-radius: 999px; background: var(--rem-fill); transition: background .2s; cursor: pointer; }
.rem-switch::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .22s cubic-bezier(.3, 1.3, .5, 1); }
.rem-switch:checked { background: var(--rem-green); }
.rem-switch:checked::after { transform: translateX(1.2rem); }
.rem-switch:focus-visible { outline: 2px solid var(--rem-blue); outline-offset: 2px; }
.rem-switch:disabled { cursor: default; }

.rem-segmented { display: inline-flex; padding: .15rem; border-radius: .6rem; background: var(--rem-fill); }
.rem-segmented label { position: relative; }
.rem-segmented input { position: absolute; opacity: 0; inset: 0; }
.rem-segmented span:not(.sr-only) { display: grid; place-items: center; min-width: 2.4rem; min-height: 2rem; padding: 0 .55rem; border-radius: .48rem; font-size: .85rem; font-weight: 700; color: var(--rem-muted); transition: background .15s, color .15s; }
.rem-segmented input:checked + span { background: var(--rem-group-solid); color: var(--rem-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.rem-segmented input:focus-visible + span { outline: 2px solid var(--rem-blue); }
.rem-priority-row .rem-form-label { flex: 1; }

.rem-steps { padding-bottom: .15rem; }
.rem-steps-heading { display: flex; align-items: baseline; justify-content: space-between; padding: .75rem .95rem .25rem; }
.rem-steps-heading h3 { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rem-muted); font-weight: 700; }
.rem-steps-heading span { color: var(--rem-muted); font-size: .8rem; }
.rem-step { display: flex; align-items: center; gap: .1rem; padding: 0 .5rem 0 .2rem; min-height: 2.75rem; --row-color: var(--rem-blue); }
.rem-check--small { width: 2.5rem; height: 2.5rem; }
.rem-check--small .rem-check-ring { width: 1.2rem; height: 1.2rem; }
.rem-check--small .rem-check-ring svg { width: .8rem; height: .8rem; }
.rem-step-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rem-step.is-done .rem-step-text { color: var(--rem-muted); text-decoration: line-through; }
.rem-step-delete, .rem-step-add { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--rem-faint); }
.rem-step-add { color: var(--rem-blue); }
.rem-step-delete svg, .rem-step-add svg { width: 1rem; height: 1rem; }
.rem-step--new input { flex: 1; min-width: 0; min-height: 2.6rem; border: 0; outline: 0; background: transparent; color: var(--rem-ink); font-size: 1rem; }

.rem-sheet-actions { display: grid; gap: .6rem; }
.rem-sheet-action { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 3rem; border-radius: var(--rem-radius); background: var(--rem-group-solid); color: var(--rem-blue); font-weight: 600; }
.rem-sheet-action:disabled { opacity: .45; }
.rem-sheet-action svg { width: 1.1rem; height: 1.1rem; }
.rem-sheet-action--danger { color: var(--rem-red); }

.rem-list-identity { display: grid; justify-items: center; gap: .9rem; padding: 1.2rem 1rem; }
.rem-list-preview { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--tile-color, var(--rem-blue)); color: #fff; box-shadow: 0 8px 22px -8px var(--tile-color, var(--rem-blue)); }
.rem-list-preview svg { width: 2.1rem; height: 2.1rem; stroke-width: 2.3; }
.rem-list-name-input { width: 100%; border: 0; outline: 0; text-align: center; border-radius: .75rem; background: var(--rem-fill); color: var(--tile-color, var(--rem-blue)); font-size: 1.3rem; font-weight: 700; padding: .65rem; }
.rem-swatches, .rem-icon-grid { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: .55rem; padding: .5rem .95rem 1rem; justify-items: center; }
.rem-swatch, .rem-icon-choice { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; cursor: pointer; }
.rem-swatch input, .rem-icon-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rem-swatch::before { content: ''; width: 2rem; height: 2rem; border-radius: 50%; background: var(--swatch); }
.rem-swatch:has(input:checked) { border-radius: 50%; box-shadow: 0 0 0 2.5px var(--swatch); }
.rem-icon-choice > span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--rem-fill); color: var(--rem-muted); }
.rem-icon-choice svg { width: 1.15rem; height: 1.15rem; }
.rem-icon-choice input:checked + span { background: var(--tile-color, var(--rem-blue)); color: #fff; }
.rem-swatch:has(input:focus-visible), .rem-icon-choice input:focus-visible + span { outline: 2px solid var(--rem-blue); outline-offset: 2px; }

@media (min-width: 640px) {
    .rem-smart-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rem-sheet { max-width: 34rem; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .rem-row-content, .rem-check-ring, .rem-check-ring svg, .rem-switch::after { transition: none; }
    .rem-row.is-checked .rem-check-ring, .rem-row.is-leaving { animation: none; }
}