/* small-screen.css — the door for screens the app cannot work on.
 *
 * WHY A DOOR RATHER THAN RESPONSIVE LAYOUT. The core interaction is selecting
 * individual FACES on a 3D model, with right-click menus and hand-positioned
 * annotation bubbles. A fingertip covers roughly 40px; the faces being picked
 * are often smaller. That is not a stylesheet problem, it is a different
 * interaction model, and building it would be weeks of work for a use case
 * nobody actually wants — an engineer is not going to scope an FEA project on
 * a phone.
 *
 * WHAT THE DOOR IS ACTUALLY FOR. Most links to this app will be opened on a
 * phone — from LinkedIn, or from an email. That visitor was never going to
 * configure anything, but they DO form a judgement in about three seconds. A
 * broken desktop layout reads as an unfinished product, and they do not come
 * back on a laptop later because they have already decided. This turns that
 * bounce into a saved link or a booked call.
 *
 * IT IS A GATE, NOT A MESSAGE. The interaction standard requires every message
 * to the user be showToast(), and that still holds — the TABLET advisory is a
 * toast, in small-screen.js. This is a substitute UI for a device the app
 * cannot serve at all, which is a different thing from reporting an outcome.
 */

#small-screen-door {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  color: var(--ink);
  overflow-y: auto;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
}

/* Shown ONLY by script — see small-screen.js for why this is not a pure media
   query. A narrow desktop window is not a phone, and must not be locked out. */
#small-screen-door.show { display: block; }

/* Top-aligned, NOT vertically centred.
 *
 * `justify-content: center` with `min-height: 100%` looks better on a tall
 * phone and breaks on a short one: when the content is taller than the screen —
 * an iPhone 13 is 664px, and this door is longer than that — centring pushes
 * the overflow outside the scrollable area. The "Continue anyway" button then
 * renders, reports itself visible, and cannot be clicked, which is the escape
 * hatch failing on precisely the device it exists for. Caught by the test, not
 * by looking at it. */
.ssd-inner {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ssd-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ssd-mark svg { width: 30px; height: 30px; flex: 0 0 auto; }

.ssd-rule {
  height: 3px;
  border: 0;
  border-radius: 2px;
  width: 88px;
  background: linear-gradient(90deg, #2b5fd9 0%, #1f9e8f 30%, #8dbf2e 52%,
                              #f0c419 72%, var(--orange) 100%);
}

#small-screen-door h1 {
  font-family: var(--font-hint);
  font-size: 25px;
  line-height: 1.22;
  font-weight: 700;
  margin: 0;
}

#small-screen-door p {
  font-family: var(--font-hint);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.ssd-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

.ssd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-btn);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  /* 48px min: below roughly this, a fingertip cannot hit a target reliably —
     which is the same reason the app itself does not work here. */
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  width: 100%;
}
.ssd-btn-primary { background: var(--orange); color: #fff; }
.ssd-btn-primary:active { background: #c8600f; }
.ssd-btn-ghost { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
.ssd-btn-ghost:active { background: var(--bg); }

.ssd-note {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
}
.ssd-note a { color: var(--orange); }

/* An escape hatch, deliberately understated. Someone on a small laptop, or a
   tablet in landscape, may reasonably want to proceed anyway — locking them out
   with no way through would be worse than the broken layout this replaces. */
.ssd-anyway {
  background: none;
  border: 0;
  padding: 10px 0;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
}
.ssd-anyway:hover { color: var(--ink); }

/* While the door is up, nothing behind it should scroll or be reachable by
   keyboard. */
body.ssd-locked { overflow: hidden; }