/* Trimslot — ledger components. Requires tokens.css. Every class is prefixed ts-. */

.ts-root, .ts-root * { box-sizing: border-box; }
.ts-root { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.ts-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- focus: one ring everywhere ---------- */
.ts-focusable:focus-visible,
.ts-btn:focus-visible, .ts-dest:focus-visible, .ts-sub:focus-visible, .ts-chip:focus-visible, .ts-idmenu-btn:focus-visible, .ts-menu-item:focus-visible, .ts-ov-cell:focus-visible, .ts-ov-who:focus-visible, .ts-ghost:focus-visible, .ts-field input:focus-visible, .ts-entry:focus-visible, .ts-row:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* ---------- Button ---------- */
.ts-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4);
  font: 600 14px/20px var(--font-sans); letter-spacing: .01em;
  border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer;
  transition: transform 80ms ease-out, background-color 120ms ease-out;
}
.ts-btn:active { transform: translateY(1px); box-shadow: var(--shadow-press); }
.ts-btn[disabled] { cursor: not-allowed; opacity: .45; box-shadow: none; transform: none; }
.ts-btn-ink { background: var(--chestnut); color: var(--on-chestnut); }
.ts-btn-ink:hover { background: var(--chestnut-strong); }
.ts-btn-highlight { background: var(--highlighter); color: var(--on-highlighter); border-color: var(--on-highlighter); }
.ts-btn-highlight:hover { background: var(--highlighter-soft); color: var(--ink); border-color: var(--ink); }
.ts-btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.ts-btn-ghost:hover { background: var(--paper-sunk); }
.ts-btn-danger { background: transparent; color: var(--stamp-red); border-color: var(--stamp-red); }
.ts-btn-danger:hover { background: var(--paper-sunk); }
.ts-btn-sm { min-height: 32px; padding: 0 var(--space-3); font-size: 13px; }

/* ---------- Stamp ---------- */
.ts-stamp {
  --ts-rot: -2deg; --ts-stamp-ink: var(--ink-muted);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 7px 1px; border: 2px solid var(--ts-stamp-ink); border-radius: var(--radius-sm);
  outline: 1px solid var(--ts-stamp-ink); outline-offset: 2px;
  color: var(--ts-stamp-ink); font: 800 11px/14px var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(var(--ts-rot)); white-space: nowrap; user-select: none;
  margin: 3px;
}
.ts-stamp-blue { --ts-stamp-ink: var(--stamp-blue); }
.ts-stamp-green { --ts-stamp-ink: var(--stamp-green); }
.ts-stamp-amber { --ts-stamp-ink: var(--stamp-amber); }
.ts-stamp-red { --ts-stamp-ink: var(--stamp-red); }
.ts-stamp-brown { --ts-stamp-ink: var(--chestnut); }
.ts-stamp-muted { --ts-stamp-ink: var(--ink-muted); }
.ts-stamp-fresh { animation: ts-stamp var(--dur-stamp) var(--ease-stamp) both; }
@keyframes ts-stamp {
  0% { transform: rotate(calc(var(--ts-rot) - 6deg)) scale(1.7); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: rotate(var(--ts-rot)) scale(1); opacity: 1; }
}

/* ---------- Highlight ---------- */
.ts-hl {
  background-color: transparent; background-image: linear-gradient(var(--highlighter), var(--highlighter));
  background-repeat: no-repeat; background-position: 0 62%; background-size: 100% 70%;
  color: var(--on-highlighter); padding: 0 .18em; margin: 0 -.06em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ts-hl-soft { background-image: linear-gradient(var(--highlighter-soft), var(--highlighter-soft)); color: var(--ink); }
.ts-hl-swipe { animation: ts-hl-swipe var(--dur-swipe) var(--ease-pen) both; }
@keyframes ts-hl-swipe { from { background-size: 0% 70%; } to { background-size: 100% 70%; } }

/* ---------- Field ---------- */
.ts-field { display: grid; gap: 2px; min-width: 0; }
.ts-field-label { font: 700 11px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.ts-field input, .ts-field select {
  width: 100%; min-height: 40px; padding: 6px 2px 4px; background: transparent;
  border: 0; border-bottom: 2px solid var(--rule-strong); border-radius: 0;
  font: 400 17px/24px var(--font-sans); color: var(--ink);
}
.ts-field input::placeholder { color: var(--ink-faint); }
.ts-field input:hover { border-bottom-color: var(--ink-muted); }
.ts-field input:focus { border-bottom-color: var(--ink); }
.ts-field-hint { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ts-field-error input { border-bottom-color: var(--stamp-red); }
.ts-field-error .ts-field-hint { color: var(--stamp-red); }

/* ---------- Monogram ---------- */
.ts-mono {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--nellie-soft); color: var(--ink);
  font: 400 14px/1 var(--font-display); letter-spacing: .02em;
  border: 1.5px solid var(--rule-strong);
}
.ts-mono-lg { width: 48px; height: 48px; font-size: 20px; }
.ts-mono-ink { background: var(--chestnut); color: var(--on-chestnut); border-color: var(--chestnut); }
.ts-mono-hl { background: var(--highlighter); color: var(--on-highlighter); border-color: var(--on-highlighter); }

/* ---------- Ledger rows (list form) ---------- */
.ts-rows { background: var(--paper-raised); border-top: 2px solid var(--rule-strong); }
.ts-row-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 280ms var(--ease-pen) ; }
.ts-row-wrap > .ts-row { overflow: hidden; min-height: 0; }
.ts-row {
  position: relative; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-3);
  min-height: 48px; padding: 6px var(--space-4) 6px 0;
  border-bottom: 1px solid var(--rule); background: transparent;
}
.ts-row::before { /* the ledger's double margin rule */
  content: ""; position: absolute; left: 60px; top: 0; bottom: -1px; width: 4px;
  border-left: 1px solid var(--rule-strong); border-right: 1px solid var(--rule-strong); opacity: .7;
}
.ts-row-time { padding-left: var(--space-3); font: 500 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.ts-row-main { min-width: 0; display: grid; }
.ts-row-client { font: 600 15px/22px var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-row-sub { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-row-end { display: flex; align-items: center; gap: var(--space-3); }
.ts-row-aside { display: inline-flex; align-items: center; gap: var(--space-2); }
.ts-row:hover { background: color-mix(in srgb, var(--highlighter-soft) 45%, transparent); }
.ts-row-past .ts-row-client, .ts-row-past .ts-row-time { color: var(--ink-faint); }

/* ---------- live states, shared by rows and entries ---------- */
.ts-live-new > .ts-ink { animation: ts-ink var(--dur-ink) var(--ease-pen) both; }
.ts-live-new > .ts-ink:nth-child(2) { animation-delay: 60ms; }
.ts-live-new > .ts-ink:nth-child(3) { animation-delay: 140ms; }
@keyframes ts-ink { from { clip-path: inset(-2px 100% -2px 0); } to { clip-path: inset(-2px -8px -2px 0); } }

.ts-flash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: var(--highlighter-soft); transform-origin: left center;
  animation: ts-swipe var(--dur-swipe) var(--ease-pen) both, ts-fade var(--dur-fade) ease-in var(--dur-swipe) forwards;
}
.ts-row > :not(.ts-flash):not(.ts-strike), .ts-entry > :not(.ts-flash):not(.ts-stamp) { position: relative; z-index: 1; }
@keyframes ts-swipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ts-fade { to { opacity: 0; } }

.ts-strike { position: absolute; left: 68px; right: var(--space-4); top: 50%; height: 2px; background: var(--stamp-red); transform-origin: left; z-index: 2; pointer-events: none; }
.ts-live-removed .ts-strike { animation: ts-swipe var(--dur-ink) var(--ease-pen) both; }
.ts-row-wrap.ts-gone { grid-template-rows: 0fr; transition-delay: calc(var(--dur-ink) + 400ms); }
.ts-row-dead .ts-row-client, .ts-row-dead .ts-row-sub, .ts-row-dead .ts-row-time { color: var(--ink-faint); }
.ts-row-dead .ts-row-client { text-decoration: line-through; text-decoration-color: var(--stamp-red); text-decoration-thickness: 2px; }
.ts-row-btn { width: 100%; border: 0; border-bottom: 1px solid var(--rule); text-align: left; font: inherit; color: inherit; cursor: pointer; }

/* ---------- ScheduleSheet: the ledger page ---------- */
.ts-sheet {
  position: relative; background: var(--paper-raised); box-shadow: var(--shadow-sheet);
  border-radius: var(--radius-0); overflow: hidden; color: var(--ink);
  display: flex; flex-direction: column; max-height: 100%; min-height: 0;
}
/* the sheet is as tall as the hours, capped by its wrapper; past the cap the hours scroll inside it
   with the head pinned. Below closing time is desk, never sheet. */
.ts-sheet-head { flex: none; }
.ts-sheet-scroll { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.ts-grid.ts-sheet-heads { flex: none; position: sticky; top: 0; z-index: 6; }
.ts-sheet-body { flex: none; margin-bottom: var(--space-4); }
/* closing time: a strong rule across the whole grid, labelled in the gutter */
.ts-sheet-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rule-strong); z-index: 4; pointer-events: none; }
.ts-gutter-close { color: var(--ink); }
.ts-sheet-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-4) var(--space-16); border-bottom: 2px solid var(--rule-strong); }
.ts-sheet-day { font: 400 56px/60px var(--font-display); letter-spacing: -.01em; margin: 0; }
.ts-sheet-week { font-size: 40px; line-height: 44px; }
.ts-sheet-date { font: 400 20px/26px var(--font-display); color: var(--ink-muted); margin: 0 0 6px; }
.ts-sheet-meta { display: flex; align-items: center; gap: var(--space-3); padding-bottom: 8px; }
.ts-live-dot { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--stamp-green); }
.ts-live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: ts-breathe 2.4s ease-in-out infinite; }
.ts-live-dot[data-state="offline"] { color: var(--stamp-red); }
.ts-live-dot[data-state="offline"]::before { animation: none; }
@keyframes ts-breathe { 50% { opacity: .35; } }

.ts-grid { position: relative; display: grid; grid-template-columns: var(--space-16) repeat(var(--ts-cols), minmax(118px, 1fr)); }
.ts-colhead { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--paper-raised); border-bottom: 1px solid var(--rule-strong); border-left: 1px solid var(--rule); font: 400 20px/26px var(--font-display); }
.ts-colhead-blank { border-left: 0; left: 0; z-index: 4; }
.ts-colhead { justify-content: flex-start; font-size: 18px; line-height: 24px; }
.ts-colhead-dow { font: 700 11px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.ts-colhead-num { font: 400 20px/24px var(--font-display); }
.ts-colhead-today .ts-colhead-num, .ts-ov-today .ts-colhead-num { background: var(--highlighter); color: var(--on-highlighter); border-radius: var(--radius-pill); padding: 0 8px; }
/* salon day: a stylist heads each column */
.ts-colhead-stylist { min-width: 0; padding-top: 6px; padding-bottom: 6px; }
.ts-colhead-who { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0; border: 0; background: none; font: 600 14px/18px var(--font-sans); color: var(--ink); text-align: left; }
.ts-colhead-who .ts-mono { width: 28px; height: 28px; font-size: 12px; }
button.ts-colhead-who { cursor: pointer; border-radius: var(--radius-sm); }
button.ts-colhead-who:hover .ts-colhead-name { text-decoration: underline; text-decoration-color: var(--chestnut); text-underline-offset: 3px; }
.ts-colhead-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-colhead-off { margin-left: auto; font: italic 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.ts-gutter { position: sticky; left: 0; z-index: 5; background: var(--paper-sunk); border-right: 1px solid var(--rule-strong); }
.ts-gutter-tick { position: absolute; right: 8px; transform: translateY(-50%); font: 500 12px/1 var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ts-col { position: relative; border-left: 1px solid var(--rule); container: ts-col / inline-size;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ts-row) - 1px), var(--rule) calc(var(--ts-row) - 1px), var(--rule) var(--ts-row));
}
.ts-col-off { background-color: var(--paper-sunk); }
/* time not worked: struck out with one pen squiggle down the column, the way it's done in the paper book */
.ts-squiggle { display: block; flex: none; color: var(--ink-muted); overflow: visible; }
/* a block of time not worked: a paper-sunk wash, still ruled, with the squiggle down its middle.
   Appointments sit above it, so a booking made inside off time stays visible. */
.ts-offblock { position: absolute; left: 0; right: 0; z-index: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background-color: var(--paper-sunk);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ts-row, 18px) - 1px), var(--rule) calc(var(--ts-row, 18px) - 1px), var(--rule) var(--ts-row, 18px)); }
.ts-offblock-label { position: absolute; top: 3px; right: var(--space-2); font: italic 400 12px/16px var(--font-sans); color: var(--ink-muted); background: var(--paper-sunk); padding: 0 2px; }

.ts-entry {
  position: absolute; left: 6px; right: 6px; z-index: 1; overflow: hidden;
  display: grid; align-content: start; gap: 0; padding: 3px 6px 3px 14px; cursor: pointer;
  background: transparent; border: 0; text-align: left; color: var(--ink); border-radius: var(--radius-sm);
}
.ts-entry::before { /* the duration brace, drawn in ink */
  content: ""; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 6px;
  border: 2px solid var(--chestnut); border-right: 0; border-radius: 3px 0 0 3px;
}
.ts-entry:hover { background: color-mix(in srgb, var(--highlighter-soft) 60%, transparent); }
.ts-entry-time { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ts-entry-client { font: 600 14px/18px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-entry-service { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-entry .ts-stamp { justify-self: start; margin: 2px 0 0 1px; font-size: 9px; line-height: 11px; letter-spacing: .08em; padding: 0 4px; border-width: 1.5px; outline: 0; transform: rotate(calc(var(--ts-rot) / 2)); }
.ts-entry-now { background: var(--highlighter-soft); }
.ts-entry-now::before { border-color: var(--ink); }
.ts-entry-requested::before { border-style: dashed; border-color: var(--stamp-amber); }
.ts-entry-noshow .ts-entry-client { color: var(--ink-muted); }
.ts-entry-noshow::before { border-color: var(--stamp-red); }
.ts-entry-selected { background: var(--highlighter); color: var(--on-highlighter); }
.ts-entry-selected .ts-entry-time, .ts-entry-selected .ts-entry-service { color: var(--on-highlighter); }
.ts-entry-past { opacity: .72; }
.ts-entry-selected::before { border-color: var(--on-highlighter); }
.ts-entry-selected .ts-stamp { --ts-stamp-ink: var(--on-highlighter); }
.ts-entry-compact { display: flex; align-items: center; gap: 4px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.ts-entry-compact .ts-entry-time, .ts-entry-sep { flex: none; }
.ts-entry-compact .ts-entry-client { flex: 0 1 auto; min-width: 0; }
.ts-entry-sep { font: 400 12px/16px var(--font-sans); color: var(--ink-faint); }
.ts-entry-selected .ts-entry-sep { color: var(--on-highlighter); }
/* the mini stamp sits on the line; the client name gives way before the stamp does */
.ts-entry-compact .ts-stamp { flex: none; margin: 0 0 0 1px; }
/* in a narrow week column there is no room for time, name and stamp: the time goes (the entry's place says it), the word stays */
@container ts-col (max-width: 199px) {
  .ts-entry-compact.ts-entry-flag > .ts-entry-time, .ts-entry-compact.ts-entry-flag > .ts-entry-time + .ts-entry-sep { display: none; }
  /* with room for two lines (30 minutes and up), keep the time and name and drop the stamp to line two instead */
  .ts-entry-compact.ts-entry-flag.ts-entry-two { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-content: center; column-gap: 4px; row-gap: 1px; }
  .ts-entry-compact.ts-entry-flag.ts-entry-two > .ts-entry-time, .ts-entry-compact.ts-entry-flag.ts-entry-two > .ts-entry-time + .ts-entry-sep { display: inline; }
  .ts-entry-compact.ts-entry-flag.ts-entry-two > .ts-entry-client + .ts-entry-sep { display: none; }
  .ts-entry-compact.ts-entry-flag.ts-entry-two > .ts-stamp { grid-column: 1 / -1; justify-self: start; }
}
.ts-entry.ts-live-new { animation: ts-fade-in 1ms both; }
.ts-entry.ts-live-new::before { animation: ts-brace var(--dur-ink) var(--ease-pen) both; }
@keyframes ts-brace { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ts-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ts-entry.ts-live-moved { transition: top var(--dur-page) var(--ease-page), height var(--dur-page) var(--ease-page); }

.ts-now { position: absolute; left: 0; right: 0; z-index: 4; height: 0; border-top: 2px solid var(--ink); pointer-events: none; transition: top 900ms linear; }
.ts-now-tag { position: absolute; right: 4px; z-index: 4; white-space: nowrap; transition: top 900ms linear; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--highlighter); color: var(--on-highlighter); border: 1.5px solid var(--on-highlighter); font: 600 11px/14px var(--font-mono); }

/* ---------- MarginNote: the global notice, pinned in the margin ---------- */
.ts-notes { display: grid; gap: var(--space-3); justify-items: end; }
.ts-note {
  --ts-tilt: 1.2deg;
  position: relative; width: 260px; padding: 14px var(--space-4) 12px; background: var(--paper-raised);
  color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-slip);
  transform: rotate(var(--ts-tilt)); font: 400 14px/20px var(--font-sans);
  animation: ts-note-in var(--dur-page) var(--ease-page) both;
}
.ts-note::before { /* a strip of tape */
  content: ""; position: absolute; top: -8px; left: 50%; width: 56px; height: 16px; transform: translateX(-50%) rotate(-3deg);
  background: var(--highlighter); opacity: .85; border-radius: 2px;
}
.ts-note-time { display: block; font: 400 12px/16px var(--font-mono); color: var(--ink-muted); margin-bottom: 2px; }
.ts-note-title { display: block; font: 600 14px/20px var(--font-sans); }
.ts-note-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.ts-note-error .ts-note-title { color: var(--stamp-red); }
.ts-note-error::before { background: var(--stamp-red); opacity: .7; }
.ts-note-leaving { animation: ts-note-out 260ms var(--ease-pen) both; }
@keyframes ts-note-in { from { opacity: 0; transform: translateX(24px) rotate(6deg); } }
@keyframes ts-note-out { to { opacity: 0; transform: translateX(32px) rotate(8deg); } }

/* ---------- Slip: an appointment slip ---------- */
.ts-slip {
  position: relative; width: 100%; max-width: 360px; background: var(--paper-raised); color: var(--ink);
  border-radius: var(--radius-md); box-shadow: var(--shadow-slip); border: 1px solid var(--rule);
  padding: var(--space-6) var(--space-6) var(--space-4);
}
.ts-slip::before { /* perforated stub edge */
  content: ""; position: absolute; left: 12px; right: 12px; top: 52px; height: 0; border-top: 2px dotted var(--rule-strong);
}
.ts-slip-kicker { display: flex; justify-content: space-between; align-items: center; margin-top: -8px; height: 28px; font: 700 11px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.ts-slip-time { font: 500 20px/24px var(--font-mono); margin-top: var(--space-4); font-variant-numeric: tabular-nums; }
.ts-slip-title { font: 400 28px/34px var(--font-display); margin: 4px 0 2px; }
.ts-slip-sub { color: var(--ink-muted); font: 400 15px/22px var(--font-sans); }
.ts-slip-lines { margin: var(--space-4) 0; border-top: 1px solid var(--rule); }
.ts-slip-line { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--rule); font: 400 14px/20px var(--font-sans); }
.ts-slip-line b { font-weight: 600; }
.ts-slip-line .ts-num { font-size: 14px; }
.ts-slip-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ts-slip-in { animation: ts-slip-in var(--dur-page) var(--ease-page) both; }
@keyframes ts-slip-in { from { opacity: 0; transform: translateY(16px) rotate(-1.5deg); } }

/* ---------- NellieLoader ---------- */
.ts-loader { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); color: var(--ink-muted); min-height: 1px; }
.ts-loader-inline { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; }
.ts-loader-text { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.ts-loader .ts-nellie { animation: ts-fade-in 200ms ease-out both; }
.ts-note-nellie { float: right; margin: -6px -4px 4px 8px; }

/* ---------- EmptyState + Nellie ---------- */
.ts-nellie { display: inline-block; line-height: 0; }
.ts-nellie svg { width: 100%; height: auto; }
.ts-empty { display: grid; justify-items: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); color: var(--ink); }
.ts-empty-art { width: 132px; padding: 10px; border-radius: 50%; background: var(--nellie-soft); margin-bottom: var(--space-2); }
.ts-empty-title { font: 400 28px/34px var(--font-display); margin: 0; }
.ts-empty-body { font: 400 15px/22px var(--font-sans); color: var(--ink-muted); max-width: 36ch; margin: 0 0 var(--space-3); }
.ts-empty-sleep .ts-nellie { animation: ts-doze 4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes ts-doze { 50% { transform: rotate(-3deg) translateY(2px); } }

/* ---------- PageTurn: route changes ---------- */
.ts-page { animation: ts-page-in var(--dur-page) var(--ease-page) both; transform-origin: 0 0; }
.ts-page-back { animation-name: ts-page-in-back; }
@keyframes ts-page-in { from { opacity: 0; transform: translateX(18px) rotate(.35deg); } }
@keyframes ts-page-in-back { from { opacity: 0; transform: translateX(-18px) rotate(-.35deg); } }

/* ---------- TopBar ---------- */
.ts-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.ts-topbar { display: flex; align-items: flex-end; gap: var(--space-6); padding: var(--space-3) var(--space-6) 0; background: var(--paper); border-bottom: 2px solid var(--rule-strong); }
.ts-topbar-brand { align-self: center; display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding-bottom: 6px; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }
.ts-topbar-brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ts-topbar-wordmark { display: block; flex: none; height: 22px; width: auto; aspect-ratio: 4152 / 920; }
.ts-topbar-icon { display: none; flex: none; width: 28px; height: 28px; }
.ts-topbar-divider { flex: none; width: 1.5px; height: 24px; background: var(--rule-strong); }
.ts-topbar-salon { min-width: 0; font: 400 20px/26px var(--font-display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-topbar-brand:hover .ts-topbar-salon { text-decoration: underline; text-decoration-color: var(--chestnut); text-underline-offset: 4px; }
/* the marks, in tokens */
.ts-wordmark-letters { fill: var(--ink); }
.ts-wordmark-horns { fill: var(--nellie); }
.ts-appicon-page { fill: var(--paper-raised); stroke: var(--rule-strong); stroke-width: 12; }
.ts-appicon-rule { fill: var(--rule-strong); }
.ts-appicon-slot { fill: var(--highlighter); }
.ts-appicon-ink { fill: var(--on-highlighter); }
.ts-appicon-margin { fill: var(--chestnut); }
@media (max-width: 639px) {
  /* on a phone: the icon, then the salon's name */
  .ts-topbar-wordmark, .ts-topbar-divider { display: none; }
  .ts-topbar-icon { display: block; }
  .ts-topbar-brand { gap: var(--space-2); flex: 1 1 auto; order: 0; }
  /* one line for the brand and identity, the four tabs sharing the width beneath */
  .ts-topbar { flex-wrap: wrap; row-gap: var(--space-2); column-gap: var(--space-3); padding: var(--space-2) var(--space-4) 0; }
  .ts-topbar-end { order: 1; gap: var(--space-3); }
  .ts-topbar-end .ts-live-dot { font-size: 0; gap: 0; }
  .ts-idmenu-name { display: none; }
  .ts-topbar-nav { order: 2; flex: 1 0 100%; }
  .ts-dest { flex: 1 1 0; justify-content: center; padding: 0 var(--space-2); font-size: 14px; }
}
.ts-topbar-nav { display: flex; gap: 2px; align-self: flex-end; }
.ts-dest {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4); margin-bottom: -2px;
  font: 600 15px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none;
  border: 2px solid transparent; border-bottom: 0; border-radius: var(--radius-tab) var(--radius-tab) 0 0;
}
.ts-dest:hover { color: var(--ink); background: var(--paper-sunk); }
.ts-dest[aria-current="page"] { color: var(--ink); background: var(--paper-raised); border-color: var(--rule-strong); }
.ts-dest[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--paper-raised); }
.ts-dest-badge { min-width: 22px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--highlighter); color: var(--on-highlighter); border: 1.5px solid var(--on-highlighter); font: 600 12px/16px var(--font-mono); text-align: center; }
.ts-topbar-end { margin-left: auto; align-self: center; display: flex; align-items: center; gap: var(--space-4); padding-bottom: 6px; }
.ts-idmenu { position: relative; }
.ts-idmenu-btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-2) 0 0; background: transparent; border: 0; cursor: pointer; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.ts-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 240px; padding: var(--space-2); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-slip); animation: ts-slip-in 160ms var(--ease-page) both; }
.ts-menu-who { display: grid; padding: 6px 8px 8px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ts-menu-who b { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.ts-menu-item { display: block; width: 100%; min-height: 36px; padding: 0 8px; text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm); font: 400 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.ts-menu-item:hover { background: var(--highlighter-soft); }

/* ---------- SecondaryRow ---------- */
.ts-subrow { display: flex; align-items: center; gap: var(--space-4); min-height: 48px; padding: 0 var(--space-6); background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.ts-subrow-items { display: flex; gap: var(--space-6); }
.ts-sub { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.ts-sub:hover { color: var(--ink); }
.ts-sub[aria-current="page"] { color: var(--ink); font-weight: 700; }
.ts-sub[aria-current="page"]::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 8px; height: 3px; border-radius: 2px; background: var(--chestnut); transform-origin: left; animation: ts-swipe var(--dur-swipe) var(--ease-pen) both; }
.ts-sub-count { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); padding: 3px 5px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); }
.ts-subrow-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

/* ---------- StylistChips ---------- */
.ts-chips { display: flex; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; overflow-x: auto; scrollbar-width: none; }
.ts-chip { flex: none; min-height: 32px; padding: 0 var(--space-3); border: 1.5px solid var(--rule-strong); border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 600 13px/18px var(--font-sans); cursor: pointer; }
.ts-chip:hover { background: var(--paper-sunk); }
.ts-chip[aria-pressed="true"] { background: var(--chestnut); border-color: var(--chestnut); color: var(--on-chestnut); }

/* ---------- SettlingMark + wet ink ---------- */
.ts-settle { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.ts-settle-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ts-settle-pending .ts-settle-dot, .ts-settle-slow .ts-settle-dot { animation: ts-breathe 1.2s ease-in-out infinite; }
.ts-settle-slow { color: var(--stamp-amber); }
.ts-settle-settled { color: var(--stamp-green); animation: ts-fade 600ms ease-in 1400ms forwards; }
.ts-settle-failed { color: var(--stamp-red); font-weight: 600; }
.ts-settle-retry { background: none; border: 0; padding: 0 0 0 4px; font: 600 12px/16px var(--font-sans); color: var(--stamp-red); text-decoration: underline; cursor: pointer; }
.ts-wet { color: var(--ink-muted); }
.ts-wet .ts-entry-client, .ts-wet .ts-row-client { color: var(--ink-muted); }
.ts-wet::before { border-style: dotted !important; }
.ts-entry, .ts-entry-client, .ts-row-client { transition: color 600ms ease-out; }

/* ---------- dead appointments: the struck sliver ---------- */
.ts-ghost { position: absolute; left: 0; z-index: 2; width: 14px; height: 40px; padding: 0; border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer;
  background: repeating-linear-gradient(135deg, var(--rule-strong) 0 2px, transparent 2px 6px), var(--paper-sunk);
  font: 600 10px/1 var(--font-mono); color: var(--ink); }
.ts-ghost span { background: var(--paper-raised); border-radius: 2px; padding: 1px 2px; }
.ts-entry-dying { pointer-events: none; animation: ts-fade 500ms ease-in calc(var(--dur-ink) + 500ms) forwards; }
.ts-strike-entry { left: 12px; right: 6px; top: 26px; animation: ts-swipe var(--dur-ink) var(--ease-pen) both; }

/* ---------- WeekOverview ---------- */
.ts-overview { background: var(--paper-raised); box-shadow: var(--shadow-sheet); overflow-x: auto; }
.ts-ov { width: 100%; border-collapse: collapse; }
.ts-ov th, .ts-ov td { border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); padding: 0; text-align: left; }
.ts-ov thead th { padding: var(--space-2) var(--space-3); border-bottom: 2px solid var(--rule-strong); vertical-align: bottom; }
.ts-ov thead th > span { display: block; width: fit-content; }
.ts-ov-corner { font: 700 11px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); border-left: 0 !important; }
.ts-ov tbody th { border-left: 0; }
.ts-ov-who { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 56px; padding: 0 var(--space-3); background: transparent; border: 0; font: 600 15px/20px var(--font-sans); color: var(--ink); cursor: pointer; text-align: left; white-space: nowrap; }
.ts-ov-who:hover span:last-child { text-decoration: underline; text-decoration-color: var(--chestnut); }
.ts-ov-cell { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 56px; padding: 0 var(--space-3); background: transparent; border: 0; cursor: pointer; color: var(--ink); }
.ts-ov-cell:hover { background: var(--highlighter-soft); }
.ts-ov-n { font: 500 16px/20px var(--font-mono); font-variant-numeric: tabular-nums; margin-left: auto; }
.ts-ov-out .ts-ov-n { font: italic 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ts-ov-none .ts-ov-n { color: var(--ink-faint); }
.ts-ov-out { background: var(--paper-sunk); }
.ts-ov .ts-ov-sel { background: color-mix(in srgb, var(--highlighter-soft) 70%, transparent); }
.ts-tally { flex: none; stroke: var(--chestnut); stroke-width: 1.6; stroke-linecap: round; }

/* ---------- Relationship marks ---------- */
.ts-mark { --ts-mark-hl: var(--highlighter); display: inline-flex; align-items: center; gap: 4px; color: var(--chestnut); vertical-align: -0.2em; }
.ts-mark-glyph { flex: none; overflow: visible; }
.ts-mark-word { font: 600 12px/16px var(--font-sans); color: var(--ink-muted); }
.ts-rel { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-rel-tight { gap: 3px; }
.ts-rel-name { position: relative; display: inline-block; padding: 1px 2px; font: 600 14px/20px var(--font-sans); color: var(--ink); white-space: nowrap; }
.ts-rel-circled { padding: 2px 10px; margin: 0 2px; }
.ts-rel-loop { position: absolute; inset: -3px -4px -4px -5px; width: calc(100% + 9px); height: calc(100% + 7px); overflow: visible; pointer-events: none; }
.ts-rel-loop path { fill: none; stroke: var(--chestnut); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ts-rel-fresh .ts-rel-loop path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ts-loop var(--dur-ink) var(--ease-pen) forwards; }
@keyframes ts-loop { to { stroke-dashoffset: 0; } }
.ts-rel-new .ts-mark-word { color: var(--chestnut); }
.ts-slot-pref { background: linear-gradient(var(--highlighter-soft), var(--highlighter-soft)) no-repeat 0 60% / 100% 70%; color: var(--ink); border-radius: 2px; }
.ts-keywrap { position: relative; display: inline-block; }
.ts-key-btn { background: none; border: 0; padding: 0; font: 600 13px/18px var(--font-sans); color: var(--chestnut); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ts-key-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 320px; padding: var(--space-3) var(--space-4); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-slip); animation: ts-slip-in 160ms var(--ease-page) both; }
.ts-key { margin: 0; display: grid; gap: 0; }
.ts-key-row { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.ts-key-row:last-child { border-bottom: 0; }
.ts-key dt { padding-top: 1px; }
.ts-key dd { margin: 0; display: grid; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ts-key dd b { font: 600 14px/20px var(--font-sans); color: var(--ink); }

/* ---------- Pickers: shared trigger, popover slip, listbox ---------- */
.ts-pickwrap, .ts-menuwrap, .ts-infowrap, .ts-combo { position: relative; }
.ts-infowrap { display: inline-block; }
.ts-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; min-width: 150px; min-height: 40px; padding: 6px 2px 4px; background: transparent; cursor: pointer; text-align: left;
  border: 0; border-bottom: 2px solid var(--rule-strong); border-radius: 0; font: 400 17px/24px var(--font-sans); color: var(--ink);
}
.ts-trigger:hover { border-bottom-color: var(--ink-muted); }
.ts-trigger[aria-expanded="true"] { border-bottom-color: var(--ink); }
.ts-trigger[disabled] { cursor: not-allowed; color: var(--ink-faint); background: var(--paper-sunk); }
.ts-trigger-empty .ts-trigger-text { color: var(--ink-faint); }
.ts-trigger-text.ts-num { font: 500 16px/24px var(--font-mono); }
.ts-trigger-caret { color: var(--chestnut); font-size: 14px; }
.ts-trigger-error { border-bottom-color: var(--stamp-red); }
.ts-field-hint-error { color: var(--stamp-red); }
.ts-trigger:focus-visible, .ts-cal-day:focus-visible, .ts-cal-nav:focus-visible, .ts-listbox:focus-visible, .ts-combo input:focus-visible,
.ts-panel-close:focus-visible, .ts-info-trigger:focus-visible, .ts-sv:focus-visible, .ts-hue:focus-visible, .ts-hex:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.ts-pop {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-slip);
  animation: ts-slip-in 160ms var(--ease-page) both;
}
.ts-listbox { margin: 0; padding: 4px 0; list-style: none; min-width: 100%; max-height: 264px; overflow-y: auto; }
.ts-times { width: 132px; min-width: 0; }
.ts-option { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); cursor: pointer; border-bottom: 1px solid var(--rule); font: 400 15px/20px var(--font-sans); color: var(--ink); }
.ts-option:last-child { border-bottom: 0; }
.ts-option.ts-num { font: 500 14px/20px var(--font-mono); }
.ts-option-hour { border-top: 1px solid var(--rule-strong); }
.ts-option-hi { background: var(--highlighter-soft); }
.ts-option-sel { background: var(--chestnut); color: var(--on-chestnut); }
.ts-option-sel.ts-option-hi { background: var(--chestnut-strong); }
.ts-option-empty { padding: var(--space-3); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }

/* ---------- Calendar ---------- */
.ts-cal { padding: var(--space-3); width: 284px; background: var(--paper-raised); color: var(--ink); }
.ts-cal-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-2); border-bottom: 2px solid var(--rule-strong); }
.ts-cal-title { font: 400 20px/26px var(--font-display); }
.ts-cal-nav { width: 32px; height: 32px; border: 1.5px solid var(--rule-strong); border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 400 18px/1 var(--font-sans); cursor: pointer; }
.ts-cal-nav:hover { background: var(--paper-sunk); }
.ts-cal-grid { width: 100%; border-collapse: collapse; margin-top: 4px; }
.ts-cal-grid th { padding: 6px 0 4px; font: 700 11px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); text-align: center; }
.ts-cal-grid td { padding: 1px; text-align: center; border-top: 1px solid var(--rule); }
.ts-cal-day { width: 36px; height: 34px; border: 0; border-radius: var(--radius-sm); background: transparent; font: 500 14px/1 var(--font-mono); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.ts-cal-day:hover { background: var(--highlighter-soft); }
.ts-cal-today { box-shadow: inset 0 -3px 0 var(--highlighter); font-weight: 600; }
.ts-cal-sel, .ts-cal-sel:hover { background: var(--chestnut); color: var(--on-chestnut); box-shadow: none; }
.ts-cal-day[disabled] { color: var(--ink-faint); cursor: not-allowed; background: transparent; text-decoration: line-through; text-decoration-color: var(--rule-strong); }
.ts-pop .ts-cal { background: transparent; }

/* ---------- Ranges ---------- */
.ts-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.ts-range > .ts-pickwrap { flex: 1 1 150px; }
.ts-range-sep { padding-bottom: 10px; font: italic 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.ts-range-error { flex-basis: 100%; }

/* ---------- Combobox ---------- */
.ts-combo-line { position: relative; }
.ts-combo input { padding-right: 32px; }
.ts-combo-clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink-muted); font: 400 20px/1 var(--font-sans); cursor: pointer; border-radius: var(--radius-sm); }
.ts-combo-clear:hover { background: var(--paper-sunk); color: var(--ink); }
.ts-combo .ts-pop { right: 0; }

/* ---------- Menu (shares .ts-menu with the identity menu) ---------- */
.ts-menu-trigger { min-width: 36px; justify-content: center; font-size: 18px; letter-spacing: .05em; }
.ts-menuwrap .ts-menu { width: 220px; }
.ts-menu-left { right: auto; left: 0; }
.ts-menu-danger { color: var(--stamp-red); }
.ts-menu-danger:hover { background: var(--paper-sunk); }
.ts-menu-item[disabled] { color: var(--ink-faint); cursor: not-allowed; background: transparent; }

/* ---------- SidePanel ---------- */
.ts-panelwrap { position: fixed; inset: 0; z-index: 50; }
.ts-panel-contained { position: absolute; }
.ts-scrim { position: absolute; inset: 0; background: var(--scrim); animation: ts-fade-in 200ms ease-out both; }
.ts-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column;
  background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-slip);
  border-left: 1px solid var(--rule-strong); animation: ts-panel-in var(--dur-page) var(--ease-page) both;
}
.ts-panel::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 4px; border-left: 1px solid var(--rule-strong); border-right: 1px solid var(--rule-strong); opacity: .6; pointer-events: none; }
@keyframes ts-panel-in { from { transform: translateX(32px); opacity: 0; } }
.ts-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3) var(--space-8); border-bottom: 2px solid var(--rule-strong); }
.ts-panel-title { margin: 0; font: 400 28px/34px var(--font-display); }
.ts-panel-close { width: 36px; height: 36px; border: 1.5px solid var(--rule-strong); border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 400 22px/1 var(--font-sans); cursor: pointer; }
.ts-panel-close:hover { background: var(--paper-sunk); }
.ts-panel-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8); }
.ts-panel-foot { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8); border-top: 1px solid var(--rule-strong); background: var(--paper-raised); }
@media (max-width: 639px) {
  .ts-panel { top: auto; left: 0; width: 100%; max-height: 88%; border-left: 0; border-top: 1px solid var(--rule-strong); border-radius: var(--radius-md) var(--radius-md) 0 0; animation-name: ts-panel-up; }
  .ts-panel::before { display: none; }
  .ts-panel-head, .ts-panel-body, .ts-panel-foot { padding-left: var(--space-4); }
}
@keyframes ts-panel-up { from { transform: translateY(40px); opacity: 0; } }

/* ---------- InfoPopover ---------- */
.ts-info-trigger { display: inline-flex; align-items: center; padding: 2px; margin: -2px; background: transparent; border: 0; border-radius: var(--radius-sm); color: inherit; font: inherit; cursor: help; }
.ts-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 40; transform: translateX(-50%);
  display: grid; gap: 2px; width: max-content; max-width: 260px; padding: 8px 12px 9px;
  background: var(--paper-raised); color: var(--ink-muted); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-slip);
  font: 400 13px/18px var(--font-sans); text-align: left; animation: ts-fade-in 120ms ease-out both;
}
.ts-tip b { font: 600 13px/18px var(--font-sans); color: var(--ink); }
.ts-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; background: var(--paper-raised); border-right: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); transform: translate(-50%, -5px) rotate(45deg); }

/* ---------- ColorField ---------- */
.ts-colorrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-height: 52px; }
.ts-colorrow > .ts-field-label { width: 128px; }
.ts-colorrow-val { flex: 1; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 160px; font: 500 14px/20px var(--font-mono); color: var(--ink); }
.ts-swatch { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1.5px solid var(--rule-strong); flex: none; }
.ts-swatch-none { background: repeating-linear-gradient(135deg, var(--rule) 0 2px, transparent 2px 6px); }
.ts-hex { width: 110px; min-height: 36px; padding: 4px 2px; border: 0; border-bottom: 2px solid var(--rule-strong); background: transparent; color: var(--ink); font: 500 15px/20px var(--font-mono); text-transform: lowercase; }
.ts-coloredit { display: grid; gap: var(--space-2); }
.ts-picker-pad { display: grid; gap: var(--space-3); width: 240px; margin-left: 140px; padding: var(--space-3); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); }
.ts-sv { position: relative; height: 150px; border-radius: var(--radius-sm); cursor: crosshair; touch-action: none; }
.ts-sv::before, .ts-sv::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ts-sv::before { background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.ts-sv::after { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }
.ts-sv-knob, .ts-hue-knob { position: absolute; z-index: 1; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #2b1d12; transform: translate(-50%, -50%); pointer-events: none; }
.ts-hue { position: relative; height: 16px; border-radius: 8px; cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.ts-hue-knob { top: 50%; background: transparent; }
@media (max-width: 639px) { .ts-picker-pad { margin-left: 0; } }

/* ---------- Choice ---------- */
.ts-choice-label { margin: 0 0 var(--space-2); font: 700 11px/16px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.ts-choice-list { border-top: 2px solid var(--rule-strong); }
.ts-choice-item { position: relative; border-bottom: 1px solid var(--rule); }
.ts-choice-row { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 10px var(--space-4) 10px var(--space-6); cursor: pointer; }
.ts-choice-row:hover { background: color-mix(in srgb, var(--highlighter-soft) 45%, transparent); }
.ts-choice-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ts-choice-text { flex: 1; min-width: 0; display: grid; }
.ts-choice-title { font: 600 15px/22px var(--font-sans); color: var(--ink); }
.ts-choice-desc { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ts-choice-row .ts-stamp { flex: none; }
.ts-choice-on::before { /* the chestnut brace, spanning the chosen row and its detail */
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 7px; pointer-events: none;
  border: 2px solid var(--chestnut); border-right: 0; border-radius: 3px 0 0 3px;
  animation: ts-brace var(--dur-ink) var(--ease-pen) both;
}
.ts-choice-detail { padding: 0 var(--space-4) var(--space-4) var(--space-6); }
.ts-choice-disabled .ts-choice-row { cursor: not-allowed; }
.ts-choice-disabled .ts-choice-row:hover { background: transparent; }
.ts-choice-disabled .ts-choice-title, .ts-choice-disabled .ts-choice-desc { color: var(--ink-faint); }

/* ---------- Tag ---------- */
.ts-tag {
  display: inline-block; margin-left: var(--space-2); padding: 0 5px; vertical-align: 1px;
  background: var(--paper-sunk); border-radius: var(--radius-sm);
  font: 700 10.5px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
  white-space: nowrap;
}

/* ---------- phone (max-width: 639px) ---------- */
@media (max-width: 639px) {
  /* SecondaryRow: the items scroll inside the row, never the page */
  .ts-subrow { gap: var(--space-3); padding: 0 var(--space-4); }
  .ts-subrow-items { position: relative; flex: 1 1 auto; min-width: 0; gap: var(--space-4); padding: 0 2px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ts-subrow-items::-webkit-scrollbar { display: none; }
  .ts-sub { flex: none; }
  .ts-subrow-end { flex: none; }

  /* StylistChips: wrap onto a second line */
  .ts-chips { flex-wrap: wrap; overflow-x: visible; }

  /* LedgerRow: the aside drops under the client and meta lines; the meta line never truncates */
  .ts-row { align-items: start; row-gap: var(--space-2); }
  .ts-row-time { padding-top: 1px; }
  .ts-row-sub { white-space: normal; overflow: visible; text-overflow: clip; }
  .ts-row-end { display: contents; }
  .ts-row-end > .ts-stamp { grid-column: 3; grid-row: 1; justify-self: end; }
  .ts-row-aside { grid-column: 2 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

  /* ScheduleSheet head: 40px display, the pager and Day / Week wrap under the title */
  .ts-sheet-head { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); }
  .ts-sheet-day { font-size: 40px; line-height: 44px; }
  .ts-sheet-meta { flex-wrap: wrap; padding-bottom: 0; }
}

/* ---------- reduced motion: everything becomes a short fade ---------- */
@media (prefers-reduced-motion: reduce) {
  .ts-stamp-fresh, .ts-hl-swipe, .ts-live-new > .ts-ink, .ts-entry.ts-live-new::before, .ts-note, .ts-note-leaving, .ts-slip-in, .ts-page, .ts-empty-sleep .ts-nellie, .ts-live-dot::before {
    animation: ts-fade-in 120ms linear both !important;
  }
  .ts-flash { animation: ts-fade var(--dur-fade) ease-in forwards !important; }
  .ts-live-removed .ts-strike { animation: none !important; }
  .ts-row-wrap, .ts-entry.ts-live-moved, .ts-now { transition: none !important; }
  .ts-pop, .ts-scrim, .ts-panel, .ts-tip { animation: ts-fade-in 120ms linear both !important; }
  .ts-rel-fresh .ts-rel-loop path { animation: none !important; stroke-dashoffset: 0 !important; }
  .ts-key-pop, .ts-sub[aria-current="page"]::after, .ts-choice-on::before, .ts-menu, .ts-settle-pending .ts-settle-dot, .ts-settle-slow .ts-settle-dot { animation: none !important; }
}