/* ========================================================================== KRportal — design system Light palette on :root, dark overrides under prefers-color-scheme. ========================================================================== */ :root { color-scheme: light dark; --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f2f4f7; --border: #e2e6ec; --border-strong: #cdd4de; --text: #171a1f; --text-muted: #5d6673; --text-faint: #8d95a1; --accent: #2f5bd8; --accent-hover: #24499f; --accent-soft: #eaf0ff; --accent-border: #c6d6ff; --event: #2f5bd8; --event-soft: #eef3ff; --online: #9333a8; --online-soft: #f9eefd; --deadline: #b45309; --deadline-soft: #fff5e6; --urgent: #c2334d; --urgent-soft: #fdecef; --ok: #1f7a4d; --ok-soft: #e9f7ef; --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 6px 20px -8px rgba(16, 24, 40, 0.12); /* Foreground on an --accent background, and the filter that keeps the dark line-drawing logo visible. Both flip with the palette. */ --on-accent: #ffffff; --logo-filter: none; /* Tooltips invert against the page so they read as an overlay. */ --tooltip-bg: #171a1f; --tooltip-text: #f6f7f9; --wrap: 1200px; --gap: 32px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* Dark palette. * * Three states, because the toggle has to beat the system preference in BOTH * directions: an explicit choice stamps data-theme on , while the default * "system" setting stamps nothing and leaves prefers-color-scheme in charge. * The :not([data-theme="light"]) guard is what lets a viewer on a dark system * force light. Defining the tokens twice is the price of supporting a toggle * without requiring JavaScript for the system case. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1115; --surface: #171a21; --surface-2: #1e222b; --border: #282d38; --border-strong: #39404e; --text: #e7e9ee; --text-muted: #9aa3b2; --text-faint: #767f8e; --accent: #8aa9ff; --accent-hover: #a9c0ff; --accent-soft: #1a2340; --accent-border: #2c3b66; --event: #8aa9ff; --event-soft: #172040; --online: #d09aea; --online-soft: #2b1c36; --deadline: #e0a86a; --deadline-soft: #322416; --urgent: #f2879c; --urgent-soft: #3a1a22; --ok: #6fd3a1; --ok-soft: #12291f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 20px -8px rgba(0, 0, 0, 0.6); /* Everything that used to need its own dark-mode rule is a token now, so the whole dark palette lives in this one block. */ --on-accent: #0f1115; --logo-filter: invert(1) brightness(1.6); --tooltip-bg: #e7e9ee; --tooltip-text: #0f1115; } } :root[data-theme="dark"] { --bg: #0f1115; --surface: #171a21; --surface-2: #1e222b; --border: #282d38; --border-strong: #39404e; --text: #e7e9ee; --text-muted: #9aa3b2; --text-faint: #767f8e; --accent: #8aa9ff; --accent-hover: #a9c0ff; --accent-soft: #1a2340; --accent-border: #2c3b66; --event: #8aa9ff; --event-soft: #172040; --online: #d09aea; --online-soft: #2b1c36; --deadline: #e0a86a; --deadline-soft: #322416; --urgent: #f2879c; --urgent-soft: #3a1a22; --ok: #6fd3a1; --ok-soft: #12291f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 20px -8px rgba(0, 0, 0, 0.6); /* Everything that used to need its own dark-mode rule is a token now, so the whole dark palette lives in this one block. */ --on-accent: #0f1115; --logo-filter: invert(1) brightness(1.6); --tooltip-bg: #e7e9ee; --tooltip-text: #0f1115; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.25; letter-spacing: -0.011em; font-weight: 650; color: var(--text); } h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.95rem); } h2 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); margin-top: 1.75em; } h3 { font-size: 1.05rem; margin-top: 1.5em; } h4 { font-size: 0.95rem; margin-top: 1.25em; color: var(--text-muted); } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-left: 1.25em; } li { margin-bottom: 0.35em; } hr { border: 0; border-top: 1px solid var(--border); margin: 1.25em 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); color: var(--text); padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); } .skip-link:focus { left: 12px; top: 12px; } .tracker { display: none; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } .layout { display: grid; grid-template-columns: minmax(0, 1fr) 224px; gap: var(--gap); align-items: start; padding-top: 32px; padding-bottom: 56px; } .content { min-width: 0; } @media (max-width: 960px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 24px; } } /* -------------------------------------------------------------------------- Header / navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 1.35rem; font-weight: 650; letter-spacing: -0.02em; margin-right: auto; } .brand:hover { color: var(--text); text-decoration: none; } .brand-logo { width: 26px; height: 28px; object-fit: contain; /* the logo is a dark line drawing on transparent */ filter: var(--logo-filter); } .brand i { font-style: italic; font-weight: 400; color: var(--text-muted); } .site-nav { display: flex; align-items: center; gap: 2px; } .site-nav a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.94rem; font-weight: 500; white-space: nowrap; } .site-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } /* Current page. The page name comes from ???TITLE???, which every page's PHP already sets, so no extra placeholder is needed. */ body[data-page="Newsletter"] .site-nav a[href="/newsletter/"], body[data-page="Contact"] .site-nav a[href="/contact/"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; } .nav-toggle svg { width: 20px; height: 20px; } @media (max-width: 800px) { .nav-toggle { display: inline-flex; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .site-nav.is-open { display: flex; } .site-nav a { padding: 12px; font-size: 1rem; } } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--surface); } .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 20px; font-size: 0.85rem; color: var(--text-faint); } .footer-inner p { margin: 0; } .footer-inner a { color: var(--text-muted); } .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; } /* Segmented light / system / dark control. The pressed segment is marked with aria-pressed, so that attribute drives the styling too — no extra class to keep in sync with the script. */ .theme-toggle { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 30px; min-height: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-pill); background: none; color: var(--text-faint); } .theme-toggle button:hover { background: var(--surface); color: var(--text-muted); } .theme-toggle button[aria-pressed="true"] { background: var(--surface); border-color: var(--border-strong); color: var(--accent); } .theme-toggle svg { width: 15px; height: 15px; } /* -------------------------------------------------------------------------- Cards, callouts -------------------------------------------------------------------------- */ .card, .infobox, .newsbox, .eventbox, .onlineeventbox, .addform { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); } .infobox { background: var(--deadline-soft); border-color: color-mix(in srgb, var(--deadline) 35%, transparent); color: var(--text); } .newsbox { background: var(--accent-soft); border-color: var(--accent-border); } /* Category cue. Instead of an accent stripe down the card edge, each event carries a tinted icon tile in its top-left corner: a calendar for on-site events, a camera for online seminars. The tile tint and the icon itself are the colour cue, so the card border stays neutral on all four sides. */ .event-view { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 13px; align-items: start; } .event-icon { grid-column: 1; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid transparent; } .event-icon svg { width: 19px; height: 19px; } .event-view > .event-head, .event-view > .event-meta { grid-column: 2; } /* The tile sits slightly below the cap height of the title next to it. */ .event-view > .event-head { min-height: 36px; align-items: center; } .event-icon--event { background: var(--event-soft); border-color: color-mix(in srgb, var(--event) 22%, transparent); color: var(--event); } .event-icon--online { background: var(--online-soft); border-color: color-mix(in srgb, var(--online) 22%, transparent); color: var(--online); } /* Past events are rendered from the same template; mute the tile so the upcoming list stays the one that draws the eye. */ .past-list .event-icon { background: var(--surface-2); border-color: var(--border); color: var(--text-faint); } .lede { font-size: 1.05rem; color: var(--text-muted); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn, button, input[type="submit"], input[type="button"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; font: inherit; font-size: 0.94rem; font-weight: 550; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease; } .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover { background: var(--surface-2); text-decoration: none; } .btn-primary, button[type="submit"], input[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-primary:hover, button[type="submit"]:hover, input[type="submit"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } /* Full-width "disclosure" buttons that open a suggestion form */ .btn-add { display: flex; width: 100%; justify-content: center; margin-bottom: 12px; background: var(--accent-soft); border: 1px dashed var(--accent-border); color: var(--accent); font-weight: 600; } .btn-add:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .btn-add--online { background: var(--online-soft); border-color: color-mix(in srgb, var(--online) 40%, transparent); color: var(--online); } .btn-add--online:hover { background: var(--online-soft); border-color: var(--online); color: var(--online); } /* Secondary action that still needs to be a real submit button */ button.btn-neutral[type="submit"], .btn-neutral { background: var(--surface); border-color: var(--border-strong); color: var(--text); } button.btn-neutral[type="submit"]:hover, .btn-neutral:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .btn-icon { min-height: 32px; padding: 4px 8px; background: none; border-color: transparent; color: var(--text-faint); } .btn-icon:hover { background: var(--surface-2); color: var(--accent); } .btn-icon svg { width: 16px; height: 16px; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="date"], input[type="time"], input[type="search"], select, textarea { width: 100%; max-width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 16px; /* keeps iOS from zooming on focus */ color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); vertical-align: middle; } label { font-size: 0.9rem; font-weight: 550; color: var(--text-muted); } /* Two-column responsive form grid used by all suggestion forms */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; } .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field--wide { grid-column: 1 / -1; } .field-hint { font-size: 0.8rem; font-weight: 400; color: var(--text-faint); } .check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; grid-column: 1 / -1; } .check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text); cursor: pointer; } .form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; grid-column: 1 / -1; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Compact inline form (newsletter subscribe, search) */ .inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 1em; } .inline-form .field { flex: 1 1 260px; } /* Legacy hooks kept for markup that is still generated in PHP */ .event_form_label { display: block; margin-bottom: 4px; } .event_form_text { width: 100%; } /* -------------------------------------------------------------------------- Toolbar (filters / search above a list) -------------------------------------------------------------------------- */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; } .toolbar h2 { margin: 0; flex: 0 0 auto; } .toolbar form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } .toolbar select, .toolbar input[type="search"], .toolbar input[type="text"] { width: auto; min-width: 180px; } .toolbar-spacer { flex: 1 1 auto; } /* -------------------------------------------------------------------------- Event list items -------------------------------------------------------------------------- */ .event-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; } .event-title { font-size: 1.02rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .event-title a { color: var(--text); } .event-title a:hover { color: var(--accent); } .event-flags { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; } .event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 8px; font-size: 0.9rem; color: var(--text-muted); } .meta { display: inline-flex; align-items: center; gap: 6px; } .meta svg { width: 15px; height: 15px; flex: none; color: var(--text-faint); } .meta-series { color: var(--text-faint); font-size: 0.85rem; } .event-actions { margin-left: auto; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 0.76rem; font-weight: 600; line-height: 1.6; white-space: nowrap; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .badge--ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); } .badge--event { background: var(--event-soft); color: var(--event); border-color: color-mix(in srgb, var(--event) 30%, transparent); } .badge--online { background: var(--online-soft); color: var(--online); border-color: color-mix(in srgb, var(--online) 30%, transparent); } .badge--deadline { background: var(--deadline-soft); color: var(--deadline); border-color: color-mix(in srgb, var(--deadline) 30%, transparent); } .badge--urgent { background: var(--urgent-soft); color: var(--urgent); border-color: color-mix(in srgb, var(--urgent) 30%, transparent); } /* The inline edit form inside an event card */ .edit-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-strong); } .empty { padding: 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-faint); text-align: center; } .list-more { margin: 18px 0 0; text-align: center; } /* -------------------------------------------------------------------------- "Upcoming" sidebar -------------------------------------------------------------------------- */ .upcoming { min-width: 0; align-self: start; } .upcoming-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); /* deliberately not overflow:hidden — the row tooltips escape the card */ } /* The card is exactly as tall as its content: no max-height, no inner scroll area. It is deliberately not sticky either — a sticky card taller than the viewport pins its top and puts its last entries permanently out of reach. */ .upcoming-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); /* the card no longer clips, so the filled header rounds itself */ border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; } .upcoming-head h2 { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .feed-links { display: inline-flex; gap: 2px; margin-left: auto; } .feed-links a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--text-faint); } .feed-links a:hover { background: var(--surface); color: var(--accent); } .feed-links svg { width: 16px; height: 16px; } .upcoming-list { padding: 4px; } /* One row per entry: the kind icon in a fixed column, date and name stacked beside it. The icon replaces the uppercase EVENT / ABSTRACT / PAPER caption that used to share a line with the date — it carries the same meaning in its colour and its tooltip, without spending the space. Paddings and type sizes are a step down from the card list, since this is a scan list, not reading material. */ .up-item { position: relative; display: flex; align-items: stretch; gap: 9px; padding: 5px 7px; border-radius: var(--radius-sm); color: var(--text); line-height: 1.3; } .up-item:hover { background: var(--surface-2); text-decoration: none; /* keep this row's tooltip above its neighbours */ z-index: 3; } .up-item + .up-item { margin-top: 1px; } /* The symbol runs the full height of the row, so the kind is readable from the shape alone at a glance down the list. */ .up-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; color: var(--text-faint); } .up-icon svg { width: 26px; height: 26px; } /* Instant tooltip on the whole row. * * A title attribute would do the job, but browsers hold it back about a second * and only over the element carrying it. This shows on the first frame and * anywhere on the row. It sits above the row, which is why .upcoming-card no * longer sets overflow: hidden. */ .up-item[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: 4px; bottom: calc(100% - 4px); z-index: 4; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 0.72rem; font-weight: 500; line-height: 1.45; white-space: nowrap; box-shadow: var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; } .up-item[data-tooltip]:hover::after, .up-item[data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; } /* Anything that asked not to be animated gets no fade to begin with, and the tooltip has none anyway — it must be instant. */ @media (hover: none) { /* On touch there is no hover state to reveal it, and the visually-hidden label inside the icon already carries the meaning. */ .up-item[data-tooltip]::after { content: none; } } .up-body { min-width: 0; } .up-date { display: block; color: var(--text-faint); font-size: 0.72rem; font-variant-numeric: tabular-nums; } .up-name { display: block; font-size: 0.82rem; font-weight: 550; overflow-wrap: anywhere; } .up-item--event .up-icon { color: var(--event); } .up-item--online .up-icon { color: var(--online); } .up-item--deadline .up-icon { color: var(--deadline); } .up-item--soon { background: var(--urgent-soft); } .up-item--soon .up-icon { color: var(--urgent); } .up-empty { padding: 16px; color: var(--text-faint); font-size: 0.88rem; font-style: italic; } /* -------------------------------------------------------------------------- Admin backend -------------------------------------------------------------------------- */ .admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .admin-nav a { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-size: 0.9rem; } .admin-nav a:hover { border-color: var(--accent); text-decoration: none; } .admin-nav a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); font-weight: 600; } /* The restore form. Marked out from the rest of the page because it is the one control in the backend that cannot be undone from the backend. */ .danger-zone { border-color: color-mix(in srgb, var(--urgent) 35%, transparent); } .danger-zone h3 { color: var(--urgent); } .btn-danger, button.btn-danger { background: var(--urgent); border-color: var(--urgent); color: var(--on-accent); } .btn-danger:hover, button.btn-danger:hover { background: color-mix(in srgb, var(--urgent) 82%, black); border-color: color-mix(in srgb, var(--urgent) 82%, black); color: var(--on-accent); } .card h3 { margin: 0 0 6px; font-size: 1rem; } .card > .muted { margin-top: 0; } input[type="file"] { font: inherit; font-size: 0.92rem; color: var(--text-muted); } .review-title { display: flex; align-items: baseline; gap: 9px; font-weight: 600; margin-bottom: 10px; overflow-wrap: anywhere; } /* Review cards reuse .eventbox but have no icon tile, so they carry the same colour cue as a dot. */ .review-title::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--event); } .review-fields { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 4px 16px; font-size: 0.9rem; margin-bottom: 14px; } .review-fields dt { color: var(--text-muted); } .review-fields dd { margin: 0; overflow-wrap: anywhere; } .review-new { color: var(--urgent); font-weight: 550; } .review-old { color: var(--text-faint); text-decoration: line-through; } .review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .review-actions form { display: flex; align-items: center; gap: 8px; margin: 0; } .login-form { max-width: 360px; } /* -------------------------------------------------------------------------- Utilities -------------------------------------------------------------------------- */ .muted { color: var(--text-muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }