/* Login, the introduction and the account menu. Built on the tokens in styles.css. */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 25;
  overflow-y: auto;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 18px 18px;
  font-size: 14px;
}
body.welcome-open .topbar, body.welcome-open .layout { visibility: hidden; }
.welcome h1 { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; margin: 0; text-wrap: balance; }
.welcome svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.w-mark { position: relative; display: block; width: 36px; height: 36px; border-radius: 11px; background: var(--text); }
.w-mark::after { content: ""; position: absolute; left: 14px; top: 10px; border-left: 12px solid var(--bg); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

.w-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: var(--radius-pill); font-weight: 500; font-size: 14px; }
.w-primary { background: var(--accent-strong); border-color: transparent; color: var(--accent-ink); }
.w-primary:hover { background: var(--accent-hover); border-color: transparent; }
.w-ghost { background: transparent; border-color: var(--line-strong); }
.w-wide { width: 100%; }
.w-link { padding: 0; border: 0; background: none; color: var(--text); font-weight: 600; }
.w-link:hover { background: none; text-decoration: underline; }
.w-icon { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; background: transparent; border-color: transparent; color: var(--muted); }
.w-icon:hover:not(:disabled) { color: var(--text); }
.w-error { margin: 0; color: var(--error); font-size: 12.5px; }
.w-note { color: var(--muted); font-size: 12.5px; margin: 14px 0 0; }
.w-hint { margin: -4px 0 0 4px; color: var(--muted); font-size: 12px; }

/* ---- login ---- */
.w-auth { display: grid; grid-template-columns: minmax(340px, 520px) 1fr; min-height: 100%; }
.w-auth-panel { display: flex; flex-direction: column; padding: 24px; background: #181818; border-right: 1px solid var(--line); }
.w-auth-top { height: 24px; }
.w-auth-form { width: 100%; max-width: 340px; margin: auto; display: flex; flex-direction: column; gap: 12px; padding-block: 40px; }
.w-auth-form .w-mark { margin: 0 auto 6px; }
.w-auth-form h1 { text-align: center; margin-bottom: 18px; font-family: var(--sans); font-size: 26px; font-weight: 400; }
.w-field { width: 100%; height: 50px; padding: 0 20px; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--line-strong); }
.w-field::placeholder { color: #777; }
.w-field:focus { border-color: var(--focus); outline: none; }
.w-switch { margin: 6px 0 0; text-align: center; color: var(--muted); }
.w-local { margin: 0; text-align: center; color: var(--muted); font-size: 12px; }

.w-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; text-align: center; }
.w-hero h2 { margin: 0 0 8px; font-family: var(--serif); font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; text-wrap: balance; }
.w-hero > p { margin: 0 0 28px; color: var(--muted); font-size: 15px; max-width: 560px; text-wrap: balance; }
.w-hero-card { width: 100%; max-width: 760px; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: #171717; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
/* The recording is 804×404 on a dark checker, so the stage keeps that shape and colour. */
.w-hero-stage { aspect-ratio: 201 / 101; background: #1b1b1b; }
.w-hero-video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.w-hero-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border-top: 1px solid var(--line); }
.w-hero-files span { padding: 4px 9px; border-radius: 6px; background: #232323; color: #8a8a8a; font: 12px/1.4 ui-monospace, Consolas, monospace; animation: w-pop 6s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes w-pop { 0%, 70%, 100% { color: #8a8a8a; background: #232323; } 10%, 30% { color: var(--accent-ink); background: var(--accent); } }

/* ---- access code ---- */
.w-lead { margin: -10px 0 4px; text-align: center; color: var(--muted); text-wrap: balance; }
.w-notice { margin: 0; padding: 10px 14px; border: 1px solid rgba(233, 179, 95, .35); border-radius: 12px; background: rgba(233, 179, 95, .07); color: var(--warn); font-size: 13px; }
.w-code { height: auto; min-height: 96px; padding: 14px 18px; border-radius: 18px; resize: none; font: 12.5px/1.5 ui-monospace, Consolas, monospace; word-break: break-all; }
.w-code.ok { border-color: var(--ok); }
.w-btn.w-success, .w-btn.w-success:disabled { opacity: 1; background: var(--ok); color: #0c2416; animation: w-pop-in .45s cubic-bezier(.2, 1.6, .4, 1); }
.w-btn.w-success svg { stroke-width: 2.6; }
@keyframes w-pop-in { 0% { transform: scale(.94); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
.w-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

/* ---- welcome screen ---- */
.w-screen { min-height: 100%; display: grid; place-items: center; padding: 48px 16px; }
.w-intro { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.w-features { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; width: 100%; }
.w-features li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #1f1f1f; }
.w-features p { margin: 0; color: var(--muted); font-size: 13px; }
.w-feature-tag { flex: none; width: 76px; padding: 4px 0; border-radius: 6px; text-align: center; background: transparent; border: 1px solid var(--line-strong); color: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.w-intro .w-btn { max-width: 240px; border-radius: 10px; }

/* ---- the steps ---- */
.w-onboarding { min-height: 100%; display: flex; flex-direction: column; }
.w-top { display: flex; align-items: center; gap: 6px; padding: 16px 16px 0; color: var(--muted); }
.w-count { font-variant-numeric: tabular-nums; font-size: 13px; }
.w-progress { height: 2px; margin-top: 12px; }
.w-progress span { display: block; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5)); transition: width .4s; }
.w-main { flex: 1; display: grid; place-items: center; padding: 32px 16px; }
.w-step { width: 100%; max-width: 440px; display: flex; flex-direction: column; animation: w-rise .3s ease-out; }
@keyframes w-rise { from { opacity: 0; transform: translateY(8px); } }
.w-step > .w-mark { margin-bottom: 14px; }
.w-step > h1 { margin-bottom: 20px; }
.w-sub { margin: -12px 0 20px; color: var(--muted); }
.w-footer { max-width: 440px; margin: 0 auto; padding: 0 16px 24px; text-align: center; color: var(--muted); font-size: 12.5px; }

.w-row { display: flex; align-items: center; background: #262626; border: 1px solid var(--line-strong); border-radius: 10px; }
.w-row:focus-within { border-color: var(--focus); }
.w-row input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; background: none; outline: none; font-weight: 500; }
.w-row input::placeholder { color: var(--muted); font-weight: 400; }
.w-go { width: 40px; height: 40px; margin-right: 4px; padding: 0; display: grid; place-items: center; background: transparent; border-color: transparent; color: var(--muted); }
.w-go:hover { color: var(--text); }
.w-row-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 8px; min-height: 18px; }
.w-press { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }

.w-choices { display: grid; gap: 8px; }
.w-choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; text-align: left; border-radius: 10px; background: #1f1f1f; }
.w-choice kbd { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--muted); font: 600 11px/1 inherit; }
.w-choice-check { margin-left: auto; opacity: 0; color: var(--text); }
.w-choice.on { border-color: rgba(255, 255, 255, .55); background: #262626; }
.w-choice.on kbd { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.w-choice.on .w-choice-check { opacity: 1; }
.w-choices + .w-error, .w-choices ~ .w-btn { margin-top: 14px; }

.w-years { margin-top: 16px; }
.w-years-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.w-years-head .w-icon { border-color: var(--line); font-size: 18px; }
.w-years-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.w-year { height: 36px; padding: 0; border-radius: 6px; background: transparent; color: var(--muted); font-variant-numeric: tabular-nums; }
.w-year:hover:not(:disabled) { color: var(--text); }
.w-year.on { background: var(--accent-strong); border-color: transparent; color: var(--accent-ink); }
.w-step[data-step="year"] .w-note { text-align: center; }

.w-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.w-check-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #1f1f1f; }
.w-check-row.muted { color: var(--muted); }
.w-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--muted); }
.w-check-row.ok .w-dot { background: var(--ok); }
.w-check-row.bad .w-dot { background: var(--warn); }
.w-state { color: var(--muted); font-size: 12px; margin-left: 6px; }
.w-path { margin-top: 2px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.w-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

.w-folders { display: flex; flex-direction: column; gap: 12px; }
.w-folder { display: flex; flex-direction: column; gap: 6px; }
.w-folder-label { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12.5px; }
.w-folder-state { font-weight: 600; }
.w-folder-state.ok { color: var(--ok); }
.w-folder-state.bad { color: var(--warn); }
.w-folder input { height: 44px; padding: 0 14px; border-radius: 10px; background: #262626; border: 1px solid var(--line-strong); font: 12.5px ui-monospace, Consolas, monospace; }
.w-folder input:focus { border-color: var(--focus); outline: none; }
.w-folders .w-btn { margin-top: 6px; }

.w-summary { margin: 0 0 20px; padding: 4px 16px; border: 1px solid var(--line); border-radius: 12px; background: #1f1f1f; }
.w-summary > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.w-summary > div:last-child { border-bottom: 0; }
.w-summary dt { color: var(--muted); }
.w-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.w-summary dd.ok { color: var(--ok); }
.w-summary dd.bad, .w-folder-sum .bad { color: var(--warn); }
.w-folder-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.w-folder-sum span { padding: 2px 8px; border-radius: 6px; background: var(--raised); font: 500 12px/1.5 ui-monospace, Consolas, monospace; }

/* ---- Emil's page for access codes ---- */
#wCodesDialog, #wAccountsDialog { width: min(580px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.w-account-list { max-height: min(420px, 60vh); }
.w-code-list button.w-danger { background: rgba(239, 125, 125, .14); border-color: rgba(239, 125, 125, .5); color: var(--error); }
.w-codes h3 { margin: 22px 0 8px; font-family: var(--serif); font-size: 16px; font-weight: 600; }
.w-codes .w-label { color: var(--muted); font-size: 12px; }
.w-codes .w-error { margin: 4px 0 8px; }
.w-durations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.w-durations button { padding: 7px 0; border-radius: var(--radius-pill); color: var(--muted); white-space: nowrap; }
.w-durations button:hover { color: var(--text); }
.w-durations button.on { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
.w-codes-note { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--raised); font-size: 12.5px; overflow-wrap: anywhere; }
.w-codes-note.bad { border-color: rgba(233, 179, 95, .4); color: var(--warn); }
.w-codes-note pre { margin: 8px 0 0; color: var(--muted); font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; user-select: all; }
.w-fresh { margin-top: 14px; padding: 12px; border: 1px solid rgba(111, 211, 155, .4); border-radius: 12px; background: rgba(111, 211, 155, .06); }
.w-fresh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.w-fresh-head button { flex: none; border-radius: var(--radius-pill); }
.w-fresh-code { width: 100%; resize: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .25); color: var(--text); font: 12px/1.45 ui-monospace, Consolas, monospace; word-break: break-all; }
.w-code-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.w-code-list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; }
.w-code-list li.muted { color: var(--muted); }
.w-code-list li.expired .w-code-info { opacity: .55; }
.w-code-list button { flex: none; border-radius: var(--radius-pill); }
.w-code-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.w-code-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.w-code-info span { color: var(--muted); font-size: 12px; }
.w-chip { flex: none; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.w-chip.on { background: rgba(111, 211, 155, .14); color: var(--ok); }
.w-chip.off { background: var(--raised); color: var(--muted); }
.w-codes .row.end button { border-radius: var(--radius-pill); }

/* ---- account menu in the top bar ---- */
/* The top bar has to sit above the panels, or the open menu ends up behind them. */
.topbar { position: relative; z-index: 5; }
.w-user { position: relative; }
.w-avatar { width: 32px; height: 32px; padding: 0; border-radius: 50%; border-color: transparent; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 12px; }
.w-avatar:hover { background: var(--accent-hover); border-color: transparent; }
.w-user-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 230px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.w-user-who { display: flex; flex-direction: column; padding: 6px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow-wrap: anywhere; }
.w-user-who span { color: var(--muted); font-size: 12px; }
.w-user-who .w-user-access { margin-top: 4px; font-size: 11.5px; }
.w-user-menu button { text-align: left; border-color: transparent; background: transparent; }
.w-user-menu button:hover { background: var(--raised-hover); }

@media (max-width: 900px) {
  .w-auth { grid-template-columns: 1fr; }
  .w-hero { display: none; }
  .w-auth-panel { border-right: 0; }
}
@media (max-width: 460px) {
  .w-summary > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome *, .welcome *::before, .welcome *::after { animation: none !important; transition: none !important; }
}

/* ---- Studio-kopplingen ---- */
.connect-button { display: inline-flex; align-items: center; gap: 8px; }
.connect-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.connect-button.on .connect-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(111, 211, 155, .18); }
#connectDialog { width: min(580px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.connect-steps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.connect-steps strong { font-weight: 600; }
.connect-note { color: var(--muted); font-size: 12.5px; }
.connect-found { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 12px; }
.connect-found dt { color: var(--muted); }
.connect-found dd { margin: 0; font-weight: 600; }
.connect-found dd.ok { color: var(--ok); }
.connect-found dd.bad { color: var(--warn); }
.connect .row.end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---- the install guide ---- */
#guideDialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.guide-count { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.guide h2 { margin-top: 4px; }
.guide p { font-size: 14px; line-height: 1.55; }
.guide-picture { display: flex; align-items: center; justify-content: center; min-height: 230px; margin: 12px 0 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(circle at 30% 20%, #26324a, #141414 70%); overflow: hidden; }
.guide-picture img { max-width: 100%; max-height: 320px; border-radius: 8px; }
.guide-drawing { width: 100%; font: 12.5px/1.4 "Segoe UI", system-ui, sans-serif; color: #e8e8e8; }
.guide-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0 0; }
.guide-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.guide-dots span.on { width: 20px; border-radius: 4px; background: var(--text); }
.guide .row.end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.g-file { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); white-space: nowrap; }
.g-zip { width: 18px; height: 14px; border-radius: 2px; background: linear-gradient(90deg, #e6b53a 45%, #6b5a2a 45% 55%, #e6b53a 55%); }
.g-browser { border-radius: 10px; background: #202124; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); overflow: hidden; }
.g-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #2b2c2f; }
.g-bar span { width: 9px; height: 9px; border-radius: 50%; background: #555; }
.g-bar i { flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: 12px; background: #1b1b1d; color: #aaa; font-style: normal; }
.g-dl { padding: 0 6px; border-radius: 6px; background: #3b82f6; color: #fff; }
.g-pop { display: flex; flex-direction: column; gap: 4px; width: 230px; margin: 10px 10px 14px auto; padding: 10px; border-radius: 8px; background: #2f3033; outline: 2px solid #3b82f6; }
.g-pop small { color: #aaa; padding-left: 10px; }
.g-desk { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.g-menus { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.g-menu { list-style: none; margin: 0; padding: 4px; min-width: 150px; border: 1px solid #3a3a3a; border-radius: 8px; background: #2b2b2b; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.g-menu li { padding: 5px 10px; border-radius: 4px; }
.hit { outline: 2px solid #3b82f6; outline-offset: 1px; background: rgba(59, 130, 246, .2); border-radius: 4px; }
.g-props { max-width: 380px; margin: 0 auto; border: 1px solid #3a3a3a; border-radius: 8px; background: #2b2b2b; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.g-props-title { padding: 8px 12px; border-bottom: 1px solid #3a3a3a; }
.g-props dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; padding: 12px; }
.g-props dt { color: #aaa; }
.g-props dd { margin: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.g-props label { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; }
.g-box { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; background: #3b82f6; color: #fff; font-size: 10px; }
.g-props-ok { display: flex; justify-content: flex-end; padding: 0 12px 12px; }
.g-props-ok span { padding: 4px 18px; border: 1px solid #555; }
.g-term { max-width: 260px; padding: 8px 10px; border-radius: 6px; background: #0c0c0c; outline: 2px solid #3b82f6; }
.g-term b { display: block; margin-bottom: 4px; color: #aaa; font-weight: 500; }
.g-term code { font: 11.5px/1.4 Consolas, ui-monospace, monospace; color: #e8e8e8; }

/* ---- the Gemini key ---- */
.w-ai { display: grid; gap: 8px; }
.w-ai input { height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(0, 0, 0, .25); color: var(--text); font: 14px ui-monospace, Consolas, monospace; }
.w-ai input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.w-ai .w-note { margin: 0; }
.w-ai-have { margin: 0 0 10px; }
.w-ok { color: var(--ok); font-weight: 600; }
.connect-steps a { color: var(--accent); }
#wAiDialog { width: min(560px, calc(100vw - 32px)); }
#wAiDialog .row.end { display: flex; justify-content: flex-end; margin-top: 10px; }