/* The new flow's door, number change and project link, dressed in the pick (look.css owns the tokens,
   the rail, panels, buttons, fields and status lines; this file only lays these three pages out).
   Every rule waits for body.look.flow. */

.look.flow main.plain,
.look.flow main.wrap { width: auto; margin: 0; padding: 0; }

/* The door: the form on the work ground, one step at a time, never centred (P-08) */
.look .door { max-width: 34rem; }
.look .door .lk-head { margin-bottom: 28px; }
.look.flow form.step,
.look.flow form.act { display: grid; gap: 0; margin: 0; }
.look.flow form.step > label,
.look.flow form.act label { margin-top: 18px; }
.look.flow form.step > label:first-child,
.look.flow form.step > .sent-line + label { margin-top: 0; }
.look.flow form .hint { margin: -2px 0 10px; }
.look.flow form .button { justify-self: start; margin-top: 24px; }
.look.flow form.step[hidden],
.look.flow .code-panel[hidden],
.look.flow [data-texting][hidden] { display: none; }

.look .sent-line { margin: 0 0 18px; font-size: 1.0625rem; }
.look .sent-line:empty { display: none; }

/* The code field: wide, spaced figures so six numbers read at a glance */
.look.flow input[autocomplete="one-time-code"] { max-width: 16rem; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }

/* The texting box: the consent stays apart from everything else, split off by a chalk dash */
.look .texting { margin: 22px 0 0; padding-top: 14px; border-top: 2px dashed var(--lk-dash); }
.look .texting .choice { font-weight: 400; }
.look .texting .hint { margin: 0 0 0 40px; }
.look .texting .hint a { font-weight: 700; }
/* Above the phone code it splits off below instead: the code checks itself at its sixth number, so the
   box is met before the code, not after it */
.look form.step > .texting:first-child { margin: 0 0 26px; padding: 0; border-top: 0; }
/* A note from Vince on an invite: his words, on a dashed chalk card, not an accent bar */
.look .welcome { margin: 0 0 28px; padding: 16px 20px; border: 2px dashed var(--lk-dash); border-radius: var(--lk-cut); }
.look .welcome p { margin: 0; font-size: 1.125rem; }

.look .aside { margin: 28px 0 0; }

/* The project link: what is waiting on you at the left, the people and the comments beside it */
.look .project-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 40px 56px; align-items: start; }
.look .project-main, .look .project-side { display: grid; gap: 28px; min-width: 0; align-content: start; }
.look .project .actions > .hint { margin-bottom: 4px; }
.look .project .actions form.act + form.act { margin-top: 4px; }
.look .project .actions form.act:has(fieldset) { margin-top: 24px; padding-top: 20px; border-top: 2px dashed var(--lk-dash); }
.look .project .actions form.act legend + label { margin-top: 6px; }
.look .project .actions form.act fieldset .button { justify-self: start; }
.look .project .actions .muted { margin: 12px 0 0; }
.look .project h2 { margin-bottom: 8px; }
.look .project .code-panel h2 { margin-bottom: 16px; }
.look .project .done-line { margin: 0; }
.look .people-list, .look .comment-list { list-style: none; margin: 0; padding: 0; }
.look .people-list li { padding: 12px 0; border-top: 2px dashed var(--lk-dash); }
.look .people-list li:last-child { border-bottom: 2px dashed var(--lk-dash); }
.look .comment-list { display: grid; }
.look .comment { padding: 14px 0; border-top: 2px dashed var(--lk-dash); }
.look .comment p { margin: 0; }
.look .comment .comment-body { overflow-wrap: anywhere; }
.look .comment .hint { margin-top: 4px; }
.look .comments form.act { margin-top: 10px; }
.look .comments textarea { min-height: 110px; }

/* ---------- The door's sign-in, as Margin Notes draws it (look-front) ----------
   The details at the left; a dashed chalk divider; "Then the codes" at the right with six boxes per
   code; then what to do when a number will not work. On a phone the columns stack, split by dashes.
   Light keeps the structure and takes Chalk Panels' light panels for the forms. */
.look .door.door-in { max-width: 66rem; }
.look .door-grid { display: grid; grid-template-columns: minmax(0, 33.5rem) minmax(0, 29.875rem); align-items: start; }
.look .door-main { padding-right: clamp(32px, 3.9vw, 56px); min-width: 0; }
.look .door-codes { padding-left: clamp(32px, 3.9vw, 56px); border-left: 2px dashed var(--lk-dash); min-width: 0; align-self: stretch; }
.look .door-codes > h2 { margin: 0 0 18px; }
html:not([data-theme="light"]) .look .door-in .panel-top { display: none; }
.look .door-in .panel-top { margin: 0 0 18px; }
.look.flow .door-in .panel-top .hint { margin: 0; }
.look .door-in .panel-top .panel-title { margin: 0 0 4px; }
.look .door-in .panel-top + label { margin-top: 0; }
.look.flow .door-in form .hint.below { margin: 10px 0 0; }
.look.flow .door-in form .button { margin-top: 30px; }
.look .door-in .fine { margin: 22px 0 0; color: var(--lk-ink-2); font-size: 0.9375rem; line-height: 1.55; max-width: 28rem; }
.look .door-in .change-number { justify-self: start; margin-top: 18px; }
.look .door-in form.is-sent input { border-style: solid; }

/* The +1 inside the mobile field, behind a dashed chalk tick */
.look .tel-field { position: relative; }
.look .tel-field .pre {
  position: absolute; left: 2px; top: 2px; bottom: 2px; width: 52px; display: grid; place-items: center;
  color: var(--lk-ink-2); font-weight: 700; pointer-events: none;
}
.look .tel-field .pre::after { content: ""; position: absolute; right: 0; top: 14px; bottom: 14px; border-right: 2px dashed var(--lk-field-line); opacity: 0.6; }
.look.flow .tel-field input[type="tel"] { padding-left: 66px; }

/* The codes: a label, its sub line, six boxes */
.look .door-codes .lab { margin: 0 0 4px; font-weight: 700; }
.look .door-codes .sub { margin: 0 0 14px; color: var(--lk-ink-2); font-size: 0.9375rem; line-height: 1.5; }
.look .door-codes .cb-row + .lab { margin-top: 30px; }
.look.flow .door-codes form.step > label { margin: 0 0 4px; }
.look .door-codes .sent-line.sub { margin: 0 0 14px; font-size: 0.9375rem; }
.look .code-boxes { position: relative; display: block; width: max-content; max-width: 100%; }
.look .cb-row { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: 8px; }
.look .cb {
  display: grid; place-items: center; min-width: 0; height: 58px; position: relative;
  border: 2px solid var(--lk-field-line); border-radius: 8px; background: var(--lk-field); color: var(--lk-field-ink);
  font-weight: 700; font-size: 1.375rem; font-variant-numeric: tabular-nums;
}
.look .cb.is-in { border-color: var(--lk-blue); }
.look .cb.at { border-color: var(--lk-field-ink); box-shadow: 0 0 0 3px rgba(74, 143, 224, 0.45); }
.look .cb.at::after { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; border-left: 2px solid var(--lk-field-ink); animation: door-caret 1.1s steps(1) infinite; }
@keyframes door-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .look .cb.at::after { animation: none; } }
.look .cb-row.is-ahead .cb { border-style: solid; border-color: var(--lk-field-line); }
html[data-theme="light"] .look .codes-ahead .cb-row + .lab { margin-top: 26px; padding-top: 24px; border-top: 2px dashed var(--lk-dash); }
/* The real field lies over the boxes, its own figures and caret hidden (door.js keeps it to six numbers) */
.look.flow .code-boxes input[autocomplete="one-time-code"] {
  position: absolute; inset: 0; z-index: 1; width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0 0 0 18px;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none; outline: none;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 1rem; letter-spacing: 0;
}
.look .code-boxes input::selection { background: transparent; color: transparent; -webkit-text-fill-color: transparent; }

/* Each code checks itself at its sixth number (no check button): while it is checked its boxes go dashed
   and its line says so; a code that checked out keeps blue boxes and the pick's tick line, read only; a
   code called wrong takes chalk boxes, selected whole, its message under it */
.look .codes-lead { margin: -8px 0 18px; }
.look .code-boxes.is-checking .cb { border-style: dashed; }
.look .code-boxes.is-ok .cb { border-color: var(--lk-blue); }
.look .code-boxes.is-bad .cb { border-color: var(--lk-field-ink); }
.look .code-boxes.is-bad input:focus + .cb-row .cb { box-shadow: 0 0 0 3px rgba(74, 143, 224, 0.45); }
.look .status.wait { color: var(--lk-ink-2); font-weight: 400; }
.look form.step[data-passed] .texting,
.look form.step[data-passed] .code-links { display: none; }
.look form.step[data-passed] ~ form.step:not([hidden]) {margin-top: 26px; padding-top: 24px; border-top: 2px dashed var(--lk-dash); }
@media (prefers-reduced-motion: no-preference) {
  .look .code-boxes.is-checking .cb { animation: door-wait 1.2s ease-in-out infinite; }
  @keyframes door-wait { 50% { opacity: 0.55; } }
}

/* Under the code: send again and change the number, two chalk links side by side */
.look .code-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 18px 0 0; }
/* Dark draws no rule inside "Then the codes"; light keeps one between the two code groups, as each concept does */
.look .email-ahead { margin-top: 30px; }
html[data-theme="light"] .look .email-ahead { padding-top: 24px; border-top: 2px dashed var(--lk-dash); }
/* The two code headings at one size, the concept's bold heading */
.look .door-codes .lab,
.look.flow .door-codes form.step > label { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }

/* When a number will not work: under a chalk dash, a plain line and a chalk label */
.look .door-help { margin-top: 36px; padding-top: 30px; border-top: 2px dashed var(--lk-dash); }
.look .door-help h2 { margin: 0 0 8px; }
.look .door-help .aside { margin: 18px 0 0; }
.look .door-notice {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 16px; max-width: none;
  background: var(--lk-bad-ground); color: var(--lk-bad-ink); border-radius: 6px 8px 5px 7px; font-weight: 700; font-size: 0.9375rem; line-height: 1.5;
}
.look .door-notice::before { content: "!"; flex: none; width: 10px; font-weight: 700; }
html[data-theme="light"] .look .door-notice { background: var(--lk-chalk); color: var(--lk-board); }

/* Light: the forms and the codes waiting to come sit on Chalk Panels' light panels */
html[data-theme="light"] .look .door-codes .codes-ahead {
  --lk-ink: var(--lk-panel-ink); --lk-ink-2: var(--lk-panel-ink-2); --lk-dash: var(--lk-panel-dash);
  background: var(--lk-panel); color: var(--lk-ink); border-radius: 8px; padding: clamp(20px, 2.4vw, 32px);
}
html[data-theme="light"] .look .door-codes { border-left-color: transparent; }
/* The email code inside the phone code's panel: one panel, split by a dashed rule, not a panel in a panel */
html[data-theme="light"] .look .door-codes form .email-ahead { background: none; border-radius: 0; padding: 24px 0 0; }

@media (max-width: 1100px) {
  .look .door-grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
  .look .door-main { padding-right: 0; }
  .look .door-codes { padding: 30px 0 0; margin-top: 34px; border-left: 0; border-top: 2px dashed var(--lk-dash); }
  html[data-theme="light"] .look .door-codes { border-top-color: transparent; padding-top: 0; }
}
@media (max-width: 600px) {
  .look .cb-row { gap: 6px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .look .code-boxes { width: 100%; }
  .look .door-in .change-number { justify-self: start; }
  /* The two links keep one row at 390, as the concept draws them */
  .look .code-links { flex-wrap: nowrap; justify-content: flex-start; gap: 24px; }
  .look .code-links .lk-link { padding: 0; white-space: nowrap; font-size: 0.875rem; }
}

@media (max-width: 1240px) {
  .look .project-grid { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
}
@media (max-width: 600px) {
  .look.flow form .button { justify-self: stretch; width: 100%; }
  .look.flow input[autocomplete="one-time-code"] { max-width: none; }
  .look .texting .hint { margin-left: 0; }
}