/* Coach (5 Oct): check a text before it goes out; this week's texts, checked.
   Styled from app.css's tokens only, so both themes follow. */
#tab-coach { max-width: 1180px; }
#coach-body { display: grid; gap: 28px; }

.coach-check { padding: 22px; display: grid; gap: 14px; }
.coach-check h3, .coach-week h3 { margin: 6px 0 4px; font: 500 26px/1.15 var(--display); }
.coach-check textarea { width: 100%; min-height: 110px; resize: vertical; padding: 12px 14px; border: 1px solid var(--rule2); border-radius: var(--r); background: var(--paper); color: var(--ink); font: 400 14px/1.5 var(--text); }
.coach-check textarea:focus, .coach-check input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--gold-soft); }
.coach-check-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.coach-check-row input { flex: 1 1 200px; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--rule2); border-radius: var(--r); background: var(--paper); color: var(--ink); font: 400 14px var(--text); }
.coach-check-row .primary { height: 38px; padding: 0 18px; border-radius: var(--r); }
.coach-result:empty { display: none; }
.coach-result { display: grid; gap: 10px; padding-top: 4px; border-top: 1px solid var(--rule); animation: coach-in .35s var(--ease) both; }
.coach-ok { margin: 8px 0 0; color: var(--ok); }
.coach-busy::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-radius: 50%; border: 2px solid var(--rule2); border-top-color: var(--accent); animation: coach-spin .8s linear infinite; vertical-align: -1px; }
.coach-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.coach-problems { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.coach-problem { display: flex; gap: 10px; align-items: baseline; line-height: 1.45; }
.coach-chip { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--rule2); background: var(--paper2); color: var(--soft); font: 600 11px var(--text); letter-spacing: .02em; white-space: nowrap; }
.coach-chip.weekday, .coach-chip.past, .coach-chip.taken { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 40%, transparent); background: color-mix(in srgb, var(--stop) 9%, var(--paper)); }
.coach-chip.reask, .coach-chip.want_again, .coach-chip.form, .coach-chip.offered { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--paper)); }
.coach-chip.intro_again, .coach-chip.intro { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); background: color-mix(in srgb, var(--info) 9%, var(--paper)); }
.coach-chip.free { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--paper)); }
.coach-chip.date { font-variant-numeric: tabular-nums; }

.coach-week { display: grid; gap: 16px; }
.coach-week-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
#coach-week { display: grid; gap: 16px; }
.coach-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.coach-kpi { padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); display: grid; gap: 6px; animation: coach-in .45s var(--ease) both; }
.coach-kpi:nth-child(2) { animation-delay: .05s; } .coach-kpi:nth-child(3) { animation-delay: .1s; }
.coach-kpi strong { font: 500 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.coach-kpi.warn strong { color: var(--stop); }
.coach-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; }
.coach-kinds, .coach-same, .coach-people { padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.coach-bar { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 3ch; gap: 10px; align-items: center; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink2); font: 500 13px var(--text); text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.coach-bar:hover { background: var(--paper2); }
.coach-bar.on { border-color: var(--gold-line); background: var(--gold-soft); }
.coach-bar strong { text-align: right; font-variant-numeric: tabular-nums; }
.coach-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-bar-track { height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; }
.coach-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; animation: coach-grow .6s var(--ease) both; }
.coach-bar-fill.weekday, .coach-bar-fill.past { background: var(--stop); }
.coach-bar-fill.reask, .coach-bar-fill.want_again { background: var(--warn); }
.coach-bar-fill.intro_again { background: var(--info); }
.coach-same ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.coach-same li { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--soft); }
.coach-same li strong { color: var(--ink); }
.coach-people table { width: 100%; border-collapse: collapse; }
.coach-people td { padding: 8px 12px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.coach-examples { display: grid; gap: 10px; }
.coach-example { padding: 14px 16px; display: grid; gap: 8px; animation: coach-in .35s var(--ease) both; }
.coach-example-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.coach-said { margin: 0; font-size: 13px; color: var(--soft); }
.coach-sent { margin: 0; padding: 10px 12px; border-left: 3px solid var(--rule2); border-radius: 0 var(--r) var(--r) 0; background: var(--paper2); white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.coach-why { margin: 0; font-weight: 600; font-size: 13px; color: var(--stop); }
.coach-example-actions { display: flex; gap: 16px; flex-wrap: wrap; }

@keyframes coach-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes coach-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes coach-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .coach-result, .coach-kpi, .coach-example, .coach-bar-fill { animation: none; } }

@media (max-width: 760px) {
  .coach-grid { grid-template-columns: minmax(0, 1fr); }
  .coach-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .coach-kpi { padding: 12px; }
  .coach-kpi strong { font-size: 26px; }
  .coach-bar { grid-template-columns: minmax(0, 1fr) 3ch; }
  .coach-bar-track { grid-column: 1 / -1; grid-row: 2; }
  .coach-check { padding: 16px; }
}
.coach-span-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.coach-better { color: var(--ok); font-weight: 600; }
.coach-worse { color: var(--stop); font-weight: 600; }
.coach-chip.off { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 40%, transparent); background: color-mix(in srgb, var(--stop) 9%, var(--paper)); }

/* Response time (6 Oct): how long clients wait for a person, and who is waiting now */
.coach-rt { display: grid; gap: 16px; }
.coach-rt h3 { margin: 6px 0 4px; font: 500 26px/1.15 var(--display); }
#coach-rt { display: grid; gap: 14px; }
.coach-rt-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.coach-rt-wait, .coach-rt-slow { padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.coach-rt-wait-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.coach-rt-wait-head strong { font: 600 14px var(--text); font-variant-numeric: tabular-nums; }
.coach-rt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 520px; overflow-y: auto; }
.coach-rt-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--paper); }
.coach-rt-row.over { border-color: color-mix(in srgb, var(--stop) 35%, var(--rule)); }
.coach-rt-row.held { opacity: .8; }
.coach-rt-mins { font: 600 14px var(--text); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.coach-rt-row.over .coach-rt-mins { color: var(--stop); }
.coach-rt-who { min-width: 0; font-size: 13px; }
.coach-rt-said { margin: 2px 0 0; font-size: 12.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-chip.held { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); background: color-mix(in srgb, var(--info) 9%, var(--paper)); max-width: 22em; overflow: hidden; text-overflow: ellipsis; }
.coach-people th { padding: 6px 12px; text-align: left; font: 600 11px var(--text); letter-spacing: .04em; text-transform: uppercase; color: var(--soft); border-bottom: 1px solid var(--rule2); }
.coach-wait-alert { margin-left: 6px; display: inline-flex; align-items: center; gap: 4px; }
.coach-wait-alert .icon { width: 14px; height: 14px; }
/* 7 Oct: a day to confirm with the artist (not a problem, not all clear), and the clients set
   apart from the wait: at the studio, and "paid" */
.coach-verdict-confirm { margin: 8px 0 0; color: var(--warn); }
.coach-confirm { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--r); background: color-mix(in srgb, var(--warn) 7%, var(--paper)); }
.coach-confirm .coach-problems { margin: 0; }
.coach-chip.room, .coach-chip.arrived { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--paper)); }
.coach-rt-aside { display: grid; gap: 6px; }
/* 9 Oct: clients who answered a text blast, listed first */
.coach-rt-blasts .eyebrow { color: var(--accent, var(--warn)); }
.coach-rt-row.blast { border-color: color-mix(in srgb, var(--accent, var(--warn)) 45%, var(--rule)); }
.coach-rt-blast-said { margin: 2px 0 0; }
.coach-rt-row.arrived { border-color: color-mix(in srgb, var(--warn) 40%, var(--rule)); }
.coach-rt-row.arrived .coach-rt-mins, .coach-rt-row.paid .coach-rt-mins { font-weight: 500; color: var(--soft); }
@media (max-width: 760px) {
  .coach-rt-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .coach-rt-who { grid-column: 1 / -1; grid-row: 2; }
  .coach-people { overflow-x: auto; }
}
/* 7 Oct: waiting by lane (Sales / CS / AD) and who owns each; a lane chip on every client, the
   lane switch the hand tags miss, and the period's figures by lane. The lane colours are
   app.css's own (--lane-conversations is Sales). */
.coach-lane.sales, .coach-chip.lane.sales { --lane-c: var(--lane-conversations); }
.coach-lane.cs, .coach-chip.lane.cs { --lane-c: var(--lane-cs); }
.coach-lane.ad, .coach-chip.lane.ad { --lane-c: var(--lane-ad); }
.coach-lanes-wrap { display: grid; gap: 8px; }
.coach-lane-line { margin: 0; font: 600 13px/1.4 var(--text); font-variant-numeric: tabular-nums; color: var(--ink2); }
.coach-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.coach-lane { display: grid; gap: 3px; align-content: start; padding: 10px 12px; border: 1px solid var(--rule); border-left: 3px solid var(--lane-c, var(--rule2)); border-radius: var(--r); background: var(--paper); color: var(--ink); font: 400 12.5px/1.35 var(--text); text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.coach-lane:hover { background: var(--paper2); }
.coach-lane.on { background: var(--gold-soft); border-color: var(--gold-line); border-left-color: var(--lane-c, var(--rule2)); }
.coach-lane:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coach-lane-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.coach-lane-top strong { font: 500 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.coach-lane-name { font: 600 11px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--lane-c, var(--soft)); }
.coach-lane-who { color: var(--soft); font-variant-numeric: tabular-nums; }
.coach-lane-over { color: var(--stop); font-weight: 600; font-variant-numeric: tabular-nums; }
.coach-lane-moved { color: var(--warn); font-weight: 600; }
.coach-lane-booked, .coach-rt-booked { color: var(--info); }
.coach-lane-booked { font-weight: 600; }
.coach-chip.lane { height: 18px; padding: 0 7px; margin-left: 6px; font-size: 10.5px; vertical-align: 1px; color: var(--lane-c, var(--soft)); border-color: color-mix(in srgb, var(--lane-c, var(--rule2)) 40%, transparent); background: color-mix(in srgb, var(--lane-c, var(--rule2)) 9%, var(--paper)); }
.coach-people td .coach-chip.lane { margin-left: 0; }
.coach-rt-moved { margin: 3px 0 0; font-size: 12.5px; font-weight: 600; color: var(--warn); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-rt-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 12px; align-items: start; }
@media (max-width: 760px) {
  .coach-lanes { grid-template-columns: minmax(0, 1fr); }
  .coach-rt-moved { white-space: normal; }
}