/* =========================================================================
   bovario.se

   The palette is the app's own, src/Bovario.App/Resources/Styles/Colors.xaml.
   Change a value there before changing it here.

   Fonts are self-hosted on purpose: loading them from a CDN sends every
   visitor's IP address to a third party, which a Swedish site does not do.
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-variable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-variable-latin.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --sage: #437260;
  --sage-dark: #3a6259;
  --sage-light: #6b9e8f;
  --sage-soft: #e3ece7;
  --sage-tint: #dae7e0;
  --sage-tint-strong: #c9dcd2;
  --button-shadow: 0 6px 16px -8px rgb(58 98 89 / 0.55);
  --button-shadow-pressed: 0 2px 6px -3px rgb(58 98 89 / 0.6);
  --accent: #2d9b83;
  --paper: #f2f5f3;
  --surface: #fff;
  --surface-variant: #e8edea;
  --ink: #1a1a1a;
  --ink-soft: #4c5753;
  --ink-muted: #5f6d67;
  --good: #2c723b;
  --good-graphic: #37954b;
  --good-soft: #e4efe6;
  --good-line: #93c795;
  --warn: #855c23;
  --warn-graphic: #b28134;
  --warn-soft: #f9ebd6;
  --warn-line: #e8b96a;
  --bad: #a14036;
  --bad-graphic: #ba5445;
  --bad-soft: #f8dfdb;
  --bad-soft-strong: #f4d5d0;
  --line: #dde2e0;
  --on-sage: #e7efec;
  --on-sage-soft: #cfe0da;
  --on-sage-muted: #b9d3cb;
  --focus: var(--sage-dark);

  --display: 'Archivo', ui-sans-serif, 'Segoe UI', system-ui, sans-serif;
  --body: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  --data: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

  --gutter: 1.5rem;
  --measure: 1180px;
  --radius: 12px;
  --radius-small: 6px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- type -------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 0.6em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4rem);
}

h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-stretch: 105%;
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

.lead {
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 38rem;
}

a {
  color: var(--sage-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:not(.button):hover {
  color: var(--accent);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.wrap {
  width: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
}

.section {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.section--surface {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section--sage {
  background: var(--sage);
  color: var(--on-sage);
  --focus: #fff;
}

.section--sage h1,
.section--sage h2,
.section--sage h3 {
  color: #fff;
}

.section--sage .label {
  color: var(--on-sage-muted);
}

.section--sage .lead {
  color: var(--on-sage-soft);
}

.section--sage a {
  color: #fff;
}

.label {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 100;
  background: var(--sage-dark);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-small);
  font-family: var(--display);
}

.skip-link:focus {
  top: 0.5rem;
}

/* ---------- buttons -----------------------------------------------------
   One family, the same as the app's: a capsule sized to its label, in four
   steps of loudness. Filled for the one thing the page is for, tonal beside
   it, quiet for the rest, red for what removes. On a sage ground it inverts. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-block-size: 3rem;
  padding: 0.6rem 1.4rem;
  background: var(--sage);
  color: #fff;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  font-stretch: 105%;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  box-shadow: var(--button-shadow);
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--sage-dark);
    color: #fff;
  }
}

.button:active {
  transform: scale(0.97);
  box-shadow: var(--button-shadow-pressed);
}

.button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.button:disabled,
.button[aria-disabled='true'] {
  opacity: 0.4;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.button--go::after {
  content: '';
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-inline-end: 2px solid currentColor;
  border-block-start: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.12s ease;
}

@media (hover: hover) {
  .button--go:hover::after {
    transform: rotate(45deg) translate(2px, -2px);
  }
}

.button--tonal {
  background: var(--sage-tint);
  color: var(--sage-dark);
  box-shadow: none;
}

@media (hover: hover) {
  .button--tonal:hover {
    background-color: var(--sage-tint-strong);
    color: var(--sage-dark);
  }
}

.button--tonal:active {
  background-color: var(--sage-tint-strong);
  box-shadow: none;
}

.button--quiet {
  min-block-size: 2.75rem;
  padding: 0.4rem 0.9rem;
  background: transparent;
  color: var(--sage-dark);
  box-shadow: none;
}

@media (hover: hover) {
  .button--quiet:hover {
    background-color: var(--sage-tint);
    color: var(--sage-dark);
  }
}

.button--quiet:active {
  background-color: var(--sage-tint);
  box-shadow: none;
}

.button--danger {
  background: var(--bad-soft);
  color: var(--bad);
  box-shadow: none;
}

.button--quiet.button--danger {
  background: transparent;
  color: var(--bad);
}

@media (hover: hover) {
  .button--danger:hover {
    background-color: var(--bad-soft-strong);
    color: var(--bad);
  }

  .button--quiet.button--danger:hover {
    background-color: var(--bad-soft);
  }
}

.button--danger:active {
  background-color: var(--bad-soft-strong);
  box-shadow: none;
}

.button--quiet.button--danger:active {
  background-color: var(--bad-soft);
}

:is(.hero, .section--sage, .band, .objekt-hero, .rail) .button {
  background: #fff;
  color: var(--sage-dark);
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.45);
}

@media (hover: hover) {
  :is(.hero, .section--sage, .band, .objekt-hero, .rail) .button:hover {
    background-color: var(--sage-soft);
    color: var(--sage-dark);
  }
}

:is(.hero, .section--sage, .band, .objekt-hero, .rail) .button--tonal {
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  box-shadow: none;
}

@media (hover: hover) {
  :is(.hero, .section--sage, .band, .objekt-hero, .rail) .button--tonal:hover {
    background-color: rgb(255 255 255 / 0.22);
    color: #fff;
  }
}

:is(.hero, .section--sage, .band, .objekt-hero, .rail) .button--quiet {
  background: transparent;
  color: var(--on-sage-soft);
  box-shadow: none;
}

@media (hover: hover) {
  :is(.hero, .section--sage, .band, .objekt-hero, .rail) .button--quiet:hover {
    background-color: rgb(255 255 255 / 0.12);
    color: #fff;
  }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- header ------------------------------------------------------ */

.header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--sage);
  text-decoration: none;
}

.brand:hover {
  color: var(--sage-dark);
}

.mark-box {
  width: 2.25rem;
  flex: none;
}

.mark {
  width: 100%;
  height: auto;
  display: block;
}

.wordmark {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.menu-button {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  min-block-size: 2.75rem;
  padding: 0.5rem 1rem;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.menu-button__bar {
  display: block;
  width: 18px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a:not(.button) {
  display: block;
  position: relative;
  padding-block: 0.4rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.main-nav a:not(.button)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.main-nav a:not(.button):hover::after,
.main-nav a:not(.button)[aria-current='page']::after {
  transform: scaleX(1);
}

.main-nav a:not(.button)[aria-current='page'] {
  font-weight: 600;
}

/* ---------- hero -------------------------------------------------------- */

.hero {
  background: var(--sage);
  color: var(--on-sage);
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
  overflow: clip;
  --focus: #fff;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 {
  color: #fff;
}

.hero .lead {
  color: var(--on-sage-soft);
}

.hero .label {
  color: var(--on-sage-muted);
}

.contrast {
  margin: 0 0 2rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--sage-light);
  font-size: 1.0625rem;
  color: var(--on-sage-soft);
}

.contrast strong {
  color: #fff;
  font-weight: 600;
}

/* ---------- store buttons ----------------------------------------------- */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.store {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 1.7rem;
  border-radius: 999px;
  background: #fff;
  color: var(--sage-dark);
  text-decoration: none;
  font-family: var(--display);
  line-height: 1.25;
  transition: transform 0.18s ease;
}

a.store:hover {
  transform: translateY(-2px);
  color: var(--sage-dark);
}

.store small {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.store span {
  font-size: 1rem;
  font-weight: 600;
}

.store--outline {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.4);
}

.store--outline small {
  color: var(--on-sage-muted);
}

.section .store {
  background: var(--sage);
  color: #fff;
}

.section .store small {
  color: var(--on-sage-muted);
}

.section .store--outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.section .store--outline small {
  color: var(--ink-muted);
}

/* ---------- phone frame ------------------------------------------------- */

.phone {
  width: min(100%, 20.5rem);
  margin-inline: auto;
  padding: 0.65rem;
  border-radius: 2.4rem;
  background: #23302c;
  box-shadow: 0 26px 60px -24px rgb(10 30 24 / 0.7);
}

.phone__screen {
  border-radius: 1.9rem;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.phone__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.1rem 0.5rem;
  font-family: var(--data);
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.phone__title {
  padding: 0.25rem 1.1rem 0.85rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

.phone__body {
  padding: 0 0.85rem 0.85rem;
  display: grid;
  gap: 0.6rem;
}

.phone__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--display);
  font-size: 0.625rem;
  text-align: center;
}

.phone__tabs span {
  padding: 0.6rem 0.2rem 0.7rem;
  color: var(--ink-muted);
}

.phone__tabs .is-selected {
  color: var(--sage);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--sage);
}

/* ---------- cards inside the phone ------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
}

.card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.card__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.card__meta {
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.card__money {
  font-family: var(--data);
  font-size: 0.625rem;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}

.card__flags {
  margin-top: 0.3rem;
}

.flag {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-family: var(--display);
  font-size: 0.625rem;
  font-weight: 600;
}

.flag--good {
  background: var(--good-soft);
  color: var(--good);
}

.flag--bad {
  background: var(--bad-soft);
  color: var(--bad);
}

.flag--claim {
  background: var(--warn-soft);
  color: var(--warn);
}

.problems {
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  color: var(--bad);
}

.confidence {
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.ring {
  --value: 74;
  position: relative;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--ring-color, var(--sage)) calc(var(--value) * 1%), var(--surface-variant) 0);
}

.ring::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--surface);
}

.ring b {
  position: relative;
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ring-text, var(--sage));
}

.ring--good {
  --ring-color: var(--good-graphic);
  --ring-text: var(--good);
}

.ring--warn {
  --ring-color: var(--warn-graphic);
  --ring-text: var(--warn);
}

.ring--muted {
  --ring-color: var(--ink-muted);
  --ring-text: var(--ink-muted);
}

.ring-label {
  text-align: center;
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

.two-scores {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

.two-scores > div {
  text-align: center;
}

.two-scores .ring {
  width: 2.5rem;
  height: 2.5rem;
}

.two-scores .ring b {
  font-size: 0.75rem;
}

.log {
  border-left: 2px solid var(--sage-light);
  padding-left: 0.65rem;
}

.log__who {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
}

.log__what {
  font-size: 0.6875rem;
  color: var(--ink-soft);
}

.log__when {
  font-family: var(--data);
  font-size: 0.625rem;
  color: var(--ink-muted);
}

.answer-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.answer-card__question {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.answer-card__hero {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sage);
  line-height: 1.15;
  margin-top: 0.2rem;
}

.answer-card__sub {
  font-family: var(--data);
  font-size: 0.6875rem;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.chain {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
}

.chain div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.chain dt {
  color: var(--ink-soft);
}

.chain dd {
  margin: 0;
  font-family: var(--data);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.chain .is-sum {
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
}

.chain .is-sum dt {
  color: var(--ink);
  font-family: var(--display);
}

.chain .is-sum dd {
  color: var(--sage);
  font-weight: 600;
}

.answer-options {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.answer-options span {
  flex: 1;
  padding: 0.35rem 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
  font-family: var(--display);
  font-size: 0.6875rem;
  color: var(--ink-soft);
}

.answer-options .is-selected {
  background: var(--bad-soft);
  border-color: var(--bad);
  color: var(--bad);
  font-weight: 600;
}

.answer-options .is-ok {
  background: var(--good-soft);
  border-color: var(--good-line);
  color: var(--good);
  font-weight: 600;
}

.scale {
  font-family: var(--data);
  font-size: 0.625rem;
  color: var(--ink-muted);
}

/* The publisher strip at the top of an imported home. */
.publisher-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  background: var(--sage-soft);
  font-size: 0.6875rem;
}

.publisher-strip__photo {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.6875rem;
  flex: none;
}

.publisher-strip__name {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
}

.publisher-strip__role {
  color: var(--ink-soft);
}

/* ---------- feature grid ------------------------------------------------ */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.section--surface .tile {
  background: var(--paper);
}

.section--sage .tile {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.18);
}

.tile h3 {
  font-size: 1.125rem;
  margin-bottom: 0.4rem;
}

.tile p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.section--sage .tile p {
  color: var(--on-sage-soft);
}

.tile__tab {
  font-family: var(--data);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.6rem;
}

.section--sage .tile__tab {
  color: var(--on-sage-muted);
}

.types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}

.types li {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage-dark);
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ---------- steps (agent page) ----------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.steps li {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1.25rem;
  top: 1.35rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sage);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
}

.steps h3 {
  font-size: 1.125rem;
  margin-bottom: 0.4rem;
}

.steps p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* ---------- price card -------------------------------------------------- */

.price {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 2.5rem;
}

.price__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.price__card--now {
  border-color: var(--sage);
  box-shadow: inset 0 0 0 1px var(--sage);
}

.price__amount {
  font-family: var(--display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--sage);
  margin: 0.5rem 0 0.25rem;
}

.price__unit {
  font-family: var(--data);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.price__card ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.price__card li {
  margin-bottom: 0.4rem;
}

.price__now {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage-dark);
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- glossary ---------------------------------------------------- */

.glossary {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 0;
}

.glossary dt {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.section--sage .glossary dt {
  color: #fff;
}

.glossary dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.section--sage .glossary dd {
  color: var(--on-sage-soft);
}

/* ---------- prose and legal pages -------------------------------------- */

.prose {
  max-width: 42rem;
}

.prose h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  margin-top: 2.75rem;
}

.prose h2:first-of-type {
  margin-top: 1.5rem;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.prose ul {
  padding-left: 1.2rem;
  margin-bottom: 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.note {
  background: var(--sage-soft);
  border-left: 4px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.note p:last-child {
  margin-bottom: 0;
}

.prose__text > p:first-child {
  font-family: var(--data);
  font-size: 0.8125rem;
  color: var(--ink-muted);
  margin-bottom: 2rem;
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
  font-family: var(--data);
  font-size: 0.9375rem;
}

.facts dt {
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding-top: 0.28em;
}

.facts dd {
  margin: 0;
}

.link-box {
  display: block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-small);
  background: var(--surface-variant);
  font-family: var(--data);
  font-size: 0.8125rem;
  word-break: break-all;
}

/* ---------- footer ------------------------------------------------------ */

main {
  flex: 1 0 auto;
}

.footer {
  background: var(--sage-dark);
  color: var(--on-sage-soft);
  --focus: #fff;
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
  font-size: 1rem;
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.footer h2 {
  font-size: 0.8125rem;
  font-stretch: 100%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-sage-muted);
  margin-bottom: 1rem;
}

.footer .brand {
  color: #fff;
  margin-bottom: 1rem;
}

.footer .wordmark {
  color: #fff;
}

.footer a {
  color: #fff;
}

.footer a:hover {
  color: var(--on-sage-muted);
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer ul a {
  text-decoration: none;
}

.footer ul a:hover {
  text-decoration: underline;
}

.footer li {
  margin-bottom: 0.4rem;
}

.footer .facts dt {
  color: var(--on-sage-muted);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-family: var(--data);
  font-size: 0.8125rem;
  color: var(--on-sage-muted);
}

/* ---------- reveal on scroll ------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- breakpoints ------------------------------------------------- */

@media (min-width: 56rem) {
  .hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }

  .two-col--flip > .phone {
    order: -1;
  }
}

@media (max-width: 55.999rem) {
  .menu-button {
    display: inline-flex;
  }

  .main-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -22px rgb(10 30 24 / 0.6);
  }

  .main-nav.open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100% - 2 * var(--gutter), var(--measure));
    margin-inline: auto;
    padding-block: 0.5rem 1.5rem;
  }

  .main-nav li + li {
    border-top: 1px solid var(--line);
  }

  .main-nav a:not(.button) {
    padding-block: 0.9rem;
    font-size: 1.0625rem;
  }

  .main-nav a:not(.button)::after {
    display: none;
  }

  .main-nav a:not(.button)[aria-current='page'] {
    color: var(--sage-dark);
  }

  .main-nav .button {
    margin-top: 1rem;
  }

  .header__inner {
    position: relative;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .header,
  .button-row,
  .footer {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

.answer-options .is-unsure {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  color: var(--warn);
  font-weight: 600;
}

/* ---------- the mäklare's desk ------------------------------------------ */

.desk {
  width: min(100% - 2 * var(--gutter), 34rem);
}

.desk__signout {
  margin-left: auto;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.form {
  margin-top: 2.5rem;
}

.field {
  margin-bottom: 1.75rem;
}

.field label {
  display: block;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.field__input {
  width: 100%;
  font-family: var(--body);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--surface);
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
}

.field__input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}

.field__note {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.form__problem {
  background: var(--sage-soft);
  border-left: 4px solid var(--bad);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.75rem;
}

.form__aside {
  margin-top: 2rem;
  color: var(--ink-soft);
}

.field--choice {
  border: 0;
  padding: 0;
  margin-inline: 0;
}

.field--choice legend {
  padding: 0;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.75rem;
  cursor: pointer;
}

.choice input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--sage);
  flex: none;
}

.form__done {
  background: var(--sage-soft);
  border-left: 4px solid var(--sage);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.75rem;
}

/* A fieldset draws a browser border and an inset legend. The form groups its fields with
   whitespace and a heading instead, the same way the pages group their sections. */
fieldset.field {
  border: 0;
  padding: 0;
  margin-inline: 0;
}

fieldset.field > legend {
  padding: 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.field--choice legend {
  font-size: 0.9375rem;
}

.field__chosen {
  margin: 0 0 0.5rem;
}

.field__chosen .field__note {
  display: block;
}

.candidates {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.candidates li + li {
  border-top: 1px solid var(--line);
}

.candidate {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 0;
  padding: 0.85rem 1rem;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}

@media (hover: hover) {
  .candidate:hover {
    background: var(--sage-soft);
  }
}

.candidate:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* A member row displays and carries one quiet action; it opens nothing, so it takes no chevron. */
.member {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
  padding: 0.85rem 1rem;
}

.member > span:first-child {
  min-inline-size: 0;
}

.member form {
  margin-inline-start: auto;
}

.candidate__totals {
  margin: 1.25rem 0 0;
  font-weight: 600;
}

.candidate__address {
  display: block;
  font-weight: 600;
}

.candidate__place {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* A candidate row is a button in the address search and a link in the objekt list. Both open
   something, so the chevron and the missing underline belong to the row, not to the element. */
a.candidate {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
}

a.candidate > span {
  min-inline-size: 0;
}

a.candidate::after {
  content: '';
  flex: none;
  margin-inline-start: auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid var(--ink-muted);
  border-block-end: 2px solid var(--ink-muted);
  transform: rotate(-45deg);
}

.code-sheet {
  margin: 1.75rem 0 0;
  padding: 1.5rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

/* The code is drawn a whole number of pixels to the module, so it is left at its own size rather
   than scaled to the panel: a resampled module edge is what a scanner reads as noise. */
.code-sheet img {
  margin-inline: auto;
  image-rendering: pixelated;
}

.code-sheet figcaption {
  margin-top: 0.85rem;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 105%;
}

/* The site's h2 is sized for a landing page. On the desk it would outweigh the page's own title,
   so a section heading here takes the h3 step and keeps the h2 for the document outline. */
.desk__heading {
  margin-top: 2.75rem;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-stretch: 105%;
}

.desk__onwards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.5rem;
  font-size: 0.9375rem;
}

.viewing {
  border-left: 3px solid var(--line);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

.viewing__when {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

/* The subject is the label and the prompt is the question, so the prompt goes above the box.
   Below it, a mäklare types an answer before she has read what was asked. */
.question + .question {
  margin-top: 1.25rem;
}

.question .field__note {
  margin: 0 0 0.5rem;
}

/* The operator console. One area per page rather than every panel on one, because a page of tables
   is a page nobody reads to the bottom of, and the console is where a number gets looked up. */
.console-mark {
  font-family: var(--data);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-left: 1px solid var(--line);
  padding-left: 0.9rem;
  margin-right: auto;
  margin-left: 0.9rem;
}

.console-nav {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.console-nav .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding-block: 0.6rem;
}

.console-nav a {
  color: inherit;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}

.console-nav a.here {
  font-weight: 600;
  border-bottom-color: currentColor;
}

.console-panels {
  padding: 2.5rem 0 4rem;
  display: grid;
  gap: 2rem;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.panel-head h2 {
  font-size: 1.35rem;
  margin: 0;
}

.panel-sub {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.75rem;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 1rem;
  overflow: hidden;
}

.tile {
  background: var(--surface);
  padding: 0.9rem 1rem;
}

.tile dt {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}

.tile dd {
  font-family: var(--data);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin: 0;
}

.tile-warn dd { color: var(--warn); }

.tile-note {
  display: block;
  font-family: var(--display);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}

.grant { margin-bottom: 1.75rem; }

.field-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.grant-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

.grant-row .field__input {
  flex: 1 1 16rem;
  max-width: 22rem;
}

.grant-row .grant-note { flex: 1 1 12rem; max-width: 18rem; }

.holders {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.holders th,
.holders td {
  text-align: left;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}

.holders th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.holders form { margin: 0; }

.holders td.reason {
  color: var(--ink-soft);
  font-size: 0.85rem;
  max-width: 24rem;
}

.notice {
  border-left: 3px solid var(--sage);
  padding: 0.6rem 0 0.6rem 0.9rem;
  margin: 0 0 1.25rem;
}

.notice-refused { border-left-color: var(--bad); }

.fineprint {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0.75rem 0 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One number leads each group and the rest sit under it at reading size, so the eye lands on the
   three that matter before it reaches the ones that only matter when they move. */
.tally {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  margin-top: 2rem;
}

.tally h2 {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.tally__lead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  margin: 0.5rem 0 1rem;
}

.tally__lead b {
  font-family: var(--data);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--sage-dark);
}

.tally__lead span {
  color: var(--ink-soft);
}

.tally__rest {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1.5rem;
  margin: 0;
  font-family: var(--data);
  font-size: 0.9375rem;
}

.tally__rest dt {
  color: var(--ink-soft);
}

.tally__rest dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ======================================================================
   The publisher's console
   ----------------------------------------------------------------------
   Not a document with a menu on top. A rail on the left that never moves,
   a working surface on the right, and inside it a main column and an aside.
   The rail is sage because a tool should not be the same white as the page
   it produces, and because the eye needs one fixed edge to come back to.
   ====================================================================== */

.shell {
  --body: var(--display);
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  min-block-size: 100vh;
  background: var(--paper);
  font-size: 0.9375rem;
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
}

.rail {
  background: linear-gradient(180deg, var(--sage-dark) 0%, #2f5349 100%);
  color: var(--on-sage);
  --focus: #fff;
}

.rail__inner {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 1.25rem 2rem;
  min-block-size: 100vh;
}

.rail__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
}

.rail__brand .mark-box {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
}

.rail__brand .wordmark {
  color: #fff;
  font-size: 1.125rem;
}

/* Her own name, and her own face where a photo will go. Initials are honest until the card
   carries a picture, and they give the rail the one round shape everything else borrows. */
.rail__who {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem;
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.08);
}

.avatar {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
}

.rail__name {
  display: grid;
  min-inline-size: 0;
}

.rail__name strong {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-stretch: 105%;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail__name small {
  font-size: 0.8125rem;
  color: var(--on-sage-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail__new {
  justify-content: flex-start;
  background: #fff;
  color: var(--sage-dark);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.4) inset, 0 8px 18px -12px rgb(0 0 0 / 0.6);
}

.rail__new::before {
  content: '+';
  display: grid;
  place-items: center;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-dark);
  font-size: 1rem;
  line-height: 1;
}

.rail__new:hover {
  background: #fff;
  color: var(--sage-dark);
}

.rail__nav {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.5rem;
}

.rail__nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-small);
  color: var(--on-sage-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .rail__nav a:hover {
    background: rgb(255 255 255 / 0.08);
    color: #fff;
  }
}

.rail__nav a.here {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  font-weight: 600;
}

.rail__nav .icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  opacity: 0.9;
}

.rail__out {
  margin-top: auto;
}

/* The rail folds into a bar on a phone: the same items, the same order, along the top. */
@media (max-width: 60rem) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail__inner {
    position: static;
    min-block-size: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.9rem var(--gutter);
  }

  .rail__who {
    background: none;
    padding: 0;
    justify-self: end;
  }

  .rail__name {
    display: none;
  }

  .rail__new {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: center;
  }

  .rail__nav {
    grid-row: 3;
    grid-column: 1 / -1;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: 0;
  }

  .rail__nav a {
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    text-align: center;
  }

  .rail__out {
    display: none;
  }
}

/* ---------- the working surface ---------------------------------------- */

.desk-main {
  padding: 1.75rem clamp(1.25rem, 3vw, 2.75rem) 5rem;
  max-inline-size: 76rem;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-bottom: 1.25rem;
}

.page-head h1 {
  margin: 0;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-stretch: 108%;
  letter-spacing: -0.012em;
}

.page-head__note {
  margin: 0.3rem 0 0;
  max-width: 64ch;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Two tracks, not one stack: what she works on, and beside it what she checks. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 2rem 2.5rem;
  align-items: start;
  margin-top: 1.75rem;
}

@media (max-width: 64rem) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.aside-stack {
  display: grid;
  gap: 1.25rem;
  position: sticky;
  top: 1.5rem;
}

@media (max-width: 64rem) {
  .aside-stack {
    position: static;
  }
}

/* ---------- the panel, the one container the console uses --------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
}

.panel--tinted {
  background: var(--sage-soft);
  border-color: transparent;
}

.panel__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.panel__title .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.panel--tinted .panel__title {
  color: var(--sage-dark);
}

/* ---------- figures ----------------------------------------------------- */

/* One strip, not a column of tiles: the numbers sit side by side in one surface, so they read as
   one reading of the week and the eye compares them instead of scrolling past them. */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.figures li {
  padding: 0.95rem 1.2rem 1rem;
  box-shadow: -1px 0 0 var(--line);
}

.figures--stack {
  grid-template-columns: minmax(0, 1fr);
}

.figures--stack li {
  box-shadow: 0 -1px 0 var(--line);
}

.figure__value {
  display: block;
  font-family: var(--display);
  font-size: 1.625rem;
  font-weight: 600;
  font-stretch: 105%;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.figure__name {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.figures__note,
.chart figcaption {
  margin: 0.8rem 0 0;
  max-width: 66ch;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.desk-empty {
  margin: 1.5rem 0 0;
  max-width: 56ch;
  color: var(--ink-soft);
}

/* ---------- the band that carries what happens next --------------------- */

.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(255 255 255 / 0.18), transparent 60%),
    linear-gradient(120deg, var(--sage-dark), #35604f);
  color: var(--on-sage);
  --focus: #fff;
}

.band .label {
  color: var(--on-sage-muted);
}

.band__line {
  margin: 0.25rem 0 0;
  color: #fff;
  font-size: 1.0625rem;
}

.band__line strong {
  font-family: var(--display);
  font-stretch: 105%;
}

/* ---------- tasks ------------------------------------------------------- */

/* A list is one sheet with hairline rows. A card per row made every page a stack of boxes with
   nothing to tell the rows from the sections. */
.tasks,
.objekt-list,
.people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.tasks > li + li,
.objekt-list > li + li,
.people > li + li {
  border-top: 1px solid var(--line);
}

.task a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 0.5rem;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}

.task__mark {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-dark);
}

.task--quietforaweek .task__mark {
  background: var(--warn-soft);
  color: var(--warn);
}

.task--noviewingtime .task__mark {
  background: var(--surface-variant);
  color: var(--ink-soft);
}

.task__mark .icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

@media (hover: hover) {
  .task a:hover {
    background: var(--paper);
  }
}

.task a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.task__address {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 105%;
}

.task__line {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.task a::after {
  content: '';
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid var(--ink-muted);
  border-block-end: 2px solid var(--ink-muted);
  transform: rotate(-45deg);
}

/* ---------- objekt cards ------------------------------------------------ */

.objekt,
.list-head {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 9.5rem 7rem 7rem 7rem 0.5rem;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.75rem 1.1rem;
}

.objekt {
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}

@media (hover: hover) {
  .objekt:hover {
    background: var(--paper);
  }
}

.objekt:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.draft {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}

.draft__what {
  min-inline-size: 0;
  margin-inline-end: auto;
}

.draft::after {
  content: '';
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid var(--ink-muted);
  border-block-end: 2px solid var(--ink-muted);
  transform: rotate(-45deg);
}

@media (hover: hover) {
  .draft:hover {
    background: var(--paper);
  }
}

.draft:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.desk-section--first {
  margin-top: 0;
  margin-bottom: 2rem;
}

/* The column names, once, over the rows: each row then carries only its numbers. */
.list-head {
  white-space: nowrap;
  padding-block: 0.55rem;
  background: var(--paper);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.list-head > :first-child {
  grid-column: 2;
}

.list-head > :nth-child(n + 3) {
  justify-self: end;
  text-align: end;
}

.objekt__type {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-small);
  background: var(--sage-soft);
  color: var(--sage-dark);
}

.objekt__type .icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.objekt-list--quiet .objekt__address {
  color: var(--ink-soft);
}

.objekt-list--quiet .objekt__type {
  background: var(--surface-variant);
  color: var(--ink-muted);
}

.objekt__address {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 105%;
}

.objekt__where,
.objekt__age {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.objekt__state {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
}

.objekt__number {
  justify-self: end;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.objekt__unit {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.objekt::after {
  content: '';
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 2px solid var(--ink-muted);
  border-block-end: 2px solid var(--ink-muted);
  transform: rotate(-45deg);
}

/* On a phone the columns have no headings to sit under, so each number names itself. */
@media (max-width: 56rem) {
  .objekt {
    grid-template-columns: 2.25rem repeat(3, minmax(0, 1fr)) 0.5rem;
    align-items: start;
  }

  .objekt__type {
    grid-row: 1 / span 3;
  }

  .objekt__what,
  .objekt__state {
    grid-column: 2 / 5;
  }

  .objekt__state {
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
    gap: 0.6rem;
  }

  .objekt__number {
    grid-row: 3;
    justify-self: start;
    line-height: 1.3;
  }

  .objekt::after {
    grid-column: 5;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .objekt__number {
    font-size: 0.9375rem;
  }

  .objekt__unit {
    position: static;
    display: block;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
    white-space: normal;
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--ink-muted);
  }

  .list-head {
    display: none;
  }
}

/* ---------- pills ------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--surface-variant);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.pill--live {
  background: var(--sage-soft);
  color: var(--sage-dark);
}

.pill--open {
  background: var(--warn-soft);
  color: var(--warn);
}

.pill--quiet {
  background: var(--surface-variant);
  color: var(--ink-muted);
}

.pill .icon {
  inline-size: 0.9rem;
  block-size: 0.9rem;
}

/* ---------- one objekt: the hero, then the work ------------------------- */

.objekt-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  min-block-size: 10rem;
  padding: 1.9rem 1.9rem 1.75rem;
  border-radius: var(--radius);
  background:
    radial-gradient(90% 160% at 92% 8%, rgb(255 255 255 / 0.16), transparent 55%),
    linear-gradient(115deg, var(--sage-dark) 10%, #35604f 90%);
  color: var(--on-sage);
  --focus: #fff;
}

.objekt-hero h1 {
  margin: 0.35rem 0 0;
  color: #fff;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
}

.objekt-hero .label {
  color: var(--on-sage-muted);
}

.objekt-hero__note {
  margin: 0.6rem 0 0;
  color: var(--on-sage-soft);
  font-size: 0.9375rem;
}

.objekt-hero__watermark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1.5rem;
  translate: 0 -50%;
  inline-size: 11rem;
  block-size: 11rem;
  color: #fff;
  opacity: 0.12;
  pointer-events: none;
}

@media (max-width: 40rem) {
  .objekt-hero__watermark {
    display: none;
  }
}

.objekt-hero .pill {
  background: rgb(255 255 255 / 0.18);
  color: #fff;
}

.objekt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}

@media (max-width: 64rem) {
  .objekt-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

.chart {
  margin: 1.25rem 0 0;
}

.chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  block-size: 9rem;
  padding: 0.75rem 0.25rem 0;
  border-bottom: 2px solid var(--line);
}

.chart__day {
  flex: 1;
  display: flex;
  align-items: flex-end;
  block-size: 100%;
  min-inline-size: 0;
}

.chart__bar {
  inline-size: 100%;
  block-size: max(3px, var(--height));
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(to top, var(--sage-dark) 0 var(--taken), var(--sage-light) var(--taken) 100%);
  transform-origin: bottom;
  animation: bar-rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--step, 0) * 22ms);
}

@keyframes bar-rise {
  from {
    transform: scaleY(0.04);
    opacity: 0.4;
  }
}

.chart__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.chart__legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.chart__key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.chart__key::before {
  content: '';
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 3px;
  background: var(--sage-light);
}

.chart__key--taken::before {
  background: var(--sage-dark);
}

/* The code is the thing she prints, so it is shown as the sheet it becomes. */
.code-sheet {
  margin: 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  box-shadow: 0 14px 28px -24px rgb(26 42 36 / 0.9);
  text-align: center;
  font-weight: 600;
  font-stretch: 105%;
}

.code-sheet img {
  inline-size: 100%;
  max-inline-size: 13rem;
  block-size: auto;
}

.code-sheet figcaption {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
}

.objekt-next {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}

.objekt-next--open {
  color: var(--warn);
}

.retire {
  margin-top: 2rem;
}

.retire summary {
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.retire summary:hover {
  color: var(--ink);
}

.retire__form {
  margin-top: 1.25rem;
}

/* ---------- people ------------------------------------------------------ */

.person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  padding: 0.75rem 1.1rem;
}

.person .avatar {
  background: var(--sage-soft);
  color: var(--sage-dark);
  inline-size: 2.25rem;
  block-size: 2.25rem;
}

.person__who {
  min-inline-size: 0;
  margin-inline-end: auto;
}

.byra-logo {
  display: block;
  max-block-size: 2.75rem;
  max-inline-size: 12rem;
  margin-block: 0.75rem 1rem;
  object-fit: contain;
}

.person__name {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 105%;
}

.person__meta {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.person__count {
  display: block;
  font-variant-numeric: tabular-nums;
  font-family: var(--display);
}

/* ---------- the console's working vocabulary --------------------------
   A desk tool, not a landing page. Sections are told apart by a heading and
   whitespace, lists by hairlines inside one sheet, forms by a settings grid:
   what the group is on the left, its fields on the right. Explanations are
   one line where the person acts, never a panel of their own. */

.desk-section {
  margin-top: 2rem;
}

.desk-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.7rem;
}

.desk-section__head h2 {
  margin: 0;
  font-size: 1rem;
  font-stretch: 105%;
  letter-spacing: 0;
}

.desk-section__head p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.fineprint-line {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* ---------- tabs: the areas inside one page ------------------------------ */

.tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.tabs a {
  position: relative;
  padding: 0.6rem 0.8rem 0.75rem;
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.tabs a[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
}

.tabs a[aria-current='page']::after {
  content: '';
  position: absolute;
  inset-inline: 0.8rem;
  inset-block-end: -1px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--sage);
}

@media (hover: hover) {
  .tabs a:hover {
    color: var(--ink);
  }
}

.tabs a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--radius-small);
}

.tabs__flag {
  display: inline-block;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  margin-inline-start: 0.35rem;
  border-radius: 50%;
  background: var(--warn-graphic);
  vertical-align: 0.15em;
}

/* ---------- the settings grid: what the group is, then its fields ------- */

.settings {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.setting {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem 2.5rem;
  padding: 1.5rem 1.5rem 1.6rem;
  margin: 0;
  border: 0;
}

.setting + .setting {
  border-top: 1px solid var(--line);
}

.setting__about h2,
.setting__about legend {
  float: none;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  font-stretch: 105%;
  letter-spacing: 0;
}

.setting__about p {
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.setting__fields {
  display: grid;
  gap: 1rem;
  align-content: start;
  max-inline-size: 36rem;
}

.setting__fields .field {
  margin: 0;
}

.setting__fields .field label,
.setting__fields .field legend {
  font-size: 0.8125rem;
  margin-bottom: 0.3rem;
}

.setting__fields .field__input {
  min-block-size: 3rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.9375rem;
  border-width: 1px;
  border-radius: 8px;
}

.setting__fields .field__note {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.setting__fields .choice,
.drawer__body .choice {
  align-items: center;
  margin-top: 0.35rem;
}

.setting__fields .choice input,
.drawer__body .choice input {
  margin: 0;
}

.shell .field label.choice {
  display: flex;
  font-weight: 400;
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1rem;
}

.field-row--postal {
  grid-template-columns: 8rem minmax(0, 1fr);
}

@media (max-width: 48rem) {
  .setting {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1.25rem;
  }
}

/* Two to five choices that exclude each other: one control, not a column of radio buttons. */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px;
  margin: 0;
  border: 0;
  border-radius: 9px;
  background: var(--surface-variant);
}

.segmented label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.segmented input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.segmented span {
  display: block;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.segmented input:checked + span {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(26 42 36 / 0.18);
}

/* A choice that has to reach the server at once, like the type that decides the questions, is a
   row of submit buttons rather than radios waiting for a second press. */
.segmented button {
  padding: 0.4rem 0.85rem;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
}

.segmented button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(26 42 36 / 0.18);
}

@media (hover: hover) {
  .segmented button[aria-pressed='false']:hover {
    color: var(--ink);
  }
}

.segmented button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.field__label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* The commit of a long form stays in reach: it rides the bottom edge until the form ends. */
.actionbar {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1.25rem;
  background: rgb(255 255 255 / 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 -10px 24px -22px rgb(26 42 36 / 0.9);
  backdrop-filter: blur(6px);
}

.actionbar .actionbar__end {
  margin-inline-start: auto;
}

.actionbar__note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.actionbar .form__problem,
.actionbar .form__done {
  margin: 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.875rem;
}

/* ---------- the roster: one table, one row per person ------------------- */

.with-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.with-panel--open {
  grid-template-columns: minmax(0, 1fr) 23rem;
}

@media (max-width: 70rem) {
  .with-panel--open {
    grid-template-columns: minmax(0, 1fr);
  }

  .with-panel--open .drawer {
    grid-row: 1;
  }
}

.roster {
  inline-size: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.roster th {
  padding: 0.55rem 1rem;
  background: var(--paper);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-align: start;
}

.roster td {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

.roster td.roster__number,
.roster th.roster__number {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.roster tr.here td {
  background: var(--sage-soft);
}

.roster__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-inline-size: 0;
}

.roster__who .avatar {
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 0.75rem;
  background: var(--sage-soft);
  color: var(--sage-dark);
}

.roster__name {
  display: block;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.roster__name::after {
  content: '';
  position: absolute;
  inset: 0;
}

.roster tr {
  position: relative;
}

.roster__email {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.roster__meta {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.roster__open {
  inline-size: 2rem;
  text-align: end;
}

.roster__open::before {
  content: '';
  display: inline-block;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-inline-end: 2px solid var(--ink-muted);
  border-block-end: 2px solid var(--ink-muted);
  transform: rotate(-45deg);
}

@media (hover: hover) {
  .roster tr:has(.roster__name[href]):hover td {
    background: var(--paper);
  }
}

.roster__name:focus-visible {
  outline: none;
}

.roster tr:has(.roster__name:focus-visible) td {
  box-shadow: inset 0 0 0 2px var(--focus);
}

@media (max-width: 44rem) {
  .roster .roster__optional {
    display: none;
  }
}

.tag {
  display: inline-block;
  margin-inline-start: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--sage-soft);
  color: var(--sage-dark);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.1em;
}

/* The side panel edits one row while the table stays in view. */
.drawer {
  position: sticky;
  top: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 36px -30px rgb(26 42 36 / 0.9);
}

.drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--line);
}

.drawer__head h2 {
  margin: 0;
  font-size: 1rem;
  font-stretch: 105%;
  letter-spacing: 0;
}

.drawer__head p {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.drawer__close {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 1.25rem;
  line-height: 1;
}

@media (hover: hover) {
  .drawer__close:hover {
    background: var(--surface-variant);
    color: var(--ink);
  }
}

.drawer__body {
  display: grid;
  gap: 1.1rem;
  padding: 1.1rem 1.25rem 1.25rem;
}

.drawer__body .field {
  margin: 0;
}

.drawer__body .field label,
.drawer__body .field legend {
  font-size: 0.8125rem;
  margin-bottom: 0.3rem;
}

.drawer__body .field__input {
  min-block-size: 3rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.9375rem;
  border-width: 1px;
  border-radius: 8px;
}

.drawer__body .field__note {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.drawer__body .form__problem {
  margin: 0;
}

.drawer__danger {
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--line);
}

.drawer__danger p {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.drawer__danger .button--quiet {
  margin-inline-start: -0.9rem;
}

/* The assistant's mäklare only matter when the person is an assistant. */
.drawer form:has(input[name='Role'][value='Agent']:checked) .only-assistant {
  display: none;
}

.field-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
}

.field-inline .field__input {
  flex: 1 1 14rem;
  inline-size: auto;
}

.setting__fields .candidates {
  margin: 0;
  border-width: 1px;
}

.setting__fields .candidate {
  padding: 0.65rem 0.9rem;
}

.setting__fields .field__chosen {
  margin: 0;
}

/* A viewing is one line: when, then what to know, then the way to take it off. */
.setting .viewing {
  display: grid;
  grid-template-columns: 9.5rem 6.5rem 6.5rem minmax(8rem, 1fr) auto;
  align-items: end;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.viewing__remove {
  margin-block-end: 0.15rem;
  white-space: nowrap;
}

@media (max-width: 56rem) {
  .setting .viewing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-block-end: 0.75rem;
    border-bottom: 1px solid var(--line);
  }

  .viewing__note {
    grid-column: 1 / -1;
  }
}

/* The questions take the whole width beside their category, two to a row, so fifteen
   categories read as a table of contents rather than a column two metres long. */
.setting--questions .setting__fields {
  max-inline-size: none;
}

.questions {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem 1.5rem;
}

.setting__fields .question + .question {
  margin-top: 0;
}

.setting__fields .question {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.setting__fields .question .field__note {
  margin: 0 0 0.35rem;
}

.logo-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-small);
  background: var(--paper);
}

.logo-preview img {
  max-block-size: 2.75rem;
  max-inline-size: 12rem;
  object-fit: contain;
}

.logo-preview span {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .chart__bar {
    animation: none !important;
  }

  .objekt,
  .task a {
    transition: none !important;
  }
}