/* The generic app shell: frame, top bar, sheets and the panel outlet, page
chrome, the phone shell and its pilots. index.html loads it right after
tokens.css (its own — a div rather than a button so no global
button rule can reshape the circle. The 6px sits on top of .app-topbar's
own flex gap (ds.css) and widens the bell↔avatar gap a little past the
switcher↔bell gap on desktop; zeroed below 960px so the switcher, the
bell and the avatar all read as the same uniform gap on a phone. */
.et-appbar-avatar { margin-left: 6px; }
.et-appbar-avatar-circle {
width: 38px;
height: 38px;
border-radius: 50%;
/* Follows the palette via the shared CTA token. This used to be its own
plum literal — a lighter three-stop ramp than the CTA's — which meant the
header disc stayed plum while the buttons beside it changed color. The
disc is not a person's EtAvatar (those tones are per-user identity and
deliberately palette-independent); it is header chrome, so it tracks the
chrome. Owner decision 2026-09-07: reuse the CTA gradient for now rather
than mint a lighter per-palette variant. */
background: var(--et-cta-gradient);
color: var(--et-cta-ink);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem; /* 16px */
letter-spacing: -0.01em;
text-transform: uppercase;
cursor: pointer;
box-shadow: var(--et-avatar-ring);
transition: filter 0.12s ease, transform 0.12s ease;
position: relative;
overflow: hidden;
}
/* Uploaded profile picture overlay — mirrors .et-avatar-img (ds.css); the
initial underneath stays as the fallback while it loads / on error. */
.et-appbar-avatar-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.et-appbar-avatar-circle:hover { filter: brightness(1.06); }
.et-appbar-avatar-circle:active { transform: scale(0.96); }
/* Store-link pill (StoreLinkPill.razor) — "App letöltése". The JS
platform check (etStore.platform, app-init.js) keeps it out of the
installed PWA, the native shell and desktop browsers; the >=960px block
below hides it on wide viewports too (an Android tablet in landscape gets
the full desktop chrome, and the ScreenDumps harness answers 'android'
for every dump — the gate is what keeps the desktop dumps honest). Same
hover treatment as .et-group-switcher for a consistent pill vocabulary in
the header. */
.et-appbar-store {
display: inline-flex;
align-items: center;
border: 1.5px solid transparent;
border-radius: 999px;
background: var(--et-color-surface-2);
padding: 8px 14px;
/* The pill is an (store listing) or a (coming-soon toast) —
`font: inherit` before the font-* overrides normalizes the button to
the anchor's metrics, same trick as .et-group-switcher. */
font: inherit;
font-weight: 700;
font-size: 0.8125rem; /* 13px */
color: var(--et-color-ink);
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s ease;
}
.et-appbar-store:hover {
border-color: var(--et-color-border-strong);
}
/* Phone chrome (< md). What used to be four MudHidden gates is these few
declarations: brand tile only, group pill kept (the canvas requires it —
it is the only group affordance left since BottomNav went), no header CTA,
no dev chip. The bell and the avatar stay at every width. */
@media (max-width: 959.98px) {
.app-topbar .et-topbar-name,
.app-topbar .app-topbar-cta,
.app-topbar .et-appbar-dev { display: none; }
/* The group-switcher label is hidden on phones altogether (its old 40vw
ellipsis clamp went with it) — see the switcher's own phone block
in app.css ("Compact trigger"). */
/* Bell↔avatar gap loses its extra 6px below 960px so switcher, bell and
avatar sit at the topbar's uniform flex gap ("azonos margók") — see
.et-appbar-avatar above. */
.app-topbar .et-appbar-avatar { margin-left: 0; }
}
/* Desktop order-restore (>=960px). MainLayout emits the bell and the avatar
directly after GroupSwitcher now (so a phone header reads switcher, bell,
avatar at one uniform gap — see the max-width block above), which would
otherwise put them ahead of the "+ Új költség" CTA in source order on a
wide screen too. `order` repaints the desktop row back to its old visual
sequence — brand | switcher pill … CTA, store pill, bell, avatar — while
.et-topbar-right's own margin-left:auto still pushes it (and everything
ordered after it) to the trailing edge. */
@media (min-width: 960px) {
.app-topbar .et-topbar-right { order: 1; }
.app-topbar .et-notif-dropdown { order: 2; }
.app-topbar .et-appbar-avatar { order: 3; }
/* Phone-only affordance — see the .et-appbar-store comment above. */
.app-topbar .et-appbar-store { display: none; }
}
/* Profile menu section label ("Váltás másik felhasználóra"). Outside the
desktop frame query on purpose — the EtDropdown morphs into a bottom
sheet on a phone and the label goes with it. The DS GroupMenu vocabulary
has rows and dividers but no subheader. */
.et-profile-menu-section {
padding: 8px 12px 4px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--et-color-ink-3);
}
/* Last-resort error notice (shown by Blazor when an exception escapes the
in-app ErrorBoundary). Rendered as a rounded, inset floating card rather than
a harsh full-width system bar so it reads as friendly and is mobile-tidy. */
#blazor-error-ui {
background: #b32424;
color: var(--et-cta-ink);
bottom: 16px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
display: none;
padding: 0.75rem 2.25rem 0.75rem 1rem;
position: fixed;
width: calc(100% - 32px);
max-width: 460px;
border-radius: 12px;
font-size: 0.9rem;
line-height: 1.35;
z-index: 1300;
}
#blazor-error-ui .blazor-error-text { display: block; margin-bottom: 0.4rem; }
#blazor-error-ui .reload {
color: var(--et-cta-ink);
font-weight: 600;
text-decoration: underline;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.6rem;
top: 0.5rem;
}
/* Boot splash — one block styles BOTH the static #kk-boot-splash in
index.html and the Blazor-side BootSplash component (identical markup), so
the static→Blazor handoff is pixel-identical. z-index sits above the app
chrome (topbar 1102) but below #blazor-error-ui (1300): a boot failure
must surface over the splash. Colors come from theme tokens, which resolve
correctly by first paint either way: pre-paint-theme.js has stamped
[data-theme]/[data-palette] for a user with stored preferences, and an
unstamped root already resolves to the defaults (light plum). */
.kk-boot-splash {
position: fixed;
inset: 0;
z-index: 1250;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
background: var(--et-color-bg, #FAFAF7);
}
/* The class's display:flex above beats the UA stylesheet's [hidden] rule —
restate it explicitly or the hidden attribute silently stops working. */
.kk-boot-splash[hidden] { display: none; }
.kk-boot-splash-logo {
width: 64px;
height: 64px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 24px;
letter-spacing: 0.02em;
color: var(--et-cta-ink);
background: var(--et-color-accent, #7A4E7A);
animation: kk-splash-pulse 1.6s ease-in-out infinite;
}
.kk-boot-splash-dots { display: flex; gap: 8px; }
.kk-boot-splash-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--et-color-accent, #7A4E7A);
opacity: 0.35;
animation: kk-splash-dot 1.2s ease-in-out infinite;
}
.kk-boot-splash-dots span:nth-child(2) { animation-delay: 0.15s; }
.kk-boot-splash-dots span:nth-child(3) { animation-delay: 0.3s; }
/* Escape hatch for a wedged boot/auth leg: invisible for the first ~12s,
then fades in. Pure CSS (animation-delay) — no JS timer to leak across
the static/Blazor splash handoff. */
.kk-boot-splash-reload {
position: absolute;
bottom: 48px;
font-size: 0.875rem;
font-weight: 600;
color: var(--et-color-accent, #7A4E7A);
text-decoration: underline;
opacity: 0;
animation: kk-splash-reveal 0.4s ease 12s forwards;
}
@keyframes kk-splash-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
@keyframes kk-splash-dot {
0%, 100% { opacity: 0.35; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-3px); }
}
@keyframes kk-splash-reveal {
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.kk-boot-splash-logo { animation: none; }
.kk-boot-splash-dots span { animation: none; opacity: 0.7; }
/* The reload reveal stays: it is a one-shot opacity fade, and hiding the
escape hatch would trade motion comfort for a dead end. */
}
.text-center { text-align: center; }
/* The two spacing utilities that survived the MudBlazor removal. They used to
come from MudBlazor.min.css (4 = 16px on its 4px scale); only these two
still have call sites (EtSkeleton stacks, .nac-wrap), so they are declared
here rather than reviving a whole utility layer. */
.mt-4 { margin-top: var(--et-space-4); }
.mb-4 { margin-bottom: var(--et-space-4); }
.bordered-row {
border-bottom: 1px solid var(--et-color-border);
}
.bordered-row:last-child {
border-bottom: none;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--et-color-accent);
color: var(--et-cta-ink);
padding: 8px;
z-index: 100;
}
.skip-link:focus { top: 0; }
/* ──────────── Aesthetic baseline ──────────── */
/* Lowercase mono status chip — applied via class on chip span */
.et-status-chip {
display: inline-flex;
align-items: center;
padding: 2px 10px;
font-family: var(--et-font-mono);
font-size: 0.6875rem;
font-weight: 500;
line-height: 0.875rem;
letter-spacing: 0.2px;
text-transform: lowercase;
border-radius: var(--et-radius-pill);
white-space: nowrap;
}
/* Main content default padding. No top padding: the header is in flow
(sticky) at every width now, so there is nothing to clear. The value used
to be --et-appbar-height, which cleared the fixed MudAppBar on a phone and
was cancelled with !important on desktop. */
/* `position: relative` is load-bearing for the pull-to-refresh gesture, which
offsets this element with `top` (etPullRefresh in app-init.js) rather than
`transform`. A transformed ancestor becomes the containing block for its
`position: fixed` descendants, and the pages render their .et-fab INSIDE
this element — so a transform here detaches the "Új költség" pill from the
viewport and drops it to the bottom edge of a box that is min-height: 100vh
BELOW a sticky header. Relative positioning offsets the subtree without
capturing anything fixed. Same reasoning as .et-panel-outlet, which animates
`right` instead of a transform for the identical reason. */
.main-content {
position: relative;
padding: 0 var(--et-space-6) var(--et-space-6);
min-height: 100vh;
}
/* ──────────── Pull-to-refresh ring (MainLayout + etPullRefresh) ────────────
Owner feedback 2026-09-20: the gesture used to fire mid-drag with nothing
drawn, so a refresh arrived as a sudden skeleton swap. This is the ring the
pull now reveals; app-init.js owns every dynamic value on it (opacity, the
rotation custom property, the two state classes) and translates
.main-content down under the sticky header at the same time.
Here rather than in ds.css on purpose: ds.css is one block per component
under Components/Ds, and this is not a component — it is a single chrome
element MainLayout renders next to the header, with nothing to preview in
the DS gallery and no C# behind it.
Fixed, not in flow: the element exists on EVERY screen, including the ones
that never attach the gesture, so it must cost no layout anywhere. Top is
--et-appbar-height (the same token the sticky group tabs clear the header
with) plus a gap. z-index 1101 = under .app-topbar (1102) so the ring can
tuck back under the header as the content unwinds. */
.et-ptr {
position: fixed;
top: calc(var(--et-appbar-height) + 8px);
left: 50%;
z-index: 1101;
width: 24px;
height: 24px;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid var(--et-color-border);
border-top-color: var(--et-color-accent);
background: var(--et-color-surface);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%) rotate(var(--et-ptr-rotate, 0deg));
}
/* Only a live pull makes it paintable at all — without this the ring would sit
in every screenshot and every static dump at opacity 0 but still composited. */
.et-ptr--active { visibility: visible; }
/* The keyframes restate translateX(-50%) because an animation on `transform`
replaces the whole property, centering included. */
.et-ptr--spinning { animation: et-ptr-spin .8s linear infinite; }
@keyframes et-ptr-spin {
from { transform: translateX(-50%) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg); }
}
/* A band that is the screen's header holds still during a pull: etPullRefresh
gives it the opposite `top` of .main-content's, which needs a positioned box.
The page band and the illustrated or photo group band already are one; the
plain group band in the native shell is the case this covers. */
.main-content .et-group-view-header { position: relative; }
/* Reduced motion keeps the ring — it is the only "working" signal on screen —
and drops the spin, matching .et-attach-thumb-spinner's intent. */
@media (prefers-reduced-motion: reduce) {
.et-ptr--spinning { animation: none; }
}
/* ErrorBoundary fallback card (MainLayout). Rendered inside an EtSurface, so
only the type + the action row live here. */
.et-error-boundary { margin: var(--et-space-6) 0; }
.et-error-boundary-title {
font-size: 1.0625rem; /* 17px */
font-weight: 700;
color: var(--et-color-ink);
margin-bottom: var(--et-space-2);
}
.et-error-boundary-body {
font-size: 0.875rem; /* 14px */
color: var(--et-color-ink-2);
margin-bottom: var(--et-space-4);
}
.et-error-boundary-actions {
display: flex;
gap: var(--et-space-2);
}
/* ── PWA install guide (iOS) dialog body ────────────────────────────
Numbered steps under the intro line; the intro reuses the shared
.et-expense-detail-dialog-text. */
.et-pwa-guide {
margin: 0;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.et-pwa-guide-step {
font-size: 13px;
line-height: 1.45;
color: var(--et-color-ink-2);
}
/* ──────────── Panel outlet (docked side-panel rail) ────────────
Components/Common/PanelOutlet.razor renders here — a fixed 460px rail on
the right edge that hosts EtPanel in docked mode. See
docs/superpowers/specs/2026-08-02-panel-outlet-design.md §2/§4.
The slide animates `right`, NOT `transform`, on purpose: a transformed
ancestor becomes the containing block for `position: fixed` descendants,
which would trap the panels' own `.et-modal-overlay` dialogs and
`.et-dropdown-backdrop` hit areas inside the 460px rail. Animating `right`
on a single element costs nothing here and keeps those overlays viewport-
sized. Same 220ms curve either way.
z-index sits above the sticky .app-topbar (1102) / .et-fab (1101) and below
the non-docked .et-panel (1400) and .et-modal-overlay (1500), so a
dialog opened from inside the panel still covers it. */
.et-panel-outlet {
position: fixed;
top: 0;
bottom: 0;
right: -460px;
width: 460px;
max-width: 100vw;
z-index: 1350;
transition: right 0.22s ease;
pointer-events: none;
}
.et-panel-outlet--open {
right: 0;
pointer-events: auto;
}
/* The outlet's overlay form (below 960px) wraps the hosted page in this, only
so et:motion can tell that page's EtPanel from any other sheet (app-init.js,
hostedPanel). No box at all: the fixed panel inside positions against the
viewport exactly as it did when it had no wrapper. */
.et-panel-host { display: contents; }
/* Explicit for readability — the rail is already parked off-screen by the
base rule, so the close transition runs from wherever it is. */
.et-panel-outlet--closing {
right: -460px;
pointer-events: none;
}
/* The rail hugs the VIEWPORT's right edge, full height — and instead of
squeezing the content inside the card, the whole centered .app-shell
card slides LEFT to make room (user decision, 2026-08-02): overriding
margin-right while margin-left stays auto re-solves the centering within
the remaining width, so card + panel together use the full screen. The
margin transition matches the rail's 220ms slide. */
@media (min-width: 960px) {
body > #app > .app-shell,
body > #app .app-shell {
transition: margin 0.22s ease;
}
body > #app > .app-shell.et-panel-open,
body > #app .app-shell.et-panel-open {
margin-right: calc(460px + 24px);
}
}
/* Below ~1100px the shift would squeeze the card past usefulness — let the
rail overlay the page instead. */
@media (max-width: 1100px) {
body > #app > .app-shell.et-panel-open,
body > #app .app-shell.et-panel-open {
margin-right: auto;
}
}
/* ──────────── Floating action pill (Components/Ds/EtFab) ────────────
The FAB is the phone's primary action; from 960px up the header CTA is,
so the pill goes away. The atom itself carries no viewport query (that
would blank the DS gallery, which runs at desktop width), and the gallery
specimens opt out here through .et-fab--inline.
The bottom padding is the page's clearance for the pill, which floats over
the content — it replaces the BottomNav compensation that used to sit in
the phone block below, and runs to the same 960px boundary the pill does.
Derived from --et-fab-bottom rather than restating a number: 44px is the
pill's own height, so height + its offset + a gap. In a browser that is the
66px + safe-area this replaces, and in an installed PWA it grows with the
pill instead of letting it drift over the last row. */
@media (max-width: 959.98px) {
.main-content {
padding-bottom: calc(44px + var(--et-fab-bottom) + var(--et-space-4));
}
}
@media (min-width: 960px) {
.et-fab:not(.et-fab--inline) { display: none; }
}
/* ──────────── Mobile media block (< md) ──────────── */
@media (max-width: 767.98px) {
.main-content {
padding-left: var(--et-space-4);
padding-right: var(--et-space-4);
}
/* Settle-up / form papers — let them fill the viewport on phones */
.mobile-fluid {
max-width: 100% !important;
width: 100% !important;
}
}
/* Flex row helpers: let a label/name shrink and ellipsis-truncate instead of
wrapping or pushing siblings onto a second line (split rows, breakdown rows). */
.et-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-shrink { min-width: 0; flex: 1 1 auto; }
.et-noshrink { flex: 0 0 auto; }
/* No page zoom from a touch gesture — INSIDE THE INSTALLED APP ONLY, hence
the .et-standalone gate (app-init.js stamps it for an installed PWA or the
native shell). `pan-x pan-y` is the whole declaration: it keeps every
scroll/swipe the app relies on (page scroll, the card shelves, the sheet
drag) and drops exactly the two gestures that aren't ours — double-tap-to-
zoom and pinch-zoom, both of which are only enabled under `auto` /
`manipulation`. Declared on html so it inherits down the whole tree; a
descendant that needs a different value can still override.
Companions on the same gate: the viewport meta keys appended in app-init.js
(Android's half) and the gesture* handlers next to them (iOS Safari's, which
honours touch-action only for a gesture that STARTS inside the element).
All three tighten together or not at all. */
html.et-standalone {
touch-action: pan-x pan-y;
}
/* In a browser, `manipulation` instead — the middle value, and it is exactly
the line we want: double-tap-to-zoom stays off (that one is a tap that went
wrong, never an intent), while pinch goes back to the browser. Pinch there
is not only page zoom: it is how Safari opens the TAB OVERVIEW, and
swallowing it left iPhone users unable to reach their own tabs (reported
2026-09-11). It is also how a reader zooms, which Apple protects on purpose.
The two gestures cannot be told apart, so the split is by context, not by
gesture: the installed app above, the browser here. */
html:not(.et-standalone) {
touch-action: manipulation;
}
/* Prevent stray text selection / long-press cursor-in-label when tapping
non-input UI on mobile. Re-enable selection on inputs + content-
editable + intentionally selectable code blocks. */
body {
-webkit-user-select: none;
-webkit-touch-callout: none;
user-select: none;
}
input,
textarea,
[contenteditable="true"],
code,
pre {
-webkit-user-select: text;
user-select: text;
}
/* ──────── Header form with no store pill (.et-no-store-pill) ────────
The block above shrinks the switcher to clear room for the "App letöltése"
store pill, and .app-topbar's phone block hides the CTA. Where the pill does
not render, the header pays rent for two absent controls: a group pill
squeezed to a disc for no reason, and an empty .et-topbar-right still
claiming the topbar's flex gap and holding the bell and the avatar off the
trailing edge.
The gate is the pill's OWN predicate, stamped by app-init.js — not the
viewport, which is what #319 keyed on and got wrong. It covers every case
where etStore.platform answers null: the installed PWA, the native shell,
AND a desktop browser narrowed below 960px (a laptop has no app store to
send anyone to, however narrow the window). #331 fixed the first two by
keying on .et-standalone; that was the same mistake one size smaller.
These rules restate the pre-#319 header, bounded by the same 959.98px edge
as the branch they undo: at >=960px the header is already the original one
and .et-topbar-right holds the real CTA there.
This IS the header the landing screenshots show — tools/screens/shoot-
landing.ps1 used to carry a hand-written copy of these rules, which
CLAUDE.md flagged as an unenforced mirror. It now stamps the class on the
dump instead, so this block is the single source. */
@media (max-width: 959.98px) {
html.et-no-store-pill .app-topbar .et-group-switcher-label {
display: inline;
/* The clamp #319 retired with the label: a long group name must not
push the bell and the avatar off the trailing edge. */
max-width: 40vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html.et-no-store-pill .app-topbar .et-group-switcher { min-height: 0; }
html.et-no-store-pill .app-topbar .et-group-switcher--compact {
padding: 6px 12px 6px 8px;
gap: 8px;
}
html.et-no-store-pill .app-topbar .et-group-switcher-icon { display: none; }
html.et-no-store-pill .app-topbar .et-group-switcher--compact .et-group-switcher-dots {
display: inline-flex;
}
/* Empty container, so it goes rather than sits: its margin-left:auto is
what pushed the trailing group to the edge, and the bell inherits that
job. Without this the avatar stops 10px short of the edge. */
html.et-no-store-pill .app-topbar .et-topbar-right { display: none; }
html.et-no-store-pill .app-topbar .et-notif-dropdown { margin-left: auto; }
/* Restores the desktop bell↔avatar gap the phone block zeroes — with the
store pill gone there is room for it again. */
html.et-no-store-pill .app-topbar .et-appbar-avatar { margin-left: 6px; }
}
/* Belt and braces: StoreLinkPill renders nothing when etStore.platform answers
null, which is exactly when this class is stamped, so the app can't reach
this rule. It earns its place by making the class a complete description of
the pill-less header — the ScreenDumps harness answers 'android' for every
dump, so the pill IS in the HTML the landing shoots, and by a future render
path that forgets the JS gate. */
html.et-no-store-pill .app-topbar .et-appbar-store { display: none; }
/* ──────────── AdaptiveCardStrip (.et-strip) ──────────────
Horizontal collection shell used by Home's two carousels (and other
adaptive grids) — emitted by Components/Ui/AdaptiveCardStrip.razor with
a `data-strip-count` attribute that drives the layout switch:
- 1/2/3 (desktop) or 1 (mobile) → grid, cards stretch edge-to-edge.
- 4+ (desktop) or 2+ (mobile) → scroll-snap horizontal carousel.
The default state is the carousel (works regardless of count), and the
grid overrides apply only when count is low enough to fit without
horizontal overflow. Children render whatever cards the caller passes —
the shell controls only the container chrome. */
.et-strip {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.et-strip > * {
flex: 0 0 auto;
scroll-snap-align: start;
}
/* Desktop: grid up to 3 items. Above MD breakpoint matches MudHidden's
SmAndDown / MdAndUp split used elsewhere. */
@media (min-width: 960px) {
.et-strip[data-strip-count="1"],
.et-strip[data-strip-count="2"],
.et-strip[data-strip-count="3"] {
display: grid;
overflow-x: visible;
overflow-y: visible;
scroll-snap-type: none;
/* The strip classes (.nac-strip / .uec-carousel) carry 4px/8px of
padding as shadow breathing room inside their overflow container.
Grid mode has no overflow clipping, so the sides only made the
cards read narrower than the full-width sections below them — and
the top pushed the first card 4px below the EtSurface starting the
column beside it, which is the visible half of "Tennivaló and
Akiknek tartozol don't line up". */
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
.et-strip[data-strip-count="1"] { grid-template-columns: 1fr; }
.et-strip[data-strip-count="2"] { grid-template-columns: 1fr 1fr; }
.et-strip[data-strip-count="3"] { grid-template-columns: 1fr 1fr 1fr; }
.et-strip[data-strip-count="1"] > *,
.et-strip[data-strip-count="2"] > *,
.et-strip[data-strip-count="3"] > * {
flex: 1 1 auto;
min-width: 0;
width: auto;
scroll-snap-align: none;
}
}
/* Mobile: grid only for count = 1; 2+ stays as a scroll carousel. */
@media (max-width: 959.98px) {
.et-strip[data-strip-count="1"] {
display: grid;
grid-template-columns: 1fr;
overflow-x: visible;
overflow-y: visible;
scroll-snap-type: none;
padding-left: 0; /* same rationale as the desktop grid mode */
padding-right: 0;
padding-top: 0;
}
.et-strip[data-strip-count="1"] > * {
flex: 1 1 auto;
min-width: 0;
width: auto;
scroll-snap-align: none;
}
}
/* Dot row under a one-card-per-page strip (mobile compaction §2.3). Razor
renders N dots with the first active; carousel.js's update() moves the
is-active class as the strip scrolls (rounded scrollLeft / clientWidth),
reaching the row as the strip's nextElementSibling. Desktop never shows
it — there the strip is a grid or an arrow carousel. */
.et-strip-dots { display: none; }
@media (max-width: 959.98px) {
.et-strip-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 8px;
}
.et-strip-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--et-color-ink-3);
transition: background-color .15s;
}
.et-strip-dot.is-active { background: var(--et-color-accent); }
}
/* Hide carousel arrows when the wrap holds a grid-mode strip (modern
browsers — Safari 15.4+, Chrome 105+). Falls back to a no-op on older
browsers, where the arrows just don't fire any scroll action. */
@media (min-width: 960px) {
.nac-strip-wrap:has(.et-strip[data-strip-count="1"]) .nac-arrow,
.nac-strip-wrap:has(.et-strip[data-strip-count="2"]) .nac-arrow,
.nac-strip-wrap:has(.et-strip[data-strip-count="3"]) .nac-arrow { display: none; }
}
@media (max-width: 959.98px) {
.nac-strip-wrap:has(.et-strip[data-strip-count="1"]) .nac-arrow { display: none; }
}
/* ──────────── Page-level empty state hero ──────────── */
/* Larger surface w/ tinted icon circle for "no groups yet", "no upcoming
events", and other page-wide empty surfaces. Inline list-empty states
(compact "Minden rendben" strips) intentionally stay tiny. */
.et-empty-state {
background: color-mix(in srgb, var(--et-color-surface) 65%, var(--et-color-bg));
}
.et-empty-state-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--et-color-accent) 12%, var(--et-color-surface-2));
}
/* ──────────── Subtle page background pattern ──────────── */
/* THE PLAIN BACKGROUND IS THE DEFAULT, and it is the default by being the
absence of a rule: a body with no [data-bg-pattern] (or with "none", which
no block below matches) simply keeps its base colour. Nothing has to switch
the decoration off, so no layer — CSS, JS or C# — needs to name the default.
The two opt-in variants each carry their own radial-dot grid as a second
background layer, so decoration is entirely additive:
"abstract" — diamond, 4-pt sparkle, dot cluster, hexagon, ring.
Geometric, modern, restrained; opt-in via profile.
"themed" — flower, gift box, cake, small heart, balloon.
Warmer and more representational; opt-in via profile.
("none" is the profile's "Sima" option, and replaces the old escape hatch
[data-card-style="classic"] that the removed CardChrome toggle drove.)
SVG colors are hardcoded (#A89880 light, #D6CBB8 dark) so a single tile
works across all palettes without color-mix on SVG attrs. */
/* ── Abstract pattern: geometric shapes with concentric detail ──
Diamond + inner diamond, sparkle + center dot (rotated 15°), dot cluster,
hexagon + inner hexagon + center dot (rotated 8°), double-ring + center
dot. Subtle off-axis rotation on some shapes breaks the "rubber-stamp
regularity" of the tile. */
[data-bg-pattern="abstract"] body {
background-image:
url("data:image/svg+xml;utf8,