/* ============================================================
   THE PAWS OS — Constellation design system
   Single source of truth. The palette is a THEME LAYER:
   The Paws (Tenant Zero) ships pink/brown as the default set;
   a tenant swaps :root tokens to re-skin the whole system.
   ============================================================ */

:root{
  /* ============================================================
     TENANT THEME — the ONE swap point. Change this block and the
     whole system re-skins: screens, nodes, chips, ring, and the
     paw itself. The Paws (Tenant Zero) ships pink & brown.
     ============================================================ */

  /* semantic accents — the meaning of each color */
  --pink:#F0A7B8;   /* needs you / attention / brand */
  --gold:#E3B473;   /* money / in-progress */
  --sage:#8FBBA6;   /* good / ready / done / 100% */
  --brown:#6E4A40;  /* structure / stroke */

  /* the paw mark, tokenized so a palette swap re-skins the logo too */
  --paw-toe-a:#F9D6DB;  --paw-toe-b:#F0AEBD;   /* toe beans: highlight -> accent */
  --paw-pad-a:#F8D2D8;  --paw-pad-b:#EFA6B7;   /* muzzle pad */
  --paw-nose:#6E4A40;   --paw-stroke:#6E4A40;  /* nose + outline */

  /* the warm dark canvas */
  --bg:#070504;
  /* W76 · SUNK SURFACES. The call-pop card and the new-booking box both ask for
     linear-gradient(var(--sunk-1),var(--sunk-2)) and NEITHER VARIABLE HAS EVER
     EXISTED in this stylesheet. An invalid var() kills the whole background
     declaration, so both floated with no background at all — on the owner's
     light-themed tablet the reconcile screen showed straight through the
     incoming-call card and the text collided. It read as "distorted"; it was
     transparent. These must be OPAQUE: --card is a translucent tint meant to
     sit ON the page, which is wrong for anything that floats over it. */
  --sunk-1:#191211;
  --sunk-2:#0E0A09;
  --canvas-1:#1B1310;  --canvas-2:#120C0A;

  /* ============================================================
     SYSTEM — derived tone, type, spacing. Stable across tenants;
     override only for a fundamentally different canvas.
     ============================================================ */
  --ink:#F4E7DC;    /* primary text */
  --dim:#AC988D;    /* secondary text */
  --dim2:#6E574E;   /* tertiary / labels */
  --line:#2E211C;   /* hairlines */
  --card:color-mix(in srgb, var(--pink) 4.5%, transparent);
  --card-line:color-mix(in srgb, var(--brown) 50%, transparent);

  --fw:'Jost',system-ui,sans-serif;              /* wordmark */
  --fd:'Space Grotesk',system-ui,sans-serif;     /* display / numbers */
  --fu:'DM Sans',system-ui,sans-serif;           /* body */

  --r:16px;  /* default radius */

  /* ============================================================
     SPACE, TYPE, RADIUS — the half of the system that was missing.
     ============================================================
     Measured in app/index.html on 29 Aug 2026:

       var(--token) uses ......... 1,095
       hard-coded hex colours ....     9
       hard-coded px values ...... 2,420

     Colour was solved. Space and type never were: 29 distinct
     font-sizes across 401 declarations (10, 10.5, 11, 11.5, 12,
     12.5, 13, 13.5, 14, 14.5, 15, 16 …), 22 paddings, 13 gaps and
     15 radii against the single --r above.

     Nothing below changes a pixel on its own. It is the vocabulary
     the migration is written in — without it every fix is one more
     literal. See DESIGN-REVIEW-2026-08-29.md §3.

     TYPE — six steps, nothing between them. The half-pixel steps are
     gone deliberately: nobody can see 12.5 against 13, and the
     codebase was paying for that distinction 401 times.
     13px is the floor for anything carrying information. This app is
     read at arm's length, one-handed, holding a wet dog, next to a
     running dryer — eight of the old sizes were under 12px. Smaller
     than --t-sm means it is a LABEL, and labels earn their emphasis
     from weight and tracking, never from size. */
  --t-label:11px;   /* uppercase, tracked · "STAYING WITH US · 2" */
  --t-sm:13px;      /* the floor for anything you must actually read */
  --t-body:15px;    /* default running text */
  --t-lg:17px;      /* names, list rows, the thing you scan for */
  --t-title:22px;   /* section heads */
  --t-hero:34px;    /* "Afternoon, Delto." */

  /* SPACE — 4px base, seven steps. If a gap is not on this scale it
     is a mistake or it is deliberate and wants a comment. */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;
  --s5:24px; --s6:32px;  --s7:48px;

  /* RADIUS — three. --r stays the default so nothing existing moves. */
  --r-sm:10px;
  --r-pill:999px;

  /* ---- the surfaces and inks that used to be written as literals ----------
     Each of these was a hard-coded colour somewhere below that quietly assumed
     a near-black canvas. Named here, they become part of the swap point. */
  --on-accent:#160E0B;   /* text sitting ON a pink/gold/sage fill */
  --dot-core:var(--canvas-1);  /* the hole a node dot punches in the spine */
  --scroll:#3A2A24;  --scroll-hi:#523B33;
  --toast-bg:#241713;
  --grab:#3A2A24;
  --shadow:#000;     --frame:#2a201b;
  --pct-2:#CDE8DA;   --pct-2-gold:#F1D6A8;   /* second stop of the big % gradient */
  --glow-ink:rgba(244,231,220,.22);          /* the wordmark's halo */
  --glow-accent:rgba(240,167,184,.16);
}

/* ============================================================
   LIGHT — the same system in daylight.

   Not an inversion. The accents DARKEN: #F0A7B8 on white is 1.8:1, which is
   not a colour so much as a rumour. Same three hues, weighted for a bright
   canvas, and the text that sits on top of them flips to near-white.

   Applied as an attribute on <html> rather than a media query, because the
   choice is the person's and they can make it on the sign-in screen before
   anybody knows who they are.
   ============================================================ */
[data-theme="light"]{
  /* Hue held from the dark set (346°, 38°, 151°); lightness and saturation
     re-solved for a cream canvas. Each one clears 5:1 against the worst case
     it actually faces — its own badge tint, which is darker than bare canvas,
     not the canvas itself. The first pass at these was measured against the
     canvas and shipped a rose at 3.53:1, which is a fail dressed as a pass.

     Gold is the constrained one and it is worth knowing why: yellow at 38° has
     nowhere to go on a light ground. To clear 4.5 it has to become bronze.
     That is not a compromise so much as what gold IS in daylight — ledger ink,
     not a highlight pen. */
  --pink:#B72547;
  --gold:#83570A;
  --sage:#286B4B;
  --brown:#6E4A40;

  --paw-toe-a:#F0AEBE;  --paw-toe-b:#C4506D;
  --paw-pad-a:#EFA9B7;  --paw-pad-b:#BC4864;
  --paw-nose:#5A3A31;   --paw-stroke:#5A3A31;

  --bg:#F4ECE7;
  /* W76 · the same two surfaces in daylight — solid, warm, and a shade lighter
     than the page so the card still reads as lifted off it. */
  --sunk-1:#FFFFFF;
  --sunk-2:#F6EDE8;
  --canvas-1:#FFFCFA;  --canvas-2:#F3E8E2;

  --ink:#241713;
  --dim:#6B554C;
  --dim2:#8C766B;
  --line:#E7D9D0;
  --card:color-mix(in srgb, var(--pink) 6%, transparent);
  --card-line:color-mix(in srgb, var(--brown) 24%, transparent);

  --on-accent:#FFF9F6;
  --scroll:#D8C6BB;  --scroll-hi:#BFA697;
  --toast-bg:#FFFFFF;
  --grab:#DCCCC2;
  --shadow:rgba(110,74,64,.30);  --frame:#E2D2C8;
  --pct-2:#79B49B;   --pct-2-gold:#C4913C;
  --glow-ink:transparent;
  --glow-accent:rgba(183,37,71,.12);
}
/* The paw is drawn with an inline <svg> whose gradients read the tokens above,
   so it re-skins with everything else. Its glow does not: a drop-shadow that
   reads as luminous on black reads as a smudge on white, so it is dialled back
   rather than recoloured. */
[data-theme="light"] .brandmark .paw{
  filter:drop-shadow(0 1px 2px rgba(110,74,64,.30));
}
[data-theme="light"] .spine,[data-theme="light"] .thread{opacity:1}
[data-theme="light"] .node .halo,[data-theme="light"] .dog .halo{opacity:.30;filter:blur(7px)}
[data-theme="light"] .top .live .d{box-shadow:0 0 6px 0 var(--sage)}
[data-theme="light"] .top .live.warm .d{box-shadow:0 0 6px 0 var(--gold)}
[data-theme="light"] .sysgrp .gi{box-shadow:none}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);font-family:var(--fu);color:var(--ink);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:34px;justify-content:center;padding:34px 0}

/* ---- the phone frame + luminous canvas ---- */
.phone{position:relative;width:440px;border-radius:44px;padding:22px 0 26px;overflow:hidden;
  background:
    radial-gradient(120% 55% at 82% 6%, color-mix(in srgb, var(--pink) 13%, transparent), transparent 55%),
    radial-gradient(120% 50% at 10% 94%, color-mix(in srgb, var(--sage) 9%, transparent), transparent 58%),
    radial-gradient(90% 40% at 12% 10%, color-mix(in srgb, var(--brown) 30%, transparent), transparent 60%),
    linear-gradient(var(--canvas-1),var(--canvas-2));
  box-shadow:0 50px 110px -34px var(--shadow),0 0 0 10px var(--shadow),0 0 0 11px var(--frame)}
.phone.center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:720px}
.screen{position:relative;padding:0 26px;z-index:2}
.screen.pad-sm{padding:0 24px}

/* ---- paw sizes ---- */
.paw-xs{width:19px;height:19px}.paw-sm{width:22px;height:22px}.paw-lg{width:54px;height:54px}

/* ---- top status bar ---- */
.top{display:flex;align-items:center;justify-content:space-between;color:var(--dim);font-size:12.5px;font-weight:500;padding:2px 2px 0}
.top .brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-family:var(--fw);font-weight:400;letter-spacing:.06em}
.top .live{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--sage)}
.top .live.warm{color:var(--gold)}.top .live.warm .d{background:var(--gold);box-shadow:0 0 10px 1px var(--gold)}
.top .live .d{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 10px 1px var(--sage);animation:breathe 3.2s ease-in-out infinite}

/* ---- page header (with back) ---- */
.head{display:flex;align-items:center;gap:12px;margin:26px 0 2px}
.head .bk{width:34px;height:34px;flex-shrink:0;border-radius:50%;border:1px solid var(--card-line);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:17px}
.head h1{font-family:var(--fd);font-weight:600;font-size:25px;letter-spacing:-.01em}
.head .sub{font-size:12.5px;color:var(--dim2);margin-top:2px}
.head .rt{margin-left:auto;color:var(--dim);font-size:13px;font-weight:600}

/* ---- greeting block (home screens) ---- */
.hello{font-family:var(--fd);font-weight:500;font-size:30px;letter-spacing:-.01em;margin:30px 0 0}
.hello.b{font-weight:600;font-size:31px}
.read{font-size:17px;line-height:1.5;color:var(--dim);margin:12px 0 2px;max-width:33ch}
.read.lg{font-size:18px;line-height:1.45;max-width:30ch}
.read .k{color:var(--ink);font-weight:600}.read .pct{color:var(--sage);font-weight:600}
.read .kk{color:var(--sage);font-weight:600}

/* ---- section label ---- */
.lbl{font-family:var(--fd);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2);margin:2px 0 6px}
.lbl.mt{margin-top:22px}

/* ---- the glowing spine + breathing nodes ---- */
.flow{position:relative;margin:24px 0 6px;padding-left:34px}
.spine{position:absolute;left:9px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(var(--pink),var(--gold),var(--sage));opacity:.6;background-size:100% 220%;animation:flow 6s linear infinite}
.spine.short{bottom:64px}
.node{position:relative;display:flex;align-items:center;gap:14px;min-height:66px;padding:13px 2px;cursor:pointer}
.node::before{content:"";position:absolute;left:-30px;top:50%;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;background:var(--dot-core);border:2px solid var(--dot)}
.node .halo{position:absolute;left:-33px;top:50%;width:19px;height:19px;margin-top:-9.5px;border-radius:50%;background:var(--dot);filter:blur(6px);opacity:.55;animation:breathe 3.4s ease-in-out infinite}
.node.p{--dot:var(--pink)} .node.g{--dot:var(--gold)} .node.s{--dot:var(--sage)}
.node .mid{flex:1;min-width:0}
.node .ti{font-size:16.5px;font-weight:600;letter-spacing:-.005em}
.node .sb{font-size:13px;color:var(--dim);margin-top:3px}.node .sb b{color:var(--sage);font-weight:600}
.node .rt{display:flex;align-items:center;gap:10px;flex-shrink:0}
.node .val{font-family:var(--fd);font-size:16px;font-weight:600;color:var(--dot)}
.node .verb{font-size:13px;font-weight:600;color:var(--dot)}
.node .chev{color:var(--dim2);font-size:17px}
.gap{height:16px}

/* ---- big wet-glove dog rows (floor) ---- */
.dog{position:relative;display:flex;align-items:center;gap:14px;min-height:86px;padding:15px 2px}
.dog::before{content:"";position:absolute;left:-30px;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:var(--dot-core);border:2.5px solid var(--dot)}
.dog .halo{position:absolute;left:-34px;top:50%;width:23px;height:23px;margin-top:-11.5px;border-radius:50%;background:var(--dot);filter:blur(7px);opacity:.6;animation:breathe 3.4s ease-in-out infinite}
.dog.p{--dot:var(--pink)} .dog.g{--dot:var(--gold)} .dog.s{--dot:var(--sage)}
.dog .mid{flex:1;min-width:0}
.dog .nm{font-family:var(--fd);font-size:23px;font-weight:600;letter-spacing:-.01em;line-height:1.05}
.dog .st{font-size:14px;color:var(--dim);margin-top:4px}.dog .st b{color:var(--dot);font-weight:600}
.arr{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 2px}
.arr::before{content:"";position:absolute;left:-29px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--dot-core);border:2px solid var(--dim2)}
.arr .nm{font-family:var(--fd);font-size:18px;font-weight:500;color:var(--dim)}
.arr .st{font-size:13px;color:var(--dim2);margin-top:2px}
.arr .when{margin-left:auto;font-family:var(--fd);font-size:14px;font-weight:600;color:var(--dim);flex-shrink:0}

/* ---- buttons ---- */
.act{font-family:var(--fu);font-weight:700;font-size:15px;color:var(--on-accent);background:var(--dot,var(--sage));border:none;border-radius:15px;padding:0 18px;height:52px;min-width:112px;display:flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;cursor:pointer;box-shadow:0 10px 26px -12px var(--dot,var(--sage))}
.btn{font-family:var(--fu);font-weight:600;font-size:14.5px;border-radius:14px;height:50px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid transparent}
.btn.primary{color:var(--on-accent);background:var(--pink);box-shadow:0 10px 26px -12px var(--pink)}
.btn.sage{color:var(--on-accent);background:var(--sage);box-shadow:0 10px 26px -12px var(--sage)}
.btn.gold{color:var(--on-accent);background:var(--gold);box-shadow:0 10px 26px -12px var(--gold)}
.btn.ghost{color:var(--ink);background:transparent;border:1px solid var(--card-line)}
.btn.sm{height:40px;font-size:13px;padding:0 15px;border-radius:12px}
.btn.blk{width:100%}
.pillbtn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--card-line);color:var(--dim);background:transparent}

/* ---- chips / stat tiles ---- */
.steady{display:flex;gap:12px;margin:20px 0 2px}
.chip{flex:1;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);padding:13px 14px}
.chip.ctr{text-align:center}
.chip .v{font-family:var(--fd);font-size:20px;font-weight:600}
.chip .v.lg{font-size:24px}
.chip .l{font-size:10.5px;color:var(--dim2);margin-top:3px}
.chip.feat{background:linear-gradient(135deg,rgba(240,167,184,.16),rgba(227,180,115,.12));border-color:rgba(240,167,184,.3)}
.chip.sagey{background:rgba(143,187,166,.06);border-color:rgba(143,187,166,.18)}

/* ---- cards + list rows ---- */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:20px;padding:16px 16px;margin-top:12px}
.card .ct{font-family:var(--fd);font-size:15px;font-weight:600;margin-bottom:2px}
/* the card that wants a second look — a long shift, an auto-closed timecard, a
   number somebody should confirm before it becomes pay. Gold, never red: this
   is "check me", not "you broke something". Matches .note.warn on purpose so a
   warned card and its warned note read as one object. */
.card.warn{border-color:rgba(227,180,115,.3);background:linear-gradient(180deg,rgba(227,180,115,.07),rgba(227,180,115,.02))}
.row{display:flex;align-items:center;gap:13px;padding:14px 2px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
/* W69 · a safety net: an avatar used OUTSIDE a .row (cards on the deposits and
   no-show screens) used to inherit no size at all, which was invisible while it
   held a letter and enormous the moment it held a photo. */
.av{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-weight:600;font-size:15px;color:var(--ink);overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.row .av{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:600;font-size:15px;color:var(--ink);
  background:radial-gradient(circle at 34% 30%, rgba(240,167,184,.5), rgba(110,74,64,.5));border:1px solid var(--card-line)}
.row .av.s{background:radial-gradient(circle at 34% 30%, rgba(143,187,166,.5), rgba(110,74,64,.45))}
.row .av.g{background:radial-gradient(circle at 34% 30%, rgba(227,180,115,.5), rgba(110,74,64,.45))}
.row .mid{flex:1;min-width:0}
.row .ti{font-size:15.5px;font-weight:600;letter-spacing:-.005em}
.row .sb{font-size:12.5px;color:var(--dim);margin-top:2px}.row .sb b{color:var(--sage);font-weight:600}
.row .rt{margin-left:auto;text-align:right;flex-shrink:0}
.row .rt .v{font-family:var(--fd);font-size:15px;font-weight:600}
.row .rt .w{font-size:11.5px;color:var(--dim2);margin-top:2px}
.row .chev{color:var(--dim2);font-size:17px;margin-left:4px}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;letter-spacing:.02em;white-space:nowrap;flex-shrink:0}
.badge.p{color:var(--pink);background:rgba(240,167,184,.12)}
.badge.g{color:var(--gold);background:rgba(227,180,115,.14)}
.badge.s{color:var(--sage);background:rgba(143,187,166,.13)}
.badge.dim{color:var(--dim);background:rgba(172,152,141,.1)}

/* ---- key/value rows (records, money) ---- */
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--dim)}.kv .v{font-family:var(--fd);font-weight:600}
.kv .v.sage{color:var(--sage)}.kv .v.gold{color:var(--gold)}.kv .v.pink{color:var(--pink)}

/* ---- tab bar (in-screen) ---- */
.tabs{display:flex;gap:8px;margin:16px 0 4px}
.tab{font-size:13px;font-weight:600;color:var(--dim);padding:8px 14px;border-radius:999px;border:1px solid var(--card-line)}
.tab.on{color:var(--on-accent);background:var(--pink);border-color:transparent}

/* ---- checklist rows (closed today / closing) ---- */
.cr{display:flex;align-items:center;gap:11px;padding:11px 0;color:var(--dim);font-size:14.5px}
.cr .ck{width:19px;height:19px;flex-shrink:0;border-radius:50%;border:1.5px solid rgba(143,187,166,.55);display:flex;align-items:center;justify-content:center;color:var(--sage);font-size:11px}
.cr .ck.open{border-color:var(--dim2);color:transparent}
.cr .t{flex:1}.cr .w{color:var(--dim2);font-size:12px}

/* ---- the closing ring (100%) ---- */
.hero{position:relative;width:100%;height:288px;display:flex;align-items:center;justify-content:center;margin:8px 0 2px}
.ring{position:absolute;inset:0;margin:auto;animation:spin 46s linear infinite}
.center{position:relative;z-index:2;text-align:center}
.center .paw-lg{margin-bottom:6px;animation:breathe2 3.8s ease-in-out infinite}
.hero .center>.paw-lg:only-child{margin-bottom:0;display:block}
.center .pct{font-family:var(--fd);font-weight:600;font-size:42px;letter-spacing:-.01em;line-height:1;background:linear-gradient(120deg,var(--sage),var(--pct-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.center .pct.gold{background:linear-gradient(120deg,var(--gold),var(--pct-2-gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.center .cap{font-size:11px;color:var(--dim);margin-top:8px;letter-spacing:.06em}

/* ---- footer + Ness pill ---- */
.foot{font-size:12.5px;color:var(--dim2);text-align:center;margin-top:16px}
.ness{position:relative;margin-top:20px;display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:16px;
  background:linear-gradient(90deg,rgba(240,167,184,.15),rgba(143,187,166,.13));border:1px solid rgba(240,167,184,.30);color:var(--ink);font-weight:600;font-size:14.5px;cursor:pointer}
.ness.tall{height:58px;font-size:15.5px}

/* ---- bottom nav ---- */
.bnav{display:flex;justify-content:space-around;align-items:center;margin:22px -8px -8px;padding-top:14px;border-top:1px solid var(--line)}
.bnav .it{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:var(--dim2);font-weight:500}
.bnav .it.on{color:var(--pink)}
.bnav .it .ic{width:22px;height:22px;display:flex;align-items:center;justify-content:center}

/* ---- form fields (intake / settings / client-facing) ---- */
.field{margin-top:15px}
.field > label{display:block;font-size:11px;color:var(--dim2);font-weight:600;letter-spacing:.1em;margin-bottom:7px;text-transform:uppercase}
.input{width:100%;height:52px;border-radius:14px;border:1px solid var(--card-line);background:rgba(240,167,184,.04);color:var(--ink);font-family:var(--fu);font-size:15px;padding:0 15px}
.input::placeholder{color:var(--dim2)}
.input.filled{color:var(--ink)}
textarea.input{height:auto;padding:13px 15px;min-height:88px;resize:none;line-height:1.5}
.two{display:flex;gap:12px;flex-wrap:wrap}.two>*{flex:1 1 140px;min-width:0}
.check{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--dim);line-height:1.5;margin-top:14px}
.check .box{width:23px;height:23px;flex-shrink:0;border-radius:7px;border:1.5px solid var(--card-line);display:flex;align-items:center;justify-content:center;color:var(--sage);font-size:12px;margin-top:1px}
.check .box.on{background:rgba(143,187,166,.15);border-color:var(--sage)}
.upload{display:flex;align-items:center;gap:13px;padding:15px;border-radius:14px;border:1px dashed var(--card-line);margin-top:11px;font-size:14px;color:var(--dim)}
.upload .ic{width:38px;height:38px;flex-shrink:0;border-radius:11px;background:rgba(143,187,166,.1);display:flex;align-items:center;justify-content:center;color:var(--sage)}
.upload.done{border-style:solid;border-color:rgba(143,187,166,.4)}
.legal{font-size:12.5px;line-height:1.65;color:var(--dim);max-height:none}
.legal p{margin-bottom:10px}

/* ---- centered brand block (boot / client-facing / role picker) ---- */
.brandmark{display:flex;align-items:center;justify-content:center;gap:0;font-family:var(--fw);font-weight:300;letter-spacing:.05em;color:var(--ink);
  text-shadow:0 0 26px var(--glow-ink),0 0 60px var(--glow-accent)}
.brandmark.lg{font-size:38px}.brandmark.sm{font-size:24px}
.brandmark .paw{width:1.05em;height:1.05em;margin:0 1px;filter:drop-shadow(0 0 12px rgba(240,167,184,.8)) drop-shadow(0 0 30px rgba(240,167,184,.4))}
.tagline{margin-top:16px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim2);line-height:2.1;text-align:center}
.thread{margin:20px auto 0;width:150px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--pink),var(--gold),var(--sage),transparent);
  background-size:220% 100%;animation:flow2 5s linear infinite;opacity:.85}
@keyframes flow2{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* ---- source / disclaimer note (money, payroll, legal) ---- */
.note{font-size:12px;line-height:1.55;color:var(--dim);background:rgba(240,167,184,.04);border:1px solid var(--card-line);border-radius:12px;padding:11px 13px;margin-top:11px}
.note b{color:var(--ink);font-weight:600}
.note.warn{border-color:rgba(227,180,115,.3);background:rgba(227,180,115,.06)}

/* ---- period nav (pay period / week / day) ---- */
.pnav{display:flex;align-items:center;gap:12px;margin-top:15px}
.pnav .arw{width:32px;height:32px;flex-shrink:0;border-radius:50%;border:1px solid var(--card-line);color:var(--dim);display:flex;align-items:center;justify-content:center;font-size:16px}
.pnav .lab{flex:1;text-align:center}
.pnav .lab .p{font-family:var(--fd);font-weight:600;font-size:15px}
.pnav .lab .s{font-size:11px;color:var(--dim2);margin-top:1px}
.pnav .now{font-size:10.5px;font-weight:600;color:var(--sage);white-space:nowrap}

/* ---- big readout score (reconcile / health) ---- */
.rscore{display:flex;align-items:center;gap:16px;margin-top:14px;padding:16px 16px;border-radius:20px;background:var(--card);border:1px solid var(--card-line)}
.rscore .big{font-family:var(--fd);font-weight:600;font-size:40px;line-height:1;min-width:56px;text-align:center}
.rscore.clean .big{color:var(--sage)}.rscore.open .big{color:var(--gold)}
.rscore .m{flex:1}.rscore .h{font-family:var(--fd);font-weight:600;font-size:16px}.rscore .s{font-size:12.5px;color:var(--dim);margin-top:2px}

/* ---- grouped settings : one header, then rows that switch ----
   Both the system screen and the texting automations were drawing their own
   header. It is one component. The modifier says what kind of group this is
   and the dot takes its colour from that: pink for anything that reaches a
   client, gold for anything still held behind a gate, sage for what is already
   live, --dim for the plumbing nobody should have to think about. */
.sysgrp{display:flex;align-items:center;gap:13px;margin:22px 0 2px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--card-line)}
.sysgrp .gi{width:10px;height:10px;flex-shrink:0;border-radius:50%;box-shadow:0 0 10px 1px currentColor}
.sysgrp.safe .gi,.sysgrp.appt .gi{background:var(--pink);color:var(--pink)}
.sysgrp.gated .gi,.sysgrp.staged .gi,.sysgrp.reten .gi{background:var(--gold);color:var(--gold)}
.sysgrp.live .gi,.sysgrp.sched .gi{background:var(--sage);color:var(--sage)}
.sysgrp.infra .gi{background:var(--dim);color:var(--dim)}
.sysgrp .gm{flex:1;min-width:0}
.sysgrp .gn{font-family:var(--fd);font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.sysgrp .gs{font-size:11.5px;color:var(--dim2);margin-top:2px}
.sysgrp .cnt{font-family:var(--fd);font-size:13px;font-weight:600;color:var(--dim)}
.swrow{display:flex;align-items:center;gap:13px;padding:13px 4px;border-bottom:1px solid var(--line)}
.swrow:last-child{border-bottom:none}
.swrow .m{flex:1;min-width:0}
.swrow .n{font-size:15px;font-weight:600;letter-spacing:-.005em}
.swrow .d{font-size:12px;color:var(--dim2);margin-top:3px;line-height:1.4}
.sw{width:44px;height:26px;flex-shrink:0;margin-top:2px;border-radius:999px;background:rgba(172,152,141,.16);border:1px solid var(--card-line);position:relative;cursor:pointer}
.sw i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--dim2);transition:.2s}
.sw.on{background:rgba(143,187,166,.28);border-color:rgba(143,187,166,.55)}
.sw.on i{left:20px;background:var(--sage)}

/* ---- animations ---- */
@keyframes breathe{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:.9;transform:scale(1.15)}}
@keyframes breathe2{0%,100%{opacity:.8;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}}
@keyframes flow{0%{background-position:0 0}100%{background-position:0 -220%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.screen>*{animation:rise .5s ease both}

/* Motion here is decoration, never information. If the OS asks for less of it,
   every entrance, breath, drift and spin stops and the screen renders settled. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================================================
   W91 · THE COMMISSION STATEMENT AS A SPREADSHEET
   Owner, 4 Aug, with his own printed statement attached: "I don't really like
   how much the statement for Ashley and Katie looked. It's so busy. You have to
   do too much scrolling. It should be almost like a spreadsheet."
   He was right. Every dog was a card with three input boxes, two badges and two
   buttons — Katie's 18 dogs ran to roughly six screens. The same 18 rows fit in
   one here. Dense, tabular, and still editable in place.
   ========================================================================== */
.cs-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:14px}
.cs-band>div{background:var(--sunk-1);padding:9px 11px}
.cs-band .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)}
.cs-band .v{font-size:14px;font-weight:650;color:var(--ink);margin-top:3px}
@media(max-width:640px){.cs-band{grid-template-columns:1fr 1fr}}

.cs-wrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start;margin-top:14px}
@media(max-width:900px){.cs-wrap{grid-template-columns:minmax(0,1fr)}}

.cs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}
table.cs{width:100%;border-collapse:collapse;font-size:13px;
  font-variant-numeric:tabular-nums;min-width:560px}
table.cs th{position:sticky;top:0;z-index:2;background:var(--brown,#4a3b35);color:#fff;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:650;
  padding:8px 9px;text-align:left;white-space:nowrap}
table.cs th.n,table.cs td.n{text-align:right}
table.cs td{padding:0 4px;border-top:1px solid var(--line);height:34px;color:var(--ink)}
table.cs tbody tr:nth-child(even){background:var(--sunk-2)}
table.cs tbody tr:hover{background:rgba(212,175,55,.07)}
table.cs td.dt{white-space:nowrap;color:var(--dim);padding-left:9px}
table.cs .cell{width:100%;background:transparent;border:1px solid transparent;border-radius:6px;
  color:var(--ink);font:inherit;padding:5px 5px;min-width:0}
table.cs .cell:focus{background:var(--bg,#fff);border-color:var(--gold);outline:none}
table.cs .cell.n{text-align:right}
table.cs .cell::placeholder{color:var(--dim2)}
table.cs tfoot td{border-top:2px solid var(--line);font-weight:700;padding:9px;background:var(--sunk-1)}
.cs-x{color:var(--dim2);cursor:pointer;padding:0 7px;font-size:15px;line-height:1}
.cs-x:hover{color:var(--pink)}
.cs-src{font-size:10px;color:var(--dim2);letter-spacing:.04em}

/* W101 · the date control. Wide: the native input, exactly as before. Narrow:
   a short readable date with the real input laid over it, transparent. */
.cs-dt{position:relative;display:inline-block}
.cs-dt .cs-dt-txt{display:none}

.cs-sum{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cs-sum .hd{background:var(--brown,#4a3b35);color:#fff;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:650;padding:8px 11px}
.cs-sum .sub{background:var(--sunk-1);color:var(--dim);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 11px;border-top:1px solid var(--line)}
.cs-sum .ln{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:7px 11px;border-top:1px solid var(--line);font-size:13px}
.cs-sum .ln .k{color:var(--dim)}
.cs-sum .ln .v{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-sum .ln.big{background:rgba(212,175,55,.13)}
.cs-sum .ln.big .k{color:var(--ink);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.cs-sum .ln.big .v{font-size:19px;color:var(--ink)}
.cs-sum .ln.mut .k,.cs-sum .ln.mut .v{color:var(--dim2);font-style:italic;font-weight:500}
.cs-sum .ln.win .v{color:var(--sage)}
.cs-sum input.hrs{width:74px;text-align:right;background:transparent;border:1px solid var(--line);
  border-radius:6px;color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;padding:3px 6px}
.cs-sum input.hrs:focus{border-color:var(--gold);outline:none}

/* ============================================================================
   W101 · the statement on a phone
   ----------------------------------------------------------------------------
   Owner, 4 Aug: "i just saw the groomer commission statement and ashley, you
   can do better, its so small, i cant even see the dogs names, should be easy
   to navigation and edit."

   Measured at 390px before touching anything: the DOG NAME column was 39px —
   "Bentley" rendered as "Ber" — while the DATE column took 133px, the widest
   thing on screen, spending it on a year that never changes. The table ran
   170px past the edge, so the cash tip, Split, Source and BOTH row buttons were
   unreachable. It was never a font-size problem: the layout was spending its
   width on the least useful column and starving the one you navigate by.

   On a narrow screen each dog becomes two lines:

       Maximilian                        20 Jul   ◉ ×
       SERVICE 184.11   CARD TIP 21.75   CASH TIP 12.00

   Same table, same cells, same inputs, ONE renderer — only the grid changes, so
   the phone view cannot drift away from the printed one. The wide layout is
   untouched: it is the one he approved off his own printed sheet.
   ========================================================================== */
@media(max-width:720px){
  .cs-scroll{overflow-x:visible}

  /* line 417 pins min-width:560px so the WIDE table can scroll sideways rather
     than crush eight columns. On a phone that pin is what pushed half the row
     off the edge, and the <table> also has to stop sizing itself as a table. */
  table.cs{display:block;width:100%;min-width:0;font-size:15px}
  table.cs thead{display:none}
  table.cs tbody,table.cs tfoot{display:block;width:100%}

  table.cs tbody tr{
    display:grid;box-sizing:border-box;width:100%;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;
    grid-template-areas:"pet pet date act" "svc card cash act";
    gap:1px 7px;align-items:center;
    padding:7px 11px 8px;border-top:1px solid var(--line);
  }
  table.cs tbody tr:first-child{border-top:none}
  table.cs tbody td{display:block;height:auto;padding:0;border:none;min-width:0}

  table.cs td.c-pet {grid-area:pet}
  table.cs td.c-date{grid-area:date;text-align:right}
  /* the row buttons belong beside the dog's NAME, not floating next to the
     "cash tip" label where they read as part of the money */
  table.cs td.c-act {grid-area:act;width:auto!important;text-align:right;align-self:start}
  table.cs td.c-svc {grid-area:svc}
  table.cs td.c-card{grid-area:card}
  table.cs td.c-cash{grid-area:cash}
  /* the split is nearly always "—", and the source belongs on the dog's own
     ticket rather than in a column three screens to the right */
  table.cs td.c-split,table.cs td.c-src{display:none}

  /* the dog's name is what you navigate by, so it gets the room and the weight */
  table.cs td.c-pet,table.cs td.c-pet .cell{font-size:16.5px;font-weight:650}
  table.cs td.c-pet .cell{padding:3px 6px;height:auto;width:100%;min-width:0}

  /* every figure says what it is, because there is no header row any more */
  table.cs td.c-svc::before,table.cs td.c-card::before,
  table.cs td.c-cash::before,table.cs td.c-mine::before,
  table.cs td.c-who::before{
    content:attr(data-l);display:block;
    font-size:9px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--dim2);margin-bottom:0;line-height:1.35;
  }
  table.cs td.n::before{text-align:right}
  table.cs td.c-svc .cell{font-weight:650}
  table.cs td.n .cell{font-size:15px;padding:3px 6px;height:auto;width:100%;min-width:0}

  /* the date reads as "20 Jul"; the real input sits on top of it, invisible, so
     a tap still opens the system picker and editing is unchanged */
  table.cs td.c-date{overflow:hidden}
  table.cs td.c-date .cs-dt{display:block;width:100%}
  table.cs td.c-date .cs-dt-txt{display:block;font-size:13px;font-weight:600;
    color:var(--dim);text-align:right;padding:4px 2px;white-space:nowrap}
  table.cs td.c-date .cs-dt-in{position:absolute;inset:0;width:100%;height:100%;
    opacity:0;padding:0;margin:0;border:none;background:none}

  /* real tap targets, not 29px slivers */
  table.cs .cs-x{display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;font-size:17px}
  table.cs .cell{border-color:var(--line)}
  table.cs .cell:focus{border-color:var(--gold)}

  /* Ashley's sheet is the same shape with a groomer instead of a service, so it
     takes a third line rather than squeezing four figures onto one:
         Bentley                          07/28  ›
         GROOMER Katie
         CARD TIP 21.75  CASH TIP —  HER SHARE 4.35                          */
  table.cs tbody tr.cs-bath{
    grid-template-areas:"pet pet date act" "who who who act" "card cash mine act";
  }
  table.cs td.c-who {grid-area:who;font-size:13px;color:var(--dim)}
  table.cs td.c-mine{grid-area:mine;text-align:right}

  table.cs tfoot tr{display:grid;grid-template-columns:1fr auto auto auto;
    gap:4px 8px;padding:10px 11px;box-sizing:border-box;width:100%}
  table.cs tfoot td{border:none;padding:0;background:none;font-size:13px}
}

/* the floating Ask Ness pill and the search button sat ON TOP of the summary's
   Commission line. Give the statement room to end above them. */
.cs-wrap{padding-bottom:96px}