/*
 * Costa Desk components. Values come from tokens.css only; macros in templates/base/kit/
 * emit this markup. Order: base, brand, kit primitives (buttons, chips and pills, cards,
 * tables, headers, fields, switches and segments, states, overlays), then the shells, login
 * and welcome screens, and last the /dev/kit page layout.
 */

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

:root {
  /* Side gutters clear a system bar at the phone's side. */
  --gutter-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  --gutter-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}

/* Wider gutters from 768px up (a media query cannot read a token). */
@media (min-width: 48rem) {
  :root {
    --gutter-left: max(var(--space-5), env(safe-area-inset-left, 0px));
    --gutter-right: max(var(--space-5), env(safe-area-inset-right, 0px));
  }
}

body {
  margin: 0;
  background: var(--color-sand);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-sea);
}

a:hover {
  color: var(--color-sea-deep);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Dark surfaces need a light focus ring. */
.top,
.p-head,
.login-brand,
.shell-welcome,
.next-step,
.toast,
.kit-night {
  --focus-color: var(--color-gold);
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Wordmark: "Desk" in Fraunces italic, gold */

.wordmark-desk {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-gold);
}

.wordmark-desk-lg {
  font-size: var(--text-4xl);
}

.wordmark-desk-xl {
  font-size: var(--text-display);
}

.brand-lockup {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  max-width: 100%;
}

.brand-lockup-logo {
  flex: 0 1 var(--logo-width);
  min-width: 0;
  width: min(var(--logo-width), 52vw);
  display: block;
}

.brand-lockup-rule {
  flex: none;
  width: var(--hairline);
  height: var(--lockup-rule);
  margin-bottom: var(--space-2);
  background: var(--color-gold-line);
}

.brand-lockup .wordmark-desk {
  flex: none;
  margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------------------------------------
 * Kit primitives. Each block is emitted by a macro in templates/base/kit/.
 * ------------------------------------------------------------------------------------- */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}

.sr-only {
  position: absolute;
  width: var(--hairline);
  height: var(--hairline);
  margin: calc(var(--hairline) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon {
  flex: none;
}

/* Buttons: primary, secondary, ghost, danger, destructive; gold, outline-light and
   text-gold sit on night surfaces; take is the "Biorę" button. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink);
  font: 600 var(--text-base) / 1 var(--font-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.btn-primary,
.btn-take {
  background: var(--color-sea);
  color: var(--color-white);
}

.btn-primary:hover,
.btn-take:hover {
  background: var(--color-sea-deep);
  color: var(--color-white);
}

.btn-take {
  font-weight: 700;
  font-size: var(--text-md);
}

.btn-secondary,
.btn-google {
  background: var(--color-white);
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.btn-secondary:hover,
.btn-google:hover {
  border-color: var(--color-sea);
  color: var(--color-ink);
}

.btn-ghost {
  color: var(--color-sea);
}

.btn-ghost:hover {
  background: var(--color-sea-tint);
  color: var(--color-sea-deep);
}

.btn-danger {
  color: var(--color-urgent);
}

.btn-danger:hover {
  background: var(--color-urgent-tint);
  color: var(--color-urgent);
}

.btn-destructive {
  background: var(--color-urgent);
  color: var(--color-white);
}

.btn-destructive:hover {
  background: var(--color-badge);
  color: var(--color-white);
}

.btn-gold {
  background: var(--color-gold);
  color: var(--color-ink);
  font-weight: 700;
}

.btn-gold:hover {
  background: var(--color-gold-on-light);
  color: var(--color-ink);
}

.btn-outline-light {
  border-color: var(--color-night-rule);
  color: var(--color-on-night-strong);
}

.btn-outline-light:hover {
  background: var(--color-night-hover);
  color: var(--color-on-night-strong);
}

.btn-text-gold {
  color: var(--color-gold);
  font-weight: 700;
}

.btn-text-gold:hover {
  background: var(--color-night-hover);
  color: var(--color-gold);
}

.btn-google {
  width: 100%;
  min-height: var(--tap-wide);
}

.btn-wide {
  width: 100%;
}

/* Contact action: icon above the label, three or four side by side */
.btn-tile {
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--tap-large);
  border-color: var(--color-line-strong);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--text-xs);
}

.btn-tile:hover {
  border-color: var(--color-sea);
}

.tiles {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2);
}

.btn-large {
  min-height: var(--tap-large);
  border-radius: var(--radius-lg);
  font-weight: 700;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  border-color: var(--color-line);
  background: var(--color-line);
  color: var(--color-muted);
  cursor: not-allowed;
}

.btn-ghost:disabled,
.btn-danger:disabled {
  border-color: transparent;
  background: transparent;
}

/* Working: set aria-busy="true", or let htmx add .htmx-request while a request runs. */
.btn[aria-busy="true"],
.btn.htmx-request {
  pointer-events: none;
}

.btn[aria-busy="true"]::before,
.btn.htmx-request::before {
  content: "";
  width: var(--spinner);
  height: var(--spinner);
  border: var(--stroke) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin var(--spin-duration) linear infinite;
}

/* A square 44 px button holding one icon: back, close, more. */
.icon-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
}

.icon-btn:hover {
  border-color: var(--color-sea);
}

/* Next-step quick picks (PhoneCase): a row that scrolls sideways */
.choices {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.choice {
  flex: none;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: var(--hairline) solid var(--color-sea);
  border-radius: var(--radius-pill);
  background: var(--color-sea-tint);
  color: var(--color-sea);
  font: 600 var(--text-sm) / 1 var(--font-text);
  white-space: nowrap;
  cursor: pointer;
}

.choice:hover {
  background: var(--color-white);
}

/* Chips (why this case is here), pills (status) and the count badge */

.chip,
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--chip-height);
  padding: 0 var(--space-3);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-sand);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.pill {
  font-weight: 700;
}

.chip-urgent {
  background: var(--color-urgent-tint);
  color: var(--color-urgent);
}

.chip-today,
.pill-review,
.pill-wait {
  background: var(--color-today-tint);
  color: var(--color-today);
}

.chip-info,
.pill-active {
  background: var(--color-sea-tint);
  color: var(--color-sea);
}

.chip-outline {
  border-color: var(--color-line);
  background: var(--color-white);
}

.pill-inactive {
  background: var(--color-stone);
  color: var(--color-text);
}

.pill-deal {
  background: var(--color-night);
  color: var(--color-gold);
}

.pill-ok {
  background: var(--color-green-tint);
  color: var(--color-green);
}

.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--count-size);
  height: var(--count-size);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-badge);
  color: var(--color-white);
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1;
}

/* Source tiles: where an enquiry came from */

.src {
  display: inline-flex;
  flex: 0 0 var(--source-size);
  align-items: center;
  justify-content: center;
  width: var(--source-size);
  height: var(--source-size);
  border-radius: var(--radius-md);
}

.src-house_hunter {
  background: var(--color-night);
  color: var(--color-gold);
}

.src-web_form,
.src-message {
  background: var(--color-sea-tint);
  color: var(--color-sea);
}

.src-gmail,
.src-manual,
.src-note {
  background: var(--color-today-tint);
  color: var(--color-today);
}

.src-whatsapp {
  background: var(--color-green-tint);
  color: var(--color-green);
}

.src-mls,
.src-next_step {
  background: var(--color-sand-deep);
  color: var(--color-gold-ink);
}

.src-stays,
.src-status {
  background: var(--color-stone);
  color: var(--color-text);
}

/* Avatars: initials in a circle (gold by default) */

.avatar {
  display: inline-flex;
  flex: 0 0 var(--avatar);
  align-items: center;
  justify-content: center;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
}

.avatar-md {
  flex-basis: var(--avatar-md);
  width: var(--avatar-md);
  height: var(--avatar-md);
  font-size: var(--text-sm);
  font-weight: 700;
}

.avatar-lg {
  flex-basis: var(--avatar-lg);
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  font-size: var(--text-lg);
  font-weight: 700;
}

.avatar-sea {
  background: var(--color-sea-tint);
  color: var(--color-sea);
}

.avatar-night {
  background: var(--color-night);
  color: var(--color-white);
}

/* Bands: Pilne, Dziś, Może poczekać */

.band {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
}

.band-urgent {
  color: var(--color-urgent);
}

.band-today {
  color: var(--color-today);
}

.band-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: inherit;
}

.band-count {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.band-rule {
  flex: 1;
  height: var(--hairline);
  background: var(--color-line);
}

/* Case card */

.case {
  overflow: hidden;
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.case-hot {
  border-color: var(--color-urgent-line);
  box-shadow: var(--shadow-raised);
}

.case-open {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

.case-open:hover .case-name {
  color: var(--color-sea);
}

.case-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.case-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.case-name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-time {
  flex: none;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.case-summary {
  overflow: hidden;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* On Teraz the summary may take two lines, so the budget and the place are not cut off. */
.now-list .case-summary {
  display: -webkit-box;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* At most two reasons. A chip is never cut mid-word: the second one drops to a second line
 * when it does not fit beside the first, and only a single chip longer than the card is
 * shortened, with an ellipsis. */
.case-why {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.case-why > .chip:nth-child(n + 3) {
  display: none;
}

.case-why > .chip {
  display: block;
  max-width: 100%;
  overflow: hidden;
  line-height: calc(var(--chip-height) - 2 * var(--hairline));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-why:empty {
  display: none;
}

.case-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-3)
    calc(var(--space-4) + var(--source-size) + var(--space-3));
}

.case-owner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-sea);
}

.case-owner-free {
  color: var(--color-urgent);
}

/* The dark "next step" box on a client */

.next-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-night);
  color: var(--color-on-night);
}

.next-step-body {
  flex: 1;
  min-width: 0;
}

.next-step-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-gold);
}

.next-step-text {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-on-night-strong);
}

.next-step-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Cards, key-value facts */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.card-rows {
  gap: 0;
}

.card.card-rows > * + * {
  border-top: var(--hairline) solid var(--color-line-soft);
}

.card-attention {
  border-color: var(--color-gold-pale);
}

.card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.facts {
  margin: 0;
}

.fact {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-line-soft);
  font-size: var(--text-md);
}

.fact:last-child {
  border-bottom: 0;
}

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

.fact dd {
  margin: 0;
  font-weight: 700;
  color: var(--color-ink);
  text-align: right;
}

/* Table: a card list below 640px. Cells carry data-label; a row's first cell is
   .cell-main, its time or count .cell-aside, anything long .cell-wide. */

.table-scroll {
  overflow-x: auto;
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.table th {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline) solid var(--color-line);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  text-align: left;
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline) solid var(--color-line-soft);
  vertical-align: middle;
}

.table :where(tr:last-child) td {
  border-bottom: 0;
}

.table .cell-main {
  font-weight: 600;
  color: var(--color-ink);
}

.table .cell-main a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: inherit;
  text-decoration: none;
}

.table .cell-main a:hover {
  color: var(--color-sea);
}

.table .cell-note {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
}

@media (max-width: 40rem) {
  .table-scroll {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .table,
  .table tbody {
    display: block;
  }

  .table thead {
    position: absolute;
    clip-path: inset(50%);
  }

  .table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    margin-bottom: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: var(--hairline) solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-white);
  }

  .table td {
    display: block;
    grid-column: 1 / -1;
    padding: 0;
    border: 0;
    font-size: var(--text-sm);
  }

  .table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--color-muted);
  }

  .table td.cell-main {
    grid-column: 1;
    font-size: var(--text-base);
  }

  .table td.cell-aside {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-align: right;
  }

  .table td.cell-main::before,
  .table td.cell-aside::before {
    content: none;
  }
}

/* Page header (desktop) and phone header block */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}

.page-head-text {
  min-width: 0;
}

.page-head .page-title {
  margin: 0;
}

.page-head .page-lead {
  margin-top: var(--space-2);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.p-eyebrow {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.p-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.p-head-row .p-title {
  margin-top: var(--space-1);
}

.p-aside {
  font-size: var(--text-sm);
  text-align: right;
}

.p-aside strong {
  color: var(--color-on-night-strong);
}

.p-head .segmented {
  margin-top: var(--space-3);
}

.back-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.back-bar-meta {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Fields: label, control, hint or error */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.field-optional {
  font-weight: 400;
  color: var(--color-muted);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--field-height);
  padding: 0 var(--space-4);
  border: var(--hairline) solid var(--color-control-edge);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-ink);
  font: 400 var(--text-base) / var(--leading-snug) var(--font-text);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-placeholder);
}

.textarea {
  min-height: var(--field-area);
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}

.select-wrap {
  position: relative;
}

.select {
  padding-right: var(--space-7);
  appearance: none;
  cursor: pointer;
}

.select-wrap .icon {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  translate: 0 -50%;
  color: var(--color-muted);
  pointer-events: none;
}

.input-assisted,
.textarea-assisted {
  border-color: var(--color-sea-line);
  background: var(--color-sea-tint);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--color-urgent);
  box-shadow: 0 0 0 var(--hairline) var(--color-urgent);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--color-sand);
  color: var(--color-muted);
  cursor: not-allowed;
}

.field-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.field-note-assisted {
  color: var(--color-sea);
}

.field-error {
  font-weight: 600;
  color: var(--color-urgent);
}

.field-error .icon {
  margin-top: var(--hairline);
}

/* Checkbox */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-2) 0;
  color: var(--color-ink);
  cursor: pointer;
}

.check input {
  flex: none;
  position: relative;
  width: var(--check-size);
  height: var(--check-size);
  margin: 0;
  border: var(--stroke) solid var(--color-control-edge);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
}

.check input:checked {
  border-color: var(--color-sea);
  background: var(--color-sea);
}

.check input:checked::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 33%;
  width: 28%;
  height: 52%;
  border: solid var(--color-white);
  border-width: 0 var(--stroke) var(--stroke) 0;
  rotate: 45deg;
}

.check input:disabled {
  border-color: var(--color-line);
  background: var(--color-line);
  cursor: not-allowed;
}

.check-text {
  display: flex;
  flex-direction: column;
}

.check-hint {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* Switch: one row, the whole row is the target */

.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--switch-row);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.switch-text {
  flex: 1;
  min-width: 0;
}

.switch-hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.switch-track {
  position: relative;
  flex: 0 0 var(--switch-width);
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--radius-pill);
  background: var(--color-control-edge);
  transition: background-color var(--duration) var(--ease);
}

.switch-track::after {
  content: "";
  position: absolute;
  top: calc((var(--switch-height) - var(--switch-thumb)) / 2);
  left: calc((var(--switch-height) - var(--switch-thumb)) / 2);
  width: var(--switch-thumb);
  height: var(--switch-thumb);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-thumb);
  transition: left var(--duration) var(--ease);
}

.switch[aria-checked="true"] .switch-track {
  background: var(--color-sea);
}

.switch[aria-checked="true"] .switch-track::after {
  left: calc(var(--switch-width) - var(--switch-thumb) - (var(--switch-height) - var(--switch-thumb)) / 2);
}

.switch:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-soft);
}

/* Segmented control: a few exclusive choices, one pressed. */

.segmented {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-sand-deep);
}

.segmented button {
  min-height: var(--tap);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: 600 var(--text-md) / 1 var(--font-text);
  cursor: pointer;
}

.segmented button[aria-pressed="true"] {
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: var(--shadow-thumb);
}

.segmented-night {
  background: var(--color-night-hover);
}

.segmented-night button {
  color: var(--color-on-night);
}

.segmented-night button[aria-pressed="true"] {
  background: var(--color-gold);
  color: var(--color-ink);
  box-shadow: none;
}

.segmented-grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Filters: pills that scroll sideways */
.segmented-filter {
  display: flex;
  gap: var(--space-2);
  padding: 0 0 var(--space-1);
  overflow-x: auto;
  background: transparent;
}

.segmented-filter button {
  flex: none;
  padding: 0 var(--space-4);
  border: var(--hairline) solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: var(--text-sm);
  color: var(--color-ink);
  white-space: nowrap;
}

.segmented-filter button[aria-pressed="true"] {
  border-color: var(--color-sea);
  background: var(--color-sea);
  color: var(--color-white);
  box-shadow: none;
}

/* States: empty and error pages share the panel; loading is a skeleton */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--panel-max);
  margin: var(--space-5) auto;
  padding: var(--space-6) var(--space-5);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  text-align: center;
}

.state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-tile);
  height: var(--icon-tile);
  border-radius: 50%;
  background: var(--color-sea-tint);
  color: var(--color-sea);
}

.state-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-muted);
}

.state-row-icon {
  display: inline-flex;
  flex: none;
  color: var(--color-sea);
}

.state-code {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-gold-ink);
}

.state-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  text-wrap: balance;
}

.state-text {
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
}

.loading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.skeleton-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton {
  border-radius: var(--radius-sm);
  background: var(--color-line);
  animation: pulse var(--pulse-duration) ease-in-out infinite;
}

.skeleton-tile {
  flex: none;
  width: var(--source-size);
  height: var(--source-size);
  border-radius: var(--radius-md);
}

.skeleton-line {
  height: var(--skeleton-line);
}

.skeleton-line-short {
  width: 60%;
}

.inline-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--hairline) solid var(--color-urgent-line);
  border-radius: var(--radius-md);
  background: var(--color-urgent-tint);
  color: var(--color-urgent);
}

.inline-error-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  min-width: 0;
}

.inline-error-title {
  margin: 0;
  font-weight: 700;
}

.inline-error-text {
  margin: 0;
  font-size: var(--text-sm);
}

.inline-error .btn {
  margin-top: var(--space-2);
}

/* Overlays: toast, push banner, dialog */

.toast-region {
  position: fixed;
  top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  right: var(--gutter-right);
  left: var(--gutter-left);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.toast-region > * {
  pointer-events: auto;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--toast-max);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-white);
  box-shadow: var(--shadow-pop);
}

.toast-text {
  min-width: 0;
}

.push {
  display: flex;
  gap: var(--space-3);
  max-width: var(--toast-max);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-pop);
  color: var(--color-ink);
  text-decoration: none;
}

.push-tile {
  display: inline-flex;
  flex: 0 0 var(--source-size);
  align-items: center;
  justify-content: center;
  width: var(--source-size);
  height: var(--source-size);
  border-radius: var(--radius-md);
  background: var(--color-night);
}

.push-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: var(--text-sm);
}

.push-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.push-title {
  font-size: var(--text-md);
}

.dialog {
  width: calc(100% - var(--gutter-left) - var(--gutter-right));
  max-width: var(--dialog-max);
  padding: var(--space-5);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-pop);
  color: var(--color-text);
}

.dialog::backdrop {
  background: var(--color-scrim);
}

.dialog-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.dialog-body {
  margin: 0 0 var(--space-5);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* The open preview on /dev/kit: rendered in the page flow, not as a modal. */
.dialog-preview[open] {
  position: static;
  width: 100%;
  margin: 0;
}

@media (max-width: 40rem) {
  .dialog:not(.dialog-preview) {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .dialog-actions {
    flex-direction: column-reverse;
  }

  .dialog-actions .btn {
    width: 100%;
  }
}

/* Desktop shell */

.top {
  background: var(--color-night);
}

.top-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter-right) var(--space-3) var(--gutter-left);
}

.logo,
.bare-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  text-decoration: none;
}

.logo .wordmark-desk {
  padding-left: var(--space-3);
  border-left: var(--hairline) solid var(--color-night-rule);
  font-size: var(--text-wordmark);
}

.nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-on-night);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
}

.nav a .count {
  margin-left: var(--space-2);
}

.nav a:hover {
  background: var(--color-night-hover);
  color: var(--color-on-night-strong);
}

.nav a[aria-current] {
  background: var(--color-gold-tint);
  color: var(--color-gold);
  font-weight: 600;
}

.who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-on-night);
  font-size: var(--text-sm);
}

.who-title {
  color: var(--color-on-night);
  opacity: var(--opacity-soft);
}

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter-right) var(--space-8) var(--gutter-left);
}

.page-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.page-lead {
  max-width: var(--measure);
  margin: 0;
}

.page-foot {
  padding: 0 var(--gutter-right) var(--space-6) var(--gutter-left);
  text-align: center;
}

.page-foot a,
.p-switch a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--text-md);
}

/* Phone shell */

.shell-phone {
  min-height: 100dvh;
}

.p-head {
  padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--gutter-right) var(--space-4)
    var(--gutter-left);
  background: var(--color-night);
  color: var(--color-on-night);
}

.p-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.p-wordmark {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
  color: var(--color-gold);
}

.p-title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-on-night-strong);
}

.p-main {
  padding: var(--space-3) var(--gutter-right)
    calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + var(--space-5)) var(--gutter-left);
  font-size: var(--text-md);
}

.p-switch {
  margin: var(--space-4) 0 0;
  text-align: center;
}

.tabs {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-tabs);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--space-2) var(--gutter-right) calc(var(--space-2) + env(safe-area-inset-bottom, 0px))
    var(--gutter-left);
  border-top: var(--hairline) solid var(--color-line);
  background: var(--color-white);
}

.tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--tabbar-height);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-decoration: none;
}

.tabs a[aria-current] {
  color: var(--color-sea);
}

.tab-icon {
  position: relative;
  display: inline-flex;
}

.tab-count {
  position: absolute;
  bottom: 50%;
  left: 50%;
}

/* Bare shell: signed out, no navigation */

.shell-bare .bare {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter-right) var(--space-8) var(--gutter-left);
}

.bare-logo {
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-night);
  --focus-color: var(--color-gold);
}

.bare-logo .wordmark-desk {
  padding-left: var(--space-3);
  border-left: var(--hairline) solid var(--color-night-rule);
  font-size: var(--text-wordmark);
}

/* Login (desktop) */

.login {
  display: flex;
  flex-wrap: wrap;
  min-height: 100dvh;
}

.login-brand {
  display: flex;
  flex: 1 1 var(--login-pane);
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  min-width: 0;
  padding: var(--space-8) var(--gutter-right) var(--space-8) max(var(--space-7), var(--gutter-left));
  background: var(--color-night);
  color: var(--color-on-night);
}

.login-lead {
  max-width: var(--lead-max);
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-on-night-strong);
}

.login-pane {
  display: flex;
  flex: 1 1 var(--login-pane);
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--space-8) var(--gutter-right) var(--space-8) var(--gutter-left);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--form-max);
}

.login-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.login-note,
.login-hint {
  margin: 0;
}

.login-hint {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Welcome (phone, signed out) */

.shell-welcome {
  min-height: 100dvh;
  background: var(--color-night);
  color: var(--color-on-night);
}

.welcome {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 100dvh;
  max-width: var(--panel-max);
  margin: 0 auto;
  padding: calc(var(--space-8) + env(safe-area-inset-top, 0px)) var(--gutter-right)
    calc(var(--space-6) + env(safe-area-inset-bottom, 0px)) var(--gutter-left);
}

.welcome-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.welcome-lead {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-on-night-strong);
}

.welcome-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-on-night-strong);
  font-size: var(--text-md);
}

.welcome-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.welcome-points svg {
  flex: 0 0 auto;
  margin-top: var(--hairline);
  color: var(--color-gold);
}

.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.welcome-note {
  margin: 0;
  font-size: var(--text-sm);
  text-align: center;
}

/* Second welcome step: the notification ask */

.welcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: var(--icon-tile);
  height: var(--icon-tile);
  border-radius: var(--radius-lg);
  background: var(--color-gold-tint);
  color: var(--color-gold);
}

.welcome-text {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-on-night-strong);
}

/* Account and device list (phone Konto, desktop Ustawienia) */

.account-card {
  flex-direction: row;
  align-items: center;
}

.account-who {
  min-width: 0;
}

.account-who .card-title {
  overflow-wrap: anywhere;
}

.account-meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.account-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.device-list {
  margin: 0;
  list-style: none;
}

.device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.device-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* The button stays on the row, at the end; its words wrap before the row does. */
.device .btn {
  flex: 0 1 auto;
  max-width: 45%;
  padding-block: var(--space-2);
  line-height: var(--leading-snug);
  text-align: center;
  white-space: normal;
}

.device-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-ink);
}

.device-until {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* /dev/kit: the page that shows every primitive in every state */

.kit {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.kit-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.kit-title {
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline) solid var(--color-line);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.kit .state {
  margin: 0;
}

.kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kit-column)), 1fr));
  gap: var(--space-5) var(--space-4);
}

.kit-sample {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.kit-caption {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
}

.kit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.kit-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kit-night {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-night);
  color: var(--color-on-night);
}

.kit-sources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kit-column-narrow)), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit-sources li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--color-ink);
}

/* ---------------------------------------------------------------------------------------
 * Teraz (F-1008): the case list, its header and the next-step sheet that "Biorę" opens.
 * Tokens only. The sheet sits outside the polled list, above the phone tab bar.
 * ------------------------------------------------------------------------------------- */

.now-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: calc(var(--measure) * 1.5);
}

.now-list-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.now-head .segmented {
  max-width: var(--measure);
}

.now-head-desktop .segmented {
  margin-bottom: var(--space-4);
}

.next-sheet {
  position: sticky;
  bottom: var(--space-4);
  z-index: var(--z-tabs);
}

.shell-phone .next-sheet {
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + var(--space-5) + var(--space-3));
}

.next-sheet:empty {
  display: none;
}

.next-sheet:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: calc(var(--measure) * 1.5);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-pop);
}

.next-sheet p {
  margin: 0;
}

.next-sheet-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-gold-ink);
}

.next-sheet-for {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}

.next-sheet .choices {
  flex-wrap: wrap;
  overflow: visible;
}

.choice[aria-pressed="true"] {
  background: var(--color-sea);
  color: var(--color-white);
}

.next-sheet-saved {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-green);
}

.next-sheet-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Client card (F-1012): layout glue for the phone and desktop card, from tokens only. */

/* Vertical rhythm of a screen made of cards and forms. */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* Buttons or pills side by side, wrapping. */

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Desktop card: the main column and a side column of fixed width. */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.split > * {
  min-width: 0;
}

.split .stack {
  gap: var(--space-4);
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--side-column));
    align-items: start;
  }
}

/* One entry of a client's timeline: the source tile and its text. */

.entry {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.entry-body {
  flex: 1;
  min-width: 0;
}

.entry-title {
  color: var(--color-ink);
}

.entry-text {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.card.card-rows > .entry ~ .btn {
  margin-top: var(--space-2);
  border-top: 0;
}

/* The empty next-step box and the note form read as part of the same column. */

.next-step-actions .btn {
  min-height: var(--tap);
}

.stack > .field-note {
  margin-top: calc(var(--space-2) * -1);
}

/* Client card: the name and what the client wants, under the back bar on the phone. */

.card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.card-wish {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* Client card: one-line note with Zapisz and the microphone beside it. */

.note-row {
  display: flex;
  gap: var(--space-2);
}

.note-row .input {
  flex: 1;
  min-width: 0;
}

.note-row .btn {
  flex: none;
  min-height: var(--field-height);
}

.btn-icon {
  width: var(--field-height);
  padding: 0;
}

/* Client card: the chosen status is solid teal, as on the board. */

.client-status .segmented button[aria-pressed="true"] {
  background: var(--color-sea);
  color: var(--color-white);
  box-shadow: none;
}

/* Client card: the menu sheet lists its actions top to bottom, Zamknij last. */

.client-menu .dialog-actions {
  flex-direction: column;
}

/* Clients list (F-1013): search, review banner, rows, the desktop table and the review.
   Tokens only; everything here is glue between kit pieces. */

.search {
  position: relative;
}

.search-icon {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  display: flex;
  color: var(--color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-input {
  padding-left: calc(var(--space-3) + var(--space-5) + var(--space-1));
}

.review-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-night);
  color: var(--color-on-night);
  text-decoration: none;
}

.review-banner:hover {
  color: var(--color-on-night);
}

.review-banner .icon {
  flex: none;
  color: var(--color-gold);
}

.review-banner-count {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-md);
  background: var(--color-gold);
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 700;
}

.review-banner-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: var(--text-sm);
}

.review-banner-title {
  color: var(--color-on-night-strong);
  font-size: var(--text-md);
}

.client-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.client-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-text);
  text-decoration: none;
}

.client-row:hover {
  color: var(--color-text);
}

.client-row-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.client-row-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-md);
}

.client-row-lock {
  display: flex;
  color: var(--color-gold-ink);
}

.client-row-step {
  overflow: hidden;
  color: var(--color-sea);
  font-size: var(--text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-row-when {
  flex: none;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* "Brak następnego kroku" is red on the list and in the table. */
.step-none {
  color: var(--color-badge);
  font-weight: 600;
}

.owner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The kit keeps a card list's header for screen readers; the cells carry their labels. */
@media (max-width: 40rem) {
  .clients-table thead {
    display: none;
  }
}

.review-eyebrow {
  margin: 0;
  color: var(--color-today);
  font-size: var(--text-sm);
  font-weight: 700;
}

.review-later {
  display: flex;
  flex: none;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
  text-decoration: none;
}

.review-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-ink);
}

.review-who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.review-name {
  display: block;
  color: var(--color-ink);
  font-size: var(--text-lg);
}

.review-owner {
  font-size: var(--text-xs);
}

/* The decisions stay above the tab bar, whatever the length of the card. */
.review-actions {
  position: sticky;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + var(--space-5));
  z-index: var(--z-tabs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  background: var(--color-sand);
}

.review-open {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: var(--space-2);
  font-weight: 600;
}

.review-band {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-today-tint);
}

.review-band > p {
  margin: 0;
}

.review-band-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink);
}

.review-band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border: var(--hairline) solid var(--color-gold-pale);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.review-band-who {
  display: flex;
  flex: 1 1 var(--form-max);
  flex-direction: column;
  min-width: 0;
}

.review-band-name {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}

.review-band-meta {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* Cofnij stays ten seconds, then the toast goes (the server allows a little longer). */
.review-toast {
  --undo-window: 10s;
}

.review-toast .toast {
  animation: review-toast-expire 0s linear var(--undo-window) forwards;
}

@keyframes review-toast-expire {
  to {
    visibility: hidden;
  }
}

/* Password sign-in: the e-mail and password form, and "Zmień hasło" on the account screens */

.sign-in-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* On the dark welcome screen the labels need the light ink. */
.sign-in-form-night .field-label {
  color: var(--color-on-night-strong);
}

.password-form {
  gap: var(--space-4);
  max-width: var(--form-max);
}

.password-done {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--color-sea-line);
  border-radius: var(--radius-md);
  background: var(--color-sea-tint);
  font-weight: 600;
  color: var(--color-sea);
}

/* A short phone screen keeps the form in view: the three points make way for it. */
@media (max-height: 52rem) {
  .shell-welcome .welcome-points {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------
 * Case page (F-1009): the case, its spam list and the form "Nowa sprawa". Tokens only.
 * It leans on the glue of the client card above (.stack, .row, .split, .card-name).
 * ------------------------------------------------------------------------------------- */

/* Teraz: the link to the spam list under the cases. */

.now-foot {
  margin: var(--space-4) 0 0;
}

/* The name and who has the case. */

.case-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-title .card-name {
  overflow-wrap: anywhere;
}

.case-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-take {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-take .btn {
  width: 100%;
}

/* On the phone "Biorę" and, once the case is taken, the next-step chips sit in a bar above the
 * tab bar, in reach of the thumb (board PhoneCase). The page keeps room below its content so
 * nothing hides under the bar. */
.shell-phone .case-page {
  padding-bottom: calc(var(--tap-large) + var(--space-8) + var(--space-5));
}

.shell-phone .case-take,
.shell-phone .case-page .next-sheet:not(:empty) {
  --bar-side-left: max(var(--gutter-left), env(safe-area-inset-left, 0px));
  --bar-side-right: max(var(--gutter-right), env(safe-area-inset-right, 0px));
  position: fixed;
  right: 0;
  bottom: calc(var(--tabbar-height) + var(--space-4) + var(--hairline) + env(safe-area-inset-bottom, 0px));
  left: 0;
  z-index: var(--z-tabs);
  max-width: none;
  max-height: 50vh;
  padding: var(--space-3) var(--bar-side-right) var(--space-3) var(--bar-side-left);
  overflow-y: auto;
  border: 0;
  border-top: var(--hairline) solid var(--color-line);
  border-radius: 0;
  background: var(--color-white);
  box-shadow: none;
}

.shell-phone .case-page .next-sheet .choices {
  flex-wrap: nowrap;
}

.case-state-line {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.case-state-free .case-state-line {
  color: var(--color-urgent);
}

.case-state-mine .case-state-line {
  color: var(--color-sea);
}

.case-state-hint {
  margin: 0;
  font-size: var(--text-xs);
  text-align: center;
  color: var(--color-muted);
}

/* The one-sentence summary, the source line on the desktop and the quiet notes. */

.case-lead {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.case-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.case-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* The message: an excerpt, and the whole original behind a details element. */

.case-quote {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-sand);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.case-more summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-sea);
  cursor: pointer;
}

.case-original {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Why the case is where it is: one reason per line. */

.case-reasons {
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-reason {
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-line-soft);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.case-reason:last-child {
  border-bottom: 0;
}

/* A toast replaces its slot: the slot itself takes no room. */

.toast-slot {
  display: contents;
}

/* The spam list: one row per case, "Przywróć" at its end. */

.spam-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.spam-open {
  display: flex;
  flex: 1 1 12rem;
  gap: var(--space-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.spam-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.spam-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}

.spam-summary {
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The form "Nowa sprawa": "Moja" or "Wspólna" as two radio buttons that look like a segment. */

.add-form {
  max-width: var(--panel-max);
}

.add-form .btn {
  width: 100%;
}

.owner-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.owner-choice legend {
  margin-bottom: var(--space-2);
  padding: 0;
}

.owner-choice-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-sand-deep);
}

.owner-choice-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: 600 var(--text-md) / 1 var(--font-text);
  cursor: pointer;
}

.owner-choice-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.owner-choice-option:has(input:checked) {
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: var(--shadow-thumb);
}

.owner-choice-option:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Teraz on the desktop: the list and, from 900px, the case panel beside it. */

.now-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
}

.now-cards {
  display: contents;
}

.now-main {
  flex: 999 1 36rem;
  min-width: 0;
}

.now-main .now-list {
  max-width: none;
}

.case-panel-host {
  position: sticky;
  top: var(--space-4);
  flex: 1 1 26rem;
  min-width: 0;
  max-height: calc(100vh - var(--space-6));
  padding: var(--space-5);
  overflow-y: auto;
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.case-panel-host:empty {
  display: none;
}

/* The row whose case the panel shows. */
.case.item-on {
  border-color: var(--color-sea);
  box-shadow: 0 0 0 var(--hairline) var(--color-sea);
}

.case-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}