/* The participant surface (/p), on top of base.css. Everything shared with the
   employer surface lives there; what is here is what only a person between
   jobs sees — the journey thread, the consent card, the account menu, and the
   Article 50 disclosure.

   The register is warm and calm. Where /e is dense, this stays airy: one thing
   asked at a time, on a phone, by somebody who did not choose to be here. */

/* ---- the journey thread (account home) ---- */

.thread {
  display: flex;
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0.35rem 0 0;
}

/* The inline padding keeps two labels off each other at 360px; it cannot be a
   flex gap, which would break the cord — each segment is drawn from the
   previous bead's centre as a percentage of this item's own width. */
.thread li {
  position: relative;
  flex: 1 1 0;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--quiet);
  padding: 1.5rem 0.25rem 0;
}

/* the cord */
.thread li::before {
  content: '';
  position: absolute;
  top: 0.44rem;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--haze);
}

.thread li:first-child::before { display: none; }

/* Above the cord: the next bead's segment starts at this one's centre, and
   paints later, so without this it draws across the bead. */
.thread .bead {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--haze);
  animation: bead-settle 420ms ease-out both;
}

.thread li:nth-child(2) .bead { animation-delay: 60ms; }
.thread li:nth-child(3) .bead { animation-delay: 120ms; }
.thread li:nth-child(4) .bead { animation-delay: 180ms; }
.thread li:nth-child(5) .bead { animation-delay: 240ms; }

.thread .done .bead { background: var(--ink); border-color: var(--ink); }
.thread .done { color: var(--ink); }

.thread .now .bead {
  border-color: var(--honey);
  border-width: 3.5px;
}

.thread .now { color: var(--ink); font-weight: 600; }

@keyframes bead-settle {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

/* The caption under the thread is a quiet hint in five of its six states. The
   sixth is somebody's consent decision running out of days with no mail behind
   it, so it is the one line here that asks to be read first: it takes the
   thread's own honey and the weight the ringed bead wears. */
.thread + .hint .call {
  color: var(--honey);
  font-weight: 600;
  text-decoration-thickness: 2px;
}

/* ---- the account menu ---- */

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

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

.menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.7rem 0;
  font-weight: 600;
  text-decoration: none;
}

.menu a::after { content: '→'; color: var(--quiet); font-weight: 400; }
.menu a:hover { color: var(--ink); }

/* ---- the Article 50 disclosure ---- */

/* Both markers keep their bare <p>; the treatment is on the class, so the
   element the disclosure tests match is untouched. */
.ai-disclosure {
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(197, 139, 39, 0.06);
  border: 1px solid var(--haze);
  border-left: 3px solid var(--honey);
  border-radius: 0 8px 8px 0;
}

.ai-summary { margin-top: 1rem; }

/* ---- the consent moment ---- */

/* The one honey top edge on the product: somebody is asking this reader for a
   decision, and nothing else on either surface does. */
.consent {
  background: var(--surface);
  border: 1px solid var(--haze);
  border-top: 3px solid var(--honey);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 1.3rem 1.2rem;
}

.consent .who {
  font: 600 1.35rem/1.3 var(--title);
  margin: 0 0 0.1rem;
  letter-spacing: -0.01em;
}

.consent .asks { color: var(--quiet); margin: 0 0 0.75rem; }

.consent .consequence {
  margin: 0 0 0.85rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--haze);
}

.consent .when {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  margin: 0;
  font-size: 0.86rem;
  color: var(--quiet);
}

/* ---- the tie ----

   The real match in this product is not a card being thrown. It is this: a
   participant has just said yes to being introduced, two parties who did not
   know each other are about to, and fifty euro has moved. It is the strongest
   moment on either surface and it had no drawing at all.

   So it gets one, in the language everything else here is drawn in: a cord.
   Two ends, the reader's and the employer's, come in from the edges of the card
   and loop through each other in the middle. Olive, which is this product's
   colour for something settled; the same 0.72rem caption under each end that
   the journey thread puts under its beads; and one beat — the ends draw in, the
   loops close, and it is finished. It does not repeat and it does not persist:
   the record of what happened is the dated line in the list below it.

   No script. The moment is a POST that redirects, so the browser lands on a
   page the server rendered in this state and the animation is the page
   arriving. */

.tie {
  background: var(--surface);
  border: 1px solid var(--haze);
  border-top: 3px solid var(--olive);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 1.5rem 1.2rem 1.3rem;
  margin: 0 0 1.35rem;
}

/* The drawing has a size of its own and does not stretch to the card. Let the
   cord run the full 600px a desktop card gives it and the knot becomes a 30px
   mark lost in the middle of a long line; held to this width it stays the thing
   being looked at, and the two labels stay under the ends they name. */
.tie-knot,
.tie-sides {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.tie-knot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin-top: 0;
  margin-bottom: 0;
}

/* The two ends. Each is scaled from its OWN outer edge, so the pair closes on
   the middle instead of sliding across the card. The negative margin tucks the
   cord a little way inside the loop it feeds, which is what makes the loop read
   as threaded rather than stuck on the end. */
.tie-knot::before,
.tie-knot::after {
  content: '';
  flex: 1 1 0;
  height: 2px;
  background: var(--olive);
  animation: tie-draw 420ms cubic-bezier(.2, .8, .3, 1) both;
}

.tie-knot::before { transform-origin: left center; margin-right: -5px; }
.tie-knot::after { transform-origin: right center; margin-left: -5px; }

/* The loops are the cord bent round, so they are drawn at the cord's own weight
   and never heavier: at three or four pixels they stop being thread and start
   being a pair of rings, which is a different picture entirely. */
.tie-loop {
  width: 19px;
  height: 19px;
  flex: none;
  border: 2px solid var(--olive);
  border-radius: 50%;
}

/* Each end travels the last stretch along its own cord and they meet. */
.tie-loop:first-of-type {
  animation: tie-close-left 340ms cubic-bezier(.2, .8, .3, 1) 320ms both;
}

.tie-loop + .tie-loop {
  margin-left: -8px;
  animation: tie-close-right 340ms cubic-bezier(.2, .8, .3, 1) 320ms both;
}

@keyframes tie-draw {
  from { transform: scaleX(0); }
  to { transform: none; }
}

@keyframes tie-close-left {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: none; }
}

@keyframes tie-close-right {
  from { opacity: 0; transform: translateX(15px); }
  to { opacity: 1; transform: none; }
}

/* Whose end is whose, at the size and colour the journey thread labels its
   beads. Without them the drawing is a knot; with them it is these two people. */
.tie-sides {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.45rem;
  margin-bottom: 0;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--quiet);
}

.tie-said {
  margin: 1.15rem 0 0;
  font: 600 1.15rem/1.35 var(--title);
  letter-spacing: -0.01em;
  text-align: center;
}

/* Approving can empty the pending list, and the empty state draws a cord of its
   own directly under this one. One cord to a screen, here too. */
.tie + .empty::before { display: none; }

/* ---- the deck ----

   One listing per screen, held rather than scrolled. Everything here is in
   service of the card being an object: it is narrower than the page even on a
   desktop, because a card is a card and widening it into a panel would lose
   the only thing this view has over the list; the two answers are built into
   its base rather than floated under it, so throwing the card throws the
   answers with it; and the listing behind shows its edge, which is the whole
   difference between a page and a deck.

   The radius is larger than --radius on purpose. --radius is the product's
   sheet-of-paper corner; this is the one element meant to read as a thing in
   the hand, and it is the only place that departs. */

.deck { max-width: 420px; margin: 0 auto; }

.deck-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.9rem;
}

.deck-head h1 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.deck-view {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---- the session strand ----

   What this sitting has picked out, drawn as the thing the rest of the product
   is drawn as: a cord with beads on it. Same 13px bead, same hairline, same
   filled-means-so as the journey thread above the account menu and the standing
   ledger on /e — one object, three places, so a reader who has seen their
   journey thread already knows how to read this.

   It replaces a chip that said «Σημειώθηκε ✓» and vanished. The chip announced
   the last answer; the strand shows the whole sitting, which is the thing worth
   showing, and it says it by adding to a thread rather than by flashing.

   Empty, the cord is slack with one ringed bead on it — the place the first
   answer takes. The ring is .thread .now's, borrowed on purpose: on this
   surface a honey ring has always meant "the next one". */

.strand { margin: 0 0 1.05rem; }

.strand-cord {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 15px;
  margin: 0 0 0.45rem;
}

/* The cord runs the full width of the deck and the beads are gathered at its
   middle, the way beads sit in a hand. Left-aligned they would read as a meter
   filling towards some number the reader is supposed to reach.

   Ink at low alpha rather than haze, for the reason the standing ledger's cord
   gives: haze on the shore measures 1.10:1, which is a line nobody can see, and
   it left the beads strung on nothing. Same value as .ledger::before — it is
   the same cord. */
.strand-cord::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(20, 38, 60, 0.22);
}

.strand-bead {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid var(--ink);
}

.strand-first {
  background: var(--surface);
  border-color: var(--honey);
  border-width: 3.5px;
}

.strand-say {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
  color: var(--quiet);
}

/* The bead that has just arrived, and the one render it belongs to. Honey is
   the surface's single accent and it was what the old chip took for this same
   moment; on the next card the bead is ink like the rest of them.

   The colour and the weight are not the animation: a reader who has turned
   movement off still has to see which bead is new and that the line is
   speaking, so both stay and only the settle goes. */
.strand.is-noted .strand-bead:last-child {
  background: var(--honey);
  border-color: var(--honey);
  animation: strand-settle 380ms cubic-bezier(.2, .8, .3, 1) both;
}

.strand.is-noted .strand-say { color: var(--ink); }

/* A bead being threaded down onto the cord, and that is the whole of it. */
@keyframes strand-settle {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Two cords on one screen is one too many. Where the strand is drawn, the empty
   state's own decorative one goes: the strand is the one that says something. */
.strand + .empty::before { display: none; }

.deck-stack { position: relative; }

/* The listing behind this one, showing at the bottom edge. It is drawn only
   when there really is another, so the stack thinning to a single card is the
   reader's warning that the deck is about to run out. */
.deck-stack.is-deeper::before {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: -8px;
  height: 24px;
  background: var(--surface);
  border: 1px solid var(--haze);
  border-radius: 18px;
}

.deck-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--haze);
  border-radius: 18px;
  box-shadow: var(--lift);
  /* backwards, never both. A fill of `both` keeps applying the final keyframe
     — transform: none — for the life of the element, and an animation's fill
     outranks an inline style, so every transform the gesture writes onto the
     card would be discarded and the card would never move. `backwards` fills
     only before the animation starts, which is the half the deal-in needs. */
  animation: deck-deal 280ms cubic-bezier(.2, .8, .3, 1) backwards;
}

@keyframes deck-deal {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* The card that replaced one the reader just answered, yes or no alike: it
   rises into the spot the stack's drawn edge already promised, which is what
   makes that edge mean something. Wins over the plain deal above on
   specificity, never both at once. */
.deck-card.is-answered {
  animation: deck-rise 260ms cubic-bezier(.2, .8, .3, 1) backwards;
}

@keyframes deck-rise {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.deck-face { padding: 1.45rem 1.25rem 1.3rem; }

.deck-name {
  /* One size, not a clamp: the card is 420px wide at every viewport, so a
     title that grew with the window would only wrap sooner on a big screen. */
  font: 600 1.62rem/1.18 var(--title);
  letter-spacing: -0.022em;
  margin: 0 0 0.2rem;
}

.deck-employer {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--quiet);
}

/* The region wears the company mark itself, at the size of a map pin. The mark
   keeps --brand here as everywhere: it is the logo, not an icon set, and
   recolouring it would make it one. */
.deck-where {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1.05rem 0 0;
  font-size: 0.95rem;
}

.deck-where .mark { height: 17px; width: auto; fill: var(--brand); flex: none; }

.deck-pay {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  margin: 0.5rem 0 0;
}

/* The figure is the thing on the card most often looked for, so it is set in
   the mono face a size up from the body rather than folded into a fact list.
   The currency mark stays in the body face beside it: a € set in the mono
   figures is a third of a space wide on each side and reads as a stumble. */
.deck-money { display: inline-flex; align-items: baseline; gap: 0.2rem; }

.deck-amount {
  font: 400 1.12rem/1.2 var(--mono);
  letter-spacing: -0.01em;
}

.deck-cur { font-size: 1rem; }

.deck-money-quiet { font-size: 0.95rem; color: var(--quiet); }

.deck-chip {
  padding: 0.22rem 0.62rem;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--sea);
  background: #EEF4F7;
  border-radius: 999px;
}

.deck-chip-noted { color: var(--olive); background: rgba(62, 124, 79, 0.09); }

/* The match line: quiet, above the prose, a caption rather than a second
   heading. The number states the match plainly and the reason beside it, when
   there is one, explains no more than the single criterion behind it. */
.deck-score {
  margin: 1.05rem 0 0;
  font-size: 0.86rem;
  color: var(--quiet);
}

.deck-score strong { color: var(--ink); font-weight: 600; }

/* The whole prose region — the description plus whichever of the two optional
   sections a listing carries — shares one height budget rather than each
   paragraph clamping on its own. Three sections must not add up to three
   times the space one used to take: cards that jump in height between one
   answer and the next stop feeling like one deck, and the whole text is one
   tap away regardless of where this cuts it off, so nothing is lost by
   clipping mid-section. The figure is what six lines of .deck-body text plus
   its own leading divider measured before this class existed. */
.deck-prose {
  max-height: 11.7rem;
  overflow: hidden;
}

.deck-body {
  max-width: 46ch;
  margin: 1.05rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--haze);
  line-height: 1.6;
}

/* The two optional sections beneath the description. Quiet on purpose: the
   card has one title, and this is not a second one. It carries no border of
   its own — the deck-body under it draws that, so a section reads the same
   whether it opens the card's prose or continues it. */
.deck-section {
  margin: 1.05rem 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--quiet);
}

.deck-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  margin: 1.05rem 0 0;
  font-size: 0.86rem;
  color: var(--quiet);
}

.deck-posted { font-family: var(--mono); font-size: 0.78rem; white-space: nowrap; }

/* The way to the whole advertisement is a tap target on a card meant for
   thumbs, so it takes the surface's 44px floor rather than the height of its
   own text. */
.deck-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The base of the card: two answers, edge to edge, at the height a thumb
   reaches without the hand moving. They are inside the card because they are
   part of it — the card and its answer are one object to throw. */
.deck-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--haze);
}

.deck-actions form { display: flex; margin: 0; }

.deck-actions.is-single { grid-template-columns: 1fr; }

.deck-pass,
.deck-next,
.deck-yes,
.deck-yes button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 62px;
  padding: 0.7rem 0.85rem;
  font: 600 1rem/1.2 var(--body);
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 0;
}

.deck-pass {
  color: var(--quiet);
  background: var(--surface);
  border-right: 1px solid var(--haze);
}

.deck-pass:hover { color: var(--ink); background: var(--shore); }

.deck-yes, .deck-yes button {
  color: var(--surface);
  background: var(--sea);
}

.deck-yes button:hover, a.deck-yes:hover { background: #255d78; }

/* Already answered: one button across the base, because the only thing left
   to do is read on. */
.deck-next {
  color: var(--sea);
  background: var(--surface);
}

.deck-next:hover { background: #EEF4F7; }

/* Under the finger: the answer a release would give lights up before it is
   given, so a swipe can be abandoned knowing what it was about to do. It is
   colour and not motion, so it is the one part of the gesture that stays under
   prefers-reduced-motion — a reader who has turned the movement off is the one
   with least else to tell them what a release is about to do. */
.deck-card.is-yes .deck-yes button { background: #255d78; }
.deck-card.is-pass .deck-pass,
.deck-card.is-pass .deck-next { color: var(--ink); background: var(--shore); }

.deck-note {
  margin: 1.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  color: var(--quiet);
}

.deck .empty { margin-top: 0.5rem; }
.deck .empty .btn { min-width: 12rem; }
.deck .empty .deck-after { margin: 1rem 0 0; }

@media (max-width: 400px) {
  .consent { padding: 1.1rem 0.95rem; }
  .thread li { font-size: 0.68rem; }
  .deck-face { padding: 1.25rem 1rem 1.15rem; }
  .deck-name { font-size: 1.45rem; }
}