/* css/compte.css
   The account pages (lot R1, 27.10.2026): sign in, sign up, forgotten
   password, set a password, verify the e-mail, enrol a device; since lot
   R2, take the Direction and the phone's photo of the plan. One card in
   the middle of the window, the logo, a title, the fields, the gold
   button, the links, the languages and who runs the site. Layer pages,
   declared in css/tokens.css; values only through its variables. */

@layer pages {

  /* ---- The page: the card centred in the window, above the footer's
     band ---- */
  .auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 28px);
    padding: 24px;
    color: var(--cs-fg);
  }
  .auth-page:has(> .ro-home) { position: relative; padding-top: 68px; }
  .auth-page > .ro-home { position: absolute; top: 16px; left: 16px; }

  .auth-card {
    width: 100%;
    max-width: 440px;
    padding: 40px 36px 36px;
    border: var(--cs-lw) solid transparent;
    border-radius: var(--cs-r-l);
    background: linear-gradient(var(--cs-panel), var(--cs-panel)) padding-box, var(--cs-line-grad) border-box;
    animation: auth-card-in .4s ease-out;
  }
  @media (max-width: 480px) {
    .auth-card { padding: 32px 24px 28px; }
  }
  @keyframes auth-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ---- The logo, a link home; the gold one at night, the ink one on
     porcelain. One light sweeps across the gold when the page opens
     (01.10.2026): a band masked by the logo itself, once, and never when
     the reader asks for less motion ---- */
  .auth-brand {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    text-align: center;
  }
  .auth-brand-link { display: flex; justify-content: center; width: 100%; border-radius: var(--cs-r-xl); pointer-events: none; }
  .auth-brand-link > img { pointer-events: auto; }
  .auth-brand-logo { display: block; max-height: 100px; width: auto; object-fit: contain; content: url("../img/logo/md/logo-dark-01-r-or.svg"); }
  :root[data-theme="ivory"] .auth-brand-logo { content: url("../img/logo/md/logo-ivory-01-r.svg"); }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-theme="ivory"]) .auth-brand::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      aspect-ratio: 716 / 225;
      transform: translateX(-50%);
      background: linear-gradient(105deg, transparent 0 40%, var(--cs-logo-glint) 50%, transparent 60% 100%) 0 0 / 300% 100% no-repeat;
      background-position: 100% 0;
      -webkit-mask: url("../img/logo/md/logo-dark-01-r-or.svg") 0 0 / 100% 100% no-repeat;
      mask: url("../img/logo/md/logo-dark-01-r-or.svg") 0 0 / 100% 100% no-repeat;
      pointer-events: none;
      animation: auth-logo-sweep 1.8s cubic-bezier(.45, .05, .35, 1) .7s 1 both;
    }
  }
  @keyframes auth-logo-sweep {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
  }

  .auth-divider { width: 160px; height: 1px; margin: 20px auto; background: var(--cs-line-grad); }

  .auth-heading { margin: 0 0 4px; color: var(--cs-fg); font: 600 var(--cs-fs-3xl)/1.3 var(--cs-sans); }
  .auth-sub { margin: 0 0 20px; color: var(--cs-fg-2); font-size: var(--cs-fs-lg); }

  /* A message above the form (the address confirmed, ...) */
  .auth-info {
    display: none;
    padding: 10px 14px;
    border-radius: var(--cs-r-m);
    background: var(--cs-ok-bg);
    color: var(--cs-ok);
    font-size: var(--cs-fs-md);
  }
  .auth-info.visible { display: block; }

  /* ---- The form ---- */
  .auth-form { display: grid; gap: 16px; margin: 0; }

  .auth-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--cs-fg-2);
    font: 600 12.5px/1.4 var(--cs-sans);
  }
  .auth-field input { color: var(--cs-fg); font: 400 16px var(--cs-sans); }
  .auth-field input:not([type="checkbox"], [type="radio"]) {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: var(--cs-lw) solid transparent;
    border-radius: var(--cs-r-m);
    background: linear-gradient(var(--cs-bg), var(--cs-bg)) padding-box, var(--cs-line-grad) border-box;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .auth-field input:not([type="checkbox"], [type="radio"]):focus { outline: 2px solid var(--cs-gold); outline-offset: 1px; }
  .auth-field input::placeholder { color: var(--cs-fg-3); opacity: 1; }
  /* The browser's own colours of a remembered address stay out. */
  .auth-field input:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus) {
    -webkit-box-shadow: 0 0 0 40px var(--cs-bg) inset;
    -webkit-text-fill-color: var(--cs-fg);
    caret-color: var(--cs-fg);
    transition: background-color 5000s ease-in-out 0s;
  }
  .auth-field input:is([type="checkbox"], [type="radio"]) { accent-color: var(--cs-gold); }

  /* ---- The gold button ---- */
  .auth-submit {
    width: 100%;
    height: 44px;
    margin-top: 4px;
    padding: 13px 20px;
    border: 0;
    border-radius: var(--cs-r-m);
    background: var(--cs-sheen);
    color: var(--cs-gold-ink);
    font: 600 var(--cs-fs-xl) var(--cs-sans);
    letter-spacing: .15px;
    transition: all .2s ease;
  }
  .auth-submit:hover:not(:disabled) { filter: brightness(1.05); }
  .auth-submit:disabled { opacity: .55; }
  .auth-submit:focus-visible { outline: 2px solid var(--cs-gold); outline-offset: 2px; }

  /* ---- The links under the button: several side by side, wrapping in
     the languages where they are long ---- */
  .auth-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 8px;
    color: var(--cs-gold);
  }
  .auth-footer a { font-size: var(--cs-fs-md); transition: color .15s ease; }

  .auth-error { min-height: 18px; margin: 4px 0 13px; color: var(--cs-crit); font-size: var(--cs-fs-md); }
  /* The same place says good news too (a code sent): in its colour. */
  .auth-error.is-ok { color: var(--cs-ok); }
  .auth-hint { color: var(--cs-fg-3); }

  /* ---- The languages ---- */
  .auth-lang-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid transparent;
    border-image: var(--cs-line-grad) 1 / var(--cs-lwn);
  }
  .auth-lang-bar .lang-btn {
    min-width: 40px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--cs-r-m);
    background: transparent;
    color: var(--cs-fg-2);
    font: 500 var(--cs-fs-md) var(--cs-sans);
    letter-spacing: .3px;
    transition: all .15s ease;
  }
  .auth-lang-bar .lang-btn:hover { color: var(--cs-fg); }
  .auth-lang-bar .lang-btn.active { background: var(--cs-sel); color: var(--cs-fg); }

  /* ---- Who signs up (17.10.2026): the declared role as radio rows of
     48 px, the sentence for Gestion and Service under them; the civility
     as segmented buttons over its radios (js/md-chips.js choiceGroup); a
     discreet hint under each. Shared by the invitation (set-password) ---- */
  .auth-choice { min-width: 0; margin: 0; padding: 0; border: 0; }
  .auth-choice legend { margin: 0 0 4px; padding: 0; color: var(--cs-fg-2); font: 600 12.5px var(--cs-sans); }
  .auth-field .auth-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin: 0;
    color: var(--cs-fg);
    font-size: 13.5px;
    font-weight: 400;
    cursor: pointer;
  }
  .auth-field input[type="radio"] { flex: none; width: 20px; min-width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; border: 0; }
  .auth-field input[type="checkbox"] { flex: none; width: 18px; min-width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; padding: 0; border: 0; border-radius: 2px; }
  .auth-field input:is([type="radio"], [type="checkbox"]):focus-visible { outline: 2px solid var(--cs-gold); outline-offset: 2px; }
  .auth-civility.md-seg { width: 100%; margin: 4px 0 0; }
  .auth-hint { margin: 6px 0 0; font-size: var(--cs-fs-sm); line-height: 1.45; }
  .auth-hint--note { margin: 4px 0 0; padding: 10px 12px; border-radius: var(--cs-r-m); background: var(--cs-panel-2); color: var(--cs-fg); font-size: var(--cs-fs-md); }
  /* The profile asked of an invited person (set-password.html). */
  .auth-profile { display: grid; gap: 16px; }

  /* The terms, a checkbox and a sentence whose two links read as links
     (Greg, 18.10.2026: "a souligner legerement") */
  .auth-field.auth-terms label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--cs-fg);
    font-size: 13.5px;
    font-weight: 400;
    cursor: pointer;
  }
  .auth-field.auth-terms a {
    text-decoration: underline 1px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 3px;
  }
  .auth-field.auth-terms a:is(:hover, :focus-visible) { text-decoration-color: currentColor; }

  /* ---- What a password still lacks: each condition met fades out ---- */
  .pwd-hints { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -4px 0 8px; padding: 0 2px; }
  .pwd-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    max-height: 24px;
    overflow: hidden;
    color: var(--cs-fg-3);
    font-size: var(--cs-fs-sm);
    opacity: 1;
    transition: all .3s ease;
  }
  .pwd-hint.valid { max-height: 0; margin: 0; padding: 0; color: var(--cs-ok); opacity: 0; }
  .pwd-hint-icon { color: var(--cs-crit); font-size: var(--cs-fs-xs); transition: color .2s; }

  /* ---- The enrolment of a service device (enroll.html, S7 lot 6): the
     six digits, the device it would become, then done ---- */
  /* The six digits, spaced. (A 28 px size written for them lost, in the
     old sheets, to the field's own: 16 px is what was drawn.) */
  .enr-code { letter-spacing: .3em; text-align: center; }
  .enr-step { display: grid; gap: 16px; }
  .enr-confirm {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: var(--cs-r-xl);
    background: var(--cs-panel-2);
    box-shadow: inset 0 0 0 1px var(--cs-line-2);
  }
  .enr-confirm > .md-icon { flex: none; font-size: 32px; }
  .enr-question { margin: 0; color: var(--cs-fg); font: 400 18px/26px var(--cs-sans); }
  .enr-team { margin: 6px 0 0; color: var(--cs-fg-2); font: 400 var(--cs-fs-lg)/20px var(--cs-sans); }
  .enr-countdown { margin: 0; color: var(--cs-fg-2); font: 500 var(--cs-fs-lg)/20px var(--cs-sans); font-variant-numeric: tabular-nums; text-align: center; }
  .enr-countdown.is-late { color: var(--cs-crit); }
  .enr-note { margin: 0; padding: 10px 12px; border-radius: var(--cs-r-m); background: var(--cs-panel-2); color: var(--cs-fg); font: 400 var(--cs-fs-md)/1.45 var(--cs-sans); }
  .enr-note strong { color: var(--cs-fg); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
  .enr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .enr-link {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--cs-gold);
    font: 500 var(--cs-fs-lg)/20px var(--cs-sans);
  }
  .enr-link:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--cs-gold) 8%, transparent); }
  .enr-link:focus-visible { outline: 2px solid var(--cs-gold); outline-offset: 2px; }
  .enr-done { margin: 0; color: var(--cs-fg); font: 400 18px/26px var(--cs-sans); text-align: center; }
  .enr-done-icon { display: block; margin: 0 auto; font-size: 48px; }

  /* ---- Taking the Direction of a restaurant (direction.html, 17.10.2026):
     the invitation, the form, then the end (done, declined, or a link that
     no longer works) ---- */
  .dp-card .auth-heading { margin-bottom: 8px; }
  :is(.dp-loading, .dp-intro, .dp-what, .dp-account) {
    margin: 0 0 12px;
    color: var(--cs-fg-2);
    font: 400 var(--cs-fs-lg)/20px var(--cs-sans);
    text-align: left;
  }
  .dp-intro { color: var(--cs-fg); font-size: 16px; line-height: 24px; }
  .dp-account { color: var(--cs-fg); }
  .dp-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .dp-terms { display: flex; align-items: flex-start; gap: 10px; font: 400 var(--cs-fs-md)/18px var(--cs-sans); text-align: left; cursor: pointer; }
  .dp-terms input { flex: none; margin-top: 2px; }
  .dp-decline {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px;
    border: 0;
    background: none;
    color: var(--cs-fg-2);
    font: 500 var(--cs-fs-lg)/20px var(--cs-sans);
  }
  .dp-decline:hover { color: var(--cs-fg); text-decoration: underline; }
  .dp-end { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .dp-end-icon { color: var(--cs-gold); font-size: 48px; }
  .dp-end[data-end="link"] .dp-end-icon { color: var(--cs-fg-2); }
  .dp-end-title { margin: 0; color: var(--cs-fg); font: 500 var(--cs-fs-2xl)/28px var(--cs-sans); }
  .dp-end-text { margin: 0; color: var(--cs-fg-2); font: 400 var(--cs-fs-lg)/20px var(--cs-sans); }
  .dp-open { display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; }
  @media (max-width: 600px) {
    .dp-names { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---- The phone's side of the plan's photo (photo.html, 03.10.2026):
     waiting, taking, sent ---- */
  .ph-state { display: flex; flex-direction: column; gap: 14px; }
  .ph-wait { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--cs-fg); font: 500 var(--cs-fs-xl)/22px var(--cs-sans); }
  .ph-spin {
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cs-line);
    border-top-color: var(--cs-gold);
    border-radius: 50%;
    animation: ph-rot 1s linear infinite;
  }
  @keyframes ph-rot { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .ph-spin { animation: none; } }
  .ph-tips { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .ph-tips li { display: flex; align-items: center; gap: 10px; color: var(--cs-fg); font: 400 var(--cs-fs-lg)/20px var(--cs-sans); }
  .ph-tips .md-icon { color: var(--cs-fg-2); font-size: 20px; }
  .ph-take { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .ph-take .md-icon { font-size: 20px; }
  .ph-link {
    align-self: center;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--cs-gold);
    font: 500 var(--cs-fs-lg)/20px var(--cs-sans);
  }
  .ph-link:hover { background: color-mix(in srgb, var(--cs-gold) 8%, transparent); }
  .ph-error:empty { display: none; }
  .ph-preview { display: block; width: 100%; max-height: 40vh; object-fit: contain; border-radius: var(--cs-r-xl); background: var(--cs-panel-2); }
  /* The picture being sent, under the die (js/md-busy.js): room for the die
     while the picture is still being drawn. */
  .ph-shot { position: relative; min-height: 120px; border-radius: var(--cs-r-xl); }
  .ph-end { align-items: center; text-align: center; }
  .ph-end h2 { margin: 0; color: var(--cs-fg); font: 400 var(--cs-fs-2xl)/28px var(--cs-sans); }
  .ph-end .auth-sub { margin: 0; }
  .ph-big { color: var(--cs-gold); font-size: 48px; }

  /* ---- Who runs the site, written in the page itself (27.09.2026):
     TWINT, through Stripe, reads it without running the scripts ---- */
  .site-id {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    margin: 22px 0 4px;
    color: var(--cs-fg-3);
    font-size: var(--cs-fs-sm);
    line-height: 1.6;
    text-align: center;
    opacity: .8;
  }
}