/* Technician Scorecard. Existing colors and type only (style.css :root). */
.sc-g-a { --sc: var(--grass); }
.sc-g-b { --sc: var(--blue); }
.sc-g-c { --sc: var(--orange); }
.sc-g-d { --sc: var(--red); }
.sc-g-none, .sc-g-— { --sc: var(--line); }
.sc-shell { padding-bottom: 4px; }
.sc-bar { flex-wrap: nowrap !important; }
.sc-scroll { overflow-x: auto; margin: 0 -4px; }
.sc-step { display: flex; align-items: center; gap: 4px; flex: none; }
.sc-step .btn { min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; }
.sc-tabs { margin: 10px 0 10px; }
.sc-note { margin: 0 0 10px; }

.sc-ring { position: relative; width: 44px; height: 44px; flex: none; }
.sc-ring svg { width: 100%; height: 100%; display: block; }
.sc-ring circle { fill: none; stroke-width: 3.2; }
.sc-ring .track { stroke: var(--paper); }
.sc-ring .fill { stroke: var(--sc, var(--blue)); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 18px 18px; transition: stroke-dasharray .6s ease; }
.sc-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem; }
.sc-ring-xl { width: 132px; height: 132px; }
.sc-ring-xl circle { stroke-width: 2.6; }
.sc-ring-xl b { font-size: 2.4rem; letter-spacing: -.03em; }

.sc-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.sc-hero-main { min-width: 0; }
.sc-hero-top { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.sc-hero h2 { margin: 0; font-size: 1.35rem; overflow: hidden; text-overflow: ellipsis; }
.sc-hero p { margin: 4px 0 12px; }
.sc-grade { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--sc, var(--line)); color: var(--ink); font-weight: 750; flex: none; }
.sc-g-d.sc-grade, .sc-g-b.sc-grade { color: #fff; }
.sc-compare { display: flex; gap: 18px; flex-wrap: nowrap; }
.sc-compare > div { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.sc-compare span { color: var(--muted); font-size: .75rem; }
.sc-compare b, .sc-delta { font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.sc-delta.up { color: var(--ink); background: #eefbe6; border-radius: 999px; padding: 0 8px; align-self: flex-start; }
.sc-delta.down { color: var(--red); }
.sc-tot { margin: 0; flex-wrap: nowrap; gap: 8px; }
.sc-tot .stat { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.sc-tot .stat b { font-size: 1.05rem; white-space: nowrap; }
.sc-tot .stat span { justify-content: center; font-size: .75rem; white-space: nowrap; }

.sc-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sc-metric { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.sc-metric:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(17, 17, 17, .06); }
.sc-metric.off { opacity: .62; }
.sc-metric-txt { flex: 1; min-width: 0; }
.sc-metric-txt b { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-metric-txt span { display: block; color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-metric em { font-style: normal; color: var(--muted); font-size: .72rem; white-space: nowrap; }

.sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sc-grid > .card { margin-bottom: 16px; min-width: 0; }
.sc-grid table, .sc-source table, .sc-board, .sc-drill { width: 100%; }
.card h2 + .sc-tip { margin-top: 0; }
.sc-tip { border-left: 4px solid var(--orange); background: var(--paper); border-radius: 0 10px 10px 0; padding: 10px 12px; margin: 0 0 10px; }
.sc-tip.win { border-left-color: var(--grass); }
.sc-tip p { margin: 4px 0 0; }
.sc-review p { margin: 0 0 8px; }

.sc-spark { width: 100%; height: 130px; display: block; }
.sc-spark polyline { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sc-spark circle { fill: #fff; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sc-spark .goal { stroke: var(--grass); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sc-spark-x { display: grid; grid-template-columns: repeat(12, 1fr); color: var(--muted); font-size: .7rem; text-align: center; margin-top: 2px; }
.sc-trend h3, .card h3 { font-size: .95rem; margin: 16px 0 8px; }
.sc-days { display: flex; gap: 6px; align-items: flex-end; height: 120px; overflow-x: auto; scrollbar-width: none; }
.sc-day { flex: 1 0 28px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 2px; text-decoration: none; color: var(--ink); }
.sc-day i { display: block; width: 100%; max-width: 40px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--sc, var(--line)); }
.sc-day b { font-size: .72rem; font-variant-numeric: tabular-nums; order: -1; }
.sc-day span { color: var(--muted); font-size: .7rem; }

.sc-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sc-badge { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); min-width: 0; }
.sc-badge i { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); }
.sc-badge i .ico { width: 18px; height: 18px; }
.sc-badge b { display: block; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-badge span { min-width: 0; }
.sc-badge span span { display: block; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-badge.on { border-style: solid; border-color: var(--grass); color: var(--ink); }
.sc-badge.on i { background: var(--grass); color: var(--ink); }

.sc-good { color: var(--ink); font-weight: 650; background: #eefbe6; }
.sc-bad { color: var(--red); font-weight: 650; }
.sc-cover { display: inline-block; width: 80px; height: 8px; vertical-align: middle; } /* svg bar: no inline style */
.sc-cover rect { fill: var(--blue); }
.sc-cover rect.bg { fill: var(--paper); }
.sc-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--sc, var(--paper)); color: var(--ink); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-pill.sc-g-b, .sc-pill.sc-g-d { color: #fff; }
.sc-rank { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 750; background: var(--paper); }
.sc-rank.r1 { background: var(--grass); }
.sc-rank.r2 { background: var(--blue); color: #fff; }
.sc-rank.r3 { background: var(--orange); }
.sc-board tr.sc-lead td { background: rgba(92, 219, 58, .08); }
.sc-board td, .sc-drill td { white-space: nowrap; }
.sc-solo { display: grid; gap: 8px; max-width: 640px; }
.sc-solo-row { display: grid; grid-template-columns: 140px 1fr 44px; gap: 10px; align-items: center; }
.sc-solo-row b { text-align: right; font-variant-numeric: tabular-nums; }
.sc-bar { }
.sc-solo .sc-bar { height: 10px; background: var(--paper); border-radius: 999px; overflow: hidden; }
.sc-solo .sc-bar i { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.sc-mini { height: 26px; padding: 0 10px; font-size: .8rem; }
.sc-drill form.drop { display: inline; }

/* My Day / Dispatch chip */
.sc-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.sc-chip .sc-ring { width: 36px; height: 36px; }
.sc-chip .sc-ring b { font-size: .78rem; }
.sc-chip-grade { font-size: .68rem; font-weight: 750; color: var(--muted); }

@media (max-width: 1100px) {
  .sc-hero { grid-template-columns: auto 1fr; }
  .sc-grid { grid-template-columns: 1fr; gap: 0; } /* the two tables need the full width under 1100px (no sideways scroll) */
  .sc-tot { grid-column: 1 / -1; }
  .sc-tot .stat { flex: 1; }
  .sc-metrics, .sc-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sc-bar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .sc-bar > * { flex: none !important; width: auto !important; }
  .sc-bar .list-count { display: none; }
  .sc-hero { grid-template-columns: auto 1fr; gap: 14px; }
  .sc-ring-xl { width: 92px; height: 92px; }
  .sc-ring-xl b { font-size: 1.7rem; }
  .sc-compare { gap: 12px; overflow-x: auto; scrollbar-width: none; }
  .sc-tot { overflow-x: auto; scrollbar-width: none; }
  .sc-tot .stat { flex: 1 0 auto; }
  .sc-grid { grid-template-columns: 1fr; gap: 0; }
  .sc-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sc-metric { padding: 10px; gap: 8px; }
  .sc-metric em { display: none; }
  .sc-metric .sc-ring { width: 38px; height: 38px; }
  .sc-badges { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sc-board td, .sc-drill td { white-space: normal; }
  .sc-solo-row { grid-template-columns: 110px 1fr 36px; }
  .sc-demo span { display: none; }
}
@media print {
  .sc-bar, .sc-tabs, .sc-demo a { display: none; }
}

/* Public rating page (rate.php) */
.rate-stars { display: flex; flex-direction: row-reverse; justify-content: center; gap: 6px; margin: 10px 0 14px; }
.rate-stars input { position: absolute; opacity: 0; pointer-events: none; }
.rate-stars label { font-size: 2.6rem; line-height: 1; color: var(--line); cursor: pointer; transition: color .12s, transform .12s; }
.rate-stars label:hover, .rate-stars label:hover ~ label, .rate-stars input:checked ~ label { color: var(--orange); }
.rate-stars label:active { transform: scale(.92); }
.rate-card textarea { width: 100%; }
a.field-score, a.field-score:visited { text-decoration: none; color: inherit; }
a.field-score b { color: var(--ink); }
.sc-board .sc-pill, .sc-board .sc-rank { flex: none; width: fit-content; max-width: max-content; }
.field-toast .geo-undo { display: inline-flex; margin: 0 0 0 8px; vertical-align: middle; }
.field-toast .geo-undo button { height: var(--btn-h-sm, 30px); min-height: var(--btn-h-sm, 30px); padding: var(--btn-pad-sm, 0 12px); font-size: var(--btn-fs-sm, .78rem); }
/* Phones (Oct 17, 2026, no sideways scrolling): the bar is two set lines instead of a sliding row. Line 1: Period and
   ‹ date ›; line 2: Technician. The compare numbers sit in a 2 x 2 grid so Personal best and A-day streak show. */
@media (max-width: 700px) {
  .sc-bar.lb { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 8px; overflow: visible; }
  .sc-bar.lb > .lb-filters { display: contents; }
  .sc-bar.lb > * { width: auto !important; min-width: 0; }
  .sc-bar.lb > .lb-filters > .list-size:first-child { order: 1; }
  .sc-bar.lb > .sc-step { order: 2; min-width: 0; }
  .sc-bar.lb > .lb-filters > .list-size:not(:first-child) { order: 3; grid-column: 1 / -1; }
  .sc-bar.lb > .lb-filters > .list-size:not(:first-child) select { width: 100% !important; max-width: none; }
  .sc-bar.lb > .lb-tail { order: 4; grid-column: 1 / -1; }
  .sc-bar.lb > .lb-tail:not(:has(> :not([hidden]):not(.list-count))) { display: none; }
  .sc-bar.lb > .lb-fbtn { display: none !important; }
  .sc-step .list-size { flex: 1 1 0; min-width: 0; }
  .sc-step input[type="date"] { width: 100%; min-width: 0; }
  .sc-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; overflow: visible; }
  .sc-compare > div { min-width: 0; }
  .sc-compare span { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 430px) {
  .sc-step input[type="date"] { padding: 0 4px; font-size: .85rem; text-align: center; }
  .sc-step input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
}
/* One-column Scorecard (901-1100px): the Property cell in Most Over Budget and Best $/Hour shows in full; the Service column gives way.
   Narrower (801-900px) and in the two-column grid (1101px and up) Property ends in "…" so the table fits its card (no sideways scroll). */
@media (min-width: 801px) and (max-width: 900px), (min-width: 1101px) {
  body:not(.ps):not(.site) main .sc-grid .card table td:nth-child(2):not(.t-main):not(:has(input, select, button, textarea, form, .badge, .tag, .pill, div, ul, p, img, svg)) { max-width: 140px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  body:not(.ps):not(.site) main .sc-grid .card table td:nth-child(2):not(.t-main):not(:has(input, select, button, textarea, form, .badge, .tag, .pill, div, ul, p, img, svg)) { max-width: none; }
}