/*
 * K24 Pulse: the kündigen24.ch usage console.
 *
 * The product's own brand (frontend/app/globals.css): ink on warm paper,
 * white surfaces, red #eb0000 only for the active section, primary actions,
 * the logo mark and focus; Inter with tabular figures. Built to the craft of
 * Stripe Dashboard, Linear and Vercel: a sidebar shell, key numbers in soft
 * cards, light tables, rounded controls, quiet motion.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/inter-latin-496a588b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/inter-latin-ext-5a6754fc.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* kündigen24.ch brand */
  --paper: #fafaf7;
  --surface: #ffffff;
  --ink: #1d2129;
  --ink-2: #565d6b;          /* secondary text, 6.6:1 on white */
  --ink-3: #6b717c;          /* hints, 4.9:1 on white, 4.7:1 on paper */
  --line: #dfe1e5;
  --line-soft: #eceef1;      /* row separators */
  --line-strong: #b9bdc4;
  --control: #c9ccd2;        /* field and button borders */
  --hover: #f3f3ef;
  --muted-bg: #eff0f2;
  --head-bg: #fbfbf9;        /* table heads */

  --red: #eb0000;
  --red-hover: #c20000;
  --success: #1f8a4c;
  --success-text: #17703c;   /* 5.5:1 on its tint */
  --success-bg: #eaf6ee;
  --info: #3a66a0;
  --info-bg: #eef3f9;
  --warning: #c93c3c;
  --warning-bg: #fff1f1;
  --error: #b4321e;
  --error-bg: #f9e4e0;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 0 0 1px rgb(29 33 41 / 0.06), 0 1px 3px rgb(29 33 41 / 0.06);
  --shadow-raised: 0 0 0 1px rgb(29 33 41 / 0.06), 0 8px 24px -6px rgb(29 33 41 / 0.18);
  --shadow-control: 0 1px 2px rgb(29 33 41 / 0.05);
  --shadow-cta: 0 2px 6px rgb(29 33 41 / 0.12);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sidebar: 248px;

  color-scheme: light;
  accent-color: var(--red);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html.no-scroll { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: color-mix(in oklab, var(--red), transparent 82%); }

a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; }
h2 { font-size: 15px; line-height: 1.4; letter-spacing: -0.01em; }

code, .mono { font-family: var(--mono); font-size: 0.88em; }

.faint { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.num { text-align: right; white-space: nowrap; }
.icon { flex: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px; top: -48px;
  z-index: 50;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  font-weight: 600;
}
.skip-link:focus { top: 8px; box-shadow: var(--shadow-raised); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
p, h1, h2 { text-wrap: pretty; }

/* ---------------------------------------------------------------- shell */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100dvh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 18px 14px 14px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  view-transition-name: sidebar;
}
.sidebar__top { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 22px; }
.iconbtn.sidebar__close { display: none; }

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand__mark { display: inline-flex; color: var(--red); }
.brand__name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.brand__name strong { font-weight: 700; }

.nav { display: grid; gap: 2px; }
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav__item > * { position: relative; }
.nav__item:hover { background: var(--hover); color: var(--ink); }
.nav__item[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__item[aria-current="page"] .icon { color: var(--red); }
.nav__highlight {
  position: absolute !important;
  inset: 0;
  border-radius: var(--radius-md);
  background: var(--hover);
  box-shadow: inset 0 0 0 1px rgb(29 33 41 / 0.04);
  view-transition-name: nav-active;
}
.nav__label { flex: 1; }

.sidebar__bottom { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 16px; }

.user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 0 8px;
  border-top: 1px solid var(--line-soft);
}
.user form { margin: 0; }
.user__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--muted-bg);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.user__email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-2); }

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}
.iconbtn:hover { background: var(--muted-bg); color: var(--ink); }
.iconbtn:active { transform: scale(0.95); }

.mobilebar { display: none; }
.backdrop { display: none; }

.main { min-width: 0; padding: 32px clamp(16px, 3vw, 40px) 64px; }

/* The page under the sidebar is a Turbo Frame (layouts/_page). While a
   filter's answer is on its way, everything but the controls fades back a
   little: after a moment, so a quick answer doesn't flicker. */
#page { display: block; }
#page.is-loading > :not(.page-head, .toolbar),
#page.is-loading .toolbar__end { opacity: 0.55; transition: opacity 200ms ease 150ms; }

/* ----------------------------------------------------------- sync status */

/* The pulse: the status dot breathes out a soft ring while a sync runs. */
.sync { display: grid; gap: 10px; padding: 12px; border-radius: var(--radius-md); background: var(--paper); }
.sync form { margin: 0; }
.sync__state { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13px; color: var(--ink-2); }
.sync__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.sync--stale .sync__dot { background: var(--warning); }
.sync--failed .sync__dot { background: var(--error); }
.sync--never .sync__dot { background: var(--line-strong); }
.sync--running .sync__dot { background: var(--info); }
.sync--running .sync__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--info);
  animation: pulse 1.6s var(--ease-out) infinite;
}
.sync--failed .sync__summary { color: var(--error); font-weight: 500; }
.sync__button { width: 100%; }
.sync--running .sync__button .icon { animation: spin 900ms linear infinite; }

@keyframes pulse {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(3.2); opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- layout */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 24px;
}
.page-head__title p { margin: 4px 0 0; color: var(--ink-2); }
.page-head__sub { color: var(--ink-2); font-weight: 500; }
.page-head--order { margin-bottom: 16px; }

.section { margin-top: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; gap: 24px; margin-top: 24px; }
.grid-2 > .section { margin-top: 0; }

/* Three cards in a row on a wide screen. Narrower, the first takes the full
   width and the other two sit side by side, then stack. Cards in a row share
   its height, with a table card's foot at the bottom. */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; margin-top: 24px; }
.grid-3 > .section { margin-top: 0; }
.grid-3 > :first-child { grid-column: 1 / -1; }
.grid-3 > .card--table { display: flex; flex-direction: column; }
.grid-3 .card__foot { margin-top: auto; }
@media screen and (min-width: 1400px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 > :first-child { grid-column: auto; }
}

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.card--table { padding: 0; overflow: clip; }
.card--table > .card__head { margin: 0; padding: 16px 20px 14px; }
.card__foot { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-3); }
.card__foot strong { margin-left: 4px; font-weight: 600; color: var(--ink); }
.card__note { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }

.section__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.section__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.section__link:hover { color: var(--ink); }
.section__link .icon { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .section__link:hover .icon { transform: translateX(2px); }
}

/* -------------------------------------------------------------- flash */

.flash { margin-bottom: 20px; }
.flash p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--info-bg);
  color: var(--info);
  font-size: 14px;
}
.flash p.flash--alert { background: var(--error-bg); color: var(--error); }

/* ------------------------------------------------------- buttons, fields */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--control);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease,
    transform 120ms var(--ease-out);
}
.btn:hover { border-color: var(--line-strong); background: var(--paper); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn--primary { border-color: var(--red); background: var(--red); color: var(--surface); box-shadow: var(--shadow-cta); }
.btn--primary:hover { border-color: var(--red-hover); background: var(--red-hover); }
.btn--dark { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.btn--dark:hover { border-color: #000; background: #000; }
.btn--quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); padding: 0 10px; }
.btn--quiet:hover { border-color: transparent; background: var(--muted-bg); color: var(--ink); }
.btn--small { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn--block { width: 100%; height: 42px; }

.input, .select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--control);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.select {
  appearance: none;
  padding-right: 34px;
  font-weight: 500;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23565d6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  cursor: pointer;
}
.input:hover, .select:hover { border-color: var(--line-strong); }
/* Fields get a quiet ink ring: red around an input reads as an error. */
.input:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(29 33 41 / 0.12);
}
.input::placeholder { color: var(--ink-3); }
input[type="date"].input { padding: 0 10px; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }

/* -------------------------------------------------------- period picker */

.period { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.period__select { min-width: 160px; }
.period__custom { display: none; align-items: center; gap: 6px; color: var(--ink-3); }
.period:has(option[value="custom"]:checked) .period__custom,
.period--custom .period__custom { display: inline-flex; }
.period__custom .input { width: 150px; }
.period__range { display: flex; flex-direction: column; min-width: 112px; padding: 0 4px; line-height: 1.3; }
.period__range strong { font-weight: 500; }
.period--custom .period__range { min-width: 0; }
.period--custom .period__range strong { display: none; }

/* ------------------------------------------------------- figure cards */

.figures {
  display: grid;
  grid-template-columns: minmax(0, var(--lead, 1.7fr)) repeat(var(--rest, 4), minmax(0, 1fr));
  gap: 16px;
}
.figures:has(> .figure:nth-child(6)) { --rest: 5; --lead: 1.5fr; }
.figures:has(> .figure:nth-child(4):last-child) { --rest: 3; }
.figures:has(> .figure:nth-child(3):last-child) { --rest: 2; --lead: 1.4fr; }

.figure {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 20px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.figure__label { font-size: 13px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.figure__row { display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; }
.figure__value { font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; white-space: nowrap; }
.figure--hero .figure__value { font-size: clamp(34px, 3.2vw, 42px); letter-spacing: -0.03em; }
/* A value keeps its size while its card has room, and shrinks with the card
   when it doesn't. 0.63em per character (--chars, from figure_value) covers
   the widest character, a tabular digit, so even a long amount fits at any
   screen width. */
.figure__fit { font-size: min(1em, 100cqi / (var(--chars, 8) * 0.63)); }
.figure__unit { margin-right: 6px; font-size: max(0.45em, 12px); font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.figure .figure__value--na { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-3); white-space: normal; }
.figure--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.figure__hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: auto 0 0;
  padding-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-3);
}
.figure__hint .icon { margin-top: 2px; }

/* ------------------------------------------ notes and the data status line */

.source-note {
  display: flex;
  max-width: 110ch;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.source-note .icon { margin-top: 2px; color: var(--ink-3); }
.source-note strong { font-weight: 600; color: var(--ink); }
.source-note span { text-wrap: balance; }

/* The Overview's data status: a quiet line while the data is fresh, a red
   warning when the last sync failed or the schedule has stalled. */
.data-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
.data-status__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.data-status--stale {
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  box-shadow: inset 0 0 0 1px #f6d2d2;
  font-size: 14px;
  color: #8f2424;
}
.data-status--stale .icon { flex: none; margin-top: 2px; color: var(--warning); }
.data-status--stale p { margin: 0; }
.data-status--stale strong { font-weight: 600; }

/* -------------------------------------------------------------- chart */

.chart {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: 220px auto;
}
.chart__y { position: relative; font-size: 12px; color: var(--ink-3); }
.chart__y span { position: absolute; right: 12px; top: var(--y); transform: translateY(-50%); white-space: nowrap; }
.chart__plot { position: relative; border-bottom: 1px solid var(--line); }
.chart__gridline { position: absolute; left: 0; right: 0; top: var(--y); border-top: 1px dashed var(--line-soft); }

.chart__bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); }
.chart__col { position: relative; display: flex; align-items: flex-end; justify-content: center; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: background-color 120ms ease; }
.chart__col.is-active { background: rgb(29 33 41 / 0.04); }
.chart__bar {
  width: min(58%, 24px);
  min-width: 2px;
  height: var(--h);
  border-radius: 5px 5px 2px 2px;
  background: var(--ink);
  transform-origin: 50% 100%;
  transition: background-color 120ms ease;
  animation: rise 420ms var(--ease-out) both;
  animation-delay: calc(min(var(--i), 30) * 10ms);
}
.chart__bar { transition: opacity 150ms ease; }
.chart--hovering .chart__bar { opacity: 0.35; }
.chart--hovering .chart__col.is-active .chart__bar { opacity: 1; }

.chart__x {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(var(--days), minmax(0, 1fr));
  padding-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}
.chart__x span { grid-row: 1; justify-self: center; width: max-content; white-space: nowrap; }
.chart__x .is-first { justify-self: start; }
.chart__x .is-last { justify-self: end; }

.chart__tip {
  position: absolute;
  top: 4px;
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--surface);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 20px -6px rgb(29 33 41 / 0.35);
}
.chart__tip[hidden] { display: none; }

@keyframes rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ------------------------------------------------------------- tables */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 24px 0 14px;
}
.toolbar__end { margin-left: auto; display: flex; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--ink-3); }
.toolbar__count { white-space: nowrap; }

.search { position: relative; display: inline-flex; align-items: center; }
.search .icon { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.search .input { min-width: min(280px, 26vw); padding-left: 36px; }

/* Pill segmented control: the current option is a raised white chip. */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--muted-bg);
}
.segmented a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.segmented a:hover { color: var(--ink); }
.segmented a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(29 33 41 / 0.1), 0 0 0 1px rgb(29 33 41 / 0.04); }

/* Tables sit in a rounded card; the head sticks while the page scrolls. */
.table-wrap { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: clip; }
.card .table-wrap { border-radius: 0; box-shadow: none; }

table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.data th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 16px;
  line-height: 18px;
  vertical-align: middle;
  background: var(--head-bg);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.card--table .data th { border-top: 1px solid var(--line-soft); }
.data th.num { text-align: right; }
.data th a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.data th a:hover { color: var(--ink); }
.data th.num a { flex-direction: row-reverse; }
.sort-arrow { display: inline-flex; visibility: hidden; color: var(--ink-3); transition: transform 160ms var(--ease-out); }
.data th a:hover .sort-arrow { visibility: visible; }
.data th[aria-sort] .sort-arrow { visibility: visible; color: var(--ink); }
.data th[aria-sort="ascending"] .sort-arrow { transform: rotate(180deg); }
.data td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data th:first-child, .data td:first-child { padding-left: 20px; }
.data th:last-child, .data td:last-child { padding-right: 20px; }
.data tbody tr:last-child td { border-bottom: 0; }
.data tbody tr { transition: background-color 120ms ease; }
.data tbody tr:hover { background: #fafaf8; }
.data tbody tr.is-linked:hover { background: var(--hover); }
.data tr.is-total td { font-weight: 600; }
.data tr.is-muted td { color: var(--ink-3); font-size: 13px; }
.data .sub { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-3); }

/* A table in a third of the page: tighter cells, and heads that may wrap. */
.data--compact th { white-space: normal; }
.data--compact th, .data--compact td { padding-left: 10px; padding-right: 10px; }
.data--compact th:first-child, .data--compact td:first-child { padding-left: 20px; }
.data--compact th:last-child, .data--compact td:last-child { padding-right: 20px; }
/* The currency beside an amount: small, light and muted, so it reads as a
   unit and barely widens the column. */
.data .unit { margin-right: 3px; font-size: 11px; font-weight: 400; letter-spacing: 0.02em; color: var(--ink-3); }

/* A row that leads to an order: the whole row is the link's target. */
.data tr.is-linked { position: relative; cursor: pointer; }
.data tr.is-linked .row-link::after { content: ""; position: absolute; inset: 0; }
.row-link { font-weight: 600; color: var(--ink); text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.row-link--plain { font-weight: 500; color: var(--ink-3); }

/* A row that needs a second look: a small icon whose tooltip says why. It
   sits above the row's link so hovering it shows the tooltip. */
.row-flag { position: relative; z-index: 1; display: inline-flex; margin-left: 6px; vertical-align: -2px; color: var(--warning); cursor: help; }
.row-flag--quiet { color: var(--ink-3); }

/* A long email can't widen the Payments table: it ends in an ellipsis, with
   the whole address in its tooltip. */
.data--payments .clip { display: block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty {
  margin: 0;
  padding: 40px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink-2);
  text-align: center;
}
.card .empty { padding: 28px 20px; border-radius: 0; box-shadow: none; }
.empty a { margin-left: 4px; font-weight: 600; color: var(--ink); }
.empty--clear { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--success-text); }
.empty--clear p { margin: 0; }

.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.pager nav { display: flex; gap: 8px; }

.footnote { max-width: 72ch; margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* Notes under a table: a short muted list, one point per line. */
.notes { max-width: 84ch; margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.notes__title { margin-bottom: 6px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.notes ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.notes li { position: relative; padding-left: 14px; }
.notes li::before { content: ""; position: absolute; top: 0.62em; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }

/* ------------------------------------------------- states: soft badges */

.stamp, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  background: var(--muted-bg);
  color: var(--ink-2);
}
.stamp { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.stamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stamp--paid { color: var(--ink); }
.stamp--progress { background: var(--info-bg); color: var(--info); }
.stamp--done { background: var(--success-bg); color: var(--success-text); }
.stamp--bad, .chip--bad { background: var(--error-bg); color: var(--error); }
.stamp--muted { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
.chip--good { background: var(--success-bg); color: var(--success-text); }
.chip--warn { background: var(--warning-bg); color: var(--warning); }
.chip--note { margin-left: 6px; padding: 0 7px; font-size: 11.5px; vertical-align: 1px; }

/* -------------------------------------------------------------- funnel */

.funnel { list-style: none; margin: 0; padding: 4px 20px; }
.funnel__step {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 48px minmax(0, 1fr) 190px;
  align-items: center;
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.funnel__step:last-child { border-bottom: 0; }
.funnel__name { font-weight: 600; }
.funnel__name small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); }
.funnel__count { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; text-align: right; }
.funnel__track { position: relative; height: 10px; border-radius: 999px; background: var(--muted-bg); overflow: hidden; }
.funnel__bar {
  position: absolute;
  inset: 0 auto 0 var(--at, 0%);
  width: var(--share);
  min-width: 10px;
  border-radius: 999px;
  background: var(--ink);
  transform-origin: 0 50%;
  animation: grow 480ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 60ms);
}
.funnel__bar--pending { border-radius: 0 999px 999px 0; background: var(--line-strong); animation-delay: calc(var(--i) * 60ms + 300ms); }
.funnel__rates { text-align: right; font-size: 13px; color: var(--ink-3); }
.funnel__rates strong { font-size: 17px; font-weight: 600; color: var(--ink); }
.funnel__rates small { display: block; font-size: 12.5px; }
.funnel__drop { grid-column: 3 / 5; font-size: 13px; color: var(--ink-2); }
.funnel__drop strong { color: var(--ink); font-weight: 600; }

@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------- order page */

.back-link { margin: 0 0 14px; font-size: 14px; }
.back-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; }
.back-link a:hover { color: var(--ink); }
.order-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--ink-2); }

.facts { display: grid; grid-template-columns: 160px minmax(0, 1fr); margin: 0; }
.facts dt, .facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 0; }
.facts dt { padding-right: 16px; color: var(--ink-2); font-size: 13.5px; }
.facts dd { overflow-wrap: anywhere; }
.facts dd .chip + .chip, .facts dd .chip + .faint { margin-left: 6px; }
.facts .sub { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }

/* The order's timeline: time, a dot on a line, then what happened. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 140px 12px minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
  padding: 8px 0;
}
.timeline time { grid-column: 1; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.timeline .what { grid-column: 3; font-weight: 500; }
.timeline .who { grid-column: 3; color: var(--ink-3); font-size: 13px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 154px; top: 14px;
  z-index: 1;
  width: 10px; height: 10px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}
.timeline li::after {
  content: "";
  position: absolute;
  left: 158px; top: 0; bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--line);
}
.timeline li:first-child::after { top: 18px; }
.timeline li:last-child::after { bottom: calc(100% - 18px); }
.timeline li.is-money::before { border-color: var(--success); background: var(--success); }
.timeline li.is-current::before { border-color: var(--ink); background: var(--ink); box-shadow: 0 0 0 3px var(--muted-bg); }
.timeline li.is-current .what { font-weight: 600; }
.timeline li.is-bad::before { border-color: var(--error); background: var(--error); }

/* ------------------------------------------------------------ sign in */

.signin { display: grid; place-items: start center; min-height: 100dvh; padding: 14vh 16px 48px; }
.signin__card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card), 0 12px 32px -12px rgb(29 33 41 / 0.12);
}
.signin__card .brand { margin-bottom: 28px; }
.signin__card h1 { margin-bottom: 4px; font-size: 22px; }
.signin__tagline { margin: 0 0 24px; color: var(--ink-2); }
.signin .flash { margin-bottom: 16px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field .input { width: 100%; height: 42px; font-size: 15px; }

/* ------------------------------------------------------------- motion */

.turbo-progress-bar { height: 2px; background: var(--red); }

/* Moving between sections and periods: the page cross-fades, the sidebar
   stays put, and the current-section highlight slides to its new place. */
::view-transition-old(root) { animation: 120ms ease both fade-out; }
::view-transition-new(root) { animation: 220ms var(--ease-out) both fade-in; }
::view-transition-group(nav-active) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .chart__bar, .funnel__bar { animation: fade-in 200ms ease both; }
  .sync--running .sync__dot::after, .sync--running .sync__button .icon { animation: none; }
  .btn:active:not(:disabled), .iconbtn:active { transform: none; }
  .section__link:hover .icon { transform: none; }
  .sidebar { transition-property: opacity !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* -------------------------------------------------------------- print */

/* The one-page summary is the overview, printed on one A4 page: the key
   figures in a row, the chart by day, then the last 12 weeks across and the
   two breakdowns side by side. The breakpoints below are for screens only,
   so paper always gets this layout, however wide a browser takes the page
   to be. */
.print-only { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 9.5pt; }
  .shell { display: block; }
  .sidebar, .mobilebar, .backdrop, .period, .section__actions, .print-hide, .flash, .data-status, .skip-link { display: none !important; }
  .main { padding: 0; }
  h1 { font-size: 16pt; }
  h2 { font-size: 10.5pt; }
  .page-head { margin-bottom: 2px; }
  .page-head__title p { display: none; }
  .print-only { display: block !important; margin-bottom: 8px; color: var(--ink-3); }
  .print-only p { margin: 0; }

  .figures { --lead: 1.4fr; gap: 6px; break-inside: avoid; }
  .figure, .card, .table-wrap { box-shadow: 0 0 0 1px var(--line); }
  .figure { padding: 8px 10px; }
  .figure__label { font-size: 8.5pt; }
  .figure__row { margin-top: 4px; }
  .figure__value { font-size: 14pt; }
  .figure--hero .figure__value { font-size: 18pt; }
  .figure .figure__value--na { font-size: 10pt; }
  .figure__hint { padding-top: 4px; font-size: 7.5pt; line-height: 1.3; }
  .source-note { margin-top: 6px; font-size: 8.5pt; }

  .section, .grid-2 > .section { break-inside: avoid; margin-top: 8px; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .grid-3 > .section { margin-top: 0; }
  /* The last 12 weeks beside the mail classes, then the providers across
     the page, where even a long name keeps to one line. */
  .grid-3 > #recent-weeks { grid-column: 1; grid-row: 1; }
  .grid-3 > #mail-classes { grid-column: 2; grid-row: 1; }
  .grid-3 > #top-providers { grid-column: 1 / -1; grid-row: 2; }
  .card { padding: 10px 12px; }
  .card--table { padding: 0; }
  .card__head { margin-bottom: 8px; }
  .card--table > .card__head { padding: 10px 12px 8px; }
  .card__note { font-size: 8pt; }
  .card__foot { padding: 6px 12px; font-size: 8.5pt; }
  .card .empty { padding: 14px 12px; }

  .chart { grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: 45mm auto; }
  .grid-3 .chart { grid-template-rows: 30mm auto; }
  .chart__y, .chart__x { font-size: 7.5pt; }
  .chart__y span { right: 8px; }
  .chart__x { padding-top: 4px; }
  /* Bars are background fills, which browsers leave out of a print unless
     "Background graphics" is ticked; they print in full, already risen,
     and none is left dimmed by a hover. */
  .chart__bar, .funnel__bar { animation: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chart--hovering .chart__bar { opacity: 1; }

  .data { font-size: 8.5pt; }
  .data th { position: static; font-size: 8pt; white-space: normal; }
  .data th, .data td { padding: 4px 8px; }
  .data th:first-child, .data td:first-child { padding-left: 12px; }
  .data th:last-child, .data td:last-child { padding-right: 12px; }
  .data .sub { font-size: 7.5pt; }
  .data .unit { font-size: 7pt; }
  /* A breakdown's rows keep to one line where they can: amounts don't
     break, and a provider's category follows its name. */
  .data--compact td { line-height: 1.35; }
  .data--compact td.num { white-space: nowrap; }
  .data--compact .sub { display: inline; margin: 0 0 0 4px; }
  .data--compact .sub::before { content: "· "; }
  a { text-decoration: none; }
}

/* ------------------------------------------------------- smaller screens */

@media screen and (max-width: 1279px) {
  /* Payments on a laptop: tighter cells, so every column fits until the
     rows stack. */
  .data--payments th, .data--payments td { padding-left: 10px; padding-right: 10px; }
  .data--payments th:first-child, .data--payments td:first-child { padding-left: 16px; }
  .data--payments th:last-child, .data--payments td:last-child { padding-right: 16px; }
}

@media screen and (max-width: 1180px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures .figure--hero { grid-column: 1 / -1; }
  .table-wrap { overflow-x: auto; }
}

/* Tables on tablets, phones and paper: optional columns go, and each
   Payments row becomes a compact block with the order and its gross, the
   provider and net, and who paid when. */
@media screen and (max-width: 1180px), print {
  .data .col-optional { display: none; }

  .data--payments thead { display: none; }
  .data--payments tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "order gross" "provider net" "who when";
    gap: 2px 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  .data--payments tbody tr:last-child { border-bottom: 0; }
  .data--payments td, .data--payments td:first-child, .data--payments td:last-child { padding: 0; border: 0; }
  .data--payments .col-order { grid-area: order; }
  .data--payments .col-gross { grid-area: gross; font-weight: 600; }
  .data--payments .col-provider { grid-area: provider; }
  .data--payments .col-provider .sub { display: none; }
  .data--payments .col-net { grid-area: net; font-size: 13px; color: var(--ink-3); }
  .data--payments .col-net::before { content: "Net "; }
  .data--payments .col-net strong { font-weight: 500; }
  .data--payments .col-who { grid-area: who; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
  .data--payments .col-who .clip { max-width: none; white-space: normal; }
  .data--payments .col-when { grid-area: when; font-size: 13px; color: var(--ink-3); text-align: right; }
  .data--payments .col-when .sub { display: inline; margin: 0 0 0 4px; font-size: inherit; }
  .data--payments .col-refunded, .data--payments .col-vat { display: none; }
}

/* Phone and narrow tablet: the sidebar becomes a drawer behind a menu
   button in a slim top bar. */
@media screen and (max-width: 900px) {
  .shell { display: block; }
  .mobilebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 12px;
    background: rgb(250 250 247 / 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    view-transition-name: mobilebar;
  }
  .mobilebar .brand { flex: 1; }
  .mobilebar__sync { display: inline-flex; align-items: center; gap: 7px; padding-right: 4px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 40;
    width: min(300px, 86vw);
    height: auto;
    border-right: 0;
    box-shadow: var(--shadow-raised);
    transform: translateX(-104%);
    transition: transform 300ms var(--ease-drawer);
    view-transition-name: none;
  }
  .shell--open .sidebar { transform: none; }
  .iconbtn.sidebar__close { display: inline-grid; }
  .backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: block;
    background: rgb(29 33 41 / 0.32);
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .backdrop[hidden] { display: none; }
  .shell--open .backdrop { opacity: 1; }
  .main { padding-top: 20px; }
}

@media screen and (max-width: 760px) {
  h1 { font-size: 22px; }
  .page-head { flex-direction: column; align-items: stretch; margin-bottom: 18px; }
  .period { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .period__select { min-width: 0; width: 100%; }
  .period__range { grid-column: 1 / -1; grid-row: 2; padding: 0; }
  .period__custom { grid-column: 1 / -1; }
  .period:has(option[value="custom"]:checked) .period__custom, .period--custom .period__custom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .period__custom .input { width: 100%; }
  .figures { gap: 12px; }
  .figure { padding: 16px; }
  .figure__value { font-size: 24px; }
  .figure .figure__value--na { font-size: 15px; }
  .figure--hero .figure__value { font-size: 36px; }
  .card { padding: 16px; }
  .card--table { padding: 0; }
  .card--table > .card__head { padding: 14px 16px 12px; }
  .chart { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: 170px auto; }
  .chart__y span { right: 8px; font-size: 11px; }
  .chart__x .is-odd { visibility: hidden; }
  .print-summary { display: none; }
  .toolbar { align-items: stretch; }
  .search, .search .input { width: 100%; min-width: 0; }
  .toolbar__end { width: 100%; margin-left: 0; justify-content: space-between; }
  .table-wrap { overflow-x: auto; }
  .data { font-size: 13.5px; }
  .data th { white-space: normal; }
  .data th, .data td { padding-left: 8px; padding-right: 8px; }
  .data th:first-child, .data td:first-child { padding-left: 16px; }
  .data th:last-child, .data td:last-child { padding-right: 16px; }
  .funnel { padding: 4px 16px; }
  .funnel__step { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .funnel__count { grid-row: 1; grid-column: 2; }
  .funnel__track { grid-column: 1 / -1; grid-row: 2; }
  .funnel__rates { grid-row: 3; grid-column: 1 / -1; text-align: left; }
  .funnel__rates small { display: inline; margin-left: 8px; }
  .funnel__drop { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: 0; font-size: 13px; }
  .facts dd { padding-top: 2px; }
  .timeline li { grid-template-columns: 12px minmax(0, 1fr); }
  .timeline time { grid-column: 2; grid-row: 2; }
  .timeline .what, .timeline .who { grid-column: 2; }
  .timeline li::before { left: 0; }
  .timeline li::after { left: 4px; }
  .signin__card { padding: 24px; }

}