@import 'bootstrap/dist/css/bootstrap.css';
@import 'primeicons/primeicons.css';

/* ============================================================
   Plantoo Tech — User (Warm) panel
   Brand: crimson rose #bf3550
   ============================================================ */

:root {
  --brand: #bf3550;
  --brand-700: #a52a42;
  --brand-800: #882134;
  --blush: #eaaeb7;
  --blush-soft: #f6dde2;
  --blush-bg: #fbeef1;

  --bg: #fbf3f3;
  --surface: #ffffff;
  --surface-2: #fdf6f6;
  --sidebar: #2a0f16;
  --sidebar-2: #3a1620;
  --sidebar-line: #4d2230;
  --sidebar-text: #e1ccd1;
  --sidebar-muted: #a8888f;

  --ink: #1e1719;
  --ink-2: #534045;
  --muted: #8d7378;
  --faint: #b89ea3;

  --line: #f0e0e3;
  --line-2: #e8d4d8;

  --wa: #1faa59; --wa-bg: #e6f6ed;
  --fb: #0a7cff; --fb-bg: #e6f1ff;

  --green: #2f9e6f; --green-bg: #e7f5ee;
  --amber: #c98a14; --amber-bg: #fbf0d8;
  --red: #c5384b; --red-bg: #fbe7ea;
  --blue: #3b6fd4; --blue-bg: #e8eefb;
  --grey-bg: #f2e8eb;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(40,16,21,.05), 0 1px 3px rgba(40,16,21,.04);
  --shadow: 0 4px 16px rgba(40,16,21,.07), 0 1px 3px rgba(40,16,21,.05);
  --shadow-lg: 0 18px 50px rgba(40,16,21,.18);

  --ring: rgba(191,53,80,.2);
  --accent-shadow: rgba(191,53,80,.34);

  --font: "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
#react-app { height: 100vh; overflow: hidden; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--blush-soft); color: var(--brand-800); }
.pt-mono { font-family: var(--mono); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #e8d4d8; border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
.sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); background-clip: content-box; }

/* ============================================================ LOGIN — WARM */
.login-stage {
  height: 100vh; width: 100vw;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(820px 480px at 94% -10%, rgba(234,174,183,.36), transparent 62%),
    radial-gradient(720px 480px at -8% 106%, rgba(191,53,80,.14), transparent 62%),
    var(--bg);
}
.login-grain { position: absolute; inset: 0; opacity: .45; z-index: 1;
  background-image: radial-gradient(rgba(140,40,60,.04) 1px, transparent 1px);
  background-size: 26px 26px; pointer-events: none; animation: grainPan 40s linear infinite; }
@keyframes grainPan { from{ background-position: 0 0; } to{ background-position: 260px 260px; } }

.login-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wm-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.wm-glow.g1 { width: 540px; height: 540px; top: -190px; right: -130px; background: radial-gradient(circle, rgba(234,174,183,.42), transparent 66%); animation: warmPulse 9s ease-in-out infinite; }
.wm-glow.g2 { width: 460px; height: 460px; bottom: -170px; left: -110px; background: radial-gradient(circle, rgba(191,53,80,.22), transparent 66%); animation: warmPulse 11s ease-in-out infinite 2s; }
@keyframes warmPulse { 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.12); opacity:.9; } }
.wm-disc { position: absolute; border-radius: 50%; opacity: .18; }
.wm-disc.w1 { width: 300px; height: 300px; top: -60px; left: 8%; background: var(--blush); animation: warmRise 16s ease-in-out infinite; }
.wm-disc.w2 { width: 200px; height: 200px; bottom: -50px; right: 12%; opacity: .16; background: var(--brand); animation: warmRise 20s ease-in-out infinite 1s; }
.wm-disc.w3 { width: 120px; height: 120px; top: 54%; left: 18%; opacity: .14; background: var(--blush); animation: warmRise 14s ease-in-out infinite .5s; }
.wm-disc.w4 { width: 90px; height: 90px; top: 20%; right: 20%; opacity: .13; background: var(--brand); animation: warmRise 18s ease-in-out infinite 2s; }
.wm-disc.w5 { width: 160px; height: 160px; bottom: 18%; right: 24%; opacity: .2; background: var(--blush); animation: warmRise 17s ease-in-out infinite .8s; }
@keyframes warmRise { 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-30px) scale(1.06); } }
.wm-spark { position: absolute; width: 9px; height: 9px; background: #d76b88; border-radius: 1.5px; }
.wm-spark.sp1 { top: 20%; left: 30%; animation: twinkle 3s ease-in-out infinite; }
.wm-spark.sp2 { top: 40%; left: 60%; animation: twinkle 3.6s ease-in-out infinite .5s; }
.wm-spark.sp3 { top: 64%; left: 24%; animation: twinkle 4.2s ease-in-out infinite 1s; }
.wm-spark.sp4 { top: 30%; right: 26%; animation: twinkle 3.2s ease-in-out infinite 1.5s; }
.wm-spark.sp5 { bottom: 22%; right: 34%; animation: twinkle 3.8s ease-in-out infinite 2s; }
@keyframes twinkle { 0%,100%{ transform: scale(.45) rotate(45deg); opacity:.2; } 50%{ transform: scale(1.1) rotate(45deg); opacity:.9; } }
.wm-ember { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, var(--blush), var(--brand)); opacity: 0; bottom: -12px; }
.wm-ember.e1 { left: 20%; animation: ember 7s ease-in infinite; }
.wm-ember.e2 { left: 38%; animation: ember 8.5s ease-in infinite 1.5s; }
.wm-ember.e3 { left: 58%; animation: ember 6.5s ease-in infinite 3s; }
.wm-ember.e4 { left: 72%; animation: ember 9s ease-in infinite .8s; }
.wm-ember.e5 { left: 85%; animation: ember 7.5s ease-in infinite 2.2s; }
@keyframes ember { 0%{ transform:translateY(0) scale(.6); opacity:0; } 15%{ opacity:.7; } 80%{ opacity:.45; } 100%{ transform:translateY(-88vh) scale(1.05); opacity:0; } }

.login-card { width: 392px; background: var(--surface); border-radius: 22px; padding: 38px 38px 30px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(60,30,20,.04);
  position: relative; z-index: 2;
  animation: cardIn .6s cubic-bezier(.16,.84,.44,1) both; }
@keyframes cardIn { from { transform: translateY(22px) scale(.975); } to { transform: none; } }
.login-card > * { animation: fieldIn .5s ease both; }
.login-card > *:nth-child(1){ animation-delay:.04s } .login-card > *:nth-child(2){ animation-delay:.08s }
.login-card > *:nth-child(3){ animation-delay:.12s } .login-card > *:nth-child(4){ animation-delay:.16s }
.login-card > *:nth-child(5){ animation-delay:.20s } .login-card > *:nth-child(6){ animation-delay:.24s }
@keyframes fieldIn { from { transform: translateY(9px); opacity: 0; } to { transform: none; opacity: 1; } }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.login-foot { text-align: center; color: var(--faint); font-size: 12.5px; margin-top: 28px; }

/* Form fields */
.pt-field { margin-bottom: 15px; }
.pt-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; letter-spacing: .01em; }
.pt-input { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 11px; background: var(--surface-2); font-size: 14.5px; color: var(--ink); transition: border-color .15s, box-shadow .15s, background .15s; outline: none; }
.pt-input::placeholder { color: var(--faint); }
.pt-input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--ring); }
.pt-textarea {
    width: 100%; min-height: 84px; padding: 10px 14px;
    border: 1.5px solid var(--line-2); border-radius: 11px;
    background: var(--surface-2); color: var(--ink);
    font: inherit; font-size: 14px; line-height: 1.55;
    transition: border-color .15s, box-shadow .15s, background .15s;
    outline: none; resize: vertical; -webkit-appearance: none;
}
.pt-textarea::placeholder { color: var(--faint); }
.pt-textarea:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--ring); }
.pt-textarea:disabled { opacity: .55; cursor: not-allowed; }
.pt-textarea::-webkit-scrollbar { width: 10px; height: 10px; }
.pt-textarea::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--surface-2); }
.pt-textarea::-webkit-scrollbar-thumb:hover { background: var(--brand); }
.pt-textarea-mono { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; tab-size: 2; -moz-tab-size: 2; padding: 12px 14px; }
.pt-input-wrap { position: relative; }
.pt-input-wrap .pt-input { padding-right: 44px; }
.pt-input-eye { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); border-radius: 8px; background: none; border: none; cursor: pointer; }
.pt-input-eye:hover { background: var(--grey-bg); }

/* Buttons */
.pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 11px; font-weight: 600; font-size: 14px; transition: background .15s, transform .12s, box-shadow .15s, filter .15s; white-space: nowrap; border: none; cursor: pointer; font-family: var(--font); }
.pt-btn:active { transform: translateY(1px); }
.pt-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 8px var(--accent-shadow); }
.pt-btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); filter: saturate(1.05); }
.pt-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.pt-btn-block { width: 100%; }
.pt-btn-ghost { background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--line-2); }
.pt-btn-ghost:hover { border-color: var(--faint); background: var(--surface-2); }
.pt-btn-soft { background: var(--blush-bg); color: var(--brand-700); }
.pt-btn-soft:hover { background: var(--blush-soft); }
.pt-btn-sm { height: 36px; padding: 0 13px; font-size: 13px; border-radius: 9px; }
.pt-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: 10px; }

/* THE FORM CARD (10/09/2026). Inline for two or three questions, a sheet for a dozen — the
   template chooses, and both use the same fields. */
.wg-form { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 10px; }
.wg-form-row { display: flex; flex-direction: column; gap: 4px; }
.wg-form-label { font-size: 12px; color: var(--muted); }
.wg-req { color: var(--red); font-weight: 700; }
/* EVERY INPUT EXCEPT THE TICKS. A radio and a tick box are not boxes you type in: given
   `width: 100%` they take the whole row and squeeze their own label to nothing, which is what
   happened the day the question types landed — "Full cover" came out one letter per line.
   (Arfu, 18/09/2026) */
.wg-form-row input:not([type="radio"]):not([type="checkbox"]),
.wg-form-row textarea, .wg-form-row select {
    width: 100%; font: inherit; font-size: 13.5px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.wg-form-row input[type="radio"], .wg-form-row input[type="checkbox"] {
    width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--brand);
}
.wg-form-row textarea { resize: vertical; min-height: 66px; }
.wg-form-row input:not([type="radio"]):not([type="checkbox"]):focus,
.wg-form-row textarea:focus, .wg-form-row select:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--blush-bg);
}
.wg-form-row.bad input:not([type="radio"]):not([type="checkbox"]),
.wg-form-row.bad textarea, .wg-form-row.bad select { border-color: var(--red); }
.wg-form-warn { font-size: 12px; color: var(--red); margin-bottom: 8px; }
/* v0.21 — a form with sections. The heading and its explanation belong ABOVE the questions they
   introduce, and the picture belongs with them: it is usually the document an answer is copied
   off. */
.wg-form-sec { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 10px;
  padding-bottom: 9px; border-bottom: 1px solid #f2e6e8; }
.wg-form-sec b { font-size: 13.5px; color: #231417; }
.wg-form-sec span { font-size: 12px; color: #8a7176; line-height: 1.55; }
.wg-form-sec img { max-width: 100%; border-radius: 10px; margin-top: 4px; }
/* The line under a question — an example, or where to find the answer. */
.wg-form-help { font-size: 11.5px; color: #a89195; line-height: 1.5; }
/* And the reason it was refused, under the question it is about. */
.wg-form-bad { font-size: 11.5px; color: var(--red); }
.wg-form-other { margin-top: 5px; }
/* v0.22 — every question type a real form has. Radios and checkboxes as ROWS, because a list of
   options read down the page is how a form reads and how Google draws it. */
.wg-form-opts { display: flex; flex-direction: column; gap: 6px; }
/* A row is the tick and the words beside it. `min-width: 0` on the words, or a long option in a
   narrow chat column wraps one character per line. */
.wg-form-opt { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: #231417;
  line-height: 1.5; cursor: pointer; padding: 3px 0; }
.wg-form-opt input[type="radio"], .wg-form-opt input[type="checkbox"] { margin: 3px 0 0; flex: 0 0 auto; }
.wg-form-opt > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wg-form-opt .wg-form-other { margin-top: 0; flex: 1; min-width: 0; }
/* A line from one number to another, with the words at each end. */
.wg-form-scale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wg-form-scale-end { font-size: 11.5px; color: #8a7176; }
.wg-form-scale-pt { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; }
.wg-form-scale-pt input { margin: 0; }
/* A grid SCROLLS sideways rather than wrapping: one that wraps stops being a grid. */
.wg-form-grid { overflow-x: auto; }
.wg-form-grid table { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.wg-form-grid input { width: auto; accent-color: var(--brand); }
.wg-form-grid th, .wg-form-grid td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #f6ecee; }
.wg-form-grid th[scope="row"] { text-align: left; font-weight: 500; color: #231417; white-space: nowrap; }
.wg-form-grid thead th { font-size: 11px; color: #8a7176; font-weight: 600; }
/* Files, and the picture on a question. */
.wg-form-files { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.wg-form-file { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.wg-form-file a { color: var(--brand); }
.wg-form-file button { border: none; background: none; color: #a89195; cursor: pointer; font-size: 14px; }
.wg-form-add { font-size: 12.5px; color: var(--brand); font-weight: 600; cursor: pointer;
  border: 1px dashed #e7d3d7; border-radius: 10px; padding: 6px 12px; }
.wg-form-img { max-width: 100%; border-radius: 10px; margin: 2px 0 4px; }
.wg-form-opt-img { height: 44px; border-radius: 6px; }
/* Stars, hearts or thumbs. Big enough to hit on a phone, which is the only reason a rating beats
   a scale for the same question. */
.wg-form-rating { display: flex; gap: 4px; }
.wg-form-star { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1;
  padding: 0 2px; color: #d9c6ca; }
.wg-form-star.is-on { color: var(--brand); }
/* An item that asks nothing: a title block between questions, a picture, a video. */
.wg-form-note { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.wg-form-note b { font-size: 13px; color: #231417; }
.wg-form-note span { font-size: 12px; color: #8a7176; line-height: 1.55; }
.wg-form-note img { max-width: 100%; border-radius: 10px; }
.wg-form-note iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.wg-formcard { margin-top: 6px; }
.wg-form-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.wg-form-step { font-size: 11.5px; color: var(--muted); margin-right: auto; font-variant-numeric: tabular-nums; }
.wg-btn { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 20px;
    padding: 7px 16px; border: 1px solid var(--brand); background: var(--brand); color: #fff; }
.wg-btn:hover { filter: brightness(1.06); }
.wg-btn:disabled { opacity: .55; cursor: default; }
.wg-btn.ghost { background: var(--surface); color: var(--brand-700); }
.wg-form-teaser { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--muted); }
/* An answered card: the questions as they were, each with what was said in it, and a button with
   nothing left to do. */
.wg-formcard.is-done { opacity: .95; }
.wg-form-done { font-size: 13px; color: #231417; background: #f7f0f2; border: 1px solid #f2e6e8;
  border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; }
.wg-formcard.is-done .wg-btn:disabled { background: #f4ecee; color: #a89195; cursor: default;
  box-shadow: none; margin-top: 10px; }

/* THE FORM AS IT WAS FILLED IN. A sent form used to read as a bubble of `name value` pairs; what
   the person did was fill a form, so the transcript shows one — the same questions, in order, each
   with its answer in the box. Card-coloured rather than the sender's bubble colour, because it is
   a document they sent rather than a line they typed. (Arfu, 18/09/2026) */
.wg-form-filled { max-width: 86%; text-align: left; background: #fff; border: 1px solid #efe2e4;
  border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.wg-form-filled-h { font-size: 13px; font-weight: 700; color: #231417; }
.wg-form-filled-row { display: flex; flex-direction: column; gap: 3px; }
.wg-form-filled-q { font-size: 11.5px; color: #8a7176; line-height: 1.4; }
.wg-form-filled-a { font-size: 13px; color: #231417; background: #fbf7f8; border: 1px solid #f2e6e8;
  border-radius: 9px; padding: 6px 9px; white-space: pre-wrap; }

/* The sheet. Fixed rather than a portal: the chat surface is the whole viewport on a phone and
   this has to cover it, footer included, or the send button drifts under the keyboard. */
.wg-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(35,20,23,.42); padding: 0; }
@media (min-width: 560px) { .wg-sheet { align-items: center; padding: 4vh 12px; } }
.wg-sheet-box { width: min(520px, 100%); max-height: 92vh; display: flex; flex-direction: column;
    background: var(--surface); border-radius: 18px 18px 0 0; overflow: hidden; box-shadow: var(--shadow-lg); }
@media (min-width: 560px) { .wg-sheet-box { border-radius: 18px; } }
.wg-sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.wg-sheet-x { margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
.wg-sheet-body { padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.wg-sheet-foot { padding: 12px 18px; border-top: 1px solid var(--line); }

/* The slot picker asks three short questions instead of showing two hundred chips (10/09/2026).
   Every step can be walked back, which is what the back link is. */
.wg-drill { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.wg-drill-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wg-drill-alt { margin-left: auto; border: 1px solid var(--blush); background: var(--surface); color: var(--brand-700);
    border-radius: 20px; padding: 3px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.wg-drill-alt:hover { background: var(--blush-bg); }
/* A BUTTON, not a whisper: bordered, tinted and carrying the thing it undoes. */
.wg-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font: inherit; font-size: 12.5px; color: var(--brand-700); background: var(--blush-bg);
    border: 1px solid var(--blush); border-radius: 20px; padding: 5px 12px; }
.wg-back:hover { background: var(--blush-soft); }
.wg-back b { font-weight: 600; color: var(--ink-2); }
.wg-price { font-variant-numeric: tabular-nums; opacity: .75; font-size: .92em; }

/* THE CALENDAR. PrimeReact's default inline datepicker is built for a desktop form: 220px wide,
   the month and year wrapping onto two lines, day initials squeezed together and every date drawn
   the same whether or not it can be picked. In a chat bubble that read as broken. Given room, a
   readable grid, and — the point of it — open days that LOOK open. (Arfu, 10/09/2026) */
.wg-cal { margin-top: 6px; }
.wg-cal .p-datepicker { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 6px; font-size: 13.5px; background: var(--surface); }
.wg-cal .p-datepicker-header { padding: 6px 4px 10px; border: 0; background: none; }
.wg-cal .p-datepicker-title { display: flex; gap: 6px; justify-content: center; white-space: nowrap; font-weight: 600; }
.wg-cal .p-datepicker-title select, .wg-cal .p-datepicker-title span { font-size: 14px; }
.wg-cal .p-datepicker-prev, .wg-cal .p-datepicker-next { width: 30px; height: 30px; border-radius: 50%; color: var(--brand-700); }
.wg-cal .p-datepicker-prev:enabled:hover, .wg-cal .p-datepicker-next:enabled:hover { background: var(--blush-bg); }
.wg-cal table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; }
.wg-cal th { padding: 4px 0; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.wg-cal td { padding: 0; }
.wg-cal td > span { width: 100%; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; font-variant-numeric: tabular-nums; }
/* Open: tinted, bordered, obviously tappable. Closed: barely there, so the eye skips it. */
.wg-cal td:not(.p-datepicker-other-month) > span:not(.p-disabled) {
    background: var(--blush-bg); color: var(--brand-700); font-weight: 600; border: 1px solid var(--blush); cursor: pointer; }
.wg-cal td:not(.p-datepicker-other-month) > span:not(.p-disabled):hover { background: var(--blush-soft); }
.wg-cal td > span.p-disabled { color: var(--faint); opacity: 1; background: none; border: 1px solid transparent; }
.wg-cal td.p-datepicker-other-month > span { color: var(--faint); opacity: .45; }
.wg-cal td > span.p-highlight { background: var(--brand); border-color: var(--brand); color: #fff; }
.wg-cal .p-datepicker-today > span { box-shadow: inset 0 0 0 1px var(--blush); }

.pt-login-error { color: var(--red); font-size: 13px; margin-bottom: 12px; padding: 8px 12px; background: var(--red-bg); border-radius: 8px; border: 1px solid rgba(197,56,75,.15); }
.pt-login-info { color: var(--green); font-size: 13px; margin-bottom: 12px; padding: 8px 12px; background: var(--green-bg); border-radius: 8px; border: 1px solid rgba(47,158,111,.22); }

/* OTP */
.pt-otp { display: flex; gap: 8px; }
.pt-otp-box { width: 100%; height: 48px; text-align: center; font-size: 20px; font-weight: 700; font-family: var(--mono); border: 1.5px solid var(--line-2); border-radius: 11px; background: var(--surface-2); color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; padding: 0; }
.pt-otp-box:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--ring); }
.pt-code-send { justify-content: center; }
.pt-code-hint { font-size: 12px; color: var(--muted); margin-top: 10px; text-align: center; }
.pt-code-hint a, .pt-code-hint button { color: var(--brand); font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; font-size: inherit; }
.pt-code-hint a:hover, .pt-code-hint button:hover { text-decoration: underline; }
.pt-link-toggle { display: block; width: 100%; text-align: center; margin-top: 14px; color: var(--brand); font-weight: 600; font-size: 13px; background: none; border: none; cursor: pointer; padding: 4px 0; font-family: inherit; }
.pt-link-toggle:hover { text-decoration: underline; }

/* ============================================================ APP SHELL */
.pt-app { display: grid; grid-template-columns: 248px 1fr; height: 100vh; overflow: hidden; }

.sidebar { background: linear-gradient(195deg, #7c2a3b 0%, #561c29 100%); color: var(--sidebar-text); display: flex; flex-direction: column; overflow: hidden; }
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; }
.sb-close { display: none; margin-left: auto; width: 34px; height: 34px; border-radius: 9px; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #fff; border: none; cursor: pointer; transition: background .13s; }
.sb-close:hover { background: rgba(255,255,255,.18); }
.sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(40,12,20,.5); backdrop-filter: blur(2px); z-index: 40; animation: bdIn .2s ease both; }
@keyframes bdIn { from { opacity: 0; } to { opacity: 1; } }
.sb-ws { margin: 0 12px 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,210,220,.2); display: flex; align-items: center; gap: 10px; cursor: default; transition: background .15s; }
.sb-ws:hover { background: rgba(255,255,255,.16); }
.sb-ws .ws-nm { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-ws .ws-rl { font-size: 11px; color: rgba(255,255,255,.62); }
.sb-nav { flex: 1; overflow-y: auto; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.sb-sect { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.5); padding: 14px 12px 6px; font-weight: 600; }
.sb-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: rgba(255,255,255,.78); font-size: 13.5px; font-weight: 500; transition: background .13s, color .13s, transform .13s; width: 100%; text-align: left; background: none; border: none; cursor: pointer; }
.sb-item:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateX(2px); }
.sb-item.on { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(191,53,80,.4); }
.sb-item.on:hover { background: var(--brand); transform: none; }
.sb-item .sb-badge { margin-left: auto; background: rgba(255,255,255,.18); color: #fff; font-size: 11px; font-weight: 600; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; font-family: var(--mono); }
.sb-item.on .sb-badge { background: rgba(255,255,255,.28); }

.pt-main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.pt-topbar { height: 62px; flex-shrink: 0; background: #fdf6f6; border-bottom: 1px solid #f3e3e6; display: flex; align-items: center; gap: 14px; padding: 0 24px; position: relative; z-index: 30; }
.pt-tb-menu { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; background: var(--surface-2); border: 1.5px solid var(--line); color: var(--ink-2); cursor: pointer; flex-shrink: 0; transition: background .14s, border-color .14s; }
.pt-tb-menu:hover { background: var(--grey-bg); border-color: var(--blush); }
.pt-tb-title { min-width: 0; flex: 1; }
.pt-topbar h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-topbar .pt-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-tb-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.pt-tb-user-wrap { position: relative; }
.pt-user-btn { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 6px; border-radius: 11px; background: none; border: none; cursor: pointer; transition: background .14s; }
.pt-user-btn:hover { background: var(--surface-2); }
.pt-user-btn-meta { text-align: left; line-height: 1.25; max-width: 150px; display: flex; flex-direction: column; }
.pt-u-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-u-role { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 248px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 7px; z-index: 200; animation: ddIn .2s ease both; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pt-user-dropdown-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-align: left; transition: background .12s, color .12s; background: none; border: none; cursor: pointer; font-family: var(--font); }
.pt-user-dropdown-item:hover { background: var(--surface-2); color: var(--ink); }
.pt-user-dropdown-item.pt-danger { color: var(--brand); }
.pt-user-dropdown-item.pt-danger:hover { background: var(--blush-bg); }
.pt-dropdown-sep { height: 1px; background: var(--line); margin: 6px 4px; }

.pt-content { flex: 1; overflow-y: auto; padding: 26px; background:
  radial-gradient(820px 480px at 94% -10%, rgba(234,174,183,.26), transparent 62%),
  radial-gradient(720px 480px at -8% 106%, rgba(191,53,80,.10), transparent 62%),
  var(--bg); }
/* Full-bleed mode for the chat-app Messages view. */
.pt-content-flush { padding: 0; overflow: hidden; }

.pt-ava { border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex-shrink: 0; background: var(--brand); font-family: var(--font); }
.pt-ava.sq { border-radius: 11px; }

.pt-page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.pt-page-head h2 { font-size: 23px; margin: 0 0 4px; letter-spacing: -.015em; }
.pt-page-head p { margin: 0; color: var(--muted); font-size: 13.5px; }

.pt-grid { display: grid; gap: 16px; }
.pt-g-4 { grid-template-columns: repeat(4, 1fr); }
.pt-g-3 { grid-template-columns: repeat(3, 1fr); }
.pt-g-2 { grid-template-columns: repeat(2, 1fr); }

.pt-card { background: #fffdfd; border: 1px solid #f3e2e5; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pt-card-pad { padding: 20px; }
.pt-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f6e8ea; }
.pt-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.pt-card-head .pt-hint { font-size: 12.5px; color: var(--muted); }

.pt-stat { background: #fffdfd; border: 1px solid #f3e2e5; border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease; }
.pt-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pt-stat .pt-lbl { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; font-weight: 500; }
.pt-stat .pt-lbl .pt-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fbe6ec; color: var(--brand); flex-shrink: 0; }
.pt-stat .pt-val { font-size: 28px; font-weight: 700; margin: 12px 0 4px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.pt-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.pt-badge .pt-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pt-b-green { background: var(--green-bg); color: var(--green); }
.pt-b-amber { background: var(--amber-bg); color: var(--amber); }
.pt-b-red { background: var(--red-bg); color: var(--red); }
.pt-b-blue { background: var(--blue-bg); color: var(--blue); }
.pt-b-grey { background: var(--grey-bg); color: var(--muted); }
.pt-b-brand { background: var(--blush-bg); color: var(--brand-700); }

.pt-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 20px; background: var(--green-bg); color: var(--green); font-size: 11.5px; font-weight: 600; }
.pt-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: beat 2.4s ease-in-out infinite; position: relative; }
.pt-live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green); opacity: .5; animation: ripple 1.8s ease-out infinite; }
@keyframes beat { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.35); opacity:.7; } }
@keyframes ripple { 0%{ transform: scale(.6); opacity:.6; } 100%{ transform: scale(1.9); opacity:0; } }

.pt-welcome { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-800) 100%); border-radius: var(--radius); padding: 24px 28px; color: #fff; position: relative; overflow: hidden; }
.pt-welcome::after { content: ""; position: absolute; top: -30%; right: -5%; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.06); }
.pt-welcome h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.pt-welcome p { margin: 0; color: rgba(255,255,255,.75); font-size: 14px; }

.pt-quick-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .13s, box-shadow .13s, transform .13s; text-align: left; width: 100%; font-family: var(--font); }
.pt-quick-link:hover { border-color: var(--blush); box-shadow: var(--shadow); transform: translateY(-2px); }
.pt-quick-link .pt-ql-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--blush-bg); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; }
.pt-quick-link .pt-ql-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.pt-quick-link .pt-ql-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.pt-fade-in { animation: ptFade .35s ease both; }
@keyframes ptFade { from { transform: translateY(7px); opacity: 0; } to { transform: none; opacity: 1; } }
.pt-fade-in > *:nth-child(1){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .02s both; }
.pt-fade-in > *:nth-child(2){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .07s both; }
.pt-fade-in > *:nth-child(3){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .12s both; }
.pt-fade-in > *:nth-child(4){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .17s both; }
.pt-fade-in > *:nth-child(5){ animation: ptRise .5s cubic-bezier(.16,.84,.44,1) .22s both; }
@keyframes ptRise { from { transform: translateY(13px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================ RESPONSIVE */
@media (max-width: 1024px) {
  .pt-app { grid-template-columns: 1fr !important; }
  .pt-tb-menu { display: inline-flex; }
  .pt-topbar { padding: 0 16px; gap: 10px; }
  .pt-content { padding: 18px 16px; }
  .pt-user-btn { padding: 0 4px; }
  .pt-user-btn-meta { display: none; }
  .sidebar { position: fixed !important; top: 0; bottom: 0; left: 0; width: 280px; max-width: 86vw; z-index: 50;
    transform: translateX(-104%); transition: transform .26s cubic-bezier(.16,.84,.44,1);
    box-shadow: 0 18px 50px rgba(40,12,20,.42); will-change: transform; }
  .sidebar.is-open { transform: translateX(0); }
  .sb-close { display: inline-flex; }
  .sb-backdrop { display: block; }
}

@media (max-width: 760px) {
  .pt-g-4 { grid-template-columns: repeat(2, 1fr); }
  .pt-g-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .pt-g-4, .pt-g-3, .pt-g-2 { grid-template-columns: 1fr; }
  .pt-topbar h1 { font-size: 16px; }
  .pt-topbar .pt-sub { display: none; }
  .pt-content { padding: 14px; }
  .pt-page-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Plantoo USER — phone-widget shell (replaces sidebar+topbar)
   Warm rose accent · chat-shaped · thumb-friendly (44px targets)
   ============================================================ */
.wg-stage {
  min-height: 100vh; width: 100vw;
  display: flex; align-items: center; justify-content: center; gap: 60px; position: relative;
  background:
    radial-gradient(820px 520px at 88% -8%, rgba(234,174,183,.34), transparent 60%),
    radial-gradient(720px 520px at 6% 106%, rgba(191,53,80,.12), transparent 60%),
    linear-gradient(150deg,#fdf1f2 0%,#fbf4f4 52%,#f9edef 100%);
  padding: 30px; overflow: hidden;
}

/* animated backdrop */
.wg-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.wg-glow {
  position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(234,174,183,.5), transparent 62%);
  transform: translate(var(--gx,50vw), var(--gy,40vh));
  transition: transform .35s cubic-bezier(.16,.84,.44,1); will-change: transform;
}
.wg-bg-layer { position: absolute; inset: 0; transition: transform .4s cubic-bezier(.16,.84,.44,1); }
.wg-bg-layer.l1 { transform: translate(calc(var(--px,0)*26px), calc(var(--py,0)*26px)); }
.wg-bg-layer.l2 { transform: translate(calc(var(--px,0)*52px), calc(var(--py,0)*52px)); }
.wg-bg-layer.l3 { transform: translate(calc(var(--px,0)*14px), calc(var(--py,0)*14px)); }
.wg-fl { position: absolute; display: block; }
.wg-fl > i { display: flex; align-items: center; justify-content: center; will-change: transform; }
.wg-fl.bub > i { width: 54px; height: 54px; border-radius: 18px 18px 18px 5px; background: #fff; color: var(--brand); box-shadow: 0 12px 30px rgba(191,53,80,.16); }
.wg-fl.bub.b2 > i { color: #1f8a5b; border-radius: 18px 18px 5px 18px; }
.wg-fl.card > i { width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(150deg, var(--brand), var(--brand-700)); color: #fff; box-shadow: 0 14px 34px rgba(191,53,80,.3); }
.wg-fl.pill > i { padding: 9px 15px; border-radius: 20px; background: #fff; color: var(--brand-700); font-weight: 700; font-size: 14px; font-family: var(--mono); box-shadow: 0 10px 24px rgba(191,53,80,.14); }
.wg-fl.tag > i { gap: 5px; padding: 8px 13px; border-radius: 20px; background: #e7f5ee; color: #1f8a5b; font-weight: 700; font-size: 12.5px; box-shadow: 0 10px 24px rgba(31,138,91,.16); }
.wg-fl.heart > i img { width: 38px; height: auto; display: block; opacity: .9; filter: drop-shadow(0 8px 18px rgba(191,53,80,.25)); }
.wg-fl.heart.h2 > i img { width: 26px; }
.wg-fl.spark > i { width: 14px; height: 14px; background: var(--blush); transform: rotate(45deg); border-radius: 3px; }
.wg-fl.ring > i { width: 130px; height: 130px; border-radius: 50%; border: 2px dashed rgba(191,53,80,.18); }
.wg-fl.bub.b1 { top: 20%; left: 13%; } .wg-fl.bub.b2 { bottom: 24%; left: 24%; }
.wg-fl.card.c1 { top: 30%; right: 16%; }
.wg-fl.pill.p-a { top: 60%; left: 9%; } .wg-fl.pill.p-b { top: 14%; left: 30%; } .wg-fl.pill.p-c { bottom: 18%; right: 24%; }
.wg-fl.tag.t1 { top: 70%; right: 13%; }
.wg-fl.heart.h1 { top: 12%; right: 30%; } .wg-fl.heart.h2 { bottom: 30%; left: 40%; }
.wg-fl.spark.s1 { top: 42%; left: 22%; } .wg-fl.spark.s2 { bottom: 40%; right: 34%; } .wg-fl.spark.s3 { top: 24%; right: 42%; }
.wg-fl.ring.r1 { bottom: 8%; right: 6%; }
@media (prefers-reduced-motion: no-preference) {
  .wg-fl.bub.b1 > i { animation: wgFloat 7s ease-in-out infinite; }
  .wg-fl.bub.b2 > i { animation: wgFloat 9s ease-in-out infinite 1s; }
  .wg-fl.card.c1 > i { animation: wgFloat 8s ease-in-out infinite .5s, wgTilt 10s ease-in-out infinite; }
  .wg-fl.pill.p-a > i { animation: wgFloat 6.5s ease-in-out infinite; }
  .wg-fl.pill.p-b > i { animation: wgFloat 8s ease-in-out infinite 1.4s; }
  .wg-fl.pill.p-c > i { animation: wgFloat 7.5s ease-in-out infinite .8s; }
  .wg-fl.tag.t1 > i { animation: wgFloat 9s ease-in-out infinite .3s; }
  .wg-fl.heart.h1 > i { animation: wgFloat 10s ease-in-out infinite, wgTilt 7s ease-in-out infinite; }
  .wg-fl.heart.h2 > i { animation: wgFloat 8s ease-in-out infinite 2s, wgTilt 9s ease-in-out infinite reverse; }
  .wg-fl.spark > i { animation: wgTwinkle 3.4s ease-in-out infinite; }
  .wg-fl.spark.s2 > i { animation-delay: .8s; } .wg-fl.spark.s3 > i { animation-delay: 1.6s; }
  .wg-fl.ring.r1 > i { animation: wgSpin 34s linear infinite; }
}
@keyframes wgFloat   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes wgTilt    { 0%,100% { rotate: -7deg; } 50% { rotate: 7deg; } }
@keyframes wgTwinkle { 0%,100% { transform: rotate(45deg) scale(.5); opacity: .3; } 50% { transform: rotate(45deg) scale(1.15); opacity: .9; } }
@keyframes wgSpin    { from { rotate: 0deg; } to { rotate: 360deg; } }

/* phone frame */
.wg-phone { width: min(560px, 50vw); min-width: 420px; max-width: 94vw; position: relative; z-index: 2;
  animation: wgPhoneIn .55s cubic-bezier(.16,.84,.44,1) both; }
@keyframes wgPhoneIn { from { transform: translateY(22px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.wg-frame { background: #fffafb; border-radius: 26px; overflow: hidden; height: 96vh; max-height: 96vh;
  display: flex; flex-direction: column; position: relative;
  box-shadow: 0 30px 80px rgba(40,16,21,.22), 0 0 0 1px rgba(40,25,30,.05); }

/* mobile: phone fills the viewport */
@media (max-width: 760px) {
  .wg-stage { padding: 0; gap: 0; min-height: 100vh; min-height: 100dvh; }
  .wg-phone { width: 100vw; max-width: 100vw; }
  .wg-frame { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; box-shadow: none; }
}

/* header */
.wg-header { display: flex; align-items: center; gap: 11px; padding: 15px 16px;
  background: linear-gradient(180deg, #fff, #fffafb); border-bottom: 1px solid #efe2e4; flex-shrink: 0; }
.wg-h-org { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.wg-h-meta { flex: 1; min-width: 0; }
/* The calendar shortcut, beside the bell. Same weight as the bell — both are ways OUT of the tab
   you are on, and neither should look like the page's own action. (02/09/2026) */
.wg-h-cal { width: 34px; height: 34px; border-radius: 11px; border: none; background: none;
  display: grid; place-items: center; cursor: pointer; color: #8a7176; flex-shrink: 0; }
.wg-h-cal:hover { background: #fbeef1; color: var(--brand); }
.wg-h-cal.on { background: #fbeef1; color: var(--brand); }
/* The count rides on the icon the way the bell's does: a queue you cannot see the size of is one
   you open to find out, every time. */
.wg-h-cal { position: relative; }
.wg-h-cal-n { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--brand); color: #fff; border: 2px solid #fff; border-radius: 10px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 800; line-height: 1;
  display: grid; place-items: center; }
.wg-h-name { font-size: 15px; font-weight: 700; color: #231417; }
.wg-h-sub  { font-size: 12px; color: #8a7176; display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.wg-online { width: 7px; height: 7px; border-radius: 50%; background: #2f9e6f; box-shadow: 0 0 0 2px rgba(47,158,111,.2); }
.wg-h-btn  { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #8a7176; background: none; border: none; cursor: pointer; margin-left: auto; flex-shrink: 0; }
.wg-h-btn:hover { background: #fbeef1; }
.wg-h-btn svg { transform: rotate(90deg); }

/* vendor switcher dropdown */
.wg-h-switch { background: none; border: none; display: flex; align-items: center; gap: 11px; cursor: pointer; padding: 0; min-width: 0; text-align: left; }
.wg-h-meta { text-align: left; }
.wg-h-name { justify-content: flex-start; }
.wg-h-switch-list { position: absolute; top: 64px; left: 16px; right: 16px; z-index: 6;
  background: #fff; border: 1px solid #efe2e4; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(40,16,21,.18); overflow: hidden;
  animation: wgPhoneIn .25s cubic-bezier(.16,.84,.44,1) both; max-height: 320px; overflow-y: auto; }
.wg-h-switch-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; transition: background .12s; }
.wg-h-switch-item:hover { background: #fbeef1; }

/* surface */
.wg-surface { flex: 1; overflow-y: auto; position: relative;
  background: radial-gradient(circle at 22px 22px, rgba(234,174,183,.07) 1px, transparent 1px) 0 0 / 24px 24px, #fffafb; }

/* chat */
.wg-chat { height: 100%; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 2px; }

/* The sub-chats of one room, above its transcript.
   ONE ROW, always (17/09/2026). It wrapped to three before, which ate the transcript on a phone as
   soon as a member had five conversations with one vendor; and it scrolled sideways before that,
   which is unusable where scrollbars are hidden. What does not fit goes behind a button, so the
   strip has a fixed height whatever a member has been up to. */
/* The row and the button beside it. The button is OUTSIDE the scroller, so it never slides away:
   whatever a member has been up to, the way to the full list is in the same place. */
.wg-subchats-wrap {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px; flex-shrink: 0;
    width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0;
}
.wg-subchats {
    display: flex; flex-wrap: nowrap; gap: 6px; align-items: center;
    flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    /* Dragged with a pointer as well as swiped — see ChatTab — because this panel hides its
       scrollbars, which leaves a mouse nothing to grab. */
    scrollbar-width: none; cursor: grab;
}
.wg-subchats::-webkit-scrollbar { display: none; }
.wg-subchats:active { cursor: grabbing; }
/* WHITE is a conversation still open, GREY one that is finished, PINK the one being read — owner's
   rule, 17/09/2026. The two unselected states were a shade apart and read as the same thing. */
.wg-subchat {
    flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 6px 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid #e7d7da; background: #fff; color: #5f4d51;
    font-family: var(--font); font-size: 12px; font-weight: 600;
}
.wg-subchat.is-on { border-color: var(--brand); background: var(--blush-bg, #fdf1f3); color: var(--brand); }

/* FINISHED, as opposed to still open. A row of references says nothing about which one is still
   waiting on you, which is the only reason to open it. Greyed rather than hidden: a closed
   conversation is still where its receipt and its transcript live. */
.wg-subchat.is-done { background: #efe7e9; border-color: #e3d5d8; color: #9a878b; }
.wg-subchat.is-done.is-on { border-color: var(--brand); color: var(--brand); background: var(--blush-bg, #fdf1f3); }
.wg-subchat-tick { margin-right: 4px; opacity: .8; }

/* The overflow button. Last in the row and never shrunk, so the count is always readable even when
   the pill beside it is being clipped. */
.wg-subchat-more { flex: 0 0 auto; font-family: var(--mono); font-size: 15px; line-height: 1; padding: 6px 11px; }

/* The rows inside that sheet. wg-convos-*, NOT wg-sheet-row-*, because this file already owns
   `.wg-sheet` — a bottom-sheet overlay — and reusing its names inherited `position: fixed; inset: 0`,
   which opened the dialog full-height against the left edge, and stripped the real sheet's close
   button of its `margin-left: auto`. (17/09/2026) */
.wg-convos-row { text-align: left; width: 100%; cursor: pointer; padding: 12px 13px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--surface); font-family: var(--font); }
.wg-convos-row.is-on { border-color: var(--brand); background: var(--blush-bg, #fdf1f3); }
.wg-convos-row.is-done { background: #faf6f7; }
.wg-convos-row.is-done .wg-convos-row-t { color: #7d6d70; }
.wg-convos-row-t { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 6px; }
.wg-convos-row-s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
/* Finished or waiting, as a mark rather than a word: a list is scanned, not read. */
.wg-convos-mark { font-size: 12px; line-height: 1; }
.wg-convos-mark.is-done { color: #a9989c; }
.wg-convos-mark.is-open { color: var(--brand); font-size: 9px; }

/* Pinning. A row and its pin sit side by side, so the row stays one big tap target and the pin is
   its own — a pin inside the row would fire the row on every miss. */
.wg-convos-line { display: flex; align-items: stretch; gap: 6px; }
.wg-convos-line .wg-convos-row { flex: 1; min-width: 0; }
.wg-convos-pin { flex: 0 0 auto; width: 40px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: #c9b9bc; font-size: 13px; }
.wg-convos-pin.is-on { border-color: var(--brand); background: var(--blush-bg, #fdf1f3); color: var(--brand); }
/* On the pill, a pin is a mark and not a control: unpinning happens in the list. */
.wg-subchat-pin { margin-right: 4px; color: var(--brand); font-size: 9px; vertical-align: middle; }
.wg-subchat.is-done .wg-subchat-pin { color: #b9a6aa; }

/* The "you are not at the bottom and something arrived" nudge (02/09/2026). Floats over the
   transcript — growing it would move the message the reader is actually looking at. */
.wg-newmsg {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 15px; border: none; border-radius: 999px;
  background: var(--brand, #bf3550); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(40,16,21,.24);
  animation: wgNewMsgIn .18s ease-out both;
}
.wg-newmsg:hover { filter: brightness(1.06); }
@keyframes wgNewMsgIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.wg-row { display: flex; margin-top: 8px; }
/* The message a notification was about, for a moment after it takes you there. Long enough to find
   it in a busy transcript, short enough not to become part of the design. (02/09/2026) */
.wg-row.wg-hit > * { animation: wgHit 2.2s ease-out both; border-radius: 16px; }
@keyframes wgHit {
  0%, 55% { box-shadow: 0 0 0 3px rgba(191,53,80,.34); background: rgba(191,53,80,.05); }
  100%    { box-shadow: 0 0 0 3px rgba(191,53,80,0);   background: transparent; }
}
.wg-row.in  { justify-content: flex-start; }
.wg-row.out { justify-content: flex-end; }
/* The 78% belongs on the ROW's child, not on the bubble.
   A bubble is often wrapped in a plain <div> that also carries its timestamp and attachments, and
   that wrapper is shrink-to-fit — so "max-width: 78%" on the bubble resolved against a box already
   sized to the bubble's own text. 78% of your own width is a clip: a short line like "Verified."
   lost its last letter and a half, while long ones looked fine because the row's width bound them
   first. (Arfu, 01/09/2026) */
.wg-row > * { max-width: 78%; min-width: 0; }
/* …EXCEPT a live form. 78% is right for a sentence and wrong for a number input and a paragraph
   box: the real constraint is this rule, not the bubble's own max-width, which is why widening
   `.wg-bub` did nothing. Written here so it lands after the rule it overrides, at the same
   specificity. It narrows again once answered — history should read as history.
   (Arfu, 10/09/2026) */
.wg-row > .wg-bub.wide { max-width: 100%; width: 100%; }
.wg-bub { max-width: 100%; padding: 10px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 1px 2px rgba(40,16,21,.05); position: relative; overflow-wrap: anywhere; }
.wg-row.in  .wg-bub { background: #ffffff; color: #231417; border-bottom-left-radius: 5px; }
.wg-row.out .wg-bub { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 2px 8px rgba(191,53,80,.24); }
.wg-time { font-size: 10px; opacity: .55; margin-top: 4px; }
.wg-sys  { text-align: center; font-size: 11px; color: #8a7176; font-weight: 600; margin: 12px 0 4px; }

/* booking card inline */
.wg-card { background: #fff; border: 1.5px solid var(--blush); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px rgba(40,16,21,.06); margin-top: 8px; }
.wg-card-hd { display: flex; align-items: center; gap: 6px; padding: 9px 13px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: linear-gradient(180deg, #fbeef1, #fff); color: var(--brand-700); border-bottom: 1px solid #f4dde2; }
.wg-card-hd.ok { background: linear-gradient(180deg, #e8f6ed, #fff); color: #1f8a5b; }
.wg-card-bd { padding: 11px 14px; display: flex; flex-direction: column; gap: 5px; }
.wg-kv { display: flex; justify-content: space-between; font-size: 12.5px; color: #6b585d; }
.wg-kv b { color: #231417; font-weight: 700; }
.wg-kv b.mono { font-family: var(--mono); font-size: 12px; }

/* composer */
.wg-composer-wrap { background: #fff; border-top: 1px solid #efe2e4; flex-shrink: 0; }
// The line above the composer in a guided chat, saying where typed text goes. Quiet on purpose —
// it is a caveat, not a message, and it sits between the conversation and the box.
// The nudge label on a repeated ask. Small and unemphatic — it is a note about the message, not
// part of what the vendor said.
.wg-chase { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #c98a14; margin-bottom: 4px; }
.wg-composer-note { padding: 6px 12px 0; font-size: 11px; line-height: 1.35; color: #96727a; }
.wg-composer { display: flex; align-items: center; gap: 8px; padding: 11px 12px; }
.wg-composer input[type="text"], .wg-composer > input:not([type]) {
  flex: 1; height: 42px; padding: 0 14px; border: 1.5px solid #efe2e4; border-radius: 14px;
  background: #fffafb; font-size: 14px; color: #231417; outline: none; font-family: var(--font); min-width: 0;
}
.wg-composer input:focus { border-color: var(--blush); background: #fff; }
.wg-send { width: 42px; height: 42px; border-radius: 14px; background: var(--brand); color: #fff;
  display: grid; place-items: center; box-shadow: 0 4px 12px rgba(191,53,80,.32); border: none; cursor: pointer; flex-shrink: 0; }
.wg-send:disabled { background: #d6c1c5; box-shadow: none; cursor: not-allowed; }
.wg-attach-btn { width: 42px; height: 42px; border-radius: 14px; background: #fbeef1; color: var(--brand); display: grid; place-items: center; border: none; cursor: pointer; flex-shrink: 0; transition: background .12s; }
.wg-attach-btn:hover { background: #f6dde2; }
.wg-attach-btn:disabled { background: #f2e8eb; color: #b89ea3; cursor: not-allowed; }
.wg-attach-btn:disabled:hover { background: #f2e8eb; }
.wg-composer input:disabled { background: #f6ecee; color: #8a7176; cursor: not-allowed; }

/* attachment preview strip */
.wg-attach-strip { display: flex; gap: 8px; padding: 10px 12px 0; overflow-x: auto; }
.wg-attach-chip { position: relative; flex-shrink: 0; background: #fbeef1; border: 1px solid #f4dde2; border-radius: 10px; overflow: hidden; min-width: 64px; max-width: 200px; }
.wg-attach-chip img { display: block; width: 64px; height: 64px; object-fit: cover; }
.wg-attach-file { display: grid; place-items: center; width: 64px; height: 64px; color: var(--brand); }
.wg-attach-name { font-size: 11px; color: #6b585d; padding: 4px 8px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.wg-attach-x { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(35,20,23,.7); color: #fff; display: grid; place-items: center; border: none; cursor: pointer; }
.wg-attach-x:hover { background: rgba(35,20,23,.9); }

/* image + file message bubbles */
.wg-img-bub { display: block; max-width: 220px; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(40,16,21,.08); border: 1px solid #efe2e4; }
.wg-img-bub img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: cover; }
.wg-file-bub { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; max-width: 260px; text-decoration: none; box-shadow: 0 1px 2px rgba(40,16,21,.05); }
.wg-file-bub.in  { background: #fff; color: #231417; border-bottom-left-radius: 5px; }
.wg-file-bub.out { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 2px 8px rgba(191,53,80,.24); }
.wg-file-bub .wg-file-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.wg-file-bub.in  .wg-file-ic { background: #fbeef1; color: var(--brand); }
.wg-file-bub.out .wg-file-ic { background: rgba(255,255,255,.18); color: #fff; }
.wg-file-bub .wg-file-meta { min-width: 0; }
.wg-file-bub .wg-file-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-file-bub .wg-file-size { font-size: 11px; opacity: .7; margin-top: 1px; font-family: var(--mono); }

/* bottom nav */
.wg-bottomnav { display: flex; padding: 6px 4px 8px; background: #fff; border-top: 1px solid #efe2e4; flex-shrink: 0; }
.wg-bn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px;
  border-radius: 10px; color: #8a7176; transition: all .13s; background: none; border: none; cursor: pointer; font-family: var(--font); }
.wg-bn-ic { width: 30px; height: 30px; display: grid; place-items: center; position: relative; }
.wg-bn-l { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.wg-bn.on { color: var(--brand); }
.wg-bn.on .wg-bn-ic { background: #fbeef1; border-radius: 12px; }
.wg-bn-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); border: 1.5px solid #fff; }

/* bookings tab */
.wg-mybk { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.wg-bk { background: #fff; border: 1px solid #efe2e4; border-radius: 14px; padding: 14px; box-shadow: 0 4px 14px rgba(40,16,21,.04); }
.wg-bk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.wg-bk-svc { font-size: 14.5px; font-weight: 700; color: #231417; }
.wg-bk-meta { font-size: 12.5px; color: #8a7176; display: flex; align-items: center; gap: 6px; font-family: var(--mono); }
.wg-bk-bd { font-size: 12.5px; color: #6b585d; margin-top: 8px; }
.wg-bk-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.wg-bk-status.confirmed { background: #e8f6ed; color: #1f8a5b; }
.wg-bk-status.pending   { background: #fdf2dc; color: #b07a14; }
.wg-bk-status.cancelled { background: #eee; color: #786264; }
.wg-bk-status.completed { background: #e6eefb; color: #2c4f9a; }
/* An engagement still being formed in the chat (BookingStatus::Started, 01/09/2026). Amber
   because it is neither done nor wrong — it is a conversation the member has not finished. */
.wg-bk-status.started   { background: #fdf2dc; color: #b07a14; }

/* Payment status, keyed by the PaymentStatus int (shared/status.js). The Payments tab listed
   every row as though it were a paid receipt, so an invoice still owed and one the vendor had
   rejected looked exactly like money already spent. (Arfu, 01/09/2026) */
.wg-pay-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.wg-pay-status.s1 { background: #fdf2dc; color: #b07a14; }   /* invoice sent — yours to pay */
.wg-pay-status.s2 { background: #e6eefb; color: #2c4f9a; }   /* receipt uploaded — theirs to check */
.wg-pay-status.s3 { background: #e8f6ed; color: #1f8a5b; }   /* verified */
.wg-pay-status.s4 { background: #fbe7ea; color: #c5384b; }   /* rejected */

/* flow chat — inline affordances (choice chips, slot grid, evidence box) */
.wg-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.wg-chip { padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--blush); background: #fff;
  color: var(--brand-700); font-size: 12.5px; font-weight: 700; font-family: var(--font); cursor: pointer; transition: all .12s; }
.wg-chip:hover:not(:disabled) { background: #fbeef1; border-color: var(--brand); }
.wg-chip:disabled { background: #f6ecee; border-color: #efe2e4; color: #b89ea3; cursor: default; }
.wg-slots { margin-top: 8px; }
.wg-slot-day { margin-bottom: 9px; }
.wg-slot-dayl { font-size: 11px; font-weight: 700; color: #8a7176; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }

// Places left in a shared slot — a class, a workshop. Quieter than the time beside it: it is a
// fact about the slot, not a second thing to choose between.
.wg-left { color: #a8848a; font-weight: 500; }

// Picking a stay — a range calendar rather than a list of times, for a service sold by the night.
// The calendar is PrimeReact's; only the frame around it and the summary under it are ours.
.wg-stay { margin-top: 8px; }
.wg-stay .p-datepicker { width: 100%; max-width: 320px; border: 1.5px solid #efe2e4; border-radius: 14px;
  font-size: 13px; font-family: var(--font); }
.wg-stay .p-datepicker table td > span.p-highlight { background: var(--brand); color: #fff; }
// A night nobody can sleep in reads as struck through, not merely dimmed: greyed-out alone is
// how a disabled control looks, and these are dates that are SOLD.
.wg-stay .p-datepicker table td.p-datepicker-other-month { opacity: .35; }
.wg-stay .p-disabled, .wg-stay .p-datepicker table td > span.p-disabled { text-decoration: line-through; opacity: .45; }
.wg-stay-sum { margin-top: 9px; font-size: 13px; color: #231417; }
.wg-stay-price { color: #8a7176; font-size: 12px; margin: 2px 0 7px; }
.wg-stay-hint { color: #8a7176; font-size: 12.5px; }
/* ---- e_sign card (schema v0.12) ---- */
/* A form the org hosts, handed over from the chat (FP-T2). The reference sits UNDER the button
   rather than beside it: it is the fallback, and putting the two side by side made the tap target
   the smaller of the two on a phone. */
.wg-xform { margin-top: 10px; }
.wg-xform-go { display: block; height: 40px; line-height: 40px; border-radius: 11px; background: var(--brand);
  color: #fff; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none;
  box-shadow: 0 4px 12px rgba(191,53,80,.28); }
.wg-xform-go:hover { filter: brightness(1.05); }
.wg-xform-go[aria-disabled="true"] { background: #d6c1c5; box-shadow: none; cursor: default; }
.wg-xform-ref { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 10px;
  border: 1.5px dashed #e4d3d6; border-radius: 10px; background: #fffafa; flex-wrap: wrap; }
.wg-xform-refl { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #8a7176; width: 100%; }
/* Selectable, and it has to be: the copy button fails in a browser with no clipboard permission,
   and reading the reference aloud is a real recovery path. */
.wg-xform-ref code { flex: 1; font-family: var(--mono, monospace); font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; color: #231417; user-select: all; word-break: break-all; }
.wg-xform-copy { padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--blush); background: #fff;
  color: var(--brand-700); font-family: var(--font); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.wg-xform-copy:hover { background: #fbeef1; border-color: var(--brand); }
.wg-xform-note { margin-top: 7px; font-size: 11.5px; line-height: 1.4; color: #8a7176; }

.wg-sign-doc { font-weight: 600; margin-bottom: 6px; }
/* The document an e_sign step is about, when one has been rendered for the case. */
.wg-sign-file { display: block; margin: 6px 0 8px; padding: 9px 11px; border: 1.5px solid var(--blush);
  border-radius: 10px; background: #fffafa; color: var(--brand-700); font-size: 12.5px; font-weight: 700;
  text-decoration: none; }
.wg-sign-file:hover { background: #fbeef1; border-color: var(--brand); }
.wg-sign { margin-top: 10px; }
.wg-sign-id { display: block; margin-bottom: 8px; }
.wg-sign-id span { display: block; font-size: 12px; color: #7a6a6d; margin-bottom: 4px; }
.wg-sign-id input { width: 100%; height: 36px; padding: 0 12px; border: 1.5px solid #efe2e4;
    border-radius: 9px; background: #fffafa; font: inherit; }
.wg-sign-id input:focus { border-color: var(--blush); background: #fff; }
/* A fixed height in CSS pixels, because the canvas is resized to the DEVICE pixel ratio in JS and
   a percentage height would give it nothing to measure on the first paint. */
.wg-sign-pad { display: block; width: 100%; height: 150px; border: 1.5px dashed #e4d3d6;
    border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.wg-sign-bar { display: flex; justify-content: flex-end; margin-top: 6px; }
.wg-sign-clear { border: 0; background: none; color: #9a8a8d; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.wg-sign-clear:hover:not(:disabled) { color: #6b5b5e; text-decoration: underline; }
.wg-sign-consent { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 10px; font-size: 13px; line-height: 1.45; }
.wg-sign-consent input { margin-top: 2px; flex: 0 0 auto; }
.wg-sign-submit { width: 100%; height: 38px; border: 0; border-radius: 10px; font: inherit; font-weight: 600;
    background: var(--blush); color: #fff; cursor: pointer; }
.wg-sign-submit:disabled { opacity: .45; cursor: not-allowed; }

.wg-inline-input { display: flex; gap: 7px; margin-top: 8px; }
.wg-inline-input input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1.5px solid #efe2e4;
  border-radius: 12px; background: #fffafb; font-size: 13.5px; color: #231417; outline: none; font-family: var(--font); }
.wg-inline-input input:focus { border-color: var(--blush); background: #fff; }

/* flow launcher */
.wg-flowlaunch { padding: 14px 14px 4px; }
.wg-flowlaunch-h { font-size: 11px; font-weight: 700; color: #8a7176; text-transform: uppercase;
  letter-spacing: .08em; margin: 0 0 8px 2px; }
.wg-flowlaunch-h + .wg-list { margin-bottom: 14px; }
.wg-flowlaunch-item { cursor: pointer; text-align: left; width: 100%; font-family: var(--font); }
.wg-flowlaunch-item:hover:not(:disabled) { border-color: var(--blush); }
.wg-flowlaunch-item:disabled { opacity: .6; cursor: default; }

/* services / payments / account */
.wg-list { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.wg-list-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid #efe2e4; border-radius: 13px; }
.wg-list-item .wg-li-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, #fbeef1, #f6dde2); color: var(--brand); flex-shrink: 0; }
.wg-list-item .wg-li-t { font-size: 13.5px; font-weight: 700; color: #231417; }
.wg-list-item .wg-li-s { font-size: 12px; color: #8a7176; margin-top: 1px; }
/* The third line: the facts under the name — a time, a reference, a role. Lighter than the
   subtitle, and one line only, because a card that wraps to four stops being scannable. */
.wg-list-item .wg-li-m { font-size: 11.5px; color: #a89195; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Cases this member's side can take — the page behind the header button, and the "see all" link
   on the strip that teases it. Rows rather than a run-on line: on a full page an empty field is
   worth saying ("When — not picked yet"), and a summary cannot say one. */
.wg-seeall { width: 100%; padding: 9px; border: 1px dashed #e7d3d7; border-radius: 12px;
  background: none; color: var(--brand); font-family: var(--font); font-size: 12.5px;
  font-weight: 700; cursor: pointer; }
.wg-seeall:hover { background: #fffafb; border-color: var(--brand); }

.wg-cases { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
/* The filter rows reuse the chat's pill row. It carries `flex: 1` for the chat's horizontal
   header, and in a COLUMN container that means grow VERTICALLY — the row stretched down the page.
   (Arfu, 17/09/2026) */
.wg-cases .wg-subchats { flex: 0 0 auto; }
/* Why the queue is short. Not an error — nothing has gone wrong — so it is a note, not a red
   banner: the member has something to finish and nobody else can finish it for them. */
.wg-case-blocked { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
  border: 1px dashed #e7d3d7; border-radius: 12px; background: #fffafb; }
.wg-case-blocked b { font-size: 12.5px; color: #231417; }
.wg-case-blocked span { font-size: 11.5px; color: #8a7176; line-height: 1.5; }
.wg-cases-h { font-size: 11px; font-weight: 700; color: #8a7176; text-transform: uppercase;
  letter-spacing: .06em; }
.wg-case { background: #fff; border: 1px solid #efe2e4; border-radius: 14px; padding: 14px; }
.wg-case.is-late { border-left: 3px solid var(--brand); }
.wg-case-top { display: flex; align-items: flex-start; gap: 10px; }
.wg-case-t { font-size: 14px; font-weight: 700; color: #231417; }
.wg-case-s { font-size: 12px; color: #8a7176; margin-top: 2px; }
.wg-case-due { margin-left: auto; flex-shrink: 0; padding: 2px 9px; border-radius: 999px;
  background: #f4ece9; color: #8a7176; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.wg-case-due.is-late { background: #fbeef1; color: var(--brand); }
.wg-case-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0;
  padding-top: 12px; border-top: 1px solid #f6ecee; }
.wg-case-k { font-size: 11.5px; color: #a89195; }
.wg-case-v { font-size: 12.5px; color: #231417; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; }
.wg-case-mono { font-family: var(--mono); font-weight: 700; }
.wg-case-go { width: 100%; padding: 10px; border: none; border-radius: 11px;
  background: var(--brand); color: #fff; font-family: var(--font); font-size: 13px;
  font-weight: 700; cursor: pointer; }
.wg-case-go:hover:not(:disabled) { filter: brightness(1.06); }
.wg-case-go:disabled { background: #f4ece9; color: #a89195; cursor: default; }
/* The member's own timetable. */
.wg-case-blocked.is-ok { border-style: solid; border-color: #d8ead9; background: #f6fbf7; }
.wg-tt-remove { background: none; border: none; color: #a89195; font-family: var(--font);
  font-size: 11.5px; cursor: pointer; margin-left: auto; padding: 0; }
.wg-tt-remove:hover { color: var(--brand); }
.wg-tt-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* The whole week in ONE card, with the Save that writes it. Each window is a block inside, so the
   button that saves them all sits under them rather than beside the page. (18/09/2026) */
/* The heading of a list, OUTSIDE the cards it heads — the cards are rows, and a row is the thing
   that gets saved. (18/09/2026) */
.wg-tt-head { padding: 4px 1px 0; }
.wg-tt-head + .wg-tt-none { margin-top: -4px; }
/* A row stacks up to four things — how often it repeats, which days, the times, and its own Save —
   so it owns the spacing between them rather than each child carrying a margin of its own. */
.wg-tt-row { display: flex; flex-direction: column; gap: 9px; }
.wg-tt-row .wg-case-grid { margin: 0; padding-top: 9px; }
/* Unsaved, and saying so: the card that changed is the card whose button is live. */
.wg-tt-row.is-dirty { border-color: #e7c9d0; }
.wg-tt-row .wg-case-go:disabled { background: #f4ecee; color: #a89195; cursor: default; }
.wg-tt-remove:disabled { opacity: .5; cursor: default; }
.wg-tt-none { font-size: 12px; color: #8a7176; padding: 2px 1px; }
/* 31 of them: a grid rather than a wrapped row, so the dates line up as a month does. */
.wg-tt-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.wg-tt-month .wg-subchat { padding: 6px 0; text-align: center; font-variant-numeric: tabular-nums; }
.wg-tt-row + .wg-tt-row { margin-top: -2px; }
/* Divided from the windows it saves — it is the card's footer, not another row. */
.wg-tt-save { margin-top: 4px; }
.wg-tt-input { width: 100%; border: 1px solid #e7d7da; border-radius: 9px; padding: 5px 8px;
  font-family: var(--font); font-size: 12.5px; color: #231417; background: #fff; }

/* A case that is already yours: a line, not a button. There is nothing left to press. */
.wg-case-state { padding: 9px; border-radius: 11px; background: #f7f0f2; color: #8a7176;
  font-size: 12.5px; font-weight: 600; text-align: center; }

/* account */
.wg-account { padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.wg-account-hd { text-align: center; padding: 8px 0 16px; border-bottom: 1px solid #efe2e4; }
.wg-account-ava { width: 80px; height: 80px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 26px; margin: 0 auto 12px; box-shadow: 0 8px 22px rgba(191,53,80,.28); }
.wg-account-name { font-size: 17px; font-weight: 700; color: #231417; }
.wg-account-email { font-size: 12.5px; color: #8a7176; margin-top: 2px; font-family: var(--mono); }

.wg-empty { padding: 60px 24px; text-align: center; color: #8a7176; }
.wg-empty-ic { display: inline-flex; width: 56px; height: 56px; border-radius: 16px; background: #fbeef1; color: var(--brand); align-items: center; justify-content: center; margin-bottom: 12px; }
.wg-empty-t { font-size: 14px; font-weight: 700; color: #231417; }
.wg-empty-s { font-size: 12.5px; margin-top: 4px; }

/* service detail */
.wg-detail { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fffafb; z-index: 5; animation: wgPhoneIn .22s cubic-bezier(.16,.84,.44,1) both; }
.wg-detail-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border-bottom: 1px solid #efe2e4; flex-shrink: 0; }
.wg-detail-back { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #fbeef1; color: var(--brand); border: none; cursor: pointer; transition: background .12s; }
.wg-detail-back:hover { background: #f6dde2; }
.wg-detail-back svg { transform: rotate(90deg); }
.wg-detail-top-t { font-size: 14px; font-weight: 700; color: #231417; }
.wg-detail-scroll { flex: 1; overflow-y: auto; }
.wg-detail-hero { display: flex; gap: 14px; padding: 20px 16px; background: linear-gradient(150deg, #fbeef1, #fff 60%); border-bottom: 1px solid #efe2e4; }
.wg-detail-hero-ic { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(135deg, var(--brand), var(--brand-700)); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 10px 24px rgba(191,53,80,.3); }
.wg-detail-hero-meta { flex: 1; min-width: 0; }
.wg-detail-org { font-size: 11px; color: #8a7176; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wg-detail-name { font-size: 19px; font-weight: 800; color: #231417; margin: 5px 0 10px; line-height: 1.25; letter-spacing: -.01em; }
.wg-detail-price { font-size: 22px; font-weight: 800; color: var(--brand); font-family: var(--mono); letter-spacing: -.01em; }
.wg-detail-price span { font-size: 11px; color: #a4858a; font-family: var(--font); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.wg-detail-bd { padding: 18px 16px 24px; }
.wg-detail-stats { display: flex; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #efe2e4; }
.wg-detail-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b585d; font-weight: 600; }
.wg-detail-stat svg { color: var(--brand); }
.wg-detail-desc { margin: 14px 0 4px; font-size: 13.5px; color: #534045; line-height: 1.6; }
.wg-detail-section { margin-top: 20px; }
.wg-detail-h { font-size: 11px; font-weight: 700; color: #8a7176; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.wg-detail-incl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wg-detail-incl li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #231417; line-height: 1.45; }
.wg-detail-incl-ic { width: 20px; height: 20px; border-radius: 50%; background: #e8f6ed; color: #1f8a5b; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.wg-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.wg-slot { padding: 12px 12px; border-radius: 12px; background: #fff; border: 1.5px solid #efe2e4; color: #231417; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .12s, background .12s, color .12s; font-family: var(--font); line-height: 1.3; }
.wg-slot:hover { border-color: var(--blush); }
.wg-slot.on { border-color: var(--brand); background: #fbeef1; color: var(--brand-800); box-shadow: 0 4px 12px rgba(191,53,80,.15); }
.wg-detail-foot { flex-shrink: 0; padding: 12px 14px; background: #fff; border-top: 1px solid #efe2e4; }
.wg-book { width: 100%; height: 50px; border-radius: 14px; background: var(--brand); color: #fff; font-size: 14.5px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(191,53,80,.3); transition: transform .12s, background .12s, box-shadow .12s; font-family: var(--font); letter-spacing: .005em; }
.wg-book:hover:not(:disabled) { background: var(--brand-700); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(191,53,80,.36); }
.wg-book:disabled { background: #d6c1c5; box-shadow: none; cursor: not-allowed; }

/* vendor filter (bookings + services) */
.wg-orgfilter { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; }
.wg-orgchip { padding: 6px 12px; border-radius: 999px; white-space: nowrap; border: 1.5px solid #efe2e4;
  background: #fff; color: #231417; font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s; }
.wg-orgchip:hover { border-color: var(--blush); }
.wg-orgchip.on { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(191,53,80,.22); }

/* search — chats and services */
.wg-search { position: relative; display: flex; align-items: center; margin: 2px 2px 8px; }
.wg-search svg { position: absolute; left: 11px; color: #b39ba0; pointer-events: none; }
.wg-search input { width: 100%; height: 38px; padding: 0 34px; border: 1.5px solid #efe2e4; border-radius: 999px;
  background: #fff; color: #231417; font-family: var(--font); font-size: 13px; outline: none;
  transition: border-color .12s, box-shadow .12s; }
.wg-search input::placeholder { color: #b39ba0; }
.wg-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(191,53,80,.12); }
.wg-search-clear { position: absolute; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: #8a7176; cursor: pointer; display: grid; place-items: center; }
.wg-search-clear:hover { background: #fbeef1; color: var(--brand); }

/* first-login welcome */
.wg-welcome { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(40,16,21,.42); animation: wgWelcomeIn .2s ease both; }
@keyframes wgWelcomeIn { from { opacity: 0; } to { opacity: 1; } }
.wg-welcome-card { width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; background: #fffafb;
  border-radius: 22px; padding: 22px 20px 14px; box-shadow: 0 24px 60px rgba(40,16,21,.3);
  animation: wgPhoneIn .26s cubic-bezier(.16,.84,.44,1) both; }
.wg-welcome-logo { display: block; width: 52px; height: 52px; object-fit: contain; margin-bottom: 14px; }
.wg-welcome-ava { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff;
  font-weight: 800; font-size: 18px; margin-bottom: 14px; }
.wg-welcome-eyebrow { font-size: 11px; font-weight: 700; color: #8a7176; text-transform: uppercase; letter-spacing: .08em; }
.wg-welcome-t { font-size: 20px; font-weight: 800; color: #231417; letter-spacing: -.01em; line-height: 1.25; margin: 6px 0 8px; }
.wg-welcome-s { font-size: 13.5px; color: #6b585d; line-height: 1.55; }
/* An unbuilt feature, labelled instead of pretending to work. */
.wg-chip-soon { padding: 2px 8px; border-radius: 999px; background: #f3eaeb; color: #8a7176;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Secondary, low-emphasis action: offered, never pushed. */
.wg-roleleave { width: 100%; height: 40px; border-radius: 11px; background: none;
  border: 1.5px solid #efe2e4; color: #8a7176; font-family: var(--font); font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s; }
.wg-roleleave:hover { border-color: var(--blush); color: #231417; }

/* Choosing how you take part when a service can be joined on either side. */
.wg-roleopts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; text-align: left; }
.wg-roleopt { display: block; width: 100%; padding: 11px 13px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1.5px solid #efe2e4; font-family: var(--font);
  transition: border-color .12s, background .12s; }
.wg-roleopt:hover:not(:disabled) { border-color: var(--blush); }
.wg-roleopt.on { border-color: var(--brand); background: #fbeef1; }
.wg-roleopt:disabled { opacity: .55; cursor: not-allowed; }
.wg-roleopt-n { display: block; font-size: 13.5px; font-weight: 700; color: #231417; }
.wg-roleopt-s { display: block; font-size: 11.5px; color: #8a7176; margin-top: 2px; }
.wg-roleopt-r { display: block; font-size: 11px; color: #b07a14; margin-top: 4px; line-height: 1.4; }

/* Section headings inside a list. Your vendors and publicly-listed strangers are different
   things and must not read as one list. */
.wg-sec-h { font-size: 11px; font-weight: 700; color: #8a7176; text-transform: uppercase;
  letter-spacing: .08em; padding: 2px 4px 8px; }
.wg-sec-s { font-size: 12.5px; color: #8a7176; line-height: 1.5; padding: 0 4px 10px; margin-top: -4px; }

/* Identity, on every tab. The panel used to answer "who am I signed in as" only on the Account
   screen, which meant every other screen was anonymous. */
.wg-h-me { display: flex; align-items: center; gap: 7px; margin-left: 2px; padding: 3px 9px 3px 3px;
  border-radius: 999px; border: 1px solid #f1dde1; background: #fff; cursor: pointer;
  font-family: var(--font); transition: border-color .12s, background .12s; }
.wg-h-me:hover { border-color: var(--blush); background: #fffafb; }
.wg-h-me-ava { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: grid;
  place-items: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
.wg-h-me-name { font-size: 12px; font-weight: 700; color: #231417; max-width: 84px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The role you hold on a service, shown on its list row — the detail screen says it, so the
   list has to as well or the two disagree about what you are. */
.wg-chip-role { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: #e8f6ed; color: #1f6f4c; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  vertical-align: 1px; }

/* Read-only confirmation that you are on a service, and the role blurb inside the join dialog.
   The tab picker this replaced is gone: a service names exactly ONE consumer role, so there was
   never anything to pick. */
.wg-roledesc { margin-top: 12px; font-size: 13px; color: #534045; line-height: 1.55; text-align: left; }
.wg-roledone { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 11px;
  background: #e8f6ed; color: #1f6f4c; font-size: 13px; font-weight: 600; }

/* A vendor winding a service down: no new bookings, but the roster keeps its access. */
.wg-chip-closed { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: #fdf2dc; color: #b07a14; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; vertical-align: 1px; }
.wg-notice { padding: 12px 14px; border-radius: 12px; background: #fdf2dc; border: 1px solid #f2dfb6;
  color: #7a5a12; font-size: 13px; line-height: 1.55; }
.wg-notice b { color: #5e4409; }

.wg-welcome-form { margin-top: 16px; text-align: left; }
.wg-welcome-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wg-welcome-svc { cursor: pointer; text-align: left; width: 100%; font-family: var(--font); transition: border-color .12s; }
.wg-welcome-svc:hover { border-color: var(--blush); }
.wg-welcome-more { font-size: 12px; color: #8a7176; padding-left: 2px; }
.wg-welcome-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.wg-welcome-dots { display: flex; gap: 5px; margin-right: auto; }
.wg-welcome-dot { width: 6px; height: 6px; border-radius: 50%; background: #e6d3d7; }
.wg-welcome-dot.on { background: var(--brand); }
.wg-welcome-skip { padding: 8px 10px; background: none; border: none; color: #8a7176; font-family: var(--font);
  font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wg-welcome-skip:hover { color: #231417; }
.wg-welcome-go { height: 42px; padding: 0 18px; border-radius: 13px; background: var(--brand); color: #fff; border: none;
  font-family: var(--font); font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(191,53,80,.28);
  transition: background .12s; }
.wg-welcome-go:hover:not(:disabled) { background: var(--brand-700); }
/* A refused role — restricted, or disabled by the org — leaves this button dead, and it looked
   exactly like a live one: full brand red, drop shadow, and nothing on click. Same treatment as
   .wg-roleopt:disabled above. (Arfu, 01/09/2026) */
.wg-welcome-go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ============================================================
   Warm cursor glow + click ripples (login)
   ============================================================ */
.wm-cursor-glow {
  position: fixed; left: 0; top: 0; width: 360px; height: 360px;
  margin: -180px 0 0 -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(234,174,183,.32), transparent 70%);
  pointer-events: none; z-index: 4; mix-blend-mode: multiply;
  will-change: transform; transition: opacity .25s;
}
.wm-ripples { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.wm-ripple {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 1.5px solid rgba(191,53,80,.5);
  transform: scale(.3); opacity: .8;
  animation: wmRipple .9s cubic-bezier(.2,.7,.3,1) forwards;
}
.wm-ripple.big {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-color: rgba(191,53,80,.7); animation-duration: 1.1s;
  box-shadow: 0 0 18px rgba(191,53,80,.18);
}
@keyframes wmRipple {
  0%   { transform: scale(.3); opacity: .85; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .wm-cursor-glow { display: none; }
  .wm-ripple { display: none; }
}

/* ============================================================
   Phone widget — design folder warm backdrop
   ink blobs · rising particles · cursor glow · ripples · shimmer
   (overrides the legacy wg-bg-layer / wg-fl decoration)
   ============================================================ */
.wg-bg {
  background: radial-gradient(rgba(191,53,80,.05) 1px, transparent 1px) 0 0 / 30px 30px;
}
.wg-inkdefs { position: absolute; }

.wg-drift { position: absolute; inset: 0; }
.wg-blob { position: absolute; border-radius: 50%; opacity: .6; will-change: transform; }
.wg-blob.ink1 { filter: blur(26px) url(#wgInk); }
.wg-blob.ink2 { filter: blur(26px) url(#wgInk2); }
@supports not (filter: url(#wgInk)){ .wg-blob { filter: blur(40px) !important; } }
// Safari/WebKit renders `filter: url(#svg)` on HTML elements invisible yet still reports it
// as @supports-ed, so WarmBg tags those engines with .no-ink → blur-only fallback.
.wg-bg.no-ink .wg-blob { filter: blur(40px) !important; }
.wg-blob.c1 { width: 440px; height: 440px; top: -6%;  background: radial-gradient(circle at 40% 40%, rgba(234,174,183,.8),  rgba(234,174,183,0) 70%); animation: wgWind 48s linear infinite; animation-delay: -4s; }
.wg-blob.c2 { width: 360px; height: 360px; top: 12%;  background: radial-gradient(circle at 45% 45%, rgba(191,53,80,.4),   rgba(191,53,80,0) 70%);   animation: wgWind 60s linear infinite; animation-delay: -34s; }
.wg-blob.c3 { width: 520px; height: 520px; top: 26%;  background: radial-gradient(circle at 50% 50%, rgba(247,201,209,.85), rgba(247,201,209,0) 70%); animation: wgWind 54s linear infinite; animation-delay: -20s; }
.wg-blob.c4 { width: 300px; height: 300px; top: 44%;  background: radial-gradient(circle at 50% 50%, rgba(255,209,177,.5),  rgba(255,209,177,0) 72%); animation: wgWind 44s linear infinite; animation-delay: -12s; }
.wg-blob.c5 { width: 400px; height: 400px; top: 54%;  background: radial-gradient(circle at 45% 45%, rgba(234,174,183,.6),  rgba(234,174,183,0) 70%); animation: wgWind 58s linear infinite; animation-delay: -40s; }
.wg-blob.c6 { width: 340px; height: 340px; top: 70%;  background: radial-gradient(circle at 50% 50%, rgba(247,201,209,.7),  rgba(247,201,209,0) 70%); animation: wgWind 50s linear infinite; animation-delay: -26s; }
.wg-blob.c7 { width: 460px; height: 460px; top: 80%;  background: radial-gradient(circle at 40% 40%, rgba(191,53,80,.34),  rgba(191,53,80,0) 70%);   animation: wgWind 64s linear infinite; animation-delay: -52s; }
@keyframes wgWind { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }

.wg-cursor-glow {
  position: absolute; left: 0; top: 0; width: 280px; height: 280px;
  margin: -140px 0 0 -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.5), rgba(234,174,183,.18) 42%, transparent 68%);
  pointer-events: none; mix-blend-mode: soft-light; will-change: transform;
}
.wg-ripples { position: absolute; inset: 0; pointer-events: none; }
.wg-ripple {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 1.5px solid rgba(191,53,80,.4);
  transform: scale(.3); opacity: .7; animation: wgRipple .9s ease-out forwards;
}
.wg-ripple.big {
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-width: 2px;
  border-color: rgba(191,53,80,.55); animation: wgRipple 1.1s ease-out forwards;
}
@keyframes wgRipple {
  0%   { transform: scale(.3); opacity: .7; }
  70%  { opacity: .28; }
  100% { transform: scale(5); opacity: 0; }
}

.wg-shimmer {
  position: absolute; top: -30%; left: -40%; width: 50%; height: 160%; pointer-events: none;
  background: linear-gradient(72deg, transparent, rgba(255,255,255,.4) 48%, rgba(255,255,255,.55) 52%, transparent);
  transform: rotate(8deg); filter: blur(20px); opacity: .3;
  animation: wgSweep 13s ease-in-out infinite;
}
@keyframes wgSweep { 0%{ left:-45%; opacity:0; } 35%{ opacity:.4; } 70%{ left:120%; opacity:0; } 100%{ left:120%; opacity:0; } }

.wg-particles { position: absolute; inset: 0; overflow: hidden; }
.wg-pt {
  position: absolute; bottom: -20px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, rgba(234,174,183,.85));
  box-shadow: 0 0 8px rgba(234,174,183,.6); opacity: 0; animation: wgRise linear infinite;
}
@keyframes wgRise {
  0%   { transform: translateY(0)     translateX(0)    scale(.6); opacity: 0; }
  10%  { opacity: .8; }
  50%  { transform: translateY(-46vh) translateX(18px) scale(1); }
  90%  { opacity: .7; }
  100% { transform: translateY(-94vh) translateX(-14px) scale(.5); opacity: 0; }
}
.wg-pt.p0  { left: 6%;  animation-duration: 17s;   animation-delay: 0s;   width: 6px;  height: 6px; }
.wg-pt.p1  { left: 14%; animation-duration: 21s;   animation-delay: 3s; }
.wg-pt.p2  { left: 22%; animation-duration: 15s;   animation-delay: 6s;   width: 5px;  height: 5px; }
.wg-pt.p3  { left: 30%; animation-duration: 23s;   animation-delay: 1.5s; width: 10px; height: 10px; }
.wg-pt.p4  { left: 38%; animation-duration: 19s;   animation-delay: 8s; }
.wg-pt.p5  { left: 45%; animation-duration: 25s;   animation-delay: 4s;   width: 5px;  height: 5px; }
.wg-pt.p6  { left: 54%; animation-duration: 16s;   animation-delay: 11s;  width: 7px;  height: 7px; }
.wg-pt.p7  { left: 62%; animation-duration: 22s;   animation-delay: 2s; }
.wg-pt.p8  { left: 70%; animation-duration: 18s;   animation-delay: 7s;   width: 9px;  height: 9px; }
.wg-pt.p9  { left: 78%; animation-duration: 24s;   animation-delay: 5s;   width: 5px;  height: 5px; }
.wg-pt.p10 { left: 85%; animation-duration: 20s;   animation-delay: 9.5s; }
.wg-pt.p11 { left: 92%; animation-duration: 15s;   animation-delay: 12s;  width: 6px;  height: 6px; }
@media (prefers-reduced-motion: reduce){
  // Reduced motion should drop MOTION, not the whole backdrop: freeze the blobs (their
  // staggered negative delays leave each paused at a different spot, so they stay spread)
  // but keep them visible. The genuinely-moving sparkles / shimmer / ripples are hidden.
  .wg-blob { animation-play-state: paused; }
  .wg-shimmer, .wg-pt, .wg-ripple { animation: none !important; opacity: 0; }
  .wg-cursor-glow { display: none; }
}

/* Toast.
   PrimeReact ships its own component CSS with pastel severity colours, and this project loads no
   PrimeReact theme to override them — so "Organization created." arrived as a pale green block on
   a panel that is nothing of the sort. Severity is carried by a left border and the icon, not by
   flooding the whole surface. */
.p-toast { opacity: 1; }
.p-toast .p-toast-message {
  background: #ffffff; border: 1px solid var(--line);
  border-left: 4px solid var(--muted); border-radius: 12px;
  box-shadow: var(--shadow-lg); color: var(--ink); margin: 0 0 12px;
}
.p-toast .p-toast-message .p-toast-message-content { padding: 14px 16px; gap: 12px; align-items: flex-start; }
.p-toast .p-toast-message .p-toast-summary { font-size: 14px; font-weight: 700; color: var(--ink); }
.p-toast .p-toast-message .p-toast-detail { font-size: 13px; margin-top: 3px; color: var(--ink-2); line-height: 1.45; }
.p-toast .p-toast-message .p-toast-message-icon { font-size: 17px; margin-top: 1px; }
.p-toast .p-toast-icon-close { color: var(--muted); width: 26px; height: 26px; border-radius: 7px; }
.p-toast .p-toast-icon-close:hover { background: var(--blush-bg); color: var(--ink); }

.p-toast .p-toast-message-success { border-left-color: var(--green); }
.p-toast .p-toast-message-success .p-toast-message-icon { color: var(--green); }
.p-toast .p-toast-message-info { border-left-color: var(--blue, var(--brand)); }
.p-toast .p-toast-message-info .p-toast-message-icon { color: var(--blue, var(--brand)); }
.p-toast .p-toast-message-warn { border-left-color: var(--amber); }
.p-toast .p-toast-message-warn .p-toast-message-icon { color: var(--amber); }
.p-toast .p-toast-message-error { border-left-color: var(--brand); }
.p-toast .p-toast-message-error .p-toast-message-icon { color: var(--brand); }

/* PrimeReact 10.9 renders a real <input class="p-*-input"> on top of every checkbox, radio and
   switch — an invisible, full-size overlay that carries the keyboard and screen-reader behaviour.
   Making it invisible is the THEME's job, and this panel imports no theme (primeicons only), so the
   native macOS control painted on top of the hand-styled box: a blue tick with a ghost box beneath
   it (found 20/08/2026).
   Note primereact.min.css does NOT fix this — it contains no .p-checkbox rules at all. The admin
   panel escapes it only because it imports saga-blue. These rules mirror what that theme does. */
.p-checkbox, .p-radiobutton, .p-inputswitch, .p-togglebutton {
  position: relative; display: inline-flex; user-select: none; vertical-align: bottom;
}
.p-checkbox-input, .p-radiobutton-input, .p-inputswitch-input, .p-togglebutton-input {
  appearance: none; -webkit-appearance: none;
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; opacity: 0; z-index: 1; outline: 0 none; cursor: pointer;
}

/* Kept for the components that still use the older wrapper (Dropdown's hidden select, etc.). */
.p-hidden-accessible {
  border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; white-space: nowrap;
}
.p-hidden-accessible input, .p-hidden-accessible select { transform: scale(0); }

/* The MultiSelect panel header holds the select-all checkbox and a close button; the close was
   unstyled and rendered as an oversized bare glyph. */
.p-multiselect-header { display: flex; align-items: center; gap: 10px; }
.p-multiselect-header .p-multiselect-close {
  margin-left: auto; width: 24px; height: 24px; border: 0; background: transparent;
  border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; color: var(--muted);
}
.p-multiselect-header .p-multiselect-close:hover { background: var(--surface-2); color: var(--ink); }

/* ---------------------------------------------------------------------------------------------
   PrimeReact form controls in the user panel.
   Only Toast was dressed here. Everything else rendered as raw unstyled HTML — which matters
   because shared/DetailForm.jsx puts a Dropdown, MultiSelect, Checkbox and three input types on
   the customer's Profile screen, and Explore uses a Dialog. Audited 20/08/2026 by comparing the
   components each panel imports against the classes its stylesheet defines.
   --------------------------------------------------------------------------------------------- */

.p-inputtext, .p-inputtextarea, .p-inputnumber-input {
  width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 13px; font: inherit; font-size: 14px;
  transition: border-color .14s, box-shadow .14s;
}
.p-inputtext:enabled:hover { border-color: var(--line-2); }
.p-inputtext:enabled:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring);
}
.p-inputtext::placeholder { color: var(--faint); }
.p-inputnumber { width: 100%; }

.p-dropdown, .p-multiselect {
  width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: border-color .14s, box-shadow .14s;
}
.p-dropdown:not(.p-disabled):hover, .p-multiselect:not(.p-disabled):hover { border-color: var(--line-2); }
.p-dropdown:not(.p-disabled).p-focus, .p-multiselect:not(.p-disabled).p-focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring);
}
.p-dropdown .p-dropdown-label, .p-multiselect .p-multiselect-label {
  color: var(--ink); padding: 10px 13px; font-size: 14px;
}
.p-dropdown .p-dropdown-label.p-placeholder, .p-multiselect .p-multiselect-label.p-placeholder { color: var(--faint); }
.p-dropdown .p-dropdown-trigger, .p-multiselect .p-multiselect-trigger { color: var(--muted); width: 36px; }

.p-dropdown-panel, .p-multiselect-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden;
}
.p-dropdown-items, .p-multiselect-items { padding: 4px; }
.p-dropdown-item, .p-multiselect-item {
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; color: var(--ink); cursor: pointer;
}
.p-dropdown-item:not(.p-highlight):hover, .p-multiselect-item:not(.p-highlight):hover { background: var(--surface-2); }
.p-dropdown-item.p-highlight, .p-multiselect-item.p-highlight { background: var(--brand); color: #fff; }

/* THE DATE PICKER'S PANEL. Unscoped, like the dropdown's above, and for a reason found the hard
   way on 17/09/2026: the only `.p-datepicker` rules in this file were scoped under `.wg-cal` and
   `.wg-stay` — the booking calendars — so a picker anywhere ELSE, which means every date field in
   a member's vendor answers, drew with NO BACKGROUND. The form showed straight through its month
   grid, which reads as a broken overlay rather than an unstyled one.

   It has to stay unscoped, because the panel is portalled to the body (see DetailForm) and is no
   longer inside whatever container the field sits in. */
.p-datepicker:not(.p-datepicker-inline) {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 10px; font-size: 13.5px; min-width: 280px;
}
.p-datepicker .p-datepicker-header {
  padding: 2px 0 8px; border: 0; background: none; display: flex; align-items: center; justify-content: space-between;
}
/* The month and year are two elements with no whitespace between them, so without this the header
   reads "January2026". */
.p-datepicker .p-datepicker-title { display: flex; gap: 6px; justify-content: center; align-items: center;
  font-weight: 700; font-size: 13.5px; color: var(--ink); }
.p-datepicker .p-datepicker-prev, .p-datepicker .p-datepicker-next {
  width: 30px; height: 30px; border-radius: 50%; color: var(--brand-700); flex-shrink: 0;
}
.p-datepicker .p-datepicker-prev:enabled:hover, .p-datepicker .p-datepicker-next:enabled:hover { background: var(--blush-bg); }
.p-datepicker table { width: 100%; border-collapse: collapse; }
.p-datepicker table th > span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.p-datepicker table td { padding: 1px; }
.p-datepicker table td > span {
  width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.p-datepicker table td > span:not(.p-disabled):not(.p-highlight):hover { background: var(--blush-bg); }
.p-datepicker table td > span.p-highlight { background: var(--brand); color: #fff; font-weight: 700; }
.p-datepicker table td.p-datepicker-other-month > span { color: var(--faint); opacity: .45; }
.p-datepicker .p-datepicker-today > span:not(.p-highlight) { box-shadow: inset 0 0 0 1px var(--blush); }
/* Today / Clear. Buttons, not two words lying on the page. */
.p-datepicker .p-datepicker-buttonbar {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 0 0; margin-top: 6px; border-top: 1px solid var(--line);
}
.p-datepicker .p-datepicker-buttonbar .p-button {
  background: none; border: none; color: var(--brand-700); font-size: 12.5px; font-weight: 700;
  padding: 5px 9px; border-radius: 8px; cursor: pointer;
}
.p-datepicker .p-datepicker-buttonbar .p-button:hover { background: var(--blush-bg); }
.p-datepicker .p-timepicker { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Chips, when a MultiSelect uses display="chip". */
.p-multiselect .p-multiselect-label { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.p-multiselect-token {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blush-bg); color: var(--brand-700);
  border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
.p-multiselect-token .p-multiselect-token-icon { cursor: pointer; font-size: 11px; opacity: .65; }
.p-multiselect-token .p-multiselect-token-icon:hover { opacity: 1; }

.p-checkbox .p-checkbox-box {
  background: var(--surface); border: 1.5px solid var(--line-2);
  border-radius: 5px; width: 18px; height: 18px; transition: background .14s, border-color .14s;
}
.p-checkbox:not(.p-disabled):not(.p-highlight) .p-checkbox-box:hover { border-color: var(--brand); }
.p-checkbox .p-checkbox-box.p-highlight { background: var(--brand); border-color: var(--brand); }
.p-checkbox .p-checkbox-box .p-checkbox-icon { color: #fff; font-size: 12px; font-weight: 700; }

.p-dialog {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden;
}
.p-dialog .p-dialog-header {
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  padding: 16px 20px; font-weight: 700; color: var(--ink);
}
.p-dialog .p-dialog-content { background: var(--surface); padding: 20px; color: var(--ink); }
.p-dialog-mask { background: rgba(35,20,23,.42); }

.p-message {
  border-radius: var(--radius-sm); padding: 10px 13px; font-size: 13px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
}
.p-message.p-message-error { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.p-message.p-message-success { background: var(--green-bg); border-color: var(--green); color: var(--green); }

.p-tag {
  background: var(--blush-bg); color: var(--brand-700);
  border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
.p-tag.p-tag-success { background: var(--green-bg); color: var(--green); }
.p-tag.p-tag-warning { background: var(--amber-bg); color: var(--amber); }
.p-tag.p-tag-danger  { background: var(--red-bg);   color: var(--red); }

/* PrimeReact renders <Message> (singular) as .p-inline-message, NOT .p-message — without these
   it draws as bare text with a stray glyph. */
.p-inline-message {
  display: inline-flex; align-items: flex-start; gap: 8px; width: 100%;
  border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  border: 1px solid; margin: 0;
}
.p-inline-message.p-inline-message-error   { background: #fdecee; border-color: rgba(197,56,75,.22); color: #b3253c; }
.p-inline-message.p-inline-message-info    { background: #eef4fd; border-color: #cfe0f8; color: #1b4f9c; }
.p-inline-message.p-inline-message-success { background: #e8f6ed; border-color: rgba(47,158,111,.3); color: #1f6f4c; }
.p-inline-message.p-inline-message-warn    { background: #fdf6e6; border-color: rgba(201,138,20,.3); color: #7a5a12; }
.p-inline-message .p-inline-message-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.p-inline-message .p-inline-message-text { flex: 1; }

/* payment request inside a chat bubble (flow-schema v0.4, 01/09/2026).
   A flow asking for money has to say three things at once — how much, where to send it, and how
   to prove it was sent — so it is a small card rather than a line of text. */
.wg-pay { margin-top: 8px; }
.wg-pay-amt { font-family: var(--mono); font-size: 20px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.wg-pay-note { font-size: 12px; color: #8a7176; margin-top: 2px; }
.wg-pay-to { margin: 10px 0 8px; padding: 10px 12px; background: #fbf3f4; border: 1px solid #f0dfe2;
  border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.wg-pay-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.wg-pay-k { color: #8a7176; flex: 0 0 auto; }
.wg-pay-v { font-family: var(--mono); color: #231417; text-align: right; overflow-wrap: anywhere; }
.wg-pay-hint { font-size: 11.5px; color: #8a7176; line-height: 1.45; margin-top: 6px; }
/* An org publishes several ways to be paid (02/09/2026), so each block names which one it is —
   otherwise two account numbers in a row read as one arrangement typed out twice. */
.wg-pay-method { font-size: 11px; font-weight: 700; color: var(--brand-700, #8f2a3d); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 2px; }
/* Sized to be scanned off the screen rather than to look tidy: a phone camera reading a QR from
   another phone needs the code big, and square so it is never squashed out of readability. */
.wg-pay-qr { display: block; width: 100%; max-width: 190px; aspect-ratio: 1; object-fit: contain;
  margin: 8px auto 2px; padding: 6px; background: #fff; border: 1px solid #f0dfe2; border-radius: 10px; }
/* Pick a way to pay, THEN see it. Showing every method's details at once was a wall of account
   numbers, nearly all of them for ways this customer is not paying. */
.wg-pay-choose { font-size: 12.5px; color: #6b585d; margin: 10px 0 6px; }
.wg-pay-picks { display: flex; flex-direction: column; gap: 6px; }
.wg-pay-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  padding: 9px 12px; border-radius: 12px; border: 1.5px solid #f0dfe2; background: #fff;
  font-family: var(--font); cursor: pointer; text-align: left; transition: border-color .12s, background .12s; }
.wg-pay-pick:hover:not(:disabled) { border-color: var(--brand); background: #fdf7f8; }
.wg-pay-pick:disabled { opacity: .6; cursor: default; }
.wg-pay-pick-n { font-size: 13px; font-weight: 700; color: #231417; }
.wg-pay-pick-s { font-size: 11.5px; color: #8a7176; font-family: var(--mono); overflow-wrap: anywhere; }
.wg-pay-back { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none;
  font-family: var(--font); font-size: 11.5px; font-weight: 700; color: var(--brand); cursor: pointer; }
.wg-pay-back:hover:not(:disabled) { text-decoration: underline; }


/* ------------------------------------------------------------------ my schedule
   The member's own meetings on a month grid (02/09/2026). Their Bookings tab answers "what have I
   booked"; this answers "what am I doing on Thursday". */
/* The head and the month control stay PUT; only the grid and the day list scroll. Letting the whole
   thing scroll left the reader looking at a bare grid with no month on it. (02/09/2026) */
.wg-sched { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.wg-sched-body { flex: 1; min-height: 0; overflow-y: auto; }
.wg-sched-s { font-size: 12.5px; color: #8a7176; font-weight: 600; padding: 14px 16px 0; }

.wg-sched-nav { display: flex; align-items: center; gap: 8px; padding: 8px 16px 10px; flex-wrap: wrap; }
.wg-sched-step { width: 30px; height: 30px; border-radius: 10px; border: 1px solid #efe2e4; background: #fff;
  cursor: pointer; font-size: 17px; color: #8a7176; line-height: 1; flex-shrink: 0; }
.wg-sched-month { font-size: 13.5px; font-weight: 700; color: #231417; white-space: nowrap; }

/* Week / Month / Today. Small and quiet: the grid below is the thing to look at. */
.wg-sched-views { display: flex; gap: 6px; margin-left: auto; }
.wg-sched-view { height: 27px; padding: 0 11px; border-radius: 999px; border: 1px solid #efe2e4;
  background: #fff; color: #8a7176; font-family: var(--font); font-size: 11.5px; font-weight: 700;
  cursor: pointer; }
.wg-sched-view.on { background: var(--brand); border-color: var(--brand); color: #fff; }


.wg-sched-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 0 12px 10px;
    max-width: 460px; margin: 0 auto; width: 100%; }
// One row of days, so it reads as a strip rather than a row of tiles.
.wg-sched-grid.week .wg-sched-day { aspect-ratio: auto; height: 46px; }
.wg-sched-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: #a4858a;
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: 4px; }
.wg-sched-day { position: relative; aspect-ratio: 1; max-height: 56px; border: none; background: transparent; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--font); font-size: 13px; color: #231417; cursor: pointer; padding: 0; }
.wg-sched-day.out { color: #cbb6ba; }
// The SOLID cell is today, and never anything else. It was the other way round until 03/09/2026 —
// selection filled, today a pale ring — so paging to a week today is not in left one cell burning
// brand-red on screen with nothing to say it was a selection, and the calendar read as claiming
// the wrong date. Selection is an outline now: quieter than today, and unmistakably not it.
.wg-sched-day.today { background: var(--brand); color: #fff; font-weight: 800; }
.wg-sched-day.on { font-weight: 800; box-shadow: inset 0 0 0 2px var(--brand); }
.wg-sched-day.on.today { box-shadow: inset 0 0 0 2px #fff; }
.wg-sched-dots { display: flex; gap: 2px; height: 4px; }
.wg-sched-dots i { width: 4px; height: 4px; border-radius: 50%; display: block; }
.wg-sched-day.today .wg-sched-dots i { background: #fff !important; }

.wg-sched-list { padding: 4px 14px 20px; max-width: 520px; margin: 0 auto; }
.wg-sched-lh { font-size: 11px; font-weight: 700; color: #8a7176; text-transform: uppercase;
  letter-spacing: .06em; margin: 8px 2px 8px; }
.wg-sched-none { font-size: 13px; color: #a4858a; padding: 6px 2px 2px; }
.wg-sched-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: #fff; border: 1px solid #efe2e4; border-radius: 14px; padding: 11px 12px; margin-bottom: 8px;
  cursor: pointer; font-family: var(--font); }
.wg-sched-bar { width: 3px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.wg-sched-svc { font-size: 13.5px; font-weight: 700; color: #231417; }
.wg-sched-meta { font-size: 11.5px; color: #8a7176; margin-top: 2px; }
.wg-sched-status { font-size: 11px; font-weight: 700; flex-shrink: 0; }


/* Files on an evidence step (03/09/2026). "Send proof" that only took typed text was not asking for
   proof — a photo of a meter or a scanned form is what people actually have. */
.wg-ev-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.wg-ev-file { display: inline-flex; align-items: center; gap: 6px; max-width: 220px;
  padding: 4px 8px; border-radius: 999px; background: #fbeef1; color: #8a3a4a;
  font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-ev-file button { border: none; background: none; color: inherit; cursor: pointer; font-size: 12px; padding: 0; line-height: 1; }
.wg-ev-clip { width: 32px; height: 32px; border-radius: 10px; border: none; background: none;
  display: grid; place-items: center; cursor: pointer; color: #8a7176; flex-shrink: 0; }
.wg-ev-clip:hover:not(:disabled) { background: #fbeef1; color: var(--brand); }
.wg-ev-sent { display: block; margin-top: 6px; color: inherit; text-decoration: underline; font-size: 12.5px; }
.wg-ev-sent img { display: block; max-width: 200px; border-radius: 10px; }