/* The trimmer's business: truck card, Truck overlay, visit sheet, honing game, result and summary bits.
   Same dark-cab look as style.css; accents: pink (primary), amber (warning/money), teal (glue/health). */
.bz-card svg, .sup-ic svg, .chk-ic svg, .rb-chip svg, .chk-tools svg, .tk-title svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.bz-card svg .f, .sup-ic svg .f, .chk-ic svg .f, .rb-chip svg .f, .chk-tools svg .f, .tk-title svg .f { fill: currentColor; fill-opacity: .16; stroke: none }
.hint { font-weight: 600; opacity: .7; font-size: .85em; margin-left: .25em }
.warn { color: var(--amber) }
.bad { color: #ff8f72 }

/* ---- hub dashboard: the truck card ---- */
.bz-card { gap: .5em }
.bz-sups { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em }
.bz-sup { display: grid; justify-items: center; gap: .1em; background: rgba(255, 255, 255, .05); border-radius: .7em; padding: .35em .2em .3em; color: #d7ccbc }
.bz-sup svg { width: 1.5em; height: 1.5em } .bz-sup b { font-size: .88em; font-weight: 800 }
.bz-sup.low { background: rgba(224, 96, 58, .22); color: #ffb09a; animation: bzpulse 1.6s ease-in-out infinite }
.bz-sup.disc b { font-size: .72em; letter-spacing: .02em }
@keyframes bzpulse { 50% { background: rgba(224, 96, 58, .1) } }
.bz-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: .8em }
.bz-gauges > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; font-size: .82em }
.bz-gauges i { font-style: normal; color: var(--muted); font-weight: 600 } .bz-gauges b { font-weight: 800 } .bz-gauges .meter { grid-column: 1 / -1; margin-top: .15em }
.bz-alert { color: #ff8f72; font-weight: 800 } .bz-alert.amber { color: var(--amber) } .bz-none { color: var(--muted) }

/* ---- the Truck overlay ---- */
.sheet.truck { width: min(70em, 96vw); height: min(40em, 92vh); max-height: 92vh; grid-template-rows: auto auto minmax(0, 1fr); padding: 1.1em 1.5em 1.2em; gap: .8em; overflow: hidden }
.tk-head { display: flex; align-items: center; gap: 1.2em }
.tk-title { display: flex; align-items: center; gap: .6em; color: var(--amber) }
.tk-title svg { width: 2em; height: 2em } .tk-title h3 { font-size: 2.1em; color: var(--cream) } .tk-title span { color: var(--muted); font-weight: 700; align-self: end; margin-bottom: .25em }
.tk-cash { margin-left: auto; display: grid; justify-items: end } .tk-cash i { font-style: normal; font-size: .72em; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em }
.tk-cash b { font-size: 1.8em; font-weight: 900; font-stretch: 70%; color: #9ee0b1; line-height: 1 }
.tk-tabs { display: flex; gap: .4em; border-bottom: 1px solid rgba(255, 255, 255, .1); padding-bottom: .55em; flex-wrap: wrap }
.tk-tabs button { font: inherit; font-weight: 800; font-size: .95em; color: #cbbfb0; background: rgba(255, 255, 255, .05); border: 0; border-radius: .8em; padding: .5em 1em; cursor: pointer; box-shadow: 0 .16em 0 rgba(0, 0, 0, .35); transition: transform .1s }
.tk-tabs button:hover { background: rgba(255, 255, 255, .11); transform: translateY(-.06em) }
.tk-tabs button.on { background: var(--pink); color: #2a0c1a; box-shadow: 0 .16em 0 var(--pink-d) }
.tk-body { overflow: auto; padding: .2em .3em .4em .1em; animation: fade .25s both; min-height: 0 }
.tk-body h5 { margin: 0 0 .5em; font-size: 1.05em; font-weight: 800; color: var(--cream); letter-spacing: .02em }
.tk-note { color: #a89c8f; font-size: .84em; line-height: 1.45; margin: .7em 0 0 }
.tk-sub { display: grid; gap: .15em; margin-bottom: .8em } .tk-sub b { font-size: 1.15em } .tk-sub span { color: #b9ad9f; font-size: .88em }
.tk-empty { color: #a89c8f; background: rgba(255, 255, 255, .04); border: .1em dashed rgba(255, 255, 255, .15); border-radius: 1em; padding: 1.2em; line-height: 1.5; font-size: .92em }
.tk-empty.big { padding: 2.4em 1.6em; text-align: center; font-size: 1.02em }
.tk-grid.two { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.4em; align-items: start }

/* diary */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4em }
.cal-day { background: rgba(255, 255, 255, .05); border-radius: .8em; padding: .4em .45em .5em; min-height: 5.6em; display: grid; align-content: start; gap: .22em; border: .1em solid transparent }
.cal-day.today { border-color: var(--amber); background: rgba(242, 193, 78, .1) }
.cal-day.clash { border-color: #e0603a } .cal-day.hurt { background: rgba(224, 96, 58, .12) }
.cd-h { display: flex; justify-content: space-between; align-items: baseline } .cd-h b { font-size: .78em; color: var(--muted); text-transform: uppercase; letter-spacing: .06em } .cd-h span { font-weight: 900; font-size: 1.15em; font-stretch: 75% }
.cal-i { font-style: normal; font-size: .72em; font-weight: 800; border-radius: .5em; padding: .22em .45em; line-height: 1.15; overflow: hidden; overflow-wrap: anywhere }
.cal-i.client { background: rgba(233, 91, 147, .25); color: #ffc2d9 } .cal-i.recheck { background: rgba(60, 188, 179, .22); color: #9eeae3 }
.cal-i.emergency { background: #b8331e; color: #fff } .cal-i.hurt { background: rgba(224, 96, 58, .3); color: #ffb09a } .cal-i.late { box-shadow: inset 0 0 0 .1em #e0603a }
.clash-t { color: #ff8f72; font-size: .66em; font-weight: 800 }
.rc-list { display: grid; gap: .5em }
.rc { background: rgba(255, 255, 255, .05); border-radius: .9em; padding: .55em .8em; display: grid; gap: .12em; border-left: .28em solid var(--glue) }
.rc b { font-size: .98em } .rc b small { color: var(--muted); font-weight: 600 } .rc > span { color: #bdb2a5; font-size: .84em }
.rc-meta { display: flex; justify-content: space-between; font-size: .8em; margin-top: .15em } .rc-meta i { font-style: normal; color: var(--muted); font-weight: 700 }
.pg { font-style: normal; font-weight: 800 } .pg.good { color: #7fd39a } .pg.fair { color: #b8d983 } .pg.guarded { color: var(--amber) } .pg.poor { color: #ff8f72 }

/* clients */
.cl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9em }
.cl { display: grid; grid-template-columns: 7.2em 1fr; background: rgba(255, 255, 255, .05); border-radius: 1em; overflow: hidden; box-shadow: 0 .22em 0 rgba(0, 0, 0, .35) }
.cl-art { background-size: cover; background-position: center; position: relative; min-height: 8em } .cl-art img { position: absolute; left: .5em; bottom: .5em; width: 4.4em; height: 4.4em; border-radius: 1em; object-fit: cover; border: .16em solid var(--cream); transform: rotate(-3deg) }
.cl-body { padding: .6em .8em .7em; display: grid; gap: .35em; align-content: start; min-width: 0 }
.cl-body h6 { margin: 0; font-size: 1.05em; font-weight: 850; display: flex; justify-content: space-between; align-items: baseline; gap: .5em }
.cl-body .meter { margin: 0; height: .55em }
.cl-row { display: flex; gap: .4em .6em; align-items: baseline; flex-wrap: wrap; font-size: .82em } .cl-row i { font-style: normal; color: var(--muted); font-weight: 600 } .cl-row b { font-weight: 800 }
.st { font-style: normal; font-size: .72em; font-weight: 800; padding: .2em .7em; border-radius: 1em; background: rgba(255, 255, 255, .1); color: #d7ccbc; white-space: nowrap }
.st.due { background: var(--amber); color: #2b1d05 } .st.soon { background: rgba(242, 193, 78, .25); color: var(--amber) } .st.overdue { background: #b8331e; color: #fff }
.mood.delighted { color: #7fd39a } .mood.fine { color: #cfc4b8 } .mood.grumbles { color: var(--amber) } .mood.walks { color: #ff8f72 }
.spark { display: flex; align-items: flex-end; gap: .2em; height: 1.6em } .spark u { flex: 1; background: var(--glue); border-radius: .15em .15em 0 0; max-width: 1.1em; opacity: .85 }

/* supplies, tools, upgrades */
.sup-grid, .tool-grid, .up-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9em }
.tool-grid { grid-template-columns: repeat(3, 1fr) }
.sup, .tl, .up { display: grid; grid-template-columns: auto 1fr; gap: .8em; background: rgba(255, 255, 255, .05); border-radius: 1em; padding: .8em .9em; box-shadow: 0 .22em 0 rgba(0, 0, 0, .35); align-content: start }
.sup.low { box-shadow: 0 .22em 0 rgba(0, 0, 0, .35), inset 0 0 0 .1em rgba(224, 96, 58, .6) }
.sup-ic { width: 2.9em; height: 2.9em; border-radius: .8em; background: rgba(60, 188, 179, .14); color: #8be5dc; display: grid; place-items: center } .sup-ic svg { width: 1.9em; height: 1.9em }
.sup.low .sup-ic { background: rgba(224, 96, 58, .2); color: #ffb09a }
.sup-main { display: grid; gap: .4em; min-width: 0 } .sup-main h6 { margin: 0; font-size: 1.05em; font-weight: 850; display: flex; justify-content: space-between; align-items: baseline } .sup-main h6 small { color: var(--muted); font-weight: 600 }
.sup-main p { margin: 0; font-size: .84em; color: #b9ad9f; line-height: 1.4 } .sup-main .meter { margin: 0; height: .6em }
.packs { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .2em }
.btn.pack { display: grid; grid-template-columns: 1fr auto; gap: 0 .8em; text-align: left; font-size: .8em; padding: .4em .75em } .btn.pack b { color: #9ee0b1 } .btn.pack small { grid-column: 1 / -1; font-weight: 600; opacity: .7 }
.disc-on { display: flex; justify-content: space-between; align-items: center; gap: .6em; font-size: .85em; color: #cfc4b8 }
.up { grid-template-columns: 1fr auto; align-items: center } .up h6 { margin: 0 0 .2em; font-size: 1.05em; font-weight: 850 } .up p { margin: 0; font-size: .84em; color: #b9ad9f; line-height: 1.4 }
.up.own { box-shadow: 0 .22em 0 rgba(0, 0, 0, .35), inset 0 0 0 .1em rgba(127, 211, 154, .45) }
.tagr.own { background: rgba(127, 211, 154, .2); color: #9ee0b1; font-weight: 800; font-size: .78em; padding: .3em .8em; border-radius: 1em }

/* prices */
.pr-top { display: grid; grid-template-columns: auto 1fr; gap: 1.6em; align-items: center; margin-bottom: 1em }
.pr-rate { display: grid; gap: .2em } .pr-rate i { font-style: normal; font-size: .75em; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em } .pr-rate small { color: #b9ad9f }
.stepper { display: flex; align-items: center; gap: .6em } .stepper b { font-size: 2.8em; font-weight: 900; font-stretch: 70%; min-width: 2.4em; text-align: center; color: var(--amber) } .stepper .btn { font-size: 1.1em; min-width: 2.2em }
.pr-note { background: rgba(242, 193, 78, .08); border-radius: 1em; padding: .7em 1em; display: grid; gap: .2em; font-size: .88em } .pr-note b { color: var(--amber) } .pr-note span { color: #c8bcae }
.pr-tab { width: 100%; border-collapse: collapse; font-size: .92em } .pr-tab th { text-align: left; font-size: .75em; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; padding: .3em .5em }
.pr-tab td { padding: .5em; border-top: 1px solid rgba(255, 255, 255, .08) } .pr-tab td em { font-style: normal; font-size: .72em; background: rgba(233, 91, 147, .25); color: #ffc2d9; border-radius: 1em; padding: .15em .6em; margin-left: .4em; font-weight: 800 } .pr-tab .num { font-family: var(--mono); text-align: right }
.tolbar { position: relative; height: .75em; background: linear-gradient(90deg, rgba(127, 211, 154, .5), rgba(242, 193, 78, .5) 70%, rgba(224, 96, 58, .5)); border-radius: .4em; min-width: 9em }
.tolbar u { position: absolute; right: 0; top: 0; bottom: 0; background: rgba(18, 13, 12, .78); border-radius: 0 .4em .4em 0; left: auto; width: 0 }
.tolbar u { left: auto } .tolbar i { position: absolute; top: -.25em; width: .25em; height: 1.25em; background: var(--cream); border-radius: .15em; transform: translateX(-50%); box-shadow: 0 0 .5em rgba(0, 0, 0, .6) }
.pr-tab td.trk { width: 34% } .pr-tab td:last-child { white-space: nowrap; padding-left: 1em }

/* ---- honing the knife ---- */
.sheet.hone { width: min(36em, 94vw) } .sheet.hone h3 { font-size: 2em }
.hn-stone { background: linear-gradient(#5b564f, #403c37); border-radius: 1em; padding: 1.4em 1.2em; box-shadow: inset 0 .2em 0 rgba(255, 255, 255, .12), inset 0 -.3em 0 rgba(0, 0, 0, .3) }
.hn-track { position: relative; height: 2.4em; background: rgba(0, 0, 0, .4); border-radius: 1.2em; overflow: hidden }
.hn-zone { position: absolute; top: 0; bottom: 0; background: rgba(127, 211, 154, .6); border-radius: 1em; box-shadow: 0 0 1em rgba(127, 211, 154, .6); transition: left .15s }
.hn-mark { position: absolute; top: .2em; bottom: .2em; width: .4em; background: var(--cream); border-radius: .2em; transform: translateX(-50%); box-shadow: 0 0 .6em rgba(255, 255, 255, .8) }
.hn-strokes { display: flex; gap: .5em; justify-content: center } .hn-strokes u { width: 2.4em; height: .7em; border-radius: .4em; background: rgba(255, 255, 255, .12) }
.hn-strokes u.good { background: #7fd39a } .hn-strokes u.ok { background: var(--amber) } .hn-strokes u.bad { background: #e0603a }
.hn-edge { display: grid; grid-template-columns: auto 1fr auto; gap: .8em; align-items: center } .hn-edge span { color: var(--muted); font-weight: 700 } .hn-edge .meter { margin: 0; height: .7em } .hn-edge .meter u { background: var(--glue) }

/* ---- brief: the visit sheet ---- */
.b-biz { position: absolute; left: 1.4em; top: 4em; width: min(21em, 28%); display: grid; gap: .6em; z-index: 2; max-height: calc(100% - 22em); overflow: auto; animation: rise .5s .25s both }
.b-biz > div { background: var(--glass); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 1em; padding: .6em .85em; box-shadow: 0 .22em 0 rgba(0, 0, 0, .35); display: grid; gap: .4em }
.b-biz h6 { margin: 0; font-size: .82em; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 800 }
.b-biz p { margin: 0; font-size: .82em; color: #cfc4b8; line-height: 1.4 } .b-biz .meter { margin: 0; height: .55em }
.b-biz .muted { color: var(--muted) }
.bz-banner { font-size: .86em; line-height: 1.4; color: #fff3ea } .bz-banner b { color: var(--amber) }
.bz-banner.red { background: rgba(184, 51, 30, .55) !important; border-color: rgba(255, 140, 110, .5) !important }
.bz-banner.teal { background: rgba(32, 100, 96, .6) !important; border-color: rgba(60, 188, 179, .5) !important }
.bz-warn { color: var(--amber) !important }
.chk { display: grid; grid-template-columns: auto 1fr auto auto; gap: .5em; align-items: center; font-size: .86em }
.chk-ic { width: 1.7em; height: 1.7em; color: #8be5dc; display: grid; place-items: center } .chk-ic svg { width: 1.4em; height: 1.4em } .chk b { font-weight: 900; font-family: var(--mono) }
.chk.low b { color: var(--amber) } .chk.short b { color: #ff8f72 } .chk.short .chk-ic { color: #ff8f72 }
.chk .btn.small { font-size: .74em; padding: .25em .7em }
.chk-tools { display: flex; gap: .4em .7em; align-items: center; flex-wrap: wrap; font-size: .78em; margin-top: .2em; padding-top: .45em; border-top: 1px dashed rgba(255, 255, 255, .15) }
.chk-tools span { display: flex; align-items: center; gap: .3em; color: #cfc4b8 } .chk-tools svg { width: 1.3em; height: 1.3em; color: #8be5dc } .chk-tools i { font-style: normal; color: var(--muted) } .chk-tools b { font-weight: 800; color: var(--cream) }
.chk-tools .btn { display: flex; justify-content: center; align-items: baseline; gap: .4em; flex: 1 0 100%; font-size: .95em; margin-top: .15em }

/* ---- result and summary ---- */
.r-biz { display: grid; gap: .35em; animation: fade .5s 1.3s both }
.rb-row { display: flex; flex-wrap: wrap; gap: .4em }
.rb-chip { display: inline-flex; align-items: center; gap: .35em; background: rgba(255, 255, 255, .07); border-radius: 2em; padding: .25em .75em .25em .55em; font-size: .78em; color: #d7ccbc; font-weight: 600 }
.rb-chip svg { width: 1.35em; height: 1.35em; color: #8be5dc } .rb-chip b { color: var(--cream) } .rb-chip em { font-style: normal; color: var(--muted); font-weight: 700 }
.rb-chip.teal { background: rgba(60, 188, 179, .18); color: #9eeae3 }
.rb-low { margin: 0; font-size: .8em; color: var(--amber) }
.sum-biz { background: rgba(255, 255, 255, .04); border-radius: .9em; padding: .6em .8em } .sum-biz h6 { margin: 0 0 .3em; font-size: .78em; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 800 }
.sum-biz ul { margin: 0; padding-left: 1.1em; display: grid; gap: .2em; font-size: .85em; color: #cfc6da; line-height: 1.4 }

@media (max-width: 1000px) {
  .tk-grid.two, .cl-grid, .sup-grid, .tool-grid, .up-grid { grid-template-columns: 1fr }
  .cal { grid-template-columns: repeat(4, 1fr) } .b-biz { position: static; width: auto; margin: 4em 1em 0; max-height: none }
}