/* The first thirty seconds (js/deck/onboarding*.js).
 *
 * Its own sheet, like density.css: everything here disappears from a browser
 * that has been on this desk before, and the whole feature has to be readable
 * and removable in one place.
 */

/* ── the opening question ─────────────────────────────────────────────── */
.ob-start {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  /* Opaque: the default desk behind it is not an answer to anything, and
     showing it through a veil would read as a modal over real work. */
  background: var(--ground);
  padding: 24px; overflow: auto;
}
.ob-start-box { width: min(760px, 100%); text-align: center; }
.ob-q { font-size: clamp(20px, 3.4vw, 28px); font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.ob-sub { margin: 0 0 22px; color: var(--ink-2); font-size: 13px; }
.ob-ask { margin-bottom: 18px; }
.ob-coin {
  width: min(320px, 100%); padding: 9px 12px; text-align: center;
  background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 3px;
  color: var(--ink); font: inherit; font-family: var(--mono); font-size: 14px; letter-spacing: .06em;
}
.ob-coin:focus { outline: none; border-color: var(--info); }
.ob-coins { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.ob-pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  background: none; border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: 4px 10px; color: var(--ink-2); cursor: pointer;
}
.ob-pill:hover { color: var(--ink); border-color: var(--ink-3); }
.ob-pill.is-on { color: var(--info); border-color: var(--info-dim); background: #0e1a2b; }

/* ── the three shapes, here and on every empty desk ───────────────────── */
.ob-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: left; }
@media (max-width: 680px) { .ob-shapes { grid-template-columns: 1fr; } }
.ob-shape {
  /* A button does not inherit text-align, and these are three paragraphs, not
     three labels: they are read, not pressed at a glance. */
  display: flex; flex-direction: column; text-align: left;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 3px; padding: 13px 14px; cursor: pointer; font: inherit; color: inherit;
}
.ob-shape:hover { border-color: var(--info-dim); background: var(--raised); }
.ob-shape-name {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
}
.ob-shape-about { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.ob-skip {
  margin-top: 18px; background: none; border: 0; color: var(--ink-3);
  font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.ob-skip:hover { color: var(--ink-2); }

/* ── one hint at a time ───────────────────────────────────────────────── */
.ob-coach {
  position: fixed; z-index: 85; top: -999px; left: -999px;
  display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 20px));
  background: var(--raised); border: 1px solid var(--rule-strong);
  border-left: 2px solid var(--info); border-radius: 3px;
  padding: 9px 11px; font-size: 12px; color: var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
/* Until it has been measured and placed it sits off-screen; fading in on
   placement keeps it from appearing to jump. */
.ob-coach.is-placed { animation: ob-in .18s ease-out; }
@keyframes ob-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-coach.is-placed { animation: none; } }
.ob-step { font-family: var(--mono); font-size: 10px; color: var(--ink-3); flex: 0 0 auto; }
.ob-text { flex: 1 1 auto; line-height: 1.45; }
.ob-next {
  flex: 0 0 auto; font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  background: none; border: 1px solid var(--info-dim); border-radius: 3px;
  padding: 3px 8px; color: var(--info); cursor: pointer;
}
.ob-next:hover { background: #0e1a2b; }
.ob-close { flex: 0 0 auto; background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 11px; padding: 2px 4px; }
.ob-close:hover { color: var(--ink); }

/* ── the empty desk ───────────────────────────────────────────────────── */
.ob-empty { width: min(820px, 100%); margin: 0 auto; padding: 8px; }
.ob-empty-title { text-align: center; font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
/* The coin field is the first screen's, centred inside a panel rather than a
   full window. */
.ob-empty .ob-ask { text-align: center; margin-bottom: 14px; }
/* Five desks, not the first screen's three: they wrap by width instead of
   leaving a two-card row hanging under a three-card one. */
.ob-empty .ob-shapes { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }
.ob-empty .ob-shape { padding: 10px 12px; }
.ob-empty .ob-shape-about { font-size: 11px; line-height: 1.4; }
.ob-empty-hint { text-align: center; margin-top: 14px; font-size: 11px; color: var(--ink-3); }

/* Dealing the desk is animated from boot.js with the Web Animations API, not
 * from here: a re-render detaches and re-appends every panel, which restarts a
 * CSS animation but leaves a WAAPI one alone. */

/* While the desk is being assembled behind the screen. */
.ob-building { font-family: var(--mono); font-size: 13px; color: var(--ink-3); letter-spacing: .06em; }