/* Last web application tokens and shared primitives. Authority: /DESIGN.md. */
@import url('/wisepunk-tokens.css');
@import url('/theme.css');
/* v3 stepped display roles for legacy pages: Wisepunk ramp sizes that step at the 600/1024
   breakpoints instead of fluid clamp(). New screens use the wp- type classes directly. */
:root{--lw-type-mark:var(--text-display-m-size);--lw-type-hero:var(--text-large-title-size);--lw-type-display:var(--text-title1-size);--lw-type-section:var(--text-title2-size);--lw-type-lead:var(--text-body-size)}
@media(min-width:600px){:root{--lw-type-mark:var(--text-display-l-size);--lw-type-hero:var(--text-display-s-size);--lw-type-display:var(--text-large-title-size);--lw-type-section:var(--text-title1-size);--lw-type-lead:var(--text-title3-size)}}
@media(min-width:1024px){:root{--lw-type-hero:var(--text-display-m-size);--lw-type-display:var(--text-display-s-size);--lw-type-section:var(--text-large-title-size)}}
:root {
  /* v3: colours, fonts and radii come from theme.css (--lw-* aliases). Non-colour legacy tokens: */
  --lw-text-small: .875rem;
  --lw-text-body: 1rem;
  --lw-space-1: .25rem;
  --lw-space-2: .5rem;
  --lw-space-3: .75rem;
  --lw-space-4: 1rem;
  --lw-space-6: 1.5rem;
  --lw-space-8: 2rem;
  --lw-space-12: 3rem;
  --lw-content-max: 1328px;
  --lw-reading-max: 68ch;
  --lw-gutter: clamp(20px,4.5vw,64px);
  --lw-motion-fast: 140ms;
  --lw-chart-model: var(--accent);
  --lw-chart-server: var(--warning);
}
.lw-brand { display:inline-flex;align-items:center;gap:8px;color:var(--lw-ink);text-decoration:none;white-space:nowrap;font-family:var(--lw-font); }
.lw-brand .logo-icon {display:block;width:var(--size-control-sm);height:var(--size-control-sm);flex-shrink:0;}
.lw-brand .logo-icon img {width:100%;height:100%;display:block;}
.lw-brand .logo-name {color:var(--lw-ink);font-size:var(--text-title3-size);font-weight:var(--weight-semibold);line-height:1;letter-spacing:-.01em;}
.lw-brand .brand-context {font-size:13px;color:var(--lw-muted);font-weight:500;margin-left:8px;}
.lw-button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--lw-control-border);border-radius:var(--lw-radius-control);background:var(--lw-raised);color:var(--lw-ink);font:600 1rem/1.3 var(--lw-font);text-decoration:none;cursor:pointer;}
.lw-button--primary {background:var(--lw-accent);border-color:var(--lw-accent);color:var(--lw-on-accent);}
.lw-button:hover {background:var(--lw-hover);}
.lw-button--primary:hover {background:var(--lw-accent);filter:brightness(1.07);}
.lw-button:disabled {opacity:.5;cursor:not-allowed;}
.lw-field {display:grid;gap:8px;color:var(--lw-muted);font:500 1rem/1.5 var(--lw-font);}
.lw-field :is(input,select,textarea) {min-height:44px;padding:8px 12px;border:1px solid var(--lw-control-border);border-radius:var(--lw-radius-control);background:var(--lw-surface);color:var(--lw-ink);font:inherit;max-width:100%;}
.lw-panel {padding:var(--lw-space-6);background:var(--lw-surface);border:1px solid var(--lw-line);border-radius:var(--lw-radius-panel);}
.lw-notice {padding:16px 20px;border:1px solid color-mix(in srgb,var(--lw-warning) 35%,transparent);border-radius:var(--radius-control);background:var(--lw-warning-surface);color:var(--lw-warning);line-height:1.6;}
.lw-skip {position:fixed;top:8px;left:8px;z-index:1000;padding:12px 16px;background:var(--lw-accent);color:var(--lw-on-accent);transform:translateY(-160%);}
.lw-skip:focus {transform:none;}
:where(a,button,input,select,textarea,summary):focus-visible {outline:3px solid var(--lw-accent);outline-offset:3px;}
@media(max-width:700px){.lw-brand .logo-name{font-size:22px}.lw-brand .brand-context{font-size:12px;margin-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* v2 Apple adaptation colours were removed in v3; theme.css supplies every --lw-* colour. */
.lw-button { border-radius: 999px; }

/* Site-led journey components: shared roles for library, sign-in and editing. */
.lw-lead{max-width:48ch;color:var(--lw-muted);font-size:var(--lw-type-lead);line-height:1.55;margin:16px 0 0}
.lw-chapter{display:block;color:var(--lw-accent);font-size:11px;font-weight:600;letter-spacing:0;margin-bottom:24px}
.lw-site-cover{width:100%;flex-shrink:0;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/10;display:grid;place-items:center;background:var(--lw-accent-surface);border-bottom:1px solid var(--lw-line);border-radius:var(--lw-radius-panel) var(--lw-radius-panel) 0 0}
.lw-site-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.lw-site-cover__initial{font-size:var(--lw-type-mark);line-height:1;font-weight:600;letter-spacing:-.07em;color:var(--lw-accent)}
.lw-site-cover__caption{position:absolute;bottom:12px;left:12px;max-width:calc(100% - 24px);padding:4px 8px;border-radius:var(--lw-radius-control);background:var(--lw-surface);color:var(--lw-muted);font-size:11px}
.lw-reading{max-width:820px;margin:auto;padding:64px 32px 96px}.lw-reading h3{border-top:1px solid var(--lw-line);padding-top:28px;margin-top:32px}.lw-reading p{max-width:65ch}

/* Honest first response before a real website image exists. */
.lw-arrival{position:absolute;inset:30% 24px auto;text-align:center;max-width:900px;margin:auto;padding:40px 24px;color:var(--lw-ink)}
.lw-arrival h2{font-size:var(--lw-type-hero);line-height:1.08;letter-spacing:-.05em;overflow-wrap:anywhere;margin:0 0 24px}
.lw-arrival>p{font-size:var(--lw-type-lead);color:var(--lw-muted);max-width:48ch;margin:0 auto 32px}
.lw-arrival__steps{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;margin:0 0 28px;font-size:12px;color:var(--lw-muted)}.lw-arrival__steps>span:first-child{color:var(--lw-accent)}.lw-arrival>small{color:var(--lw-muted);font-size:12px}
@media(max-width:700px){.lw-arrival{inset:25% 12px auto;padding:24px 8px}.lw-arrival .lw-chapter{font-size:11px}.lw-arrival__steps{gap:8px 12px;font-size:11px}}

/* Observed stage landmarks. Never represents a measured completion percentage. */
.lw-stage-track{list-style:none;display:flex;gap:var(--lw-space-6);padding:0;margin:0;color:var(--lw-muted);font-size:12px}
.lw-stage-track li{flex:1;display:flex;align-items:center;gap:8px;border-top:2px solid var(--lw-line);padding-top:8px;white-space:nowrap}
.lw-stage-track li span{font-variant-numeric:tabular-nums;font-size:11px;color:var(--lw-muted)}
.lw-stage-track [data-state=active]{border-color:var(--lw-accent);color:var(--lw-ink);font-weight:600}
.lw-stage-track [data-state=done]{border-color:var(--lw-accent)}
@media(max-width:700px){.lw-stage-track{gap:12px;font-size:11px}.lw-stage-track li{gap:4px}}


/* A single prominent next step at a completed journey milestone. */
.lw-button.lw-button--hero{min-height:var(--lw-hero-height,76px);padding:var(--lw-hero-padding,20px 36px);gap:32px;font-size:var(--lw-hero-font,var(--text-title3-size));font-weight:600;letter-spacing:-.025em}

/* Event-driven import activity; the moving band signals work, never a percentage. */
.lw-import-activity{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;text-align:left;max-width:680px;margin:24px auto 0;padding:24px 28px 32px;background:color-mix(in srgb,var(--lw-accent) 12%,var(--lw-surface));border:1px solid color-mix(in srgb,var(--lw-accent) 45%,var(--lw-line));border-radius:var(--lw-radius-panel);overflow:hidden}
.lw-import-activity[hidden]{display:none}.lw-import-activity>div:first-child{display:grid;gap:8px}.lw-import-activity__label{font-size:11px;letter-spacing:0;color:var(--lw-accent);font-weight:600}.lw-import-activity [data-work-title]{font-size:22px;line-height:1.15;color:var(--lw-ink)}.lw-import-activity [data-work-detail]{font-size:12px;color:var(--lw-muted);max-width:36ch}.lw-import-activity__metric{display:grid;gap:4px;text-align:right;flex-shrink:0}.lw-import-activity [data-work-count]{font-size:48px;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--lw-ink)}.lw-import-activity [data-work-unit]{font-size:12px;color:var(--lw-muted)}.lw-import-activity__track{position:absolute;bottom:0;left:0;right:0;height:6px;background:color-mix(in srgb,var(--lw-accent) 15%,transparent)}.lw-import-activity__track i{display:block;width:35%;height:100%;background:var(--lw-accent);animation:lw-work-sweep 600ms ease-in-out infinite}
@keyframes lw-work-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(390%)}}
.lw-import-activity[data-active=false] .lw-import-activity__track i,.lw-import-activity[data-quiet=true] .lw-import-activity__track i,.motion-paused .lw-import-activity__track i{animation:none;transform:none;width:100%;opacity:.3}
@media(prefers-reduced-motion:reduce){.lw-import-activity__track i{animation:none;width:100%;opacity:.5}}
@media(max-width:700px){.lw-import-activity{padding:16px 16px 24px;gap:12px;margin-top:20px}.lw-import-activity [data-work-title]{font-size:17px}.lw-import-activity [data-work-count]{font-size:34px}.lw-import-activity [data-work-detail]{font-size:11px}.lw-import-activity [data-work-unit]{font-size:11px;max-width:12ch}}

/* Immersive import flow: measured stage fills, decorative traveling light. */
.lw-import-flow{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lw-stage-track--cinematic{gap:clamp(12px,2vw,28px);width:min(720px,100%);margin:32px auto 0;padding:0;list-style:none}
.lw-stage-track--cinematic li{position:relative;border:0!important;padding-top:20px;isolation:isolate;font-size:12px;color:var(--lw-muted)}
.lw-stage-track--cinematic li:before{content:'';position:absolute;inset:0 0 auto;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--lw-accent) var(--stage-fill,0%),var(--lw-line) var(--stage-fill,0%));transition:background 600ms}
.lw-stage-track--cinematic li[data-state=active]:before{box-shadow:0 0 28px color-mix(in srgb,var(--lw-accent) 45%,transparent)}
.lw-stage-track--cinematic li[data-state=active]:after{content:'';position:absolute;top:-2px;left:0;width:28%;height:12px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--lw-accent),var(--lw-on-accent),transparent);filter:blur(1px);animation:lw-flow-light 600ms ease-in-out infinite}
.lw-stage-track--cinematic li[data-state=done]{color:var(--lw-ink)}
@keyframes lw-flow-light{0%{transform:translateX(-30%);opacity:0}30%,70%{opacity:1}100%{transform:translateX(280%);opacity:0}}
@media(prefers-reduced-motion:reduce){.lw-stage-track--cinematic li:after{animation:none!important;display:none}}

/* Studio: spatial continuity from the import map, without moving the website. */
:root{--lw-motion-enter:520ms;--lw-ease-settle:cubic-bezier(.2,.8,.2,1);--lw-depth-shadow:0 2px 4px color-mix(in srgb,var(--lw-ink) 3%,transparent),0 18px 48px color-mix(in srgb,var(--lw-ink) 8%,transparent);--lw-studio-light:radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--lw-accent) 9%,transparent),transparent 60%)}
.lw-depth-surface{background:var(--lw-surface);border:1px solid var(--lw-line);border-radius:var(--lw-radius-sheet);box-shadow:var(--lw-depth-shadow)}
.lw-reveal{animation:lw-settle-in var(--lw-motion-enter) var(--lw-ease-settle) both}
@keyframes lw-settle-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lw-presence{display:flex;align-items:center;gap:8px;font:550 12px/1.5 var(--lw-font);color:var(--lw-muted)}
.lw-presence>span{width:7px;height:7px;border-radius:50%;background:var(--lw-accent);box-shadow:0 0 0 4px var(--lw-accent-surface);flex-shrink:0}
.lw-idea-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:124px;padding:16px;text-align:left;border:1px solid var(--lw-line);border-radius:var(--lw-radius-panel);background:var(--lw-surface);color:var(--lw-ink);font:inherit;cursor:pointer;transition:transform var(--lw-motion-fast) var(--lw-ease-settle),box-shadow var(--lw-motion-fast),border-color var(--lw-motion-fast)}
.lw-idea-card strong{font-size:13px;font-weight:600}.lw-idea-card small{font-size:11px;color:var(--lw-muted)}
.lw-idea-card:hover,.lw-idea-card:focus-visible{border-color:var(--lw-accent);box-shadow:var(--lw-depth-shadow);transform:translateY(-3px)}
.lw-idea-mark{position:relative;display:block;width:48px;height:28px;margin-bottom:8px;color:var(--lw-accent)}
.lw-idea-mark i{position:absolute;display:block;width:24px;height:3px;background:currentColor;border-radius:0px;transition:transform 260ms var(--lw-ease-settle)}
.lw-idea-mark i:nth-child(1){top:4px;left:0}.lw-idea-mark i:nth-child(2){top:13px;left:7px}.lw-idea-mark i:nth-child(3){top:22px;left:14px}
.lw-idea-mark--planes i{height:16px;width:24px;border:1px solid currentColor;background:var(--lw-accent-surface);transform:skewY(-12deg)}
.lw-idea-mark--planes i:nth-child(1){top:0;left:0}.lw-idea-mark--planes i:nth-child(2){top:5px;left:7px}.lw-idea-mark--planes i:nth-child(3){top:10px;left:14px}
.lw-idea-mark--motion i{width:6px;height:6px;border-radius:50%}.lw-idea-mark--motion i:nth-child(2){width:9px;height:9px}.lw-idea-mark--motion i:nth-child(3){width:12px;height:12px;top:18px}
.lw-idea-mark--spark i{width:3px;height:24px;top:2px!important;left:22px!important;transform:rotate(0deg)}.lw-idea-mark--spark i:nth-child(2){transform:rotate(60deg)}.lw-idea-mark--spark i:nth-child(3){transform:rotate(120deg)}
.lw-idea-card:hover .lw-idea-mark--motion i{transform:translateX(8px)}.lw-idea-card:hover .lw-idea-mark--planes i:last-child{transform:skewY(-12deg) translate(4px,3px)}
.lw-segmented{display:flex;gap:4px;padding:4px;background:var(--lw-raised);border-radius:999px}
.lw-segmented button{flex:1;min-height:44px;border:0;border-radius:999px;padding:8px 20px;color:var(--lw-muted);background:transparent;font:600 13px var(--lw-font);cursor:pointer}
.lw-segmented button[aria-pressed=true]{background:var(--lw-surface);color:var(--lw-ink);box-shadow:var(--lw-shadow)}
@media(prefers-reduced-motion:reduce){.lw-reveal{animation:none}.lw-idea-card,.lw-idea-mark i{transition:none}.lw-idea-card:hover,.lw-idea-card:focus-visible,.lw-idea-card:hover .lw-idea-mark i{transform:none}}

/* Studio components (conversation, composer, menus, trays) moved to components.css in v3. */

/* Shared private-page gate. Blur is presentation; protected data stays server-authorized. */
.lw-auth-locked body{overflow:hidden}
.lw-auth-locked body>[data-lw-auth-content]{filter:blur(12px);pointer-events:none;user-select:none}
.lw-auth-private-hidden body>[data-lw-auth-content]{visibility:hidden}
.lw-auth-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:32px;border:1px solid var(--lw-line);border-radius:var(--lw-radius-sheet);background:var(--lw-surface);color:var(--lw-ink);font-family:var(--lw-font);box-shadow:var(--lw-depth-shadow)}
.lw-auth-dialog::backdrop{background:color-mix(in srgb,var(--lw-canvas) 55%,transparent);backdrop-filter:none} /* wp-allow: scrim, no blur */
.lw-auth-dialog h1{font-size:28px;line-height:1.15;letter-spacing:-.03em;margin:28px 0 12px}
.lw-auth-dialog p{line-height:1.5;color:var(--lw-muted)}
.lw-auth-dialog form,.lw-auth-dialog [data-auth-view="denied"]{display:grid;gap:16px}
.lw-auth-dialog [hidden]{display:none!important}
.lw-auth-dialog .lw-field{display:grid;gap:8px}
.lw-auth-dialog input{box-sizing:border-box;width:100%;min-height:48px;font-size:16px}
.lw-auth-dialog .lw-button{min-height:44px}
.lw-auth-dialog #lw-auth-error{color:var(--lw-danger)}
.lw-auth-dialog .lw-auth-home{display:inline-flex;align-items:center;min-height:44px;color:var(--lw-muted)}
@media(prefers-reduced-transparency:reduce){.lw-auth-dialog::backdrop{background:var(--lw-canvas);backdrop-filter:none}}
#lw-auth-gate .logo-name{display:inline}