/* Contact form and its inbox. Design v2 tokens (design-v2.css); the puzzle reuses the basalt columns. */

.contact { max-width: 760px; }
.contact__head { padding: 56px 0 30px; }
.contact__title { margin: 0; font-family: var(--serif); font-weight: 560; font-size: clamp(34px, 5.4vw, 52px); line-height: 1.06;
  letter-spacing: -0.015em; font-variation-settings: "SOFT" 100, "opsz" 72; }
.contact__lede { margin: 16px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.mono { font-family: var(--mono); font-size: 0.92em; color: var(--sky); }

.contact__form { display: grid; gap: 26px; padding-bottom: 24px; }
.contact__fields { display: grid; gap: 22px; }
.contact__label { display: flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.contact__label .opt, .contact__label .req, .contact__label .count { font-weight: 400; font-size: 12.5px; color: var(--text-3); }
.contact__label .count { margin-left: auto; font-family: var(--mono); }
.contact__row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.cfield { display: block; }
.contact .input {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font: 15.5px/1.5 var(--font); transition: border-color .15s, box-shadow .15s;
}
.contact .input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); }
.contact__msg { resize: vertical; min-height: 150px; }

.topics { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: 14px; color: var(--text-2); cursor: pointer; transition: all .15s; }
.chip input:checked + span { border-color: var(--sky); background: var(--sky-soft); color: var(--text); }
.chip input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }
.topic-note { padding: 14px 18px; border-radius: 14px; background: var(--sky-soft); box-shadow: inset 0 0 0 1px var(--sky-line); }
.topic-note p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.topic-note strong { color: var(--text); }

.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- The puzzle ---------- */
.puzzle { padding: 14px 16px 12px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.puzzle__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.puzzle__head .contact__label { margin: 0; }
.puzzle__stage { margin: 12px auto 4px; max-width: 460px; cursor: crosshair; touch-action: manipulation; }
.puzzle__art { display: block; width: 100%; height: auto; }
.puzzle__art .f-top, .puzzle__art .f-left, .puzzle__art .f-front, .puzzle__art .f-right { stroke: var(--a-line); stroke-width: 1.4; stroke-linejoin: round; }
.puzzle__art .f-top { fill: var(--a-top); } .puzzle__art .f-left { fill: var(--a-left); }
.puzzle__art .f-front { fill: var(--a-front); } .puzzle__art .f-right { fill: var(--a-right); }
.puzzle__art .f-hole { fill: var(--a-hole); stroke: var(--a-line); stroke-width: 1.4; stroke-linejoin: round; }
.puzzle__pick { fill: none; stroke: var(--sky); stroke-width: 2.4; }
.puzzle__pick-dot { fill: var(--sky); }
.puzzle__status { margin: 4px 0 0; font-size: 13px; color: var(--text-3); text-align: center; min-height: 1.4em; }
.puzzle__status.is-ok { color: var(--sky); }
.puzzle { --a-top: #3a4048; --a-left: #2c3137; --a-front: #262a30; --a-right: #20242a; --a-line: #8d96a0; --a-hole: #0e0d0c; }
:root[data-theme="light"] .puzzle { --a-top: #eceef0; --a-left: #d9dde1; --a-front: #cfd4d9; --a-right: #c3c9cf; --a-line: #6f7882; --a-hole: #59616a; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .puzzle { --a-top: #eceef0; --a-left: #d9dde1; --a-front: #cfd4d9; --a-right: #c3c9cf; --a-line: #6f7882; --a-hole: #59616a; }
}

.contact__notice { margin: 0; padding-left: 14px; border-left: 2px solid var(--sky-line); font-size: 14px; line-height: 1.6; color: var(--text-2); max-width: 64ch; }
.contact__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact__actions .btn { height: 44px; padding: 0 22px; font-size: 15px; }
.contact__actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.contact__error { margin: 0; font-size: 14px; color: var(--danger); }
.contact__alt { margin: 0; font-size: 13.5px; color: var(--text-3); }
.contact__done { padding: 10px 0 40px; }

/* ---------- Inbox ---------- */
.inbox { max-width: 860px; }
.inbox__list { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 14px; }
.msg-card { padding: 16px 18px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.msg-card.is-unread { box-shadow: inset 0 0 0 1px var(--sky-line), inset 3px 0 0 var(--sky); }
.msg-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 14px; }
.msg-card__topic { padding: 2px 9px; border-radius: 999px; background: var(--sky-soft); color: var(--sky); font-size: 12.5px; font-weight: 600; }
.msg-card__from { font-weight: 600; color: var(--text); }
.msg-card__from a { color: var(--sky); text-decoration: none; font-weight: 400; }
.msg-card__time { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--text-3); }
.msg-card__body { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.msg-card__foot { margin-top: 12px; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-3); }
.msg-card__foot .btn { margin-left: auto; }
.msg-card__foot .btn + .btn { margin-left: 0; }

@media (max-width: 640px) {
  .contact__head { padding-top: 32px; }
  .contact__row { grid-template-columns: 1fr; }
}