/*
 * Swavo app layer: the chrome every signed-in surface shares (webmail, settings, login, documents).
 * Load after tokens.css and base.css. Plain elements (button, input, select, table, details, dialog) inside .app get the Swavo
 * look with one class of specificity (.app :where(...)), so markup without classes looks right and app CSS wins easily.
 *
 *   <body class="app">
 *     <header class="app-bar"><a class="app-logo" href="/">…mark + wordmark…</a><nav class="app-nav">…</nav></header>
 *     <main class="app-main">…</main>
 *
 * Login and other signed-out pages: <body class="app auth-page"> with <main class="auth-card">.
 */

:root {
  /* The app bar is ink in both themes: the brand's night blue, like the website's hero. */
  --app-bar-bg: var(--ink-850);
  --app-bar-fg: var(--cream-100);
  --app-bar-muted: rgb(248 246 241 / 0.72); /* 8.9:1 on --app-bar-bg */
  --app-bar-hover: rgb(255 255 255 / 0.08);
  --app-bar-active: rgb(255 255 255 / 0.13);
  --app-bar-line: rgb(255 255 255 / 0.07);
  --app-bar-height: 3.75rem;
  --app-glow: radial-gradient(48rem 9rem at 8% -40%, rgb(255 106 43 / 0.22), transparent 70%),
    radial-gradient(40rem 12rem at 100% -60%, rgb(90 120 232 / 0.2), transparent 70%);
  --row-hover: var(--surface-2);
  --row-selected: var(--accent-soft);
  --avatar-fg: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --app-bar-bg: #0d1019;
    --app-bar-line: rgb(255 255 255 / 0.06);
    --row-hover: var(--surface-2);
  }
}
:root[data-theme='dark'] {
  --app-bar-bg: #0d1019;
  --app-bar-line: rgb(255 255 255 / 0.06);
  --row-hover: var(--surface-2);
}

/* Author display rules (buttons are inline-flex) must not un-hide [hidden] elements. */
[hidden] {
  display: none !important;
}
html {
  scroll-padding-top: calc(var(--app-bar-height) + var(--space-4));
}
body.app {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- App bar ---------- */
.app-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-height: var(--app-bar-height);
  padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--space-2)
    max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--app-glow), var(--app-bar-bg);
  color: var(--app-bar-fg);
  border-bottom: 1px solid var(--app-bar-line);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 8px 24px -16px rgb(10 12 19 / 0.5);
  --focus-ring: 0 0 0 2px var(--app-bar-bg), 0 0 0 4px var(--ember-400);
}
.app-bar :where(a) {
  color: inherit;
}
.app-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  color: var(--app-bar-fg);
  font-size: 1.0625rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.app-logo .logo-mark {
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.5em;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16), 0 6px 16px -6px rgb(255 106 43 / 0.55);
}
.app-logo .logo-word {
  height: 1.05em;
  width: auto;
}
.app-logo .app-name {
  margin-left: 0.15rem;
  padding-left: 0.65rem;
  border-left: 1px solid rgb(255 255 255 / 0.18);
  color: var(--app-bar-muted);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
}
.app-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-nav::-webkit-scrollbar {
  display: none;
}
/* Phone: the section links get their own scrollable row under the logo. */
@media (max-width: 48rem) {
  .app-bar:has(> .app-nav:not(.tools)) {
    flex-wrap: wrap;
    padding-bottom: 0;
  }
  .app-bar > .app-nav:not(.tools) {
    order: 2;
    flex: 1 0 100%;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) var(--space-2);
  }
}
.app-nav a,
.app-nav button.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: 2.25rem;
  padding: 0 0.8rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--app-bar-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.app-nav a:hover,
.app-nav button.link:hover {
  background: var(--app-bar-hover);
  color: var(--app-bar-fg);
}
.app-nav a[aria-current='page'] {
  background: var(--app-bar-active);
  color: var(--app-bar-fg);
}
/* Small count pill (pending approvals, unread). */
.pill,
.app-nav .count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-full);
  background: var(--ember-500);
  color: #1a0b04;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ---------- Page ---------- */
.app-main {
  width: 100%;
  max-width: calc(var(--width-narrow) + 12rem);
  margin: 0 auto;
  padding: var(--space-8) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--space-16) + env(safe-area-inset-bottom, 0px))
    max(var(--gutter), env(safe-area-inset-left, 0px));
}
.page-title,
.app-main > h1:first-child {
  margin: 0 0 var(--space-6);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

/* ---------- Plain elements ---------- */
.app :where(button, .button, a.button) {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  --btn-hover: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-instant) var(--ease-out);
}
.app :where(button, .button, a.button):hover {
  background: var(--btn-hover);
}
.app :where(button, .button, a.button):active:not(:disabled) {
  transform: translateY(1px);
}
.app :where(button, .button, a.button):focus-visible {
  border-radius: var(--radius-md);
}
.app :where(button, .button):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.app :where(button, .button, a.button).primary {
  --btn-bg: var(--primary);
  --btn-fg: var(--text-on-primary);
  --btn-border: transparent;
  --btn-hover: var(--primary-hover);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.app :where(button, .button, a.button).accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--text-on-accent);
  --btn-border: transparent;
  --btn-hover: var(--accent-hover);
  box-shadow: var(--shadow-sm), 0 6px 18px -8px rgb(255 106 43 / 0.6);
}
.app :where(button, .button, a.button).success {
  --btn-bg: var(--success-fill);
  --btn-fg: #fff;
  --btn-border: transparent;
  --btn-hover: #136b41;
}
.app :where(button, .button, a.button).danger {
  --btn-fg: var(--danger);
  --btn-border: var(--danger-border);
  --btn-hover: var(--danger-soft);
}
.app :where(button.link) {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--accent-text);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.2em;
}
.app :where(button.link):hover {
  background: none;
  text-decoration-color: currentColor;
}

.app :where(input:not([type='checkbox'], [type='radio'], [type='file'], [type='hidden'], [type='range'], [type='color']), select, textarea) {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: max(16px, var(--text-md));
  line-height: var(--leading-snug);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.app :where(input, select, textarea):hover:not(:focus-visible, :disabled, [type='checkbox'], [type='radio']) {
  border-color: var(--text-3);
}
.app :where(input, select, textarea):focus-visible {
  border-color: var(--focus-ring-color);
  border-radius: var(--radius-md);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft-2);
}
.app :where(input, textarea)::placeholder {
  color: var(--text-3);
}
.app select:not([multiple]) {
  appearance: none;
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 52%, calc(100% - 0.75rem) 52%;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}
.app textarea {
  resize: vertical;
  line-height: var(--leading-normal);
}
.app :where(input[type='checkbox'], input[type='radio']) {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.app input[type='file'] {
  max-width: 100%;
  font-size: var(--text-sm);
}
.app input[type='file']::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.app progress {
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  overflow: hidden;
  accent-color: var(--accent);
}
.app progress::-webkit-progress-bar {
  background: var(--surface-3);
}
.app progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--ember-600), var(--ember-400));
  border-radius: var(--radius-full);
}
.app progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--ember-600), var(--ember-400));
}

.app fieldset {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.app legend {
  padding: 0 var(--space-1-5);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.app table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.app :where(th, td) {
  padding: var(--space-2-5, 0.625rem) var(--space-3);
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}
.app th {
  color: var(--text-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.app tr:last-child > td {
  border-bottom: 0;
}

.app details > summary {
  cursor: pointer;
}
.app pre {
  overflow-x: auto;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
}

/* ---------- Dialog ---------- */
.app dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xl);
}
.app dialog::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(3px);
}
.app dialog[open] {
  animation: app-pop var(--duration-base) var(--ease-out);
}
@keyframes app-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

/* ---------- Status badges and AI notes ---------- */
.ai-note {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 1.5rem);
  border: 1px dashed var(--accent-border);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.ai-note::before {
  content: '✦';
  position: absolute;
  left: var(--space-4);
  top: var(--space-3);
  color: var(--accent-vivid);
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------- Toast ---------- */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  box-shadow: var(--shadow-xl);
  transform: translateX(-50%);
  animation: app-toast var(--duration-slow) var(--ease-spring);
}
@keyframes app-toast {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}

/* ---------- Avatar (initials) ---------- */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--avatar-bg, var(--ink-600));
  color: var(--avatar-fg);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  user-select: none;
}
/* Eight hues from the palette, picked by data-hue (0–7). All carry white text at ≥ 4.5:1. */
.avatar[data-hue='0'] { --avatar-bg: #c8430e; }
.avatar[data-hue='1'] { --avatar-bg: #2b45a8; }
.avatar[data-hue='2'] { --avatar-bg: #157347; }
.avatar[data-hue='3'] { --avatar-bg: #7656e0; }
.avatar[data-hue='4'] { --avatar-bg: #8f5300; }
.avatar[data-hue='5'] { --avatar-bg: #b4232c; }
.avatar[data-hue='6'] { --avatar-bg: #3d4559; }
.avatar[data-hue='7'] { --avatar-bg: #0f6b7a; }

/* ---------- Signed-out pages (login, sign-up, consent, errors) ---------- */
body.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: calc(var(--space-10) + env(safe-area-inset-top, 0px)) var(--space-4) calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(60rem 36rem at 15% 0%, rgb(255 106 43 / 0.2), transparent 60%),
    radial-gradient(50rem 40rem at 100% 100%, rgb(90 120 232 / 0.2), transparent 60%),
    linear-gradient(180deg, var(--ink-850), var(--ink-950));
  color: var(--text);
}
html:has(> body.auth-page) {
  background: var(--ink-950);
}
/* A faint grid over the dark backdrop, as on swavo.de. */
body.auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}
body.auth-page > * {
  position: relative;
  z-index: 1;
}
.auth-brand .app-logo {
  font-size: 1.35rem;
  --focus-ring: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--ember-400);
}
.auth-card {
  width: 100%;
  max-width: 28rem;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, var(--shadow-xl);
  animation: app-rise var(--duration-slow) var(--ease-out);
}
@media (min-width: 30rem) {
  .auth-card {
    padding: var(--space-10);
  }
}
.auth-card > h1:first-child {
  margin: 0 0 var(--space-5);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}
.auth-foot {
  color: rgb(248 246 241 / 0.62);
  font-size: var(--text-xs);
  text-align: center;
}
.auth-foot a {
  color: inherit;
}
@keyframes app-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}