/* v1.3 capability UI styles, owner W-SHOP-UI: makeover + team full screens (a calm sheet over the 3D shop),
   pizzas per type (plan rows, live shelf, recap card). */
.cap-screen { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none; }
.cap-screen > * { pointer-events: auto; }
.cap-sam { max-width: min(620px, 70vw); }
.cap-sam .tt-mentor { margin: 0; }
.cap-sheet { align-self: stretch; padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.cap-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cap-head h2 { margin: 0; }
.cap-pill { background: #f4f1ea; border-radius: 999px; padding: 6px 14px; font-weight: 800; font-size: 17px; color: #4d5058; white-space: nowrap; }
.cap-tools { margin-left: auto; display: flex; align-items: center; }
.cap-head > .tt-btn { flex: none; }
.cap-swatches { display: flex; gap: 2px; }
.cap-swatch { width: 52px; height: 56px; border: 0; background-clip: content-box !important; padding: 6px 4px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .08); }
.cap-swatch { border-radius: 999px; }
.cap-swatch.is-on { outline: 4px solid var(--ink, #2b2d33); outline-offset: -4px; }
.cap-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cap-tab { min-height: 56px; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; border-radius: 999px; border: 3px solid var(--line, #e4dfd3); background: #fff; font: inherit; font-size: 18px; font-weight: 800; color: #4d5058; cursor: pointer; }
.cap-tab.is-on { background: var(--accent, #d9412b); border-color: var(--accent, #d9412b); color: #fff; }
.cap-cards { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; overflow-x: auto; padding: 12px 2px 2px; margin-top: -10px; }
.cap-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 3px solid var(--line, #e4dfd3); border-radius: 18px; padding: 14px; cursor: pointer; min-width: 0; }
.cap-card.is-on { border-color: var(--accent, #d9412b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #d9412b) 25%, transparent); }
.cap-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 8px; }
.cap-card-top .tt-icon { flex: none; }
.cap-card-name { display: flex; flex-direction: column; min-width: 0; }
.cap-card-name b { font-size: 20px; line-height: 1.15; }
.cap-sub { font-size: 16px; color: #6b6f78; line-height: 1.25; }
.cap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cap-chip { background: #e9f5ec; color: #25703a; border-radius: 999px; padding: 4px 10px; font-size: 15px; font-weight: 800; line-height: 1.2; }
.cap-chip.is-bad { background: #fbeae8; color: #b3261e; }
.cap-meta { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #4d5058; }
.cap-card > .tt-btn { margin-top: auto; width: 100%; }
.cap-state { margin-top: auto; min-height: 56px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #6b6f78; text-align: center; }
.cap-tag { position: absolute; top: -12px; right: 12px; background: var(--accent, #d9412b); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: 14px; font-weight: 800; }
@media (max-height: 800px) {
  .cap-sheet { padding: 12px 16px 14px; gap: 10px; }
  .cap-card { padding: 12px; gap: 8px; }
  .cap-card-name b { font-size: 18px; }
  .cap-sub { font-size: 15px; }
  .cap-chip { font-size: 14px; }
}
@media (max-width: 1100px) { .cap-tab { padding: 0 14px; font-size: 17px; } .cap-tab .tt-icon { display: none; } }

/* pizzas per type: planning rows */
.sh-list { display: flex; flex-direction: column; }
.sh-row { display: grid; grid-template-columns: 44px 1fr 56px 44px 56px; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 2px solid #f1ede4; }
.sh-row:last-child { border-bottom: 0; }
.sh-name { display: flex; flex-direction: column; min-width: 0; }
.sh-name b { font-size: 18px; }
.sh-sub { grid-column: 2 / -1; margin-top: -4px; font-size: 14px; color: #6b6f78; line-height: 1.2; }
.sh-row .tt-btn { padding: 0; min-width: 56px; font-size: 24px; }
.sh-n { text-align: center; font-size: 22px; font-variant-numeric: tabular-nums; }
.sh-sam { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.sh-sam .tt-mentor { margin: 0; }
.sh-sam .tt-mentor-face { width: 52px; height: 52px; }
.sh-sam .tt-mentor-bubble { font-size: 16px; }

/* live shelf */
.sh-lives { display: flex; flex-direction: column; gap: 4px; }
.sh-live { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 0; }
.sh-live-mid { display: flex; flex-direction: column; min-width: 0; }
.sh-live-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sh-live-top b { font-size: 17px; overflow-wrap: anywhere; hyphens: auto; line-height: 1.15; }
.sh-rush { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; max-width: 132px; }
.sh-rush-2 { display: flex; gap: 6px; }
.sh-live-bot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sh-count { font-size: 14px; color: #6b6f78; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-bar { display: block; flex: 1; height: 12px; background: #eeeae1; border-radius: 999px; overflow: hidden; }
.sh-bar i { display: block; height: 100%; background: #2f9a4f; border-radius: 999px; transition: width .4s ease; }
.sh-live.is-out .sh-bar i { background: #d2463a; }
.sh-badge { background: #d2463a; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.sh-badge[hidden] { display: none; }
.sh-live .tt-btn { padding: 0; min-width: 64px; }

/* live team */
.tm-live { display: flex; flex-direction: column; gap: 6px; }
.tm-live-line { display: grid; grid-template-columns: 40px 1fr 56px 32px 56px; align-items: center; gap: 8px; }
.tm-live-name { display: flex; flex-direction: column; min-width: 0; }
.tm-live-name b { font-size: 17px; }
.tm-faces { display: flex; gap: 2px; min-height: 0; }
.tm-live-n { text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }
.tm-live-line .tt-btn { padding: 0; min-width: 56px; font-size: 24px; }

/* recap card */
.sh-recap { --c: #9a6b12; margin-top: 14px; }
.sh-recap h3 { align-items: center; }
.sh-key { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: #6b6f78; }
.sh-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.sh-key i.is-sold, .sh-r-bar i.is-sold { background: #2f9a4f; }
.sh-key i.is-thrown, .sh-r-bar i.is-thrown { background: #c9c3b6; }
.sh-r-lines li { min-height: 34px; gap: 10px; }
.sh-r-bar { flex: 1; min-width: 60px; height: 14px; display: flex; background: #f4f1ea; border-radius: 999px; overflow: hidden; }
.sh-r-bar i { display: block; height: 100%; }
.sh-r-n { min-width: 26px; text-align: right; color: #2f9a4f !important; }
.sh-r-miss { font-size: 14px; color: #b3261e; font-weight: 800; white-space: nowrap; }
.sh-recap.is-folded { margin-top: 8px; }
.sh-fold { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--line, #e4dfd3); border-radius: 14px; font: inherit; font-size: 17px; color: #4d5058; padding: 0 14px; cursor: pointer; text-align: left; }
.sh-fold-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 700; }
.sh-see { margin-left: auto; color: var(--accent, #d9412b); font-weight: 800; white-space: nowrap; }

/* makeover + team: the 3D view grows upward so the shop sits in the free top half, above the sheet */
body[data-screen=decor] #world, body[data-screen=team] #world { top: -46vh; }
.sh-kitchen { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; font-size: 16px; color: var(--soft); font-weight: 700; }
.sh-kitchen.is-over b { color: #b36b00; }
.tm-perf { justify-content: flex-start; text-align: left; font-size: 15px; }
.cap-card.is-pending .cap-card-top .tt-icon { opacity: .5; }
.cap-card.is-pending .cap-tag { background: #fff1d6; color: #9a6400; }
.tm-perf { color: var(--ink); }