/* ============================================
   CONVERSION.CSS — upgrade notice, service chooser window, Growth Diagnostic,
   trust card, mobile booking bar, first-visit hint.

   Rewritten rather than extended. The previous file had grown a tail of
   overrides on top of a full-width offer hero; the hero is gone, so the rules
   that propped it up went with it instead of being layered over again.

   One shared touch breakpoint is used throughout and matches the JS predicate
   in js/conversion.js exactly:
     @media (max-width: 768px), (pointer: coarse) and (max-width: 1024px)
   ============================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* The stage holds the icon field. With the hero gone it exists only so the
   launcher can scroll independently on touch layouts. */
#desktop-stage {
  grid-row: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#desktop-stage > #desktop-icons {
  grid-row: auto;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   DESKTOP UPGRADE NOTICE
   A faux-system update panel pinned to the right of the desktop. Fixed, so it
   never consumes grid space and the icons stay at the top where they belong.
   ============================================================ */
#upgrade-notice {
  position: fixed;
  top: 48px;
  right: 18px;
  /* Below app windows: a notice must never sit over work. */
  z-index: 3;
  width: 330px;
  max-width: calc(100vw - 36px);
  background: #ecebe6;
  color: #1A1A1A;
  border: 1px solid #9a9a94;
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.28), 0 10px 30px rgba(0, 0, 0, 0.22);
  font-family: 'Inter', sans-serif;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#upgrade-notice.is-in { opacity: 1; transform: none; }

.un__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 11px;
  background: #1b2340;
  border-bottom: 1px solid #10152a;
  border-radius: 3px 3px 0 0;
}
.un__dot { width: 8px; height: 8px; border-radius: 50%; background: #3DF2E5; flex: none; }
.un__barlabel {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #eef1f8;
}
.un__x {
  margin-left: auto;
  width: 26px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #2c3454;
  border: 1px solid #47507a;
  border-radius: 2px;
  color: #dfe4f2;
  font-size: 12px;
  cursor: pointer;
}
.un__x:hover { background: #c14c44; border-color: #e0736a; color: #fff; }
.un__x:focus-visible { outline: 2px solid #3DF2E5; outline-offset: 2px; }

.un__body { padding: 14px 15px 15px; }
.un__title {
  margin: 0 0 7px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #14182b;
  text-transform: none;
}
.un__copy {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #4a4a52;
}
.un__who {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0 12px;
  border-top: 1px solid #d6d5cf;
  border-bottom: 1px solid #d6d5cf;
  margin-bottom: 13px;
}
.un__face {
  width: 34px; height: 34px; flex: none;
  border-radius: 3px;
  border: 1px solid #9a9a94;
  object-fit: cover;
  image-rendering: pixelated;
}
.un__who b { display: block; font-size: 12px; color: #14182b; }
.un__who i {
  display: block;
  font-style: normal;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: #6a6a72;
  margin-top: 1px;
}
.un__primary,
.un__secondary,
.un__later {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  margin-bottom: 7px;
  border-radius: 3px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.un__primary {
  background: #3DF2E5;
  color: #10152a;
  border: 1px solid #23c8bd;
  font-weight: 700;
}
.un__primary:hover { background: #2fd9cd; }
.un__secondary {
  background: #f7f7f4;
  color: #1b2340;
  border: 1px solid #9a9a94;
}
.un__secondary:hover { background: #fff; border-color: #1b2340; }
.un__later {
  min-height: 32px;
  margin-bottom: 0;
  background: none;
  border: 0;
  color: #6a6a72;
  font-size: 12px;
  text-decoration: underline;
}
.un__later:hover { color: #1b2340; }
.un__primary:focus-visible,
.un__secondary:focus-visible,
.un__later:focus-visible { outline: 3px solid #1b2340; outline-offset: 2px; }

/* ============================================================
   UPGRADE SHORTCUT — small, obvious, reopens the notice.
   ============================================================ */
/* [hidden] must win over the display below, or hidden=true does nothing. */
#upgrade-shortcut[hidden] { display: none !important; }

#upgrade-shortcut {
  position: fixed;
  top: 48px;
  right: 18px;
  /* Below #windows-container so it can never paint over an app titlebar. */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 13px;
  background: #ecebe6;
  color: #1A1A1A;
  border: 1px solid #9a9a94;
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.24);
  cursor: pointer;
  text-align: left;
}
#upgrade-shortcut:hover { border-color: #1b2340; }
#upgrade-shortcut:focus-visible { outline: 3px solid #3DF2E5; outline-offset: 2px; }
.us__icon {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1b2340; color: #3DF2E5;
  border-radius: 2px; font-size: 12px;
}
.us__text b {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: #14182b;
}
.us__text i {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #6a6a72;
}

/* ============================================================
   SERVICE CHOOSER WINDOW
   ============================================================ */
.svc-chooser { padding: 16px 18px 18px; font-family: 'Inter', sans-serif; }
.svc-chooser__lead { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: #555; }
.svc-chooser__list { display: flex; flex-direction: column; gap: 8px; }
.svc-chooser__item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  text-align: left;
  background: #F5F5F0;
  border: 1px solid #d5d5d0;
  border-radius: 4px;
  cursor: pointer;
}
.svc-chooser__item b {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  color: #1A1A1A;
}
.svc-chooser__item em {
  display: block;
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  color: #666;
  margin-top: 3px;
}
.svc-chooser__item:hover { border-color: #1A1A1A; background: #fff; }
.svc-chooser__item:focus-visible { outline: 3px solid #3DF2E5; outline-offset: 2px; }
.svc-chooser__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px; padding-top: 13px; border-top: 1px solid #e2e2dd;
  font-size: 12px; color: #666;
}
.svc-chooser__book {
  min-height: 44px;
  display: inline-flex; align-items: center;
  padding: 9px 15px;
  background: #1A1A1A; color: #3DF2E5;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 12px; font-weight: 700;
  text-decoration: none;
}
.svc-chooser__book:hover { background: #000; }
.trust-card__face {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 4px;
  object-fit: cover;
  /* The source is a small 144px portrait: keep the retro pixel character
     rather than letting the browser smooth it. */
  image-rendering: pixelated;
  border: 2px solid #3DF2E5;
}
.trust-card__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.trust-card__name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  color: #fff;
}
.trust-card__role {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: #3DF2E5;
}
.trust-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 2px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
}
.trust-card__place { color: #e2e2dc; font-weight: 700; }
.trust-card__reply { color: #b9b9b4; }
.trust-card__note {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #b9b9b4;
}

/* Compact strip, sitting next to the taskbar Contact affordance. */
.taskbar__trust {
  display: none;             /* shown from 900px up, see below */
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
}
.trust-card--strip { gap: 8px; align-items: center; }
.trust-card--strip .trust-card__face {
  width: 28px;
  height: 28px;
  border-width: 1px;
  border-radius: 3px;
}
.trust-card--strip .trust-card__who {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.trust-card--strip .trust-card__name { font-size: 11px; }
.trust-card--strip .trust-card__role { font-size: 10px; }
.trust-card--strip .trust-card__meta { margin-top: 0; font-size: 10px; gap: 8px; }
@media (min-width: 900px) {
  .taskbar__trust { display: flex; }
  #taskbar .taskbar__cta { margin-left: 10px; }
}

/* ============================================================
/* ---------- GROWTH DIAGNOSTIC ---------- */
.app-diag { display: flex; flex-direction: column; height: 100%; background: #0d0f12; }
.app-diag__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #16191d;
  border-bottom: 1px solid #262b31;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: #7fe9df;
}
.app-diag__dot { width: 8px; height: 8px; border-radius: 50%; background: #3DF2E5; }
.app-diag__count { margin-left: auto; color: #6d757e; }
.app-diag__screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 20px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  line-height: 1.65;
  color: #cfd6dd;
}
.app-diag__screen:focus-visible { outline: 2px solid #3DF2E5; outline-offset: -2px; }
.app-diag__sys { color: #6d757e; }
.app-diag__q { color: #3DF2E5; margin-top: 10px; }
.app-diag__a { color: #f0c98a; }
.app-diag__opts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.app-diag__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  color: #dbe2e8;
  background: #171b20;
  border: 1px solid #2b3138;
  border-radius: 4px;
  cursor: pointer;
}
.app-diag__opt b { color: #3DF2E5; font-size: 12px; }
.app-diag__opt:hover:not(:disabled) { background: #1d232a; border-color: #3DF2E5; }
.app-diag__opt:focus-visible { outline: 3px solid #3DF2E5; outline-offset: 2px; }
.app-diag__opt:disabled { opacity: 0.4; cursor: default; }
.app-diag__opt.is-chosen { opacity: 1; border-color: #3DF2E5; color: #3DF2E5; }
.app-diag__result { margin-top: 14px; }
.app-diag__priority {
  padding: 10px 12px;
  background: rgba(61, 242, 229, 0.1);
  border-left: 3px solid #3DF2E5;
  color: #eaf3f2;
  font-size: 13px;
  margin-bottom: 14px;
}
.app-diag__priority span {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  color: #3DF2E5;
  margin-bottom: 4px;
}
.app-diag__finding { margin-bottom: 14px; }
.app-diag__finding h3 {
  margin: 0 0 4px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  color: #fff;
}
.app-diag__finding p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #aeb6be;
}
.app-diag__cta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #262b31;
}
.app-diag__cta p {
  margin: 0 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #cfd6dd;
}
.app-diag__book,
.app-diag__restart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  margin: 0 8px 8px 0;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
.app-diag__book { background: #3DF2E5; color: #0d0f12; border: 2px solid #3DF2E5; }
.app-diag__restart { background: transparent; color: #9aa3ab; border: 2px solid #2b3138; }

/* ============================================================
   FIRST-VISIT HINT — a compact card, never a half-screen overlay.
   ============================================================ */
#first-hint {
  position: fixed;
  z-index: 12000;
  right: 18px;
  /* clear the taskbar AND the seasonal shortcut that floats above it */
  bottom: 132px;
  width: min(316px, calc(100vw - 32px));
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  padding: 12px 14px 12px;
  background: #1A1A1A;
  border: 2px solid #3DF2E5;
  border-radius: 6px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4);
  color: #F5F5F0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#first-hint.is-in { opacity: 1; transform: none; }
.fh__close {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  color: #8b8b86;
  font-size: 14px;
  cursor: pointer;
}
.fh__close:hover { color: #fff; }
.fh__k {
  margin: 0 0 4px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #3DF2E5;
}
.fh__t {
  margin: 0 0 6px;
  padding-right: 40px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  color: #fff;
}
.fh__list {
  margin: 0 0 10px;
  padding-left: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #bdbdb8;
}
.fh__list li { margin: 0 0 3px; }
.fh__list li::marker { color: #3DF2E5; }
.fh__list code {
  font-family: 'Space Mono', monospace;
  font-size: 0.92em;
  color: #3DF2E5;
  background: rgba(61, 242, 229, 0.12);
  padding: 1px 5px;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.fh__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fh__go {
  min-height: 44px;
  padding: 8px 16px;
  background: #3DF2E5;
  color: #1A1A1A;
  border: 0;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
/* No seasonal shortcut behind the hint: the two would stack into a wall. */
body:has(#first-hint) .ramadan-shortcut { display: none; }
/* ============================================================
   PERSISTENT MOBILE BOOKING BAR
   ============================================================ */
#mobile-book-bar { display: none; }

/* ============================================================
   TOUCH LAYOUT — the single authoritative block.
   Matches the JS predicate in js/conversion.js. Everything positional lives
   here so a coarse-pointer tablet and a phone cannot disagree.
   ============================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1024px) {
  :root {
    --mobile-bar-h: 66px;
    --mobile-header-h: 48px;
    --mobile-bar-total: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
  }

  #desktop { grid-template-rows: var(--mobile-header-h) 1fr var(--mobile-bar-total); }
  #menubar { height: var(--mobile-header-h); }
  #taskbar { display: none; }
  .menubar__cta { min-height: 44px; font-size: 12px; padding: 6px 12px; }
  .menubar__clock,
  .menubar__menu-trigger { font-size: 12px; }
  .desktop-widget--clock,
  .desktop-widget--sticky { display: none; }

  /* LAUNCHER GRID — authoritative for every touch layout.
     The block in desktop.css overrides grid-template-columns but leaves the base
     `grid-template-rows: repeat(8, minmax(0, 72px))` in place. Eight fixed rows
     cannot hold 25 icons, and minmax(0, ...) lets them collapse to nothing once
     the stage constrains the height, which piled every icon on top of the next.
     Rows are therefore reset to auto with a real minimum, and the launcher
     columns are restated here so coarse landscape gets the launcher too rather
     than a compressed ten-column desktop grid. */
  #desktop-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(78px, auto);
    align-content: start;
    justify-content: start;
    gap: 6px 2px;
    padding: 12px 10px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .desktop-icon {
    width: auto;
    min-height: 78px;
    padding: 10px 2px 8px;
    border-radius: 12px;
    grid-row: auto !important;
    grid-column: auto !important;
    touch-action: pan-y;
  }
  .desktop-icon__image { flex: none; }

  /* Full-screen apps end exactly at the bar. */
  #windows-container {
    position: fixed;
    top: var(--mobile-header-h);
    left: 0; right: 0;
    bottom: var(--mobile-bar-total);
  }
  .window {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: auto !important;
    width: 100% !important; height: 100% !important; max-height: 100% !important;
    transform: none !important;
    border-radius: 0;
  }

  /* The side notice is a pointer-device affordance. On a phone the launcher
     comes first, so the notice never auto-opens and the shortcut becomes a
     compact inline card that opens the chooser window instead. */
  #upgrade-notice { display: none; }
  #upgrade-shortcut {
    position: static;
    display: flex;
    width: auto;
    margin: 10px 10px 0;
    box-shadow: none;
  }

  #mobile-book-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--mobile-bar-total);
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(20, 20, 20, 0.97);
    border-top: 1px solid rgba(61, 242, 229, 0.4);
    z-index: 11000;
  }
  .mbb__book {
    flex: 1 1 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 48px;
    padding: 8px 10px;
    background: #3DF2E5;
    color: #1A1A1A;
    border: 0;
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    line-height: 1.15;
    text-decoration: none;
  }
  .mbb__book:hover,
  .mbb__book:visited { color: #1A1A1A; text-decoration: none; }
  .mbb__book-main { font-size: 13px; font-weight: 700; }
  .mbb__book-sub { font-size: 12px; font-weight: 400; opacity: 0.78; }
  .mbb__home {
    flex: 0 0 auto;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px;
    min-width: 56px; min-height: 48px;
    padding: 6px 10px;
    background: transparent;
    color: #3DF2E5;
    border: 1px solid #3DF2E5;
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    cursor: pointer;
  }
  .mbb__home span[aria-hidden] { font-size: 17px; line-height: 1; }
  .mbb__home-label { font-size: 12px; }
  .mbb__home:active { background: rgba(61, 242, 229, 0.18); }

  /* The hint flows above the launcher rather than floating over it. */
  #first-hint.fh--inline {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0 10px 10px;
    padding: 12px 14px;
    box-shadow: none;
    z-index: auto;
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }
  #first-hint.fh--inline .fh__k { font-size: 12px; margin-bottom: 3px; }
  #first-hint.fh--inline .fh__t { font-size: 13px; margin-bottom: 5px; }
  #first-hint.fh--inline .fh__list { margin: 0 0 8px; padding-left: 16px; font-size: 12px; line-height: 1.4; }
  #first-hint.fh--inline .fh__list li { margin: 0; }
  #first-hint.fh--inline .fh__go { min-height: 44px; font-size: 12px; }
  #first-hint.fh--inline .fh__close { min-width: 44px; min-height: 44px; top: 2px; right: 2px; }
  #first-hint.fh--inline .fh__go { width: 100%; }

  /* At 320px the menubar cannot hold logo, hamburger, sound, clock and a CTA.
     The clock goes first, then the CTA: the persistent bottom bar already
     carries the primary booking action, so losing it here costs nothing. */
  @media (max-width: 400px) {
    .menubar__clock { display: none; }
  }
  @media (max-width: 360px) {
    .menubar__cta { display: none; }
  }

  /* ---- Restored by the rewrite: 16px body and input text on touch, so iOS does
          not zoom on focus and contact fields are not tiny. Scoped away from the
          menubar, which is fixed-height chrome. ---- */
  #windows-container input,
  #windows-container textarea,
  #windows-container select { font-size: 16px; }
  #windows-container input:not([type='checkbox']):not([type='radio']),
  #windows-container select,
  #windows-container button:not(.window__btn) { min-height: 44px; }
  .app-contact__field-label { font-size: 14px; }
  .app-contact__field-input,
  .app-contact__textarea { font-size: 16px; }
  .app-diag__screen,
  .app-diag__opt,
  .app-diag__priority,
  .app-diag__finding p,
  .app-diag__cta p { font-size: 16px; }
  .svc-chooser__lead,
  .svc-chooser__item em { font-size: 14px; }
  .svc-chooser__item b { font-size: 15px; }

  /* Nothing readable below 12px on a touch layout. */
  .desktop-icon__label { flex: none; min-height: 2.4em; font-size: 12px; }
  #first-hint .fh__list code { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #upgrade-notice,
  #first-hint { transition: none; }
}