/* ==========================================================================
Grocery List — Storybook Theme
palette: sage / kraft / tomato / carrot / leaf / paper / warm ink
type: Fraunces (display) + Nunito (body)
tactile: paper-grain noise, soft shadows, hand-drawn check
========================================================================== */
:root {
/* Core palette — warm earth tones lifted from the icon */
--sage: #7d9b6a;
--sage-deep: #5d7a4d;
--sage-soft: #c8d4b9;
--kraft: #c89876;
--kraft-deep: #9b6f4f;
--kraft-soft: #e9d3bc;
--tomato: #c84830;
--tomato-deep: #9b3422;
--carrot: #e08a3c;
--leaf: #3d6b3a;
--leaf-soft: #6f9a64;
/* Surfaces — cream paper */
--paper: #f4ecdc;
--paper-deep: #e9dec7;
--surface: #fbf6e9;
--surface-2: #efe6cf;
--border: #d9c9a7;
--border-soft: #e7dcc1;
/* Ink */
--ink: #2a2419;
--ink-2: #5b4f3a;
--ink-3: #8a7f66;
--accent: var(--leaf);
--accent-ink: #fbf6e9;
--danger: var(--tomato);
--shadow-soft: 0 1px 0 rgba(120, 95, 50, 0.06), 0 6px 18px rgba(120, 95, 50, 0.08);
--shadow-lift: 0 2px 0 rgba(120, 95, 50, 0.08), 0 14px 36px rgba(120, 95, 50, 0.16);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-top: env(safe-area-inset-top, 0px);
--radius-card: 14px;
--radius-pill: 999px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Inline paper-grain — subtle multiply noise, ~1KB SVG */
--paper-grain: url("data:image/svg+xml;utf8,");
}
@media (prefers-color-scheme: dark) {
:root {
--paper: #221d12;
--paper-deep: #1a160c;
--surface: #2c2618;
--surface-2: #3a311e;
--border: #4a3e26;
--border-soft: #382f1c;
--ink: #f1e7cf;
--ink-2: #c8b893;
--ink-3: #8e8064;
--sage-soft: #4f6443;
--kraft-soft: #5e4632;
--accent-ink: #15110a;
--shadow-soft: 0 1px 0 rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.45);
--shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.55);
}
}
/* ==========================================================================
Base
========================================================================== */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
color: var(--ink);
font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
font-weight: 500;
-webkit-font-smoothing: antialiased;
overscroll-behavior-y: none;
}
/* The whole backdrop lives on , because the root element's background is
the one CSS promises will cover the *entire canvas* rather than just its own
box. iOS in standalone mode hands the page a viewport that is short by
exactly safe-area-inset-top while leaving the page origin at the physical top
of the screen, so anything sized to the viewport — 100dvh, or
position: fixed; inset: 0 — stops that many pixels above the bottom of the
screen and leaves the home-indicator strip unpainted. Measured on an iPhone
16 Pro Max (430x932): 100dvh resolves to 873, and the bare strip is 59px.
Painting the canvas instead covers it whatever the viewport reports.
The two no-repeat glow layers are grown by the same inset so they reach the
bottom too; env() is 0 where there is no inset, so that is a no-op on
desktop and Android. TODO-30 — and see 1a4e0f2 / e26368a / 0a8763b, three
earlier fixes that all kept the paint on a viewport-sized element. */
html {
background-color: var(--paper);
background-image:
radial-gradient(ellipse at 50% -10%, rgba(125, 155, 106, 0.18), transparent 60%),
radial-gradient(ellipse at 110% 110%, rgba(200, 152, 118, 0.22), transparent 55%),
var(--paper-grain);
background-repeat: no-repeat, no-repeat, repeat;
background-size:
100% calc(100% + var(--safe-top)),
100% calc(100% + var(--safe-top)),
240px 240px;
background-blend-mode: normal, normal, multiply;
}
body {
min-height: 100dvh;
display: flex;
flex-direction: column;
}
main, header, .addbar { position: relative; z-index: 1; }
::selection { background: var(--carrot); color: var(--ink); }
/* ==========================================================================
Topbar
========================================================================== */
.topbar {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: calc(14px + var(--safe-top)) 18px 14px;
background: linear-gradient(180deg, var(--surface) 0%, color-mix(in oklab, var(--surface), var(--paper) 35%) 100%);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 var(--border-soft);
}
.topbar::after {
/* tomato underline accent */
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: -1px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--tomato) 30%, var(--tomato) 70%, transparent);
opacity: 0.55;
border-radius: 2px;
}
.topbar__title {
margin: 0;
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 10px;
color: var(--ink);
}
.topbar__logo {
width: 36px;
height: 36px;
display: block;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(120, 95, 50, 0.18));
}
.topbar__right {
display: flex;
align-items: center;
gap: 6px;
}
.live-pill {
font-size: 0.7rem;
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
background: var(--ink-3);
color: transparent;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink-3), transparent 80%);
transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.live-pill[data-state="open"] {
background: var(--leaf-soft);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--leaf-soft), transparent 80%);
}
.live-pill[data-state="connecting"] {
background: var(--carrot);
animation: pulse 1.4s var(--ease-soft) infinite;
}
.live-pill[data-state="closed"] {
background: var(--tomato);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--tomato), transparent 80%);
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.9); }
}
/* ==========================================================================
Buttons
========================================================================== */
.iconbtn {
appearance: none;
border: 1px solid transparent;
background: transparent;
color: var(--ink);
font-size: 1.05rem;
width: 44px;
height: 44px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.18s var(--ease-out), transform 0.12s var(--ease-out), color 0.18s var(--ease-out);
}
.iconbtn:hover { background: var(--surface-2); }
.iconbtn:active { transform: scale(0.94); }
.iconbtn:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 2px;
}
.iconbtn--lg { width: 50px; height: 50px; font-size: 1.3rem; }
.iconbtn:disabled { cursor: default; }
.iconbtn:disabled:hover { background: transparent; }
.iconbtn:disabled:active { transform: none; }
.iconbtn__img {
width: 22px;
height: 22px;
display: block;
object-fit: contain;
}
#signOutBtn .iconbtn__img { width: 26px; height: 26px; transform: translateY(1px); }
#cameraBtn .iconbtn__img { width: 28px; height: 28px; }
.iconbtn__svg {
width: 22px;
height: 22px;
display: block;
color: var(--ink-2);
}
.iconbtn.is-spinning .iconbtn__svg { animation: refresh-spin 0.6s var(--ease-out); }
@keyframes refresh-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.iconbtn__mask {
width: 24px;
height: 24px;
display: block;
background-color: var(--ink-2);
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
transition: background-color 0.18s var(--ease-out);
}
.iconbtn__mask--camera {
width: 32px;
height: 32px;
-webkit-mask-image: url("/icons/camera.png?v=2");
mask-image: url("/icons/camera.png?v=2");
}
#cameraBtn:hover .iconbtn__mask { background-color: var(--ink); }
.iconbtn--primary {
background: var(--leaf);
color: var(--accent-ink);
border-radius: 14px;
box-shadow:
var(--shadow-soft),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -2px 0 rgba(0, 0, 0, 0.20);
transition: transform 0.12s var(--ease-out), filter 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
/* Re-assert the fill: .iconbtn:hover above sets background to --surface-2 and
matches this element too, which left the primary button cream with near-white
glyph — about 1.06:1. The brightness lift was always the intended hover. */
.iconbtn--primary:hover { background: var(--leaf); filter: brightness(1.08); }
.iconbtn--primary:active {
transform: translateY(1px) scale(0.97);
box-shadow: var(--shadow-soft), inset 0 2px 4px rgba(0, 0, 0, 0.25);
}
.btn {
appearance: none;
font-family: inherit;
font-weight: 700;
border: 1px solid var(--border);
background: var(--surface);
color: var(--ink);
padding: 12px 18px;
border-radius: 12px;
font-size: 0.98rem;
cursor: pointer;
transition: background 0.18s var(--ease-out), transform 0.12s var(--ease-out), border-color 0.18s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { cursor: default; opacity: 0.65; }
.btn:disabled:active { transform: none; }
.btn:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 2px;
}
.btn--primary {
background: var(--leaf);
color: var(--accent-ink);
border-color: var(--leaf);
box-shadow: var(--shadow-soft);
}
.btn--primary:hover { filter: brightness(1.05); }
.btn--danger {
background: transparent;
color: var(--tomato);
border-color: color-mix(in oklab, var(--tomato), transparent 60%);
}
.btn--danger:hover { background: color-mix(in oklab, var(--tomato), transparent 90%); }
.btn--ghost {
background: transparent;
border-color: var(--border-soft);
color: var(--ink-2);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
/* ==========================================================================
Items list
========================================================================== */
main {
flex: 1;
padding: 14px 14px calc(84px + var(--safe-bottom));
container-type: inline-size;
}
.empty {
text-align: center;
color: var(--ink-2);
margin: 40px auto 0;
padding: 0 16px;
max-width: 320px;
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 1.05rem;
line-height: 1.5;
}
.items {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 720px;
display: grid;
gap: 4px;
}
.item {
display: grid;
grid-template-columns: 26px 36px minmax(0, 1fr) 44px 32px;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 4px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: 10px;
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
touch-action: pan-y;
--row-min-h: 44px;
min-height: var(--row-min-h);
transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), background 0.22s var(--ease-out);
}
.item--no-thumb {
grid-template-columns: 26px 36px minmax(0, 1fr) 32px;
}
.item--enter {
animation: item-enter 0.36s var(--ease-out) both;
}
@keyframes item-enter {
0% { opacity: 0; transform: translateY(8px) scale(0.98); }
60% { opacity: 1; transform: translateY(0) scale(1.015); }
100% { transform: scale(1); }
}
.item--leaving {
opacity: 0;
transform: translateX(-32px) scale(0.98);
}
.item--checked {
background: color-mix(in oklab, var(--surface), var(--sage-soft) 25%);
}
.item--checked .item__name,
.item--checked .item__qty {
color: var(--ink-3);
}
.item--checked .item__note {
opacity: 0.62;
}
.item--checked .item__name::after {
/* Hand-torn receipt strikethrough — drawn left-to-right with a slight wobble */
content: "";
position: absolute;
left: 0;
right: 0;
top: 52%;
height: 1.8px;
background: var(--ink-3);
border-radius: 2px;
transform: scaleX(0) rotate(-1.2deg);
transform-origin: left center;
animation: strike-on 0.6s var(--ease-out) forwards;
}
@keyframes strike-on {
0% { transform: scaleX(0) rotate(-1.2deg); }
60% { transform: scaleX(1.04) rotate(-1.6deg); }
100% { transform: scaleX(1) rotate(-1.2deg); }
}
/* Crumple + fade after the strike-through holds.
The frames carry an explicit max-height on purpose: the row's computed
max-height is `none`, which can't interpolate, so without one the row holds
full height for the whole animation and the rows below snap up in a single
frame when the node is finally removed. --row-h is set from the row's real
offsetHeight just before the class lands (see checkAndAutoRemove), so the
collapse starts from the height the row actually has; the fallback only
matters if that ever fails to run. */
.item--removing {
animation: item-crumple 0.5s var(--ease-out) forwards;
pointer-events: none;
}
@keyframes item-crumple {
0% { opacity: 1; transform: translateY(0) scale(1) skewX(0deg); max-height: var(--row-h, 240px); min-height: var(--row-min-h); }
55% { opacity: 0.65; transform: translateY(-4px) scale(0.96) skewX(-1.5deg); max-height: var(--row-h, 240px); min-height: var(--row-min-h); }
100% { opacity: 0; transform: translateY(-12px) scale(0.92) skewX(-2.5deg); max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
}
.item__check {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid var(--ink-3);
background: transparent;
margin-left: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--accent-ink);
transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out), transform 0.18s var(--ease-out);
flex-shrink: 0;
}
.item__check:hover { border-color: var(--leaf); }
.item__check:active { transform: scale(0.9); }
.item--checked .item__check {
background: var(--leaf);
border-color: var(--leaf);
}
.item__check svg {
width: 15px;
height: 15px;
stroke: var(--accent-ink);
stroke-width: 2.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
stroke-dasharray: 24;
stroke-dashoffset: 24;
transition: stroke-dashoffset 0.28s var(--ease-out);
}
.item--checked .item__check svg {
stroke-dashoffset: 0;
}
.item__photo {
appearance: none;
border: 0;
background: color-mix(in oklab, var(--kraft-soft), transparent 36%);
width: 42px;
height: 42px;
padding: 3px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: end;
cursor: zoom-in;
box-shadow: inset 0 0 0 1px rgba(120, 95, 50, 0.16);
transition: transform 0.16s var(--ease-out), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.item__photo:hover {
background: color-mix(in oklab, var(--kraft-soft), var(--surface) 24%);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--kraft-deep), transparent 55%);
}
.item__photo:active { transform: scale(0.94); }
.item__photo:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 2px;
}
.item--checked .item__photo { opacity: 0.58; }
.item__thumb {
width: 36px;
height: 36px;
border-radius: 9px;
background: var(--kraft-soft);
object-fit: cover;
display: block;
box-shadow: inset 0 0 0 1px rgba(120, 95, 50, 0.12);
pointer-events: none;
}
.item__body {
min-width: 0;
display: grid;
gap: 2px;
}
.item__name {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: 0.98rem;
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
display: inline-block;
max-width: 100%;
}
.item__qty {
color: var(--ink-2);
font-size: 0.78rem;
font-weight: 600;
margin-left: 5px;
}
.item__note {
appearance: none;
border: 0;
background: color-mix(in oklab, var(--kraft-soft), transparent 58%);
color: var(--ink-2);
width: min(100%, 36rem);
min-width: 0;
margin: 1px 0 0;
padding: 3px 7px 4px 6px;
border-radius: 8px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 5px;
text-align: left;
font: inherit;
font-size: 0.76rem;
line-height: 1.25;
cursor: pointer;
transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.item__note:hover {
background: color-mix(in oklab, var(--kraft-soft), var(--surface) 12%);
color: var(--ink);
}
.item__note:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 2px;
}
.item__note-icon {
color: inherit;
display: grid;
place-items: center;
margin-top: 2px;
transition: transform 0.18s var(--ease-out);
}
.item__note-icon svg {
width: 0.85rem;
height: 0.85rem;
fill: none;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.item__note--expanded .item__note-icon {
transform: rotate(180deg);
}
.item__note-text {
min-width: 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
white-space: normal;
}
.item__note--expanded .item__note-text {
-webkit-line-clamp: unset;
white-space: pre-wrap;
}
.item__by {
color: var(--ink-3);
font-size: 0.7rem;
margin-top: 0;
font-style: italic;
line-height: 1.2;
}
.item__menu {
color: var(--ink-3);
width: 32px;
height: 32px;
font-size: 1.35rem;
}
.item__drag {
appearance: none;
background: transparent;
border: none;
width: 26px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-3);
cursor: grab;
touch-action: none;
flex-shrink: 0;
border-radius: 6px;
transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.item__drag:hover { background: var(--surface-2); color: var(--ink-2); }
.item__drag:active { cursor: grabbing; }
.item__drag svg {
width: 16px;
height: 16px;
fill: currentColor;
pointer-events: none;
}
.item--checked .item__drag {
opacity: 0.25;
pointer-events: none;
}
.item--dragging {
opacity: 0.92;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
transform: scale(1.015);
z-index: 10;
transition: none;
cursor: grabbing;
}
.item--drop-target-above {
box-shadow: inset 0 2px 0 0 var(--leaf), var(--shadow-soft);
}
.item--drop-target-below {
box-shadow: inset 0 -2px 0 0 var(--leaf), var(--shadow-soft);
}
.item--flash {
animation: flash 1.1s var(--ease-out);
}
@keyframes flash {
0% { background: color-mix(in oklab, var(--surface), var(--leaf-soft) 40%); }
100% { background: var(--surface); }
}
/* ==========================================================================
Floating Add button (FAB)
========================================================================== */
.fab {
position: fixed;
right: calc(20px + env(safe-area-inset-right, 0px));
bottom: calc(12px + var(--safe-bottom));
z-index: 11;
width: 60px;
height: 60px;
border-radius: 50%;
background: transparent;
border: 2px solid var(--leaf);
color: var(--leaf);
box-shadow: var(--shadow-soft);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-weight: 700;
font-size: 1.75rem;
line-height: 1;
transition: transform 0.32s var(--ease-spring), opacity 0.18s var(--ease-out), background 0.18s var(--ease-out);
animation: fab-float-in 0.42s var(--ease-spring) both;
}
.fab:hover { filter: brightness(1.04); }
.fab:active { transform: scale(0.92); }
.fab:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 3px;
}
.fab__plus {
display: block;
width: 28px;
height: 28px;
transition: transform 0.32s var(--ease-spring);
}
.fab--hidden {
opacity: 0;
transform: scale(0.4) rotate(45deg);
pointer-events: none;
}
@keyframes fab-float-in {
0% { opacity: 0; transform: scale(0.6) translateY(20px); }
60% { opacity: 1; transform: scale(1.06) translateY(-2px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Idle gentle pulse when list is empty for a beat */
.fab--idle-pulse {
animation: fab-pulse 2.4s var(--ease-soft) infinite;
}
@keyframes fab-pulse {
0%, 100% { box-shadow: var(--shadow-lift), 0 0 0 0 color-mix(in oklab, var(--tomato), transparent 60%); }
50% { box-shadow: var(--shadow-lift), 0 0 0 14px color-mix(in oklab, var(--tomato), transparent 95%); }
}
/* Pantry FAB — mirrors the + FAB on the opposite side, kraft palette */
.fab--pantry {
right: auto;
left: calc(20px + env(safe-area-inset-left, 0px));
background: transparent;
border: 2px solid var(--kraft-deep);
color: var(--kraft-deep);
}
.fab--pantry:hover { filter: brightness(1.04); }
.fab--pantry:focus-visible {
outline: 2px solid var(--kraft-deep);
outline-offset: 3px;
}
.fab__pantry-icon {
width: 28px;
height: 28px;
display: block;
background-color: var(--kraft-deep);
-webkit-mask: url("/icons/pantry.png?v=3") center / contain no-repeat;
mask: url("/icons/pantry.png?v=3") center / contain no-repeat;
}
/* ==========================================================================
Add bar (expands from FAB)
========================================================================== */
.addbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 12;
background: linear-gradient(180deg, color-mix(in oklab, var(--surface), var(--kraft-soft) 25%), var(--surface));
background-image: var(--paper-grain), linear-gradient(180deg, color-mix(in oklab, var(--surface), var(--kraft-soft) 25%), var(--surface));
background-size: 240px 240px, auto;
background-blend-mode: multiply, normal;
border-top: 1px solid var(--border);
border-radius: 22px 22px 0 0;
padding: 6px 14px calc(8px + var(--safe-bottom));
box-shadow: 0 -10px 32px rgba(120, 95, 50, 0.18);
transform: translateY(0);
opacity: 1;
transition: transform 0.34s var(--ease-spring), opacity 0.2s var(--ease-out);
}
.addbar--collapsed {
transform: translateY(110%);
opacity: 0;
pointer-events: none;
}
.addbar__handle {
appearance: none;
display: block;
width: 44px;
height: 4px;
border-radius: 4px;
background: var(--border);
border: 0;
margin: 4px auto 8px;
cursor: grab;
padding: 0;
touch-action: none;
}
.addbar__handle:active { cursor: grabbing; }
.addbar__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.addbar__close {
width: 36px;
height: 36px;
font-size: 1rem;
color: var(--ink-2);
}
.addbar__row {
display: flex;
align-items: center;
gap: 8px;
}
.addbar input[type="text"] {
flex: 1;
height: 50px;
border-radius: 14px;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--ink);
padding: 0 16px;
font-size: 1.02rem;
font-family: inherit;
font-weight: 600;
outline: none;
transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.addbar input[type="text"]::placeholder {
color: var(--ink-3);
font-weight: 500;
font-style: italic;
}
.addbar input[type="text"]:focus {
border-color: var(--leaf);
background: var(--paper);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--leaf), transparent 86%);
}
.addbar input[type="text"].is-flashing {
animation: input-flash 0.7s var(--ease-out);
}
@keyframes input-flash {
0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--leaf), transparent 86%); }
40% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--carrot), transparent 70%); }
}
/* ==========================================================================
Pantry pill (replaces chip strip)
========================================================================== */
.pantry-pill {
appearance: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: inherit;
font-weight: 700;
font-size: 0.92rem;
color: var(--ink);
background: linear-gradient(180deg, var(--kraft-soft), color-mix(in oklab, var(--kraft-soft), var(--paper-deep) 40%));
border: 1.5px solid color-mix(in oklab, var(--kraft), var(--paper) 40%);
border-radius: var(--radius-pill);
padding: 8px 16px 8px 12px;
cursor: pointer;
box-shadow: var(--shadow-soft);
transition: transform 0.14s var(--ease-out), background 0.18s var(--ease-out);
}
.pantry-pill:hover { background: linear-gradient(180deg, var(--kraft-soft), var(--paper-deep)); }
.pantry-pill:active { transform: scale(0.97); }
.pantry-pill:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 2px;
}
.pantry-pill:has(.pantry-pill__count:not([hidden])) { padding-right: 6px; }
.pantry-pill__icon {
width: 22px;
height: 22px;
display: block;
background-color: var(--kraft-deep);
-webkit-mask: url("/icons/pantry.png?v=3") center / contain no-repeat;
mask: url("/icons/pantry.png?v=3") center / contain no-repeat;
}
.pantry-pill__count {
background: var(--ink-2);
color: var(--surface);
border-radius: var(--radius-pill);
padding: 3px 9px;
min-width: 22px;
text-align: center;
font-size: 0.78rem;
margin-left: 6px;
font-weight: 800;
letter-spacing: 0.02em;
}
/* ==========================================================================
Inline suggestions dropdown
========================================================================== */
.suggestions {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
margin-bottom: 10px;
max-height: 38vh;
overflow-y: auto;
box-shadow: var(--shadow-lift);
}
.suggestion {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid var(--border-soft);
transition: background 0.15s var(--ease-out);
position: relative;
user-select: none;
}
.suggestion:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
.suggestion:hover { background: var(--surface-2); }
}
.suggestion img {
width: 32px;
height: 32px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.suggestion__name {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.suggestion__qty {
color: var(--ink-3);
font-size: 0.82rem;
margin-left: auto;
}
.suggestion__hide {
opacity: 0;
background: transparent;
border: 0;
color: var(--ink-3);
font-size: 0.95rem;
width: 28px;
height: 28px;
border-radius: 8px;
cursor: pointer;
transition: opacity 0.15s var(--ease-out), background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.suggestion:focus-within .suggestion__hide { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.suggestion:hover .suggestion__hide { opacity: 1; }
.suggestion__hide:hover { background: color-mix(in oklab, var(--tomato), transparent 88%); color: var(--tomato); }
}
/* ==========================================================================
Sheets (edit / menu / pantry)
========================================================================== */
.sheet {
position: fixed;
inset: 0;
z-index: 20;
display: flex;
align-items: flex-end;
justify-content: center;
}
.sheet[hidden] { display: none; }
.sheet__backdrop {
position: absolute;
inset: 0;
background: rgba(30, 22, 10, 0.42);
animation: backdrop-in 0.24s var(--ease-out);
}
@keyframes backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
.sheet__panel {
position: relative;
width: 100%;
max-width: 640px;
max-height: 92vh;
overflow-y: auto;
background: var(--surface);
background-image: var(--paper-grain);
background-size: 240px 240px;
background-blend-mode: multiply;
border-radius: 22px 22px 0 0;
padding: 18px 18px calc(18px + var(--safe-bottom));
box-shadow: var(--shadow-lift);
border-top: 1px solid var(--border);
animation: sheet-up 0.34s var(--ease-out);
}
.sheet__panel--small { max-width: 460px; }
.sheet__panel--tall { max-height: 88vh; min-height: 70vh; }
@keyframes sheet-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.sheet__handle {
width: 40px;
height: 4px;
background: var(--border);
border-radius: 4px;
margin: -6px auto 12px;
position: relative;
cursor: grab;
touch-action: none;
}
.sheet__handle::before {
content: '';
position: absolute;
inset: -14px -28px;
}
.sheet__handle:active { cursor: grabbing; }
.sheet__header { touch-action: none; }
.sheet__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.sheet__header h2 {
margin: 0;
font-family: 'Fraunces', Georgia, serif;
font-size: 1.3rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
display: flex;
align-items: center;
gap: 10px;
}
.sheet__header__icon {
width: 30px;
height: 30px;
display: block;
background-color: var(--kraft-deep);
-webkit-mask: url("/icons/pantry.png?v=3") center / contain no-repeat;
mask: url("/icons/pantry.png?v=3") center / contain no-repeat;
}
.sheet__form { display: grid; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span {
font-size: 0.78rem;
color: var(--ink-2);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.field input, .field textarea {
border: 1.5px solid var(--border);
border-radius: 12px;
background: var(--paper);
color: var(--ink);
padding: 12px 14px;
font-size: 1rem;
font-family: inherit;
font-weight: 500;
outline: none;
transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.field input:focus, .field textarea:focus {
border-color: var(--leaf);
background: var(--surface);
}
.photo-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.photo-row__preview {
appearance: none;
position: relative;
border: 0;
background: color-mix(in oklab, var(--kraft-soft), transparent 30%);
width: 78px;
height: 78px;
padding: 3px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: zoom-in;
box-shadow: inset 0 0 0 1px rgba(120, 95, 50, 0.16);
transition: transform 0.16s var(--ease-out), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.photo-row__preview:hover {
background: color-mix(in oklab, var(--kraft-soft), var(--surface) 24%);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--kraft-deep), transparent 55%);
}
.photo-row__preview:active { transform: scale(0.96); }
.photo-row__preview:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 2px;
}
.photo-row__preview[hidden] { display: none; }
.photo-row__preview img {
width: 72px; height: 72px;
object-fit: cover;
border-radius: 12px;
box-shadow: inset 0 0 0 1px rgba(120, 95, 50, 0.12);
pointer-events: none;
}
/* ==========================================================================
Photo upload state
Shared by the add bar's pending chip and the edit sheet's preview.
The spinners are decorative — the reduced-motion block near the end of this
file hides them, leaving the "Uploading…" wording and the disabled buttons to
carry the state on their own.
========================================================================== */
.pending-photo__spinner,
.photo-row__spinner,
.iconbtn--busy::after {
position: absolute;
border-radius: 50%;
border: 2px solid color-mix(in oklab, var(--ink-2), transparent 70%);
border-top-color: var(--leaf);
animation: refresh-spin 0.7s linear infinite;
}
.pending-photo__spinner,
.photo-row__spinner { display: none; }
/* --- Edit sheet preview --- */
.photo-row__preview--busy { cursor: default; }
.photo-row__preview--busy img { opacity: 0.3; }
.photo-row__preview--busy .photo-row__spinner {
display: block;
width: 28px;
height: 28px;
border-width: 2.5px;
}
/* --- Add bar pending chip --- */
.pending-photo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
padding: 6px;
border-radius: 14px;
background: color-mix(in oklab, var(--kraft-soft), transparent 45%);
box-shadow: inset 0 0 0 1px rgba(120, 95, 50, 0.14);
}
.pending-photo[hidden] { display: none; }
.pending-photo__frame {
appearance: none;
border: 0;
padding: 0;
position: relative;
flex: none;
width: 38px;
height: 38px;
border-radius: 11px;
overflow: hidden;
background: color-mix(in oklab, var(--kraft-soft), var(--surface) 45%);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: zoom-in;
transition: transform 0.16s var(--ease-out);
}
.pending-photo__frame:active { transform: scale(0.95); }
.pending-photo__frame:disabled { cursor: default; }
.pending-photo__frame:disabled:active { transform: none; }
.pending-photo__frame:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 2px;
}
.pending-photo__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* No src means nothing to show — and a src-less ![]()
paints a broken glyph in
some browsers. True while uploading, and for an item that has no photo yet. */
.pending-photo__thumb:not([src]),
.photo-row__preview img:not([src]) { visibility: hidden; }
.pending-photo--busy .pending-photo__spinner {
display: block;
width: 20px;
height: 20px;
}
.pending-photo__label {
flex: 1;
min-width: 0;
font-size: 0.9rem;
font-weight: 700;
color: var(--ink-2);
}
.pending-photo__remove {
appearance: none;
border: 0;
background: transparent;
/* --ink-3 measures 3.37:1 here, under the 4.5 floor. */
color: var(--ink-2);
font-size: 0.95rem;
/* 44px to match .iconbtn, which is this project's touch-target convention. */
width: 44px;
height: 44px;
flex: none;
border-radius: 12px;
cursor: pointer;
transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.pending-photo__remove[hidden] { display: none; }
.pending-photo__remove:hover { background: var(--surface-2); color: var(--ink); }
.pending-photo__remove:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 2px;
}
/* --- Camera button --- */
.iconbtn--busy { position: relative; }
.iconbtn--busy .iconbtn__mask { opacity: 0.25; }
.iconbtn--busy::after { content: ""; width: 22px; height: 22px; }
.sheet__actions {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 8px;
}
.sheet__actions--stack {
flex-direction: column;
align-items: stretch;
}
.sheet__actions--row-end {
justify-content: flex-end;
}
/* ==========================================================================
Pantry sheet
========================================================================== */
.pantry__search {
display: block;
width: 100%;
border: 1.5px solid var(--border);
border-radius: 12px;
background: var(--paper);
color: var(--ink);
padding: 12px 14px;
font-size: 1rem;
font-family: inherit;
margin-bottom: 14px;
outline: none;
transition: border-color 0.18s var(--ease-out);
}
.pantry__search:focus { border-color: var(--leaf); }
.pantry__section {
margin-bottom: 18px;
animation: stagger 0.32s var(--ease-out) both;
}
.pantry__section:nth-child(2) { animation-delay: 50ms; }
.pantry__section:nth-child(3) { animation-delay: 100ms; }
.pantry__section:nth-child(4) { animation-delay: 150ms; }
@keyframes stagger {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.pantry__heading {
display: flex;
align-items: baseline;
justify-content: space-between;
font-family: 'Fraunces', Georgia, serif;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-2);
margin: 0 0 10px;
}
.pantry__heading small {
font-family: 'Nunito', sans-serif;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
color: var(--ink-3);
font-size: 0.78rem;
}
.pantry__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 4px;
position: relative;
}
@property --swipe-reveal {
syntax: '';
inherits: true;
initial-value: 0px;
}
.pantry__row {
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: 12px;
cursor: pointer;
transition: background 0.15s var(--ease-out), transform 0.22s var(--ease-out), opacity 0.22s var(--ease-out), border-color 0.18s var(--ease-out);
position: relative;
overflow: hidden;
touch-action: pan-y;
user-select: none;
}
@keyframes pantry-swipe-hint {
0% { transform: translateX(0); --swipe-reveal: 0px; }
35% { transform: translateX(-60px); --swipe-reveal: 60px; }
62% { transform: translateX(-60px); --swipe-reveal: 60px; }
100% { transform: translateX(0); --swipe-reveal: 0px; }
}
.pantry__row--hint {
/* One-time discovery cue: peek the bin to teach the swipe gesture. */
animation: pantry-swipe-hint 1850ms var(--ease-out) 700ms 1;
}
.pantry__hint-caption {
position: absolute;
right: 18px;
top: -2px;
transform: translate(8px, -100%) rotate(-1.2deg);
background: var(--leaf);
color: var(--accent-ink);
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 0.88rem;
letter-spacing: 0.01em;
padding: 7px 12px 8px;
border-radius: 10px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
z-index: 5;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08), 0 8px 22px rgba(61, 107, 58, 0.32);
animation: pantry-swipe-hint-caption 2250ms var(--ease-out) 450ms 1;
}
.pantry__hint-caption::after {
/* Downward tip pointing at the row's right edge where the bin emerges. */
content: "";
position: absolute;
bottom: -4px;
right: 18px;
width: 10px;
height: 10px;
background: var(--leaf);
transform: rotate(45deg);
border-radius: 2px;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.04);
}
@keyframes pantry-swipe-hint-caption {
0% { opacity: 0; transform: translate(8px, calc(-100% + 6px)) rotate(-1.2deg); }
14% { opacity: 1; transform: translate(0, -100%) rotate(-1.2deg); }
82% { opacity: 1; transform: translate(0, -100%) rotate(-1.2deg); }
100% { opacity: 0; transform: translate(0, calc(-100% + 4px)) rotate(-1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
.pantry__row--hint { animation: none; }
.pantry__hint-caption { display: none; }
}
.pantry__row::before {
/* Red delete reveal underneath, becomes visible on swipe */
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: var(--swipe-reveal, 0);
background: var(--tomato);
pointer-events: none;
transition: width 0.18s var(--ease-out);
}
.pantry__row::after {
/* Wireframe bin icon, masked so it inherits the cream foreground tone.
Centers within the swipe-reveal strip; opacity gates it until the
reveal is wide enough to contain the glyph. */
content: "";
position: absolute;
top: 50%;
right: calc((var(--swipe-reveal, 0px) - 22px) / 2);
width: 22px;
height: 22px;
transform: translateY(-50%);
background-color: var(--accent-ink);
-webkit-mask: url("/icons/pantrybin.png?v=1") center / contain no-repeat;
mask: url("/icons/pantrybin.png?v=1") center / contain no-repeat;
opacity: clamp(0, calc((var(--swipe-reveal, 0px) - 22px) / 30px), 1);
pointer-events: none;
transition: right 0.18s var(--ease-out), opacity 0.18s var(--ease-out);
}
.pantry__row:hover { background: var(--surface-2); }
.pantry__row--leaving { opacity: 0; transform: translateX(-110%) scale(0.98); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; }
.pantry__row--has-thumb {
grid-template-columns: 32px 1fr auto auto auto;
}
.pantry__edit {
appearance: none;
background: transparent;
border: 0;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
line-height: 1;
color: var(--ink-3);
border-radius: 8px;
cursor: pointer;
transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
margin: -4px -6px -4px 0;
}
.pantry__edit:hover { background: var(--surface-2); color: var(--ink); }
.pantry__edit:focus-visible { outline: 2px solid var(--leaf); outline-offset: 1px; }
.pantry__row__thumb {
width: 32px;
height: 32px;
border-radius: 8px;
object-fit: cover;
display: block;
}
.pantry__name {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--ink);
}
.pantry__qty {
font-size: 0.78rem;
font-weight: 700;
color: var(--ink-2);
background: var(--surface-2);
border-radius: var(--radius-pill);
padding: 2px 9px;
white-space: nowrap;
}
.pantry__when {
color: var(--ink-3);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}
.pantry__count {
font-size: 0.72rem;
font-weight: 800;
color: var(--ink-3);
margin-left: 4px;
}
.pantry__empty {
text-align: center;
color: var(--ink-3);
padding: 28px 8px;
font-style: italic;
font-family: 'Fraunces', Georgia, serif;
}
/* ==========================================================================
Image viewer
========================================================================== */
.image-viewer {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
padding: calc(8px + var(--safe-top)) 8px calc(8px + var(--safe-bottom));
}
.image-viewer[hidden] { display: none; }
.image-viewer__backdrop {
position: absolute;
inset: 0;
border: 0;
padding: 0;
background:
radial-gradient(ellipse at 50% 18%, rgba(200, 152, 118, 0.18), transparent 46%),
color-mix(in oklab, var(--ink), transparent 14%);
cursor: zoom-out;
}
.image-viewer__panel {
position: relative;
z-index: 1;
margin: 0;
width: fit-content;
max-width: calc(100vw - 16px);
max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
display: grid;
gap: 8px;
justify-items: center;
animation: image-viewer-in 0.22s var(--ease-out) both;
}
@keyframes image-viewer-in {
from { opacity: 0; transform: translateY(10px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.image-viewer__img {
width: auto;
height: auto;
max-width: calc(100vw - 16px);
max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 72px);
object-fit: contain;
display: block;
border-radius: 18px;
background: var(--surface);
border: 1px solid color-mix(in oklab, var(--border), transparent 12%);
box-shadow: var(--shadow-lift);
}
.image-viewer__caption {
justify-self: center;
max-width: calc(100vw - 32px);
padding: 7px 12px;
border-radius: var(--radius-pill);
background: color-mix(in oklab, var(--surface), transparent 8%);
color: var(--ink-2);
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
line-height: 1.25;
text-align: center;
box-shadow: var(--shadow-soft);
}
.image-viewer__close {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
background: color-mix(in oklab, var(--surface), transparent 6%);
box-shadow: var(--shadow-soft);
}
body.image-viewer-open { overflow: hidden; }
/* ==========================================================================
Toast
========================================================================== */
.toast {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
bottom: calc(110px + var(--safe-bottom));
z-index: 30;
background: color-mix(in oklab, var(--ink), transparent 4%);
color: var(--paper);
padding: 12px 18px;
border-radius: var(--radius-pill);
font-size: 0.92rem;
font-weight: 600;
box-shadow: var(--shadow-lift);
display: flex;
align-items: center;
gap: 14px;
max-width: 92vw;
animation: toast-in 0.36s var(--ease-spring);
}
.toast[hidden] { display: none; }
.toast--leaving {
animation: toast-out 0.22s var(--ease-out) forwards;
}
@keyframes toast-in {
0% { opacity: 0; transform: translate(-50%, 24px) scale(0.92); }
60% { opacity: 1; transform: translate(-50%, -3px) scale(1.02); }
100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes toast-out {
to { opacity: 0; transform: translate(-50%, 16px) scale(0.96); }
}
.toast button {
appearance: none;
background: transparent;
border: 0;
color: var(--carrot);
font-weight: 800;
font-family: inherit;
cursor: pointer;
font-size: 0.92rem;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 8px;
transition: background 0.15s var(--ease-out);
}
.toast button:hover { background: rgba(255, 255, 255, 0.08); }
/* ==========================================================================
Confirm dialog (centered modal)
========================================================================== */
.confirm {
margin: auto 16px;
border-radius: 18px;
padding: 22px 22px 18px;
max-width: 360px;
animation: confirm-in 0.34s var(--ease-spring);
}
@keyframes confirm-in {
0% { opacity: 0; transform: scale(0.88) translateY(8px); }
60% { opacity: 1; transform: scale(1.02) translateY(0); }
100% { opacity: 1; transform: scale(1); }
}
.confirm__title {
margin: 0 0 8px;
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: 1.2rem;
color: var(--ink);
}
.confirm__body {
margin: 0 0 18px;
color: var(--ink-2);
font-size: 0.95rem;
line-height: 1.4;
}
#confirmDialog { align-items: center; }
#confirmDialog .sheet__panel { animation: none; }
/* ==========================================================================
Login page
========================================================================== */
.login-page main.login {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
padding: 32px;
text-align: center;
}
.login__brand h1 {
margin: 8px 0 4px;
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem);
letter-spacing: -0.02em;
}
.login__brand p {
color: var(--ink-2);
margin: 0;
font-style: italic;
}
.login__bag {
width: 160px;
height: 160px;
display: block;
margin: 0 auto 4px;
filter: drop-shadow(0 4px 12px rgba(120, 95, 50, 0.18));
}
.login__err {
color: var(--tomato);
font-size: 0.92rem;
font-weight: 600;
}
/* ==========================================================================
Container queries — desktop / tablet adapt
========================================================================== */
@container (min-width: 720px) {
main { padding: 22px 22px calc(110px + var(--safe-bottom)); }
.item { padding: 8px 14px 8px 8px; gap: 14px; }
.item__name { font-size: 1.05rem; }
}
/* ==========================================================================
Reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.item--enter { animation: none; }
/* A spinner frozen mid-rotation reads as broken, so hide it outright. The
dimmed thumbnail and camera icon stay — they are static, so they still read
as "busy" alongside the "Uploading…" label and the disabled buttons.
Specificity has to match the .--busy rules that turn these on. */
.pending-photo--busy .pending-photo__spinner,
.photo-row__preview--busy .photo-row__spinner,
.iconbtn--busy::after { display: none; }
}