/* ===========================================================================
   Lite Work Designs — CLIENT frosted upgrade
   Restyles the client experience (auth, signup wizard, app shell: dashboard,
   project detail, new-project brief, brand kit, notifications, book-a-call)
   to the same frosted-glass "pastel dawn" look as the designer shell.

   STRICTLY visual: this layer only overrides paint (background, frost cards,
   pills, type, press feedback, focus). It changes NO DOM ids and NO JS
   behavior — every selector is scoped to an existing client wrapper so the
   marketing site/ and #designerShell are never affected.

   Loaded AFTER tokens.css + app.css so it wins the cascade. Relies on the
   frosted tokens defined in designer.css (--brand-*, --frost-*, --radius-*,
   --fs-*, --space-*) which is already linked on the page.
=========================================================================== */

/* ---------------------------------------------------------------------------
   0. The pastel-dawn BrandBackground behind the client screens.
   The designer shell injects <div class="brand-bg"> in markup; for the client
   surfaces we paint the same gradient + orbs + feather via a fixed ::before/
   ::after pseudo on each top-level wrapper (no markup change needed).
--------------------------------------------------------------------------- */
#authScreen,
#wizard,
#partB,
#appShell{
  position:relative;
  background:linear-gradient(to bottom,
    var(--brand-bg-top) 0%,
    var(--brand-bg-mid) 50%,
    var(--brand-bg-bot) 100%);
}
/* soft blurred orbs — drawn on a fixed full-bleed pseudo layer so they sit
   behind content and don't scroll. We reuse one wrapper's ::before/::after for
   two orbs and a radial-gradient stack for the third + feather wash. */
#authScreen::after,
#wizard::after,
#partB::after,
#appShell::after{
  content:"";
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background:
    radial-gradient(280px 280px at 88% -6%,  color-mix(in srgb,var(--orb-orchid) 45%,transparent), transparent 70%),
    radial-gradient(260px 260px at 4% 42%,   color-mix(in srgb,var(--orb-blue)   45%,transparent), transparent 70%),
    radial-gradient(240px 240px at 96% 92%,  color-mix(in srgb,var(--orb-blush)  40%,transparent), transparent 70%),
    url("../assets/feather.png") right 6% bottom 8% / 230px no-repeat;
  filter:blur(20px) saturate(1.1);
}
[data-theme="dark"] #authScreen::after,
[data-theme="dark"] #wizard::after,
[data-theme="dark"] #partB::after,
[data-theme="dark"] #appShell::after{ opacity:.5; }

/* keep real content above the orb wash */
#appShell > .app-nav,
#appShell > .nav-drawer,
#appShell > .shell-main,
#authScreen > .auth-card,
#authScreen > .auth-feathers,
#wizard > *, #partB > *{ position:relative; z-index:1; }

/* the existing per-screen glow pseudo (.auth::before/.wiz::before) would now
   double up on the dawn gradient — soften it so we don't get a muddy stack. */
#authScreen::before,
#wizard::before{ opacity:.5; }

/* ---------------------------------------------------------------------------
   1. AUTH + SIGNUP cards → frosted glass
--------------------------------------------------------------------------- */
#authScreen .auth-card{
  background:var(--frost-fill);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-card);
  box-shadow:var(--frost-shadow);
  color:var(--brand-slate);
}
#authScreen .auth-title,
#wizard .wiz-step h1,
#partB .wiz-step h1{ color:var(--brand-slate-deep); }
#authScreen .auth-sub,
#wizard .wiz-sub,
#partB .wiz-sub{ color:var(--brand-slate-muted); }

/* wizard choice cards → frosted */
#wizard .wiz-choice{
  background:var(--frost-fill-16);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-16);
}
#wizard .wiz-choice:hover{
  border-color:color-mix(in srgb,var(--brand-slate) 45%,transparent);
}
#wizard .wiz-choice b{ color:var(--brand-slate-deep); }
#wizard .wiz-choice span{ color:var(--brand-slate-muted); }
#wizard .wiz-progress #wizBar,
#newProject .wiz-progress #briefBar{ background:var(--brand-slate); }

/* ---------------------------------------------------------------------------
   2. APP NAV → frosted top bar
--------------------------------------------------------------------------- */
#appShell .app-nav{
  background:var(--frost-fill);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--brand-card-stroke);
}
#appShell .app-nav .brand-name{ color:var(--brand-slate-deep); }
#appShell .app-nav .nav-links a{ color:var(--brand-slate-muted); }
#appShell .app-nav .nav-links a:hover{ color:var(--brand-slate-deep); }

/* mobile drawer panel → frosted */
#appShell .nav-drawer-inner{
  background:var(--frost-fill);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border-left:1px solid var(--brand-card-stroke);
}

/* ---------------------------------------------------------------------------
   3. DASHBOARD — heading + project cards
--------------------------------------------------------------------------- */
#dashboardView .dash-head{ border-bottom:1px solid var(--brand-card-stroke); }
#dashboardView .dash-head h2{ color:var(--brand-slate-deep); }
#dashboardView .eyebrow{ color:var(--brand-slate-muted); }

#dashboardView .proj{
  background:var(--frost-fill);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-card);
  box-shadow:var(--frost-shadow-sm);
  color:var(--brand-slate);
}
#dashboardView .proj:hover{
  transform:translateY(-2px);
  box-shadow:var(--frost-shadow);
  border-color:color-mix(in srgb,var(--brand-slate) 30%,transparent);
}
#dashboardView .proj:active{ transform:scale(.985) translateY(-1px); }
#dashboardView .proj-type{ color:var(--brand-slate-deep); }
#dashboardView .proj-price{ color:var(--brand-slate-deep); }
#dashboardView .proj-step,
#dashboardView .proj-next,
#dashboardView .proj-date{ color:var(--brand-slate-muted); }
#dashboardView .proj-bar{ background:color-mix(in srgb,var(--brand-slate) 14%,transparent); }
#dashboardView .proj-bar span{ background:var(--brand-slate); }
/* status tags → frosted pill palette */
#dashboardView .tag-neutral{ color:var(--brand-slate);   background:color-mix(in srgb,var(--brand-periwinkle) 46%,transparent); }
#dashboardView .tag-progress{ color:var(--brand-warm-text); background:color-mix(in srgb,var(--brand-blush) 26%,transparent); }
#dashboardView .tag-good{ color:var(--brand-success);  background:color-mix(in srgb,var(--brand-success) 14%,transparent); }
#dashboardView .tag-bad{ color:var(--brand-danger);   background:color-mix(in srgb,var(--brand-danger) 14%,transparent); }
/* loading skeleton card → frosted base */
#dashboardView .proj-skeleton{
  background:var(--frost-fill);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-card);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
}
#dashboardView .empty h3{ color:var(--brand-slate-deep); }
#dashboardView .empty p{ color:var(--brand-slate-muted); }

/* ---------------------------------------------------------------------------
   4. PROJECT DETAIL — title, stages, all cards (proof/quote/pay/deliver/
   messages/milestones/review/references)
--------------------------------------------------------------------------- */
#projectDetail .detail-title{ color:var(--brand-slate-deep); }
#projectDetail .detail-guide{ color:var(--brand-slate-muted); }
#projectDetail .stages li{ color:var(--brand-slate-muted); border-top-color:color-mix(in srgb,var(--brand-slate) 22%,transparent); }
#projectDetail .stages li.done{ color:var(--brand-slate); border-top-color:var(--brand-slate); }
#projectDetail .stages li.current{ color:var(--brand-slate-deep); border-top-color:var(--brand-slate); }

#projectDetail .card{
  background:var(--frost-fill);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-card);
  box-shadow:var(--frost-shadow-sm);
  color:var(--brand-slate);
}
#projectDetail .card h2{ color:var(--brand-slate-deep); }
#projectDetail .quote-price{ color:var(--brand-slate-deep); }
#projectDetail .quote-price .was{ color:var(--brand-slate-muted); }
#projectDetail .quote-terms,
#projectDetail .muted{ color:var(--brand-slate-muted); }
/* milestone bar */
#projectDetail .mile-progress{ background:color-mix(in srgb,var(--brand-slate) 14%,transparent); }
#projectDetail .mile-progress #milestoneBar{ background:var(--brand-success); }

/* message thread + compose → frosted bubbles / field */
#projectDetail .msg-compose textarea,
#projectDetail textarea,
#projectDetail .code-box input,
#projectDetail input[type="text"]{
  background:var(--brand-field-fill);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-control);
  color:var(--brand-slate-deep);
}
#projectDetail textarea::placeholder,
#projectDetail input::placeholder{ color:var(--brand-hint); }

/* ---------------------------------------------------------------------------
   5. NEW-PROJECT BRIEF — step heads + choice grids + budget box
--------------------------------------------------------------------------- */
#newProject .brief-step h2{ color:var(--brand-slate-deep); }
#newProject .wiz-sub{ color:var(--brand-slate-muted); }

#newProject .svc-pick button,
#newProject .size-grid button{
  background:var(--frost-fill-16);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-16);
  color:var(--brand-slate-deep);
}
#newProject .svc-pick button:hover,
#newProject .size-grid button:hover{
  border-color:color-mix(in srgb,var(--brand-slate) 40%,transparent);
}
#newProject .svc-pick button[aria-pressed="true"],
#newProject .size-grid button[aria-pressed="true"]{
  border-color:var(--brand-slate);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-slate) 30%,transparent);
}
#newProject .size-grid b{ color:var(--brand-slate-deep); }
#newProject .size-grid span{ color:var(--brand-slate-muted); }

#newProject .style-grid button{
  background:var(--frost-fill-16);
  border:1px solid var(--brand-card-stroke);
  color:var(--brand-slate);
}
#newProject .style-grid button[aria-pressed="true"]{
  border-color:var(--brand-slate);
  background:color-mix(in srgb,var(--brand-periwinkle) 40%,transparent);
  color:var(--brand-slate-deep);
}

#newProject .budget-box{
  background:var(--frost-fill);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-card);
}
#newProject .brange{ color:var(--brand-slate-muted); }
#newProject .brange b,
#newProject .budget-text{ color:var(--brand-slate-deep); }
#newProject .brange input[type="range"]{ accent-color:var(--brand-slate); }

/* ---------------------------------------------------------------------------
   6. MODALS — agreement / changes / book-a-call → frosted dialog
--------------------------------------------------------------------------- */
#appShell .modal-card{
  background:var(--frost-fill);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-26);
  box-shadow:var(--frost-shadow);
  color:var(--brand-slate);
}
#appShell .modal-card h2{ color:var(--brand-slate-deep); }
#appShell .modal-card .muted{ color:var(--brand-slate-muted); }
#appShell .modal-card textarea,
#appShell .modal-card input[type="text"],
#appShell .modal-card select{
  background:var(--brand-field-fill);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-control);
  color:var(--brand-slate-deep);
}
#appShell .agree-text{
  background:var(--brand-field-fill);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-control);
  color:var(--brand-slate);
}
#appShell .agree-check{ color:var(--brand-slate); }

/* ---------------------------------------------------------------------------
   7. NOTIFICATIONS panel → frosted
--------------------------------------------------------------------------- */
#appShell .notif-panel{
  background:var(--frost-fill);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-18);
  box-shadow:var(--frost-shadow);
  color:var(--brand-slate);
}

/* ---------------------------------------------------------------------------
   8. BRAND KIT — list rows, editor card, wizard, empty state
--------------------------------------------------------------------------- */
#brandKitView .bk-head h1,
#brandKitView .bk-step-title{ color:var(--brand-slate-deep); }
#brandKitView .bk-count,
#brandKitView .bk-step-sub,
#brandKitView .bk-hint{ color:var(--brand-slate-muted); }

#brandKitView .bk-row,
#brandKitView .bk-empty,
#brandKitView .bk-editor-card{
  background:var(--frost-fill);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-card);
  box-shadow:var(--frost-shadow-sm);
  color:var(--brand-slate);
}
#brandKitView .bk-empty{ box-shadow:none; }
#brandKitView .bk-row:hover{ border-color:color-mix(in srgb,var(--brand-slate) 35%,transparent); }
#brandKitView .bk-row:active{ transform:scale(.985); }
#brandKitView .bk-row-name{ color:var(--brand-slate-deep); }
#brandKitView .bk-row-sub{ color:var(--brand-slate-muted); }
#brandKitView .bk-row-thumb,
#brandKitView .bk-logo-thumb{
  background:color-mix(in srgb,var(--brand-periwinkle) 40%,transparent);
  color:var(--brand-slate);
  border:1px solid var(--brand-card-stroke);
}
#brandKitView .bk-field > span:first-child,
#brandKitView .bk-field-h{ color:var(--brand-slate-deep); }
#brandKitView .bk-field input[type=text],
#brandKitView .bk-field textarea{
  background:var(--brand-field-fill);
  border:1px solid var(--brand-card-stroke);
  border-radius:var(--radius-control);
  color:var(--brand-slate-deep);
}
#brandKitView .bk-field input::placeholder,
#brandKitView .bk-field textarea::placeholder{ color:var(--brand-hint); }
#brandKitView .bk-color{
  border:1px solid var(--brand-card-stroke);
  background:var(--brand-field-fill);
  color:var(--brand-slate);
}
#brandKitView .bk-wiz-circle{
  background:var(--brand-field-fill);
  border:1px solid var(--brand-card-stroke);
  color:var(--brand-slate);
}
#brandKitView .bk-wiz-bar{ background:color-mix(in srgb,var(--brand-slate) 14%,transparent); }
#brandKitView .bk-wiz-fill{ background:var(--brand-slate); }

/* ---------------------------------------------------------------------------
   9. CONTROLS — buttons get the designer "press" feedback + frosted text btn
   We only adjust the accent of solid buttons to brand slate-fill so client
   CTAs read identically to the designer app. (Logic/classes unchanged.)
--------------------------------------------------------------------------- */
#appShell .btn-solid{
  background:var(--brand-slate-fill); color:#fff;
  box-shadow:var(--frost-shadow-sm);
}
#appShell .btn-line{
  border:1.5px solid var(--brand-slate); color:var(--brand-slate);
}
#appShell .btn-line:hover{
  border-color:var(--brand-slate-deep); color:var(--brand-slate-deep);
}
#appShell .btn-text{ color:var(--brand-slate-muted); }
#appShell .btn-text:hover{ color:var(--brand-slate-deep); }
/* press feedback — match designer PressableButtonStyle (scale + slate bloom) */
@media (prefers-reduced-motion:no-preference){
  #appShell .btn:active{
    transform:scale(.95);
    box-shadow:0 0 16px color-mix(in srgb,var(--brand-slate) 60%,transparent);
    transition:transform .12s ease, box-shadow .3s ease-out;
  }
}

/* consistent focus ring in brand slate across client controls */
#appShell :focus-visible,
#authScreen :focus-visible,
#wizard :focus-visible,
#partB :focus-visible{ outline:2px solid var(--brand-slate); outline-offset:3px; }

/* nav bell + theme toggle → frosted circular icon buttons */
#appShell .nav-bell,
#appShell .theme-toggle{
  border:1px solid var(--brand-card-stroke);
  background:var(--brand-field-fill);
  color:var(--brand-slate);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
}
#appShell .theme-toggle:hover{ border-color:var(--brand-slate); color:var(--brand-slate-deep); }

/* ---------------------------------------------------------------------------
   Desktop layout: the auth + signup wizard were designed phone-first (content
   vertically centered in 100vh), which floats in a big void on wide screens.
   On desktop, bias content toward the upper third so it reads as intentional.
   --------------------------------------------------------------------------- */
@media (min-width: 760px) {
  /* The auth screen is `.auth { display:grid; place-items:center }` — on a tall window the
     grid centers the card far down the page. Override to a top-aligned flex column so the
     card always sits in the upper area regardless of window height.
     IMPORTANT: scope to :not(.hidden) and do NOT use !important — otherwise this rule
     overrides the `.hidden { display:none }` the app uses to remove the auth screen after
     login, leaving the sign-in form stuck on top of the logged-in app. */
  #authScreen:not(.hidden) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: clamp(40px, 8vh, 110px);
  }
  #wizard .wiz-step,
  #partB .wiz-step,
  #newProject .wiz-step { justify-content: flex-start; padding-top: clamp(64px, 11vh, 130px); }
}