/* Gachi stylesheet: components.css. UI-refresh building blocks (handoff steg 3). */
/* Loads after the screen files and before interactions.css, so a block style wins over a screen
   file on equal specificity; screen files must not restyle these classes (pick a size, never a value).
   Values come from handoff/HANDOFF-tillagg.md §5 and Slutrapport §3. Legacy classes are aliased here
   (.primary-button = .key, .secondary-link = .outline look, .dashboard-floater-card = .panel--floating,
   .dashboard-floater-close = .icon-btn, .dashboard-floater-overlay = scrim) and their old visual
   declarations are removed from the legacy files, so each look is declared once. Pressed and disabled
   states live in interactions.css. */

/* ------------------------------ */
/* Key: the primary tangent. Concave face, light rim, hard socket. */
/* ------------------------------ */
.key,
.primary-button {
  --socket: 5px;
  --key-inset:
    inset 0 3px 5px rgba(23, 53, 47, 0.3),
    inset 0 10px 14px -8px rgba(23, 53, 47, 0.35),
    inset 0 -3px 0 rgba(255, 255, 255, 0.4);
  --key-lift:
    0 7px 2px rgba(11, 32, 34, 0.25),
    0 12px 18px rgba(11, 32, 34, 0.4);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--key-h-lg);
  padding: 0 18px;
  border: 1px solid var(--key-rim);
  border-radius: var(--radius-key);
  background: radial-gradient(115% 150% at 50% 42%, var(--key-1) 0%, var(--key-2) 46%, var(--key-3) 100%);
  color: var(--on-key);
  font-size: var(--text-17);
  font-weight: 800; /* handoff keys: 17px/800; at 700 a key read thinner than the raised button under it */
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow:
    var(--key-inset),
    0 var(--socket) 0 var(--key-socket),
    var(--key-lift);
  cursor: pointer;
}

.key--xl {
  min-height: var(--key-h-xl);
  font-size: var(--text-19);
}

.key:active,
.key.is-pressing,
.primary-button:active,
.primary-button.is-pressing {
  --key-inset:
    inset 0 5px 8px rgba(23, 53, 47, 0.4),
    inset 0 -2px 0 rgba(255, 255, 255, 0.25);
  --key-lift: 0 3px 8px rgba(11, 32, 34, 0.35);
}

.key:focus-visible,
.primary-button:focus-visible {
  outline: 2px solid var(--accent-sage);
  outline-offset: 3px;
}

/* Destructive key: same shape, coral contour and text, dark coral socket. */
.key--danger,
.primary-button.is-danger {
  --key-inset:
    inset 0 3px 5px rgba(60, 18, 14, 0.35),
    inset 0 -3px 0 rgba(255, 255, 255, 0.08);
  --key-lift:
    0 7px 2px rgba(11, 32, 34, 0.2),
    0 12px 18px rgba(11, 32, 34, 0.32);
  border-color: var(--risk);
  background: radial-gradient(115% 150% at 50% 42%, rgba(242, 134, 124, 0.16) 0%, rgba(242, 134, 124, 0.08) 60%, rgba(242, 134, 124, 0.14) 100%), var(--surface-2);
  color: var(--risk);
  text-shadow: none;
  box-shadow:
    var(--key-inset),
    0 var(--socket) 0 var(--risk-socket),
    var(--key-lift);
}

/* ------------------------------ */
/* Outline: secondary action on the app surface (Start: Spela själv). */
/* ------------------------------ */
.outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--key-h-lg);
  padding: 0 18px;
  border-radius: var(--radius-key);
  font-size: var(--text-17);
  font-weight: 700;
  line-height: 1.1;
}

.outline,
.secondary-link {
  border: 2px solid rgba(var(--creme-rgb), 0.5);
  background: transparent;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}

/* Small outlined pill for screen corners, flat like Tipsa Gachi (Sudden 2.0): QR here, and the language key
   in i18n.js with the same values. */
.outline--pill {
  position: relative;
  min-height: 34px;
  padding: 0 14px;
  border-width: 1px;
  border-color: rgba(var(--creme-rgb), 0.22);
  border-radius: 999px;
  font-size: var(--text-14);
  font-weight: 700;
}

.outline:focus-visible,
.secondary-link:focus-visible {
  outline: 2px solid var(--accent-sage);
  outline-offset: 3px;
}

.outline:active,
.outline.is-pressing,
.secondary-link:active,
.secondary-link.is-pressing {
  background: rgba(var(--creme-rgb), 0.08);
  border-color: rgba(var(--creme-rgb), 0.7);
}

/* ------------------------------ */
/* Raised: secondary tangent with crème text and a socket (list rows, Kopiera länk, ikonval). */
/* ------------------------------ */
.raised {
  --socket: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--raised-h-lg);
  padding: 0 16px;
  border: 1px solid rgba(var(--creme-rgb), 0.2);
  border-radius: var(--radius-key);
  background: radial-gradient(95% 120% at 50% 45%, rgba(var(--ink-rgb), 0.16) 0%, rgba(var(--creme-rgb), 0.06) 60%, rgba(var(--creme-rgb), 0.15) 100%);
  color: var(--text);
  font-size: var(--text-15);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(var(--creme-rgb), 0.22),
    inset 0 -2px 0 rgba(var(--creme-rgb), 0.1),
    0 var(--socket) 0 rgba(9, 32, 34, 0.45),
    0 8px 12px rgba(var(--ink-rgb), 0.28);
  cursor: pointer;
}

.raised--md {
  min-height: var(--raised-h-md);
  border-radius: var(--radius-raised-md);
  font-size: var(--text-14);
}

.raised--sm {
  min-height: var(--raised-h-sm);
  padding: 0 12px;
  border-radius: var(--radius-raised-sm);
  font-size: var(--text-13);
}

.raised--icon {
  width: 46px;
  min-height: 46px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

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

/* ------------------------------ */
/* Text action: the third-tier choice (Om Gachi, Förhandla, Avböj, Till Utmaningar). */
/* ------------------------------ */
.text-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--hit-target);
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: rgba(var(--creme-rgb), 0.78);
  font-size: var(--text-15);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: rgba(var(--creme-rgb), 0.3);
  text-underline-offset: 4px;
  cursor: pointer;
}

.text-action:focus-visible {
  outline: 2px solid var(--accent-sage);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ------------------------------ */
/* Receipt chip: a goal or stake as a fact. The received summaries, the create receipt and Om utmaningen share
   it (Mottagen 2.0, A6); the look lives only here. Long text ellipses, the chip never wraps. */
/* ------------------------------ */
.invite-goal-summary-item,
.invite-stake-entry,
.summary-goal-chip,
.detail-about-body .detail-task-list li {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 0;
  padding: 3px 9px;
  border: 1px solid rgba(var(--sage-200-rgb), 0.18);
  border-radius: 10px;
  background: var(--panel-top);
  color: var(--text);
  font-size: var(--text-12);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  list-style: none;
}

.summary-goal-chip {
  margin: 2px 5px 2px 0;
}

/* ------------------------------ */
/* Field: a place to write. Sunken, one level. */
/* ------------------------------ */
.field,
.invite-intro-input-wrap {
  background: var(--sunken);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--field-radius);
  box-shadow:
    var(--sunken-shadow),
    inset 0 -1px 0 rgba(var(--creme-rgb), 0.06);
  color: var(--text);
}

.field {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--field-h);
  padding: 0 14px;
  font-size: 1rem; /* 16px or larger, so iOS does not zoom the page */
  font-weight: 600;
  line-height: 1.3;
}

.field:focus,
.field:focus-visible,
.field:focus-within,
.invite-intro-input-wrap:focus-within {
  outline: none;
  border-color: rgba(var(--creme-rgb), 0.38);
  box-shadow:
    var(--sunken-shadow),
    0 0 0 3px rgba(190, 221, 166, 0.16);
}

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

/* ------------------------------ */
/* Panel: card and floater share one gradient; the floating one adds rim and shadow. */
/* ------------------------------ */
.panel,
.dashboard-floater-card,
.stake-overlay-card,
.detail-tie-card {
  border: 1px solid rgba(var(--creme-rgb), 0.1);
  border-top-color: rgba(var(--creme-rgb), 0.22);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-mid) 38%, var(--panel-bot) 100%);
  box-shadow:
    inset 0 1px 0 rgba(var(--creme-rgb), 0.14),
    inset 0 -4px 10px rgba(var(--ink-rgb), 0.35);
}

.panel--floating,
.dashboard-floater-card,
.stake-overlay-card,
.detail-tie-card {
  box-shadow:
    inset 0 1px 0 rgba(var(--creme-rgb), 0.14),
    inset 0 -4px 10px rgba(var(--ink-rgb), 0.35),
    0 0 0 3px var(--panel-rim),
    0 7px 0 3px var(--panel-rim-lo),
    0 26px 48px rgba(var(--ink-rgb), 0.6),
    0 8px 16px rgba(var(--ink-rgb), 0.4);
}

.dashboard-floater-overlay {
  background: var(--scrim);
}

/* ------------------------------ */
/* Icon button: ✕ and ‹ as a mini tangent. 26px visible, 44px hit halo (interactions.css). */
/* ------------------------------ */
.icon-btn,
.dashboard-floater-close {
  position: relative;
  box-sizing: border-box;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  padding: 0;
  border: 1px solid rgba(var(--creme-rgb), 0.22);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(95% 120% at 50% 40%, rgba(var(--creme-rgb), 0.1) 0%, rgba(var(--creme-rgb), 0.16) 100%);
  color: var(--text);
  font-size: var(--text-12);
  font-weight: 800;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 0 rgba(9, 32, 34, 0.55),
    0 4px 6px rgba(var(--ink-rgb), 0.3);
  cursor: pointer;
}

.icon-btn:focus-visible,
.dashboard-floater-close:focus-visible {
  outline: 2px solid var(--accent-sage);
  outline-offset: 2px;
}

/* Large icon button: the detail header's ‹ (handoff 8A/8B, a 40px round mini key). */
.icon-btn--lg {
  --icon-btn-size: 40px;
}


/* ------------------------------ */
/* Chip: a small labelled token (selected goals, counters, type badges). */
/* ------------------------------ */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(var(--creme-rgb), 0.08);
  color: var(--text-soft);
  font-size: var(--text-12);
  font-weight: 800;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------ */
/* Text roles: title (floater/card), label (section), caption (status word). */
/* ------------------------------ */
.t-title {
  color: var(--text);
  font-size: var(--text-14);
  font-weight: 800;
  letter-spacing: var(--track-title);
  line-height: 1.2;
  text-transform: uppercase;
}

.t-label {
  color: var(--text-soft);
  font-size: var(--text-12);
  font-weight: 800;
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
}

.t-caption {
  font-size: var(--text-11);
  font-weight: 800;
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
}

/* Floater header: centred title, close button in the top-right corner, 30px side room. */
.dashboard-floater-top {
  position: relative;
  justify-content: center;
  padding-inline: 30px;
  text-align: center;
}

.dashboard-floater-top > .dashboard-floater-close {
  position: absolute;
  top: 0;
  right: 0;
}

/* Beslut floaters (a Tillbaka + red action row, no close button): no side room in the header, and the
   explanation left-aligned under the centred question (Sudden 2.0). */
.dashboard-floater-card:has(> .dashboard-dismiss-actions) > .dashboard-floater-top {
  padding-inline: 0;
}

.dashboard-floater-card:has(> .dashboard-dismiss-actions) > .dashboard-floater-top .dashboard-floater-subtitle {
  text-align: left;
  text-wrap: pretty;
}

/* The title block may shrink below its text, so fitFloaterTitle() sees a long title overflow and fits it
   inside the 30px side room instead of running under the close button. */
.dashboard-floater-top > div {
  min-width: 0;
}

/* Left-aligned subheader (Sudden 2.0): it leaves the header's 30px side room so it starts where the fields
   or steps under it do. Install guide, Lägg till eget mål and the create flow's goal and stake floaters. */
.dashboard-floater-top > div:has(> .dashboard-floater-subtitle.is-left) {
  width: 100%;
}

.dashboard-floater-top .dashboard-floater-subtitle.is-left,
.stake-overlay-top .dashboard-floater-subtitle.is-left {
  margin-left: -30px;
  text-align: left;
  text-wrap: pretty;
}

/* The create flow's goal and stake floaters are Formulär floaters: 8px under the title like Tipsa Gachi and
   Lägg till eget, not the 4px of an event floater (Sudden 2026-09-28). */
.stake-overlay-top .dashboard-floater-subtitle {
  margin-top: 8px;
}

.dashboard-floater-title {
  color: var(--text);
  font-size: var(--text-14);
  font-weight: 800;
  letter-spacing: var(--track-title);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A title too long for one line shrinks before it wraps ("En titel i två rader ser ut som två besked");
   fitFloaterTitle() in utils/ui.js sets the classes when a floater opens or its title changes. */
.dashboard-floater-title.is-fit-small,
.stake-overlay-title.is-fit-small {
  font-size: var(--text-13);
  letter-spacing: 0.05em;
}

.dashboard-floater-title.is-fit-wrap,
.stake-overlay-title.is-fit-wrap {
  white-space: normal;
}

/* ------------------------------ */
/* Period meter (components/charts.js): sunken 18px track, day/person chunks with hairlines, flag. */
/* ------------------------------ */
.period-meter {
  position: relative;
  width: 100%;
}

.period-meter-track {
  position: relative;
  height: var(--track-h);
  border-radius: var(--radius-track);
  background: var(--sunken);
  box-shadow: var(--sunken-shadow);
  overflow: visible;
}

.period-meter-track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.period-meter-chunk {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--chunk-color, var(--done));
  box-shadow: inset -1px 0 0 rgba(var(--ink-rgb), 0.28);
}

.period-meter-chunk:first-of-type {
  border-radius: var(--radius-track) 0 0 var(--radius-track);
}

.period-meter-chunk.is-last {
  border-radius: 0 5px 5px 0;
  box-shadow: none;
}

.period-meter-chunk:first-of-type.is-last {
  border-radius: var(--radius-track) 5px 5px var(--radius-track);
}

/* 2.0 T5: together fills in 3px stripes of both players' colours. */
.period-meter-chunk.is-striped {
  background: repeating-linear-gradient(90deg, var(--stripe-a) 0 3px, var(--stripe-b) 3px 6px);
}

/* Goal: 2px line through the track, flag above it. */
.period-meter-goal {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--goal-line);
  border-radius: 1px;
}

.period-meter-flag {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -2px);
  font-size: var(--text-14);
  line-height: 1;
}

/* With a label ("🏁 = 154 p") the flag reads in the goal line's blue, kept inside the card near either end. */
.period-meter-flag.has-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--goal-line);
  font-size: var(--text-12);
  font-weight: 800;
  white-space: nowrap;
}

.period-meter-flag.has-label.is-end {
  left: auto;
  right: -4px;
  transform: translateY(-2px);
}

.period-meter-flag.has-label.is-start {
  left: -4px;
  transform: translateY(-2px);
}

.period-meter-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: var(--text-11);
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* ------------------------------ */
/* Day axis (components/charts.js): one line under every graph or meter with a time dimension. */
/* ------------------------------ */
.day-axis {
  position: relative;
  margin-top: 30px; /* room so DAG is not read as the meter's label */
  padding: 0 10px 18px;
}

/* 2.0: while the graph above is inspected, a ring marks that day on the scale (the scale inspects too). */
.day-axis.is-inspecting .day-axis-track::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--day-axis-inspect-left, 0%);
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 2px solid var(--text);
  border-radius: 50%;
  background: var(--day-axis-ring);
  pointer-events: none;
}

.day-axis-label {
  position: absolute;
  left: 10px;
  top: -17px;
  color: var(--text-muted);
  font-size: var(--text-11);
  font-weight: 800;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
}

.day-axis-track {
  position: relative;
  height: 12px;
}

.day-axis-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 1px;
  background: var(--hairline-strong);
}

.day-axis-fill {
  position: absolute;
  left: 0;
  top: 4px;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--creme-rgb), 0.6);
}

.day-axis-dot {
  position: absolute;
  top: 3px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--text-soft);
}

.day-axis-dot.is-future {
  opacity: 0.4;
}

.day-axis-dot.is-today {
  top: 1px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--text);
  box-shadow: 0 0 0 3px var(--day-axis-ring, var(--surface-2));
  opacity: 1;
}

.day-axis-num {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: var(--text-11);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.day-axis-dot.is-today .day-axis-num {
  top: 14px;
  color: var(--text);
}

/* ------------------------------ */
/* Tile: the day-goal brick (Din Dag, merge floater, create). Raised body with a sunken face. */
/* Resting = desaturated, done = lit by luminance and colour (same shape, the grid never moves). */
/* ------------------------------ */
.tile {
  --socket: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  padding: 26px 6px 8px;
  border: 1px solid rgba(var(--creme-rgb), 0.16);
  border-radius: var(--radius-tile);
  background: radial-gradient(95% 120% at 50% 45%, rgba(var(--ink-rgb), 0.16) 0%, rgba(var(--creme-rgb), 0.06) 60%, rgba(var(--creme-rgb), 0.15) 100%);
  color: var(--text);
  text-align: center;
  box-shadow:
    inset 0 3px 5px rgba(var(--ink-rgb), 0.28),
    inset 0 9px 12px -8px rgba(var(--ink-rgb), 0.35),
    inset 0 1px 0 rgba(var(--creme-rgb), 0.22),
    inset 0 -3px 0 rgba(var(--creme-rgb), 0.13),
    0 var(--socket) 0 rgba(9, 32, 34, 0.45),
    0 8px 14px rgba(var(--ink-rgb), 0.3);
  cursor: pointer;
  overflow: hidden;
}

.tile-emoji {
  flex: none;
  margin-bottom: 7px;
  font-size: 26px;
  line-height: 1;
  filter: grayscale(0.7);
  opacity: 0.5;
  transition: filter var(--press-up) ease-out, opacity var(--press-up) ease-out;
}

.tile-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  color: rgba(var(--creme-rgb), 0.82);
  font-size: var(--text-12);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: pretty;
}

/* Create choices (type, length, goals, stakes) are small versions of the tile: unselected they take its concave
   face (Sudden 2.0). The chosen and pressed states stay in create-steps.css / stakes.css. */
[data-screen="step-1"] .mode-grid .mode-card:not(.is-selected),
[data-screen="step-2"] .duration-grid .duration-card:not(.is-selected),
[data-screen="step-3"] .goal-grid .goal-chip:not(.is-selected),
#step-5-screen .stake-grid .stake-card:not(.is-selected):not(.is-added) {
  border-color: rgba(var(--creme-rgb), 0.16);
  background: radial-gradient(95% 120% at 50% 45%, rgba(var(--ink-rgb), 0.16) 0%, rgba(var(--creme-rgb), 0.06) 60%, rgba(var(--creme-rgb), 0.15) 100%);
  box-shadow:
    inset 0 3px 5px rgba(var(--ink-rgb), 0.28),
    inset 0 9px 12px -8px rgba(var(--ink-rgb), 0.35),
    inset 0 1px 0 rgba(var(--creme-rgb), 0.22),
    inset 0 -3px 0 rgba(var(--creme-rgb), 0.13),
    0 var(--socket) 0 var(--raised-socket),
    0 8px 14px rgba(var(--ink-rgb), 0.3);
}

/* The smaller choices (start day, goal category, the official list's rows) take the face with a shallower dish. */
[data-screen="step-2"] .start-date-row .start-date-choice-button:not(.is-selected),
[data-screen="step-3"] .goal-category-tabs .goal-category-button:not(.is-selected),
#official-challenge-grid .official-row:not(.is-selected):not(.is-ended) {
  border-color: rgba(var(--creme-rgb), 0.16);
  background: radial-gradient(95% 120% at 50% 45%, rgba(var(--ink-rgb), 0.16) 0%, rgba(var(--creme-rgb), 0.06) 60%, rgba(var(--creme-rgb), 0.15) 100%);
  box-shadow:
    inset 0 2px 4px rgba(var(--ink-rgb), 0.26),
    inset 0 6px 9px -6px rgba(var(--ink-rgb), 0.32),
    inset 0 1px 0 rgba(var(--creme-rgb), 0.2),
    inset 0 -2px 0 rgba(var(--creme-rgb), 0.12),
    0 var(--socket, 2px) 0 var(--raised-socket);
}

/* The chosen create choice (Sudden: selected/unselected alike all the way, steps 3–4 were right): sunk into sage with
   a deep inner shadow and a 1px socket, 2px down. Type, length, start day, goals and stakes; only the sizes differ. */
[data-screen="step-1"] .mode-grid .mode-card.is-selected,
[data-screen="step-1"] .mode-grid .mode-card.is-selected:hover,
[data-screen="step-1"] .mode-grid .mode-card.is-selected:active,
[data-screen="step-1"] .mode-grid .mode-card.is-selected:focus-visible,
[data-screen="step-2"] .duration-card.is-selected,
[data-screen="step-2"] .duration-card.is-selected:hover,
[data-screen="step-2"] .duration-card.is-selected:active,
[data-screen="step-2"] .duration-card.is-selected:focus-visible,
[data-screen="step-3"] .goal-grid .goal-chip.is-selected,
[data-screen="step-3"] .goal-grid .goal-chip.is-selected:hover,
[data-screen="step-3"] .goal-grid .goal-chip.is-selected:active,
[data-screen="step-3"] .goal-grid .goal-chip.is-selected:focus-visible,
#step-5-screen .stake-grid .stake-card.is-added,
#step-5-screen .stake-grid .stake-card.is-selected,
#step-5-screen .stake-grid .stake-card.is-added:hover,
#step-5-screen .stake-grid .stake-card.is-selected:hover,
#step-5-screen .stake-grid .stake-card.is-added:active,
#step-5-screen .stake-grid .stake-card.is-selected:active,
#step-5-screen .stake-grid .stake-card.is-added:focus-visible,
#step-5-screen .stake-grid .stake-card.is-selected:focus-visible {
  --socket: 0px;
  border-color: var(--chosen-rim);
  background: var(--chosen-face);
  color: var(--text);
  box-shadow: var(--chosen-shadow);
  transform: translateY(2px);
}

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

/* Which challenge the goal counts in: a small desaturated emoji in the top-left corner. */
.tile-badge {
  position: absolute;
  top: 7px;
  left: 9px;
  font-size: 13px;
  line-height: 1;
  filter: grayscale(0.55);
  opacity: 0.55;
}

/* Done: the create flow's chosen face (sunk in sage, --chosen-*), full colour; the check sits top-right
   (Sudden 2026-09-27: "samma färg och känsla som ett selectedkort på createflow"). */
.tile.is-done {
  --socket: 0px;
  border-color: var(--chosen-rim);
  background: var(--chosen-face);
  box-shadow: var(--chosen-shadow);
}

.tile.is-done .tile-emoji {
  filter: none;
  opacity: 1;
}

.tile.is-done .tile-title {
  color: rgba(var(--creme-rgb), 0.95);
}

.tile-check {
  position: absolute;
  top: 7px;
  right: 10px;
  color: var(--accent-sage);
  font-size: var(--text-15);
  font-weight: 800;
  line-height: 1;
}

/* Living risk (sudden death): coral contour, a coral hairline under the top edge and the word
   in caption scale in a foot pinned to the bottom, so it sits at the same height in every tile. */
.tile.is-risk {
  padding-bottom: 22px; /* room for the foot under a centred title */
  border-color: rgba(242, 134, 124, 0.45);
  box-shadow:
    inset 0 2px 0 var(--risk),
    inset 0 5px 6px rgba(var(--ink-rgb), 0.3),
    inset 0 9px 12px -8px rgba(var(--ink-rgb), 0.35),
    inset 0 -3px 0 rgba(var(--creme-rgb), 0.13),
    0 var(--socket) 0 rgba(9, 32, 34, 0.45),
    0 8px 14px rgba(var(--ink-rgb), 0.3);
}

.tile-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  color: var(--risk);
  font-size: 9px; /* tile-badge exception: a fixed status word, recognised by shape and colour */
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Add: the flat outline of Tipsa Gachi on Start (Sudden 2.0), no socket, the plus and the label in muted
   crème. Pressing lights the face like Tipsa Gachi's hover and sinks 2px like an outline. */
.tile.is-add {
  --socket: 0px;
  padding: 26px 6px 8px; /* the other tiles' box, so plus and label line up with their emoji and title */
  border: 1px solid rgba(var(--creme-rgb), 0.22);
  background: transparent;
  box-shadow: none;
}

.tile.is-add:active,
.tile.is-add.is-pressing {
  transform: translateY(2px);
  border-color: rgba(var(--creme-rgb), 0.45);
  background: rgba(var(--creme-rgb), 0.06);
  box-shadow: none;
}

.tile.is-add .tile-emoji {
  margin-bottom: 6px;
  color: rgba(var(--creme-rgb), 0.8);
  font-size: 26px;
  font-weight: 400;
  filter: none;
  opacity: 1;
}

.tile.is-add .tile-title {
  color: rgba(var(--creme-rgb), 0.7);
}

/* Selected (merge, choice floaters): pressed-in green body and a 2px mint ring with a soft glow.
   A ring, not the sage face, because sage means done. */
.tile.is-selected {
  --socket: 0px;
  transform: translateY(2px);
  border-color: rgba(87, 220, 174, 0.9);
  background:
    linear-gradient(180deg, rgba(87, 220, 174, 0.14), rgba(87, 220, 174, 0.06)),
    radial-gradient(95% 120% at 50% 45%, rgba(var(--ink-rgb), 0.2) 0%, rgba(var(--creme-rgb), 0.05) 100%);
  box-shadow:
    0 0 0 2px var(--done),
    0 0 12px rgba(87, 220, 174, 0.35),
    inset 0 4px 10px rgba(var(--ink-rgb), 0.35);
}

.tile.is-selected .tile-emoji {
  filter: none;
  opacity: 1;
}