@charset "utf-8";
/* ServicePuls portal: one stylesheet for every page.
   World: the approved report identity "Reaktionslinie" (decision 19) carried onto screens. White paper, ink,
   hairline rules, the business-hours ruler as the signature (a measuring line, never data). The signal
   colour is reserved for lost time in reports and stays unused on setup screens. Light only by choice:
   the report is paper, and the portal is the same document world (Kevin: "must look like 2027").
   Layout: one reading column (forms ≤ 36rem) under a ruled header; ≥ 960px a left rail carries the steps. */

@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('fonts/servicepuls-schibsted-grotesk-latin-wght-normal.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: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('fonts/servicepuls-schibsted-grotesk-latin-ext-wght-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('fonts/servicepuls-spline-sans-mono-latin-wght-normal.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; }

:root {
  --paper: #ffffff;
  --paper-2: #f5f6f4;      /* a sheet laid under a code or a quoted declaration */
  --ink: #111418;
  --ink-2: #474d56;        /* 8.4:1 on paper */
  --ink-3: #636a73;        /* 5.5:1: hints, captions */
  --line: #dcdfe3;         /* hairlines */
  --line-strong: #858c95;  /* control borders, 3.4:1 (WCAG 1.4.11) */
  --signal: #e5481b;       /* lost time only (reports) */
  --error: #b02a1f;        /* 6.3:1 */
  --error-paper: #fbefed;
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.625rem;
  --fs-2xl: clamp(2rem, 1.55rem + 1.9vw, 2.75rem);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --radius: 3px;
  --control: 48px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-md)/1.55 var(--font); font-feature-settings: 'ss01' 0;
  -webkit-font-smoothing: antialiased; caret-color: var(--ink); accent-color: var(--ink);
}
::selection { background: var(--ink); color: var(--paper); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
[tabindex='-1']:focus { outline: none; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 680; }
h1 { font-size: var(--fs-2xl); line-height: 1.06; letter-spacing: -0.024em; }
h2 { font-size: var(--fs-xl); line-height: 1.15; letter-spacing: -0.016em; }
h3 { font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -0.008em; font-weight: 620; }
p { margin: 0; }
.sp-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header with the business-hours ruler ---------- */
.sp-top { position: relative; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
.sp-top__in { max-width: 72rem; margin: 0 auto; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.sp-top::after { /* the ruler: one hairline, a tick per hour 08–18 */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background:
    linear-gradient(var(--ink), var(--ink)) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px 10%) left bottom / 100% 6px no-repeat;
}
.sp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 720; font-size: 1.125rem; letter-spacing: -0.01em; }
.sp-brand svg { width: 22px; height: 22px; flex: none; }
.sp-top__nav { display: flex; align-items: center; gap: var(--s4); font-size: var(--fs-sm); }
.sp-top__nav a, .sp-top__nav .sp-btn, .sp-foot a, .sp-row > a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 479px) { .sp-top__who { display: none; } }
.sp-after { margin-top: var(--s5); }
.sp-top__who { color: var(--ink-2); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- page frames ---------- */
.sp-page { padding: var(--s6) max(16px, env(safe-area-inset-right, 0px)) var(--s8) max(16px, env(safe-area-inset-left, 0px)); }
.sp-page__in { max-width: 72rem; margin: 0 auto; }
.sp-col { max-width: 36rem; }
.sp-col--narrow { max-width: 27rem; }
.sp-split { display: grid; gap: var(--s6); }
.sp-split > * { min-width: 0; }
@media (min-width: 960px) {
  .sp-page { padding-top: var(--s7); }
  .sp-split { grid-template-columns: 14rem minmax(0, 36rem); gap: var(--s8); align-items: start; }
  .sp-split__rail { position: sticky; top: var(--s6); }
  .sp-center { display: grid; grid-template-columns: minmax(0, 27rem); justify-content: start; padding-left: calc(14rem + var(--s8)); }
  .sp-center--wide { grid-template-columns: minmax(0, 36rem); }
}
.sp-row > svg { width: 20px; height: 20px; flex: none; }
h4 { margin: 0; }
.sp-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.sp-lede { color: var(--ink-2); max-width: 34rem; }
.sp-stack { display: grid; gap: var(--s5); }
.sp-stack--tight { display: grid; gap: var(--s3); }
.sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.sp-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.sp-muted { color: var(--ink-2); }
.sp-small { font-size: var(--fs-sm); }
.sp-xs { font-size: var(--fs-xs); color: var(--ink-3); }
.sp-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sp-foot { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-xs); color: var(--ink-3); }
.sp-foot a { color: var(--ink-3); }

/* ---------- step ruler (signup): segments on one line ---------- */
.sp-steps { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.sp-steps li { position: relative; padding-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); min-width: 0; }
.sp-steps li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); }
.sp-steps li::after { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--ink); transition: width 520ms var(--ease); }
.sp-steps li[data-state='done']::after, .sp-steps li[data-state='current']::after { width: 100%; }
.sp-steps li[data-state='current'] { color: var(--ink); font-weight: 600; }
.sp-steps li[data-state='done'] { color: var(--ink-2); }
.sp-steps__label { display: none; }
.sp-steps li[data-state='current'] .sp-steps__label { display: block; }
.sp-steps__n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .sp-steps__label { display: block; } }
@media (min-width: 960px) {
  .sp-steps { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; margin: 0; border-left: 1px solid var(--line); }
  .sp-steps li { padding: 10px 0 10px 18px; font-size: var(--fs-sm); }
  .sp-steps li::before { top: 0; bottom: 0; left: -1px; right: auto; width: 1px; height: auto; background: transparent; }
  .sp-steps li::after { top: 0; left: -1px; width: 2px; height: 0; transition: height 520ms var(--ease); }
  .sp-steps li[data-state='done']::after, .sp-steps li[data-state='current']::after { width: 2px; height: 100%; }
  .sp-steps__n { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
}

/* ---------- forms ---------- */
.sp-form { display: grid; gap: var(--s5); }
.sp-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s5); min-width: 0; }
.sp-legend { padding: 0; font-size: var(--fs-xl); font-weight: 680; letter-spacing: -0.016em; line-height: 1.15; margin-bottom: var(--s2); }
.sp-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
#alert:not(:empty) { margin-bottom: var(--s5); }
.sp-grid2 { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 560px) { .sp-grid2 { grid-template-columns: 9rem 1fr; } .sp-grid2--even { grid-template-columns: 1fr 1fr; } }
.sp-label { font-weight: 600; font-size: var(--fs-sm); }
.sp-label .sp-opt { font-weight: 400; color: var(--ink-3); }
.sp-hint { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.45; }
.sp-input, .sp-select {
  width: 100%; min-height: var(--control); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-md);
  transition: border-color 120ms, box-shadow 120ms;
}
.sp-input::placeholder { color: var(--ink-3); }
.sp-input:hover, .sp-select:hover { border-color: var(--ink-2); }
.sp-input:focus, .sp-select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sp-input[aria-invalid='true'], .sp-select[aria-invalid='true'] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.sp-select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23111418' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.sp-input--code { font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.18em; font-variant-numeric: tabular-nums; text-align: left; max-width: 15rem; }
.sp-input--code::placeholder { letter-spacing: 0.18em; color: var(--ink-3); }
.sp-pw { position: relative; }
.sp-pw .sp-input { padding-right: 56px; }
.sp-pw__toggle { position: absolute; top: 0; right: 0; width: 52px; height: var(--control); border: 0; background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; border-radius: var(--radius); }
.sp-pw__toggle:hover { color: var(--ink); }
.sp-pw__toggle svg { width: 20px; height: 20px; }
.sp-err { display: flex; gap: 6px; align-items: flex-start; color: var(--error); font-size: var(--fs-sm); line-height: 1.4; font-weight: 500; }
.sp-err svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.sp-disclose summary { cursor: pointer; font-size: var(--fs-sm); width: fit-content; list-style: none; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
.sp-disclose summary::-webkit-details-marker { display: none; }
.sp-disclose[open] summary { margin-bottom: var(--s3); }

/* declarations: the exact text is quoted on a sheet, the box sits beside it */
.sp-decls { display: grid; border-top: 1px solid var(--line); }
.sp-decl { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: var(--s4) 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.sp-decl__text { font-size: var(--fs-sm); line-height: 1.55; }
.sp-decl__links { display: flex; gap: var(--s4); margin-top: 6px; font-size: var(--fs-sm); }
.sp-decl .sp-err { grid-column: 2; }
.sp-check {
  appearance: none; margin: 1px 0 0; width: 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper) center / 16px no-repeat; cursor: pointer; transition: background-color 120ms, border-color 120ms;
}
.sp-check:hover { border-color: var(--ink); }
.sp-check:checked { background-color: var(--ink); border-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); }
.sp-check[aria-invalid='true'] { border-color: var(--error); }

/* ---------- buttons ---------- */
.sp-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--control); padding: 0 22px; border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper); font: inherit; font-weight: 600; font-size: var(--fs-md); text-decoration: none;
  cursor: pointer; transition: background-color 120ms, transform 80ms;
}
.sp-btn:hover { background: #2b3038; text-decoration: none; }
.sp-btn:active { transform: translateY(1px); }
.sp-btn svg { width: 18px; height: 18px; flex: none; }
.sp-btn--secondary { background: var(--paper); color: var(--ink); }
.sp-btn--secondary:hover { background: var(--paper-2); }
.sp-btn--quiet { background: none; border-color: transparent; color: var(--ink); padding: 0 6px; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; font-weight: 500; }
.sp-btn--quiet:hover { background: none; text-decoration-thickness: 2px; }
.sp-btn--block { width: 100%; }
.sp-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.sp-btn[aria-busy='true'][disabled] { opacity: 1; }
/* busy: a reaction line runs along the button's foot */
.sp-btn[aria-busy='true'] { cursor: progress; }
.sp-btn[aria-busy='true']::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 34%; background: currentColor; opacity: 0.8;
  animation: sp-run 1100ms var(--ease) infinite;
}
@keyframes sp-run { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.sp-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); color: var(--ink-3); font-size: var(--fs-xs); }
.sp-or::before, .sp-or::after { content: ''; border-top: 1px solid var(--line); }

/* ---------- messages ---------- */
.sp-msg { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); font-size: var(--fs-sm); line-height: 1.5; }
.sp-msg svg { width: 20px; height: 20px; margin-top: 1px; }
.sp-msg--error { border-color: var(--error); background: var(--error-paper); color: #5c1610; }
.sp-msg--error svg { color: var(--error); }
.sp-msg--ok { border-color: var(--ink); background: var(--paper); }
.sp-msg ul { margin: 6px 0 0; padding-left: 18px; }
.sp-msg a { color: inherit; }
.sp-msg strong { font-weight: 620; }

/* ---------- codes ---------- */
.sp-code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); }
.sp-code__value { font-family: var(--mono); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem); font-weight: 500; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-codeline { display: block; padding: var(--s3) var(--s4); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6; overflow-wrap: anywhere; color: var(--ink); }
.sp-recovery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--s4); margin: 0; padding: var(--s4); list-style: none; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--mono); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.sp-copy { min-height: 40px; padding: 0 14px; font-size: var(--fs-sm); }

/* ---------- setup line (home before the first report): the ruler stood upright ---------- */
.sp-biz { display: grid; gap: var(--s2); margin-bottom: var(--s6); }
.sp-biz__meta { color: var(--ink-2); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.sp-biz__meta span { white-space: nowrap; }
.sp-biz__meta span + span::before { content: '\00B7'; margin-right: var(--s2); color: var(--ink-3); }
.sp-line { list-style: none; margin: 0; padding: 0; display: grid; }
.sp-line__item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s4); padding-bottom: var(--s6); }
.sp-line__item::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; background: var(--line); }
.sp-line__item:last-child { padding-bottom: 0; }
.sp-line__item:last-child::before { display: none; }
.sp-line__item[data-state='done']::before { background: var(--ink); }
.sp-node { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); background: var(--paper); font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-3); }
.sp-node svg { width: 15px; height: 15px; }
.sp-line__item[data-state='live'] .sp-node, .sp-line__item[data-state='done'] .sp-node { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sp-line__item[data-state='current'] .sp-node { border: 2px solid var(--ink); color: var(--ink); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line); }
.sp-line__item[data-state='wait'] .sp-node { border-style: dashed; color: var(--ink-2); }
.sp-line__body { display: grid; gap: var(--s3); min-width: 0; padding-top: 2px; }
.sp-line__title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s3); }
.sp-line__state { font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.sp-line__item[data-state='current'] .sp-line__state { color: var(--ink); font-weight: 600; }
.sp-line__item[data-state='todo'] .sp-line__title h3, .sp-line__item[data-state='wait'] .sp-line__title h3 { color: var(--ink-2); font-weight: 560; }
.sp-panel { display: grid; gap: var(--s4); padding: var(--s4) 0 0; border-top: 1px solid var(--line); }
.sp-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--s4); margin: 0; font-size: var(--fs-sm); }
.sp-facts dt { color: var(--ink-3); }
.sp-facts dd { margin: 0; }
@media (max-width: 519px) { .sp-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .sp-facts dd + dt { margin-top: var(--s2); } .sp-panel .sp-btn:not(.sp-btn--quiet):not(.sp-copy) { width: 100%; } }
.sp-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sp-tab { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.sp-tab[aria-selected='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* the location once monitoring runs: the trial on the ruler, setup folded into one line */
.sp-live { display: grid; gap: var(--s4); padding-top: var(--s5); border-top: 2px solid var(--ink); }
.sp-live__head { display: flex; align-items: center; gap: var(--s3); }
.sp-live__mark { width: 28px; height: 28px; display: grid; place-items: center; }
.sp-live__mark svg { width: 26px; height: 26px; }
.sp-trial { display: grid; gap: var(--s2); }
.sp-trial__fact { font-size: var(--fs-lg); font-weight: 600; }
.sp-trial__fact .sp-mono { font-weight: 500; white-space: nowrap; }
.sp-trial__bar { position: relative; height: 14px; border-bottom: 1px solid var(--ink);
  background: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px calc(100% / 7)) left bottom / 100% 7px no-repeat; }
.sp-trial__fill { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--ink); }
.sp-trial__ends { display: flex; justify-content: space-between; font: 400 var(--fs-xs)/1.4 var(--mono); color: var(--ink-3); }
.sp-setup-done { display: flex; gap: var(--s2); align-items: center; font-size: var(--fs-sm); color: var(--ink-2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.sp-setup-done svg { width: 16px; height: 16px; flex: none; }
.sp-howto { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: var(--fs-sm); }
.sp-howto li::marker { font-family: var(--mono); color: var(--ink-3); }

.sp-skeleton { height: 14px; border-radius: 2px; background: linear-gradient(90deg, var(--paper-2), #eceeec, var(--paper-2)); background-size: 200% 100%; animation: sp-shine 1.4s linear infinite; }
@keyframes sp-shine { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
@media print { .sp-top::after, .sp-btn, .sp-foot { display: none; } }
.sp-decls > .sp-err { margin: -6px 0 var(--s3) 38px; }
.sp-panel > .sp-row { flex-wrap: nowrap; align-items: flex-start; }

/* ---------- Monatsblatt (part 4e2): the report itself, its month, its actions ---------- */
.sp-h2 { font-size: var(--fs-lg); line-height: 1.25; font-weight: 680; letter-spacing: -0.01em; }
.sp-mb { display: grid; gap: var(--s5); }
.sp-mb__bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1.5px solid var(--ink); }
.sp-mb__nav { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.sp-mb__month { min-width: 7.6em; text-align: center; font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sp-mb__step { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius); background: none; color: var(--ink); cursor: pointer; transition: background-color 120ms; }
@media (max-width: 359px) { .sp-mb__bar { flex-wrap: wrap; } } /* the smallest phones: PDF under the month */
.sp-mb__step:hover:not([disabled]) { border-color: var(--ink); background: var(--paper-2); }
.sp-mb__step svg { width: 18px; height: 18px; }
.sp-mb__step:not(.sp-mb__step--next) svg { transform: scaleX(-1); }
.sp-mb__step[disabled] { opacity: 0.35; cursor: default; }
.sp-mb__frame { display: block; width: 100%; height: 900px; border: 0; background: var(--paper); }
.sp-acts { display: grid; gap: var(--s3); padding-top: var(--s5); border-top: 1.5px solid var(--ink); }
.sp-acts:empty { display: none; }
.sp-acts__head { display: grid; gap: 4px; }
.sp-acts__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.sp-act { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.sp-act__body { display: grid; gap: 4px; min-width: 0; }
.sp-act__text { font-weight: 600; line-height: 1.35; }
.sp-act__meta { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.sp-act__carried { font-size: var(--fs-xs); color: var(--ink-3); }
.sp-act[data-done='true'] .sp-act__text { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.sp-act__done { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; margin-top: -11px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.sp-act__done:hover .sp-act__box { border-color: var(--ink); }
.sp-act__box { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--paper); transition: background-color 160ms var(--ease); }
.sp-act__box svg { width: 14px; height: 14px; }
.sp-act__done[aria-pressed='true'] { border-color: var(--ink); }
.sp-act__done[aria-pressed='true'] .sp-act__box { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* design review 4e2: no empty ruled row at the end; the page header steps back when the report leads */
.sp-mb > .sp-setup-done { border-top: 0; padding-top: 0; }
.sp-biz:has(+ .sp-mb) { margin-bottom: var(--s4); }
.sp-biz:has(+ .sp-mb) h1 { font-size: var(--fs-xl); }
.sp-biz:has(+ .sp-mb) .sp-biz__meta { font-size: var(--fs-xs); }
/* wide screens: the report and its actions side by side, the verdict and the to-dos in one view */
@media (min-width: 960px) {
  .sp-center--wide:has(.sp-mb) { padding-left: 0; grid-template-columns: minmax(0, 54.5rem); justify-content: center; }
  .sp-center--wide:has(.sp-mb) .sp-col { max-width: none; }
  .sp-mb { grid-template-columns: 24rem minmax(0, 1fr); column-gap: var(--s7); align-items: start; }
  .sp-mb__bar, .sp-mb > .sp-setup-done { grid-column: 1 / -1; }
  .sp-acts { grid-column: 2; grid-row: 2; position: sticky; top: var(--s5); padding-top: 0; border-top: 0; }
}
/* pilot: the first reaction, live */
.sp-react { display: grid; gap: var(--s2); padding: var(--s4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-react__label { font-size: var(--fs-sm); color: var(--ink-2); }
.sp-react__wait { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.sp-react__num { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -0.03em; line-height: 1; }
.sp-react__via { font-size: var(--fs-lg); }
.sp-react__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.sp-badge { font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border: 1.5px solid var(--ink); border-radius: 2px; white-space: nowrap; }
.sp-badge--over { background: var(--ink); color: var(--paper); }
/* the reaction on a line of business time: ink to the target, hatched beyond it (lost time is the report's red) */
.sp-rline { position: relative; height: 18px; margin: var(--s1) 0 var(--s2); }
.sp-rline__bar { position: absolute; left: 0; right: 0; top: 6px; height: 7px; border-bottom: 1px solid var(--line-strong); transform-origin: left; animation: sp-grow 900ms var(--ease) both; }
.sp-rline__ok { position: absolute; left: 0; top: 0; height: 6px; background: var(--ink); }
.sp-rline__lost { position: absolute; top: 0; height: 6px; background: repeating-linear-gradient(135deg, var(--signal) 0 2.5px, var(--paper) 2.5px 5px); box-shadow: inset 0 0 0 1px var(--signal); }
.sp-rline__target { position: absolute; top: 0; height: 18px; border-left: 1.5px dashed var(--ink); }
@keyframes sp-grow { from { transform: scaleX(0); } }
/* the trial ruler shows "today" and its end */
.sp-trial__fill::after { content: ''; position: absolute; right: -1px; bottom: 0; width: 2px; height: 14px; background: var(--ink); }
.sp-trial__bar { background: linear-gradient(var(--line-strong), var(--line-strong)) right bottom / 1px 7px no-repeat,
  repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px calc(100% / 7)) left bottom / 100% 7px no-repeat; }
.sp-trial__fact .sp-mono { font-size: 0.88em; letter-spacing: -0.02em; }
.sp-nowrap { white-space: nowrap; }

/* ---------- drawers (part 4e3): a sheet laid over the page; Abo und Zahlung first ---------- */
.sp-biz__tools { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.sp-tool { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 16px 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 560; cursor: pointer; transition: border-color 120ms, background-color 120ms; }
.sp-tool:hover { border-color: var(--ink); background: var(--paper-2); }
.sp-tool svg { width: 18px; height: 18px; flex: none; }
html:has(.sp-drawer[open]) { overflow: hidden; }
/* phone: a bottom sheet; ≥ 640px: a sheet along the right edge, full height. Ruled in ink on the side it opens from. */
.sp-drawer { position: fixed; inset: auto 0 0 0; margin: 0; padding: 0; width: 100%; max-width: none; height: auto; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
  border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); box-shadow: 0 -18px 48px rgba(17, 20, 24, 0.16); }
.sp-drawer::backdrop { background: rgba(17, 20, 24, 0.42); }
.sp-drawer[open] { animation: sp-sheet-up 280ms var(--ease) both; }
@keyframes sp-sheet-up { from { transform: translateY(24px); } } /* transform only: text keeps full contrast from the first frame */
@media (min-width: 640px) {
  .sp-drawer { inset: 0 0 0 auto; width: min(31rem, 100vw); height: 100dvh; max-height: none; border-top: 0; border-left: 2px solid var(--ink); box-shadow: -18px 0 48px rgba(17, 20, 24, 0.16); }
  .sp-drawer[open] { animation-name: sp-sheet-in; }
  @keyframes sp-sheet-in { from { transform: translateX(28px); } }
}
.sp-drawer__in { display: grid; gap: var(--s5); padding: var(--s4) max(16px, env(safe-area-inset-right, 0px)) calc(var(--s6) + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
@media (min-width: 640px) { .sp-drawer__in { padding: var(--s5) var(--s6) var(--s7); } }
.sp-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.sp-drawer__heading { display: grid; gap: 2px; min-width: 0; }
/* the state leads the sheet; the title is a small label (design review D1) */
.sp-drawer__title { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }
.sp-drawer__sub { font-size: var(--fs-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.sp-drawer__close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; margin: -4px -10px 0 0; border: 0; border-radius: var(--radius); background: none; color: var(--ink); cursor: pointer; }
.sp-drawer__close:hover { background: var(--paper-2); }
.sp-drawer__close svg { width: 20px; height: 20px; }
.sp-drawer__note:empty { display: none; }
.sp-drawer__foot { padding-top: var(--s4); border-top: 1px solid var(--line); }
.sp-bill { display: grid; gap: var(--s2); }
.sp-bill__state { font-size: var(--fs-xl); font-weight: 680; line-height: 1.15; letter-spacing: -0.016em; }
/* the key date in mono under the state, as on the page (D1) */
.sp-bill__date { display: block; margin-top: var(--s1); font: 500 var(--fs-lg)/1.3 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* one receipt line after an action, like .sp-setup-done; framed messages stay for errors and info (D2) */
.sp-bill__receipt { display: flex; gap: var(--s2); align-items: center; font-size: var(--fs-sm); color: var(--ink-2); }
.sp-bill__receipt svg { width: 16px; height: 16px; flex: none; }
.sp-bill__act { margin-top: var(--s2); }
.sp-bill p { font-size: var(--fs-sm); line-height: 1.5; }
/* the confirmation: one framed sheet, the consequence in plain words, then the one button that does it */
.sp-confirm { display: grid; gap: var(--s3); padding: var(--s4); border: 1.5px solid var(--ink); border-radius: var(--radius); }
.sp-confirm h3 { font-size: var(--fs-lg); }
.sp-confirm p { font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 519px) { .sp-confirm .sp-btn:not(.sp-btn--quiet), .sp-drawer .sp-panel .sp-btn { width: 100%; } }
/* design review 4e3a: quiet buttons sit on the column edge (D3), facts stay two columns in the drawer on phones (D6),
   the pill sits right of the name on the Monatsblatt (D7), panel text at the drawer's size (D8) */
.sp-drawer .sp-btn--quiet { padding-inline: 0; }
.sp-drawer__foot .sp-btn--quiet { font-size: var(--fs-sm); color: var(--ink-2); }
.sp-drawer__foot .sp-btn--quiet:hover { color: var(--ink); }
@media (min-width: 360px) and (max-width: 519px) {
  .sp-drawer .sp-facts { grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s4); }
  .sp-drawer .sp-facts dd + dt { margin-top: 0; }
}
@media (min-width: 960px) {
  .sp-biz:has(+ .sp-mb) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); align-items: end; }
  .sp-biz:has(+ .sp-mb) > :not(.sp-biz__tools) { grid-column: 1; }
  .sp-biz:has(+ .sp-mb) .sp-biz__tools { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.sp-drawer .sp-panel > p { font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 519px) { .sp-drawer .sp-bill .sp-btn { width: 100%; } } /* D4 */

/* ---------- settings drawer (part 4e3b): sections ruled like the report, one action each ---------- */
.sp-set { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.sp-drawer__note + .sp-set, .sp-drawer__note:empty + .sp-set { border-top: 0; padding-top: 0; }
.sp-set__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s3); }
.sp-set__head h3 { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.005em; }
/* design D11: the action steps back behind its heading */
.sp-set__head .sp-btn--quiet { flex: none; min-height: 44px; font-size: var(--fs-sm); color: var(--ink-2); }
.sp-set__head .sp-btn--quiet:hover { color: var(--ink); }
.sp-set .sp-bill__receipt { align-items: flex-start; line-height: 1.5; }
.sp-set .sp-bill__receipt svg { margin-top: 3px; }
.sp-set__foot .sp-btn--quiet { color: var(--ink-2); }
/* design D9: one key column for every list on the sheet */
@media (min-width: 360px) { .sp-drawer .sp-set .sp-facts { grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s2) var(--s4); } .sp-drawer .sp-set .sp-facts dd + dt { margin-top: 0; } }
.sp-set p { line-height: 1.5; }
.sp-set__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-sm); }
.sp-set__list li { display: grid; gap: 2px; }
.sp-set__key { font-size: var(--fs-xs); color: var(--ink-3); }
.sp-set__pending { display: grid; gap: var(--s2); padding: var(--s3); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); }
.sp-set-view { display: grid; gap: var(--s4); }
.sp-set-view > h3 { font-size: var(--fs-lg); }
.sp-textarea { min-height: 6.5rem; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.sp-choices { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s2); }
.sp-choices legend { padding: 0; margin-bottom: 6px; }
.sp-choice { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: var(--fs-sm); cursor: pointer; }
.sp-choice:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); font-weight: 600; }
.sp-choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-radio { margin: 0; width: 18px; height: 18px; accent-color: var(--ink); }
.sp-fieldset--inner { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.sp-fieldset--inner legend { margin-bottom: var(--s1); }
/* the withdrawal: the exact declaration on a sheet, ruled in ink on its left */
.sp-quote { margin: 0; padding: var(--s3) var(--s4); background: var(--paper-2); border-left: 2px solid var(--ink); font-size: var(--fs-sm); line-height: 1.55; }
/* who reacted: one row per number or address */
.sp-resp { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.sp-resp:empty { display: none; }
/* design D2: the two selects side by side, the number or address full width under them, "Entfernen" below on the right */
.sp-resp__row { display: grid; gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.sp-resp__row > .sp-btn--quiet { justify-self: end; }
.sp-resp__controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); min-width: 0; }
.sp-resp__controls .sp-input { grid-column: 1 / -1; }
/* the pause switch: a track with a knob, the state also in words beside it */
.sp-set__switch { display: flex; }
.sp-switch { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-md); font-weight: 560; cursor: pointer; text-align: left; }
.sp-switch__track { position: relative; flex: none; width: 44px; height: 26px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--paper); transition: background-color 160ms var(--ease), border-color 160ms var(--ease); }
.sp-switch__knob { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink-2); transition: transform 200ms var(--ease), background-color 160ms; }
.sp-switch[aria-checked='true'] .sp-switch__track { background: var(--ink); border-color: var(--ink); }
.sp-switch[aria-checked='true'] .sp-switch__knob { transform: translateX(18px); background: var(--paper); }
.sp-switch:hover .sp-switch__track { border-color: var(--ink); }
.sp-switch[aria-busy='true'] { cursor: progress; opacity: 0.7; }
.sp-switch[disabled] { cursor: progress; }
.sp-switch[disabled]:not([aria-busy='true']) { cursor: not-allowed; opacity: 0.45; } /* design D4 */
/* the location while paused or withdrawn: the same ruled block as "Monitoring läuft", without the pulse */
.sp-live--held { border-top-color: var(--line-strong); }

/* ---------- security drawer (part 4e3c): opened from the header, one account ---------- */
/* phones: the shield alone (its name stays for screen readers), so brand, Sicherheit and Abmelden fit on one line */
@media (max-width: 479px) { .sp-top__nav { gap: var(--s2); } .sp-top__nav .sp-tool span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sp-top__nav .sp-tool { width: 44px; min-height: 44px; padding: 0; justify-content: center; } }
.sp-keys { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.sp-keys__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.sp-keys__body { display: grid; gap: 2px; min-width: 0; }
.sp-keys__name { font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sp-keys__meta { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
.sp-keys__item .sp-btn--quiet { min-height: 44px; color: var(--ink-2); }
/* the QR code on its own sheet: paper, a hairline, a fixed size that phones scan from a screen */
.sp-qrbox { justify-self: start; padding: var(--s3); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.sp-qr { display: block; width: 196px; height: 196px; }
.sp-turnstile:empty { display: none; }
.sp-turnstile { min-height: 0; }
/* design review 4e3c: 44 px targets (D1); one size for quiet actions (D5); one rule under the list (D9); the sheet keeps its
   height between views on phones, so the close button stays put (D7); the codes' tick belongs to "Fertig" (D10) */
.sp-drawer .sp-copy { min-height: 44px; }
.sp-keys__item .sp-btn--quiet, .sp-set__foot .sp-btn--quiet { font-size: var(--fs-sm); }
.sp-keys__item:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-keys__meta .sp-mono { font-size: 0.95em; }
@media (max-width: 639px) { .sp-drawer--security { height: 92dvh; } }
.sp-set-view .sp-decl { border-bottom: 0; }
/* D2: on a phone the app opens from a button; the QR code (which a phone cannot scan from its own screen) steps back */
.sp-otp-here { display: none; }
@media (pointer: coarse) and (max-width: 639px) { .sp-otp-here { display: flex; } .sp-drawer--security .sp-qrbox { display: none; } }

/* ---------- part 4e4c: the signed upload (servicepuls-portal-authority-upload.js), after the 4e4c design review ---------- */
.sp-strong { font-weight: 600; color: var(--ink); }
/* A proof route: a heading row, or (D3) a folded route whose summary is that row, 44 px tall. */
.sp-route__head { margin: 0; font: inherit; }
.sp-route__summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
.sp-route__summary::-webkit-details-marker { display: none; }
.sp-route__summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg) translateY(-2px); flex: none; }
.sp-route[open] > .sp-route__summary::after { transform: rotate(-135deg) translateY(-2px); }
.sp-route__summary .sp-label, .sp-route__head .sp-label { font-weight: 600; }
.sp-route > .sp-route__body, .sp-route[open] > :not(summary) { margin-top: var(--s3); }
.sp-or + .sp-panel { border-top: 0; padding-top: 0; } /* D10: one rule at "oder", not two */
.sp-disclose > summary { min-height: 44px; display: inline-flex; align-items: center; } /* D9 */
/* D7: the text to print reads as a sheet of paper (hairline, a soft offset shadow), capped to a letter's measure. */
.sp-sheet { max-width: 40rem; padding: var(--s5) var(--s5); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; box-shadow: 3px 3px 0 var(--paper-2); }
.sp-sheet__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink); }
/* D6: the title, the reference and the signing lines set like the printed page; the text itself stays the server's. */
.sp-sheet__title { font-weight: 700; font-size: 1.08em; }
.sp-sheet__ref { font-family: var(--mono); font-weight: 600; }
.sp-sheet__rule { display: inline-block; width: min(70mm, 100%); margin-top: 2.2em; color: transparent; border-bottom: 1px solid var(--ink-2); line-height: 0.4; overflow: hidden; }
.sp-actions--even > .sp-btn { min-width: 10.5rem; justify-content: center; } /* D12 */
/* The file input stays focusable (keyboard) and shows its focus on the label that looks like the button. */
.sp-file { display: grid; gap: var(--s2); justify-items: start; }
.sp-file__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sp-file__input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-file label.sp-btn { cursor: pointer; }
.sp-docpick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: start; padding: var(--s3); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); }
.sp-docpick__thumb { width: 72px; height: auto; max-height: 104px; object-fit: contain; background: var(--paper); border: 1px solid var(--line); }
.sp-docpick__icon { display: grid; place-items: center; width: 72px; height: 96px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-3); }
.sp-docpick__body { display: grid; gap: var(--s1); min-width: 0; }
.sp-docpick__name { font-weight: 600; overflow-wrap: anywhere; }
.sp-docpick .sp-actions { margin-top: var(--s2); }
/* D8: two columns on phones too (thumbnail beside the name); the buttons take the text column's width. */
@media (max-width: 519px) { .sp-docpick__thumb, .sp-docpick__icon { width: 56px; } .sp-docpick__icon { height: 76px; } .sp-docpick .sp-actions { display: grid; } .sp-file label.sp-btn { width: 100%; } }
#sp-print-root { display: none; }
@media print {
  /* Only the sheet, on its own named page (review Q8: other prints keep the normal margins): DIN 5008 room for the
     letterhead at the top (45 mm) and a 25 mm left margin. */
  @page sp-sheet { margin: 45mm 20mm 20mm 25mm; }
  body.sp-printing > *:not(#sp-print-root) { display: none !important; }
  body.sp-printing #sp-print-root { display: block; page: sp-sheet; }
  body.sp-printing #sp-print-root .sp-sheet__text { font-size: 11pt; line-height: 1.5; color: #000; }
  body.sp-printing #sp-print-root .sp-sheet__title { font-size: 13pt; }
  body.sp-printing #sp-print-root .sp-sheet__ref { font-size: 11pt; }
  body.sp-printing #sp-print-root .sp-sheet__rule { width: 75mm; margin-top: 12mm; border-bottom: 0.75pt solid #000; }
}

/* ---------- part 4f1: the action link page (/m/<token>, one-tap "Als erledigt melden" from the report mail) ----------
   Design review D1–D8: the action text is the hero, the h1 a small kicker (a dead link makes its state the h1); the done
   state is a line on the action itself (no strikethrough on a single item); facts in mono, each fact unbroken. */
.sp-mlink__head { margin-bottom: var(--s5); }
.sp-mlink__kicker { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--ink-2); }
#context:empty { display: none; }
.sp-mlink { display: grid; gap: var(--s2); padding: var(--s4) 0; margin-bottom: var(--s5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-mlink__text { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.625rem); font-weight: 650; line-height: 1.25; text-wrap: balance; hyphens: auto; }
.sp-mlink__how { color: var(--ink-2); line-height: 1.45; }
.sp-mlink__facts { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.6; }
.sp-mlink__state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.sp-mlink__state svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) { .sp-mlink__state:not([hidden]) { animation: sp-mlink-in 220ms var(--ease); } }
@keyframes sp-mlink-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.sp-mlink + .sp-visually-hidden + #alert:not(:empty) { margin-bottom: var(--s4); }
.sp-mlink__buttons #undo { padding-inline: 0; font-size: var(--fs-sm); }
#portal .sp-btn { text-decoration: none; }
@media (max-width: 519px) { .sp-mlink__buttons .sp-btn:not(.sp-btn--quiet), #portal .sp-btn { width: 100%; } }

/* ---------- part 4f2b: groups, roles, access ---------- */
.sp-tab--group { font-weight: 620; }
.sp-switcher { max-width: 28rem; }
.sp-rank { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.sp-rank__line { margin: 0; font-size: var(--fs-md); }
.sp-rank__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1.5px solid var(--ink); }
.sp-rank__row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.sp-rank__row[data-own='true'] { font-weight: 680; box-shadow: inset 3px 0 0 var(--ink); padding-left: var(--s2); }
.sp-rank__n { color: var(--ink-2); text-align: right; }
.sp-rank__name { min-width: 0; overflow-wrap: anywhere; }
.sp-rank__pts { white-space: nowrap; color: var(--ink-2); }
.sp-linkbtn { border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; min-height: 44px; }
.sp-linkbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-group { display: grid; gap: var(--s3); padding-top: var(--s4); }
.sp-group__headline { margin: 0; font-size: var(--fs-lg); font-weight: 620; line-height: 1.3; letter-spacing: -0.01em; }
.sp-group__mean { margin: 0; display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); }
.sp-group__pts { font-size: var(--fs-2xl); font-weight: 620; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.sp-invite__facts { margin: 0; }
.sp-choice .sp-strong { display: block; }
.sp-choice .sp-hint { display: block; margin-top: 2px; }
.sp-rank-box:empty { display: none; }
@media (min-width: 960px) {
  .sp-mb > .sp-rank-box { grid-column: 1; }
  .sp-mb > .sp-group { grid-column: 1 / -1; max-width: 40rem; }
}
.sp-tabs:not([hidden]) { margin-bottom: var(--s5); } /* the switcher stands apart from the name under it */
/* design review 4f2b */
.sp-choices--desc { grid-template-columns: 1fr; }
.sp-choices--desc .sp-choice { align-items: flex-start; padding: var(--s3) 14px; }
.sp-choices--desc .sp-choice input { margin-top: 3px; flex: none; }
.sp-choices--desc .sp-choice:has(input:checked) { font-weight: 400; }
.sp-choices--desc .sp-choice:has(input:checked) .sp-strong { font-weight: 650; }
.sp-rank__row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; position: relative; }
.sp-rank__row[data-own='true'] { padding-left: 0; box-shadow: none; }
.sp-rank__row[data-own='true']::before { content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; background: var(--ink); }
.sp-rank__n { text-align: left; }
.sp-rank__pts--thin { color: var(--ink-3); }
.sp-tab { min-height: 44px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sp-tabs + #view { margin-top: var(--s5); }
.sp-tabs[hidden] + #view { margin-top: 0; }
.sp-group__score { display: grid; gap: 2px; }
.sp-group__verdict { font-size: var(--fs-md); font-weight: 650; }
.sp-invite__facts { display: grid; grid-template-columns: 1fr; gap: 2px var(--s4); }
@media (min-width: 340px) { .sp-invite__facts { grid-template-columns: max-content minmax(0, 1fr); } }
#new-submit, #accept { line-height: 1.25; text-wrap: balance; }
@media (min-width: 960px) {
  .sp-groupview { max-width: 40rem; }
  .sp-mb.sp-mb--group { display: block; }
  .sp-mb--group > .sp-group { max-width: none; }
}
/* Review 4f2b Q8e: 44 px targets in the 4f2b views (the older .sp-copy places keep 40 px until their own pass). */
.sp-groupview .sp-copy, .sp-drawer--team .sp-copy, .sp-rank .sp-copy { min-height: 44px; }
/* ---------- part 4f3c: group billing sheet, „Standort hinzufügen", „Wieder aufnehmen" ---------- */
/* A location row in the group sheet is one button: name and state left, an arrow right (it opens that location's sheet). */
.sp-keys__item:has(> .sp-keyrow) { grid-template-columns: minmax(0, 1fr); padding: 0; }
.sp-keyrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s3) 0; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.sp-keyrow > svg { width: 18px; height: 18px; color: var(--ink-3); }
.sp-keyrow:hover .sp-keys__name { text-decoration: underline; text-underline-offset: 3px; }
.sp-keyrow:hover > svg { color: var(--ink); }
.sp-keyrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-keyrow .sp-keys__body { display: grid; }
.sp-keys__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s2); }
.sp-drawer__back { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; justify-self: start; color: var(--ink-2); padding-left: 0; }
.sp-drawer__back > svg { width: 18px; height: 18px; }
.sp-drawer--team .sp-decl { padding: var(--s3) 0; }
/* 4f3c design review */
.sp-drawer--team fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } /* D1 */
.sp-drawer--team legend { padding: 0; }
.sp-formgroup { display: grid; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); } /* D4 */
.sp-formgroup__title { font-size: var(--fs-sm); font-weight: 650; letter-spacing: -0.005em; }
.sp-grid2--zip { grid-template-columns: 6.5rem minmax(0, 1fr); } /* D4: PLZ and Ort on one row at every width */
@media (min-width: 360px) { .sp-drawer .sp-facts { grid-template-columns: 9.5rem minmax(0, 1fr); } } /* D6 */
.sp-drawer__back { margin-block: calc(-1 * var(--s3)); font-size: var(--fs-sm); } /* D7 */
@media (max-width: 519px) { /* D8: two actions go under the text */
  .sp-keys__item:has(.sp-keys__acts > :nth-child(2)) { grid-template-columns: minmax(0, 1fr); }
  .sp-keys__item:has(.sp-keys__acts > :nth-child(2)) .sp-keys__acts { justify-content: flex-start; gap: 0 var(--s4); }
}
.sp-drawer--team .sp-decls .sp-decl { border-bottom: 1px solid var(--line); padding: var(--s4) 0; } /* D9 */
.sp-grid2--zip { gap: var(--s3); }