/* The onboarding (onboarding.js): the app's frame and rounded ground, one question at a time in a narrow column,
   answers as quiet cards, the serif for the question. Only app.css's tokens, so night and day come for free. */

.ob { min-height: 100vh; min-height: 100dvh; display: flex; padding: 10px; background: var(--frame); }
.ob-ground { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 28px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="light"] .ob-ground { box-shadow: 0 0 0 1px rgb(17 18 20 / .05), 0 1px 3px rgb(17 18 20 / .05), 0 24px 60px -36px rgb(17 18 20 / .2); }

/* the top: the mark, the progress, the language */
.ob-top { display: grid; grid-template-columns: 1fr minmax(0, 240px) 1fr; align-items: center; gap: 20px; padding: 22px 26px; }
.ob-top .mark { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
.ob-prog { display: block; height: 4px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.ob-prog i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #0a84ff, #5e5ce6); transition: width .6s var(--out); }
.ob-lang { justify-self: end; padding: 3px; }
.ob-lang button { height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 650; letter-spacing: .04em; }

/* the question */
.ob-main { flex: 1; display: flex; justify-content: center; padding: 7vh 24px 72px; }
.ob-step { width: min(560px, 100%); display: flex; flex-direction: column; gap: 16px; }
.ob-step.is-in { animation: rise .5s var(--out); }
.ob-backslot { min-height: 36px; margin-bottom: 10px; }
.ob-q { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 46px); line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.ob-sub { margin: -4px 0 6px; font-size: 16px; color: var(--ink-3); text-wrap: pretty; }
.ob-q + .ob-list, .ob-q + .ob-input, .ob-q + .ob-chips { margin-top: 10px; }

/* the answers: a column of quiet cards, two side by side when short */
.ob-list { display: grid; gap: 10px; }
.ob-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-opt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px 12px 14px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); text-align: left; transition: transform .35s var(--spring), box-shadow .2s, background .2s; }
.ob-opt:hover { transform: translateY(-1px); box-shadow: var(--shadow-hi); }
.ob-opt:active { transform: scale(.985); }
.ob-opt .ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--fill); color: var(--ink-2); transition: background .2s, color .2s; }
.ob-opt .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ob-opt b { font-size: 15.5px; font-weight: 550; line-height: 1.3; }
.ob-opt small { font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.ob-opt .go { flex: none; display: grid; color: var(--faint); transition: color .2s, transform .35s var(--spring); }
.ob-opt:hover .go { color: var(--ink-3); transform: translateX(2px); }
.ob-opt.is-on { box-shadow: inset 0 0 0 2px var(--btn), var(--shadow); }
.ob-opt.is-on .ic { background: var(--blue-f); color: var(--blue); }
.ob-opt.is-on .go { color: var(--blue); }
.ob-list.two .ob-opt .go { display: none; }

/* chips: a pick among short words */
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { height: 42px; padding: 0 18px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: 14.5px; font-weight: 550; color: var(--ink-2); transition: background .2s, color .2s, transform .35s var(--spring); }
.ob-chip:hover { color: var(--ink); transform: translateY(-1px); }
.ob-chip.is-on { background: var(--btn); color: #fff; box-shadow: 0 10px 24px -12px rgb(10 132 255 / .8); }

/* the fields */
.ob-input { width: 100%; min-height: 56px; padding: 0 20px; border: 0; border-radius: 18px; background: var(--card); color: var(--ink); font: inherit; font-size: 16.5px; outline: none; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s; -webkit-appearance: none; appearance: none; }
.ob-input::placeholder { color: var(--ink-3); }
.ob-input:focus { box-shadow: inset 0 0 0 2px var(--btn); }
.ob-area { min-height: 112px; padding: 16px 20px; line-height: 1.5; resize: vertical; }
.ob-date { display: block; text-align: left; }
.ob-date::-webkit-date-and-time-value { text-align: left; }
.ob-label { display: block; margin: 8px 0 8px 4px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ob-label span { font-weight: 450; color: var(--ink-3); }
.ob-which { display: none; }
.ob-which.is-on { display: block; animation: rise .4s var(--out); }

/* «or in your own words»: the field with its arrow */
.ob-free { position: relative; margin-top: 8px; }
.ob-free .ob-input { padding-right: 60px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.ob-free .ob-input:focus { background: var(--card); box-shadow: inset 0 0 0 2px var(--btn); }
.ob-send { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--btn); color: #fff; transition: opacity .2s, transform .35s var(--spring); }
.ob-send[disabled] { opacity: 0; pointer-events: none; transform: scale(.8); }

/* the buttons under a question */
.ob-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ob-hint { margin-left: 6px; font-size: 13px; color: var(--ink-3); }
.ob-hint kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 2px; padding: 0 5px; border-radius: 6px; background: var(--fill-2); font: inherit; font-size: 12px; }
@media (hover: none) { .ob-hint { display: none; } }

/* a note under the date */
.ob-note-slot:empty { display: none; }
.ob-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--fill); font-size: 14px; color: var(--ink-2); animation: rise .35s var(--out); }
.ob-note svg { margin-top: 2px; color: var(--blue); }
.ob-note.is-warn svg { color: var(--coral); }

/* «did I get that right?» */
.ob-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 18px 16px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.ob-card .ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--blue-f); color: var(--blue); }
.ob-card .tx { min-width: 0; display: grid; gap: 4px; padding-top: 2px; }
.ob-card b { font-size: 15.5px; font-weight: 600; }
.ob-card small { font-size: 14.5px; color: var(--ink-2); overflow-wrap: anywhere; }

/* the end */
.ob-done-mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--mint-f); color: var(--mint); animation: pop .6s var(--spring) backwards .1s; }
.ob-recap { display: grid; margin-top: 8px; padding: 6px 18px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.ob-recap > div { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
.ob-recap > div + div { border-top: 1px solid var(--line); }
.ob-recap .ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -3px; border-radius: 9px; background: var(--fill); color: var(--ink-2); }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }

/* the phone */
@media (max-width: 640px) {
  .ob { padding: 0; }
  .ob-ground { border-radius: 0; box-shadow: none; }
  :root[data-theme="light"] .ob-ground { box-shadow: none; }
  .ob-top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; padding: 14px 16px; }
  .ob-main { padding: 18px 16px 48px; }
  .ob-backslot { margin-bottom: 4px; }
  .ob-q { font-size: 32px; }
  .ob-sub { font-size: 15px; }
  .ob-opt { min-height: 60px; }
  .ob-list.two { grid-template-columns: minmax(0, 1fr); }
  .ob-list.two .ob-opt .go { display: grid; }
  .ob-actions .btn { flex: 1 1 auto; }
  .ob-hint { display: none; }
}

/* one card in the middle of the page, every step (Ale, 4 Nov: «una card centrale… dopo la prima card le cose devono
   stare al centro», not climbing to the top): the step is centred both ways and drawn on its own surface */
.ob-main { align-items: center; padding: 24px 24px 48px; }
.ob-step { margin: auto 0; padding: 34px 34px 30px; border-radius: 28px; background: var(--card); box-shadow: var(--shadow-hi); }
.ob-backslot:empty { display: none; }
@media (max-width: 640px) { .ob-main { padding: 12px 12px 28px; } .ob-step { padding: 24px 20px 22px; border-radius: 24px; } }