/* Wait Tracker screens (waittracker/*): the owner's pages (.wt) and the customer's public tracker (.wtp).
   Loaded after jeevz.css from core/templates/core/base.html. Every rule is scoped to .wt or .wtp.
   Reads --jz-* tokens. The one exception is the public page, which is the firm's own customer paperwork: its progress
   fill and current step take the firm's accent (--accent) when the firm has a brand, else the Jeevz lime/forest.
   Learnings: docs/design-learnings.md. */

/* ---- shared pieces: tile, line, text block ---- */
#app :is(.wt,.wtp) .wt-tile{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--jz-r-icon);background:var(--jz-soft)}
#app :is(.wt,.wtp) .wt-tile svg{width:20px;height:20px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#app :is(.wt,.wtp) .wt-tile.is-off{background:var(--jz-field)}
#app :is(.wt,.wtp) .wt-tile.is-off svg{stroke:var(--jz-muted)}
#app :is(.wt,.wtp) .wt-line{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:60px;padding:8px var(--jz-s4);box-sizing:border-box}
#app :is(.wt,.wtp) .wt-lt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#app :is(.wt,.wtp) .wt-lt b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink);overflow-wrap:anywhere}
#app :is(.wt,.wtp) .wt-lt small{display:flex;align-items:center;gap:var(--jz-s2);min-width:0;font:400 15px/20px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
#app :is(.wt,.wtp) .wt-val{flex:none;font:400 17px/22px var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}
#app :is(.wt,.wtp) ol.jz-group{list-style:none;padding:0}

/* ---- the hero: where it's up to (owner and customer) ---- */
#app :is(.wt,.wtp) .hero{margin:0 0 var(--jz-s6)}
#app :is(.wt,.wtp) .hero .wt-now{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 var(--jz-s5)}
#app .wt .hero .jz-st.jz-st{font:600 15px/20px var(--jz-sans)}
#app .wt .hero .jz-st.is-due{color:#ffd27a}
#app .wt .hero .jz-st.is-late{color:var(--jz-night-late)}
#app :is(.wt,.wtp) .hero .wt-stage{font:600 15px/20px var(--jz-sans);color:var(--jz-on-night)}
#app :is(.wt,.wtp) .hero .wt-lbl{display:block;font:500 15px/20px var(--jz-sans);color:var(--jz-night-muted)}
#app :is(.wt,.wtp) .hero .big{margin:2px 0 var(--jz-s4)}
#app :is(.wt,.wtp) .wt-bar{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;margin:0;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:var(--jz-hero-num);overflow:hidden}
#app :is(.wt,.wtp) .wt-bar::-webkit-progress-bar{background:rgba(255,255,255,.14);border-radius:999px}
#app :is(.wt,.wtp) .wt-bar::-webkit-progress-value{background:var(--jz-hero-num);border-radius:999px}
#app :is(.wt,.wtp) .wt-bar::-moz-progress-bar{background:var(--jz-hero-num);border-radius:999px}
#app :is(.wt,.wtp) .hero .wt-ends{display:flex;justify-content:space-between;gap:var(--jz-s3);margin:var(--jz-s2) 0 0;font:500 13px/18px var(--jz-sans);color:var(--jz-night-muted);font-variant-numeric:tabular-nums}
#app .wt .hero .meta{margin-top:var(--jz-s5)}
#app .wt .hero .meta b{overflow-wrap:anywhere}

/* ---- owner: the kind picker and the start form ---- */
#app .wt .wt-stages .wt-n{font:700 15px/1 var(--jz-sans);color:var(--jz-forest);font-variant-numeric:tabular-nums}
#app .wt .wt-stages .jz-pk-t b{white-space:normal;text-wrap:pretty}
#app .wt .wt-stages .jz-pk-t small{text-wrap:pretty}
#app .wt .wt-foot{margin-top:calc(-1 * var(--jz-s4))}
#app .wt .wt-past>*+*::before{left:var(--jz-s4)}

/* ---- owner: the wait ---- */
#app .wt .jz-group>.wt-line+*::before,#app .wt .jz-group>details.wt-fold::before,#app .wt .jz-group>.wt-rowform+*::before,
#app .wt .jz-group>details+*::before{left:60px}
#app .wt .wt-copy{display:flex;align-items:center;gap:var(--jz-s2);padding:0 var(--jz-s4) var(--jz-s3) 60px}
#app .wt .jz-group>.wt-copy::before{display:none}
#app .wt .wt-copy .wt-url{flex:1;min-width:0;height:40px;margin:0;padding:0 12px;border:0;border-radius:10px;background:var(--jz-field);box-shadow:none;color:var(--jz-muted);font:400 15px/40px var(--jz-sans);text-overflow:ellipsis}
#app .wt .wt-copy .btn{flex:none;margin:0}
#app .wt details.wt-fold{position:relative}
#app .wt details.wt-fold>summary{list-style:none;position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:60px;padding:8px 44px 8px var(--jz-s4);cursor:pointer}
#app .wt details.wt-fold>summary::-webkit-details-marker{display:none}
#app .wt details.wt-fold>summary::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:7px;margin-top:-6px;border:solid var(--jz-chev);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform 200ms}
#app .wt details.wt-fold[open]>summary::after{transform:rotate(-135deg);margin-top:-2px}
#app .wt details.wt-fold>summary:active{background:var(--jz-field)}
#app .wt .wt-draft{padding:0 var(--jz-s4) var(--jz-s4)}
#app .wt .wt-draft .jz-area{margin:0 0 var(--jz-s3);padding:10px 14px 6px;border-radius:12px;background:var(--jz-field)}
#app .wt .wt-draft .alert{margin-bottom:var(--jz-s3)}
#app .wt .wt-draft .jz-foot{margin:var(--jz-s3) 0 0;padding:0}
#app .wt .wt-subj{margin:0 0 var(--jz-s2);padding:0 2px;font:600 15px/20px var(--jz-sans);color:var(--jz-ink);overflow-wrap:anywhere}
#app .wt .wt-subj span{display:block;font:600 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .wt .wt-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--jz-s2)}
#app .wt .wt-acts form{margin:0}
#app .wt .wt-acts .btn{margin:0}
#app .wt .wt-note:empty{display:none}
#app .wt .wt-note{display:block;margin-top:var(--jz-s2);font:400 13px/18px var(--jz-sans);color:var(--jz-muted)}
#app .wt .wt-rowform{margin:0;position:relative}
#app .wt button.jz-go.wt-act{width:100%;margin:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;text-align:left;cursor:pointer}
#app .wt button.jz-go.wt-act:active{background:var(--jz-field)}
#app .wt .wt-act .jz-go-t small{white-space:normal}
#app .wt .wt-act.is-danger .jz-go-t b{color:var(--jz-red)}
#app .wt .wt-act.is-danger .jz-go-ic{background:var(--jz-red-soft)}
#app .wt .wt-act.is-danger .jz-go-ic svg{stroke:var(--jz-red)}
#app .wt .wt-edit .wt-flat{margin:0 0 var(--jz-s3);border-radius:12px;box-shadow:none;background:var(--jz-field)}
#app .wt .wt-edit .wt-flat .jz-row:focus-within,#app .wt .wt-edit .wt-flat .jz-row:active{background:rgba(23,33,29,.04)}
#app .wt .wt-edit{padding:0 var(--jz-s4) var(--jz-s4)}
#app .wt .wt-edit>.btn{margin:0}
#app :is(.wt,.wtp) .wt-log>li{position:relative;display:flex;align-items:center;min-height:56px;padding:8px var(--jz-s4);box-sizing:border-box}
#app :is(.wt,.wtp) .wt-log>li b{font-weight:400}

/* ---- owner: the waiting list ---- */
#app .wt .wt-list>*+*::before{left:60px}
#app .wt .wt-row{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:72px;padding:12px var(--jz-s4);box-sizing:border-box;color:var(--jz-ink);text-decoration:none}
#app .wt .wt-row:active{background:var(--jz-field)}
#app .wt .wt-row .wt-lt small{flex-wrap:wrap;row-gap:0}
#app .wt .wt-row .wt-job{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .wt .wt-row .jz-st{font-size:15px;line-height:20px}
#app .wt .wt-amt{flex:none;font:700 17px/22px var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink);font-variant-numeric:tabular-nums}

/* ---- the job card row ---- */
#app .wt-jobrow .jz-go-t small{display:flex}

/* ---- customer: the public tracker ---- */
#app .wtp .wtp-job{margin:0 0 var(--jz-s1);font:600 15px/20px var(--jz-sans);color:var(--jz-muted)}
#app .wtp .wtp-hero .wtp-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:var(--jz-s4);border-radius:var(--jz-r-icon);background:rgba(255,255,255,.1)}
#app .wtp .wtp-hero .wtp-ic svg{width:24px;height:24px;fill:none;stroke:var(--accent,var(--jz-hero-num));stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#app .wtp .wtp-hero .wtp-stage{margin:0 0 var(--jz-s4);font:600 17px/22px var(--jz-sans);color:var(--jz-on-night)}
#app .wtp .wtp-hero .wt-bar::-webkit-progress-value{background:var(--accent,var(--jz-hero-num))}
#app .wtp .wtp-hero .wt-bar::-moz-progress-bar{background:var(--accent,var(--jz-hero-num))}
#app .wtp .wtp-hero p:last-child{margin-top:var(--jz-s4)}
#app .wtp .wtp-hero .wt-ends+p{margin-top:var(--jz-s4)}
#app .wtp .wtp-late{color:var(--jz-night-late)}
#app .wtp .wtp-steps>li{position:relative;display:flex;align-items:center;gap:var(--jz-s3);min-height:56px;padding:8px var(--jz-s4);box-sizing:border-box;font:400 17px/22px var(--jz-sans);color:var(--jz-muted)}
#app .wtp .wtp-steps>li+li::before{left:52px}
#app .wtp .wtp-steps>li>i{flex:none;position:relative;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.75px rgba(23,33,29,.22)}
#app .wtp .wtp-steps>li>span{flex:1;min-width:0;text-wrap:pretty}
#app .wtp .wtp-steps>li.is-done{color:var(--jz-ink)}
#app .wtp .wtp-steps>li.is-done>i{background:var(--jz-forest);box-shadow:none}
#app .wtp .wtp-steps>li.is-done>i::after{content:"";position:absolute;left:7px;top:8px;width:10px;height:5px;border:solid #fff;border-width:0 0 2.25px 2.25px;transform:rotate(-45deg)}
#app .wtp .wtp-steps>li.is-now{color:var(--jz-ink);font-weight:600}
#app .wtp .wtp-steps>li.is-now>i{box-shadow:inset 0 0 0 7px var(--jz-forest)}
#app .wtp .wtp-steps>li.is-now>small{flex:none;padding:2px 10px;border-radius:999px;background:var(--jz-soft);color:var(--jz-forest-ink);font:600 13px/18px var(--jz-sans)}
@media (prefers-reduced-motion:no-preference){
  #app .wtp .wtp-steps>li.is-now>i::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 2px var(--jz-forest);opacity:0;animation:wtp-pulse 2.4s ease-out infinite}
}
@keyframes wtp-pulse{0%{opacity:.5;transform:scale(.8)}100%{opacity:0;transform:scale(1.35)}}
#app .wtp .wtp-do p{margin:0;padding:var(--jz-s4);font:400 17px/24px var(--jz-sans);color:var(--jz-ink);overflow-wrap:anywhere}
#app .wtp .wtp-facts .wt-line+.wt-line::before{left:var(--jz-s4)}
#app .wtp .wtp-facts .wt-lt b{font-weight:400}

/* The job card's "waiting on" notice (waittracker/_job_notice.html, walkthrough 1 Nov): a white notice that is the row */
#app .wt-jobnote{display:flex;align-items:center;gap:var(--jz-s3);min-height:60px;margin:0 0 var(--jz-s4);padding:var(--jz-s2) var(--jz-s4);background:var(--jz-card);border-radius:var(--jz-r);box-shadow:var(--jz-shadow);color:var(--jz-ink);text-decoration:none}
#app .wt-jobnote:active{background:var(--jz-field)}
#app .wt-jobnote-dot{flex:none;width:10px;height:10px;margin:0 6px;border-radius:50%;background:var(--jz-amber-dot)}
#app .wt-jobnote-dot.is-late{background:var(--jz-red)}
#app .wt-jobnote-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#app .wt-jobnote-t b{font:600 17px/22px var(--jz-sans)}
#app .wt-jobnote-t small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}

/* ===================== 6 Nov rebuild: Fresh light and Night (docs/design-system.md) =====================
   Later rules win over the older ones above. The hero is a paper card (late: the amber edge or band), the date in
   Cabinet and a ring for how much of the wait has gone. Role tokens only. */
#app :is(.wt,.wtp) .wt-hero,#app .wtp .wtp-hero{padding:var(--jz-s5);color:var(--jz-ink)}
#app :is(.wt,.wtp) .wt-stage,#app .wtp .wtp-hero .wtp-stage{margin:var(--jz-s4) 0 0;font:600 var(--jz-t-body)/1.3 var(--jz-sans);color:var(--jz-ink)}
#app .wtp .wtp-hero .jz-card-top .wtp-stage{margin:0;flex:1;min-width:0}
#app :is(.wt,.wtp) .wt-when{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);margin-top:var(--jz-s4)}
#app :is(.wt,.wtp) .wt-when .wt-lbl{display:block;font:600 var(--jz-t-meta)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app :is(.wt,.wtp) .wt-big{display:block;margin-top:var(--jz-s2);font-size:56px;color:var(--jz-ink);white-space:nowrap}
#app :is(.wt,.wtp) .wt-when .jz-ring small{font-size:13px}
#app :is(.wt,.wtp) .jz-latecard .wt-big,#app .wtp .wtp-hero.is-late .wt-big{color:var(--jz-late)}
#app :is(.wt,.wtp) .wt-ends{display:flex;justify-content:space-between;gap:var(--jz-s3);margin:var(--jz-s3) 0 0;font:600 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2);font-variant-numeric:tabular-nums}
#app .wt .wt-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-top:var(--jz-s4)}
#app .wt .wt-meta>div{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);min-width:0}
#app .wt .wt-meta small{font:600 var(--jz-t-label)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .wt .wt-meta b{font:700 18px/1.2 var(--jz-display);color:var(--jz-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* rows: Waiting list */
#app .wt .wt-listhero{margin:0 0 var(--jz-s5)}
#app .wt .wt-list{margin:0 0 14px}
#app .wt .wt-list>*+*::before{left:18px}
#app .wt .wt-row.jz-li{min-height:84px;padding:14px 18px}
#app :is(.wt,.wtp) .wt-tile.jz-li-av{width:52px;height:52px;border-radius:50%;background:var(--jz-surface-2)}
#app :is(.wt,.wtp) .wt-tile.jz-li-av svg{width:24px;height:24px;stroke:var(--jz-ink)}
#app .wt .wt-tile.jz-li-av.is-late{background:var(--jz-late-fill)}
#app .wt .wt-tile.jz-li-av.is-late svg{stroke:var(--jz-on-late)}
#app .wt .wt-row .wt-lt b{font:600 18px/1.25 var(--jz-sans)}
#app .wt .wt-row .wt-lt small{display:block;font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .wt .wt-row .wt-chip{display:block;margin-top:6px}
#app .wt .wt-amt.jz-li-v{font:800 20px/1 var(--jz-display);color:var(--jz-ink)}
#app :is(.wt,.wtp) .wt-tile{border-radius:50%}
#app .wt details.wt-fold>summary{min-height:64px}
#app .wt .wt-edit>.jz-btn{margin-top:var(--jz-s3)}
/* the customer's page */
#app .wtp .wtp-job{margin:0 0 6px;font:600 var(--jz-t-meta)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .wtp .wtp-hero .wtp-ic{display:grid;place-items:center;flex:none;width:52px;height:52px;margin:0;border-radius:50%;background:var(--jz-wash)}
#app .wtp .wtp-hero .wtp-ic svg{width:24px;height:24px;stroke:var(--jz-forest)}
#app .wtp .wtp-hero.is-late{box-shadow:var(--jz-shadow),inset 6px 0 0 var(--jz-late-edge)}
#app .wtp .wtp-hero.is-done{box-shadow:var(--jz-shadow),inset 0 0 0 2px var(--jz-done)}
#app .wtp .wtp-line{margin:var(--jz-s4) 0 0;font:500 var(--jz-t-meta)/1.45 var(--jz-sans);color:var(--jz-ink-2)}
#app .wtp .wtp-late{display:flex;gap:10px;align-items:flex-start;margin:var(--jz-s4) 0 0;padding:12px 14px;border-radius:var(--jz-r-inner);background:var(--jz-late-fill);color:var(--jz-on-late);font:600 var(--jz-t-meta)/1.4 var(--jz-sans)}
#app .wtp .wtp-late .jz-ic{flex:none;width:20px;height:20px}
#app .wtp .wtp-clear{display:flex;align-items:center;gap:14px;margin-top:var(--jz-s4)}
#app .wtp .wtp-tick{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--jz-done);color:var(--jz-on-done)}
#app .wtp .wtp-tick .jz-ic{width:28px;height:28px;stroke-width:3}
#app .wtp .wtp-clear .wt-big{margin:0;color:var(--jz-forest)}
#app .wtp .wtp-steps{border-radius:var(--jz-r-card)}
#app .wtp .wtp-steps>li{min-height:60px;padding:10px 18px;font:500 var(--jz-t-body)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .wtp .wtp-steps>li+li::before{left:60px}
#app .wtp .wtp-steps>li>i{display:grid;place-items:center;width:28px;height:28px;box-shadow:inset 0 0 0 2px var(--jz-chev)}
#app .wtp .wtp-steps>li>i .jz-ic{width:16px;height:16px;stroke-width:3;color:var(--jz-on-done)}
#app .wtp .wtp-steps>li.is-done{color:var(--jz-ink)}
#app .wtp .wtp-steps>li.is-done>i{background:var(--jz-done)}
#app .wtp .wtp-steps>li.is-done>i::after{content:none}
#app .wtp .wtp-steps>li.is-now{color:var(--jz-ink)}
#app .wtp .wtp-steps>li.is-now>i{box-shadow:inset 0 0 0 8px var(--jz-forest)}
#app .wtp .wtp-steps>li.is-now>small{padding:6px 12px;background:var(--jz-wash);color:var(--jz-forest);font:600 var(--jz-t-label)/1 var(--jz-sans)}
#app .wtp .wtp-do{padding:var(--jz-s5)}
#app .wtp .wtp-do p{margin:0;font:500 var(--jz-t-say)/1.4 var(--jz-sans);color:var(--jz-ink)}
#app .wtp .wtp-fact{display:flex;flex-direction:column;gap:6px;padding:var(--jz-s4) var(--jz-s5)}
#app .wtp .wtp-fact small{font:600 var(--jz-t-label)/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .wtp .wtp-fact b{font:800 28px/1 var(--jz-display);letter-spacing:-.02em;color:var(--jz-ink)}
#app .wt .wt-meta>div{padding:10px 12px}
#app .wt .wt-meta small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}