/* Feature screens opened as modals: Pavilions (js/crafting/ui) and Cultivation Setup (js/cultivate/ui.js). */

/* ---- Pavilions ---- */
.crafting-modal .workshop-card { --c: var(--ui-gold, #ffd700); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.crafting-modal .workshop-header {
    display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px;
    border-radius: var(--r-md, 8px); border-left: 3px solid var(--c);
    background: color-mix(in srgb, var(--c) 14%, rgba(0, 0, 0, 0.28));
}
.crafting-modal .workshop-name { flex: 1; min-width: 0; font-weight: 800; color: var(--c); }
.pv-count {
    margin-left: auto; padding: 3px 12px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--ui-text, #e5e7eb);
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
    background: rgba(0, 0, 0, 0.3);
}
.workshop-worker-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.worker-slot-card {
    --c: var(--ui-gold, #ffd700);
    display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; padding: 10px 12px 12px; text-align: center;
    border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-top: 3px solid var(--c);
    border-radius: var(--r-md, 8px);
}
.worker-slot-card__name { font-weight: 800; font-size: 0.95rem; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.worker-slot-card__stats { display: flex; flex-direction: column; gap: 4px; }
.worker-slot-card__stats span { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.26); min-width: 0; }
.worker-slot-card__stats i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ui-text-dim, #9ca3af); }
.worker-slot-card__stats b { font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--ui-text, #f3f4f6); }
.worker-slot-card__tier { align-self: center; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; color: var(--ui-gold, #ffd700); border: 1px solid rgba(255, 215, 0, 0.35); background: rgba(255, 215, 0, 0.08); }
.worker-slot-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; }
.worker-slot-card__actions .sect-btn { width: 100%; justify-content: center; }
.worker-slot-card--empty { align-items: center; justify-content: center; gap: 6px; min-height: 126px; cursor: pointer; border: 1px dashed var(--sect-border-strong, #4b6b57); border-top: 1px dashed var(--sect-border-strong, #4b6b57); color: var(--ui-text-dim, #9ca3af); }
.worker-slot-card--empty:hover { border-color: var(--ui-gold, #ffd700); color: var(--ui-gold, #ffd700); }
.worker-slot-card__plus { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px dashed currentColor; font-size: 1.3rem; line-height: 1; }
.worker-slot-card__assign { font-size: 0.85rem; font-weight: 700; }
.worker-slot-card--compact { padding: 8px 10px; }
.worker-slot-card--empty { text-align: center; }
.worker-slot-card__meta { font-size: 0.72rem; color: var(--ui-text-dim, #9ca3af); }

/* ---- Cultivation Setup ---- */
.cm { cursor: pointer; --c: var(--ui-gold, #ffd700); }
.cm-card {
    display: flex; align-items: center; gap: 16px; padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, transparent), rgba(0, 0, 0, 0.25));
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.cm:hover .cm-card { border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 25%, transparent); }
.cm-art { flex: 0 0 auto; display: grid; place-items: center; width: 76px; height: 76px; }
.cm-art svg { width: 72px; height: 72px; }
.cm-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cm-name { font-size: 1.08rem; font-weight: 800; line-height: 1.25; color: var(--c); overflow-wrap: anywhere; }
.cm-tier { font-size: 0.82rem; color: var(--ui-text-dim, #b8c6c4); font-variant-numeric: tabular-nums; }
.cm-tier b { color: var(--ui-text, #f3f4f6); }
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-chip { padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; color: var(--ui-text-dim, #cbd5d1); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.cm-chip b { color: var(--c); }
.cm-intent { font-size: 0.78rem; }
.cm-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.cm-bar > span { display: block; height: 100%; background: var(--c); }
.cultivation-setup-content { gap: 14px; }
.cultivation-setup-content .cm-card { width: 100%; }

/* Pill slot card inside Cultivation Setup: art on the left, details and buttons on the right */
.cultivation-setup-content .pill-slot-card .item-picker-card {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "art head" "art chips" "art meta" "art body";
    column-gap: 16px; row-gap: 8px; align-items: start; padding: 14px 16px;
}
.cultivation-setup-content .pill-slot-card .item-card__head { grid-area: head; }
.cultivation-setup-content .pill-slot-card .item-card__chips { grid-area: chips; }
.cultivation-setup-content .pill-slot-card .item-card__art { grid-area: art; align-self: center; margin: 0; height: 104px; }
.cultivation-setup-content .pill-slot-card .item-card__meta { grid-area: meta; }
.cultivation-setup-content .pill-slot-card .item-card__body { grid-area: body; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.cultivation-setup-content .pill-slot-card .item-card__body > div { grid-column: 1 / -1; }
.cultivation-setup-content .pill-slot-card .item-card__body .sect-btn { width: 100%; justify-content: center; }
@media (max-width: 480px) { .cultivation-setup-content .pill-slot-card .item-picker-card { grid-template-columns: 1fr; grid-template-areas: "head" "chips" "art" "meta" "body"; } }

/* ---- Spirits tab ---- */
.sp-page { padding: 16px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; align-items: stretch; }
.sp-card {
    --c: var(--ui-gold, #ffd700);
    display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 14px 16px; text-align: center;
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-top: 3px solid var(--c);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, transparent), transparent 38%), var(--sect-surface-2, rgba(0, 0, 0, 0.25));
}
.sp-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sp-name { font-size: 1.05rem; font-weight: 800; color: var(--c); }
.sp-level { padding: 2px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; color: #fff; background: var(--c); font-variant-numeric: tabular-nums; }
.sp-art { display: grid; place-items: center; width: 100%; height: 92px; }
.sp-art svg, .sp-art img { max-height: 88px; max-width: 88px; }
.sp-art__q { font-size: 2.6rem; color: var(--ui-border, #3b5a46); }
.sp-cat { padding: 1px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--ui-text-dim, #9ca3af); border: 1px solid rgba(255, 255, 255, 0.14); }
.sp-body { width: 100%; flex: 1; }
.sp-rows { display: flex; flex-direction: column; }
.sp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 4px; font-size: 0.84rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; }
.sp-row:last-child { border-bottom: 0; }
.sp-row span { min-width: 0; color: var(--ui-text-dim, #b8c6c4); }
.sp-row strong { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ui-text, #f3f4f6); }
.sp-max { padding: 6px 0; font-size: 0.8rem; color: var(--ui-text-dim, #9ca3af); }
.sp-locked-text { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ui-text-dim, #8b9a95); }
.sp-card--locked { opacity: 0.65; --c: #6b7d7a; }
.sp-card .sp-details { margin-top: auto; background: var(--c); border-color: var(--c); color: #fff; justify-content: center; }
.sp-card--locked .sp-details { background: transparent; color: var(--ui-text-dim, #9ca3af); }
.sp-card .sect-btn.sp-details { background: color-mix(in srgb, var(--c) 82%, #000); border-color: var(--c); color: #fff; }
.sp-card--locked .sect-btn.sp-details { background: transparent; border-color: var(--sect-border, #3b5a46); color: var(--ui-text-dim, #9ca3af); }
/* Buff spirits (Soul): stacked stat lines instead of a wrapping row */
.sp-body .flex.justify-center { flex-direction: column; align-items: center; gap: 4px; }
.sp-body .flex.justify-center > span { white-space: nowrap; }
.sp-body .text-center { padding: 4px 0; }
.sp-body .text-xs { line-height: 1.5; }