/* ═══════════════════════════════════════════════════════════════
   XODE — THE EDITORS' WELCOME SCREEN, IN CANVAS

   The template-selection screen of the portfolio editor, the website
   builder and the resume builder, dressed like the rest of the site:
   white, near-black type, a lime-highlighted headline, pill tabs and
   chips, white template cards, and the same popups as the home hero.

   Everything is scoped to #screen-welcome. The editor itself — the
   dark workspace that opens once a template is picked — never sees a
   rule from this file. The two modals opened from this screen (Recover
   a session, My projects) turn light only while it is showing, via
   :has(); in a browser without :has() they simply stay dark.

   No markup, id or behaviour changes: the tabs, chips, cards, size
   presets and inputs are the same elements app.js already binds to.
   ═══════════════════════════════════════════════════════════════ */

#screen-welcome {
  --bg-0: #FFFFFF; --bg-1: #F7F7FA; --bg-2: #FFFFFF; --bg-3: #F2F2F6; --bg-4: #E9E9EF;
  --border-1: #ECECF1; --border-2: #DCDCE4;
  --text-0: #0B0B0F; --text-1: #2A2A33; --text-2: #55555F; --text-3: #6B6B78;
  --violet-ink: #5534E0; --violet-glow: rgba(109, 74, 255, .16);
  --shadow-panel: 0 40px 90px -50px rgba(109, 74, 255, .35);
  background: #FFFFFF;
  color: #0B0B0F;
  color-scheme: light;
}

/* ── backdrop: no dark grid, a soft violet and peach wash ────────── */
#screen-welcome .welcome-grid { display: none; }
#screen-welcome .welcome-glow {
  top: -260px; width: 1100px; height: 640px; opacity: 1; filter: blur(30px);
  background:
    radial-gradient(closest-side at 38% 50%, rgba(109, 74, 255, .13), transparent),
    radial-gradient(closest-side at 66% 56%, rgba(255, 150, 110, .10), transparent);
}

/* ── the bar ─────────────────────────────────────────────────────── */
#screen-welcome .welcome-topbar { padding: 16px 32px; }
#screen-welcome .xode-mark { content: url(../assets/icon/xode-logo-dark.png); }
#screen-welcome .btn-ghost {
  padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid #D6D6DE; background: #FFFFFF; color: #0B0B0F;
  font-weight: 600;
  transition: border-color .2s, transform .2s cubic-bezier(.22, 1, .36, 1);
}
#screen-welcome .btn-ghost:hover { border-color: #0B0B0F; background: #FFFFFF; color: #0B0B0F; transform: translateY(-1px); }
#screen-welcome .btn-primary {
  border-radius: 999px; background: #0B0B0F; border-color: #0B0B0F; color: #FFFFFF;
  box-shadow: 0 10px 24px -14px rgba(109, 74, 255, .48);
  transition: background-color .2s, transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s;
}
#screen-welcome .btn-primary:hover { background: #1D1D26; box-shadow: 0 16px 34px -16px rgba(109, 74, 255, .48); transform: translateY(-2px); }
#screen-welcome :is(.btn-primary, .btn-ghost):focus-visible { outline: 3px solid rgba(109, 74, 255, .45); outline-offset: 3px; }

/* ── the hero ────────────────────────────────────────────────────── */
#screen-welcome .welcome-main { padding: 30px 24px 90px; }
#screen-welcome .welcome-hero { position: relative; max-width: 1100px; width: 100%; margin-bottom: 44px; }
#screen-welcome .eyebrow-editor {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; margin-bottom: 26px;
  border: 0; border-radius: 999px; background: #F3F0FF; color: #34247F;
  font: 600 13.5px/1.2 Inter, sans-serif; letter-spacing: .02em;
}
#screen-welcome .eyebrow-editor::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6D4AFF; }
#screen-welcome .welcome-hero h1 {
  margin: 0 0 24px;
  font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(38px, 4.9vw, 72px); line-height: .98;
  letter-spacing: -.045em; word-spacing: .06em;
  color: #0B0B0F;
  text-wrap: balance;
}
/* The gradient phrase becomes the lime highlighter from the home page.
   A background band rather than a pseudo element, so it wraps. */
#screen-welcome .hero-accent {
  color: #0B0B0F; -webkit-text-fill-color: currentColor;
  background: linear-gradient(transparent 56%, #C9F26B 56%, #C9F26B 90%, transparent 90%) no-repeat 0 0 / 100% 100%;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .05em;
}
#screen-welcome .welcome-sub {
  max-width: 720px; margin: 0 auto;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: #55555F;
}

/* ── the panel, its tabs and the profession chips ────────────────── */
#screen-welcome .welcome-panel {
  max-width: 1120px;
  /* A soft grey tray, so a page of white cards and white resume
     sheets does not glare off a white screen. */
  background: #F3F3F6; border: 1px solid #E6E6EC; border-radius: 28px;
  box-shadow: 0 40px 90px -50px rgba(109, 74, 255, .35), 0 2px 6px rgba(109, 74, 255, .04);
}
/* The tabs as the home hero's segmented switch. */
#screen-welcome .welcome-tabs {
  width: fit-content; max-width: calc(100% - 36px); margin: 22px auto 0;
  gap: 4px; padding: 5px; border: 0; border-radius: 999px; background: #E6E6EC;
}
#screen-welcome .welcome-tab {
  flex: none; padding: 10px 22px; border-radius: 999px;
  color: #55555F; font-size: 14px; font-weight: 600;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
#screen-welcome .welcome-tab:hover { color: #0B0B0F; }
#screen-welcome .welcome-tab.active { background: #FFFFFF; color: #0B0B0F; box-shadow: 0 6px 16px -10px rgba(109, 74, 255, .45); }
#screen-welcome .welcome-tab.active::after { display: none; }
#screen-welcome .welcome-tab-content { padding: 22px 28px 28px; }

#screen-welcome .profession-filter { justify-content: center; gap: 8px; margin-bottom: 24px; }
#screen-welcome .chip {
  padding: 8px 16px; border-radius: 999px;
  background: #FBFBFC; border: 1.5px solid #DCDCE3; color: #2A2A33;
  font-size: 13px; font-weight: 600;
  transition: border-color .15s, background-color .15s, color .15s;
}
#screen-welcome .chip:hover { border-color: #0B0B0F; color: #0B0B0F; }
#screen-welcome .chip.active { background: #0B0B0F; border-color: #0B0B0F; color: #FFFFFF; }

/* ── template cards ──────────────────────────────────────────────── */
#screen-welcome .template-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px;
  max-height: 540px; padding: 4px 8px 8px 4px;
}
#screen-welcome .template-grid::-webkit-scrollbar { width: 10px; }
#screen-welcome .template-grid::-webkit-scrollbar-track { background: rgba(11, 11, 15, .05); border-radius: 100px; margin: 8px 0; }
#screen-welcome .template-grid::-webkit-scrollbar-thumb { background: #FF6A1A; border-radius: 100px; border: 2px solid transparent; background-clip: content-box; }
#screen-welcome .template-grid::-webkit-scrollbar-thumb:hover { background: #FF8340; background-clip: content-box; }

/* ── the page scrollbar: the site's short, thick orange rail ───────
   Every other page gets it from shared.css on body. The editors do not
   load shared.css, styles.css gives every scroller a thin grey bar, and
   this screen scrolls inside #screen-welcome rather than the body — so
   it had the grey one. Same colour, width and short inset as the site.
   Chrome drops the ::-webkit-scrollbar rules for any scroller that also
   names scrollbar-color, so Firefox's version stays behind @supports. */
#screen-welcome::-webkit-scrollbar { width: 14px; }
#screen-welcome::-webkit-scrollbar-track { background: rgba(11, 11, 15, .05); margin: 72px 0 30px; }
#screen-welcome::-webkit-scrollbar-thumb {
  background: #FF6A1A; border-radius: 100px;
  border: 2px solid transparent; background-clip: content-box;
}
#screen-welcome::-webkit-scrollbar-thumb:hover,
#screen-welcome::-webkit-scrollbar-thumb:active { background: #FF8340; background-clip: content-box; }
#screen-welcome::-webkit-scrollbar-corner { background: transparent; }
@media (pointer: coarse) { #screen-welcome::-webkit-scrollbar { width: 17px; } }
@supports not selector(::-webkit-scrollbar) {
  #screen-welcome { scrollbar-width: thin; scrollbar-color: #FF6A1A rgba(11, 11, 15, .05); }
  #screen-welcome .template-grid { scrollbar-width: thin; scrollbar-color: #FF6A1A transparent; }
}
#screen-welcome .template-card {
  background: #FBFBFC; border: 1px solid #E3E3E9; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(109, 74, 255, .04);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s, border-color .22s;
}
#screen-welcome .template-card:hover {
  transform: translateY(-4px); border-color: #D6D6DE;
  box-shadow: 0 24px 42px -26px rgba(109, 74, 255, .38);
}
#screen-welcome .template-card:focus-visible { outline: 3px solid rgba(109, 74, 255, .45); outline-offset: 2px; }
#screen-welcome .template-thumb { height: 150px; margin: 8px 8px 0; border-radius: 12px; background: #E9E9EF; }
/* A faint veil dims each thumbnail's white; hovering a card lifts it. */
#screen-welcome .template-thumb::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(38, 30, 80, .07); box-shadow: inset 0 0 0 1px rgba(38, 30, 80, .07);
  transition: opacity .25s;
}
#screen-welcome .template-card:hover .template-thumb::after { opacity: 0; }
/* Name over size: side by side, a long name like "Fresh Start Resume"
   wrapped into the dimensions. */
#screen-welcome .template-card-meta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 12px 14px 14px;
}
#screen-welcome .template-card-name { font-size: 14px; font-weight: 700; color: #0B0B0F; }
#screen-welcome .template-card-dims { font: 500 11.5px/1 'JetBrains Mono', ui-monospace, monospace; color: #8A8A96; white-space: nowrap; }

/* ── custom canvas ───────────────────────────────────────────────── */
#screen-welcome .custom-size-grid { gap: 16px; }
#screen-welcome .size-card {
  padding: 16px; border-radius: 18px;
  background: #FBFBFC; border: 1px solid #E3E3E9;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s, border-color .22s;
}
#screen-welcome .size-card:hover,
#screen-welcome .size-card.active {
  border-color: #0B0B0F; transform: translateY(-3px);
  box-shadow: 0 20px 36px -24px rgba(109, 74, 255, .38);
}
#screen-welcome .size-card-swatch { height: 72px; border-radius: 12px; background: linear-gradient(135deg, #F3F0FF, #E7E1FF); }
#screen-welcome .size-card-swatch::after { border-color: rgba(85, 52, 224, .4); }
#screen-welcome .swatch-mobile { background: linear-gradient(135deg, #E2F7F2, #C9EFE6); }
#screen-welcome .swatch-a4     { background: linear-gradient(135deg, #FFF3DC, #FFE6B8); }
#screen-welcome .swatch-square { background: linear-gradient(135deg, #FCE7F3, #F9D2E8); }
#screen-welcome .swatch-slide  { background: linear-gradient(135deg, #E3EEFF, #CFE0FF); }
#screen-welcome .swatch-story  { background: linear-gradient(135deg, #FFE4DA, #FFD0BF); }
#screen-welcome :is(.swatch-mobile, .swatch-a4, .swatch-square, .swatch-slide, .swatch-story)::after { border-color: rgba(11, 11, 15, .28); }
#screen-welcome .size-card-label { font-size: 14px; color: #0B0B0F; }
#screen-welcome .size-card-dims { color: #8A8A96; }

#screen-welcome .custom-size-manual { padding: 18px; border-radius: 18px; background: #FBFBFC; border: 1px solid #E3E3E9; }
#screen-welcome .custom-size-manual label { color: #55555F; letter-spacing: .12em; }
#screen-welcome .manual-inputs input[type=number] {
  padding: 10px 12px; border-radius: 12px;
  background: #FFFFFF; border: 1.5px solid #E4E4EA; color: #0B0B0F;
}
#screen-welcome .manual-inputs input[type=number]:focus { outline: none; border-color: #6D4AFF; box-shadow: 0 0 0 3px rgba(109, 74, 255, .18); }
#screen-welcome .manual-inputs span { color: #8A8A96; }
#screen-welcome .manual-inputs .btn-primary { padding: 11px 20px; }

#screen-welcome .welcome-footnote { margin-top: 26px; color: #6B6B78; }
#screen-welcome .welcome-footnote strong { color: #0B0B0F; }

/* ── popups round the headline (decoration, aria-hidden) ─────────── */
#screen-welcome .wc-pops { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#screen-welcome .wc-pop { position: absolute; }
#screen-welcome .wc-pop.p1 { left: -11%; top: 96px; transform: rotate(-8deg); }
#screen-welcome .wc-pop.p2 { right: -11%; top: 58px; transform: rotate(7deg); }
#screen-welcome .wc-pop.p3 { right: -5%; top: 204px; }
#screen-welcome .wc-pop.p4 { left: -4%; top: 232px; }
#screen-welcome .wc-sticker {
  padding: 10px 15px; border-radius: 14px; color: #0B0B0F;
  font: 700 15px/1.2 Inter, sans-serif; white-space: nowrap;
  box-shadow: 0 16px 34px -14px rgba(109, 74, 255, .21);
}
#screen-welcome .wc-sticker.p1 { background: #EEE9FF; }
#screen-welcome .wc-sticker.p2 { background: #FFE2D1; }
#screen-welcome .wc-sticker.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; }
#screen-welcome .wc-cursor { display: flex; align-items: flex-start; }
#screen-welcome .wc-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(109, 74, 255, .14)); }
#screen-welcome .wc-cursor b {
  margin: 16px 0 0 -3px; padding: 5px 10px; border-radius: 99px;
  background: var(--cc); color: #FFFFFF; font: 650 12.5px/1 Inter, sans-serif;
  white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(109, 74, 255, .21);
}
@media (max-width: 1180px) { #screen-welcome .wc-pops { display: none; } }
/* On a phone the two tabs share the track instead of overflowing it. */
@media (max-width: 560px) {
  #screen-welcome .welcome-tabs { width: calc(100% - 24px); }
  #screen-welcome .welcome-tab { flex: 1 1 0; min-width: 0; padding: 10px 10px; font-size: 13px; }
  #screen-welcome .welcome-tab-content { padding: 18px 14px 20px; }
  #screen-welcome .welcome-panel { border-radius: 22px; }
  /* The two bar buttons on one line each, beside the mark. */
  #screen-welcome .welcome-topbar { padding: 12px 16px; gap: 10px; }
  #screen-welcome .welcome-topbar-actions { gap: 6px; }
  #screen-welcome .welcome-topbar .btn-ghost { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
  /* Size presets two across; three left each card too narrow for its label. */
  #screen-welcome .custom-size-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  #screen-welcome .size-card { padding: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  #screen-welcome .welcome-hero > :not(.wc-pops) { animation: wc-rise .9s cubic-bezier(.22, 1, .36, 1) backwards; }
  #screen-welcome .welcome-hero > h1 { animation-delay: .1s; }
  #screen-welcome .welcome-hero > .welcome-sub { animation-delay: .2s; }
  #screen-welcome .welcome-panel { animation: wc-rise 1s cubic-bezier(.22, 1, .36, 1) .28s backwards; }
  #screen-welcome .hero-accent { animation: wc-mark 1s cubic-bezier(.22, 1, .36, 1) .55s backwards; }
  #screen-welcome .wc-pop { animation: wc-pop .8s cubic-bezier(.22, 1.3, .36, 1) backwards, wc-float 6.5s ease-in-out infinite; }
  #screen-welcome .wc-pop.p1 { animation-delay: .4s, 0s; }
  #screen-welcome .wc-pop.p2 { animation-delay: .55s, -2.5s; animation-duration: .8s, 7.5s; }
  #screen-welcome .wc-pop.p3 { animation-delay: .75s, -1s; animation-duration: .8s, 8s; }
  #screen-welcome .wc-pop.p4 { animation-delay: .9s, -3.5s; }
}
@keyframes wc-rise  { from { opacity: 0; transform: translateY(18px); } }
@keyframes wc-mark  { from { background-size: 0% 100%; } }
@keyframes wc-pop   { from { opacity: 0; scale: .5; } }
@keyframes wc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ── the two modals this screen opens, light while it is showing ─── */
body:has(#screen-welcome:not(.hidden)) :is(#modal-recovery, #modal-projects) {
  --bg-0: #FFFFFF; --bg-1: #F7F7FA; --bg-2: #FFFFFF; --bg-3: #F2F2F6; --bg-4: #E9E9EF;
  --border-1: #ECECF1; --border-2: #DCDCE4;
  --text-0: #0B0B0F; --text-1: #2A2A33; --text-2: #55555F; --text-3: #6B6B78;
  --violet-ink: #5534E0;
  background: rgba(11, 11, 15, .32);
  color-scheme: light;
}
body:has(#screen-welcome:not(.hidden)) :is(#modal-recovery, #modal-projects) .modal {
  background: #FFFFFF; color: #0B0B0F; border: 1px solid #ECECF1; border-radius: 24px;
  box-shadow: 0 40px 90px -40px rgba(109, 74, 255, .45);
}
body:has(#screen-welcome:not(.hidden)) :is(#modal-recovery, #modal-projects) .modal-header h2 { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 800; letter-spacing: -.02em; }
body:has(#screen-welcome:not(.hidden)) :is(#modal-recovery, #modal-projects) :is(.recovery-item, .project-item) { background: #FFFFFF; border-color: #ECECF1; border-radius: 14px; }
body:has(#screen-welcome:not(.hidden)) :is(#modal-recovery, #modal-projects) :is(.recovery-item, .project-item):hover { border-color: #0B0B0F; background: #FFFFFF; }
body:has(#screen-welcome:not(.hidden)) :is(#modal-recovery, #modal-projects) .btn-ghost { border-radius: 999px; border: 1.5px solid #D6D6DE; background: #FFFFFF; color: #0B0B0F; }
body:has(#screen-welcome:not(.hidden)) :is(#modal-recovery, #modal-projects) .btn-ghost:hover { border-color: #0B0B0F; }

/* ── the AI assistant belongs to the editor, not to this screen ──
   ai-canvas.js mounts its tab on load, before a template is picked.
   showScreen() in app.js puts .hidden on the welcome screen when the
   editor opens, and from that moment the tab is back. */
body:has(#screen-welcome:not(.hidden)) #aic { display: none !important; }