/* tapis-vert — the shell (screens plan 2): sign-in, home, account, settings, create table.
   The cloth and .btn come from base.css (plan 3's, verbatim); this file adds headers, forms,
   segments and the lists. Carton is paper you write on or press; the mat is where you read;
   gilt is you and nothing else. Every target outside a hand is 44 px or more (constraint 10). */

/* the shell's screens fill the window so the action sits in thumb reach; the play screen
   measures its own box (spec §7) and does not lean on this */
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.screen { flex: 1; display: flex; flex-direction: column; min-height: 100%; }

.screen__body {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 28px;
}

.stack > * + * { margin-top: 22px; }
.stack--tight > * + * { margin-top: 12px; }

/* --- the top strip ------------------------------------------------------------------------ */

.bar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: max(6px, env(safe-area-inset-top)) 8px 6px;
  background: var(--lisiere);
}

.bar--root { grid-template-columns: minmax(0, 1fr) 44px; padding-left: 16px; }

.bar__title {
  font: 700 21px/1.2 var(--font-index);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* a chevron drawn in code; the button's text is its accessible name */
.bar__back {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--craie);
  font-size: 0;
  cursor: pointer;
}

.bar__back::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto 0 17px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}

.avatar {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--carton);
  color: var(--encre);
  font: 700 20px/1 var(--font-index);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

/* --- the action in thumb reach (plan 2, P4) ---------------------------------------------- */

.foot {
  position: sticky;
  bottom: 0;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom));
  background: var(--lisiere);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

.foot > * { display: block; max-width: 448px; margin: 0 auto; }

.create { flex: 1; display: flex; flex-direction: column; }

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

.btn--primary {
  min-height: 52px;
  font-size: 17px;
  box-shadow: var(--shadow-card);
}

.btn--wide { width: 100%; }

.btn--ghost {
  min-height: 48px;
  background: transparent;
  color: var(--craie);
  box-shadow: inset 0 0 0 1.5px rgba(243, 241, 234, .5);
}

.btn:active:not([disabled]) { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: default; }

.bar__back:focus-visible, .avatar:focus-visible, .seg__opt:focus-visible, .table-row:focus-visible,
.link-row:focus-visible, .field__input:focus-visible {
  outline: 3px solid var(--dorure);
  outline-offset: 2px;
}

/* --- fields ------------------------------------------------------------------------------- */

.field__label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; }

.field__input {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--carton);
  color: var(--encre);
  font: 16px/1.3 var(--font-ui);   /* 16 px: Safari zooms anything smaller (constraint 10) */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
  -webkit-appearance: none;
  appearance: none;
}

.field__input::placeholder { color: #6B665C; opacity: 1; }
.field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--vermillon); }

.field__hint { margin-top: 6px; font-size: 14px; opacity: .8; }

/* red is failure: as a rule beside the words, since vermilion text on the mat is unreadable */
.field__error, .alert {
  margin-top: 8px;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--vermillon);
  font-size: 15px;
  font-weight: 600;
}

.alert { padding: 10px 12px; border-radius: 4px; background: rgba(0, 0, 0, .22); }

.confirm-line { padding-left: 10px; border-left: 3px solid var(--craie); font-size: 15px; font-weight: 600; }

/* --- the one control for a choice (plan 2, P3) -------------------------------------------- */

.setting__label { margin-bottom: 8px; font-size: 15px; font-weight: 600; }

.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 13px;
  background: var(--lisiere);
}

.seg__opt {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--craie);
  font: 600 15px/1.15 var(--font-ui);
  cursor: pointer;
  touch-action: manipulation;
}

.seg__opt.is-on { background: var(--carton); color: var(--encre); box-shadow: var(--shadow-card); }
.seg__opt:not(.is-on):active { background: rgba(255, 255, 255, .08); }

.seg--small { display: inline-grid; grid-auto-columns: 52px; }
.seg--numbers .seg__opt { min-height: 52px; font: 700 24px/1 var(--font-index); }

/* --- sign-in: les trois bouts on the cloth ------------------------------------------------ */

.screen--signin { padding: 0 16px; }

.signin__top { display: flex; justify-content: flex-end; padding-top: max(12px, env(safe-area-inset-top)); }

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 24px;
  text-align: center;
}

.bouts { --bw: 104px; position: relative; width: calc(var(--bw) * 2.9); height: calc(var(--bw) * 2.05); }

.bouts .card {
  --card-w: var(--bw);
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: calc(var(--bw) / -2);
  transform-origin: 50% 160%;
  transform: rotate(var(--r, 0deg));
  pointer-events: none;
  /* the app's one staged entrance: the fan opens once; with reduced motion it is simply open */
  animation: bouts-open calc(.7s * var(--motion)) cubic-bezier(.2, .8, .2, 1) both;
}

.bouts__card--1 { --r: -19deg; }
.bouts__card--2 { --r: 0deg; }
.bouts__card--3 { --r: 19deg; }

@keyframes bouts-open { from { transform: rotate(0deg) translateY(10px); } }

.wordmark { margin-top: 18px; font: 700 46px/1 var(--font-index); letter-spacing: -.01em; }
.hero__tagline { max-width: 26ch; margin-top: 10px; font-size: 17px; opacity: .88; }

.signin__panel {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.signin__form > * + * { margin-top: 14px; }
.signin__panel > * + * { margin-top: 12px; }
.signin__note { font-size: 14px; opacity: .78; text-align: center; }
.signin__title { font: 700 26px/1.2 var(--font-index); }
.signin__text { font-size: 17px; }
.signin__address { font-size: 15px; opacity: .85; overflow-wrap: anywhere; }

/* --- home ----------------------------------------------------------------------------------- */

.tables + .tables { margin-top: 26px; }

.tables__heading { margin-bottom: 4px; font-size: 14px; font-weight: 600; opacity: .8; }

.tables__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.tables__item { border-bottom: 1px solid var(--filet); }

.table-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 10px 28px 10px 4px;
  border: 0;
  background: transparent;
  color: var(--craie);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.table-row::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}

.table-row:active { background: rgba(0, 0, 0, .18); }
.table-row.is-turn { padding-left: 14px; box-shadow: inset 4px 0 0 var(--dorure); }
.table-row.is-done { opacity: .72; }

.table-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.table-row__name {
  font: 700 19px/1.2 var(--font-index);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-row__detail { font-size: 14px; opacity: .8; }

.badge-turn {
  flex: none;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--dorure);
  color: var(--encre);
  font: 700 15px/1 var(--font-index);
  white-space: nowrap;
}

.empty { padding-top: 12px; }
.empty__title { font: 700 23px/1.25 var(--font-index); }
.empty__text { max-width: 34ch; margin-top: 8px; font-size: 16px; opacity: .88; }

.notice > * + * { margin-top: 12px; }
.notice__why { font-size: 14px; opacity: .8; }
.loading { opacity: .8; }

/* --- account ------------------------------------------------------------------------------ */

.account__email { font-size: 15px; opacity: .85; overflow-wrap: anywhere; }

.link-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 64px;
  padding: 12px 40px 12px 16px;
  border: 0;
  border-radius: var(--radius-button);
  background: rgba(0, 0, 0, .2);
  color: var(--craie);
  text-align: left;
  cursor: pointer;
}

.link-row::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .6;
}

.link-row__title { font-size: 16px; font-weight: 600; }
.link-row__hint { margin-top: 2px; font-size: 14px; opacity: .78; }

/* --- settings: the preview is a small hand, fanned the way the table will fan it ---------- */

.preview { --pw: 84px; display: flex; justify-content: center; padding-top: 4px; }
.preview[data-size="S"] { --pw: 76px; }
.preview[data-size="L"] { --pw: 96px; }

.preview__fan {
  position: relative;
  width: calc(var(--pw) + (var(--n, 7) - 1) * var(--pw) * .42);
  height: calc(var(--pw) * 1.8);
}

.preview .card {
  --card-w: var(--pw);
  position: absolute;
  top: 0;
  left: calc(var(--i, 0) * var(--pw) * .42);
  pointer-events: none;
}

.settings__note { font-size: 14px; opacity: .8; text-align: center; }

/* --- create table: seats in play order, yours first ---------------------------------------- */

.seats { min-width: 0; margin-inline: 0; margin-bottom: 0; padding: 0; border: 0; }
.seats__legend { margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 600; }

.seat { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.seat + .seat { margin-top: 10px; }
.seats > .field__hint { margin-top: 12px; }

.seat__no { align-self: start; padding-top: 12px; font: 700 20px/1 var(--font-index); text-align: center; opacity: .65; }
.seat--host { min-height: 50px; }
.seat--host .seat__no { grid-row: span 2; padding-top: 4px; }
.seat__who { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat__role { font-size: 14px; opacity: .78; }

/* the seat's number already says which player; the label stays for a screen reader */
.field--seat .field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- the table placeholder --------------------------------------------------------------- */

.table__code { font: 700 18px/1.2 var(--font-index); letter-spacing: .06em; }
.table__soon { font-size: 16px; opacity: .88; }

/* --- a phone on its side: the cards on the left, the form on the right, nothing below the fold */

@media (orientation: landscape) and (max-height: 560px) {
  .screen--signin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }
  .signin__top { grid-column: 1 / -1; padding-top: 8px; }
  .screen--signin .hero { grid-row: 2; padding: 0 0 12px; }
  .screen--signin .signin__panel { grid-row: 2; align-self: center; }
  .bouts { --bw: 64px; }
  .wordmark { margin-top: 10px; font-size: 34px; }
  .hero__tagline { font-size: 15px; }
}