/*
 * Aquillus Cloud console - only what the shared ui-kit (/ui/aquillus.css) does not already provide.
 * Colours, type sizes, radii and motion come from the kit's custom properties.
 *
 * The console is built like a well-made settings app: a translucent sidebar (a tab bar on a phone), one large
 * title per page, and content in grouped lists and plain tables. Groups carry a title above the surface and an
 * optional footnote below; nothing sits in a box inside another box. Colour is spent on meaning only: the accent
 * marks what can be acted on, green/amber/red say ok/attention/problem.
 */

.aqc-boot { padding: 72px 20px; text-align: center; color: var(--aq-muted); }
.aqc-boot strong { display: block; color: var(--aq-text); font: 600 var(--aq-fs-lg)/1.3 var(--aq-font-legend); margin-bottom: 6px; }
.aqc-boot p { margin: 0 auto; }

/* A whole page jumping between dark and light is hard on the eyes: theme.js sets this class for a moment. */
html.aqc-theming, html.aqc-theming *, html.aqc-theming *::before, html.aqc-theming *::after {
  transition: background-color 280ms linear, color 280ms linear, box-shadow 280ms linear, fill 280ms linear !important;
}

/* ---------- frame ---------- */
.aqc-skip { position: fixed; left: 12px; top: 12px; z-index: 60; transform: translateY(-160%); padding: 8px 14px; border: 0; border-radius: var(--aq-r); background: var(--aq-signal); color: var(--aq-on-signal); font: 600 var(--aq-fs-sm)/1.2 var(--aq-font); cursor: pointer; }
.aqc-skip:focus-visible { transform: none; }
.aqc-app { grid-template-columns: 252px minmax(0, 1fr); }
.aq-main:focus, .aq-main:focus-visible { outline: none; }
.aq-main { padding: 32px 40px 80px; }
.aqc-page { max-width: 1180px; }
.aqc-narrow { max-width: 760px; }

.aqc-sidebar { padding: 14px 12px 14px; gap: 1px; }
.aqc-brand {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px; color: var(--aq-text);
  font: 600 var(--aq-fs)/1.2 var(--aq-font-legend); letter-spacing: -0.01em;
}
.aq .aqc-brand { color: var(--aq-text); }
.aq .aqc-brand:hover { text-decoration: none; }
.aqc-brand img { border-radius: 7px; flex: none; }
.aqc-brand small { display: block; margin-top: 1px; font: 400 var(--aq-fs-xs)/1.3 var(--aq-font); letter-spacing: 0.005em; color: var(--aq-muted); }
.aqc-sidebar a[data-section] svg { width: 18px; height: 18px; }
.aqc-nav-title { margin: 20px 10px 6px; font-size: var(--aq-fs-xs); font-weight: 600; letter-spacing: 0.005em; color: var(--aq-muted); }

.aqc-account { display: flex; flex-direction: column; gap: 1px; padding-top: 16px; }
.aqc-who { display: flex; align-items: center; gap: 10px; padding: 6px 10px 12px; min-width: 0; }
.aqc-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--aq-rail-2); color: var(--aq-text); font: 600 var(--aq-fs-xs)/1 var(--aq-font); letter-spacing: 0.02em;
}
.aqc-who-text { min-width: 0; line-height: 1.3; }
.aqc-who-text strong { display: block; font-size: var(--aq-fs-sm); font-weight: 600; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aqc-who-text small { display: block; font-size: var(--aq-fs-xs); color: var(--aq-muted); }
.aqc-account .aqc-theme { display: flex; margin: 0 6px 8px; }
.aqc-theme > button { flex: 1; padding: 4px 8px; font-size: var(--aq-fs-xs); }
.aqc-nav-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--aq-text); font: 500 var(--aq-fs-sm)/1.2 var(--aq-font); letter-spacing: 0; text-align: left; cursor: pointer;
  transition: background-color var(--aq-t-press) linear;
}
.aqc-nav-btn svg { color: var(--aq-muted); flex: none; }
.aqc-nav-btn:hover { background: color-mix(in srgb, var(--aq-text) 6%, transparent); }
.aqc-nav-btn:active { background: color-mix(in srgb, var(--aq-text) 12%, transparent); }

/* The phone's tab bar: four places and "Mehr". */
.aqc-tabbar { display: none; }

@media (max-width: 860px) {
  .aqc-app { grid-template-columns: minmax(0, 1fr); }
  .aqc-sidebar { display: none; }
  .aq-main { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  .aqc-tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 4px max(6px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    background: var(--aq-material); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 -1px 0 var(--aq-hairline);
  }
  .aqc-tabbar > a, .aqc-tabbar > button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; padding: 4px 2px;
    border: 0; border-radius: 12px; background: transparent; color: var(--aq-muted); cursor: pointer;
    font: 500 0.6875rem/1.2 var(--aq-font); letter-spacing: 0.01em; text-decoration: none; touch-action: manipulation;
    transition: transform var(--aq-t) var(--aq-ease), color var(--aq-t-press) linear;
  }
  .aqc-tabbar > a:hover { text-decoration: none; }
  .aqc-tabbar > a:active, .aqc-tabbar > button:active { transform: scale(0.92); transition-duration: var(--aq-t-press); }
  .aqc-tabbar > a[aria-current="page"], .aqc-tabbar > button[data-current] { color: var(--aq-signal); }
  .aqc-tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- page head ---------- */
.aqc-head { margin: 0 0 28px; }
.aqc-back {
  display: inline-flex; align-items: center; gap: 2px; margin: 0 0 8px -8px; padding: 4px 10px 4px 4px; border-radius: 8px;
  font-weight: 500; transition: background-color var(--aq-t-press) linear;
}
.aq .aqc-back:hover { text-decoration: none; background: color-mix(in srgb, var(--aq-signal) 10%, transparent); }
.aq .aqc-back:active { background: color-mix(in srgb, var(--aq-signal) 18%, transparent); }
.aqc-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.aqc-head-text { flex: 1 1 380px; min-width: 0; }
.aq .aqc-title { font: 700 var(--aq-fs-3xl)/1.1 var(--aq-font-legend); letter-spacing: -0.026em; overflow-wrap: anywhere; }
.aqc-head-meta { margin-top: 10px; font-size: var(--aq-fs-sm); letter-spacing: 0; }
.aq .aqc-sub { margin-top: 6px; color: var(--aq-muted); }
.aq .aqc-lead { margin-top: 6px; font-size: var(--aq-fs-lg); line-height: 1.35; letter-spacing: -0.01em; }
.aqc-lead + .aqc-head-meta { margin-top: 8px; }
.aqc-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.aqc-banner { margin: -6px 0 28px; }

@media (max-width: 600px) {
  .aq .aqc-title { font-size: var(--aq-fs-2xl); letter-spacing: -0.022em; }
  .aqc-head { margin-bottom: 22px; }
  .aqc-head-text { flex-basis: 100%; }
}

/* ---------- groups and rows ---------- */
.aqc-group { margin: 0 0 32px; min-width: 0; }
.aqc-group-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 8px; min-height: 22px; }
.aq .aqc-group-head h2 { margin: 0 0 0 4px; font: 600 var(--aq-fs-lg)/1.3 var(--aq-font-legend); letter-spacing: -0.012em; color: var(--aq-text); }
.aqc-group-head .aq-btn { margin: 0 0 -4px; }
.aq .aq-group-foot { margin: 8px 4px 0; line-height: 1.45; }
.aq h3.aq-group-title { font: 500 var(--aq-fs-sm)/1.3 var(--aq-font); letter-spacing: 0; color: var(--aq-muted); margin: 0 0 8px 16px; }
.aqc-after { margin-top: 12px; }
.aqc-before { margin-bottom: 12px; }
.aqc-pad { padding: 20px; }

.aqc-row { min-height: 48px; padding: 10px 16px; }
.aqc-row.aqc-top { align-items: flex-start; }
.aqc-row > .aq-item-label { font-size: var(--aq-fs); line-height: 1.35; overflow-wrap: anywhere; }
.aqc-row > .aq-item-label small { margin-top: 2px; font-size: var(--aq-fs-sm); letter-spacing: 0; }
.aqc-row > .aq-item-value { margin-left: auto; max-width: 62%; overflow-wrap: anywhere; font-variant-numeric: normal; }
.aqc-row-stack .aqc-stacked { display: block; margin-top: 4px; color: var(--aq-text); text-align: left; }
.aqc-chevron { display: flex; flex: none; margin-right: -4px; color: var(--aq-muted); opacity: 0.6; }
.aq a.aqc-row:hover, .aq button.aqc-row:hover { background: color-mix(in srgb, var(--aq-text) 4%, transparent); }
.aq a.aqc-row:active, .aq button.aqc-row:active { background: color-mix(in srgb, var(--aq-text) 9%, transparent); }
.aq a.aqc-row { color: var(--aq-text); }
.aqc-action > .aq-item-label { color: var(--aq-signal); font-weight: 500; }
.aqc-action.danger > .aq-item-label { color: var(--aq-red); }
.aqc-link-label { color: var(--aq-signal); font-weight: 500; }
.aqc-row-icon { display: flex; flex: none; color: var(--aq-muted); }
.aqc-row-icon.accent { color: var(--aq-signal); }
.aqc-lead-dot { margin-top: 7px; }
.aqc-sub-line { display: block; color: var(--aq-text); margin-bottom: 2px; }
.aqc-text-row > .aq-item-label { white-space: pre-wrap; }
.aqc-feed-row > .aq-item-label { font-size: var(--aq-fs-sm); letter-spacing: 0; }
.aqc-feed-row > .aq-item-label small { font-size: var(--aq-fs-xs); }

.aqc-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
.aqc-columns.single { grid-template-columns: minmax(0, 1fr); }
.aqc-columns.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aqc-column { min-width: 0; }
@media (max-width: 1100px) {
  .aqc-columns, .aqc-columns.even { grid-template-columns: minmax(0, 1fr); }
  .aqc-columns.reflow { display: flex; flex-direction: column; align-items: stretch; }
  .aqc-columns.reflow > .aqc-column { display: contents; }
  .aqc-o1 { order: 1; } .aqc-o2 { order: 2; } .aqc-o3 { order: 3; } .aqc-o4 { order: 4; } .aqc-o5 { order: 5; } .aqc-o6 { order: 6; } .aqc-o7 { order: 7; }
}

/* ---------- small pieces ---------- */
/* Badge text a fifth of the way towards the text colour: the kit's tints reach only about 4:1 at 12 px,
   this keeps the hue and passes WCAG AA (4.5:1) in both themes. Suggested for the kit. */
.aq .aq-badge { color: color-mix(in srgb, var(--aq-muted) 70%, var(--aq-text)); }
.aq .aq-badge.ok { color: color-mix(in srgb, var(--aq-green) 80%, var(--aq-text)); }
.aq .aq-badge.warn { color: color-mix(in srgb, var(--aq-amber) 80%, var(--aq-text)); }
.aq .aq-badge.bad { color: color-mix(in srgb, var(--aq-red) 80%, var(--aq-text)); }
.aq .aq-badge.accent { color: color-mix(in srgb, var(--aq-signal) 80%, var(--aq-text)); }
/* The kit's .quiet sets the accent colour after .danger; a quiet destructive button stays red. */
.aq-btn.danger.quiet { color: var(--aq-red); }
.aq-btn.danger.quiet:hover, .aq-btn.danger.quiet:active { background: color-mix(in srgb, var(--aq-red) 12%, transparent); }
.aqc-filter-row .aq-input::placeholder { color: var(--aq-muted); }
.aqc-state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.aqc-inline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
/* A badge in a cell hugs its text: children keep their own width instead of stretching. */
.aqc-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.aqc-cell > small { color: var(--aq-muted); font-size: var(--aq-fs-xs); letter-spacing: 0.005em; }
.aqc-code { font-family: var(--aq-font-mono); font-size: 0.88em; letter-spacing: 0; overflow-wrap: anywhere; }
.aqc-hash { word-break: break-all; }
.aqc-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Versions keep proportional figures: tabular ones space the hyphen of "2.2.0-beta.2" apart. */
.aqc-ver { white-space: nowrap; }
.aqc-nowrap { white-space: nowrap; }
.aqc-end, .aq-table th.aqc-end, .aq-table td.aqc-end { text-align: right; }
.aqc-strong { font-weight: 600; }
.aq a.aqc-strong { color: var(--aq-text); }
.aqc-you { margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: var(--aq-rail); color: color-mix(in srgb, var(--aq-muted) 70%, var(--aq-text)); font-size: var(--aq-fs-xs); font-weight: 500; vertical-align: 1px; }
.aqc-scopes { display: flex; flex-wrap: wrap; gap: 4px; }
.aqc-scopes .aq-badge { font-family: var(--aq-font-mono); font-size: 0.6875rem; color: var(--aq-text); }
.aqc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aqc-clip { display: block; max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aqc-loading { padding: 28px 4px; color: var(--aq-muted); }
.aqc-result { transition: opacity 120ms linear; }
.aqc-result[aria-busy="true"] { opacity: 0.55; }
.aqc-more-row { display: flex; justify-content: center; margin-top: 16px; }
.aq-empty .aqc-empty-text { margin: 0 auto; max-width: 52ch; }
.aqc-empty-action { margin-top: 18px; }
.aqc-page:has(.aqc-first-run) .aqc-head-actions, .aqc-page:has(.aqc-first-run) .aqc-filters, .aqc-page:has(.aqc-first-run) .aqc-list-head,
.aqc-page:has(.aqc-first-run-keep-filters) .aqc-head-actions { display: none; }
.aqc-note { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.aqc-note-text { flex: 1 1 320px; min-width: 0; }
.aqc-note-text strong { font-weight: 600; }
.aqc-step { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--aq-rail); color: var(--aq-text); font: 600 var(--aq-fs-xs)/24px var(--aq-font); text-align: center; font-variant-numeric: tabular-nums; }
.aqc-step-row { align-items: flex-start; gap: 14px; padding: 14px 16px; }
.aqc-step-body { flex: 1; min-width: 0; padding-top: 1px; }
.aqc-step-body p { max-width: 64ch; }

/* ---------- channels: Dev, Beta, Stable side by side ---------- */
.aqc-channels {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--aq-deck); border-radius: var(--aq-r-lg); box-shadow: 0 0 0 1px var(--aq-hairline); overflow: hidden;
}
.aqc-channel { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 20px 18px; color: var(--aq-text); }
.aqc-channel + .aqc-channel::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--aq-hairline); }
.aq a.aqc-channel { color: var(--aq-text); text-decoration: none; transition: background-color var(--aq-t-press) linear; }
.aq a.aqc-channel:hover { background: color-mix(in srgb, var(--aq-text) 4%, transparent); }
.aq a.aqc-channel:active { background: color-mix(in srgb, var(--aq-text) 9%, transparent); }
.aqc-channel-name { display: flex; align-items: center; gap: 8px; font-size: var(--aq-fs-sm); font-weight: 600; letter-spacing: 0; color: var(--aq-muted); }
.aqc-channel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aq-muted); flex: none; }
.aqc-channel[data-channel="beta"] .aqc-channel-dot { background: var(--aq-amber); }
.aqc-channel[data-channel="stable"] .aqc-channel-dot { background: var(--aq-green); }
.aqc-channel-here { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--aq-signal); }
.aqc-channel-version { margin-top: 2px; font: 600 var(--aq-fs-2xl)/1.15 var(--aq-font-legend); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.aqc-channel-version.none { font-size: var(--aq-fs-lg); line-height: 1.6; color: var(--aq-muted); font-weight: 500; letter-spacing: -0.008em; }
.aqc-channel-note { font-size: var(--aq-fs-sm); line-height: 1.4; letter-spacing: 0; color: var(--aq-muted); }
.aqc-channel .aq-btn { align-self: flex-start; margin-top: 12px; }
.aqc-channel.current { background: color-mix(in srgb, var(--aq-signal) 8%, var(--aq-deck)); }
.aqc-channel.current .aqc-channel-name { color: var(--aq-text); }
.aqc-channel.current + .aqc-channel::before, .aqc-channel:has(+ .current)::after { opacity: 0; }
.aqc-channel.muted { color: var(--aq-muted); }

@media (max-width: 700px) {
  .aqc-channels { grid-template-columns: minmax(0, 1fr); }
  .aqc-channel { padding: 14px 16px 16px; }
  .aqc-channel + .aqc-channel::before { left: 16px; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .aqc-channel-version { font-size: var(--aq-fs-xl); }
}

/* ---------- figures and bars ---------- */
.aqc-fleet { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 16px 18px; }
.aqc-fleet-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.aqc-stat { font: 600 var(--aq-fs-3xl)/1 var(--aq-font-legend); letter-spacing: -0.026em; font-variant-numeric: tabular-nums; }
.aqc-fleet-of { color: var(--aq-muted); }
.aqc-bar { display: flex; flex: 1; min-width: 40px; height: 6px; border-radius: 3px; background: var(--aq-rail-2); overflow: hidden; }
.aqc-bar.large { flex: none; height: 8px; border-radius: 4px; }
.aqc-bar > i { display: block; height: 100%; width: var(--w, 0%); transition: width var(--aq-t-sheet) var(--aq-ease); }
.aqc-bar-on { background: var(--aq-green); }
.aqc-bar-off { background: color-mix(in srgb, var(--aq-muted) 55%, transparent); }
.aqc-bar-row { gap: 16px; }
.aqc-bar-version { width: 112px; flex: none; font-weight: 500; overflow-wrap: anywhere; }
.aqc-bar-count { width: 76px; flex: none; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; }
.aqc-bar-count small { display: block; color: var(--aq-muted); font-size: var(--aq-fs-xs); }
.aq a.aqc-bar-row { color: var(--aq-text); }

/* ---------- tables: a desk table, and a grouped list on a phone ---------- */
.aqc-table .aq-table { font-size: 0.875rem; }
.aqc-table .aq-table th { padding: 10px 16px; }
.aqc-table .aq-table td { padding: 12px 16px; }
.aqc-table .aq-table tbody tr:focus-visible { outline-offset: -3px; }
.aqc-sort {
  display: inline-flex; align-items: center; gap: 5px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer;
}
.aqc-sort:hover { color: var(--aq-text); background: color-mix(in srgb, var(--aq-text) 6%, transparent); }
.aqc-sort-mark { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
th[aria-sort="ascending"] .aqc-sort-mark { opacity: 1; transform: rotate(-135deg) translate(-1px, -1px); }
th[aria-sort="descending"] .aqc-sort-mark { opacity: 1; }
th[aria-sort="ascending"] .aqc-sort, th[aria-sort="descending"] .aqc-sort { color: var(--aq-text); }
.aqc-phone-list { display: none; }
.aqc-phone-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 600; }
.aqc-phone-row > .aq-item-label small { display: flex; flex-wrap: wrap; gap: 0 4px; }
.aqc-list-head { display: flex; align-items: center; min-height: 20px; margin: 0 4px 8px; }
.aqc-filter-count { font-size: var(--aq-fs-sm); color: var(--aq-muted); letter-spacing: 0; }

@media (max-width: 1000px) { .aqc-wide-only { display: none; } }
@media (max-width: 700px) {
  .aqc-desk-table { display: none; }
  .aqc-phone-list { display: block; }
}

/* ---------- filters ---------- */
.aqc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 16px; }
.aqc-search { position: relative; flex: 1 1 300px; max-width: 400px; }
.aqc-search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--aq-muted); pointer-events: none; }
.aqc-search > .aq-input { padding-left: 34px; }
.aqc-search > .aq-input::-webkit-search-cancel-button { cursor: pointer; }
.aqc-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.aqc-filter-row .aq-select, .aqc-filter-row .aq-input {
  width: auto; min-height: 32px; padding: 4px 30px 4px 13px; border-radius: 999px; font-size: var(--aq-fs-sm); letter-spacing: 0;
}
.aqc-filter-row .aq-input { padding-right: 13px; }
.aqc-filter-row .aqc-version-filter { width: 112px; }
.aqc-filter-row .aq-select[data-set], .aqc-filter-row .aq-input[data-set] {
  background-color: color-mix(in srgb, var(--aq-signal) 14%, var(--aq-deck)); color: var(--aq-text); font-weight: 500;
}
.aqc-chip { display: inline-flex; align-items: center; gap: 2px; padding-left: 13px; border-radius: 999px; background: var(--aq-rail); font-size: var(--aq-fs-sm); letter-spacing: 0; }

@media (max-width: 700px) {
  .aqc-filters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .aqc-search { max-width: none; flex-basis: auto; }
  /* The pills wrap onto further lines; nothing scrolls sideways. */
  .aqc-filter-row { gap: 8px 6px; }
  .aqc-filter-row .aq-select, .aqc-filter-row .aq-input { max-width: 100%; }
}

/* ---------- forms ---------- */
.aqc-form { display: flex; flex-direction: column; gap: 16px; }
.aqc-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.aqc-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.aqc-group-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.aqc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.aqc-toggle-text { flex: 1; min-width: 0; line-height: 1.35; }
.aqc-toggle-text small { display: block; margin-top: 3px; font-size: var(--aq-fs-sm); letter-spacing: 0; color: var(--aq-muted); line-height: 1.4; }
.aqc-toggle-row { padding: 12px 16px; }
.aqc-toggle-row > .aqc-toggle { flex: 1; }
.aqc-field-row { gap: 10px; cursor: text; }
.aqc-field-row .aqc-number { width: 112px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.aqc-check-row { gap: 12px; cursor: pointer; }
.aqc-check-row input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--aq-signal); }
.aqc-check-row small { color: var(--aq-muted); }
.aqc-seg-fill { display: flex; }
.aqc-seg-fill > button { flex: 1; }
.aqc-caption { font-size: var(--aq-fs-sm); letter-spacing: 0; color: var(--aq-muted); }
.aqc-file-input { padding: 6px 8px; }
.aqc-file-input::file-selector-button {
  margin-right: 12px; padding: 4px 12px; border: 0; border-radius: 8px; background: var(--aq-deck); color: var(--aq-text);
  font: 500 var(--aq-fs-sm)/1.3 var(--aq-font); cursor: pointer;
}
@media (max-width: 600px) { .aqc-form-pair { grid-template-columns: minmax(0, 1fr); } }

/* Surfaces inside a sheet sit one step back from it. */
.aqc-sheet .aq-list, .aqc-inset-list { background: color-mix(in srgb, var(--aq-rail) 55%, var(--aq-deck)); box-shadow: none; }
.aqc-sheet .aqc-toggle { padding: 2px 0; }

/* ---------- code, copy, release notes ---------- */
.aqc-copy { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.aq .aqc-copy pre {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--aq-r); background: color-mix(in srgb, var(--aq-rail) 70%, var(--aq-deck));
  font-size: 0.78rem; line-height: 1.5; white-space: pre; overflow-x: auto;
}
.aq .aqc-copy.wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.aqc-copy-btn { flex: none; }
.aq .aqc-pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 56vh; background: color-mix(in srgb, var(--aq-rail) 70%, var(--aq-deck)); font-size: 0.8rem; }
.aqc-notes { line-height: 1.5; }
.aqc-notes ul { margin: 0; padding-left: 20px; }
.aqc-notes li + li { margin-top: 3px; }
.aq .aqc-notes h3 { font-size: var(--aq-fs); }
.aqc-preview { padding: 14px 16px; border-radius: var(--aq-r); background: color-mix(in srgb, var(--aq-rail) 60%, var(--aq-deck)); font-size: var(--aq-fs-sm); letter-spacing: 0; }
.aqc-preview > .aq-stack { gap: 8px; }

/* ---------- upload ---------- */
.aqc-drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; border-radius: var(--aq-r-lg); text-align: center;
  background: color-mix(in srgb, var(--aq-rail) 55%, var(--aq-deck)); outline: 1.5px dashed color-mix(in srgb, var(--aq-muted) 55%, transparent); outline-offset: -1.5px;
  transition: background-color var(--aq-t) var(--aq-ease), outline-color var(--aq-t) linear;
}
.aqc-drop[data-over="true"] { outline-color: var(--aq-signal); background: color-mix(in srgb, var(--aq-signal) 10%, var(--aq-deck)); }
.aqc-drop strong { font: 600 var(--aq-fs-lg)/1.3 var(--aq-font-legend); letter-spacing: -0.012em; }
.aqc-drop > .aq-muted { max-width: 44ch; font-size: var(--aq-fs-sm); letter-spacing: 0; }
.aqc-drop > .aq-btn { margin-top: 6px; }
.aqc-drop-icon { display: flex; color: var(--aq-muted); margin-bottom: 2px; }
.aqc-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.aqc-drop-file, .aqc-sheet-file { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: var(--aq-r-lg); background: color-mix(in srgb, var(--aq-rail) 55%, var(--aq-deck)); }
.aqc-drop-file-icon { display: flex; color: var(--aq-signal); }
.aqc-drop-file-text, .aqc-sheet-file-text { flex: 1; min-width: 0; line-height: 1.3; }
.aqc-drop-file-text strong, .aqc-sheet-file-text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.aqc-drop-file-text small, .aqc-sheet-file-text small { display: block; color: var(--aq-muted); font-size: var(--aq-fs-xs); }
.aqc-progress { display: flex; flex-direction: column; gap: 10px; }
.aqc-progress .aq-meter > i { background: var(--aq-signal); }
.aqc-progress-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--aq-fs-sm); letter-spacing: 0; color: var(--aq-muted); }
/* A package dragged over the releases page: the whole page is the target. */
.aqc-page { position: relative; }
.aqc-page[data-over="true"]::after {
  content: "Loslassen, um das Paket hochzuladen"; position: fixed; inset: 16px 16px 16px calc(252px + 16px); z-index: 40; pointer-events: none;
  display: grid; place-items: center; border-radius: var(--aq-r-xl); outline: 2px dashed var(--aq-signal); outline-offset: -2px;
  background: color-mix(in srgb, var(--aq-signal) 10%, transparent); color: var(--aq-signal); font: 600 var(--aq-fs-lg)/1.3 var(--aq-font-legend);
}
@media (max-width: 860px) { .aqc-page[data-over="true"]::after { left: 16px; } }

/* ---------- sheets ---------- */
.aqc-sheet.wide { width: min(780px, calc(100vw - 28px)); }
.aqc-sheet > header { position: relative; }
.aqc-sheet > header h2 { overflow-wrap: anywhere; }
.aqc-sheet-sub { margin-top: 4px; color: var(--aq-muted); }
.aqc-sheet > .body { padding-top: 16px; max-height: calc(100dvh - 190px); }
.aqc-sheet > .body > p { line-height: 1.5; }
.aqc-sheet > footer { align-items: center; }
.aqc-sheet > footer .aqc-start { margin-right: auto; }
.aqc-grabber { display: none; }
.aqc-more { display: flex; flex-direction: column; gap: 20px; }
.aqc-more .aqc-theme > button { padding: 4px 10px; }

/* On a phone a sheet comes up from the bottom edge and goes back down; the grabber says it can be pulled. */
@media (max-width: 600px) {
  dialog.aq-dialog.aqc-sheet {
    margin: auto 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - 24px); border-radius: var(--aq-r-xl) var(--aq-r-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom); opacity: 1; transform: translateY(100%);
  }
  dialog.aq-dialog.aqc-sheet[open] { transform: none; }
  @starting-style { dialog.aq-dialog.aqc-sheet[open] { transform: translateY(100%); } }
  .aqc-sheet > header { padding: 10px 20px 0; touch-action: none; cursor: grab; }
  .aqc-grabber { display: block; width: 36px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--aq-rail-2); }
  .aqc-sheet > .body { padding: 14px 20px 8px; max-height: none; }
  .aqc-sheet > footer { padding: 12px 20px 20px; }
  .aqc-sheet > footer .aq-btn { flex: 1 1 0; min-height: 44px; }
  .aqc-sheet > footer .aqc-start { flex: 0 0 auto; }
}

/* ---------- sign in ---------- */
.aqc-login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 40px 16px; }
.aqc-login-box { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.aqc-login-icon { border-radius: 15px; margin-bottom: 18px; }
.aq .aqc-login-title { font: 700 var(--aq-fs-2xl)/1.15 var(--aq-font-legend); letter-spacing: -0.022em; }
.aq .aqc-login-sub { margin: 6px 0 26px; color: var(--aq-muted); }
.aqc-login-box > .aq-note { width: 100%; margin-bottom: 14px; text-align: left; }
.aqc-login-form {
  width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 24px; text-align: left;
  background: var(--aq-deck); border-radius: var(--aq-r-xl); box-shadow: 0 0 0 1px var(--aq-hairline);
}
.aqc-login-form .aq-btn { width: 100%; margin-top: 4px; }
.aqc-login-form .aq-input { min-height: 42px; }
.aqc-login-foot { display: flex; align-items: center; gap: 12px; font-size: var(--aq-fs-sm); }

@media (prefers-reduced-motion: reduce) {
  dialog.aq-dialog.aqc-sheet, dialog.aq-dialog.aqc-sheet[open] { transform: none; }
}
@media (prefers-contrast: more) {
  .aqc-tabbar { background: var(--aq-deck); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .aqc-channels, .aqc-login-form { box-shadow: 0 0 0 1px var(--aq-hairline); }
}
@media (prefers-reduced-transparency: reduce) {
  .aqc-tabbar { background: var(--aq-deck); -webkit-backdrop-filter: none; backdrop-filter: none; }
}