/* public/schedule-tile.css - the ONE appointment tile and preview look of the
   schedule, web (/tools/dispatch) and phone (/mobile/schedule), 2026-10-17.
   The markup comes from public/schedule-tile.js; this is its only style, so the
   two surfaces look the same. Design-system tokens only, so light and dark
   both work. The bar color is --st-c, set per tile by the caller. */

.st-tile {
  position: absolute; box-sizing: border-box; overflow: hidden;
  border-radius: 8px; padding: 4px 6px 4px 9px;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  color: var(--ink); font-size: 11px; line-height: 1.25; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.st-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--st-c, #64748b); }
.st-tile.st-est { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface) 8px 16px); }
.st-tile.st-s-cancel { opacity: 0.5; }
.st-tile.st-s-cancel .st-name, .st-tile.st-s-cancel .st-one b { text-decoration: line-through; }

/* The card's look by what has happened (Richard 2026-10-17, schedule-tile.js
   cardLook; phone = web). --st-c is the card's color, --st-ink the text that
   reads on it (schedule-tile.js inkOn). */
.st-tile.st-look-solid { background: var(--st-c, #64748b); border-color: color-mix(in srgb, var(--st-c, #64748b) 70%, #000); color: var(--st-ink, #fff); }
.st-tile.st-look-solid::before { display: none; }
.st-tile.st-look-solid.st-est { background: repeating-linear-gradient(135deg, var(--st-c, #64748b) 0 9px, color-mix(in srgb, var(--st-c, #64748b) 82%, #fff) 9px 18px); }
.st-tile.st-look-solid .st-name, .st-tile.st-look-solid .st-one, .st-tile.st-look-solid .st-one b,
.st-tile.st-look-solid .st-time, .st-tile.st-look-solid .st-line, .st-tile.st-look-solid .st-total,
.st-tile.st-look-solid .st-addr .ds-addr-line { color: var(--st-ink, #fff); }
.st-tile.st-look-solid .st-time, .st-tile.st-look-solid .st-line, .st-tile.st-look-solid .st-addr .ds-addr-line { opacity: 0.88; }
.st-tile.st-look-solid .st-badge, .st-tile.st-look-solid .st-b { background: rgba(0, 0, 0, 0.22); color: var(--st-ink, #fff); }
.st-tile.st-look-edge { background: color-mix(in srgb, var(--st-c, #64748b) 13%, var(--surface-2)); border-color: color-mix(in srgb, var(--st-c, #64748b) 55%, var(--border-subtle)); }
.st-tile.st-look-edge.st-est { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st-c, #64748b) 13%, var(--surface-2)) 0 8px, var(--surface) 8px 16px); }
.st-tile.st-look-gray, .st-tile.st-look-unpaid { background: color-mix(in srgb, var(--ink-3) 18%, var(--surface)); border-color: color-mix(in srgb, var(--ink-3) 30%, var(--surface)); }
.st-tile.st-look-gray::before, .st-tile.st-look-unpaid::before { display: none; }
.st-tile.st-look-gray .st-name, .st-tile.st-look-unpaid .st-name { color: var(--ink-2); }
.st-tile.st-look-unpaid { border: 2px solid var(--danger-ink, #e6574f); }
.st-tile.st-look-notsent { outline: 2px dashed var(--warn-ink, #e6a23c); outline-offset: -2px; }
/* An event (meeting, time off): a tint of its color, framed in it. Shared by
   several lanes, it draws as one band: a piece per lane, joined edge to edge,
   the words on the first piece of each run (schedule-tile.js bandRuns). */
.st-tile.st-evt { background: color-mix(in srgb, var(--st-c, #64748b) 22%, var(--surface-2)); border: 1px solid var(--st-c, #64748b); }
.st-tile.st-evt::before { display: none; }
.st-tile.st-band-mid, .st-tile.st-band-start { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.st-tile.st-band-mid, .st-tile.st-band-end { border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.st-band-repeat { color: var(--ink-2); font-weight: 700; }
.st-kind { display: inline-flex; vertical-align: -1px; margin-right: 3px; }
.st-kind svg { display: block; }

/* "Off today": time off and closures, above every lane, so a person with no
   lane (or a hidden one) is still seen as off (Richard 2026-10-17). */
.st-off { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 11.5px; }
.st-off-lbl { color: var(--ink-3); font-weight: 800; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.st-off-item { appearance: none; -webkit-appearance: none; border: 0; font: inherit; cursor: pointer; background: var(--warn-soft); color: var(--warn-ink); border-radius: 999px; padding: 2px 9px; font-weight: 700; white-space: nowrap; }
.st-tile.is-moving { opacity: 0.35; }
.st-tile.is-pressed { transform: scale(0.98); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }

.st-time { display: flex; justify-content: space-between; align-items: center; gap: 4px; white-space: nowrap; font-weight: 700; font-size: 10.5px; color: var(--ink-3); }
.st-time > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.st-time-tags { display: inline-flex; gap: 3px; align-items: center; flex: none; }
.st-name {
  font-weight: 800; font-size: 12px; color: var(--ink); margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.st-name-1 { -webkit-line-clamp: 1; }
.st-line { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-note { color: var(--warn-ink); }
.st-total { color: var(--ink-2); font-weight: 700; }
/* The surface's address block inside a tile: compact, one line each. */
.st-addr .ds-addr { gap: 1px; margin-top: 1px; }
.st-addr .ds-addr-line { color: var(--ink-3); font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-addr .ds-addr-strip { font-size: inherit; padding: 0 4px; line-height: 1.35; }
.st-addr .ds-addr-icon { width: 11px; height: 11px; }
.st-one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-size: 11px; }
.st-one b { color: var(--ink); }
.st-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }

.st-badge, .st-b { font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 5px; white-space: nowrap; }
.st-c-sched { background: var(--accent-soft); color: var(--accent-ink); }
.st-c-route { background: var(--warn-soft); color: var(--warn-ink); }
.st-c-site { background: var(--accent-soft); color: var(--accent-ink); }
.st-c-done { background: var(--success-soft); color: var(--success-ink); }
.st-c-cancel { background: var(--surface); color: var(--ink-3); }
.st-b-ok { background: var(--success-soft); color: var(--success-ink); }
.st-b-warn { background: var(--warn-soft); color: var(--warn-ink); }
.st-b-bad { background: var(--danger-soft); color: var(--danger-ink); }
.st-b-g { background: var(--surface); color: var(--ink-3); }
.st-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.st-dot.st-c-sched { background: #3b82f6; } .st-dot.st-c-route { background: #d9822b; }
.st-dot.st-c-site { background: #a855f7; } .st-dot.st-c-done { background: #22a06b; } .st-dot.st-c-cancel { background: #94a3b8; }

/* The drop target while moving or booking, and an empty time just tapped. */
.st-slot {
  position: absolute; box-sizing: border-box; border: 2px dashed var(--accent); border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-ink);
  font-size: 10.5px; font-weight: 700; padding: 3px 5px; pointer-events: none; z-index: 5;
}
.st-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.st-resize::after { content: ""; position: absolute; left: 40%; right: 40%; bottom: 2px; height: 3px; border-radius: 3px; background: var(--border); }

/* The preview: the phone's bottom sheet and the web's card share these. */
.st-prev-title { font-weight: 800; font-size: 16px; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-prev-sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.st-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 6px; }
.st-act {
  appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: 10px;
  color: var(--ink); text-align: center; padding: 8px 2px; font-size: 11.5px; font-weight: 700;
}
.st-act[disabled], .st-act.is-off { opacity: 0.4; cursor: default; }
.st-act .st-ico { display: block; font-size: 16px; line-height: 1.2; color: var(--accent-ink); }
.st-act.st-omw { border-color: var(--warn-ink); }
.st-act.st-omw .st-ico { color: var(--warn-ink); }
.st-kv { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-subtle); padding: 6px 0; font-size: 12.5px; }
.st-kv > span:first-child { color: var(--ink-3); flex: none; }
.st-kv > span:last-child { text-align: right; overflow-wrap: anywhere; color: var(--ink); }
.st-why { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.st-menu-item {
  appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; width: 100%; text-align: left;
  display: flex; gap: 10px; align-items: center; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--border-subtle);
  background: transparent; color: var(--ink); font-weight: 700;
}
.st-menu-item:last-child { border-bottom: 0; }
.st-menu-item:hover { background: var(--surface-2); }
.st-menu-item small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11px; }
.st-menu-ico { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }

/* The Techs panel (public/schedule-people-panel.js): the phone's sheet and the
   web's dialog share it. */
.sp-pp-note { font-size: 12px; color: var(--ink-3); margin: 2px 0 8px; }
.sp-pp-sec { font-size: 10.5px; font-weight: 800; color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; margin: 12px 0 4px; }
.sp-pp-row { display: flex; align-items: center; gap: 9px; padding: 8px 4px; border-bottom: 1px solid var(--border-subtle); font-weight: 700; font-size: 13.5px; color: var(--ink); background: var(--surface); }
.sp-pp-row.is-office { color: var(--ink-2); }
.sp-pp-row.is-dragging { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); position: relative; z-index: 2; }
.sp-pp-grip { width: 22px; flex: none; text-align: center; font-size: 18px; line-height: 1; color: var(--ink-3); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.sp-pp-grip.is-blank { cursor: default; }
.sp-pp-sw { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 2px solid var(--border); padding: 0; cursor: pointer; }
.sp-pp-sw.is-empty { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--border-subtle) 4px 8px); }
.sp-pp-sw[disabled] { cursor: default; }
.sp-pp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-pp-name small { font-weight: 600; color: var(--ink-3); font-size: 11px; }
.sp-pp-right { display: flex; align-items: center; gap: 10px; flex: none; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.sp-pp-right input { width: 18px; height: 18px; margin: 0 2px 0 0; vertical-align: -4px; }
.sp-pp-lane, .sp-pp-show { display: inline-flex; align-items: center; cursor: pointer; }
.sp-pp-pal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; padding: 10px 6px 12px; border-bottom: 1px solid var(--border-subtle); }
.sp-pp-c { height: 30px; border-radius: 8px; border: 0; cursor: pointer; font-size: 9px; font-weight: 900; color: #111827; position: relative; padding: 0; }
.sp-pp-c.is-sel { outline: 2px solid var(--ink); outline-offset: 2px; }
.sp-pp-c.is-taken { opacity: 0.4; cursor: not-allowed; }
.sp-pp-c.is-taken::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(135deg, transparent 46%, #fff 47% 53%, transparent 54%); }
.sp-pp-custom { grid-column: span 2; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.sp-pp-custom input { width: 30px; height: 30px; border: 0; padding: 0; background: none; }
.sp-pp-pal .sp-pp-note { grid-column: 1 / -1; margin: 0; }

/* The people on a card (Richard 2026-10-21, the Housecall Pro habit): each
   assigned person's round photo, ringed in their color (--st-avc), in its own
   corner; the text lines keep clear of it (.st-body's padding, set by
   schedule-tile.js). Initials sit under the photo, so a slow or missing photo
   still says who it is. */
.st-avs { position: absolute; top: 5px; right: 6px; display: flex; align-items: center; z-index: 1; pointer-events: none; }
.st-av { position: relative; width: var(--st-av, 20px); height: var(--st-av, 20px); flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--st-avc, var(--border)); background: var(--surface); }
.st-av + .st-av { margin-left: -6px; }
.st-av b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: 0; }
.st-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.st-av-more b { background: var(--surface-2); color: var(--ink-2); }
.st-body { min-width: 0; }

/* The card panel's office controls (Richard 2026-10-21), web popover and
   phone sheet: Length on the board (how long the card is DRAWN; never the
   visit) and the tech. */
.st-sec { margin-top: 10px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.st-sec-h { font-size: 10.5px; font-weight: 800; color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 5px; }
.st-sub { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.st-sub b { color: var(--ink); }
.st-lens { display: flex; flex-wrap: wrap; gap: 5px; }
.st-lens button { appearance: none; -webkit-appearance: none; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); border-radius: 8px; padding: 5px 10px; min-height: 32px; }
.st-lens button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.st-sec select { font: inherit; font-size: 13px; width: 100%; min-height: 36px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }
@media (pointer: coarse) { .st-lens button, .st-sec select { min-height: 44px; } }
/* The Techs panel on a touch screen (session-rules 14.2, 44px targets): the
   look is the same, the places a finger lands grow. The Lane and Show
   checkboxes are tapped through their labels, so the label is the target;
   the drag grip gets a full 44px square. */
@media (pointer: coarse) {
  .sp-pp-lane, .sp-pp-show { min-height: 44px; min-width: 44px; justify-content: center; }
  .sp-pp-right input { width: 22px; height: 22px; }
  .sp-pp-grip { width: 44px; min-height: 44px; display: grid; place-items: center; }
}

/* On my way confirm (2026-10-26): tell the customer, checked by default.
   One label row, a 44px tap target on the phone and the web alike. */
.st-omw-q { margin: 0 0 var(--s-3, 12px); }
.st-omw-notify {
  display: flex; align-items: center; gap: var(--s-3, 12px);
  min-height: 44px; padding: var(--s-2, 8px) var(--s-3, 12px);
  border: 1px solid var(--border-subtle); border-radius: var(--r, 10px);
  background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.st-omw-notify input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--brand-royal); }