/* ==========================================================================
   SEEYOUSOON — «Mina behov»: the kit's look (round 47, docs/mina-behov/CONTRACT.md §6, spec §3 «Visual style»)
   Hand-written, linked once from index.html. The provider card «Kundens önskemål» (js/core/needs-card.js), the booking's
   share row (needs-share-row.js), the customer's chip (needs-status-chip.js) and the 112/1177 footer.
   - The app's Level-2 glass on contract C3's staircase (css/tokens.css): dark obsidian by default, paper under «Ljus»
     (html[data-apple-theme="light"], and html[data-theme="light"]), through the --sys-* tokens.
   - One calm accent: the system green at low alpha, for the line icons, «Läst ✓» and a chosen reply. No red anywhere on the
     customer's side; the kitchen's block alone has an amber edge (needs-card--kitchen), legible in both themes.
   - Large type (body 17 px, nothing under 15 px), hairline borders, WCAG AA in both themes.
   - Logical properties only, so Arabic (dir="rtl") mirrors by itself.
   - Motion: 200 ms ease-out fades and the switch's slide, never under the phone's «reduce motion» or the app's «Lugnare
     rörelser» (html.a11y-calm). tests/unit/needs-kit.test.mjs reads this file.
   ========================================================================== */

.needs-kit {
  --needs-green-ink: #30D158;
  --needs-green-soft: rgba(48, 209, 88, 0.14);
  --needs-green-edge: rgba(48, 209, 88, 0.34);
  --needs-green-fill: rgba(48, 209, 88, 0.66);
  --needs-on-fill: #FFFFFF;
  --needs-thumb: #FFFFFF;
  --needs-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --needs-amber-edge: #FFB340;
  --needs-amber-soft: rgba(255, 179, 64, 0.08);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
  color: var(--sys-label);
  text-align: start;
  -webkit-tap-highlight-color: transparent;
}
html:is([data-theme="light"], [data-apple-theme="light"]) .needs-kit {
  --needs-green-ink: #1F7A35;
  --needs-green-soft: rgba(36, 138, 61, 0.1);
  --needs-green-edge: rgba(36, 138, 61, 0.32);
  --needs-green-fill: #2E9E4F;
  --needs-thumb-shadow: 0 1px 3px rgba(5, 5, 16, 0.22);
  --needs-amber-edge: #B45309;
  --needs-amber-soft: rgba(180, 83, 9, 0.06);
}
.needs-kit[lang="ar"] {
  font-family: var(--font-arabic);
  line-height: 1.6;
}
.needs-kit,
.needs-kit *,
.needs-kit *::before,
.needs-kit *::after {
  box-sizing: border-box;
}
/* a part the kit hides stays hidden, whatever display its class gives it */
.needs-kit[hidden],
.needs-kit [hidden] {
  display: none !important;
}
.needs-kit .needs-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}
.needs-kit .needs-icon__svg {
  display: block;
}
.needs-kit :is(button, a, input):focus-visible {
  outline: 2px solid var(--needs-green-ink);
  outline-offset: 2px;
}

/* ── The glass (Level 2): the card, the share row, the chip ──────────────── */
.needs-kit:is(.needs-card, .needs-share, .needs-status) {
  background: var(--glass-l2-bg);
  -webkit-backdrop-filter: blur(var(--glass-l2-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-l2-blur)) saturate(180%);
  border: 1px solid var(--sys-edge);
  box-shadow: var(--glass-specular-top), 0 10px 28px var(--sys-shadow);
}

/* ── «Kundens önskemål» ─────────────────────────────────────────────────── */
.needs-kit.needs-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block: 12px;
  padding-block: 16px;
  padding-inline: 16px;
  border-radius: var(--radius-lg);
}
.needs-kit.needs-card--preview {
  border-style: dashed;
}
.needs-kit.needs-card--quiet {
  padding-block: 12px;
  box-shadow: var(--glass-specular-top);
}
.needs-kit.needs-card--kitchen {
  border: 2px solid var(--needs-amber-edge);
  background-image: linear-gradient(var(--needs-amber-soft), var(--needs-amber-soft));
}
.needs-kit .needs-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.needs-kit .needs-card__mark,
.needs-kit .needs-share__mark {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 12px;
  background: var(--needs-green-soft);
  color: var(--needs-green-ink);
}
.needs-kit .needs-card__title {
  flex: 1;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
.needs-kit .needs-card__tag {
  flex: none;
  padding-block: 2px;
  padding-inline: 10px;
  border: 1px solid var(--sys-edge);
  border-radius: var(--radius-pill);
  color: var(--sys-label-2);
  font-size: 15px;
  font-weight: 600;
}
.needs-kit :is(.needs-card__caption, .needs-card__group) {
  margin: 0;
  color: var(--sys-label-2);
  font-size: 15px;
}
.needs-kit .needs-card__group {
  font-weight: 700;
}
.needs-kit .needs-card__lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.needs-kit .needs-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.needs-kit .needs-line__icon {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 12px;
  background: var(--needs-green-soft);
  color: var(--needs-green-ink);
}
.needs-kit .needs-line__words {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
  padding-block-start: 5px;
}
.needs-kit .needs-line__text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.needs-kit :is(.needs-line__sv, .needs-share__sv, .needs-share__hint) {
  color: var(--sys-label-2);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.needs-kit .needs-card__note {
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--needs-green-edge);
}
.needs-kit .needs-card__label {
  margin: 0;
  color: var(--sys-label-2);
  font-size: 15px;
  font-weight: 600;
}
.needs-kit :is(.needs-card__quote, .needs-share__quote) {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.needs-kit .needs-card__air {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding-block: 10px;
  padding-inline: 12px;
  border-radius: 14px;
  background: var(--sys-film);
  font-size: 15px;
}
.needs-kit .needs-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.needs-kit .needs-card__done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 48px;
  margin: 0;
  padding-inline: 16px;
  border-radius: var(--radius-pill);
  background: var(--needs-green-soft);
  color: var(--needs-green-ink);
  font-weight: 600;
}
.needs-kit .needs-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.needs-kit :is(.needs-card__sent, .needs-card__status, .needs-status__msg) {
  margin: 0;
  color: var(--sys-label-2);
  font-size: 15px;
}
.needs-kit .needs-card__quiet {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--sys-label-2);
  font-size: 16px;
}
.needs-kit .needs-card__help {
  padding-block-start: 4px;
  border-block-start: 1px solid var(--sys-hairline);
}

/* ── Buttons, chips and the quiet link ───────────────────────────────────── */
.needs-kit .needs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 48px;
  margin: 0;
  padding-block: 10px;
  padding-inline: 18px;
  border: 1px solid var(--sys-edge);
  border-radius: var(--radius-pill);
  background: var(--sys-film);
  color: var(--sys-label);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}
.needs-kit .needs-btn--primary {
  inline-size: 100%;
  border-color: var(--needs-green-edge);
  background: var(--needs-green-soft);
  color: var(--needs-green-ink);
}
.needs-kit .needs-btn--quiet {
  background: transparent;
}
.needs-kit .needs-help__call {
  border-color: var(--needs-green-edge);
}
.needs-kit .needs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  margin: 0;
  padding-block: 8px;
  padding-inline: 14px;
  border: 1px solid var(--sys-edge);
  border-radius: var(--radius-pill);
  background: var(--sys-film);
  color: var(--sys-label);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: start;
  cursor: pointer;
}
.needs-kit .needs-chip__tick {
  display: none;
}
.needs-kit .needs-chip[aria-pressed="true"] {
  border-color: var(--needs-green-edge);
  background: var(--needs-green-soft);
  color: var(--needs-green-ink);
}
.needs-kit .needs-chip[aria-pressed="true"] .needs-chip__tick {
  display: inline-flex;
}
.needs-kit .needs-chip[data-armed] {
  border-color: var(--needs-amber-edge);
}
.needs-kit .needs-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-block-size: 44px;
  margin: 0;
  padding-block: 0;
  padding-inline: 2px;
  border: 0;
  background: none;
  color: var(--needs-green-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.needs-kit :is(button, a)[aria-busy="true"] {
  opacity: 0.6;
}

/* ── The share row ───────────────────────────────────────────────────────── */
.needs-kit.needs-share {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 14px;
  padding-inline: 16px;
  border-radius: 18px;
}
.needs-kit .needs-share__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.needs-kit .needs-share__titles {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.needs-kit .needs-share__title {
  margin: 0;
  color: var(--sys-label-2);
  font-size: 15px;
  font-weight: 700;
}
.needs-kit .needs-share__with {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.needs-kit .needs-share__other {
  margin: 0;
  color: var(--sys-label-2);
  font-size: 16px;
}
.needs-kit .needs-share__summary {
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.needs-kit .needs-share__sub {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--sys-label-2);
  font-size: 15px;
}
.needs-kit .needs-share__pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  padding-block-start: 6px;
  border-block-start: 1px solid var(--sys-hairline);
  list-style: none;
}
.needs-kit .needs-share__tick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-block-size: 48px;
  padding-block: 10px;
  cursor: pointer;
}
.needs-kit .needs-share__icon {
  color: var(--needs-green-ink);
}
.needs-kit .needs-share__words {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.needs-kit .needs-share__text {
  font-size: 17px;
  line-height: 1.35;
}

/* the switch: a real checkbox (role="switch"), drawn.
   input[type="checkbox"] in its selectors and the tick's: the forms preflight of css/stitch/_base.css ([data-screen]
   [type='checkbox'], linked after this file by the runtime) weighs as much as a plain .needs-kit .needs-switch, so on every
   booking screen it drew its own 16 px white square under the thumb, blue with its own tick when on. With the element and
   its type the kit's rules outweigh it in every state (its heaviest is :checked:focus). */
.needs-kit input[type="checkbox"].needs-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  inline-size: 52px;
  block-size: 32px;
  margin: 0;
  border: 1px solid var(--sys-edge);
  border-radius: var(--radius-pill);
  background: var(--sys-film-strong);
  cursor: pointer;
}
.needs-kit .needs-switch::before {
  content: '';
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: var(--needs-thumb);
  box-shadow: var(--needs-thumb-shadow);
}
.needs-kit input[type="checkbox"].needs-switch:checked {
  border-color: transparent;
  background: var(--needs-green-fill);
}
.needs-kit .needs-switch:checked::before {
  translate: 20px 0;
}
.needs-kit[dir="rtl"] .needs-switch:checked::before,
[dir="rtl"] .needs-kit .needs-switch:checked::before {
  translate: -20px 0;
}
/* a line's tick: a real checkbox, drawn */
.needs-kit input[type="checkbox"].needs-check {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  flex: none;
  place-content: center;
  inline-size: 26px;
  block-size: 26px;
  margin: 0;
  margin-block-start: 2px;
  border: 2px solid var(--sys-label-3);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.needs-kit input[type="checkbox"].needs-check:checked {
  border-color: transparent;
  background: var(--needs-green-fill);
}
.needs-kit .needs-check:checked::after {
  content: '✓';
  color: var(--needs-on-fill);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
/* the preflight's focus ring (white and blue, after every tap) is not the kit's: the keyboard's focus keeps the kit's outline */
.needs-kit input[type="checkbox"]:is(.needs-switch, .needs-check):focus {
  box-shadow: none;
}
.needs-kit input[type="checkbox"]:is(.needs-switch, .needs-check):focus-visible {
  outline: 2px solid var(--needs-green-ink);
  outline-offset: 2px;
}

/* ── The customer's chip ─────────────────────────────────────────────────── */
.needs-kit.needs-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block: 8px;
  padding-block: 12px;
  padding-inline: 14px;
  border-radius: 18px;
}
.needs-kit.needs-status--answered {
  border-color: var(--needs-green-edge);
}
.needs-kit .needs-status__line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.needs-kit.needs-status--answered .needs-status__line {
  color: var(--needs-green-ink);
}
.needs-kit:is(.needs-status--ended, .needs-status--deleted, .needs-status--stopped) .needs-status__line {
  color: var(--sys-label-2);
  font-weight: 500;
}
.needs-kit .needs-status__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ── «Vid fara för liv: ring 112. …» ─────────────────────────────────────── */
.needs-kit.needs-help {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 12px;
}
.needs-kit .needs-help__text {
  margin: 0;
  color: var(--sys-label-2);
  font-size: 15px;
  line-height: 1.5;
}
.needs-kit .needs-help__calls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Motion: only when it is welcome ─────────────────────────────────────── */
@keyframes needs-rise {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.a11y-calm) .needs-kit.needs-card--enter {
    animation: needs-rise 200ms ease-out both;
  }
  html:not(.a11y-calm) .needs-kit .needs-switch,
  html:not(.a11y-calm) .needs-kit .needs-check,
  html:not(.a11y-calm) .needs-kit .needs-chip,
  html:not(.a11y-calm) .needs-kit .needs-btn {
    transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, scale 180ms ease-out;
  }
  html:not(.a11y-calm) .needs-kit .needs-switch::before {
    transition: translate 200ms ease-out;
  }
  html:not(.a11y-calm) .needs-kit :is(.needs-btn, .needs-chip):active {
    scale: 0.98;
  }
}

/* ── Windows' high contrast and the like: the drawn controls keep an edge ─── */
@media (forced-colors: active) {
  .needs-kit :is(.needs-chip, .needs-btn),
  .needs-kit input[type="checkbox"]:is(.needs-switch, .needs-check) {
    border: 1px solid CanvasText;
  }
  .needs-kit .needs-switch::before {
    background: CanvasText;
  }
}

/* ── A screen's own host for a kit part (data-needs-host: the taxi's chip on C3–C5, the report on C4.foraren-avbokade):
   the chip keeps its room from the cards around it; the provider card has its own ── */
[data-needs-host]:not([hidden]) > .needs-kit.needs-status {
  margin-block: 12px;
}