/* Luminary onboarding: setup gate + wizard (parent office), sign-in (hang tags on the pegboard, PIN pad),
   learner welcome flow (shop wall), in-world error + offline pages. Tokens only; extends luminary.css. */

/* ------------------------------------------------------------------ shared */
.ob-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-head .brand { font-size: 1.2rem; }
.ob-error { margin: 0; font-size: .9rem; }
.ob-error:empty { display: none; }
.ob-center { align-items: center; text-align: center; }
.ob-center-row { justify-content: center; }
.ob-check { font-weight: 400; color: var(--ink-2); }
h1[tabindex="-1"]:focus:not(:focus-visible), h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
[aria-invalid="true"] { border-color: var(--bad) !important; box-shadow: 0 0 0 1px var(--bad); }
.chip { position: relative; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip:active { transform: translateY(1px); }
.chip:has(input:disabled) { opacity: .5; cursor: not-allowed; }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
.btn .icon:last-child:not(:first-child) { margin-right: -2px; }

/* reveal toggle inside a password field */
.ob-secret { position: relative; }
.ob-secret input { padding-right: 52px; }
.ob-reveal {
  position: absolute; right: 2px; top: 50%; translate: 0 -50%; width: 44px; height: 40px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.ob-reveal:hover { color: var(--ink); background: var(--surface-2); }
.ob-reveal[aria-pressed="true"] { color: var(--blue); }
.ob-pin { font-family: var(--font-mono); letter-spacing: .3em; font-size: 1.15rem; }

/* add-your-own row under a chip group */
.ob-adder { display: flex; gap: 8px; margin-top: 10px; max-width: 420px; }
.ob-adder input { flex: 1; min-width: 0; min-height: 40px; }

/* ------------------------------------------------------------------ setup wizard (parent office) */
.wz { display: grid; gap: 18px; padding-top: clamp(4px, 3vh, 32px); }
.wz-intro p { font-size: 1.05rem; }
.wz-progress { display: grid; gap: 0; }
.wz-progress .tape-track { height: 18px; }
.wz-marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wz-marks li { position: relative; padding-top: 8px; }
.wz-marks li::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5px; height: 8px; background: var(--ink-3); }
.wz-mark {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 2px 6px 2px 0; border: 0; background: none;
  font: 700 .88rem var(--font-body); color: var(--ink-3); cursor: default; text-align: left;
}
.wz-mark:not(:disabled) { cursor: pointer; color: var(--ink-2); }
.wz-mark:not(:disabled):hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.wz-tick { display: none; color: var(--good); }
.wz-tick .icon { width: 1.05em; height: 1.05em; stroke-width: 3; }
.wz-marks li.is-done .wz-tick { display: inline-flex; }
.wz-marks li.is-current .wz-mark { color: var(--ink); }
.wz-marks li.is-current::before { background: var(--ink); width: 2px; }
/* a step whose password/PIN boxes came back blank after a server error */
.wz-redo { display: none; color: var(--warn); }
.wz-redo .icon { width: 1.05em; height: 1.05em; stroke-width: 2.6; }
.wz-marks li.is-redo .wz-tick { display: none; }
.wz-marks li.is-redo .wz-redo { display: inline-flex; }
.wz-reenter { margin: 0; }

.wz-step { display: grid; gap: 20px; padding: 22px; }
.wz-step-head { display: grid; gap: 6px; }
.wz-step-head p { max-width: 62ch; }
.wz-grid { display: grid; gap: 14px 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 560px) { .wz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wz-grid.wz-grid-name { grid-template-columns: minmax(0, 1fr) 140px; }
.wz-learner { display: grid; gap: 16px; }
.wz-second { border-top: 1px solid var(--line); padding-top: 18px; }
.wz-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font-weight: 700; font-size: 1.05rem; margin-bottom: 2px; }
.wz-pins { display: grid; gap: 10px; }
.wz-pins + .wz-pins { border-top: 1px solid var(--line); padding-top: 16px; }
.wz-pins > .label { margin: 0; }
.wz-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
.wz-actions > .btn:only-child { margin-left: auto; }

.ob-addrow {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1.5px dashed var(--line); border-radius: var(--r-lg);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.ob-addrow:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue-soft) 45%, transparent); }
.ob-addrow:active { transform: translateY(1px); }
.ob-addrow .stack-sm { gap: 2px; }
.ob-addrow-icon { width: 38px; height: 38px; flex: none; border-radius: var(--r); display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }

/* starter rewards: rows, not cards */
.rw-list { display: grid; }
.rw { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.rw:first-child { border-top: 0; padding-top: 0; }
.rw-pick { display: flex; align-items: center; gap: 12px; min-height: 48px; min-width: 0; cursor: pointer; font-weight: 700; }
.rw-pick input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--blue); margin: 0; }
.rw-pick input[type="checkbox"]:disabled + .rw-icon, .rw-pick input[type="checkbox"]:disabled ~ .rw-title { opacity: .5; }
.rw-pick:has(input[type="checkbox"]:disabled) { cursor: not-allowed; }
.rw-pick input[type="text"] { flex: 1; min-width: 0; }
.rw-icon { width: 38px; height: 38px; flex: none; border-radius: var(--r); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); transition: background-color .2s ease, color .2s ease; }
.rw.is-on .rw-icon { background: var(--paint); color: var(--paint-ink); }
.rw-title { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.rw-cost { display: flex; align-items: center; gap: 6px; }
.rw-cost input { width: 92px; min-height: 40px; padding: 6px 10px; font-family: var(--font-mono); text-align: right; }
.rw-unit { color: var(--ink-3); display: inline-flex; }
.rw-count { font-weight: 700; }
.rw-count .hint { font-weight: 400; }
@media (max-width: 480px) {
  .wz-step { padding: 16px; }
  .rw-cost input { width: 76px; }
  .wz-grid.wz-grid-name { grid-template-columns: minmax(0, 1fr) 112px; }
}

/* ------------------------------------------------------------------ setup gate + old invite links (parent office) */
.ob-gate { width: 100%; max-width: 560px; margin-inline: auto; padding-top: clamp(4px, 3vh, 32px); display: grid; gap: 18px; }
.ob-gate-form { display: grid; gap: 16px; padding: 22px; }
.ob-code-input { font: 500 1.15rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.ob-code-input::placeholder { letter-spacing: 0; text-transform: none; font-family: var(--font-body); }
.ob-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; max-width: 62ch; }
.ob-steps code { font: 500 .88rem var(--font-mono); overflow-wrap: anywhere; padding: 1px 5px; border-radius: var(--r-sm); background: var(--surface-2); }
.ob-join { max-width: 640px; margin-inline: auto; padding-top: clamp(4px, 3vh, 32px); }

/* in-world error / offline: an empty painted outline on a patch of pegboard */
.ob-error-page { padding-top: clamp(16px, 6vh, 64px); gap: 18px; }
.ob-patch { position: relative; width: min(100%, 260px); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 18px; }
.ob-patch .slot-art { width: 112px; height: 112px; }
.ob-patch .slot-outline { stroke-width: 1.1; }
.ob-code { position: absolute; right: 14px; bottom: 14px; rotate: -2deg; }
.ob-tube { position: absolute; top: 14px; left: 22%; right: 22%; height: 6px; border-radius: 3px; background: var(--surface-3); box-shadow: inset 0 1px 0 var(--line); }

/* ------------------------------------------------------------------ sign-in: tags on the pegboard */
.login { display: grid; gap: 20px; padding-top: clamp(4px, 4vh, 40px); }
.login-head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.login-mark { width: 52px; height: 52px; border-radius: var(--r-lg); }
.login-mark .icon { width: 30px; height: 30px; }
.login-board { padding: 30px 18px 34px; }
.hangtags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 22px; }

.hangtag {
  position: relative; display: grid; justify-items: center; gap: 10px; width: 150px; margin-top: 16px; padding: 36px 12px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r) var(--r) var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-hung); color: var(--ink); font: inherit; cursor: pointer;
  rotate: var(--tilt, 0deg); transform-origin: 50% 0;
  transition: rotate .2s cubic-bezier(.16, 1, .3, 1), translate .2s cubic-bezier(.16, 1, .3, 1), border-color .15s ease, box-shadow .15s ease;
}
button.hangtag:hover, button.hangtag:focus-visible { rotate: 0deg; translate: 0 -3px; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow-hung); }
button.hangtag:active { translate: 0 0; }
.hangtag-hole { position: absolute; top: 11px; left: 50%; translate: -50% 0; width: 14px; height: 14px; border-radius: 50%; background: var(--board); border: 1.5px solid var(--line); }
.hangtag-hole::before { content: ""; position: absolute; left: 50%; bottom: 50%; translate: -50% 0; width: 2px; height: 30px; border-radius: 1px; background: var(--ink-2); }
.hangtag-hole::after { content: ""; position: absolute; left: 50%; bottom: calc(50% + 26px); translate: -50% 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 3px var(--board); }
.hangtag-name { font-size: .92rem; padding: 3px 10px 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hangtag.is-static { cursor: default; rotate: -1.5deg; }
.hangtag.is-ghost { background: transparent; border-style: dashed; box-shadow: none; color: var(--ink-3); cursor: default; }
.hangtag.is-ghost .avatar { background: var(--surface-2); color: var(--ink-3); }
.hangtags-empty { display: grid; justify-items: center; gap: 14px; text-align: center; }
.login-office { display: flex; justify-content: center; }
@media (max-width: 420px) {
  .hangtags { gap: 26px 16px; }
  .hangtag { width: 136px; padding: 34px 10px 16px; }
  .login-board { padding-inline: 12px; }
}
.pin-plate:focus { outline: none; }

.pin-plate { display: grid; justify-items: center; gap: 14px; width: 100%; max-width: 340px; margin: 0 auto; padding: 20px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pin-who { display: flex; align-items: center; gap: 12px; justify-self: stretch; }
.pin-who .avatar { width: 48px; height: 48px; }
.pin-who .avatar .icon { width: 26px; height: 26px; }
.pin-who p { display: grid; line-height: 1.3; }
.pin-who strong { font-size: 1.1rem; }
.pinpad button { transition: border-color .15s ease, background-color .15s ease; }
.pinpad button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pinpad button:disabled, .pinpad button:disabled:hover { opacity: .4; cursor: not-allowed; border-color: var(--line); }
.pinpad .pin-key-soft { color: var(--ink-2); }
.pinpad .pin-go { background: var(--blue); color: var(--blue-ink); border-color: transparent; }
.pinpad .pin-go:hover:not(:disabled) { filter: brightness(1.08); border-color: transparent; }
.pinpad .pin-go:disabled { background: var(--surface-2); color: var(--ink-3); opacity: 1; }
.login-msg { width: 100%; min-height: 4px; }
.login-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); font-weight: 700; font-size: .95rem; text-align: left; }
.login-note .icon { color: var(--blue); margin-top: 2px; }
.lockout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--warn-soft); color: var(--ink); text-align: left; font-size: .95rem; }
.lockout strong { display: block; }
.lockout .mono { font-weight: 500; }
.lockout-icon { color: var(--warn); display: inline-flex; margin-top: 2px; }
.login-parent { width: 100%; max-width: 420px; margin: 0 auto; display: grid; gap: 14px; }

/* ------------------------------------------------------------------ learner welcome (the shop wall) */
.wl { display: grid; gap: 18px; padding-top: clamp(4px, 2vh, 24px); }
.wl-top { display: flex; align-items: center; gap: 14px; }
.wl-tape { flex: 1; }
.wl-tape .tape-track { height: 14px; }
.wl-stage { font: 500 .8rem var(--font-mono); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-skiptour { min-height: 36px; padding: 6px 10px; }
.wl-form { display: block; }
.wl-screen { display: grid; gap: 18px; }
.wl-lead { font-size: 1.1rem; color: var(--ink-2); max-width: 56ch; }
.wl-hangboard { display: flex; justify-content: center; padding: 22px 16px 26px; }
.wl-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.wl-actions .row { margin-left: auto; gap: 8px; }
.wl-actions-center { justify-content: flex-start; }
.wl-reply { font-weight: 700; }

/* tutor names: unpicked = paint-pen outline; picked = stamped black label tape */
.wl-names { display: flex; flex-wrap: wrap; gap: 12px; }
.wl-name { position: relative; cursor: pointer; }
.wl-name input { position: absolute; opacity: 0; pointer-events: none; }
.wl-name span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 18px; border: 2px solid var(--outline); border-radius: var(--r-sm);
  font: 500 1.1rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wl-name:hover span { border-color: var(--blue); }
.wl-name input:checked + span { background: var(--label-tape); border-color: var(--label-tape); color: var(--label-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .18); box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--blue); }
.wl-name input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.wl-name-own span { font-family: var(--font-body); font-weight: 700; letter-spacing: 0; text-transform: none; }
.wl-own { max-width: 340px; }
.wl-stamp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-stamp-tag { font-size: 1rem; padding: 4px 12px 5px; }

/* avatar tools hang in painted outlines; picking one paints it in */
.wl-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px; }
.wl-tool { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: var(--r); cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.wl-tool input { position: absolute; opacity: 0; pointer-events: none; }
.wl-tool .slot-art { width: 64px; height: 64px; }
.wl-tool:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.wl-tool:hover .slot-outline { stroke: var(--blue); }
.wl-tool:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.wl-tool.is-picked { background: color-mix(in srgb, var(--surface) 75%, transparent); box-shadow: 0 0 0 2px var(--blue), var(--shadow-hung); }
.wl-tool.is-picked .slot-outline { opacity: 0; }
.wl-tool.is-picked .slot-fill { opacity: 1; clip-path: inset(0 0 0 0); animation: paint-sweep .5s cubic-bezier(.16, 1, .3, 1) both; }
.wl-tool.is-picked .slot-detail { opacity: 1; }
.wl-tool-name { font-weight: 700; font-size: .9rem; }
@media (max-width: 480px) {
  .wl-tools { padding: 12px 8px; gap: 4px; }
  .wl-tool .slot-art { width: 52px; height: 52px; }
}

.wl-count { font-weight: 700; }
.wl-count .muted { font-weight: 400; }
.wl-demo { pointer-events: none; user-select: none; }
.wl-demo-btn { justify-self: start; }
.wl-demo-tape { padding: 4px 0; }
.wl-demo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) {
  .wl-demo-wall .slot { min-height: 0; padding: 8px 2px; }
  .wl-demo-wall .slot-art { width: 58px; height: 58px; }
  .wl-demo-wall .slot-title { font-size: .85rem; }
}
.wl-switch { display: flex; justify-content: center; margin-top: 28px; }

.wl-done { justify-items: center; text-align: center; gap: 16px; }
.wl-done .wl-lead { margin-inline: auto; }
.hangtag.is-hung { width: 180px; rotate: -1deg; }
.wl-done-slot { min-height: 0; padding: 0; }
.wl-done-slot .slot-art { width: 96px; height: 96px; }
.wl-bonus { justify-content: center; font-weight: 700; }