/*
* Foundation / layout. Mobile-first: styles apply to small screens by default,
* with min-width media queries layering on larger-screen adjustments.
* Brand tokens live in variables.css / theme.css.
*/
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* The single page container. Full width with padding on mobile, a centered
* max-width column on larger screens. Replaces the old fixed 30vw margins. */
.content {
width: 100%;
max-width: var(--content-max-width);
margin-inline: auto;
padding: var(--gap-large) var(--content-padding);
}
main.content {
flex: 1 0 auto;
}
/* The cookie notice is fixed to the bottom; on a tall page (the calendar) the
last content row scrolled under it. Reserve clearance ONLY while the notice is
actually visible — the controller drops the `hidden` attr to show it and
removes the element entirely on dismiss / for returning visitors, so the space
is reclaimed the moment it's gone. */
body:has(.cookie-notice:not([hidden])) main.content {
padding-bottom: calc(var(--gap-large) + 3.5rem);
}
/* Base typography */
h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-base); }
h4, h5, h6 { font-size: var(--font-size-small); font-weight: normal; }
a {
color: var(--theme-accent-color);
}
.muted {
color: var(--theme-fg-muted);
font-size: var(--font-size-small);
}
/* The account-delete / user-delete / revoke buttons are full-width danger
buttons. `.button` is the real boxed button (controls.css) and `.delete` is its
danger variant (hollow warn → fills); this only adds the full-width sizing. */
.button.delete {
width: 100%;
}
/* In Settings, delete-account is auto-width and left-aligned like the other
standalone actions (install, push, logout) — only the account form's Save is
full-width. A destructive action that isn't a giant button also suits the
anti-dark-pattern stance: clearly available, not over-emphasised. (Admin
delete/revoke keep the full-width treatment above.) */
.settings-section .button.delete {
width: auto;
}
/* Account / auth form fields: underline inputs, matching the events filter bar.
* Scoped so the events filter comboboxes keep their own treatment. */
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="time"],
.account-form select {
padding: var(--gap-small) 0;
border: 0;
border-bottom: var(--border-width) solid var(--field-border-color);
background: var(--theme-bg-color);
color: inherit;
font: inherit;
max-width: 100%;
}
/* The native time picker ships as a bordered, opaque-white box that ignored the
underline treatment entirely (a stark white rectangle beside the underline
selects on the rule form). Strip the box to match, and let its picker glyph
follow the theme. */
.account-form input[type="time"] {
background: none;
color-scheme: light dark;
}
/* Neutral at rest, accent underline on focus — green now signals "this field is
active", rather than decorating every passive field. The outline is suppressed
in favour of the underline (the field's own focus affordance). Scoped to the
same text-like inputs as the styling above: a checkbox/radio is an
too, and the bare `input:focus` form gave a focused checkbox a green
bottom-border (visible in Firefox) while killing its real focus ring. */
.account-form input[type="text"]:focus,
.account-form input[type="email"]:focus,
.account-form input[type="password"]:focus,
.account-form input[type="time"]:focus,
.account-form select:focus {
outline: none;
border-bottom-color: var(--theme-accent-color);
}
/* Make the select read unmistakably as a dropdown: strip the native chrome and
add a prominent accent chevron (the tiny native arrow was easy to miss). */
.account-form select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
padding-right: 1.8em;
/* Neutral mid-grey chevron (was a hard-coded accent green that ignored the
theme and stayed green in dark mode). Mid-grey reads on both grounds; the
caret is field chrome, so it's neutral like the underline. */
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='9'%20viewBox='0%200%2014%209'%3E%3Cpath%20d='M1%201l6%206%206-6'%20fill='none'%20stroke='%23808080'%20stroke-width='2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.2em center;
background-size: 0.85em;
}
/* When the empty prompt option is showing, grey it to match input placeholders;
real options stay full-contrast. */
.account-form select:has(option[value=""]:checked) {
color: var(--theme-fg-muted);
}
.account-form select option {
color: var(--theme-fg-color);
}
/* Settings page: stacked sections (account / notifications / delete), separated
by a hairline rather than cards — the design uses square corners. */
.settings-section {
display: flex;
flex-direction: column;
gap: var(--gap-medium);
}
/* RULE: a section hairline marks a boundary between INDEPENDENT sections —
distinct concerns with their own forms/actions (here: the account form, the
per-device notification controls, account deletion). It is NOT used between
sub-parts of a single form: e.g. the Interessen page's Stile/Orte share one
form + one Save, so they're separated by whitespace + headings only, never a
divider (which would falsely imply they're independent). */
.settings-section + .settings-section {
padding-top: var(--gap-large);
border-top: var(--border-width) solid var(--theme-bg-muted);
}
/* A labelled group within a section (password, email). Strip the native
fieldset chrome; the legend carries the label. */
.settings-field {
border: 0;
margin: 0;
padding: 0;
min-width: 0;
}
/* Form field label: bold at base size — ONE consistent style for every field
label in a section, whether it's a over a value/select or a fieldset