/* TS kit of parts — theme 2.63.0 (usability wave W3a). The look of TS.ui (assets/js/ts-kit.js) and the
   shared button. Contract: KIT-OF-PARTS-v1.md. Every token has a fallback, because this file also loads on
   wp-admin pages opened inside the app, where style.css's tokens are not present.
   The group colors (--ts-grp-*) and the "needs you" color are printed inline from TS_App_Groups, the one
   place they are defined. [CORE] */

:root{
  --ts-kit-radius:var(--ref-radius-md,12px);   /* buttons, inputs, cards: rounded corners, never ovals */
  --ts-kit-radius-sheet:var(--ref-radius-xl,20px);
  --ts-kit-tap:44px;                           /* MOBILE-UX-STANDARD-v1 §1 */
  --ts-kit-danger:#B91C1C;                     /* white on it is 6.5:1 */
  --ts-kit-danger-ink:#FFFFFF;
}

/* ---------------------------------------------------------------- button */
.ts-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ref-space-2,8px);
  min-height:var(--ts-kit-tap);padding:var(--ref-space-2,8px) var(--ref-space-4,16px);
  border-radius:var(--ts-kit-radius);border:1.5px solid transparent;
  font:inherit;font-size:var(--ref-font-sm,18px);font-weight:var(--sys-font-wt-sb,600);line-height:1.2;
  cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--ref-dur-fast,150ms),border-color var(--ref-dur-fast,150ms),transform 80ms}
.ts-btn:active{transform:scale(.98)}
.ts-btn:focus-visible{outline:3px solid var(--sys-brand,#2563EB);outline-offset:2px}
.ts-btn[disabled],.ts-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.ts-btn--primary{background:var(--sys-brand,#2563EB);color:var(--sys-text-brand,#FFFFFF)}
.ts-btn--primary:hover{background:var(--sys-brand-hover,#1D4ED8)}
.ts-btn--secondary{background:var(--sys-surface,#FFFFFF);color:var(--sys-text,#0F172A);border-color:var(--sys-border-strong,#CBD5E1)}
.ts-btn--secondary:hover{border-color:var(--sys-brand,#2563EB)}
.ts-btn--danger{background:var(--ts-kit-danger);color:var(--ts-kit-danger-ink)}
.ts-btn--quiet{background:transparent;color:var(--sys-brand,#2563EB);padding-left:var(--ref-space-3,12px);padding-right:var(--ref-space-3,12px)}
.ts-btn--quiet:hover{background:var(--sys-surface-subtle,rgba(0,0,0,.04))}
.ts-btn--block{display:flex;width:100%}
.ts-btn--sm{font-size:var(--ref-font-xs,16px);padding:var(--ref-space-1,4px) var(--ref-space-3,12px)}
@media (min-width:820px){ .ts-btn--sm{min-height:36px} } /* a mouse can be precise; a thumb cannot */
.ts-btn--secondary.ts-btn-busy::after,.ts-btn--quiet.ts-btn-busy::after{color:var(--sys-text,#0F172A)}
.ts-btn--danger.ts-btn-busy::after{color:var(--ts-kit-danger-ink)}
/* Busy, complete here too: on an app's full view (wp-admin) app.css is not loaded (review M3). Same look as
   app.css's .ts-btn-busy; under Reduce Motion app.css (and the rule below) make it breathe instead. */
.ts-btn.ts-btn-busy{position:relative;pointer-events:none;color:transparent!important}
.ts-btn.ts-btn-busy>*{visibility:hidden}
.ts-btn.ts-btn-busy::after{content:'';position:absolute;top:50%;left:50%;width:1.1em;height:1.1em;margin:-.55em 0 0 -.55em;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;visibility:visible;
  color:var(--sys-text-brand,#FFFFFF);animation:ts-kit-turn .7s linear infinite}
@keyframes ts-kit-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .ts-btn.ts-btn-busy::after{animation:ts-breathe 1.4s ease-in-out infinite;border-top-color:currentColor} }
.ts-btn-row{display:flex;flex-wrap:wrap;gap:var(--ref-space-2,8px);align-items:center}

/* ---------------------------------------------------------------- loading: three dots that breathe.
   Opacity only — no movement — so it is the same with Reduce Motion on and still says "working". */
.ts-loading{display:flex;align-items:center;justify-content:center;gap:var(--ref-space-3,12px);
  padding:var(--ref-space-6,24px) var(--ref-space-4,16px);color:var(--sys-text-sec,#475569);
  font-size:var(--ref-font-sm,18px)}
.ts-loading-dots{display:inline-flex;gap:6px}
.ts-loading-dots i{width:9px;height:9px;border-radius:50%;background:currentColor;display:block;
  animation:ts-breathe 1.2s ease-in-out infinite}
.ts-loading-dots i:nth-child(2){animation-delay:.2s}
.ts-loading-dots i:nth-child(3){animation-delay:.4s}
@keyframes ts-breathe{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------------------------------------------------------------- toast: complete here (app.css's .toast looks the same) */
.ts-toast{display:flex;align-items:center;justify-content:space-between;gap:var(--ref-space-2,8px);pointer-events:auto;
  background:var(--sys-surface-raised,#F8FAFC);color:var(--sys-text,#0F172A);border:1px solid var(--sys-border,#E2E8F0);
  border-radius:var(--ref-radius-md,12px);box-shadow:var(--sys-shadow-lg,0 12px 32px rgba(0,0,0,.12));
  padding:var(--ref-space-3,12px) var(--ref-space-4,16px);font-size:var(--ref-font-sm,18px);font-weight:var(--sys-font-wt-md,500);
  animation:ts-toast-in var(--ref-dur-norm,250ms) ease forwards}
.ts-toast.out{animation:ts-toast-out var(--ref-dur-norm,250ms) ease forwards}
@keyframes ts-toast-in{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}
@keyframes ts-toast-out{to{transform:translateY(-20px);opacity:0}}
@media (prefers-reduced-motion:reduce){ .ts-toast,.ts-toast.out{animation-name:none} .ts-toast.out{opacity:0} }
.ts-toast-text{flex:1 1 auto;min-width:0}
.ts-toast-action{flex:0 0 auto;min-height:var(--ts-kit-tap);padding:0 var(--ref-space-3,12px);margin:-8px -8px -8px 0;
  background:transparent;border:0;border-radius:var(--ref-radius-sm,8px);font:inherit;font-weight:var(--sys-font-wt-b,700);
  color:var(--sys-brand,#2563EB);cursor:pointer}
.ts-toast--error{border-left:4px solid var(--ts-kit-danger)}
.ts-toast--success{border-left:4px solid var(--sys-success,#10B981)}
#toast-container.ts-toast-host{position:fixed;left:50%;transform:translateX(-50%);z-index:300;
  top:calc(env(safe-area-inset-top,0px) + 16px);display:flex;flex-direction:column;gap:8px;
  width:calc(100% - 32px);max-width:400px;pointer-events:none}

/* ---------------------------------------------------------------- sheet: bottom on a phone, centered at 820+ */
html.ts-sheet-open,html.ts-sheet-open body{overflow:hidden}
html.ts-sheet-open #toast-container{z-index:1300} /* an Undo raised from a sheet must be reachable (review L7) */
.ts-sheet-root{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center}
.ts-sheet-backdrop{position:absolute;inset:0;background:var(--sys-overlay,rgba(0,0,0,.45));opacity:0;
  transition:opacity var(--ref-dur-norm,250ms)}
.ts-sheet{position:relative;display:flex;flex-direction:column;width:100%;max-height:min(88vh,88dvh);
  background:var(--sys-surface,#FFFFFF);color:var(--sys-text,#0F172A);
  border-radius:var(--ts-kit-radius-sheet) var(--ts-kit-radius-sheet) 0 0;box-shadow:var(--sys-shadow-xl,0 24px 48px rgba(0,0,0,.16));
  padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(100%);
  transition:transform var(--ref-dur-slow,350ms) var(--ref-ease-spring,cubic-bezier(.32,.72,0,1));outline:none}
.ts-sheet-root.is-open .ts-sheet-backdrop{opacity:1}
.ts-sheet-root.is-open .ts-sheet{transform:none}
.ts-sheet-root.is-closing .ts-sheet-backdrop{opacity:0}
.ts-sheet-root.is-closing .ts-sheet{transform:translateY(100%)}
.ts-sheet-head{position:relative;display:flex;align-items:center;gap:var(--ref-space-2,8px);
  padding:var(--ref-space-5,20px) var(--ref-space-4,16px) var(--ref-space-2,8px)}
.ts-sheet-grab{position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;
  background:var(--sys-border-strong,#CBD5E1)}
.ts-sheet-title{flex:1 1 auto;margin:0;font-size:var(--ref-font-md,22px);font-weight:var(--sys-font-wt-b,700);line-height:1.25}
.ts-sheet-x{flex:0 0 auto;width:var(--ts-kit-tap);height:var(--ts-kit-tap);margin:-6px -6px -6px auto;border:0;
  border-radius:var(--ref-radius-sm,8px);background:transparent;color:var(--sys-text-sec,#475569);
  font-size:28px;line-height:1;cursor:pointer}
.ts-sheet-x:hover{background:var(--sys-surface-subtle,rgba(0,0,0,.04))}
.ts-sheet-body{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:var(--ref-space-2,8px) var(--ref-space-4,16px) var(--ref-space-4,16px)}
.ts-sheet-foot{flex:0 0 auto;border-top:1px solid var(--sys-border,#E2E8F0);padding:var(--ref-space-2,8px) var(--ref-space-4,16px) var(--ref-space-3,12px)}
.ts-sheet-status{box-sizing:border-box;min-height:calc(1.4em + 2 * var(--ref-space-2,8px));line-height:1.4;padding:var(--ref-space-2,8px) 2px;font-size:var(--ref-font-xs,16px)}
.ts-sheet-status.is-error{color:var(--sys-tint-error-fg,#991B1B)} /* --sys-error is 3.8:1 on white: too faint for words */
.ts-sheet-actions{display:flex;flex-direction:column-reverse;gap:var(--ref-space-2,8px)}
.ts-sheet-actions .ts-btn{width:100%}
@media (min-width:820px){
  .ts-sheet-root{align-items:center;padding:var(--ref-space-6,24px)}
  .ts-sheet{max-width:560px;max-height:min(80vh,720px);border-radius:var(--ts-kit-radius-sheet);
    transform:translateY(12px) scale(.98);opacity:0;transition:transform var(--ref-dur-norm,250ms),opacity var(--ref-dur-norm,250ms)}
  .ts-sheet-root.is-open .ts-sheet{opacity:1}
  .ts-sheet-root.is-closing .ts-sheet{transform:translateY(12px) scale(.98);opacity:0}
  .ts-sheet-grab{display:none}
  .ts-sheet-head{padding-top:var(--ref-space-4,16px)}
  .ts-sheet-actions{flex-direction:row;justify-content:flex-end}
  .ts-sheet-actions .ts-btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  .ts-sheet,.ts-sheet-backdrop{transition:opacity 120ms!important}
  .ts-sheet,.ts-sheet-root.is-closing .ts-sheet{transform:none!important}
  .ts-sheet-root:not(.is-open) .ts-sheet{opacity:0}
  .ts-sheet-root.is-open .ts-sheet{opacity:1}
}

/* ---------------------------------------------------------------- the "needs you" badge, on any [data-ts-app] plate */
[data-ts-app].ts-has-needs{position:relative}
.ts-needs-you{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;
  border-radius:11px;background:var(--ts-needs-you,#D55E00);color:var(--ts-needs-you-ink,#FFFFFF);border:2px solid var(--sys-surface,#FFFFFF);
  font:700 13px/18px system-ui,-apple-system,sans-serif;text-align:center;pointer-events:none;z-index:1}

/* ---------------------------------------------------------------- the person badge (2.65.0: shape = privilege) */
.ts-person{display:inline-block;width:30px;height:30px;flex:0 0 auto;vertical-align:middle;line-height:0}
.ts-person svg{display:block;width:100%;height:100%;overflow:visible}
.ts-person text{font-family:system-ui,-apple-system,sans-serif;font-weight:700;letter-spacing:.02em}
.ts-person--sm{width:22px;height:22px}
.ts-person--lg{width:44px;height:44px}

/* ---------------------------------------------------------------- Sunlight: monochrome edges, color kept on plates */
[data-theme="sunlight"] .ts-btn--secondary{border:2px solid #000}
[data-theme="sunlight"] .ts-btn--quiet{text-decoration:underline}
[data-theme="sunlight"] .ts-sheet{border:2px solid #000;box-shadow:none}
[data-theme="sunlight"] .ts-needs-you{border-color:#000}
[data-theme="sunlight"] .ts-person .ts-person-shape{stroke:#000;stroke-width:2}
[data-theme="sunlight"] [data-ts-app]{box-shadow:inset 0 0 0 2px #000}