/* ===========================================================================
   Lite Work Designs — DESIGNER VISUAL SYSTEM
   The frosted-glass, pastel-dawn-gradient, feather-watermark look that the
   signed-in DESIGNER surfaces (shell / requests / detail) opt into.

   Additive only: every rule here is namespaced under designer classes
   (.brand-bg, .frost, .pill, .avatar, .icon-btn, .section-head, etc.).
   It does NOT touch the existing marketing / auth / client paper-flat system.

   Extends the existing token system in tokens.css. Light is the default
   ( :root ); [data-theme="dark"] flips. The inline boot script always sets
   data-theme to "light" or "dark", so [data-theme="light"] also matches.
   Source of truth: docs/superpowers/research/ios-rebuild-shell-visual.md
=========================================================================== */

:root{
  /* ---- DESIGNER tokens — adaptive in-app set (Theme.swift) — LIGHT ---- */
  --brand-slate:#44516E;          /* text / icon / primary accent          */
  --brand-slate-deep:#3A4661;     /* headings / strong text                */
  --brand-slate-muted:#6E7791;    /* secondary text                        */
  --brand-hint:#8A90A4;           /* placeholders / chevrons / hints       */
  --brand-warm-text:#7E4F3A;      /* accent label text                     */
  --brand-slate-fill:#44516E;     /* FIXED fill for buttons (white text)   */

  --brand-field-fill:rgba(255,255,255,.60);   /* input / panel surface     */
  --brand-card-stroke:rgba(255,255,255,.55);  /* hairline on frosted cards */

  --brand-blush:#CC9C8A;          /* warm accent (rose feather)            */
  --brand-periwinkle:#C6C9E4;     /* cool accent, pill / badge tints       */
  --brand-orchid:#CB8FB4;         /* highlight / background orb            */
  --brand-success:#1D9E75;        /* confirm / paid / active               */
  --brand-danger:#B23A3A;         /* destructive / unread badge            */
  --brand-warn:#BA7517;           /* caution / "invited"                   */

  /* background gradient stops + orb hues */
  --brand-bg-top:#DCDFF0;
  --brand-bg-mid:#F4EFEA;
  --brand-bg-bot:#ECD9D1;
  --orb-orchid:#CB8FB4;
  --orb-blue:#9FB4E0;
  --orb-blush:#CC9C8A;
  --feather-opacity:.06;

  /* frosted-card fill (under the blur) */
  --frost-fill:rgba(255,255,255,.62);
  --frost-fill-18:rgba(255,255,255,.58);
  --frost-fill-16:rgba(255,255,255,.54);
  --frost-shadow:0 18px 40px rgba(58,70,97,.12);
  --frost-shadow-sm:0 10px 24px rgba(58,70,97,.10);

  /* ---- radii (Brand.cardRadius / controlRadius + observed) ---- */
  --radius-card:20px;     /* Brand.cardRadius   */
  --radius-control:14px;  /* Brand.controlRadius */
  --radius-12:12px;
  --radius-16:16px;
  --radius-18:18px;
  --radius-22:22px;
  --radius-24:24px;
  --radius-26:26px;
  --radius-pill:999px;

  /* ---- type scale (SwiftUI role → web px, Hanken Grotesk kept) ---- */
  --fs-title:1.75rem;     /* .title   ~34/28  hero headlines */
  --fs-title2:1.375rem;   /* .title2  ~22     screen heroes  */
  --fs-title3:1.25rem;    /* .title3  ~20     section heroes */
  --fs-headline:1.0625rem;/* .headline ~17    card/row titles */
  --fs-subhead:.9375rem;  /* .subheadline ~15 body / labels  */
  --fs-body:1.0625rem;    /* .body    ~17     paragraphs      */
  --fs-callout:1rem;      /* .callout ~16     alert body      */
  --fs-caption:.75rem;    /* .caption ~12     subtitles       */
  --fs-caption2:.6875rem; /* .caption2 ~11    micro-pills     */
  --fs-footnote:.8125rem; /* .footnote ~13    links           */

  /* ---- spacing scale (observed iOS paddings) ---- */
  --space-1:6px;  --space-2:8px;  --space-3:10px; --space-4:12px;
  --space-5:14px; --space-6:16px; --space-7:18px; --space-8:20px;
  --space-9:22px; --space-10:24px; --space-11:26px;
  --screen-pad:18px;  /* standard ScrollView .padding(18) */
}

[data-theme="dark"]{
  --brand-slate:#AEB7DA;
  --brand-slate-deep:#EDEFF7;
  --brand-slate-muted:#AAB1C4;
  --brand-hint:#7C8398;
  --brand-warm-text:#D7A88E;
  --brand-slate-fill:#44516E;     /* fixed — white text both modes */

  --brand-field-fill:rgba(255,255,255,.10);
  --brand-card-stroke:rgba(255,255,255,.14);

  /* blush / periwinkle / orchid / success / danger / warn are fixed hues */

  --brand-bg-top:#151926;
  --brand-bg-mid:#1A1D28;
  --brand-bg-bot:#211B22;

  --frost-fill:rgba(255,255,255,.07);
  --frost-fill-18:rgba(255,255,255,.06);
  --frost-fill-16:rgba(255,255,255,.05);
  --frost-shadow:0 20px 44px rgba(0,0,0,.42);
  --frost-shadow-sm:0 12px 28px rgba(0,0,0,.38);
}

/* ===========================================================================
   1. BrandBackground — the full-bleed backdrop every designer screen sits on
   A vertical 3-stop gradient + three soft blurred orbs + a faint feather mark.
   Use: place <div class="brand-bg" aria-hidden="true"></div> as a fixed layer
   behind the designer shell content.
=========================================================================== */
.brand-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(to bottom,
    var(--brand-bg-top) 0%,
    var(--brand-bg-mid) 50%,
    var(--brand-bg-bot) 100%);
}

/* three blurred orbs + feather are stacked, absolutely positioned children of
   a pseudo-wrapper. We use ::before (orb A), ::after (orb B) and a real
   .brand-bg__orb / .brand-bg__feather for the rest so the watermark can carry
   an <img>-like background. */
.brand-bg::before,
.brand-bg::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  will-change:transform;
}
/* orb A: orchid — top-right */
.brand-bg::before{
  width:280px;height:280px;
  background:var(--orb-orchid);
  opacity:.45;
  top:-280px;right:-150px;
  transform:translate(130px,0);
  filter:blur(80px);
}
/* orb B: blue — mid-left */
.brand-bg::after{
  width:260px;height:260px;
  background:var(--orb-blue);
  opacity:.45;
  top:40%;left:-140px;
  filter:blur(75px);
}
/* orb C: blush — lower-right (real element so we get a 3rd layer) */
.brand-bg__orb{
  position:absolute;
  width:240px;height:240px;
  border-radius:50%;
  background:var(--orb-blush);
  opacity:.40;
  bottom:6%;right:0;
  transform:translate(130px,0);
  filter:blur(75px);
}
/* feather watermark — barely-there, rotated, lower area */
.brand-bg__feather{
  position:absolute;
  width:230px;height:230px;
  right:6%;bottom:8%;
  background:url("../assets/feather.png") center/contain no-repeat;
  opacity:var(--feather-opacity);
  transform:rotate(-8deg);
}
[data-theme="dark"] .brand-bg::before,
[data-theme="dark"] .brand-bg::after,
[data-theme="dark"] .brand-bg__orb{ opacity:.32; }
[data-theme="dark"] .brand-bg__feather{ opacity:.08; }

/* ===========================================================================
   2. .frost — the signature frosted-glass card surface (.ultraThinMaterial)
=========================================================================== */
.frost{
  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);
}
/* sectionCard() = .frost + 16px inner padding */
.frost--section{ padding:var(--space-6); }
/* compact variants */
.frost--18{ border-radius:var(--radius-18); background:var(--frost-fill-18); }
.frost--16{ border-radius:var(--radius-16); background:var(--frost-fill-16); }
/* regularMaterial alert dialog */
.frost--dialog{
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-radius:var(--radius-26);
  border-color:rgba(255,255,255,.60);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
/* progressive-enhancement fallback for no-backdrop-filter browsers */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .frost{ background:rgba(255,255,255,.90); }
  [data-theme="dark"] .frost{ background:rgba(40,44,58,.92); }
}

/* ===========================================================================
   3. Type helpers — SwiftUI roles mapped to Hanken Grotesk
=========================================================================== */
.t-title   { font-size:var(--fs-title);    font-weight:700; color:var(--brand-slate-deep); line-height:1.15; letter-spacing:-.01em; }
.t-title2  { font-size:var(--fs-title2);   font-weight:700; color:var(--brand-slate-deep); line-height:1.2; }
.t-title3  { font-size:var(--fs-title3);   font-weight:600; color:var(--brand-slate-deep); line-height:1.25; }
.t-headline{ font-size:var(--fs-headline); font-weight:600; color:var(--brand-slate-deep); }
.t-subhead { font-size:var(--fs-subhead);  font-weight:400; color:var(--brand-slate); }
.t-body    { font-size:var(--fs-body);     font-weight:400; color:var(--brand-slate); line-height:1.5; }
.t-caption { font-size:var(--fs-caption);  font-weight:400; color:var(--brand-slate-muted); }
.t-caption2{ font-size:var(--fs-caption2); font-weight:500; color:var(--brand-slate-muted); }
.t-footnote{ font-size:var(--fs-footnote); font-weight:500; color:var(--brand-slate); }
.t-muted   { color:var(--brand-slate-muted); }
.t-hint    { color:var(--brand-hint); }

/* ===========================================================================
   4. Section headers — quiet uppercase-ish label + optional trailing action
=========================================================================== */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4);
  margin:0 var(--space-1) var(--space-3);
}
.section-head__title{
  font-size:var(--fs-footnote); font-weight:600;
  color:var(--brand-slate-muted);
  letter-spacing:.04em;
}
.section-head__action{
  font-size:var(--fs-footnote); font-weight:600;
  color:var(--brand-slate);
}

/* ===========================================================================
   5. Pills / status chips — tinted text on a low-tint of the same color
=========================================================================== */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-caption2); font-weight:600; line-height:1;
  white-space:nowrap;
}
/* role pill — "Designer account" / "You're the owner" */
.pill--role{
  color:var(--brand-slate);
  background:color-mix(in srgb, var(--brand-periwinkle) 40%, transparent);
}
.pill--active,
.pill--success{ color:var(--brand-success); background:color-mix(in srgb, var(--brand-success) 14%, transparent); }
.pill--approver{ color:var(--brand-success); background:color-mix(in srgb, var(--brand-success) 16%, transparent); }
.pill--invited,
.pill--warn{ color:var(--brand-warn); background:color-mix(in srgb, var(--brand-warn) 14%, transparent); }
.pill--danger{ color:var(--brand-danger); background:color-mix(in srgb, var(--brand-danger) 14%, transparent); }
.pill--slate{ color:var(--brand-slate); background:color-mix(in srgb, var(--brand-slate) 12%, transparent); }
.pill--blush{ color:var(--brand-warm-text); background:color-mix(in srgb, var(--brand-blush) 22%, transparent); }
.pill--orchid{ color:var(--brand-slate-deep); background:color-mix(in srgb, var(--brand-orchid) 26%, transparent); }
.pill--peri{ color:var(--brand-slate); background:color-mix(in srgb, var(--brand-periwinkle) 46%, transparent); }
.pill .icon{ display:inline-flex; }

/* unread / count badge — white bold on danger capsule */
.badge-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--radius-pill);
  background:var(--brand-danger); color:#fff;
  font-size:10px; font-weight:700; line-height:1;
}

/* ===========================================================================
   6. Avatar — circle, initials fallback, optional image
=========================================================================== */
.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand-slate-deep), var(--brand-slate));
  color:#fff; font-weight:600; font-size:var(--fs-subhead);
  letter-spacing:.02em;
  overflow:hidden;
  border:1px solid var(--brand-card-stroke);
  box-shadow:var(--frost-shadow-sm);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar--sm{ width:34px; height:34px; font-size:var(--fs-caption); }
.avatar--lg{ width:64px; height:64px; font-size:var(--fs-title3); border-radius:50%; }

/* ===========================================================================
   7. Buttons — filled primary / outline / capsule / icon button
=========================================================================== */
.btn-filled{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px;
  border-radius:var(--radius-control);
  background:var(--brand-slate-fill); color:#fff;
  font-size:var(--fs-subhead); font-weight:600;
  transition:transform .12s ease, box-shadow .3s ease-out, opacity .2s ease;
}
.btn-filled--success{ background:var(--brand-success); }
.btn-filled--danger{ background:var(--brand-danger); }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px;
  border-radius:var(--radius-control);
  background:transparent; color:var(--brand-slate);
  border:1.5px solid var(--brand-slate);
  font-size:var(--fs-subhead); font-weight:600;
  transition:transform .12s ease, box-shadow .3s ease-out, opacity .2s ease;
}

/* capsule CTA — book / empty-state */
.btn-capsule{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:7px 14px;
  border-radius:var(--radius-pill);
  background:var(--brand-slate-fill); color:#fff;
  font-size:var(--fs-subhead); font-weight:600;
  transition:transform .12s ease, box-shadow .3s ease-out, opacity .2s ease;
}
.btn-capsule--md{ padding:11px 22px; }

/* circular icon button (bell, send, camera) */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none;
  border-radius:50%;
  background:var(--brand-field-fill);
  border:1px solid var(--brand-card-stroke);
  color:var(--brand-slate);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:transform .12s ease, box-shadow .3s ease-out, opacity .2s ease;
}
.icon-btn--filled{ background:var(--brand-slate-fill); color:#fff; border-color:rgba(255,255,255,.50); }
.icon-btn--lg{ width:38px; height:38px; }

/* soft "press" affordance — scale + slate shadow bloom (PressableButtonStyle) */
.press:active{
  transform:scale(.95);
  box-shadow:0 0 16px color-mix(in srgb, var(--brand-slate) 60%, transparent);
}
.press-card:active{ transform:scale(.975); }
.btn-filled:active,
.btn-outline:active,
.btn-capsule:active,
.icon-btn:active{
  transform:scale(.95);
  box-shadow:0 0 16px color-mix(in srgb, var(--brand-slate) 60%, transparent);
}
/* disabled = opacity .5 everywhere */
.btn-filled:disabled,
.btn-outline:disabled,
.btn-capsule:disabled,
.icon-btn:disabled,
.is-disabled{ opacity:.5; pointer-events:none; }

/* press-feedback consistency — give the remaining interactive designer controls
   the same tactile scale cue (segmented buttons, label choices, the quote
   custom-amount toggle, milestone toggle, proof thumbnails). Mirrors iOS
   PressableButtonStyle (scale .95) so nothing feels "dead" on tap. */
.ds-seg__btn,
.dta-lchoice,
.dt-q-link,
.dta-mtoggle{ transition:background .2s ease, color .2s ease, transform .12s ease; }
.ds-seg__btn:active,
.dta-lchoice:active,
.dt-q-link:active,
.dta-mtoggle:active{ transform:scale(.95); }
.dta-thumb:active{ transform:scale(.975); }

/* close X — 30px circle on every modal, top-right */
.close-x{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:none;
  border-radius:50%;
  background:color-mix(in srgb, var(--brand-slate) 10%, transparent);
  color:var(--brand-slate-muted);
  font-size:12px; font-weight:700; line-height:1;
}

/* ===========================================================================
   8. Fields / inputs — translucent field-fill, hairline stroke
=========================================================================== */
/* Designer/admin single-row control field. SCOPED to designer + admin surfaces so it
   does NOT leak onto the client auth/wizard/dashboard `.field` (which app.css styles as
   a stacked label + bordered input). */
:is(#designerShell, #dsTicket, #adminPanel) .field{
  display:flex; align-items:center; gap:10px;
  width:100%;
  min-height:46px; padding:0 14px;
  border-radius:var(--radius-control);
  background:var(--brand-field-fill);
  border:1px solid var(--brand-card-stroke);
  color:var(--brand-slate-deep);
}
:is(#designerShell, #dsTicket, #adminPanel) .field input,
:is(#designerShell, #dsTicket, #adminPanel) .field textarea{
  flex:1; min-width:0;
  background:transparent; border:none; outline:none;
  color:var(--brand-slate-deep); font-size:var(--fs-subhead);
}
:is(#designerShell, #dsTicket, #adminPanel) .field input::placeholder,
:is(#designerShell, #dsTicket, #adminPanel) .field textarea::placeholder{ color:var(--brand-hint); }
.field__icon{ color:var(--brand-slate-muted); display:inline-flex; flex:none; }
:is(#designerShell, #dsTicket, #adminPanel) .field--lg{ min-height:56px; border-radius:var(--radius-16); }

/* ===========================================================================
   9. EmptyState + Skeletons (reused by tickets / detail)
=========================================================================== */
.empty-state{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--space-3);
  padding:38px var(--space-7);
}
.empty-state__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px;
  border-radius:50%;
  background:color-mix(in srgb, var(--brand-periwinkle) 28%, transparent);
  color:var(--brand-slate);
  margin-bottom:var(--space-1);
}
.empty-state__title{ font-size:var(--fs-headline); font-weight:600; color:var(--brand-slate-deep); }
.empty-state__msg{ font-size:var(--fs-subhead); color:var(--brand-slate-muted); max-width:34ch; }

.skeleton{
  border-radius:var(--radius-12);
  background:var(--brand-slate-muted);
  opacity:.30;
  animation:lwd-skeleton .9s ease-in-out infinite alternate;
}
@keyframes lwd-skeleton{ from{opacity:.30} to{opacity:.16} }

/* ===========================================================================
   11. DESIGNER SHELL — 4-tab home (Tickets · Messages · Gallery · Account)
   Frosted top nav (desktop) → bottom tab bar (mobile), fading tab panes.
=========================================================================== */
.ds-shell{
  min-height:100vh;
  min-height:100dvh;
  color:var(--brand-slate);
  font-family:'Hanken Grotesk', system-ui, sans-serif;
}
.ds-shell.hidden{ display:none; }

/* ---- frosted top nav ---- */
.ds-nav{
  position:sticky; top:0; z-index:20;
  border-radius:0;
  border-left:none; border-right:none; border-top:none;
  box-shadow:var(--frost-shadow-sm);
}
.ds-nav__in{
  display:flex; align-items:center; gap:var(--space-6);
  max-width:1080px; margin:0 auto;
  padding:var(--space-3) var(--screen-pad);
}
.ds-brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; flex:none;
}
.ds-brand .brand-mark{ width:26px; height:26px; }
.ds-brand__word{
  font-size:var(--fs-headline); font-weight:700;
  color:var(--brand-slate-deep); letter-spacing:-.01em;
  white-space:nowrap;
}

/* ---- tab buttons (desktop top nav) ---- */
.ds-tabs{ display:flex; align-items:center; gap:var(--space-2); margin:0 auto; }
.ds-tab{
  position:relative;
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 14px;
  border-radius:var(--radius-control);
  color:var(--brand-slate-muted);
  font-size:var(--fs-caption); font-weight:600;
  transition:color .2s ease, background .2s ease, transform .12s ease;
}
.ds-tab .icon{ display:inline-flex; }
.ds-tab:hover{ color:var(--brand-slate); }
.ds-tab[aria-selected="true"]{
  color:var(--brand-slate-deep);
  background:color-mix(in srgb, var(--brand-periwinkle) 30%, transparent);
}
.ds-tab:active{ transform:scale(.95); }
.ds-tab__badge{
  position:absolute; top:0; right:6px;
  min-width:16px; height:16px; padding:0 4px;
  font-size:10px;
}
.ds-tab__badge.hidden{ display:none; }
/* honest unread DOT (no number) — small filled circle on the tab */
.ds-tab__badge--dot{
  min-width:9px; width:9px; height:9px; padding:0; top:2px; right:8px;
  border-radius:50%; background:var(--brand-danger);
}

.ds-nav__cta{ display:flex; align-items:center; gap:var(--space-2); flex:none; }

/* ---- tab content ---- */
.ds-main{
  max-width:760px; margin:0 auto;
  padding:var(--space-7) var(--screen-pad) calc(var(--space-10) + 64px);
}
.ds-view{ outline:none; }
.ds-view.hidden{ display:none; }
/* tab cross-fade + soft lift (≈280ms, ios spring-eased) */
.ds-view.ds-enter{ animation:ds-fade-in .28s ease both; }
@keyframes ds-fade-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---- mobile bottom tab bar (hidden on desktop) ---- */
.ds-tabbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  border-radius:0; border-left:none; border-right:none; border-bottom:none;
  padding:6px max(var(--screen-pad), env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
}
.ds-tabbar .ds-tab{ flex:1; padding:8px 0; }
.ds-tabbar .ds-tab__badge{ right:18%; }

@media (max-width:760px){
  /* On mobile the bottom tab bar collides with iOS Safari's own bottom toolbar
     (back/forward/share), which clips the tabs — env(safe-area-inset-bottom)
     only covers the home indicator. So instead of a fixed bottom bar we move the
     4 tabs to a TOP strip that sits under the brand/CTA row, fully clearing
     Safari's toolbar. The bottom bar is hidden. */
  .ds-tabbar{ display:none; }

  /* let the nav wrap so the tab strip drops to its own full-width second row */
  .ds-nav__in{ flex-wrap:wrap; gap:var(--space-2); padding-bottom:0; }
  .ds-brand{ order:1; }
  .ds-nav__cta{ order:2; margin-left:auto; }

  .ds-nav .ds-tabs{
    order:3; display:flex; width:100%;
    justify-content:center; gap:var(--space-1);
    margin:0; padding:6px 0 4px;
    /* scroll horizontally if labels ever overflow at very narrow widths */
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-top:1px solid var(--brand-card-stroke);
  }
  .ds-nav .ds-tabs::-webkit-scrollbar{ display:none; }
  .ds-nav .ds-tabs .ds-tab{ flex:1 1 0; min-width:64px; padding:6px 4px; }

  /* no fixed bottom bar to clear any more — drop the reserved bottom padding */
  .ds-main{ max-width:none; padding-bottom:var(--space-10); }
}

/* ===========================================================================
   12. ACCOUNT TAB — profile card, segmented appearance, settings rows
=========================================================================== */
.ds-stack{ display:flex; flex-direction:column; gap:var(--space-4); }
.ds-stack > .section-head{ margin-bottom:0; }

/* profile card */
.ds-profile{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--space-3);
  padding:var(--space-8) var(--space-7);
}
.ds-profile__name{ font-size:var(--fs-title3); font-weight:700; color:var(--brand-slate-deep); }
.ds-profile__email{ font-size:var(--fs-subhead); color:var(--brand-slate-muted); word-break:break-word; }

/* settings row (My information / Admin panel / Privacy …) */
.ds-row{
  display:flex; align-items:center; gap:var(--space-4);
  width:100%; text-align:left;
  padding:var(--space-5) var(--space-6);
  border-radius:var(--radius-18); background:var(--frost-fill-18);
  border:1px solid var(--brand-card-stroke);
  box-shadow:var(--frost-shadow-sm);
  color:var(--brand-slate); cursor:pointer;
  transition:transform .12s ease, background .2s ease;
}
.ds-row:hover{ background:var(--frost-fill); }
.ds-row:active{ transform:scale(.985); }
.ds-row__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none; border-radius:var(--radius-12);
  background:color-mix(in srgb, var(--brand-periwinkle) 30%, transparent);
  color:var(--brand-slate);
}
.ds-row__text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ds-row__title{ font-size:var(--fs-headline); font-weight:600; color:var(--brand-slate-deep); }
.ds-row__sub{ font-size:var(--fs-caption); color:var(--brand-slate-muted); }
.ds-row__chev{ color:var(--brand-hint); flex:none; display:inline-flex; }

/* appearance segmented control */
.ds-seg{
  display:flex; gap:4px; padding:4px;
  border-radius:var(--radius-control);
  background:var(--brand-field-fill);
  border:1px solid var(--brand-card-stroke);
}
.ds-seg__btn{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 6px; border-radius:var(--radius-12);
  font-size:var(--fs-caption); font-weight:600;
  color:var(--brand-slate-muted);
  transition:background .2s ease, color .2s ease;
}
.ds-seg__btn[aria-pressed="true"]{
  background:var(--frost-fill);
  color:var(--brand-slate-deep);
  box-shadow:var(--frost-shadow-sm);
}
.ds-card-label{
  font-size:var(--fs-footnote); font-weight:600;
  color:var(--brand-slate-muted); letter-spacing:.04em;
  margin:0 0 var(--space-3);
}

/* ===========================================================================
   12. TICKETS BOARD — frosted Kanban of work orders (#dsTickets)
   Columns (board order): Needs a quote · Files needed · In progress ·
   Awaiting client · Completed. Collapses to stacked sections < 900px.
=========================================================================== */
.tk-wrap{ display:flex; flex-direction:column; gap:var(--space-6); }

/* ---- header: title + total + search ---- */
.tk-head{
  display:flex; align-items:center; gap:var(--space-4);
  flex-wrap:wrap;
}
.tk-head__title{ display:flex; align-items:center; gap:var(--space-3); }
.tk-head__total{ font-variant-numeric:tabular-nums; }
.tk-search{
  position:relative; margin-left:auto; flex:1 1 220px; max-width:320px;
}
.tk-search__ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--brand-slate-muted); pointer-events:none; display:inline-flex;
}
.tk-search__input{
  width:100%; padding:9px 14px 9px 36px;
  border-radius:var(--radius-pill);
  border:1px solid var(--brand-card-stroke);
  background:var(--frost-fill);
  color:var(--brand-slate-deep); font-size:var(--fs-subhead);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tk-search__input::placeholder{ color:var(--brand-slate-muted); }
.tk-search__input:focus-visible{ outline:none; border-color:var(--brand-slate); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-periwinkle) 50%, transparent); }

/* ---- header sub-copy: "5 things need you today." ---- */
.tk-subline{
  margin:calc(var(--space-4) * -0.5) 0 0;
  font-size:var(--fs-subhead); color:var(--brand-slate-muted);
}
.tk-subline:empty{ display:none; }
.tk-subline__hl{ color:var(--brand-orchid); font-weight:600; }

/* ---- triage layout: band → pipeline → stats ---- */
.tk-triage{ display:flex; flex-direction:column; gap:var(--space-8); }

/* skeleton shared lines */
.tk-sk-line{ height:13px; width:70%; }
.tk-sk-line--lg{ height:17px; width:85%; }
.tk-sk-bar{ height:5px; width:100%; }

/* ===========================================================================
   "Needs you now" band — urgent action cards on a faint danger-tinted frost
=========================================================================== */
.tk-band{
  padding:var(--space-8);
  border-color:color-mix(in srgb, var(--brand-danger) 30%, var(--brand-card-stroke));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand-danger) 7%, transparent),
      transparent 60%),
    var(--frost-fill);
}
.tk-band__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-7);
}
.tk-band__title{ display:flex; align-items:center; gap:var(--space-3); }
.tk-band__pulse{
  width:11px; height:11px; border-radius:50%; flex:none;
  background:var(--brand-danger);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--brand-danger) 50%, transparent);
  animation:tk-pulse 2.2s infinite;
}
.tk-band__pulse.is-still{ animation:none; }
@keyframes tk-pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--brand-danger) 45%, transparent); }
  70%{ box-shadow:0 0 0 10px color-mix(in srgb, var(--brand-danger) 0%, transparent); }
  100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--brand-danger) 0%, transparent); }
}
.tk-band__h{ font-size:var(--fs-title3); font-weight:700; color:var(--brand-slate-deep); }
.tk-band__cnt{ font-variant-numeric:tabular-nums; }
.tk-band__meta{ font-size:var(--fs-footnote); color:var(--brand-slate-muted); }

.tk-acards{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--space-4); align-items:stretch;
}

/* one action card */
.tk-acard{
  position:relative; display:flex; flex-direction:column; gap:var(--space-5);
  padding:var(--space-7);
  border-radius:var(--radius-card);
  border-left:3px solid var(--tk-accent, var(--brand-slate));
  text-align:left;
  transition:transform .12s ease, box-shadow .3s ease-out;
}
.tk-acard:hover{ box-shadow:var(--frost-shadow); transform:translateY(-2px); }
.tk-acard__top{ display:flex; align-items:flex-start; gap:var(--space-3); }
.tk-acard__avatar{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--av-hue, var(--brand-slate)) 88%, #000 12%),
    var(--av-hue, var(--brand-slate)));
}
.tk-acard__id{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
.tk-acard__name{
  font-size:var(--fs-headline); font-weight:700; color:var(--brand-slate-deep);
  line-height:1.2;
}
.tk-acard__proj{ font-size:var(--fs-footnote); color:var(--brand-slate-muted); }

.tk-acard__meta{
  display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap;
}
.tk-acard__col{ display:flex; flex-direction:column; gap:3px; }
.tk-acard__lbl{
  font-size:var(--fs-caption2); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--brand-hint);
}
.tk-acard__val{
  font-size:var(--fs-callout); font-weight:700; color:var(--brand-slate-deep);
}
.tk-acard__val.is-late{ color:var(--brand-danger); }
.tk-acard__stage{ font-size:var(--fs-subhead); font-weight:700; }
.tk-acard__div{ width:1px; align-self:stretch; min-height:28px; background:color-mix(in srgb, var(--brand-slate) 16%, transparent); }

.tk-acard__foot{ display:flex; align-items:center; gap:var(--space-3); margin-top:auto; }
.tk-acard__cta{ flex:1 1 auto; width:auto; padding:11px 16px; }
.tk-acard__open{ flex:0 0 auto; width:auto; padding:11px 18px; border-width:1px; }

/* "+M more" overflow tile */
.tk-acard--more{
  align-items:center; justify-content:center; text-align:center;
  gap:var(--space-2); border-left:0;
  border-style:dashed;
  color:var(--brand-slate);
}
.tk-acard--more__ico{ color:var(--brand-slate-muted); }
.tk-acard--more__n{ font-size:var(--fs-headline); font-weight:700; color:var(--brand-slate-deep); }
.tk-acard--more__sub{ font-size:var(--fs-caption); color:var(--brand-slate-muted); }

/* action-card skeleton */
.tk-acard--sk{ pointer-events:none; gap:var(--space-3); }

/* ---- all-caught-up band ---- */
.tk-band--clear{ border-color:var(--brand-card-stroke); background:var(--frost-fill); }
.tk-clear{ display:flex; align-items:center; gap:var(--space-5); }
.tk-clear__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; flex:none; border-radius:50%;
  background:color-mix(in srgb, var(--brand-success) 16%, transparent);
  color:var(--brand-success);
}
.tk-clear__title{ font-size:var(--fs-title3); font-weight:700; color:var(--brand-slate-deep); }
.tk-clear__sub{ font-size:var(--fs-subhead); color:var(--brand-slate-muted); margin-top:2px; }

/* ===========================================================================
   The rest of the pipeline — calm compact rows
=========================================================================== */
.tk-seclabel{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap; margin:0 var(--space-1) calc(var(--space-7) * -1);
}
.tk-seclabel__h{ font-size:var(--fs-headline); font-weight:700; color:var(--brand-slate-deep); }
.tk-seclabel__hint{ font-size:var(--fs-footnote); color:var(--brand-hint); }

.tk-pipe{ overflow:hidden; }
.tk-prow{
  display:grid; grid-template-columns:240px 1fr; align-items:center;
  gap:var(--space-6); padding:var(--space-5) var(--space-7);
  border-bottom:1px solid color-mix(in srgb, var(--brand-slate) 9%, transparent);
}
.tk-prow:last-child{ border-bottom:0; }
.tk-prow:hover{ background:color-mix(in srgb, var(--brand-slate) 4%, transparent); }
.tk-prow__stage{ display:flex; align-items:center; gap:var(--space-3); }
.tk-prow__dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.tk-prow__nm{ font-size:var(--fs-subhead); font-weight:600; color:var(--brand-slate-deep); }
.tk-prow__ct{
  min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--brand-slate) 12%, transparent);
  color:var(--brand-slate-muted); font-size:var(--fs-caption2); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.tk-pipe__empty{ padding:var(--space-7); text-align:center; font-size:var(--fs-subhead); color:var(--brand-slate-muted); }
.tk-prow--sk{ display:flex; flex-direction:column; gap:var(--space-3); pointer-events:none; }

.tk-chips{ display:flex; flex-wrap:wrap; gap:var(--space-3); min-width:0; }
.tk-chip{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:6px 14px 6px 6px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--brand-slate) 6%, transparent);
  border:1px solid var(--brand-card-stroke);
  transition:transform .12s ease, border-color .2s ease, background .2s ease;
}
.tk-chip:hover{ border-color:color-mix(in srgb, var(--brand-slate) 36%, transparent); background:color-mix(in srgb, var(--brand-slate) 9%, transparent); }
.tk-chip__ci{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:none; border-radius:50%;
  font-size:11px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--av-hue, var(--brand-slate)) 88%, #000 12%),
    var(--av-hue, var(--brand-slate)));
}
.tk-chip__nm{ font-size:var(--fs-footnote); font-weight:600; color:var(--brand-slate-deep); }
.tk-chip__money{ font-size:var(--fs-caption); font-weight:700; color:var(--brand-slate-muted); }
.tk-chip__date{ font-size:var(--fs-caption2); color:var(--brand-hint); }

/* ===========================================================================
   Summary stat strip
=========================================================================== */
.tk-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--space-4); }
.tk-stat{ padding:var(--space-7) var(--space-8); }
.tk-stat__k{
  display:block; font-size:var(--fs-caption2); font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--brand-hint);
}
.tk-stat__v{
  display:block; margin-top:var(--space-2);
  font-size:var(--fs-title2); font-weight:700; color:var(--brand-slate-deep);
}
.tk-stat__v small{ font-size:var(--fs-footnote); font-weight:400; color:var(--brand-slate-muted); }
.tk-stat__v--danger{ color:var(--brand-danger); }
.tk-stat__v--success{ color:var(--brand-success); }

/* ===========================================================================
   Responsive — tablet (~900px) then mobile (390px) reflow
=========================================================================== */
@media (max-width:900px){
  .tk-acards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tk-prow{ grid-template-columns:1fr; gap:var(--space-3); }
  .tk-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .tk-band{ padding:var(--space-6); }
  .tk-acards{ grid-template-columns:1fr; }
  .tk-search{ max-width:none; margin-left:0; }
  .tk-stats{ grid-template-columns:1fr; }
  .tk-acard__open{ padding:11px 14px; }
}

/* ===========================================================================
   10. Reduced motion — honor the user preference
=========================================================================== */
@media (prefers-reduced-motion:reduce){
  .skeleton{ animation:none; }
  .btn-filled,.btn-outline,.btn-capsule,.icon-btn,.press,.press-card{ transition:opacity .2s ease; }
  .press:active,.press-card:active,
  .btn-filled:active,.btn-outline:active,.btn-capsule:active,.icon-btn:active{ transform:none; box-shadow:none; }
  .ds-view.ds-enter{ animation:none; }
  .ds-tab:active,.ds-row:active{ transform:none; }
  .ds-seg__btn:active,.dta-lchoice:active,.dt-q-link:active,
  .dta-mtoggle:active,.dta-thumb:active{ transform:none; }
  .tk-acard:hover{ transform:none; }
  .tk-band__pulse{ animation:none; }
  .dt-toast{ transition:opacity .2s ease; }
  /* unified toast + celebration: fade only, no slide/bounce/ring */
  .ds-toast{ transition:opacity .2s ease; transform:translate(-50%, 0); }
  .ds-toast.is-in{ transform:translate(-50%, 0); }
  .cel__ring{ display:none; }
  .cel__icon,.cel.is-in .cel__icon{ animation:none; transform:scale(1); }
  .cel__msg,.cel.is-in .cel__msg{ animation:none; opacity:1; }
  .dt-track__bar.is-fill::after{ transition:none; }
}

/* ===========================================================================
   13. WORK-ORDER DETAIL — the ticket (#dsTicket)
   Header · 7-stage timeline · quote builder / status banner · brief.
   Frosted-card stack, icon-driven, sliders + segmented controls matched to the
   .field / .ds-seg system.
=========================================================================== */
.dt-wrap{
  display:flex; flex-direction:column; gap:var(--space-5);
  max-width:760px; margin:0 auto;
  padding-bottom:var(--space-10);
}

/* ---- header ---- */
.dt-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--space-4);
}
.dt-back{ flex:none; }
.dt-header__id{ display:flex; align-items:center; gap:var(--space-4); min-width:0; }
.dt-header__avatar{ width:46px; height:46px; flex:none; background:var(--av-hue, var(--brand-slate)); }
.dt-header__text{ min-width:0; }
.dt-header__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt-header__type{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-footnote); color:var(--brand-slate-muted);
}
.dt-header__type .icon{ color:var(--brand-slate-muted); }
.dt-header__right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.dt-header__price{ font-size:var(--fs-title3); font-weight:700; color:var(--brand-slate-deep); }
.dt-header__was{ color:var(--brand-slate-muted); font-weight:500; font-size:var(--fs-subhead); margin-right:4px; }
.dt-sk-avatar{ width:46px; height:46px; border-radius:50%; flex:none; }

/* ---- section heads (in-card) ---- */
.dt-sechead{
  display:flex; align-items:center; gap:8px;
  margin-bottom:var(--space-4);
}
.dt-sechead__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9px;
  background:color-mix(in srgb, var(--brand-periwinkle) 32%, transparent);
  color:var(--brand-slate);
}
.dt-sechead__t{ font-size:var(--fs-headline); font-weight:600; color:var(--brand-slate-deep); }

/* ---- 7-stage timeline ---- */
.dt-tracker{ overflow-x:auto; }
.dt-track{
  display:flex; align-items:flex-start;
  list-style:none; margin:0; padding:2px 0 0;
  min-width:480px;
}
.dt-track__step{
  position:relative; flex:1;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.dt-track__bar{
  position:absolute; top:11px; right:50%; width:100%; height:3px;
  background:color-mix(in srgb, var(--brand-periwinkle) 55%, transparent);
  border-radius:2px; overflow:hidden;
}
/* animated capsule fill — grows left→right on open / stage advance
   (spring ~response .5 / damping .85 → cubic-bezier(.22,1,.36,1)). */
.dt-track__bar::after{
  content:""; position:absolute; inset:0;
  transform-origin:left center; transform:scaleX(0);
  background:var(--brand-slate); border-radius:2px;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.dt-track__bar.is-fill::after{ transform:scaleX(1); }
.dt-track__dot{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--frost-fill);
  border:2px solid var(--brand-periwinkle);
  color:#fff;
}
.dt-track__dot .icon{ width:14px; height:14px; }
.dt-track__step.is-done .dt-track__dot{ background:var(--brand-slate); border-color:var(--brand-slate); }
.dt-track__step.is-now .dt-track__dot{
  background:var(--brand-slate); border-color:var(--brand-periwinkle);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-periwinkle) 55%, transparent);
}
.dt-track__label{
  font-size:var(--fs-caption2); color:var(--brand-slate-muted);
  text-align:center; letter-spacing:.01em;
}
.dt-track__step.is-now .dt-track__label{ color:var(--brand-slate-deep); font-weight:700; }
.dt-track__step.is-done .dt-track__label{ color:var(--brand-slate); }

/* ---- brief ---- */
.dt-brief__desc{ margin:0 0 var(--space-4); }
.dt-kv{ margin:0; display:flex; flex-direction:column; }
.dt-kv__row{
  display:flex; align-items:baseline; gap:var(--space-4);
  padding:var(--space-3) 0;
  border-top:1px solid var(--brand-card-stroke);
}
.dt-kv__row:first-child{ border-top:none; }
.dt-kv__k{ flex:none; width:108px; font-size:var(--fs-footnote); font-weight:600; color:var(--brand-slate-muted); }
.dt-kv__v{ margin:0; flex:1; min-width:0; font-size:var(--fs-subhead); color:var(--brand-slate-deep); }

/* ---- quote builder ---- */
.dt-quote{ display:flex; flex-direction:column; }
.dt-q-price{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-4); }
.dt-q-budget{ margin:0; }
.dt-q-value{ font-size:var(--fs-title); font-weight:700; color:var(--brand-slate-deep); line-height:1.05; }
.dt-q-help{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-caption); font-weight:500; margin:2px 0 0;
}
.dt-q-help.is-hint{ color:var(--brand-success); }
.dt-q-help.is-warn{ color:var(--brand-warn); }
.dt-q-help.is-danger{ color:var(--brand-danger); }

.dt-q-custom{ display:flex; flex-direction:column; gap:8px; margin-bottom:var(--space-5); }
.dt-q-link{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-footnote); font-weight:600; color:var(--brand-slate);
  padding:4px 2px;
}
.dt-q-link[aria-pressed="true"]{ color:var(--brand-slate-deep); }
.dt-q-customfield .field__icon{ font-weight:700; color:var(--brand-slate-muted); }
.dt-q-subhelp{ margin:0; }

.dt-q-field{ display:flex; flex-direction:column; gap:8px; margin-top:var(--space-5); }
.dt-q-flabel-row{ display:flex; align-items:center; gap:7px; }
.dt-q-flabel-ico{ color:var(--brand-slate-muted); display:inline-flex; }
.dt-q-flabel{ font-weight:600; color:var(--brand-slate); }

.dt-q-extra.is-hidden{ display:none; }
.dt-q-extrahead{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); }
.dt-q-extraval{ font-size:var(--fs-headline); font-weight:700; color:var(--brand-slate-deep); }

.dt-q-err{
  margin:var(--space-4) 0 0; font-size:var(--fs-footnote);
  color:var(--brand-danger); font-weight:600;
}
.dt-q-actions{
  display:grid; grid-template-columns:1fr 1.4fr; gap:var(--space-4);
  margin-top:var(--space-6);
}

/* segmented (extends .ds-seg) */
.dt-seg{ width:100%; }

/* range sliders — slate track + thumb on the field surface */
.dt-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px;
  background:color-mix(in srgb, var(--brand-slate) 22%, var(--brand-field-fill));
  outline:none; cursor:pointer; margin:4px 0;
}
.dt-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--brand-slate-fill);
  border:3px solid #fff;
  box-shadow:0 2px 8px rgba(58,70,97,.35);
  cursor:pointer;
}
.dt-slider::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--brand-slate-fill); border:3px solid #fff;
  box-shadow:0 2px 8px rgba(58,70,97,.35); cursor:pointer;
}
.dt-slider:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-periwinkle) 60%, transparent); }

/* date input inside .field */
.dt-q-field .field input[type="date"]{ color:var(--brand-slate-deep); }

/* ---- status banner (non-new) + PART B placeholder ---- */
.dt-banner{ display:flex; align-items:center; gap:var(--space-4); }
.dt-banner__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; flex:none;
  background:color-mix(in srgb, var(--brand-periwinkle) 30%, transparent);
  color:var(--brand-slate);
}
.dt-banner.is-good .dt-banner__ico{ background:color-mix(in srgb, var(--brand-success) 18%, transparent); color:var(--brand-success); }
.dt-banner.is-bad .dt-banner__ico{ background:color-mix(in srgb, var(--brand-danger) 16%, transparent); color:var(--brand-danger); }
.dt-banner.is-progress .dt-banner__ico{ background:color-mix(in srgb, var(--brand-blush) 26%, transparent); color:var(--brand-warm-text); }
.dt-banner__text{ min-width:0; }

.dt-actions-ph{
  border:1px dashed var(--brand-card-stroke);
  border-radius:var(--radius-16);
  padding:var(--space-5);
  text-align:center;
}
.dt-actions-ph__hint{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-footnote); color:var(--brand-slate-muted);
}
.dt-actions-ph__hint .icon{ color:var(--brand-slate-muted); }

/* ---- celebration toast ---- */
.dt-toast{
  position:fixed; left:50%; bottom:84px; transform:translate(-50%, 16px);
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:var(--radius-pill);
  font-size:var(--fs-subhead); font-weight:600; color:var(--brand-slate-deep);
  box-shadow:var(--frost-shadow-sm);
  opacity:0; pointer-events:none; z-index:60;
  transition:opacity .28s ease, transform .28s ease;
}
.dt-toast .icon{ color:var(--brand-success); }
.dt-toast.is-in{ opacity:1; transform:translate(-50%, 0); }

/* ---- unified bottom toast (celebrate.js → toast()) ----
   Bottom-anchored capsule, slide-up + fade, spring(.42/.85), auto-dismiss 1.7s. */
.ds-toast{
  position:fixed; left:50%; bottom:84px; transform:translate(-50%, 18px) scale(.98);
  display:inline-flex; align-items:center; gap:9px; max-width:min(420px, 90vw);
  padding:11px 18px; border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--brand-slate-deep) 95%, transparent);
  border:1px solid rgba(255,255,255,.15);
  font-size:var(--fs-subhead); font-weight:600; color:#fff;
  box-shadow:0 8px 24px rgba(40,42,60,.32);
  opacity:0; pointer-events:none; z-index:75;
  transition:opacity .3s ease, transform .42s cubic-bezier(.22,1,.36,1);
}
.ds-toast.is-in{ opacity:1; transform:translate(-50%, 0) scale(1); }
.ds-toast__icon{ display:inline-flex; color:var(--brand-success); flex:none; }
.ds-toast__msg{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-toast--err .ds-toast__icon{ color:var(--brand-danger); }

/* ---- celebration overlay (celebrate.js → celebrate()) ----
   Dimmed backdrop + frosted card; ring pulse + icon bounce-in
   (spring response .45 / damping .6), auto-dismiss 1.7s, non-blocking. */
.cel{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.18);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.cel.is-in{ opacity:1; }
.cel.is-out{ opacity:0; }
.cel__card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:38px 40px; border-radius:28px;
  text-align:center; min-width:200px;
  box-shadow:var(--frost-shadow);
}
.cel__ring{
  position:absolute; top:34px; width:84px; height:84px; border-radius:50%;
  border:3px solid color-mix(in srgb, var(--brand-success) 50%, transparent);
  opacity:0; pointer-events:none;
}
.cel.is-in .cel__ring{ animation:celRingPulse .9s ease-out; }
.cel__icon{
  display:inline-flex; color:var(--brand-success);
  transform:scale(.4);
}
.cel__icon svg{ width:60px; height:60px; }
.cel.is-in .cel__icon{ animation:celIconPop .45s cubic-bezier(.34,1.56,.64,1) both; }
.cel__msg{
  font-size:var(--fs-headline, 1.0625rem); font-weight:700;
  color:var(--brand-slate-deep);
  opacity:0;
}
.cel.is-in .cel__msg{ animation:celMsgIn .4s ease-out .12s both; }

@keyframes celRingPulse{ from{ transform:scale(.8); opacity:.8 } to{ transform:scale(1.6); opacity:0 } }
@keyframes celIconPop{ 0%{ transform:scale(.4) } 60%{ transform:scale(1.08) } 100%{ transform:scale(1) } }
@keyframes celMsgIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:translateY(0) } }

@media (max-width:640px){
  .dt-header{ grid-template-columns:auto 1fr; row-gap:var(--space-3); }
  .dt-header__right{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; }
  .dt-q-actions{ grid-template-columns:1fr; }
  .dt-kv__k{ width:88px; }
}

/* =========================================================================
 * PART B — work-order action area + lower sections (ticketactions.js)
 * ========================================================================= */
.dta-area{ display:flex; flex-direction:column; gap:var(--space-5); }
.dta-card{ display:flex; flex-direction:column; gap:var(--space-4); }
.dta-card .btn-filled,
.dta-card .btn-outline{ align-self:flex-start; }
.dta-sechead{ align-items:center; }
.dta-sechead > :last-child{ margin-left:auto; }

.dta-inline{ margin:0; font-size:var(--fs-footnote); font-weight:600; }
.dta-inline.is-good{ color:var(--brand-success); }
.dta-inline.is-bad{ color:var(--brand-danger); }
.dta-inline.is-neutral{ color:var(--brand-slate-muted); }

.dta-btnrow{ display:flex; flex-wrap:wrap; gap:var(--space-3); }

/* ---- revision ---- */
.dta-rev__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.dta-rev__info .t-caption{ color:var(--brand-slate-muted); }

/* ---- deposit / accepted ---- */
.dta-deposit{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-footnote); font-weight:600;
  padding:8px 12px; border-radius:var(--radius-pill);
  background:var(--brand-field-fill); color:var(--brand-slate);
  align-self:flex-start;
}
.dta-deposit.is-good{ color:var(--brand-success); background:color-mix(in srgb, var(--brand-success) 12%, transparent); }
.dta-deposit.is-wait{ color:var(--brand-warm-text); background:color-mix(in srgb, var(--brand-blush) 20%, transparent); }

/* ---- proofs ---- */
.dta-changenote{
  border-radius:var(--radius-16); padding:var(--space-4);
  background:color-mix(in srgb, var(--brand-blush) 22%, transparent);
}
.dta-changenote__h{
  display:flex; align-items:center; gap:6px;
  font-size:var(--fs-footnote); font-weight:700; color:var(--brand-warm-text);
  margin-bottom:4px;
}
.dta-changenote p{ margin:0; }

.dta-gallery{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.dta-gallery__loading{ display:flex; gap:var(--space-3); }
.dta-thumb-sk{ width:88px; height:88px; border-radius:var(--radius-16); }
.dta-thumb{
  width:88px; height:88px; border-radius:var(--radius-16); overflow:hidden;
  cursor:pointer; flex:none; background:var(--brand-field-fill);
  border:1px solid var(--brand-card-stroke);
  transition:transform .12s ease, box-shadow .12s ease;
}
.dta-thumb:hover{ transform:translateY(-2px); box-shadow:var(--frost-shadow-sm); }
.dta-thumb:focus-visible{ outline:2px solid var(--brand-periwinkle); outline-offset:2px; }
.dta-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.dta-thumb--empty,
.dta-gallery__empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:var(--brand-slate-muted);
}
.dta-gallery__empty{ width:100%; padding:var(--space-5) 0; }

.dta-upload{ display:flex; gap:var(--space-3); }
.dta-deliver{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-2); }

/* ---- lightbox ---- */
.dta-lightbox{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center; padding:var(--space-6);
  background:rgba(28,32,46,.72); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s ease;
}
.dta-lightbox.is-in{ opacity:1; }
.dta-lightbox.hidden{ display:none; }
.dta-lightbox{ gap:var(--space-5); flex-wrap:wrap; }
.dta-lightbox__img{ max-width:100%; max-height:88vh; display:block; border-radius:var(--radius-16); box-shadow:var(--frost-shadow-lg, 0 24px 60px rgba(0,0,0,.4)); }
.dta-lightbox__close{ position:absolute; top:18px; right:18px; z-index:2; }

/* ---- annotation pins over the proof ---- */
.dta-lbstage{ position:relative; display:inline-block; max-width:62vw; max-height:88vh; }
.dta-lightbox.is-addmode .dta-lbstage{ cursor:crosshair; }
.dta-pinlayer{ position:absolute; inset:0; pointer-events:none; }
.dta-pin{
  position:absolute; transform:translate(-50%, -50%);
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-caption); font-weight:700; color:#fff;
  background:var(--brand-slate); border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35); cursor:pointer;
  pointer-events:auto; transition:transform .12s ease, box-shadow .12s ease;
}
.dta-pin.is-client{ background:var(--brand-orchid, var(--brand-periwinkle)); }
.dta-pin.is-designer{ background:var(--brand-slate); }
.dta-pin:hover,.dta-pin.is-hot,.dta-pin:focus-visible{ transform:translate(-50%,-50%) scale(1.18); box-shadow:0 4px 12px rgba(0,0,0,.45); outline:none; }
.dta-pin--ghost{ background:var(--brand-success); pointer-events:none; opacity:.92; }

/* note popover */
.dta-notepop{
  position:absolute; transform:translate(-50%, 14px); z-index:3;
  width:min(260px, 70vw); padding:var(--space-3);
  display:flex; flex-direction:column; gap:var(--space-3);
}
.dta-notepop__ta{
  width:100%; resize:vertical; min-height:60px;
  border:1px solid var(--brand-card-stroke); border-radius:var(--radius-12);
  background:var(--brand-field-fill); color:var(--brand-slate-deep);
  padding:8px 10px; font:inherit; font-size:var(--fs-subhead);
}
.dta-notepop__ta:focus-visible{ outline:2px solid var(--brand-periwinkle); outline-offset:1px; }
.dta-notepop__row{ display:flex; gap:var(--space-2); justify-content:flex-end; }
.dta-notepop__btn{ padding:6px 14px; }

/* comment list beside the image */
.dta-anno{
  width:min(320px, 90vw); max-height:88vh; overflow:auto;
  display:flex; flex-direction:column; gap:var(--space-3);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-radius:var(--radius-16); padding:var(--space-4);
  box-shadow:var(--frost-shadow-lg, 0 24px 60px rgba(0,0,0,.4));
}
.dta-anno.hidden{ display:none; }
.dta-anno__head{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--brand-slate-deep); }
.dta-anno__tools{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.dta-anno__hint{ color:var(--brand-slate-muted); }
.dta-anno__hint.hidden{ display:none; }
.dta-anno__empty{ color:var(--brand-slate-muted); }
.dta-anno__empty.hidden{ display:none; }
.dta-anno__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dta-anno__item{
  display:flex; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-3) var(--space-2); border-radius:var(--radius-12);
  border-top:1px solid var(--brand-card-stroke); transition:background .12s ease;
}
.dta-anno__item:first-child{ border-top:none; }
.dta-anno__item.is-hot{ background:var(--brand-field-fill); }
.dta-anno__num{
  flex:none; width:22px; height:22px; border-radius:50%; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-caption); font-weight:700; color:#fff; background:var(--brand-slate);
}
.dta-anno__item.is-client .dta-anno__num{ background:var(--brand-orchid, var(--brand-periwinkle)); }
.dta-anno__body{ flex:1; min-width:0; }
.dta-anno__note{ font-size:var(--fs-subhead); color:var(--brand-slate-deep); word-break:break-word; }
.dta-anno__who{ font-size:var(--fs-caption); color:var(--brand-slate-muted); margin-top:2px; }
.dta-anno__del{ flex:none; width:30px; height:30px; color:var(--brand-slate-muted); }
.dta-anno__del:hover{ color:var(--brand-danger); }

@media (max-width:720px){
  .dta-lbstage{ max-width:92vw; }
  .dta-anno{ width:92vw; max-height:38vh; }
}

/* ---- mark-paid ---- */
.dta-paid{ display:flex; flex-direction:column; gap:var(--space-3); }
.dta-paid__lbl{ font-weight:600; color:var(--brand-slate); }
.dta-seg{ width:100%; }
.dta-amt .field__icon{ font-weight:700; color:var(--brand-slate-muted); }
.dta-paid .btn-filled{ align-self:flex-start; }

/* ---- late fee ---- */
.dta-latefee{ display:flex; flex-direction:column; gap:var(--space-3); }
.dta-latefee__txt{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-footnote); color:var(--brand-slate-muted); }

/* ---- delivered summary ---- */
.dta-filerow{
  display:flex; align-items:center; gap:8px;
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-16);
  background:var(--brand-field-fill);
}
.dta-filerow__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--brand-slate-deep); }
.dta-filerow .btn-outline{ align-self:auto; flex:none; }

/* ---- milestones ---- */
.dta-miles__count{ margin-left:auto; color:var(--brand-slate-muted); }
.dta-bar{ height:6px; border-radius:999px; background:var(--brand-field-fill); overflow:hidden; }
.dta-bar__fill{ display:block; height:100%; background:var(--brand-success); border-radius:999px; transition:width .25s ease; }
.dta-mlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dta-mlist__empty{ padding:var(--space-2) 0; }
.dta-mrow{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) 0; border-top:1px solid var(--brand-card-stroke);
}
.dta-mrow:first-child{ border-top:none; }
.dta-mtoggle{ flex:none; color:var(--brand-slate-muted); display:inline-flex; padding:2px; }
.dta-mrow.is-done .dta-mtoggle{ color:var(--brand-success); }
.dta-mrow__mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dta-mrow__title{ font-size:var(--fs-subhead); color:var(--brand-slate-deep); }
.dta-mrow.is-done .dta-mrow__title{ text-decoration:line-through; color:var(--brand-slate-muted); }
.dta-mrow__due{ font-size:var(--fs-caption); color:var(--brand-slate-muted); }
.dta-mrow__due.is-overdue{ color:var(--brand-danger); font-weight:600; }
.dta-mrow__edit,
.dta-mrow__del{ flex:none; width:32px; height:32px; }
.dta-maddrow{ display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:stretch; }
.dta-maddfield{ flex:1 1 160px; }
.dta-mduefield{ flex:0 1 160px; }
.dta-maddrow .btn-outline{ align-self:stretch; }
.dta-tmpl{ align-self:flex-start; }

/* ---- labels ---- */
.dta-labels__edit{ margin-left:auto; flex:none; }
.dta-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.dta-chip{ }
.dta-leditor{ display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-2); }
.dta-leditor.hidden{ display:none; }
.dta-lchoices{ display:flex; flex-wrap:wrap; gap:8px; }
.dta-lchoice{
  padding:6px 12px; border-radius:var(--radius-pill);
  font-size:var(--fs-caption); font-weight:600;
  border:1px solid var(--brand-card-stroke); color:var(--brand-slate-muted);
  background:transparent;
}
.dta-lchoice.is-on{
  color:var(--brand-slate); border-color:transparent;
  background:color-mix(in srgb, var(--brand-periwinkle) 46%, transparent);
}
.dta-lcustom{ display:flex; gap:var(--space-3); }
.dta-lcustomfield{ flex:1; }

/* ---- activity ---- */
.dta-activity__head{ cursor:pointer; }
.dta-activity__chev{ margin-left:auto; transition:transform .2s ease; color:var(--brand-slate-muted); }
.dta-activity.is-open .dta-activity__chev{ transform:rotate(180deg); }
.dta-activity__body.hidden{ display:none; }
.dta-timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dta-tevent{ display:flex; gap:var(--space-3); padding:var(--space-3) 0; position:relative; }
.dta-tevent:not(:last-child)::before{
  content:""; position:absolute; left:13px; top:32px; bottom:-6px;
  width:2px; background:var(--brand-card-stroke);
}
.dta-tevent__dot{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-field-fill); color:var(--brand-slate-muted); z-index:1;
}
.dta-tevent.is-good .dta-tevent__dot{ color:var(--brand-success); background:color-mix(in srgb, var(--brand-success) 14%, transparent); }
.dta-tevent.is-bad .dta-tevent__dot{ color:var(--brand-danger); background:color-mix(in srgb, var(--brand-danger) 14%, transparent); }
.dta-tevent.is-warn .dta-tevent__dot{ color:var(--brand-warm-text); background:color-mix(in srgb, var(--brand-blush) 22%, transparent); }
.dta-tevent.is-orchid .dta-tevent__dot{ color:var(--brand-slate-deep); background:color-mix(in srgb, var(--brand-orchid) 22%, transparent); }
.dta-tevent__main{ min-width:0; display:flex; flex-direction:column; gap:2px; padding-top:3px; }
.dta-tevent__title{ font-size:var(--fs-subhead); font-weight:600; color:var(--brand-slate-deep); }
.dta-tevent__detail{ font-size:var(--fs-caption); color:var(--brand-slate); }
.dta-tevent__meta{ font-size:var(--fs-caption2); color:var(--brand-slate-muted); }

.dta-toast--err .icon{ color:var(--brand-danger); }

@media (max-width:640px){
  .dta-rev__row{ flex-direction:column; align-items:flex-start; }
  .dta-maddrow{ flex-direction:column; }
  .dta-mduefield{ flex:1; }
}

/* ===========================================================================
   13. DESIGNER MESSAGES — conversations list (#dsMessages) + thread (thread.js)
=========================================================================== */
/* avatars in messages/thread honor the deterministic --av-hue (like tickets) */
.dm-row__avatar,
.th-avatar,
.th-head .avatar{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--av-hue, var(--brand-slate)) 88%, #000 12%),
    var(--av-hue, var(--brand-slate)));
}

.dm-view{ max-width:760px; margin:0 auto; }
.dm-header{ margin:var(--space-2) var(--space-1) var(--space-4); }
.dm-header__sub{ margin-top:2px; color:var(--brand-slate-muted); }
.dm-section{ display:flex; flex-direction:column; gap:var(--space-3); }
.dm-section + .dm-section{ margin-top:var(--space-6); }
.dm-section__label{ margin:0 var(--space-1) calc(var(--space-1) * -1); }
.dm-list{ display:flex; flex-direction:column; gap:var(--space-3); }

.dm-row{
  position:relative;
  display:flex; align-items:center; gap:13px;
  width:100%; text-align:left;
  padding:14px;
  transition:transform .12s ease, box-shadow .3s ease-out;
}
.dm-row__avatar{ width:46px; height:46px; flex:none; }
.dm-row__mid{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.dm-row__name{
  font-size:var(--fs-headline); font-weight:600; color:var(--brand-slate-deep);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dm-row__sub{
  font-size:var(--fs-subhead); color:var(--brand-slate-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:5px;
}
.dm-row__sub--direct{ color:var(--brand-slate); }
.dm-row__sub--direct .icon{ color:var(--brand-orchid); }
.dm-row__right{ display:flex; align-items:center; gap:8px; flex:none; color:var(--brand-hint); }
.dm-row__time{ font-size:var(--fs-caption2); color:var(--brand-slate-muted); }
.dm-row__chev{ display:inline-flex; color:var(--brand-hint); }
/* hide ("delete chat") — appears on hover/focus, project rows only */
.dm-row__hide{
  position:absolute; top:8px; right:8px;
  width:28px; height:28px;
  opacity:0; transform:scale(.85); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.dm-row:hover .dm-row__hide,
.dm-row:focus-within .dm-row__hide{ opacity:1; transform:scale(1); pointer-events:auto; }
.dm-skel-line{ height:13px; width:60%; border-radius:6px; }
.dm-skel-line--sm{ width:38%; height:11px; }

/* ---- thread (1:1 chat) ---------------------------------------------------- */
.th-view{
  display:flex; flex-direction:column;
  max-width:760px; margin:0 auto;
  height:min(78vh, 720px);
}
.th-head{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; flex:none;
  position:sticky; top:0; z-index:2;
  border-radius:var(--radius-18);
}
.th-head .avatar{ width:40px; height:40px; }
.th-head__id{ min-width:0; display:flex; flex-direction:column; }
.th-head__name{
  font-size:var(--fs-headline); font-weight:600; color:var(--brand-slate-deep);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.th-head__sub{ font-size:var(--fs-caption); color:var(--brand-slate-muted); }

.th-scroll{
  flex:1 1 auto; overflow-y:auto;
  display:flex; flex-direction:column; gap:3px;
  padding:16px 6px;
  scroll-behavior:smooth;
}
.th-empty{
  margin:auto; text-align:center; color:var(--brand-slate-muted);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.th-empty .icon{ color:var(--brand-hint); }

.th-row{ display:flex; align-items:flex-end; gap:8px; }
.th-row--runstart{ margin-top:8px; }
.th-row--mine{ flex-direction:row-reverse; padding-left:56px; }
.th-row--theirs{ padding-right:56px; }
.th-avatar{ width:30px; height:30px; flex:none; font-size:11px; }
.th-avatar--ghost{ visibility:hidden; }
.th-col{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.th-row--mine .th-col{ align-items:flex-end; }
.th-sender{ font-size:var(--fs-caption2); color:var(--brand-hint); padding:0 6px; }
.th-autotag{ font-size:var(--fs-caption2); color:var(--brand-slate-muted); padding:0 6px; }

.th-bubble{
  border-radius:17px; padding:9px 13px;
  font-size:var(--fs-subhead); line-height:1.35;
  max-width:100%; word-break:break-word; white-space:pre-wrap;
}
.th-bubble--mine{ background:var(--brand-slate-fill); color:#fff; }
.th-bubble--theirs{ background:var(--brand-field-fill); color:var(--brand-slate-deep); border:1px solid var(--brand-card-stroke); }
.th-voice{ display:inline-flex; align-items:center; gap:7px; font-style:italic; opacity:.92; }
.th-voice__tx{ margin-top:4px; font-size:var(--fs-caption); opacity:.85; font-style:normal; }

/* Voice message bubble: play/pause · waveform · duration */
.th-bubble--voice{ padding:7px 11px; }
.th-vplayer{ display:flex; align-items:center; gap:9px; min-width:148px; }
.th-vplay{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; padding:0; color:inherit;
  background:rgba(255,255,255,.18);
}
.th-bubble--theirs .th-vplay{ background:var(--brand-slate-fill); color:#fff; }
.th-vplay:disabled{ opacity:.5; cursor:default; }
.th-vplay:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.th-vwave{ flex:1 1 auto; display:flex; align-items:center; gap:2px; height:22px; min-width:60px; }
.th-vbar{
  flex:1 1 auto; min-width:2px; max-width:3px; border-radius:2px;
  background:currentColor; opacity:.55; height:40%;
}
.th-vplay.is-playing ~ .th-vwave .th-vbar{ opacity:.85; }
.th-vtime{ flex:none; font-size:var(--fs-caption2); opacity:.8; font-variant-numeric:tabular-nums; }
.th-meta{ display:flex; gap:8px; padding:0 6px; }
.th-time{ font-size:var(--fs-caption2); color:var(--brand-hint); }
.th-receipt{ font-size:var(--fs-caption2); color:var(--brand-hint); }

.th-composer{
  flex:none; display:flex; align-items:flex-end; gap:8px;
  padding:8px 10px; margin-top:6px;
  position:sticky; bottom:0; z-index:2;
  border-radius:var(--radius-18);
}
.th-field{ flex:1 1 auto; min-height:44px; align-items:center; }
.th-input{
  flex:1; min-width:0; resize:none;
  background:transparent; border:none; outline:none;
  color:var(--brand-slate-deep); font-size:var(--fs-subhead);
  line-height:1.35; max-height:120px; padding:11px 0;
}
.th-input::placeholder{ color:var(--brand-hint); }
.th-send{ width:40px; height:40px; flex:none; }
.th-mic{ width:38px; height:38px; flex:none; }

/* Recording / preview panel — replaces the field+buttons while active */
.th-composer--recording .th-field,
.th-composer--recording .th-mic,
.th-composer--recording .th-send{ display:none; }
.th-rec{
  flex:1 1 auto; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:4px 4px 4px 12px; min-height:44px;
}
.th-rec__main{ display:flex; align-items:center; gap:9px; min-width:0; }
.th-rec__dot{
  flex:none; width:10px; height:10px; border-radius:50%;
  background:var(--brand-danger, #e5484d); animation:th-pulse 1.1s ease-in-out infinite;
}
.th-rec--preview .th-rec__dot{ animation:none; background:var(--brand-success, #30a46c); }
.th-rec__time{ font-size:var(--fs-subhead); font-variant-numeric:tabular-nums; color:var(--brand-slate-deep); }
.th-rec__hint{
  font-size:var(--fs-caption); color:var(--brand-hint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.th-rec__actions{ display:flex; align-items:center; gap:8px; flex:none; }
.th-rec__stop, .th-rec__send{ width:40px; height:40px; }
.th-composer__note{
  position:absolute; left:12px; right:12px; bottom:calc(100% + 6px);
  font-size:var(--fs-caption); color:var(--brand-hint);
  background:var(--brand-field-fill); border:1px solid var(--brand-card-stroke);
  border-radius:12px; padding:6px 10px;
}
@keyframes th-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.8); } }
@media (prefers-reduced-motion: reduce){ .th-rec__dot{ animation:none; } }

/* ===========================================================================
   14. DESIGNER GALLERY — masonry portfolio (#dsGallery) + add sheet + lightbox
=========================================================================== */
.gl-view{ max-width:980px; margin:0 auto; }
.gl-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-4); margin:var(--space-2) var(--space-1) var(--space-5);
}
.gl-header__sub{ margin-top:2px; color:var(--brand-slate-muted); }
.gl-header__add{ flex:none; }

.gl-masonry{ column-count:3; column-gap:14px; }
@media (max-width:860px){ .gl-masonry{ column-count:2; } }
@media (max-width:460px){ .gl-masonry{ column-count:1; } }

.gl-tile{
  position:relative; break-inside:avoid; margin:0 0 14px;
  padding:0; overflow:hidden; border-radius:var(--radius-22);
  display:block; cursor:zoom-in;
  box-shadow:var(--frost-shadow);
  transition:transform .14s ease, box-shadow .3s ease-out;
}
.gl-tile:hover{ box-shadow:var(--frost-shadow-lg, var(--frost-shadow)); }
.gl-tile:focus-visible{ outline:2px solid var(--brand-orchid); outline-offset:2px; }
.gl-tile__img{ display:block; width:100%; height:auto; }
.gl-tile--broken{ min-height:160px; background:color-mix(in srgb, var(--brand-periwinkle) 30%, transparent); }
.gl-tile__cap{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:2px;
  padding:14px 12px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  color:#fff;
}
.gl-tile__title{ font-size:var(--fs-subhead); font-weight:600; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gl-tile__caption{ font-size:var(--fs-caption); opacity:.88; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gl-tile__trash{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px;
  background:rgba(0,0,0,.42); color:#fff; border-color:rgba(255,255,255,.4);
  opacity:0; transform:scale(.85); transition:opacity .15s ease, transform .15s ease;
}
.gl-tile:hover .gl-tile__trash,
.gl-tile:focus-within .gl-tile__trash{ opacity:1; transform:scale(1); }
@media (hover:none){ .gl-tile__trash{ opacity:1; transform:scale(1); } }

/* ---- add sheet ----------------------------------------------------------- */
.gl-sheet-overlay,
.gl-lightbox{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-5);
  background:rgba(20,24,38,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .2s ease;
}
.gl-sheet-overlay--in,
.gl-lightbox--in{ opacity:1; }
.gl-sheet{
  position:relative; width:min(440px, 100%);
  display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-6);
  transform:translateY(8px) scale(.98); transition:transform .2s ease;
}
.gl-sheet-overlay--in .gl-sheet{ transform:none; }
.gl-sheet__close{ position:absolute; top:14px; right:14px; }
.gl-sheet__title{ padding-right:30px; }
.gl-sheet__preview{
  width:100%; max-height:240px; object-fit:cover;
  border-radius:var(--radius-16); border:1px solid var(--brand-card-stroke);
}
.gl-sheet__input{ flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--brand-slate-deep); font-size:var(--fs-subhead); resize:none; }
.gl-sheet__input::placeholder{ color:var(--brand-hint); }
.gl-sheet__status{ min-height:1em; color:var(--brand-danger); }

/* ---- lightbox ------------------------------------------------------------ */
.gl-lightbox{ background:rgba(8,10,18,.86); }
.gl-lightbox__img{
  max-width:92vw; max-height:80vh; object-fit:contain;
  border-radius:var(--radius-16);
  transform:scale(.94); transition:transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.gl-lightbox--in .gl-lightbox__img{ transform:scale(1); }
.gl-lightbox__close{
  position:absolute; top:18px; right:18px;
  width:38px; height:38px; background:rgba(255,255,255,.16); color:#fff;
}
.gl-lightbox__bar{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:8px;
  padding:24px var(--space-6) var(--space-6);
  background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  color:#fff;
}
.gl-lightbox__title{ font-size:var(--fs-title3); font-weight:600; }
.gl-lightbox__caption{ font-size:var(--fs-subhead); opacity:.88; }
.gl-lightbox__del{ width:auto; align-self:flex-start; padding:10px 18px; }

@media (prefers-reduced-motion:reduce){
  .gl-sheet, .gl-lightbox__img, .gl-sheet-overlay, .gl-lightbox{ transition:none; }
  .th-scroll{ scroll-behavior:auto; }
}

/* ===========================================================================
   Account → My information (mirrors iOS MyInfoView)
=========================================================================== */
.avatar--xl{ width:96px; height:96px; font-size:var(--fs-title); border-radius:50%; }

/* back affordance reused above the editor */
.ds-detail-top{ margin-bottom:var(--space-2); }
.ds-detail-top .btn-text{ display:inline-flex; align-items:center; gap:6px; }

/* gradient avatar hero */
.mi-hero{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
  padding:var(--space-8) var(--space-6);
  text-align:center;
  background:linear-gradient(135deg, var(--brand-slate-deep), var(--brand-slate));
  border:1px solid var(--brand-card-stroke);
}
.mi-hero .avatar--xl{
  background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.55);
  color:#fff;
}
.mi-hero__cap{ font-size:var(--fs-caption); color:rgba(255,255,255,.82); }
.mi-cam{
  position:absolute; top:calc(var(--space-8) + 64px); left:50%;
  transform:translateX(34px);
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:#fff; color:var(--brand-slate-deep);
  border:1px solid var(--brand-card-stroke); box-shadow:var(--frost-shadow-sm);
}
.mi-cam:active{ transform:translateX(34px) scale(.92); }
.mi-cam-menu{
  display:flex; flex-direction:column; gap:2px;
  width:100%; max-width:280px;
  padding:6px; border-radius:var(--radius-16);
  background:rgba(255,255,255,.96);
  border:1px solid var(--brand-card-stroke);
}
.mi-cam-menu__item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  font-size:var(--fs-subhead); color:var(--brand-slate-deep); text-align:left;
}
.mi-cam-menu__item:hover{ background:var(--frost-fill); }
.mi-cam-menu__item.mi-danger{ color:var(--brand-danger); }

/* a success variant for the inline status line */
.status.good{ color:var(--brand-success); }