@charset "UTF-8";
@font-face {
  font-display: swap;
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  src: url("/site/templates/dist/assets/SchibstedGrotesk-latin-ext.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-display: swap;
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  src: url("/site/templates/dist/assets/SchibstedGrotesk-latin.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 {
  color-scheme: light;
  --color-accent: #e30613;
  --color-on-red: #ffffff;
  --color-ink: #0a0a0a;
  --color-paper: #ffffff;
  --color-muted: #666666;
  --color-grid: rgba(10, 10, 10, .09);
  --color-soft: #f5f5f5;
  --color-error-soft: #faf3f3;
  --color-ok: #0b6b47;
  --color-ok-soft: #eef4f0;
  --color-ring: rgba(10, 10, 10, .72);
  --color-ring-soft: rgba(10, 10, 10, .10);
  --color-field-hover: rgba(10, 10, 10, .14);
  --color-field-line: rgba(10, 10, 10, .22);
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --space-unit: 8px;
  --content-width: 1280px;
  --shell-gutter: calc(var(--space-unit) * 5);
  --transition-fast: 150ms ease;
}

:root[data-theme=dark] {
  color-scheme: dark;
  --color-accent: #ff453a;
  --color-ink: #ededed;
  --color-paper: #161616;
  --color-muted: #a8a8a8;
  --color-grid: rgba(255, 255, 255, .10);
  --color-soft: #1f1f1f;
  --color-error-soft: #2a1515;
  --color-ok: #57c98d;
  --color-ok-soft: #15241d;
  --color-ring: rgba(237, 237, 237, .72);
  --color-ring-soft: rgba(237, 237, 237, .14);
  --color-field-hover: rgba(237, 237, 237, .18);
  --color-field-line: rgba(237, 237, 237, .28);
}

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

html {
  -webkit-font-smoothing: antialiased;
  background: var(--color-paper);
  color: var(--color-ink);
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 320px;
  overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

body {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font-size: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

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

.skip-link {
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: 13px;
  font-weight: 700;
  left: var(--space-unit);
  padding: var(--space-unit) calc(var(--space-unit) * 1.5);
  position: fixed;
  text-decoration: none;
  top: var(--space-unit);
  transform: translateY(calc(-100% - var(--space-unit) * 2));
  z-index: 100;
}

.skip-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  transform: translateY(0);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1;
}

.eyebrow {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: calc(var(--space-unit) * 1.5);
  text-transform: uppercase;
}

.muted {
  color: var(--color-muted);
}

.page-back__arrow {
  display: inline-flex;
  flex: none;
}
.page-back__arrow svg {
  display: block;
  height: 15px;
  width: 15px;
}

.page-back {
  align-items: center;
  border-bottom: 1px solid transparent;
  color: var(--color-muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 7px;
  letter-spacing: 0.05em;
  margin-top: calc(var(--space-unit) * 4);
  padding-bottom: 1px;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}
.page-back:hover, .page-back:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.page-back + .page-heading {
  padding-top: calc(var(--space-unit) * 2);
}

.page-heading {
  align-items: end;
  display: grid;
  gap: calc(var(--space-unit) * 3);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: calc(var(--space-unit) * 6) 0 calc(var(--space-unit) * 4);
}
.page-heading__title {
  font-size: clamp(46px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.9;
}
.page-heading__count {
  color: var(--color-accent);
  font-size: 0.5em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-left: 0.32em;
}
.page-heading__meta {
  color: var(--color-muted);
  font-size: 15px;
  margin-top: calc(var(--space-unit) * 1.5);
}
.page-heading__meta strong {
  color: var(--color-ink);
  font-weight: 600;
}
.page-heading__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-unit) * 1.5);
  justify-content: flex-end;
}
@media (max-width: 820px) {
  .page-heading {
    display: block;
    padding-top: calc(var(--space-unit) * 5);
  }
  .page-heading__title {
    font-size: 46px;
  }
  .page-heading__actions {
    justify-content: flex-start;
    margin-top: calc(var(--space-unit) * 3);
  }
}

.section-bar {
  align-items: center;
  border-bottom: 1px solid var(--color-ink);
  display: flex;
  gap: calc(var(--space-unit) * 2);
  justify-content: space-between;
  margin-top: calc(var(--space-unit) * 2);
  padding: calc(var(--space-unit) * 3) 0 calc(var(--space-unit) * 1.5);
}
.section-bar__tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-unit) calc(var(--space-unit) * 3);
  justify-content: flex-end;
}
.section-bar--flush {
  border-bottom: 0;
}
@media (max-width: 820px) {
  .section-bar {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .section-bar__tools {
    justify-content: flex-start;
    width: 100%;
  }
}

.page-heading + .section-bar {
  margin-top: 0;
  padding-top: var(--space-unit);
}

.app-shell {
  margin: 0 auto;
  max-width: var(--content-width);
  padding-inline: var(--shell-gutter);
  width: 100%;
}
@media (max-width: 820px) {
  .app-shell {
    --shell-gutter: calc(var(--space-unit) * 2.5);
  }
}

.app-header {
  align-items: end;
  border-bottom: 2px solid var(--color-ink);
  display: grid;
  gap: calc(var(--space-unit) * 3);
  grid-template-columns: auto minmax(0, 1fr);
  max-width: calc(var(--content-width) - var(--shell-gutter) * 2);
  padding-block: calc(var(--space-unit) * 5) calc(var(--space-unit) * 3);
  padding-inline: 0;
  width: calc(100% - var(--shell-gutter) * 2);
}
@media (max-width: 820px) {
  .app-header {
    align-items: center;
    padding-block: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
  }
  .app-header .brand {
    margin-bottom: 0;
  }
}

.brand {
  align-items: baseline;
  display: inline-flex;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 3px;
  text-decoration: none;
}
.brand__disc {
  background: var(--color-accent);
  border-radius: 50%;
  display: inline-block;
  height: 0.56em;
  margin-left: 0.05em;
  transform: translateY(0.005em);
  width: 0.56em;
}

.app-nav {
  align-items: center;
  display: flex;
  gap: calc(var(--space-unit) * 4);
  justify-content: flex-end;
  min-width: 0;
}
.app-nav__link {
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding-bottom: 2px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-nav__link:hover, .app-nav__link:focus-visible {
  color: var(--color-accent);
}
.app-nav__link[aria-current=page] {
  border-color: var(--color-accent);
}
.app-nav__link--quiet {
  color: var(--color-muted);
  font-weight: 500;
}
.app-nav__timer {
  display: contents;
}
.app-nav__icon {
  align-items: center;
  border-bottom: 2px solid transparent;
  color: color-mix(in srgb, var(--color-muted) 62%, transparent);
  display: inline-flex;
  flex: none;
  justify-content: center;
  margin-left: calc(var(--space-unit) * 0.5);
  padding-bottom: 2px;
  position: relative;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.app-nav__icon::before {
  content: "";
  inset: -4px -5px;
  position: absolute;
}
.app-nav__icon svg {
  display: block;
  height: 16px;
  width: 16px;
}
.app-nav__icon:hover, .app-nav__icon:focus-visible {
  color: var(--color-accent);
}
.app-nav__label {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
@media (max-width: 820px) {
  .app-nav {
    gap: calc(var(--space-unit) * 2.5);
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .app-nav__icon {
    margin-left: 0;
  }
  .app-nav__icon svg {
    display: none;
  }
  .app-nav__label {
    clip-path: none;
    font-size: 13px;
    font-weight: 500;
    height: auto;
    letter-spacing: 0.04em;
    overflow: visible;
    position: static;
    text-transform: uppercase;
    width: auto;
  }
  .app-nav--guest {
    justify-content: flex-end;
  }
  .app-nav::-webkit-scrollbar {
    display: none;
  }
}

.theme-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-ink);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 34px;
  justify-content: center;
  padding: 0;
  transition: color 0.18s;
  width: 34px;
}
.theme-toggle svg {
  display: block;
  height: 18px;
  width: 18px;
}
.theme-toggle .i-sun,
.theme-toggle .i-moon-fill,
.theme-toggle .i-sun-fill {
  display: none;
}
.theme-toggle:hover .i-moon {
  display: none;
}
.theme-toggle:hover .i-moon-fill {
  color: #222a44;
  display: block;
}

:root[data-theme=dark] .theme-toggle .i-moon {
  display: none;
}
:root[data-theme=dark] .theme-toggle .i-sun {
  display: block;
}
:root[data-theme=dark] .theme-toggle:hover .i-moon-fill {
  display: none;
}
:root[data-theme=dark] .theme-toggle:hover .i-sun {
  display: none;
}
:root[data-theme=dark] .theme-toggle:hover .i-sun-fill {
  color: #ffce47;
  display: block;
}

.app-main {
  flex: 1 0 auto;
}

.app-footer {
  align-items: center;
  border-top: 1px solid var(--color-grid);
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
  justify-content: space-between;
  margin-top: calc(var(--space-unit) * 5);
  max-width: calc(var(--content-width) - var(--shell-gutter) * 2);
  padding-block: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
  padding-inline: 0;
  width: calc(100% - var(--shell-gutter) * 2);
}
.app-footer a {
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  color: var(--color-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding-bottom: 1px;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.app-footer a:hover, .app-footer a:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.app-footer__start {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-unit) calc(var(--space-unit) * 2.5);
  min-width: 0;
}
.app-footer__links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-unit) calc(var(--space-unit) * 3);
}
.app-footer__made-in {
  align-items: center;
  display: inline-flex;
  flex: none;
  font-size: 11px;
  gap: 7px;
  letter-spacing: 0.08em;
  margin-left: auto;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-footer__made-in::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M0 0h32v32H0z' fill='%23e30613'/%3E%3Cpath d='M13 6h6v7h7v6h-7v7h-6v-7H6v-6h7z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  flex: none;
  height: 13px;
  width: 13px;
}
.app-footer__theme {
  display: inline-flex;
}
@media (max-width: 820px) {
  .app-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .app-footer__made-in {
    align-self: flex-end;
    margin-left: 0;
  }
}

.basic-content {
  padding-bottom: calc(var(--space-unit) * 8);
}
.basic-content__body {
  color: color-mix(in srgb, var(--color-ink) 72%, transparent);
  font-size: 16px;
  line-height: 1.6;
  max-width: 70ch;
}
.basic-content__body > * + * {
  margin-top: calc(var(--space-unit) * 1.5);
}
.basic-content__body h2 {
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent);
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: calc(var(--space-unit) * 6);
  padding-top: calc(var(--space-unit) * 2.5);
}
.basic-content__body h2:first-child,
.basic-content__body .content-meta + h2 {
  margin-top: 0;
}
.basic-content__body h3 {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.3;
  margin-top: calc(var(--space-unit) * 4);
  text-transform: uppercase;
}
.basic-content__body h4 {
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: calc(var(--space-unit) * 3);
}
.basic-content__body strong {
  color: var(--color-ink);
  font-weight: 700;
}
.basic-content__body ul,
.basic-content__body ol {
  padding-left: calc(var(--space-unit) * 2.5);
}
.basic-content__body li + li {
  margin-top: calc(var(--space-unit) * 0.5);
}
.basic-content__body a {
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.basic-content__body a:hover, .basic-content__body a:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.basic-content__body table {
  border-collapse: collapse;
  font-size: 14px;
  margin-top: calc(var(--space-unit) * 3);
  width: 100%;
}
.basic-content__body th,
.basic-content__body td {
  border-bottom: 1px solid var(--color-grid);
  padding: calc(var(--space-unit) * 1.25) 0;
  text-align: left;
  vertical-align: top;
}
.basic-content__body .content-meta {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: calc(var(--space-unit) * 3);
  text-transform: uppercase;
}
.basic-content__body .content-placeholder {
  color: var(--color-accent);
  font-weight: 700;
}
.basic-content__body .content-callout {
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 22%, transparent);
  margin-top: calc(var(--space-unit) * 4);
  padding-top: calc(var(--space-unit) * 2);
}
@media (max-width: 820px) {
  .basic-content {
    padding-bottom: calc(var(--space-unit) * 6);
  }
  .basic-content__body {
    font-size: 15px;
  }
  .basic-content__body h2 {
    font-size: 23px;
  }
}

.app-main:has(.error-page) {
  display: flex;
  flex-direction: column;
}

.error-page-host {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.error-page {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--space-unit) * 4) 0;
  perspective: 1400px;
  text-align: center;
}
.error-page__eyebrow {
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.error-page__numerals {
  align-items: center;
  color: var(--color-ink);
  display: flex;
  font-size: clamp(96px, 19vw, 210px);
  font-weight: 700;
  gap: 0.05em;
  justify-content: center;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: calc(var(--space-unit) * 3) 0 calc(var(--space-unit) * 4);
  transform-style: preserve-3d;
  will-change: transform;
}
.error-page__coin {
  background: var(--color-accent);
  border-radius: 50%;
  display: inline-block;
  height: 0.72em;
  transform: translateY(-0.02em);
  width: 0.72em;
}
.error-page__lead {
  color: var(--color-ink);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: calc(var(--space-unit) * 4);
}
.error-page__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-unit) * 1.5);
  justify-content: center;
}

.actions,
.form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-unit) * 1.5);
}

.actions__danger {
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  margin-left: calc(var(--space-unit) * 1.5);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.actions__danger:hover {
  color: var(--color-ink);
}

.button {
  align-items: center;
  background: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: 0;
  color: var(--color-paper);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: var(--space-unit);
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 42px;
  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 2.5);
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.button:hover, .button:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-red);
}
.button:active {
  transform: translateY(1px);
}
.button:disabled, .button[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.4;
}
.button--secondary {
  background: transparent;
  color: var(--color-ink);
}
.button--secondary:hover, .button--secondary:focus-visible {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}
.button--danger {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-red);
}
.button--danger:hover, .button--danger:focus-visible {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}
.button--small {
  min-height: 36px;
  padding: var(--space-unit) calc(var(--space-unit) * 1.75);
}
@media (max-width: 560px) {
  .button__label-wide {
    display: none;
  }
}
.button[aria-disabled=true]:hover, .button[aria-disabled=true]:focus-visible {
  transform: none;
}
.button[aria-disabled=true].button--secondary:hover, .button[aria-disabled=true].button--secondary:focus-visible {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.button svg {
  height: 16px;
  width: 16px;
}

.cursor-tooltip {
  background: var(--color-ink);
  box-sizing: border-box;
  color: var(--color-paper);
  font-size: 12px;
  font-weight: 600;
  left: 0;
  line-height: 1.3;
  max-width: min(360px, 100vw - 24px);
  opacity: 0;
  overflow-wrap: break-word;
  padding: calc(var(--space-unit) * 0.9) calc(var(--space-unit) * 1.5);
  pointer-events: none;
  position: fixed;
  text-transform: none;
  top: 0;
  transition: opacity 120ms ease;
  visibility: hidden;
  white-space: normal;
  width: max-content;
  z-index: 40;
}
.cursor-tooltip[data-visible=true] {
  opacity: 1;
  visibility: visible;
}

.text-button {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.text-button:hover,
.text-button:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.form-actions {
  border-top: 1px solid var(--color-ink);
  margin-top: var(--space-unit);
  padding-top: calc(var(--space-unit) * 3);
}
.form-actions__danger {
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-actions__danger:hover {
  color: var(--color-ink);
}
.form-actions__side {
  align-items: center;
  display: flex;
  gap: calc(var(--space-unit) * 1.5);
  margin-left: auto;
}
.form-actions__side .form-actions__danger {
  margin-left: 0;
}
.form-actions__archive, .form-actions__inline-action, .form-actions__inline-danger {
  background: none;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.form-actions__archive:hover, .form-actions__archive:focus-visible, .form-actions__inline-action:hover, .form-actions__inline-action:focus-visible, .form-actions__inline-danger:hover, .form-actions__inline-danger:focus-visible {
  color: var(--color-ink);
}
.form-actions__archive {
  font-size: 13px;
}
.form-actions__inline-action {
  display: inline;
}
.form-actions__inline-danger {
  color: var(--color-accent);
  margin-left: var(--space-unit);
}
.form-actions__note {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.5;
  margin-left: auto;
  max-width: 52ch;
  text-align: right;
  text-wrap: balance;
}

.confirm-dialog {
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  box-shadow: 0 24px 50px -24px rgba(10, 10, 10, 0.5);
  color: var(--color-ink);
  max-height: calc(100vh - var(--space-unit) * 4);
  max-width: 380px;
  overflow: auto;
  padding: 0;
  width: calc(100vw - var(--space-unit) * 4);
}
.confirm-dialog::backdrop {
  background: rgba(10, 10, 10, 0.45);
}
.confirm-dialog > form {
  margin: 0;
}
.confirm-dialog__body {
  padding: calc(var(--space-unit) * 3);
}
.confirm-dialog__kicker {
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.confirm-dialog__title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  margin: calc(var(--space-unit) * 1.25) 0 calc(var(--space-unit) * 1.5);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.confirm-dialog__copy {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}
.confirm-dialog__footer {
  border-top: 1px solid var(--color-grid);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-unit) * 1.5);
  justify-content: flex-end;
  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
}

.notice {
  background: var(--color-soft);
  border-left: 3px solid var(--color-ink);
  font-size: 13px;
  line-height: 1.5;
  margin: calc(var(--space-unit) * 3) 0;
  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
}
.notice--error {
  background: var(--color-error-soft);
  border-color: var(--color-accent);
}
.notice--success {
  background: var(--color-soft);
  border-color: var(--color-ink);
}
.notice a {
  color: var(--color-accent);
  font-weight: 600;
}

.toast-region {
  align-items: center;
  display: flex;
  bottom: 0;
  flex-direction: column-reverse;
  gap: calc(var(--space-unit) * 1.25);
  left: 50%;
  max-width: min(440px, 100vw - var(--space-unit) * 4);
  padding: calc(var(--space-unit) * 3);
  pointer-events: none;
  position: fixed;
  transform: translateX(-50%);
  z-index: 60;
}

.toast {
  font-size: 13px;
  line-height: 1.45;
  max-width: min(400px, 100%);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  width: max-content;
  will-change: transform, opacity;
}
.toast.v-ink {
  align-items: center;
  background: var(--color-ink);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.2);
  color: var(--color-paper);
  cursor: pointer;
  display: flex;
  gap: calc(var(--space-unit) * 1.5);
  padding: calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2.25);
}
.toast.is-enter {
  opacity: 0;
  transform: translateY(34px);
}
.toast.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast.is-leave {
  opacity: 0;
  transform: translateY(22px) scale(0.99);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.9, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.9, 1);
}
@media (prefers-reduced-motion: reduce) {
  .toast.is-enter {
    opacity: 0;
    transform: none;
  }
  .toast.is-in {
    transform: none;
    transition: opacity 0.2s ease;
  }
  .toast.is-leave {
    transform: none;
    transition: opacity 0.18s ease;
  }
}

.v-ink__dot {
  background: var(--color-paper);
  border-radius: 50%;
  flex: none;
  height: 9px;
  width: 9px;
}
.v-ink.is-error .v-ink__dot {
  background: var(--color-accent);
}

.toast__msg {
  display: block;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.empty-state {
  align-items: flex-start;
  color: var(--color-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-unit);
  padding: calc(var(--space-unit) * 7) 0;
}
.empty-state__title {
  color: var(--color-ink);
  font-size: 18px;
}
.empty-state__copy {
  max-width: 58ch;
  text-wrap: balance;
}
.empty-state .button {
  margin-top: calc(var(--space-unit) * 2);
}

.small-note {
  border-top: 1px solid var(--color-grid);
  color: var(--color-muted);
  font-size: 13px;
  margin-top: calc(var(--space-unit) * 4);
  padding-top: calc(var(--space-unit) * 2.5);
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.data-table {
  border-collapse: collapse;
  width: 100%;
}
.data-table__heading {
  border-bottom: 1px solid var(--color-grid);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
  text-align: left;
  text-transform: uppercase;
}
.data-table__cell {
  border-bottom: 1px solid var(--color-grid);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: calc(var(--space-unit) * 2);
  vertical-align: top;
}
.data-table__heading--right, .data-table__cell--right {
  text-align: right;
}
.data-table__row {
  transition: background-color 100ms ease;
}
.data-table__row:hover, .data-table__row:focus-within {
  background: var(--color-soft);
}
.data-table__row--link {
  cursor: pointer;
}
.data-table__row--link:hover .data-table__link {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.data-table__footer .data-table__cell {
  border-bottom: 0;
  color: var(--color-muted);
  font-weight: 400;
}
.data-table__footer .data-table__cell--right {
  color: var(--color-ink);
  font-size: 20px;
  font-weight: 700;
}
.data-table__link {
  border-bottom: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
}
.data-table__link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.data-table__primary {
  font-weight: 600;
}
.data-table__secondary {
  color: var(--color-muted);
  font-size: 13px;
}
.data-table__action {
  border-bottom: 1px solid var(--color-grid);
  color: var(--color-muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}
.data-table__action:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.data-table__currency-total {
  display: block;
}
.data-table__currency-total + .data-table__currency-total {
  margin-top: calc(var(--space-unit) * 0.5);
}

.status {
  align-items: center;
  --status-color: var(--color-muted);
  color: var(--color-muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 7px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status::before {
  background: var(--status-color);
  content: "";
  flex: none;
  height: 8px;
  width: 8px;
}
.status--paid {
  --status-color: #1a8a4a;
  color: var(--status-color);
}
.status--sent {
  --status-color: #d66f16;
  color: var(--status-color);
}
.status--overdue {
  --status-color: var(--color-accent);
  color: var(--status-color);
}
.status--draft {
  color: var(--status-color);
}
.status--draft::before {
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--status-color);
}

@media (max-width: 820px) {
  .data-table {
    min-width: 720px;
  }
  .data-table--compact {
    min-width: 620px;
  }
}
.form {
  padding-bottom: calc(var(--space-unit) * 2);
}

.form-section {
  border-top: 1px solid var(--color-ink);
  display: grid;
  gap: calc(var(--space-unit) * 6);
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
  padding: calc(var(--space-unit) * 4) 0;
}
.form-section__heading h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.form-section__heading p {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.5;
  margin-top: calc(var(--space-unit) * 1.5);
  max-width: 26ch;
  text-wrap: pretty;
}
.form-section__heading--actions {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 2);
}

.address-mode-toggle {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
}
.address-mode-toggle:hover, .address-mode-toggle:focus-visible {
  color: var(--color-accent);
}

.form-grid {
  display: grid;
  gap: calc(var(--space-unit) * 3.5) calc(var(--space-unit) * 3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-grid--address {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.form-grid--issuer-address .field--street {
  grid-column: span 8;
}
.form-grid--issuer-address .field--number,
.form-grid--issuer-address .field--postal,
.form-grid--issuer-address .field--city,
.form-grid--issuer-address .field--country {
  grid-column: span 4;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-unit);
  min-width: 0;
}
.field--wide {
  grid-column: 1/-1;
}
.field--street {
  grid-column: span 9;
}
.field--number, .field--postal {
  grid-column: span 3;
}
.field--city {
  grid-column: span 5;
}
.field--country {
  grid-column: span 4;
}
.field__label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.field__label-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-unit) * 1.5);
  justify-content: space-between;
  min-width: 0;
}
.field__label-action {
  color: var(--color-muted);
  flex: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.field__label-action:hover, .field__label-action:focus-visible {
  color: var(--color-accent);
}
.field__label--with-hint {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.5);
  justify-content: space-between;
}
.field__label-hint {
  font-weight: 400;
  letter-spacing: 0;
  margin-left: auto;
  max-width: 100%;
  opacity: 0.95;
  overflow-wrap: anywhere;
  text-align: right;
  text-transform: none;
}
.field__optional {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.field__hint {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.4;
}
.field input,
.field select,
.field textarea {
  background-color: var(--color-soft);
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-ink);
  font-weight: 500;
  min-height: 42px;
  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 1.5);
  transition: background-color 180ms ease, box-shadow 180ms ease;
  width: 100%;
}
.field input::placeholder,
.field select::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--color-ink) 58%, var(--color-soft));
  opacity: 1;
}
.field input.field__input--iban {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.03em;
  padding-bottom: calc(var(--space-unit) * 1.25 - 2px);
  padding-top: calc(var(--space-unit) * 1.25 + 2px);
}
.field textarea {
  line-height: 1.45;
  resize: vertical;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(var(--color-field-line), var(--color-field-line));
  background-position: right 0.95em center, right 2.35em center;
  background-repeat: no-repeat, no-repeat;
  background-size: 12px 8px, 1px 56%;
  cursor: pointer;
  padding-right: 2.9em;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: transparent;
  box-shadow: inset 0 0 0 0.5px var(--color-ring);
  outline: 0;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  box-shadow: inset 0 0 0 0.5px var(--color-ring), 0 0 0 3px var(--color-ring-soft);
}
.field input[aria-invalid=true],
.field select[aria-invalid=true],
.field textarea[aria-invalid=true] {
  box-shadow: inset 0 0 0 0.5px var(--color-accent);
}
.field__error {
  color: var(--color-accent);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.field input[type=file] {
  padding: calc(var(--space-unit) * 0.75);
}
.field input[type=file]::file-selector-button {
  background: var(--color-paper);
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: calc(var(--space-unit) * 1.5);
  padding: calc(var(--space-unit) * 0.75) calc(var(--space-unit) * 1.25);
  text-transform: uppercase;
}

:root[data-theme=dark] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ededed' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(var(--color-field-line), var(--color-field-line));
}

.check {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 10px;
}
.check input[type=checkbox] {
  appearance: none;
  background: var(--color-paper);
  border: 1px solid var(--color-ink);
  cursor: pointer;
  flex: none;
  height: 16px;
  width: 16px;
}
.check input[type=checkbox]:checked {
  background-color: var(--color-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 8px;
}

:root[data-theme=dark] .check input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' fill='none' stroke='%23161616' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (hover: hover) {
  .field input:hover:not(:focus),
  .field select:hover:not(:focus),
  .field textarea:hover:not(:focus) {
    background-color: color-mix(in srgb, var(--color-soft), var(--color-ink) 2.5%);
    box-shadow: inset 0 0 0 0.5px var(--color-field-hover);
  }
}
@media (max-width: 820px) {
  .form-section {
    display: block;
  }
  .form-section__heading {
    margin-bottom: calc(var(--space-unit) * 3);
  }
  .form-section__heading p {
    max-width: none;
  }
  .form-grid,
  .form-grid--address {
    grid-template-columns: 1fr;
  }
  .field--wide,
  .field--street,
  .field--number,
  .field--postal,
  .field--city,
  .field--country,
  .form-grid--issuer-address .field--city,
  .form-grid--issuer-address .field--country {
    grid-column: auto;
  }
}
.filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-unit);
}
.filter-nav__link {
  align-items: center;
  border: 1px solid var(--color-field-line);
  border-radius: 999px;
  color: var(--color-ink);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: calc(var(--space-unit) * 0.75);
  letter-spacing: -0.01em;
  padding: calc(var(--space-unit) * 0.75) calc(var(--space-unit) * 0.75) calc(var(--space-unit) * 0.75) calc(var(--space-unit) * 1.5);
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.filter-nav__link:hover {
  border-color: var(--color-ink);
}
.filter-nav__link:focus-visible {
  box-shadow: 0 0 0 3px var(--color-ring-soft);
  outline: 0;
}
.filter-nav__link[aria-current=true] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-red);
}
.filter-nav__count {
  align-items: center;
  background: var(--color-soft);
  border-radius: 999px;
  color: var(--color-muted);
  display: inline-flex;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  height: calc(var(--space-unit) * 2.25);
  justify-content: center;
  min-width: calc(var(--space-unit) * 2.25);
  padding: 0 calc(var(--space-unit) * 0.625);
}
.filter-nav__link[aria-current=true] .filter-nav__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-on-red);
}

.view-switch {
  display: inline-flex;
  height: 42px;
}
.view-switch[hidden] {
  display: none;
}
.view-switch__btn {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  transition: color var(--transition-fast);
  width: 36px;
}
.view-switch__btn::after {
  background: transparent;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: background-color var(--transition-fast);
  width: 26px;
}
.view-switch__btn:hover:not([aria-pressed=true]) {
  color: var(--color-ink);
}
.view-switch__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.view-switch__btn[aria-pressed=true] {
  color: var(--color-accent);
}
.view-switch__btn[aria-pressed=true]::after {
  background: var(--color-accent);
}
.view-switch__btn svg {
  display: block;
  height: 18px;
  width: 18px;
}

.client-grid {
  border-left: 1px solid var(--color-grid);
  border-top: 1px solid var(--color-grid);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 820px) {
  .client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .client-grid {
    grid-template-columns: 1fr;
  }
}

.client-card {
  border-bottom: 1px solid var(--color-grid);
  border-right: 1px solid var(--color-grid);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-unit);
  min-height: 118px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: calc(var(--space-unit) * 2.25);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.client-card:hover {
  background: var(--color-soft);
}
.client-card:hover .client-card__name {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.client-card__name {
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.client-card__loc {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.4;
}
.client-card__contact {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: calc(var(--space-unit) * 0.5);
}
.client-card__contact-name {
  color: var(--color-ink);
  font-weight: 600;
}

.first-invoice-guide-wrap {
  margin-bottom: calc(var(--space-unit) * 0.2);
  margin-top: calc(var(--space-unit) * 3);
  padding-top: calc(var(--space-unit) * 2.5);
  position: relative;
}
.first-invoice-guide-wrap__dismiss {
  margin: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: -8px;
  transition: opacity 0.18s;
}
.first-invoice-guide-wrap__dismiss button {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 0 0 2px;
  transition: color 0.15s, border-color 0.15s;
}
.first-invoice-guide-wrap__dismiss button:hover {
  border-bottom-color: var(--color-ink);
  color: var(--color-ink);
}
.first-invoice-guide-wrap:hover .first-invoice-guide-wrap__dismiss, .first-invoice-guide-wrap:focus-within .first-invoice-guide-wrap__dismiss {
  opacity: 1;
}
@media (max-width: 560px) {
  .first-invoice-guide-wrap {
    margin-bottom: 0;
  }
  .first-invoice-guide-wrap__dismiss {
    opacity: 1;
  }
}

.first-invoice-guide {
  align-items: center;
  background: var(--color-ok-soft);
  border-left: 3px solid var(--color-ok);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2.5);
}
.first-invoice-guide__task {
  margin-right: auto;
  min-width: min(250px, 100%);
}
.first-invoice-guide__label {
  color: var(--color-ok);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.first-invoice-guide__title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-top: 3px;
}
.first-invoice-guide__progress {
  align-items: center;
  display: flex;
  gap: calc(var(--space-unit) * 1.5);
}
.first-invoice-guide__steps {
  align-items: center;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.first-invoice-guide__step {
  display: flex;
  position: relative;
}
.first-invoice-guide__step + .first-invoice-guide__step {
  margin-left: calc(var(--space-unit) * 1.5);
}
.first-invoice-guide__step + .first-invoice-guide__step::before {
  background: var(--color-field-line);
  content: "";
  height: 1px;
  position: absolute;
  right: 100%;
  top: 50%;
  width: calc(var(--space-unit) * 1.5);
}
.first-invoice-guide__mark {
  background-color: var(--color-ok-soft);
  display: block;
  height: 18px;
  position: relative;
  width: 18px;
  z-index: 1;
}
.first-invoice-guide__mark::after {
  content: "";
  inset: -3px;
  position: absolute;
}
.first-invoice-guide__mark:hover, .first-invoice-guide__mark:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-ok);
}
.first-invoice-guide__mark--done {
  background-color: var(--color-ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6l3 3L10 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px 9px;
}
.first-invoice-guide__mark--done:hover, .first-invoice-guide__mark--done:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-ink);
}
.first-invoice-guide__mark--current {
  box-shadow: inset 0 0 0 2px var(--color-ink);
}
.first-invoice-guide__mark--todo {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 16%, transparent);
}
.first-invoice-guide__count {
  color: var(--color-ok);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.first-invoice-guide__action {
  flex: none;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .first-invoice-guide__task {
    flex-basis: 100%;
  }
}
@media (max-width: 560px) {
  .first-invoice-guide {
    align-items: flex-start;
    padding: calc(var(--space-unit) * 2);
  }
  .first-invoice-guide__progress {
    min-height: 32px;
  }
}

:root[data-theme=dark] .first-invoice-guide__mark--done {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6l3 3L10 1' fill='none' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.guest-home {
  align-items: center;
  display: grid;
  gap: calc(var(--space-unit) * 5);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 66vh;
  padding: calc(var(--space-unit) * 10) 0 calc(var(--space-unit) * 8);
}
.guest-home__copy {
  grid-column: 1/9;
}
.guest-home__title {
  font-size: clamp(54px, 8.4vw, 104px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.88;
}
.guest-home__accent {
  color: var(--color-accent);
}
.guest-home__lead {
  color: var(--color-muted);
  font-size: 18px;
  margin: calc(var(--space-unit) * 4) 0;
  max-width: 42ch;
}
@media (max-width: 820px) {
  .guest-home {
    display: block;
    min-height: 0;
    padding: calc(var(--space-unit) * 8) 0;
  }
  .guest-home__title {
    font-size: 54px;
  }
}

.skb {
  background: #ebeef1;
  border-radius: 2px;
  display: block;
  height: 4px;
}
.skb--t {
  background: #e1e5e9;
  height: 7px;
}
.skb--d {
  background: #e4e8eb;
}
.skb--ink {
  background: #dde1e5;
}

.a4 {
  --a4-bill-line: #707070;
  aspect-ratio: 210/297;
  background: #fff;
  border: 1px solid var(--color-grid);
  box-shadow: 0 42px 80px -44px rgba(10, 10, 10, 0.4), 0 4px 14px rgba(10, 10, 10, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.a4__doc {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 26px 28px 16px;
}
.a4__head {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
.a4__head .meta {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 42%;
}
.a4__logo {
  align-items: center;
  background: #9da3a8;
  border: 1px dashed #8f969c;
  border-radius: 5px;
  color: #fff;
  display: inline-flex;
  font-size: 8.5px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: 78px;
}
.a4__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 26px;
}
.a4__parties {
  display: flex;
  gap: 28px;
  margin-top: 24px;
}
.a4__parties .p {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 50%;
}
.a4__lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}
.a4__line {
  align-items: center;
  display: flex;
  gap: 24px;
}
.a4__line .desc {
  flex: 1;
}
.a4__line .amt {
  width: 24%;
}
.a4__totals {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
}
.a4__bill {
  border-top: 1px dashed var(--a4-bill-line);
  display: grid;
  flex: 0 0 35%;
  grid-template-columns: 1fr 2.1fr;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.a4__bill::before {
  background: #fff;
  color: var(--a4-bill-line);
  content: "✂";
  font-size: 12px;
  left: 5%;
  line-height: 1;
  padding: 0 3px;
  position: absolute;
  top: -9px;
}
.a4__rcpt {
  border-right: 1px dashed var(--a4-bill-line);
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
}
.a4__pay {
  display: grid;
  gap: 18px;
  grid-template-columns: 40% 1fr;
  padding: 12px 14px;
}
.a4__cap {
  color: #9a9a9a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 9px;
}
.a4__grp {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 11px;
}
.a4__grp:last-child {
  margin-bottom: 0;
}
.a4__amt {
  display: flex;
  gap: 14px;
  margin-top: auto;
}
.a4__amt .g {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 42%;
}
.a4__qr {
  aspect-ratio: 1;
  display: block;
  width: 100%;
}
.a4__pay-left, .a4__pay-info {
  display: flex;
  flex-direction: column;
}

.lp {
  align-items: center;
  display: grid;
  gap: calc(var(--space-unit) * 4);
  grid-template-columns: repeat(12, 1fr);
  padding: calc(var(--space-unit) * 12) 0 calc(var(--space-unit) * 10);
  position: relative;
}
.lp__copy {
  grid-column: 1/8;
  position: relative;
  z-index: 2;
}
.lp__flag {
  align-items: center;
  color: var(--color-accent);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.16em;
  margin-bottom: calc(var(--space-unit) * 3);
  text-transform: uppercase;
}
.lp__flag::before {
  background: var(--color-accent);
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}
.lp h1 {
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.92;
  text-wrap: balance;
}
.lp h1 .red {
  color: var(--color-accent);
}
@media (min-width: 820px) {
  .lp h1 .red {
    white-space: nowrap;
  }
}
.lp__sub {
  color: color-mix(in srgb, var(--color-ink) 80%, var(--color-paper));
  font-size: 20px;
  line-height: 1.5;
  margin-top: calc(var(--space-unit) * 4);
  max-width: 46ch;
  text-wrap: balance;
}
.lp__cta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-unit) * 1.5);
  margin-top: calc(var(--space-unit) * 5);
}
.lp__stage {
  display: flex;
  grid-column: 8/13;
  justify-content: center;
  perspective: 1700px;
  position: relative;
  z-index: 1;
}
.lp__stage .a4 {
  border: 1px solid rgba(10, 10, 10, 0.18);
  box-shadow: -46px 56px 100px -34px rgba(10, 10, 10, 0.48), -6px 8px 24px rgba(10, 10, 10, 0.08);
  max-width: 372px;
  transform: rotateY(-14deg) rotateX(5deg);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
@media (max-width: 820px) {
  .lp {
    display: block;
    padding: calc(var(--space-unit) * 8) 0 calc(var(--space-unit) * 6);
  }
  .lp h1 {
    font-size: 54px;
  }
  .lp__stage {
    margin-top: calc(var(--space-unit) * 8);
    perspective: none;
  }
  .lp__stage .a4 {
    box-shadow: 0 30px 60px -34px rgba(10, 10, 10, 0.4);
    max-width: 330px;
    transform: none;
  }
}

.wells {
  display: grid;
  gap: calc(var(--space-unit) * 2);
  grid-template-columns: repeat(3, 1fr);
  margin-top: calc(var(--space-unit) * 6);
}
@media (max-width: 820px) {
  .wells {
    grid-template-columns: 1fr;
  }
}

.well {
  background: var(--color-soft);
  padding: calc(var(--space-unit) * 4);
}
.well__n {
  color: var(--color-accent);
  font-size: clamp(56px, 6vw, 92px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.8;
}
.well h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: calc(var(--space-unit) * 3) 0 calc(var(--space-unit) * 1.25);
  text-wrap: balance;
}
.well p {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 34ch;
  text-wrap: balance;
}

.overview {
  background: var(--color-soft);
  margin-top: calc(var(--space-unit) * 2);
  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 6) calc(var(--space-unit) * 4) calc(var(--space-unit) * 6);
}
@media (max-width: 820px) {
  .overview {
    padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 4);
  }
}
.overview__split {
  align-items: center;
  display: grid;
  gap: calc(var(--space-unit) * 8);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 820px) {
  .overview__split {
    grid-template-columns: 1fr;
  }
}
.overview__visual {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0 0 calc(var(--space-unit) * 4) 0;
  perspective: 1200px;
}
.overview__hl {
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.96;
}
.overview__body {
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1.6;
  margin-top: calc(var(--space-unit) * 3);
}
.overview__copy {
  padding-bottom: 1rem;
}

.inv-stack {
  height: 380px;
  position: relative;
  transform: rotateX(4deg) rotateY(-10deg);
  width: 320px;
}
@media (max-width: 820px) {
  .inv-stack {
    transform: none;
  }
}
.inv-stack .invoice-mini > :not(.invoice-stamp) {
  opacity: 1;
}

.inv-stack__sheet {
  left: 50%;
  position: absolute;
  top: 50%;
  width: 128px;
}
.inv-stack__sheet--overdue {
  --invoice-stamp-color: var(--color-accent);
}
.inv-stack__sheet--open {
  --invoice-stamp-color: #d66f16;
}
.inv-stack__sheet--paid {
  --invoice-stamp-color: #1a8a4a;
}
.inv-stack__sheet--back {
  transform: translate(calc(-50% - 72px), calc(-50% + 40px)) rotate(-14deg) scale(1.5);
  z-index: 1;
}
.inv-stack__sheet--mid {
  transform: translate(calc(-50% - 18px), calc(-50% + 16px)) rotate(-5deg) scale(1.5);
  z-index: 2;
}
.inv-stack__sheet--front {
  transform: translate(calc(-50% + 50px), calc(-50% - 18px)) rotate(7deg) scale(1.5);
  z-index: 3;
}

.extras {
  margin-top: calc(var(--space-unit) * 11);
  padding-bottom: calc(var(--space-unit) * 2);
}
.extras__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  padding: 0;
}
@media (max-width: 820px) {
  .extras__list {
    grid-template-columns: 1fr;
  }
}
.extras__item {
  border-left: 1px solid var(--color-grid);
  padding-inline: calc(var(--space-unit) * 4);
}
.extras__item:first-child {
  border-left: 0;
  padding-left: 0;
}
@media (max-width: 820px) {
  .extras__item {
    border-left: 0;
    border-top: 1px solid var(--color-grid);
    padding: calc(var(--space-unit) * 3) 0 0;
  }
  .extras__item:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .extras__item + .extras__item {
    margin-top: calc(var(--space-unit) * 3);
  }
}
.extras__icon {
  color: var(--color-accent);
  height: 26px;
  width: 26px;
}
.extras__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: calc(var(--space-unit) * 2);
  text-wrap: balance;
}
.extras__text {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-top: calc(var(--space-unit));
  max-width: 34ch;
  text-wrap: pretty;
}

.faq {
  border-top: 2px solid var(--color-ink);
  margin-top: calc(var(--space-unit) * 9);
}
.faq__cap {
  padding: calc(var(--space-unit) * 3) 0 calc(var(--space-unit) * 4);
}
.faq__cap h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.faq__item {
  border-top: 1px solid var(--color-grid);
}
.faq__cap + .faq__item {
  border-top: 0;
}
.faq__item summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 19px;
  font-weight: 600;
  gap: calc(var(--space-unit) * 3);
  justify-content: space-between;
  letter-spacing: -0.02em;
  list-style: none;
  padding: calc(var(--space-unit) * 2.5) 0;
  text-wrap: balance;
  transition: color 0.15s;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary:hover {
  color: var(--color-accent);
}
.faq__item summary::after {
  background: linear-gradient(var(--color-accent), var(--color-accent)) center/14px 2px no-repeat, linear-gradient(var(--color-accent), var(--color-accent)) center/2px 14px no-repeat;
  content: "";
  flex: none;
  height: 14px;
  transition: transform 0.2s ease;
  width: 14px;
}
.faq__item[open] summary::after {
  transform: rotate(45deg);
}
.faq__item p {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 64ch;
  padding: 0 0 calc(var(--space-unit) * 3);
  text-wrap: pretty;
}

.signup-section {
  margin-top: calc(var(--space-unit) * 9);
}
@media (max-width: 560px) {
  .signup-section {
    margin-top: calc(var(--space-unit) * 5);
  }
}

.cwrap {
  align-items: center;
  background: var(--color-soft);
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 5);
  padding: calc(var(--space-unit) * 6) calc(var(--space-unit) * 4) calc(var(--space-unit) * 9);
}
@media (max-width: 560px) {
  .cwrap {
    background: transparent;
    gap: calc(var(--space-unit) * 5);
    padding: calc(var(--space-unit) * 4) 0 calc(var(--space-unit) * 5);
  }
}

.ctitle {
  max-width: 760px;
  text-align: center;
}
.ctitle h2 {
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.96;
  text-wrap: balance;
}
.ctitle h2 .ac {
  color: var(--color-accent);
}
.ctitle p {
  color: var(--color-muted);
  font-size: 15px;
  line-height: 1.5;
  margin-top: calc(var(--space-unit) * 2.5);
}

.req {
  color: var(--color-accent);
  margin-left: 0.2em;
}

.scard {
  max-width: 720px;
  width: 100%;
}
.scard__box {
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  padding: calc(var(--space-unit) * 6) calc(var(--space-unit) * 7) calc(var(--space-unit) * 7);
}
@media (max-width: 560px) {
  .scard__box {
    padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 3) calc(var(--space-unit) * 5);
  }
}
.scard.signup .scard__box {
  margin-top: 0;
}
.scard__title {
  background: var(--color-soft);
  border-bottom: 1px solid var(--color-grid);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: calc(var(--space-unit) * -6) calc(var(--space-unit) * -7) calc(var(--space-unit) * 4.5);
  padding: calc(var(--space-unit) * 2.75) calc(var(--space-unit) * 7);
  text-align: center;
}
@media (max-width: 560px) {
  .scard__title {
    margin: calc(var(--space-unit) * -4) calc(var(--space-unit) * -3) calc(var(--space-unit) * 4);
    padding: calc(var(--space-unit) * 2.25) calc(var(--space-unit) * 3);
  }
}
.scard__actions {
  margin-top: calc(var(--space-unit) * 5);
}
.scard__actions .button {
  font-size: 14px;
  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
  width: 100%;
}
.scard__login {
  color: var(--color-muted);
  font-size: 13px;
  margin-top: calc(var(--space-unit) * 2.5);
  text-align: center;
}
.scard__login a {
  border-bottom: 1px solid var(--color-accent);
  color: var(--color-ink);
  padding-bottom: 1px;
  text-decoration: none;
}
.scard__login a:hover {
  color: var(--color-accent);
}
.scard .field--hero input {
  font-size: 18px;
  padding: calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2);
}

.fset {
  border: 1px solid var(--color-grid);
  margin: calc(var(--space-unit) * 4.5) 0 0;
  min-inline-size: 0;
  min-width: 0;
  padding: calc(var(--space-unit) * 2.75) calc(var(--space-unit) * 3.5) calc(var(--space-unit) * 4);
}
.fset__legend {
  align-items: center;
  display: flex;
  gap: calc(var(--space-unit) * 1.5);
  margin-left: -7px;
  padding: 0;
}
.fset__pill {
  background: var(--color-soft);
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  text-transform: uppercase;
}

.igrid {
  display: grid;
  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.75);
  grid-template-columns: repeat(12, 1fr);
  margin-top: calc(var(--space-unit) * 1);
}
.signup .igrid .field + .field {
  margin-top: 0;
}
.igrid .field input {
  min-height: 0;
  padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 1.4);
}
.igrid .field input.field__input--iban {
  padding-bottom: calc(var(--space-unit) * 1 - 2px);
  padding-top: calc(var(--space-unit) * 1 + 2px);
}
.igrid__name, .igrid__iban {
  grid-column: span 6;
}
.igrid__street {
  grid-column: span 9;
}
.igrid__number {
  grid-column: span 3;
}
.igrid__postal {
  grid-column: span 3;
}
.igrid__city {
  grid-column: span 9;
}
@media (max-width: 560px) {
  .igrid {
    grid-template-columns: repeat(6, 1fr);
  }
  .igrid__name, .igrid__iban, .igrid__city {
    grid-column: span 6;
  }
  .igrid__street {
    grid-column: span 4;
  }
  .igrid__number, .igrid__postal {
    grid-column: span 2;
  }
}

.signup {
  width: 100%;
}
.signup form {
  margin-top: calc(var(--space-unit) * 3.5);
}
.signup .field + .field {
  margin-top: calc(var(--space-unit) * 2.5);
}
.signup__intro .k {
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: calc(var(--space-unit) * 0.75);
  text-transform: uppercase;
}
.signup__intro h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.signup__intro p {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-top: calc(var(--space-unit) * 1.25);
}
.signup__step {
  display: none;
}
.signup__step.on {
  display: block;
}
.signup__actions {
  margin-top: calc(var(--space-unit) * 3);
}
.signup__actions .button {
  width: 100%;
}
.signup__trust {
  color: var(--color-muted);
  font-size: 12px;
  margin-top: calc(var(--space-unit) * 2);
  text-align: center;
}
.signup__trust b {
  color: var(--color-ink);
  font-weight: 600;
}
.signup__note {
  background: var(--color-soft);
  border-left: 3px solid var(--color-ink);
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.45;
  margin-top: calc(var(--space-unit) * 2.5);
  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 1.75);
}
.signup__note b {
  color: var(--color-ink);
}
.signup__turnstile {
  margin-top: calc(var(--space-unit) * 2.5);
}
.signup__code-lead {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.5;
}
.signup__code-lead b {
  color: var(--color-ink);
}
.signup__done .mark {
  align-items: center;
  border: 2px solid var(--color-ink);
  display: flex;
  height: 40px;
  justify-content: center;
  margin-bottom: calc(var(--space-unit) * 2.5);
  width: 40px;
}
.signup__done h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.signup__done p {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.55;
  margin-top: calc(var(--space-unit) * 1.5);
}
.signup__done .button {
  margin-top: calc(var(--space-unit) * 3);
}

.otp {
  display: grid;
  gap: calc(var(--space-unit) * 1.25);
  grid-template-columns: repeat(6, 1fr);
  margin-top: calc(var(--space-unit) * 3);
}
.otp input {
  background-color: var(--color-soft);
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--color-ink);
  font: inherit;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding: calc(var(--space-unit) * 1.4) 0;
  text-align: center;
  transition: background-color 0.18s, box-shadow 0.18s;
  width: 100%;
}
.otp input:focus {
  box-shadow: inset 0 0 0 0.5px var(--color-ring);
  outline: 0;
}
.otp input:focus-visible {
  box-shadow: inset 0 0 0 0.5px var(--color-ring), 0 0 0 3px var(--color-ring-soft);
}
.otp.is-bad input {
  box-shadow: inset 0 0 0 0.5px var(--color-accent);
}
@media (hover: hover) {
  .otp input:hover:not(:focus) {
    background-color: color-mix(in srgb, var(--color-soft), var(--color-ink) 2.5%);
    box-shadow: inset 0 0 0 0.5px var(--color-field-hover);
  }
}

.resend {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  font-size: 11px;
  gap: 12px;
  justify-content: space-between;
  letter-spacing: 0.04em;
  margin-top: calc(var(--space-unit) * 2.5);
  text-transform: uppercase;
}
.resend button {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-accent);
  color: var(--color-accent);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 0;
  text-transform: uppercase;
}
.resend button:disabled {
  border-color: transparent;
  color: var(--color-muted);
  cursor: default;
}

.back {
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-grid);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 7px;
  letter-spacing: 0.05em;
  margin-top: calc(var(--space-unit) * 2.5);
  padding: 0 0 1px;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}
.back:hover, .back:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.auth {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: calc(100dvh - var(--space-unit) * 30);
  padding: calc(var(--space-unit) * 5) 0 calc(var(--space-unit) * 7);
}

.host-login {
  width: min(100%, 480px);
}
.host-login__panel {
  border: 2px solid var(--color-ink);
  padding: calc(var(--space-unit) * 5);
}
@media (max-width: 820px) {
  .host-login__panel {
    padding: calc(var(--space-unit) * 3.5);
  }
}

.invoice-kpi-strip {
  display: grid;
  gap: calc(var(--space-unit) * 2.5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: calc(var(--space-unit) * 2);
}
.invoice-kpi-strip__item {
  background: var(--color-soft);
  background: color-mix(in srgb, var(--color-ink) 4%, var(--color-paper));
  box-shadow: inset 0 1px 5px rgba(10, 10, 10, 0.055), inset 0 0 0 1px var(--color-grid);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-unit);
  min-height: 84px;
  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 2.5);
}
.invoice-kpi-strip__label {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.invoice-kpi-strip__value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  white-space: nowrap;
}
.invoice-kpi-strip__currency {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  margin-right: 0.35em;
}
@media (max-width: 820px) {
  .invoice-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .invoice-kpi-strip__item {
    min-height: 78px;
    padding: calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2);
  }
  .invoice-kpi-strip__value {
    font-size: 23px;
  }
}

:root[data-theme=dark] .invoice-kpi-strip__item {
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.28), inset 0 0 0 1px var(--color-grid);
}

.invoice-year-summary {
  --invoice-chart-paid: #1a8a4a;
  --invoice-chart-open: color-mix(in srgb, #1a8a4a 42%, var(--color-paper));
  align-items: stretch;
  display: grid;
  gap: calc(var(--space-unit) * 2.5);
  grid-template-columns: 232px minmax(0, 1fr);
  margin-bottom: calc(var(--space-unit) * 2);
}
.invoice-year-summary__stats {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 2.5);
  min-width: 0;
}
@media (max-width: 820px) {
  .invoice-year-summary {
    grid-template-columns: 1fr;
  }
}

:root[data-theme=dark] .invoice-year-summary {
  --invoice-chart-paid: #35b46a;
  --invoice-chart-open: color-mix(in srgb, #35b46a 38%, var(--color-paper));
}

.invoice-year-stat {
  background: color-mix(in srgb, var(--color-ink) 4%, var(--color-paper));
  box-shadow: inset 0 1px 5px rgba(10, 10, 10, 0.055), inset 0 0 0 1px var(--color-grid);
  color: var(--color-ink);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--space-unit) * 0.75);
  min-width: 0;
  padding: calc(var(--space-unit) * 2.5) calc(var(--space-unit) * 2.25);
}
.invoice-year-stat__label-row {
  align-items: center;
  display: flex;
  gap: calc(var(--space-unit) * 0.75);
}
.invoice-year-stat__label {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.invoice-year-stat__value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
  white-space: nowrap;
}
.invoice-year-stat__value--tight {
  font-size: 20px;
}
.invoice-year-stat__currency {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
  margin-right: 0.35em;
}
.invoice-year-stat__note {
  color: var(--color-muted);
  font-size: 12px;
}
@media (max-width: 560px) {
  .invoice-year-stat {
    padding: calc(var(--space-unit) * 2.25) calc(var(--space-unit) * 2);
  }
  .invoice-year-stat__value {
    font-size: 23px;
  }
  .invoice-year-stat__value--tight {
    font-size: 19px;
  }
}

:root[data-theme=dark] .invoice-year-stat {
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.28), inset 0 0 0 1px var(--color-grid);
}

.invoice-currency-tooltip {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-muted);
  cursor: help;
  display: inline-flex;
  padding: 0;
}
.invoice-currency-tooltip svg {
  height: 13px;
  width: 13px;
}
.invoice-currency-tooltip:hover, .invoice-currency-tooltip:focus-visible {
  color: var(--color-ink);
}

.invoice-year-chart {
  background: var(--color-paper);
  box-shadow: inset 0 0 0 1px var(--color-grid);
  display: flex;
  flex-direction: column;
  min-height: 210px;
  min-width: 0;
  padding: calc(var(--space-unit) * 2.25);
}
.invoice-year-chart__head {
  align-items: center;
  display: flex;
  gap: calc(var(--space-unit) * 2);
  justify-content: space-between;
  margin-bottom: calc(var(--space-unit) * 2 + 5px);
}
.invoice-year-chart__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
.invoice-year-chart__title-row {
  align-items: center;
  display: flex;
  gap: calc(var(--space-unit) * 0.75);
}
.invoice-year-chart__legend {
  display: flex;
  gap: calc(var(--space-unit) * 2);
}
.invoice-year-chart__legend span {
  align-items: center;
  color: var(--color-muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: calc(var(--space-unit) * 0.75);
  white-space: nowrap;
}
.invoice-year-chart__legend-swatch {
  border-radius: 2px;
  display: inline-block;
  height: 10px;
  width: 10px;
}
.invoice-year-chart__legend-swatch--open {
  background: var(--invoice-chart-open);
}
.invoice-year-chart__legend-swatch--paid {
  background: var(--invoice-chart-paid);
}
.invoice-year-chart__plot {
  --chart-inset: calc(var(--space-unit) * 3.5);
  display: grid;
  flex: 1;
  grid-template-rows: minmax(122px, 1fr) auto;
  min-height: 142px;
  row-gap: calc(var(--space-unit) * 0.75);
}
.invoice-year-chart__bars {
  align-items: end;
  background-image: repeating-linear-gradient(to top, transparent 0 calc(100% / var(--rows, 2) - 1px), var(--color-grid) calc(100% / var(--rows, 2) - 1px) calc(100% / var(--rows, 2)));
  border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 26%, transparent);
  display: grid;
  gap: calc(var(--space-unit) * 1.25);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 0;
  padding-left: var(--chart-inset);
  position: relative;
}
.invoice-year-chart__scale {
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.invoice-year-chart__scale span {
  color: var(--color-muted);
  font-size: 11px;
  left: 0;
  line-height: 1;
  padding-top: 3px;
  position: absolute;
}
.invoice-year-chart__column {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
}
.invoice-year-chart__stack {
  animation: invoice-chart-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 45px;
  min-height: 2px;
  overflow: hidden;
  transform-origin: bottom;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
  width: 100%;
}
.invoice-year-chart__column:hover .invoice-year-chart__stack {
  filter: saturate(1.08);
  opacity: 0.9;
}
.invoice-year-chart__segment {
  transition: filter var(--transition-fast);
  width: 100%;
}
.invoice-year-chart__segment:hover {
  filter: brightness(1.07);
}
.invoice-year-chart__segment--open {
  background: var(--invoice-chart-open);
}
.invoice-year-chart__segment--paid {
  background: var(--invoice-chart-paid);
}
.invoice-year-chart__empty {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
}
.invoice-year-chart__empty span {
  background: var(--color-paper);
  color: var(--color-muted);
  font-size: 13px;
  padding: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 1.25);
}
.invoice-year-chart__labels {
  display: grid;
  gap: calc(var(--space-unit) * 1.25);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-left: var(--chart-inset);
}
.invoice-year-chart__labels span {
  color: var(--color-muted);
  font-size: 11px;
  min-width: 0;
  text-align: center;
}
@media (max-width: 560px) {
  .invoice-year-chart {
    min-height: 230px;
    padding: calc(var(--space-unit) * 1.75);
  }
  .invoice-year-chart__head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-unit);
  }
  .invoice-year-chart__bars, .invoice-year-chart__labels {
    gap: calc(var(--space-unit) * 0.75);
  }
  .invoice-year-chart__scale span, .invoice-year-chart__labels span {
    font-size: 10px;
  }
}

[data-invoices-view][hidden] {
  display: none;
}

.invoice-grid {
  display: grid;
  gap: calc(var(--space-unit) * 2.5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: calc(var(--space-unit) * 3);
}
@media (max-width: 820px) {
  .invoice-grid {
    grid-template-columns: 1fr;
  }
}

.invoice-card {
  --invoice-stamp-color: var(--color-muted);
  background: var(--color-paper);
  border: 1px solid var(--color-grid);
  color: var(--color-ink);
  display: grid;
  grid-template-columns: minmax(168px, 0.75fr) minmax(0, 1fr);
  min-height: 260px;
  min-width: 0;
  overflow: hidden;
  position: relative;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.invoice-card:hover, .invoice-card:focus-within {
  border-color: var(--color-field-line);
}
.invoice-card:hover .invoice-card__title, .invoice-card:focus-within .invoice-card__title {
  opacity: 1;
}
.invoice-card--paid {
  --invoice-stamp-color: #1a8a4a;
}
.invoice-card--sent {
  --invoice-stamp-color: #d66f16;
}
.invoice-card--overdue {
  --invoice-stamp-color: var(--color-accent);
}
.invoice-card--draft {
  --invoice-stamp-color: var(--color-muted);
}
.invoice-card__link {
  inset: 0;
  position: absolute;
  z-index: 1;
}
.invoice-card__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.invoice-card--edge {
  box-shadow: inset 3px 0 0 var(--invoice-stamp-color);
  min-height: 200px;
}
.invoice-card__paper {
  align-items: center;
  background: color-mix(in srgb, var(--color-ink) 5%, var(--color-paper));
  border-right: 1px solid var(--color-grid);
  box-shadow: inset 0 2px 10px rgba(10, 10, 10, 0.08);
  display: flex;
  justify-content: center;
  padding: calc(var(--space-unit) * 2.25) calc(var(--space-unit) * 3);
}
.invoice-card__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 1.75);
  min-width: 0;
  padding: calc(var(--space-unit) * 2.5) calc(var(--space-unit) * 3);
}
.invoice-card__head {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.invoice-card__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.16;
  opacity: 0.72;
  overflow-wrap: anywhere;
  text-wrap: balance;
  transition: opacity var(--transition-fast);
}
.invoice-card__figures {
  align-items: baseline;
  display: flex;
  gap: calc(var(--space-unit) * 2);
  justify-content: flex-start;
  padding-top: calc(var(--space-unit) * 0.5);
}
.invoice-card__amount {
  align-items: baseline;
  display: flex;
  flex-wrap: nowrap;
  font-variant-numeric: normal;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
  word-spacing: 0;
}
.invoice-card__amount strong, .invoice-card__amount-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.invoice-card__currency {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.invoice-card__amount-value {
  align-items: baseline;
  display: inline-flex;
  gap: 0;
  word-spacing: 0;
}
.invoice-card__decimal {
  margin: 0 0.02em;
}
.invoice-card__actions {
  position: relative;
  z-index: 2;
}
.invoice-card__status-tag {
  color: var(--invoice-stamp-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}
.invoice-card__status-date {
  color: var(--color-muted);
}
.invoice-card__footer {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 1.5);
  margin-top: auto;
}
.invoice-card__status-form {
  position: relative;
  z-index: 2;
}
.invoice-card__status-action {
  --invoice-action-color: var(--color-ink);
  align-items: center;
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--color-field-line);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  gap: var(--space-unit);
  letter-spacing: 0.03em;
  padding: 6px 11px;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.invoice-card__status-action:hover {
  border-color: var(--invoice-action-color);
  color: var(--invoice-action-color);
}
.invoice-card__status-action--paid {
  --invoice-action-color: #1a8a4a;
}
.invoice-card__status-action--sent {
  --invoice-action-color: #d66f16;
}
.invoice-card__status-action--unpaid {
  --invoice-action-color: #d66f16;
}
.invoice-card__status-action svg {
  flex: none;
  height: 15px;
  width: 15px;
}
.invoice-card__actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: calc(var(--space-unit) * 2);
}
.invoice-card__actions a {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}
.invoice-card__actions a:hover {
  color: var(--color-accent);
}
.invoice-card__pdf {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}
.invoice-card__pdf[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.45;
}
.invoice-card__pdf[aria-disabled=true]:hover, .invoice-card__pdf[aria-disabled=true]:focus-visible {
  color: var(--color-muted);
}
.invoice-card__pdf svg {
  flex: none;
  height: 15px;
  width: 15px;
}
.invoice-card__icon-action {
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  margin: -10px;
  padding: 10px;
}
.invoice-card__icon-action svg {
  height: 15px;
  width: 15px;
}
.invoice-card__icon-action.invoice-card__delete {
  margin-left: auto;
}
.invoice-card__icon-action:hover, .invoice-card__icon-action:focus-visible {
  color: var(--color-accent);
}
.invoice-card__icon-action:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
}
.invoice-card__delete {
  opacity: 0;
  transition: opacity 180ms ease;
}
.invoice-card:hover .invoice-card__delete, .invoice-card:focus-within .invoice-card__delete {
  opacity: 1;
}
.invoice-card--edge .invoice-card__paper {
  overflow: hidden;
  position: relative;
}
.invoice-card--edge .invoice-card__status-form {
  bottom: 12px;
  left: 12px;
  opacity: 0;
  position: absolute;
  right: 12px;
  transform: translateY(calc(100% + 14px));
  transition: transform 260ms cubic-bezier(0.2, 0.75, 0.25, 1), opacity 180ms ease;
  z-index: 3;
}
.invoice-card--edge:hover .invoice-card__status-form, .invoice-card--edge:focus-within .invoice-card__status-form {
  opacity: 1;
  transform: translateY(0);
}
.invoice-card--edge .invoice-card__status-action {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background: color-mix(in srgb, var(--color-paper) 86%, transparent);
  box-shadow: 0 8px 22px -14px rgba(10, 10, 10, 0.6);
  justify-content: center;
  padding: 9px 11px;
  width: 100%;
}
:root[data-theme=dark] .invoice-card--edge .invoice-card__status-action {
  background: color-mix(in srgb, var(--color-paper) 94%, transparent);
}
@media (max-width: 820px) {
  .invoice-card {
    grid-template-columns: 1fr;
  }
  .invoice-card__paper {
    border-bottom: 1px solid var(--color-grid);
    border-right: 0;
    flex-direction: column;
    gap: calc(var(--space-unit) * 1.75);
    min-height: 220px;
    padding: calc(var(--space-unit) * 2.5);
  }
  .invoice-card__body {
    padding: calc(var(--space-unit) * 2.5);
  }
  .invoice-card__figures {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-unit);
  }
  .invoice-card__actions {
    flex-wrap: wrap;
  }
  .invoice-card--edge .invoice-card__status-form {
    left: auto;
    max-width: 190px;
    opacity: 1;
    position: static;
    right: auto;
    transform: none;
    width: 100%;
  }
}
@media (hover: none) {
  .invoice-card__delete {
    opacity: 1;
  }
  .invoice-card--edge .invoice-card__paper {
    flex-direction: column;
    gap: calc(var(--space-unit) * 1.75);
  }
  .invoice-card--edge .invoice-card__status-form {
    left: auto;
    max-width: 190px;
    opacity: 1;
    position: static;
    right: auto;
    transform: none;
    width: 100%;
  }
}

.invoice-mini {
  --invoice-mini-bar: #dadde1;
  aspect-ratio: 1/1.414;
  background: #ffffff;
  box-shadow: 0 18px 34px -24px rgba(10, 10, 10, 0.55), 0 0 0 1px rgba(10, 10, 10, 0.07);
  color: #0a0a0a;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 128px;
  overflow: hidden;
  padding: 13px 13px 0;
  position: relative;
  width: 100%;
}
.invoice-mini > :not(.invoice-stamp) {
  opacity: 0.55;
  transition: opacity 180ms ease;
}
.invoice-card:hover .invoice-mini > :not(.invoice-stamp), .invoice-card:focus-within .invoice-mini > :not(.invoice-stamp) {
  opacity: 1;
}
.invoice-mini__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  justify-content: space-between;
  min-width: 0;
}
.invoice-mini__client, .invoice-mini__number {
  color: #0a0a0a;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.18;
  min-width: 0;
  overflow-wrap: anywhere;
}
.invoice-mini__client {
  flex: 1 1 auto;
  opacity: 0.72;
}
.invoice-mini__number {
  font-weight: 700;
  opacity: 0.55;
  white-space: nowrap;
}
.invoice-mini__title-bar {
  background: var(--invoice-mini-bar);
  display: block;
  height: 7px;
  margin-top: 8px;
  width: 82%;
}
.invoice-mini__rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.invoice-mini__row {
  align-items: center;
  display: flex;
  gap: 8px;
}
.invoice-mini__row span,
.invoice-mini__row b {
  background: var(--invoice-mini-bar);
  display: block;
  height: 4px;
}
.invoice-mini__row b {
  flex: none;
  margin-left: auto;
  width: 26px;
}
.invoice-mini__row--1 span {
  width: 86%;
}
.invoice-mini__row--2 span {
  width: 72%;
}
.invoice-mini__row--3 span {
  width: 90%;
}
.invoice-mini__row--4 span {
  width: 64%;
}
.invoice-mini__slip {
  border-top: 1px dashed #b4b8bd;
  display: grid;
  flex: 0 0 35%;
  grid-template-columns: 0.95fr 2.1fr;
  margin: auto -13px 0;
  min-height: 0;
}
.invoice-mini__receipt, .invoice-mini__pay {
  min-width: 0;
  padding: 7px 8px 9px;
}
.invoice-mini__receipt {
  border-right: 1px dashed #b4b8bd;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.invoice-mini__pay {
  display: grid;
  gap: 7px;
  grid-template-columns: 36px minmax(0, 1fr);
}
.invoice-mini__pay-left, .invoice-mini__pay-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.invoice-mini__cap, .invoice-mini__line, .invoice-mini__amount-lines span {
  background: #e7e9ec;
  display: block;
  height: 3px;
}
.invoice-mini__cap {
  background: #cfd2d6;
  height: 3px;
  margin-bottom: 3px;
  width: 44%;
}
.invoice-mini__line {
  width: 88%;
}
.invoice-mini__line--strong {
  background: #d4d7da;
  width: 58%;
}
.invoice-mini__line--short {
  width: 62%;
}
.invoice-mini__amount-lines {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
}
.invoice-mini__qr {
  display: block;
  height: 36px;
  width: 36px;
}

.invoice-stamp {
  align-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.76);
  border: 2.5px solid currentColor;
  color: var(--invoice-stamp-color);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  justify-items: center;
  left: 50%;
  line-height: 1;
  min-width: 116px;
  padding: 6px 10px;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  top: 43%;
  transform: translate(-50%, -50%) rotate(-12deg);
  z-index: 2;
}
.invoice-stamp__label, .invoice-stamp__date {
  grid-area: 1/1;
  transition: opacity 120ms ease;
  white-space: nowrap;
}
.invoice-stamp__date {
  opacity: 0;
}

.invoice-table-secondary {
  margin-top: calc(var(--space-unit) * 3);
}

@keyframes invoice-grid-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
[data-invoices-view][data-anim] .invoice-card,
[data-invoices-view][data-anim] .data-table__row {
  animation: invoice-grid-rise 320ms ease both;
  animation-delay: calc(var(--row-index, 0) * 22ms);
}

@media (prefers-reduced-motion: reduce) {
  .invoice-year-chart__stack,
  [data-invoices-view][data-anim] .invoice-card,
  [data-invoices-view][data-anim] .data-table__row {
    animation: none;
  }
}
@keyframes invoice-chart-rise {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
.invoice-editor {
  --line-items-column-gap: calc(var(--space-unit) * 3);
  --line-items-row-gap: calc(var(--space-unit) * 2);
  --line-items-section-heading-width: 230px;
  --line-items-section-gap: calc(var(--space-unit) * 6);
  --line-items-number-group-min-width: calc(72px + 112px + 128px + (var(--line-items-column-gap) * 2));
  --line-items-top-field-width: calc((100% - var(--line-items-section-heading-width) - var(--line-items-section-gap) - var(--line-items-column-gap)) / 2);
  --line-items-number-group-width: clamp(
      var(--line-items-number-group-min-width),
      var(--line-items-top-field-width),
      100%
  );
  --line-items-number-columns: minmax(72px, .7fr) minmax(112px, 1.15fr) minmax(128px, 1.25fr);
  --line-items-grid-columns: minmax(260px, 1fr) var(--line-items-number-group-width);
}
.invoice-editor[data-has-multiple-line-items=true] {
  --line-items-number-group-width: clamp(
      var(--line-items-number-group-min-width),
      calc(var(--line-items-top-field-width) - 40px - var(--line-items-column-gap)),
      100%
  );
  --line-items-grid-columns: minmax(260px, 1fr) var(--line-items-number-group-width) 40px;
}

.invoice-editor .form-section--lines {
  display: block;
}
.invoice-editor .form-section--lines .form-section__heading {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 0;
}
@media (max-width: 820px) {
  .invoice-editor .form-section--lines .form-section__heading {
    flex-direction: column;
    gap: calc(var(--space-unit) * 2);
  }
}

.line-items__heading,
.line-item {
  column-gap: var(--line-items-column-gap);
  display: grid;
  grid-template-columns: var(--line-items-grid-columns);
  row-gap: var(--line-items-row-gap);
}

.line-items__heading {
  align-items: end;
  border-bottom: 1px solid var(--color-grid);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: calc(var(--space-unit) * 1.5) 0;
  text-transform: uppercase;
}
.line-items__heading .line-items__number-heading {
  column-gap: var(--line-items-column-gap);
  display: grid;
  grid-template-columns: var(--line-items-number-columns);
  row-gap: var(--line-items-row-gap);
}
.line-items__heading .line-items__number-heading span {
  text-align: right;
}
.line-items__heading .line-items__remove-heading {
  display: none;
}
.invoice-editor[data-has-multiple-line-items=true] .line-items__heading .line-items__remove-heading {
  display: block;
}
@media (max-width: 820px) {
  .line-items__heading {
    display: none;
  }
}

.line-item {
  align-items: start;
  border-bottom: 1px solid var(--color-grid);
  padding: calc(var(--space-unit) * 2) 0;
}
.line-item .field {
  gap: calc(var(--space-unit) * 0.75);
}
.line-item .field__label {
  display: none;
}
.line-item input,
.line-item textarea {
  min-height: 40px;
  padding: var(--space-unit) calc(var(--space-unit) * 1.25);
}
.line-item__description textarea {
  min-height: 72px;
  overflow: hidden;
  resize: none;
}
.line-item__numbers {
  align-items: start;
  column-gap: var(--line-items-column-gap);
  display: grid;
  grid-template-columns: var(--line-items-number-columns);
  min-width: 0;
  row-gap: var(--line-items-row-gap);
}
.line-item input[type=number], .line-item__total {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.line-item__total {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  padding-top: var(--space-unit);
  white-space: nowrap;
}
.line-item__total span {
  display: none;
}
.line-item__remove {
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-grid);
  color: var(--color-muted);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  justify-self: end;
  padding: 0;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  width: 40px;
}
.line-item__remove svg {
  display: block;
  height: 16px;
  width: 16px;
}
.line-item__remove:hover, .line-item__remove:focus-visible {
  background: var(--color-error-soft);
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  color: var(--color-accent);
}
@media (max-width: 820px) {
  .line-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: calc(var(--space-unit) * 2.5) 0;
  }
  .line-item .field__label {
    display: block;
  }
  .line-item input[type=number], .line-item__total {
    text-align: left;
  }
  .line-item__description {
    grid-column: 1/-1;
  }
  .line-item__numbers {
    grid-column: 1/-1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .line-item__total {
    align-items: stretch;
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: auto minmax(0, 1fr);
    padding-top: 0;
  }
  .line-item__total span {
    color: var(--color-muted);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 0;
    text-transform: uppercase;
  }
  .line-item__total strong {
    justify-self: end;
    text-align: right;
  }
  .line-item__remove {
    justify-self: start;
  }
}

.line-items__undo {
  align-items: center;
  background: var(--color-soft);
  border-left: 3px solid var(--color-ink);
  color: var(--color-muted);
  display: flex;
  font-size: 13px;
  gap: calc(var(--space-unit) * 2);
  justify-content: space-between;
  margin-top: calc(var(--space-unit) * 2);
  min-height: 42px;
  padding: var(--space-unit) calc(var(--space-unit) * 1.5);
}
.line-items__undo-button {
  background: none;
  border: 0;
  color: var(--color-ink);
  flex: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
}
.line-items__undo-button:hover, .line-items__undo-button:focus-visible {
  color: var(--color-accent);
}
@media (max-width: 820px) {
  .line-items__undo {
    align-items: flex-start;
    flex-direction: column;
  }
}

.line-items__footer {
  align-items: flex-start;
  display: flex;
  gap: calc(var(--space-unit) * 3);
  justify-content: space-between;
  margin-top: calc(var(--space-unit) * 2);
}
@media (max-width: 820px) {
  .line-items__footer {
    flex-direction: column;
  }
}

.line-add {
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  gap: 7px;
  letter-spacing: 0.05em;
  padding: var(--space-unit) 0 1px;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.line-add__icon {
  align-items: center;
  display: inline-flex;
  flex: none;
  line-height: 1;
}
.line-add svg {
  display: block;
  height: 13px;
  width: 13px;
}
.line-add:hover, .line-add:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
@media (max-width: 820px) {
  .line-add {
    justify-content: center;
    width: 100%;
  }
}

.invoice-totals {
  margin: 0 0 0 auto;
  width: 300px;
}
.invoice-totals__row {
  color: var(--color-muted);
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  padding: var(--space-unit) 0;
}
.invoice-totals__row strong {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.invoice-totals__row--grand {
  border-top: 1px solid var(--color-ink);
  color: var(--color-ink);
  font-size: 19px;
  margin-top: var(--space-unit);
  padding-top: calc(var(--space-unit) * 1.5);
}
@media (max-width: 820px) {
  .invoice-totals {
    margin: 0;
    width: 100%;
  }
}

.project-mark {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: calc(var(--space-unit) * 0.875);
  margin-right: calc(var(--space-unit) * -0.75);
  position: relative;
}
.project-mark::after {
  background: var(--color-field-line);
  content: "";
  height: 16px;
  position: absolute;
  right: calc(var(--space-unit) * -1.625);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
}
.project-mark--enter {
  animation: project-mark-in 200ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.project-mark:hover .project-mark__clock {
  color: var(--color-accent);
}
.project-mark .project-timer-button[aria-pressed=true]::after {
  animation: none;
}
.project-mark__link {
  border-bottom: 2px solid transparent;
  color: var(--color-ink);
  padding-bottom: 2px;
  text-decoration: none;
}
.project-mark__clock {
  display: block;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.025em;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.project-mark__seconds {
  font-size: 0.72em;
  font-weight: 500;
}

@keyframes project-mark-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes project-mark-pulse {
  0%, 100% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.16);
  }
}
.project-ledger {
  border-bottom: 1px solid var(--color-grid);
  margin-bottom: calc(var(--space-unit) * 4);
  --project-row-inset: calc(var(--space-unit) * 1.5);
}
.project-ledger__head,
.project-ledger .project-row {
  display: grid;
  gap: calc(var(--space-unit) * 2);
  grid-template-columns: 40px minmax(210px, 1.3fr) minmax(130px, 0.7fr) minmax(160px, 1fr) minmax(92px, 0.55fr);
  padding-inline: var(--project-row-inset);
}
.project-ledger__head {
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding-block: calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.25);
  text-transform: uppercase;
}
.project-ledger__head span:nth-child(3),
.project-ledger__head span:nth-child(5) {
  text-align: right;
}
.project-ledger__head span:nth-child(3) {
  padding-right: 34px;
}

.project-row {
  align-items: center;
  border-top: 1px solid var(--color-grid);
  cursor: pointer;
  min-height: 86px;
  padding-block: calc(var(--space-unit) * 1.5);
  position: relative;
  transition: background-color 180ms ease;
}
.project-row::before {
  background: transparent;
  content: "";
  inset: 0 auto -1px 0;
  position: absolute;
  transition: background 180ms ease;
  width: 3px;
}
.project-row:hover {
  background: var(--color-soft);
}
.project-row:hover .project-row__identity > a {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.project-row--running::before {
  background: var(--color-accent);
}
.project-row--archived {
  color: var(--color-muted);
}
.project-row__timer {
  min-height: 46px;
}
.project-row__timer .project-timer-button {
  border: 0;
  height: 46px;
  margin-left: -4px;
  width: 46px;
}
.project-row__timer .project-timer-button::before {
  inset: 4px;
}
.project-row__timer .project-timer-button::after {
  inset: 0;
}
.project-row__timer .project-timer-button:hover {
  background: transparent;
}
.project-row__timer .project-timer-button:hover::before {
  transform: scale(1);
}
.project-row__timer .project-timer-icon::before {
  border: 1.5px solid var(--color-ink);
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  height: 38px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: border-color 180ms ease;
  width: 38px;
}
.project-row__timer .project-timer-button[aria-pressed=true] .project-timer-icon::before {
  border-color: var(--color-accent);
}
.project-row__timer .project-timer-button:hover .project-timer-icon::before {
  border-color: var(--color-ink);
}
.project-row__identity {
  min-width: 0;
}
.project-row__identity > a {
  border-bottom: 1px solid transparent;
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.project-row__identity > a:hover, .project-row__identity > a:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.project-row__identity > span:last-child {
  color: var(--color-muted);
  display: block;
  font-size: 12px;
  line-height: 1.3;
  margin-top: 1px;
}
.project-row__label-slot {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms cubic-bezier(0.2, 0.75, 0.2, 1), visibility 240ms;
  visibility: hidden;
}
.project-row__label-slot[data-active] {
  grid-template-rows: 1fr;
  visibility: visible;
}
.project-row__running-label {
  color: var(--color-accent);
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  margin: 0 0 2px;
  opacity: 0;
  overflow: hidden;
  text-transform: uppercase;
  transform: translateY(-3px);
  transition: opacity 140ms ease, transform 240ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
.project-row__label-slot[data-active] .project-row__running-label {
  opacity: 1;
  transform: none;
  transition-delay: 80ms;
}
.project-row__time {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  position: relative;
}
.project-row__time > strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-align: right;
  white-space: nowrap;
}
.project-row--running .project-row__time > strong {
  animation: project-time-breathe 2000ms cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.project-row--archived .project-row__time {
  padding-right: 34px;
}
.project-row__seconds {
  font-size: 0.72em;
  font-weight: 500;
}
.project-row__time--zero > strong {
  color: var(--color-muted);
}
.project-row__unit {
  color: var(--color-muted);
  font-size: 0.65em;
  font-weight: 500;
}
.project-row__empty {
  color: var(--color-muted);
  display: block;
  font-size: 11px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.project-row__status {
  color: var(--color-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.project-row__status--over {
  color: var(--color-accent);
  font-weight: 700;
}
.project-row__mobile-label {
  display: none;
}

@keyframes project-time-breathe {
  0%, 100% {
    color: var(--color-ink);
  }
  50% {
    color: var(--color-accent);
  }
}
.project-timer-button {
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--color-ink);
  border-radius: 50%;
  color: var(--color-ink);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 38px;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  width: 38px;
}
.project-timer-button::before {
  background: var(--color-accent);
  border-radius: inherit;
  content: "";
  inset: -1px;
  position: absolute;
  transform: scale(0);
  transition: background-color 180ms ease, transform 220ms cubic-bezier(0.2, 0.85, 0.35, 1.15);
}
.project-timer-button::after {
  border: 1px solid var(--color-accent);
  border-radius: inherit;
  content: "";
  inset: -1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.project-timer-button:active {
  transform: scale(0.88);
  transition-duration: 70ms;
}
.project-timer-button[aria-pressed=true] {
  border-color: var(--color-accent);
  color: var(--color-on-red);
}
.project-timer-button[aria-pressed=true]::before {
  transform: scale(1);
}
.project-timer-button:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}
.project-timer-button:hover::before {
  background: var(--color-ink);
}
.project-timer-button[aria-pressed=true]::after {
  animation: project-mark-pulse 2000ms cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.project-timer-button--sm {
  border-width: 1px;
  height: 23px;
  left: -1px;
  top: -2px;
  width: 23px;
}
.project-timer-button--sm .project-timer-icon {
  height: 11px;
  width: 11px;
}

.project-timer-icon {
  height: 15px;
  position: relative;
  width: 15px;
  z-index: 1;
}
.project-timer-icon svg {
  display: block;
  height: 100%;
  inset: 0;
  opacity: 1;
  position: absolute;
  transform: scale(1);
  transition: opacity 120ms ease, transform 220ms cubic-bezier(0.2, 0.85, 0.35, 1.2);
  width: 100%;
}
.project-timer-icon__play {
  transform: translateX(1px) scale(1) !important;
}
.project-timer-icon__pause {
  opacity: 0 !important;
  transform: scale(0.45) !important;
}

[aria-pressed=true] .project-timer-icon__play {
  opacity: 0;
  transform: translateX(1px) scale(0.45) !important;
}
[aria-pressed=true] .project-timer-icon__pause {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.project-budget {
  display: flex;
  flex-direction: column;
  gap: var(--space-unit);
  width: 100%;
}
.project-budget__summary {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-unit);
  justify-content: space-between;
}
.project-budget__summary strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.project-budget__balance {
  color: var(--color-muted);
  font-size: 11px;
  white-space: nowrap;
}
.project-budget__balance--over {
  color: var(--color-accent);
  font-weight: 700;
}
.project-budget__track {
  background: var(--color-grid);
  display: block;
  height: 5px;
  position: relative;
  width: 100%;
}
.project-budget__fill, .project-budget__over {
  height: 100%;
  position: absolute;
  top: 0;
}
.project-budget__fill {
  background: var(--color-ink);
  left: 0;
  transition: width 900ms linear;
}
.project-budget__over {
  background: var(--color-accent);
  transition: left 900ms linear, width 900ms linear;
}
.project-budget__tick {
  background: var(--color-ink);
  height: 11px;
  position: absolute;
  top: -3px;
  transform: translateX(-1px);
  transition: left 900ms linear;
  width: 2px;
}
.project-budget--editor {
  max-width: 560px;
}

.project-adjust-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 28px;
  justify-content: center;
  padding: 0;
  transition: color 140ms ease, transform 140ms ease;
  width: 28px;
}
.project-adjust-trigger svg {
  height: 16px;
  width: 16px;
}
.project-adjust-trigger:hover, .project-adjust-trigger:focus-visible, .project-adjust-trigger[aria-expanded=true] {
  color: var(--color-accent);
}
.project-adjust-trigger:active {
  transform: scale(0.9);
}

.project-row:hover .project-adjust-trigger {
  color: var(--color-ink);
}
.project-row:hover .project-adjust-trigger:hover, .project-row:hover .project-adjust-trigger:focus-visible, .project-row:hover .project-adjust-trigger[aria-expanded=true] {
  color: var(--color-accent);
}

.project-adjust-panel {
  animation: project-adjust-in 140ms ease both;
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.5);
  left: 0;
  padding: calc(var(--space-unit) * 2);
  position: absolute;
  text-align: left;
  top: calc(100% + 6px);
  width: 286px;
  z-index: 20;
}
.project-adjust-panel__heading {
  align-items: start;
  display: flex;
  gap: calc(var(--space-unit) * 1.5);
  justify-content: space-between;
  margin-bottom: calc(var(--space-unit) * 2);
}
.project-adjust-panel__heading h2 {
  font-size: 17px;
  letter-spacing: -0.025em;
  margin: 0;
}
.project-adjust-panel__heading p {
  color: var(--color-muted);
  font-size: 11px;
  margin: 3px 0 0;
}
.project-adjust-panel__close {
  background: transparent;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
  padding: 0;
}
.project-adjust-panel__close:hover, .project-adjust-panel__close:focus-visible {
  color: var(--color-accent);
}
.project-adjust-panel__fields {
  display: grid;
  gap: calc(var(--space-unit) * 1.5);
  grid-template-columns: 1fr 1fr;
}
.project-adjust-panel__preview {
  align-items: baseline;
  border-block: 1px solid var(--color-grid);
  display: flex;
  justify-content: space-between;
  margin: calc(var(--space-unit) * 2) 0;
  padding: calc(var(--space-unit) * 1.5) 0;
}
.project-adjust-panel__preview span {
  color: var(--color-muted);
  font-size: 11px;
}
.project-adjust-panel__preview strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}
.project-adjust-panel__warning {
  color: var(--color-accent);
  font-size: 11px;
  line-height: 1.4;
  margin: calc(var(--space-unit) * -1) 0 calc(var(--space-unit) * 2);
}
.project-adjust-panel__actions {
  display: flex;
  gap: var(--space-unit);
}
.project-adjust-panel input[type=number] {
  appearance: textfield;
}
.project-adjust-panel input[type=number]::-webkit-inner-spin-button, .project-adjust-panel input[type=number]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.project-adjust-sign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: calc(var(--space-unit) * 2);
}
.project-adjust-sign button {
  background: transparent;
  border: 1px solid var(--color-field-line);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  min-height: 34px;
}
.project-adjust-sign button + button {
  border-left: 0;
}
.project-adjust-sign button[aria-pressed=true] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

@keyframes project-adjust-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
.project-form-grid {
  max-width: 780px;
}

.project-time-summary__body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 2.5);
  position: relative;
}
.project-time-summary__body > .project-adjust-panel {
  box-shadow: none;
  margin-top: calc(var(--space-unit) * -1);
  position: static;
  width: min(320px, 100%);
}
.project-time-summary__body > .project-adjust-panel .project-adjust-panel__heading p {
  display: none;
}
.project-time-summary__total {
  font-size: clamp(34px, 5vw, 54px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.project-time-summary__seconds {
  font-size: 0.72em;
  font-weight: 500;
}
.project-time-summary__unit {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-left: calc(var(--space-unit) * 0.5);
  text-transform: uppercase;
}
.project-time-summary__note {
  color: var(--color-muted);
  font-size: 13px;
}
.project-time-summary__adjust {
  align-self: flex-start;
}

.empty-state--compact {
  padding-top: calc(var(--space-unit) * 3);
}

@media (max-width: 820px) {
  .project-mark {
    margin-right: calc(var(--space-unit) * -1.25);
  }
  .project-mark::after {
    right: calc(var(--space-unit) * -0.625);
  }
  .project-ledger__head {
    display: none;
  }
  .project-ledger .project-row {
    align-items: start;
    gap: 6px 12px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    min-height: 0;
    padding-block: calc(var(--space-unit) * 2.25);
  }
  .project-row__timer {
    grid-column: 1;
    grid-row: 1;
  }
  .project-row__identity {
    grid-column: 2;
    grid-row: 1;
  }
  .project-row__identity > a {
    white-space: normal;
  }
  .project-row__time {
    grid-column: 3;
    grid-row: 1;
    padding-top: 4px;
  }
  .project-row__budget {
    grid-column: 2/4;
    grid-row: 2;
    margin-top: var(--space-unit);
  }
  .project-row__status {
    grid-column: 2/4;
    grid-row: 3;
    text-align: left;
  }
  .project-adjust-panel {
    bottom: 12px;
    left: auto;
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    position: fixed;
    right: 12px;
    top: auto;
    width: min(360px, 100vw - 24px);
    z-index: 90;
  }
  .project-time-summary__body > .project-adjust-panel {
    bottom: auto;
    max-height: none;
    overflow: visible;
    position: static;
    right: auto;
    width: min(320px, 100%);
  }
}
@media (max-width: 560px) {
  .project-row__time > strong {
    font-size: 16px;
  }
  .project-row--archived .project-row__time {
    padding-right: 0;
  }
  .project-adjust-panel__actions .button {
    flex: 1 1 0;
    padding-inline: var(--space-unit);
  }
}
.logo-setting {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-unit) * 4);
}
.logo-setting__preview-wrap {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.16);
  color: #7a7a7a;
  display: flex;
  height: 96px;
  justify-content: center;
  padding: calc(var(--space-unit) * 1.5);
  width: 200px;
}
.logo-setting__preview {
  max-height: 70px;
  max-width: 174px;
  object-fit: contain;
}
.logo-setting__placeholder {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.logo-setting__controls {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--space-unit) * 2);
  min-width: 220px;
}
@media (max-width: 820px) {
  .logo-setting {
    flex-direction: column;
  }
}

.invoice-defaults__price {
  justify-self: start;
  width: 230px;
}
.invoice-defaults__price input {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .invoice-defaults__price {
    width: 100%;
  }
}

.account-deletion__field, .account-deletion__notice {
  margin-top: calc(var(--space-unit) * 2.5);
}
.account-deletion__address {
  color: var(--color-ink);
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-transform: none;
}

.dashboard-page {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 3);
}

.dashboard-page__meta {
  color: var(--color-muted);
  font-size: 13px;
  margin-top: calc(var(--space-unit) * 0.75);
}

.dashboard-trend {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
}

.dashboard-trend--up {
  color: #1a8a4a;
}

.dashboard-trend--down {
  color: var(--color-accent);
}

.dashboard-section {
  background: var(--color-soft);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--color-grid);
  padding: calc(var(--space-unit) * 2.25);
}

.dashboard-page .data-table__cell,
.dashboard-page .invoice-kpi-strip__value {
  font-variant-numeric: normal;
}

.dashboard-section__head {
  align-items: baseline;
  display: flex;
  gap: calc(var(--space-unit) * 1.5);
  justify-content: space-between;
  margin-bottom: calc(var(--space-unit) * 1.5);
}

.dashboard-section__head h2 {
  font-size: 18px;
  letter-spacing: 0;
  margin: 0;
}

.dashboard-section__count {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 600;
}

.dashboard-grid {
  display: grid;
  gap: calc(var(--space-unit) * 3);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.dashboard-badge {
  border: 1px solid var(--color-grid);
  color: var(--color-muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-badge--ok {
  border-color: color-mix(in srgb, #1a8a4a 38%, transparent);
  color: #1a8a4a;
}

.dashboard-badge--warn,
.dashboard-badge--p2 {
  border-color: color-mix(in srgb, #d66f16 40%, transparent);
  color: #d66f16;
}

.dashboard-badge--p1 {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  color: var(--color-accent);
}

.dashboard-empty {
  color: var(--color-muted);
  font-size: 14px;
  margin: 0;
}

.dashboard-logs {
  display: grid;
  gap: calc(var(--space-unit) * 2);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.dashboard-logs__group h3 {
  color: var(--color-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-unit);
  text-transform: uppercase;
}

.dashboard-logs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-unit);
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-logs__list li {
  border-bottom: 1px solid var(--color-grid);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--space-unit);
}

.dashboard-logs__list span {
  color: var(--color-muted);
  font-size: 11px;
}

.dashboard-logs__list strong {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dashboard-source {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 220px;
}

.dashboard-source__label {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dashboard-source__detail {
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}