/* The pack and work surfaces (mv-ui.js). The labels and the :root insets
   both sheets use are mv-labels.css (src/moltonhim/web/static), which
   mv-labels.js's ensureWorldUi loads. */
/* The work surface owns its colours; sky transitions never animate controls. */
.mv-inventory-panel.mv-work-surface,
.mv-inventory-panel.mv-object-surface {
    position: fixed;
    left: calc(
        var(--world-ui-left, 0px) + var(--world-safe-left) + var(--world-ui-usable-width) / 2
    );
    transform: translate(-50%, -50%);
    z-index: 30;
    box-sizing: border-box;
    --work-slot: 48px;
    --work-gap: 4px;
    --work-ink: #333d32;
    --work-panel: #d4ccb8;
    --work-cell: #b3ac97;
    --work-line: #938b75;
    --work-muted: #626d59;
    --work-accent: #826532;
    --work-paper: #e4dcc7;
    --work-paper-ink: #4c4839;
    --work-timber: #887655;
    width: max-content;
    max-width: calc(var(--world-ui-usable-width) - 24px);
    top: calc(var(--world-ui-top, 0px) + var(--world-safe-top) + var(--world-ui-usable-height) / 2);
    max-height: calc(var(--world-ui-usable-height) - 24px);
    padding: 16px;
    overflow: auto;
    border: 1px solid #92967c;
    border-radius: 4px;
    background:
        repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, #263a2a03 0 1px, transparent 1px 5px), var(--work-panel);
    color: var(--work-ink);
    backdrop-filter: none;
    box-shadow:
        0 2px 0 #68715c,
        0 18px 65px #0005,
        inset 0 1px #f9f5de90;
    font:
        13px/1.4 system-ui,
        sans-serif;
    overscroll-behavior: contain;
    user-select: none;
    scrollbar-width: thin;
}
.mv-inventory-panel.mv-work-night {
    --work-ink: #dedecd;
    --work-panel: #29332c;
    --work-cell: #354236;
    --work-line: #58634b;
    --work-muted: #a3ad94;
    --work-accent: #c6a76b;
    --work-paper: #393d30;
    --work-paper-ink: #ded8bf;
    --work-timber: #807256;
    border-color: #60684f;
    box-shadow:
        0 2px 0 #1b261f,
        0 18px 65px #0008,
        inset 0 1px #b7c19820;
}
.mv-work-surface,
.mv-work-surface * {
    box-sizing: border-box;
    transition: none;
}
.mv-object-surface,
.mv-object-surface * {
    transition: none;
}
.mv-inventory-panel.mv-object-surface {
    box-sizing: border-box;
    width: min(520px, calc(var(--world-ui-usable-width) - 24px));
    padding: 22px 28px;
    --work-ink: #493e2b;
    --work-muted: #79674d;
    --work-paper: #eee1bf;
    --work-paper-ink: #493e2b;
    --work-line: #ac9670;
    --work-accent: #88632d;
    color: var(--work-ink);
    background:
        radial-gradient(ellipse at 0 0, #fff8de6b, transparent 65%),
        linear-gradient(90deg, #87663820, transparent 4%, transparent 96%, #87663815),
        var(--work-paper);
    border: 1px solid #a28b63;
    border-radius: 3px 9px 5px 2px;
    box-shadow:
        1px 2px 0 #e6d4ae,
        2px 4px 0 #89744e,
        0 20px 65px #20190f70;
}
.mv-inventory-panel.mv-object-surface.mv-work-night {
    --work-ink: #ded1b4;
    --work-muted: #b3a383;
    --work-paper: #5b5746;
    --work-paper-ink: #e6d6b4;
    --work-line: #93815c;
    --work-accent: #e1bb6c;
}
.mv-inventory-panel.mv-object-surface[data-surface='painting'] {
    background:
        linear-gradient(#6e593293, #554521a3),
        url('./textures/field-cotton.webp') center / 420px;
    border: 6px solid #7b6141;
    --work-ink: #f3e3be;
    --work-muted: #e0caa5;
}
.mv-object-surface button:not(.mv-kit-close):not(.mv-paint-swatch) {
    min-height: 44px;
    border-radius: 2px !important;
    border-color: var(--work-line) !important;
    color: var(--work-ink) !important;
}
.mv-object-action {
    padding: 9px 13px;
    border: 1px solid var(--work-line);
    background: linear-gradient(#f5e8cc40, #947c4920);
    box-shadow:
        0 1px #7b644f60,
        inset 0 1px #fff4d060;
    font:
        14px Georgia,
        serif;
    cursor: pointer;
}
.mv-object-action:disabled {
    opacity: 0.4;
    cursor: default;
}
.mv-object-surface button:focus-visible {
    outline: 2px solid var(--work-accent);
    outline-offset: 2px;
}
.mv-object-surface button:not(.mv-kit-close):not(.mv-paint-swatch):hover:not(:disabled) {
    background: var(--work-cell) !important;
}
.mv-note-surface textarea {
    width: 100%;
    box-sizing: border-box;
    resize: none;
    height: clamp(90px, calc(var(--world-ui-height, 100dvh) - 210px), 180px);
    border-radius: 0 !important;
    border: 0;
    border-bottom: 1px solid var(--work-line);
    background: transparent !important;
    color: var(--work-paper-ink) !important;
    border-color: var(--work-line) !important;
    font:
        16px/1.7 Georgia,
        serif !important;
    padding: 14px 4px !important;
}
.mv-note-surface .mv-object-actions button {
    background: #9e82532b !important;
}
.mv-note-surface [data-err] {
    color: var(--work-ink) !important;
}
.mv-work-surface [hidden],
.mv-held-item[hidden] {
    display: none !important;
}
.mv-work-surface button,
.mv-work-surface input,
.mv-work-surface select {
    font: inherit;
    color: inherit;
    border-radius: 2px;
    box-shadow: none;
}
.mv-work-surface button {
    cursor: pointer;
}
.mv-work-surface button:disabled {
    opacity: 0.45;
    cursor: default;
}
.mv-work-surface button:focus-visible,
.mv-work-surface input:focus-visible,
.mv-work-surface select:focus-visible {
    outline: 2px solid var(--work-accent);
    outline-offset: 2px;
    z-index: 1;
}
.mv-work-surface button:hover:not(:disabled) {
    filter: brightness(1.07);
}
.mv-work-surface button:active:not(:disabled) {
    filter: brightness(0.94);
}
.mv-work-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--work-line);
}
.mv-work-header button {
    min-width: 44px;
    min-height: 36px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
}
.mv-work-header [data-close],
.mv-work-header [data-letter-back] {
    font-size: 23px;
    padding: 0;
}
.mv-work-surface .mv-work-header {
    justify-content: flex-end;
    border: 0;
    margin-bottom: 8px;
    padding: 0;
}
/* One working area above the bag; the recipe leaf spans both rows. */
.mv-inventory-panel.mv-work-surface {
    --work-slot: 48px;
    --tray-slot: 48px;
    --material-slot: 28px;
    --recipe-row: 42px;
    --craft-height: 204px;
    --book-width: 252px;
    --bag-width: calc(9 * var(--work-slot) + 8 * var(--work-gap));
    --work-ink: #342e21;
    --work-muted: #72644c;
    --work-panel: #cabea1;
    --work-cell: #9a896d;
    --work-line: #897352;
    --work-accent: #795223;
    --work-paper: #efe2be;
    --work-paper-ink: #493e2b;
    --kit-shade: #cbbd9d92;
    --kit-stitch: #f3e2bbae;
    --kit-pocket: #827f6894;
    --kit-belt: #69563c;
    --kit-belt-ink: #f1dfb4;
    isolation: isolate;
    padding: 30px;
    height: auto;
    overflow-y: auto;
}
/* The cloth belongs to the pack, never to the furniture beside it. */
.mv-inventory-panel.mv-kit,
.mv-work-inventory.mv-kit {
    border: 1px solid #665538;
    border-radius: 13px 9px 15px 8px;
    background:
        radial-gradient(ellipse at 32% 0, #fff8de42, transparent 62%),
        linear-gradient(97deg, #5541221a, transparent 5%, transparent 95%, #55412228),
        linear-gradient(var(--kit-shade), var(--kit-shade)),
        url('./textures/field-cotton.webp') 0 0 / 420px 420px;
    box-shadow:
        0 3px 0 #5d4d36,
        0 8px 12px #18150e35,
        0 25px 70px #15140c65,
        inset 0 0 0 7px #806c4845,
        inset 0 1px 2px #fff2ce;
}
/* A turned hem and running stitch, separate from the weave beneath it. */
.mv-kit::before,
.mv-kit::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
}
.mv-kit::before {
    inset: 7px;
    border: 1px solid #6c583940;
    border-radius: 7px 4px 10px 4px;
    box-shadow:
        0 1px 1px #fff3d180,
        inset 0 2px 5px #49391b25;
}
.mv-kit::after {
    inset: 11px;
    border: 1px dashed var(--kit-stitch);
    border-radius: 5px 3px 8px 3px;
}
.mv-inventory-panel.mv-work-surface.mv-work-night {
    --work-ink: #eadcb9;
    --work-muted: #bdb094;
    --work-panel: #6d6754;
    --work-cell: #655e4c;
    --work-line: #9f8962;
    --work-accent: #e1bb6c;
    --work-paper: #a99976;
    --work-paper-ink: #302d23;
    --kit-shade: #1a231db0;
    --kit-stitch: #ddcba65c;
    --kit-pocket: #17201740;
    --kit-belt: #3c3b2d;
    --kit-belt-ink: #d8ca9f;
    border-color: #3a3a2b;
}
.mv-work-surface:focus {
    outline: none;
}
.mv-work-layout {
    display: grid;
    grid-template-columns: var(--book-width) var(--bag-width);
    grid-template-rows: var(--craft-height) auto;
    grid-template-areas: 'book craft' 'book inventory';
    gap: 20px 24px;
    min-height: 0;
}
.mv-work-inventory {
    grid-area: inventory;
    min-width: 0;
    min-height: 0;
    align-self: start;
}
.mv-work-layout:has(.mv-work-book[hidden]) {
    grid-template-columns: var(--bag-width);
    grid-template-areas: 'craft' 'inventory';
}
.mv-work-book {
    --work-muted: var(--work-paper-ink);
    --work-accent: #76552b;
    --work-line: #8d7952;
    grid-area: book;
    contain: size;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    min-height: 0;
    padding: 16px 12px 14px 22px;
    background:
        radial-gradient(ellipse at 8% 20%, #fff4d650, transparent 75%),
        linear-gradient(90deg, #624d352c, #fff4d628 7%, transparent 12%), var(--work-paper);
    color: var(--work-paper-ink);
    border: 1px solid #a4906380;
    border-left: 5px solid #716047;
    border-radius: 3px 10px 10px 3px;
    box-shadow:
        1px 1px 0 #f7e9c8,
        2px 3px 0 #a59572,
        3px 4px 0 #e6d5af,
        4px 6px 0 #746347,
        6px 9px 12px #392b2528;
}
/* Binding holes with thread loops: decoration never takes pointer input. */
.mv-work-book::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: 16px;
    width: 7px;
    pointer-events: none;
    background:
        radial-gradient(ellipse 3px 2px at 50% 3px, #30291b99 60%, transparent 100%) 0 0 / 7px 38px,
        linear-gradient(90deg, transparent 2px, #a0875c 3px, #f6e4b8 4px, transparent 5px) 0 4px /
            7px 38px;
}
/* Scrollable leaves use the same quiet, worn-brass edge as the slots. */
:is(.mv-work-surface, .mv-object-surface),
:is(.mv-work-surface, .mv-object-surface) * {
    scrollbar-width: thin;
    scrollbar-color: var(--work-line) transparent;
}
:is(.mv-work-surface, .mv-object-surface)::-webkit-scrollbar,
:is(.mv-work-surface, .mv-object-surface) ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
:is(.mv-work-surface, .mv-object-surface)::-webkit-scrollbar-track,
:is(.mv-work-surface, .mv-object-surface) ::-webkit-scrollbar-track {
    background: transparent;
}
:is(.mv-work-surface, .mv-object-surface)::-webkit-scrollbar-thumb,
:is(.mv-work-surface, .mv-object-surface) ::-webkit-scrollbar-thumb {
    background: var(--work-line);
    border-radius: 3px;
}
:is(.mv-work-surface, .mv-object-surface)::-webkit-scrollbar-button,
:is(.mv-work-surface, .mv-object-surface) ::-webkit-scrollbar-button {
    display: none;
}
/* Search and categories are a compact edge of the recipe leaf. */
.mv-book-search {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.mv-work-surface .mv-work-book input {
    min-width: 0;
    width: 100%;
    height: 30px;
    padding: 4px 8px;
    border: 0;
    border-bottom: 1px solid #9b896459;
    border-radius: 0;
    user-select: text;
    background: transparent !important;
    color: var(--work-paper-ink) !important;
    border-color: var(--work-line) !important;
    box-shadow: none;
    font:
        italic 13px Georgia,
        serif;
}
.mv-work-surface .mv-work-book input::placeholder {
    color: var(--work-muted) !important;
    opacity: 1;
}
.mv-book-filters {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid #88765540;
}
.mv-book-filters button,
.mv-book-search button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    padding: 2px;
}
.mv-book-filters button {
    flex: 1;
}
.mv-book-search svg,
.mv-book-filters svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
}
.mv-book-filters button[aria-pressed='true'],
.mv-book-search button[aria-pressed='true'] {
    background: #ae8b4540;
    border-color: #8d6f3670;
    border-radius: 5px 5px 1px 1px;
    box-shadow: 0 2px 0 #826335;
}
.mv-book-items {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: var(--recipe-row);
    gap: 4px;
    align-content: start;
    min-height: var(--recipe-row);
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scroll-snap-type: y proximity;
}
.mv-recipe-item {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--recipe-row);
    scroll-snap-align: start;
    border: 1px solid #8a7c6038;
    background: #87795820;
    padding: 3px;
}
.mv-recipe-item[aria-pressed='true'] {
    border-color: var(--work-accent);
    background: #b29b6630;
    box-shadow: inset 0 -2px var(--work-accent);
}
.mv-recipe-item.mv-unavailable {
    background: transparent;
    border-color: transparent;
}
.mv-recipe-item.mv-unavailable svg {
    opacity: 0.65;
}
.mv-no-recipes {
    grid-column: 1/-1;
    color: var(--work-muted);
    padding: 14px 0;
}
.mv-work-upper {
    grid-area: craft;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mv-work-upper[data-mode='craft']::before {
    content: '';
    position: absolute;
    inset: 0 -8px;
    border-radius: 6px 10px 5px 9px;
    border: 1px dashed #f1dfb66b;
    background: #fff6dd16;
    box-shadow: 0 1px 3px #42321b12;
    z-index: -1;
    pointer-events: none;
}
.mv-work-upper[data-mode='craft'] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: 0 8px;
}
.mv-craft-row {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.mv-recipe-card {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid #8a725445;
    border-radius: 3px 9px 4px 2px;
    background:
        linear-gradient(90deg, #795d2820, transparent 8%, transparent 94%, #795d2815),
        var(--work-paper);
    color: var(--work-paper-ink);
    box-shadow:
        1px 2px 0 #9e896340,
        0 3px 5px #42321b20,
        inset 0 1px #fff8df65;
}
.mv-recipe-card:has(.mv-recipe-caption:empty) {
    visibility: hidden;
}
.mv-work-upper[data-mode='craft'] .mv-recipe-caption {
    margin: 0;
    text-align: left;
    color: inherit;
    font-size: 14px;
    line-height: 1.25;
}
.mv-recipe-card:has(.mv-material-choice) .mv-recipe-caption {
    padding-bottom: 7px;
    border-bottom: 1px solid #8a725430;
}
.mv-craft-tray {
    --work-slot: var(--tray-slot);
    display: grid;
    gap: var(--work-gap);
}
.mv-item-slot {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--work-slot);
    height: var(--work-slot);
    padding: 5px;
    color: var(--work-ink);
    background: linear-gradient(180deg, #201b1325, transparent 36%, #fff0c412), var(--kit-pocket);
    border: 1px solid #6d573848;
    border-bottom-color: #e8d5a981;
    border-radius: 4px 4px 9px 8px !important;
    box-shadow:
        inset 0 3px 5px #31281a23,
        0 1px 0 #fff0cc40 !important;
    touch-action: none;
}
.mv-work-surface:not(.mv-carrying) .mv-item-slot[data-empty='true'] {
    touch-action: pan-y;
}
.mv-item-slot::before {
    content: '';
    position: absolute;
    inset: 3px 3px 4px;
    border: 1px dashed #fae8bd50;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    pointer-events: none;
}
.mv-item-slot > svg {
    position: relative;
    filter: drop-shadow(0 2px 1px #201b1340);
}
.mv-item-slot svg,
.mv-recipe-item svg {
    pointer-events: none;
    max-width: 100%;
    max-height: 100%;
}
.mv-item-slot > svg {
    width: calc(var(--work-slot) - 10px);
    height: calc(var(--work-slot) - 10px);
}
.mv-recipe-item > svg {
    width: calc(var(--recipe-row) - 8px);
    height: calc(var(--recipe-row) - 8px);
}
.mv-work-night .mv-item-slot {
    border-color: #262e2050;
    border-bottom-color: #caba8950;
}
.mv-item-slot b {
    position: absolute;
    right: 5px;
    bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #fff7df;
    text-shadow: 0 1px 3px #221b10;
}
.mv-item-slot small {
    position: absolute;
    left: 3px;
    top: 1px;
    font-size: 10px;
    color: var(--work-muted);
}
.mv-item-slot.mv-ghost svg {
    opacity: 0.28;
}
.mv-item-slot.mv-ghost {
    border-style: solid;
}
.mv-item-slot.mv-output {
    --work-slot: calc(var(--tray-slot) + 8px);
    width: var(--work-slot);
    height: var(--work-slot);
    border-color: var(--work-accent);
}
.mv-item-slot.mv-drop-target {
    outline: 2px solid var(--work-accent);
    outline-offset: -2px;
}
.mv-item-slot[data-drop-count]::after {
    content: '+' attr(data-drop-count);
    position: absolute;
    right: 2px;
    bottom: 0;
    background: var(--work-panel);
    color: var(--work-accent);
    font-weight: 700;
}
.mv-work-arrow {
    font-size: 24px;
    color: var(--work-muted);
    font-family: Georgia, serif;
}
.mv-recipe-caption,
.mv-station-caption {
    min-height: 20px;
    text-align: center;
    color: var(--work-muted);
    margin-top: 8px;
}
.mv-recipe-caption {
    font-family: Georgia, serif;
    font-size: 15px;
}
/* Material choices stay in the recipe, with no disclosure or nested scroller. */
.mv-material-choices {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}
.mv-material-choice {
    min-width: 0;
}
.mv-material-choice:has(> span) {
    display: grid;
    gap: 2px;
}
.mv-material-choice > span {
    display: block;
    margin: 0;
    text-align: left;
    font:
        italic 10px/1.1 Georgia,
        serif;
    color: var(--work-paper-ink);
    opacity: 0.85;
}
.mv-material-palette {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3px;
}
.mv-material-palette button {
    display: grid;
    place-items: center;
    width: var(--material-slot);
    height: var(--material-slot);
    padding: 2px;
    background: #76633f0c;
    border: 1px solid #79664a25;
    border-radius: 2px 3px 4px 2px;
    box-shadow:
        inset 0 1px 2px #44362015,
        0 1px #fff9e13b;
}
.mv-material-palette button[aria-pressed='true'] {
    border-color: #83642d;
    background: #bba06b30;
    box-shadow:
        inset 0 -2px #83642d,
        0 1px #fff9e16b;
}
.mv-material-palette .mv-unavailable svg {
    opacity: 0.4;
    filter: grayscale(1);
}
.mv-material-palette svg {
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.mv-work-bag,
.mv-work-belt,
.mv-work-overflow {
    display: grid;
    grid-template-columns: repeat(9, var(--work-slot));
    gap: var(--work-gap);
}
.mv-work-bag {
    justify-content: center;
}
.mv-work-belt {
    position: relative;
    grid-template-columns: repeat(9, var(--work-slot));
    margin-top: 18px;
    padding: 10px 6px;
    margin-inline: -6px;
    border-top: 1px solid #47382365;
    border-bottom: 1px solid #f3e0b34a;
    border-radius: 4px 4px 7px 6px;
    background: linear-gradient(0deg, #231a1426, transparent 30%, #e0c58d18), var(--kit-belt);
    box-shadow:
        0 3px 5px #33271932,
        inset 0 2px 3px #251d171a;
}
.mv-work-belt::before,
.mv-work-belt::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    border-top: 1px dashed #e4c6926b;
}
.mv-work-belt::before {
    top: 4px;
}
.mv-work-belt::after {
    bottom: 4px;
}
.mv-work-belt .mv-item-slot {
    background: #1f1c1320;
    border-color: #e4cb9540;
    border-top-color: #251c134a;
}
.mv-work-belt .mv-item-slot small {
    color: var(--kit-belt-ink);
}
.mv-work-overflow {
    margin-top: 10px;
    max-height: 110px;
    overflow-y: auto;
}
.mv-work-overflow:empty {
    display: none;
}
.mv-work-overflow .mv-item-slot {
    border-color: var(--work-accent);
}
.mv-chest-grid {
    display: grid;
    grid-template-columns: repeat(var(--chest-columns), minmax(0, 1fr));
    width: min(
        100%,
        calc(var(--chest-columns) * (var(--work-slot) + var(--work-gap)) - var(--work-gap))
    );
    margin: 0 auto;
    gap: var(--work-gap);
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 8px;
    box-sizing: content-box;
    max-width: calc(100% - 16px);
    background: linear-gradient(90deg, #8e704d, #b3976a 48%, #8a6d4d);
    border-radius: 3px;
    box-shadow:
        inset 0 2px 5px #35241860,
        0 2px #5e4a31;
}
.mv-chest-grid .mv-item-slot {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 2px !important;
    background: #37261530;
    border-color: #4e3b2950;
}
.mv-chest-grid .mv-item-slot::before {
    display: none;
}
.mv-chest-grid .mv-item-slot svg {
    position: absolute;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}
/* A station rests on its own working bed; carried items stay in the pack. */
.mv-work-upper:has(.mv-station-bed) {
    display: grid;
    place-items: center;
    justify-content: stretch;
}
.mv-station-bed {
    position: relative;
    width: min(360px, 100%);
    padding: 20px 18px 10px;
    border: 6px solid #806345;
    border-width: 7px 3px;
    border-radius: 4px 5px 3px 4px;
    background:
        linear-gradient(#e0ceb5c9, #c1ab88d9),
        url('./textures/field-cotton.webp') center / 340px;
    box-shadow:
        0 3px 0 #574330,
        0 6px 8px #3c2e282b,
        inset 0 2px 7px #51412d45;
    --work-muted: #66533c;
    min-height: 184px;
    display: grid;
    align-content: center;
}
.mv-work-upper[data-mode='furnace'] .mv-station-bed {
    border-color: #706f62;
    background:
        linear-gradient(#969a8eb0, #767c72bf),
        url('./textures/mineral-slate.webp') center / 180px;
    box-shadow:
        0 3px 0 #484d43,
        0 6px 9px #27342b30,
        inset 0 2px 8px #25332940;
    --work-muted: #313d33;
}
.mv-work-night .mv-station-bed {
    filter: brightness(0.82);
}
.mv-station-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.mv-station-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mv-station-bed .mv-item-slot {
    border: 1px solid #6b5b42;
    border-radius: 3px !important;
    background: linear-gradient(145deg, #403a3035, #e7d9b629), #b7a381;
    box-shadow:
        inset 0 2px 4px #3e302952,
        0 1px #fff0cd70;
}
.mv-station-bed .mv-item-slot::before {
    display: none;
}
.mv-work-upper[data-mode='furnace'] .mv-item-slot {
    background: linear-gradient(145deg, #29372c66, #cbd0ba18), #93998b;
    border-color: #515c4e;
}
.mv-station-output .mv-item-slot {
    width: 58px;
    height: 58px;
}
.mv-slot-mark {
    width: 24px !important;
    height: 24px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    color: var(--work-muted);
    opacity: 0.65;
}
.mv-station-dial {
    width: 76px;
    height: 76px;
    position: relative;
    flex: 0 0 auto;
}
.mv-station-dial::before,
.mv-station-dial::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 15px;
    height: 1px;
    background: #584b3770;
}
.mv-station-dial::before {
    right: calc(100% + 4px);
}
.mv-station-dial::after {
    left: calc(100% + 4px);
}
.mv-station-ring {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #66563b55;
    stroke-width: 1.5;
}
.mv-station-meter {
    stroke: #775725;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transform: rotate(-90deg);
    transform-origin: center;
}
.mv-station-portrait {
    position: absolute;
    inset: 12px;
    display: grid;
    place-items: center;
}
.mv-station-portrait svg {
    width: 52px;
    height: 52px;
}
.mv-station-active[data-mode='furnace'] .mv-station-meter {
    stroke: #e0b074;
}
.mv-station-active[data-mode='furnace'] [data-area='fuel'] {
    box-shadow:
        inset 0 -4px 12px #cd793457,
        inset 0 2px 4px #252d2740,
        0 1px #edd09c70;
}
.mv-station-caption {
    font:
        italic 12px/20px Georgia,
        serif;
    min-height: 20px;
    margin-top: 8px;
}
@media (max-width: 759px) {
    .mv-station-row {
        gap: 20px;
    }
    .mv-station-bed {
        padding-inline: 10px;
    }
    .mv-station-bed .mv-item-slot {
        --work-slot: 44px;
    }
    .mv-station-output .mv-item-slot {
        width: 52px;
        height: 52px;
    }
}
.mv-delivery {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 140px;
}
.mv-delivery .mv-mail-opening {
    width: 150px;
    height: 90px;
    padding: 0;
    background: linear-gradient(95deg, #8f704a, #b29465 48%, #94764f);
    border: 2px solid #78603e;
    border-radius: 3px 4px 2px 3px;
    box-shadow:
        0 2px #4b3b28,
        inset 0 1px #e7c993;
}
.mv-mail-opening svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.mv-delivery .mv-mail-opening[aria-disabled='false']:is(:hover, .mv-drop-target),
.mv-delivery .mv-mail-opening:focus-visible {
    outline: 2px solid #c7a363;
    outline-offset: 4px;
    box-shadow:
        0 2px #4b3b28,
        inset 0 1px #ffe2aa,
        0 0 18px #dfb96c35;
}
.mv-mail-opening[aria-disabled='false']:is(:hover, .mv-drop-target) .mv-mail-paper {
    fill: #fff1ce;
}
.mv-mail-slot {
    fill: #342a20;
    stroke: #cead73;
}
.mv-mail-paper {
    fill: #e9dabc;
    stroke: #967a4f;
}
.mv-mail-fold {
    fill: none;
    stroke: #bca67f;
}
/* Status is transient and never changes the surface or slot positions. */
.mv-work-status {
    position: absolute;
    z-index: 3;
    bottom: 8px;
    left: 12px;
    right: 12px;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 0 auto;
    padding: 6px 10px;
    background: var(--work-panel);
    border: 1px solid var(--work-line);
    box-shadow: 0 2px 6px #0002;
    font-size: 12px;
    color: var(--work-muted);
    pointer-events: none;
}
.mv-work-status:empty {
    display: none;
}
.mv-work-surface .mv-work-header {
    position: absolute;
    top: 10px;
    right: 9px;
    z-index: 2;
    margin: 0;
}
.mv-work-surface .mv-work-header button {
    min-width: 30px;
    min-height: 30px;
    font-size: 21px;
    color: var(--work-ink);
}
.mv-work-header .mv-kit-close {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.mv-kit-close::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #594b3665;
    background: radial-gradient(circle at 38% 26%, #a49571, #76674c);
    box-shadow:
        0 2px 3px #392b2438,
        inset 0 1px #e4d8b580,
        inset 0 -2px #3d322626;
}
.mv-kit-close svg {
    position: relative;
    width: 24px;
    height: 24px;
    fill: none;
    stroke-linecap: round;
    pointer-events: none;
}
.mv-close-shadow {
    stroke: #423825;
    stroke-width: 4px;
}
.mv-close-thread {
    stroke: #ebddbc;
    stroke-width: 1.4px;
}
.mv-work-night .mv-kit-close::before {
    background: radial-gradient(circle at 38% 26%, #756f52, #4b503e);
}
.mv-work-error {
    color: #8d382d;
}
.mv-work-night .mv-work-error {
    color: #efac89;
}
.mv-craft-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;
}
.mv-craft-quantity input {
    width: 46px;
    padding: 4px;
    background: transparent;
    border: 1px solid var(--work-line);
}
.mv-output-group {
    position: relative;
}
.mv-output-group .mv-craft-quantity {
    font-size: 12px;
}
/* Only the in-world conversation takes this treatment; the main chat is separate. */
.world-chat.open .wc-log {
    background: linear-gradient(100deg, #3b382eea, #292e27f5);
    border: 1px solid #a995695c;
    border-radius: 3px 7px 3px 3px;
    box-shadow:
        inset 3px 0 #bca67730,
        0 5px 18px #15231835;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 12px 16px;
    gap: 7px;
    scrollbar-width: thin;
    scrollbar-color: #958666 transparent;
}
.world-chat.open .wc-log::-webkit-scrollbar {
    width: 5px;
}
.world-chat.open .wc-log::-webkit-scrollbar-thumb {
    background: #958666;
    border-radius: 3px;
}
.world-chat .wc-line {
    font:
        14px/1.55 Georgia,
        serif;
    color: #eee3cd;
}
.world-chat.open .wc-line {
    text-shadow: none;
}
.world-chat .wc-who {
    font:
        600 11px/1.5 system-ui,
        sans-serif;
    color: #c2cdad;
}
.world-chat .wc-line.dm-out .wc-who {
    color: #c7b79a;
}
.world-chat .wc-form {
    background: #eee1c4;
    border: 1px solid #a99569;
    border-radius: 2px 3px 5px 3px;
    box-shadow: 0 2px #71604470;
    padding: 8px 10px;
}
.world-chat .wc-input {
    color: #443a2b;
    font:
        15px/1.5 Georgia,
        serif;
}
.world-chat .wc-input::placeholder {
    color: #897959;
}
.world-chat .wc-form:focus-within {
    border-color: #715a2d;
}
.world-pack-open .world-chat {
    visibility: hidden;
}
[data-hotbar] [data-vslot] {
    border-radius: 3px !important;
}
[data-hotbar] [data-vslot]:focus-visible {
    outline: 2px solid #dbca97;
    outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
    .mv-work-surface .mv-item-slot,
    .mv-work-surface .mv-recipe-item {
        transition:
            transform 100ms ease,
            filter 100ms ease;
    }
    .mv-work-surface .mv-item-slot:active,
    .mv-work-surface .mv-recipe-item:active {
        transform: translateY(1px);
    }
    .mv-station-meter {
        transition: stroke-dashoffset 1s linear;
    }
}
/* The held stack IS the desktop cursor, including over nested controls. */
.mv-holding-item,
.mv-holding-item * {
    cursor: var(--held-item-cursor) !important;
}
.mv-held-item {
    position: fixed;
    z-index: 92;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: none !important;
    filter: drop-shadow(0 3px 3px #0008);
    color: #fff;
    font: 12px system-ui;
}
.mv-held-item b {
    position: absolute;
    right: 0;
    bottom: 0;
    text-shadow: 0 1px 2px #000;
}
/* Keep the working area and bag together as the available space changes. */
@media (max-width: 899px) {
    .mv-inventory-panel.mv-work-surface {
        --work-slot: 44px;
        --tray-slot: 44px;
        --material-slot: 24px;
        --book-width: 220px;
        --craft-height: 196px;
        padding: 20px;
    }
    .mv-work-layout {
        gap: 16px 20px;
    }
    .mv-work-upper[data-mode='craft'] {
        column-gap: 12px;
    }
}
@media (max-height: 520px) and (min-width: 760px) {
    .mv-inventory-panel.mv-work-surface {
        --work-slot: 48px;
        --tray-slot: 34px;
        --material-slot: 24px;
        --recipe-row: 36px;
        --book-width: 220px;
        --craft-height: 196px;
        padding: 12px;
    }
    .mv-work-layout {
        gap: 16px;
    }
    .mv-work-upper[data-mode='craft'] {
        column-gap: 12px;
    }
}
@media (max-height: 440px) and (min-width: 760px) {
    .mv-inventory-panel.mv-work-surface {
        --work-slot: 42px;
        --tray-slot: 30px;
        --material-slot: 22px;
        --recipe-row: 32px;
        --craft-height: 188px;
        padding: 8px;
    }
    .mv-work-layout {
        gap: 14px;
    }
}
@media (max-width: 759px) {
    .mv-inventory-panel.mv-work-surface {
        --work-slot: calc((min(calc(var(--world-ui-usable-width) - 20px), 438px) - 74px) / 9);
        --tray-slot: 40px;
        --material-slot: 32px;
        --recipe-row: 44px;
        --craft-height: 284px;
        max-width: calc(var(--world-ui-usable-width) - 20px);
        width: min(438px, calc(var(--world-ui-usable-width) - 20px));
        padding: 48px 12px 12px;
    }
    .mv-work-surface[data-surface='table'] {
        --craft-height: 368px;
    }
    .mv-work-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--craft-height) auto 224px;
        grid-template-areas: 'craft' 'inventory' 'book';
        gap: 16px;
    }
    .mv-work-layout:has(.mv-work-book[hidden]) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--craft-height) auto;
    }
    .mv-work-inventory {
        justify-self: center;
    }
    /* Compact pockets keep the item readable instead of letting its count
       cover the whole portrait. Slot addresses and belt order stay fixed. */
    .mv-work-inventory .mv-item-slot {
        padding: 3px;
    }
    .mv-work-inventory .mv-item-slot > svg {
        width: calc(var(--work-slot) - 6px);
        height: calc(var(--work-slot) - 6px);
    }
    .mv-work-inventory .mv-item-slot b {
        right: 2px;
        bottom: 1px;
        font-size: clamp(9px, 3vw, 12px);
    }
    .mv-work-inventory .mv-item-slot small {
        font-size: 8px;
    }
    .mv-work-upper[data-mode='craft'] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }
    .mv-craft-row {
        justify-content: center;
    }
    .mv-recipe-card {
        width: 100%;
        margin-top: 10px;
    }
    .mv-work-upper[data-mode='craft'] .mv-recipe-caption {
        text-align: center;
    }
    .mv-material-choice > span {
        text-align: center;
    }
    .mv-material-palette {
        justify-content: center;
    }
    .mv-work-book {
        padding: 10px 10px 10px 21px;
    }
}
@media (pointer: coarse) {
    .mv-work-surface .mv-work-book input,
    .mv-craft-quantity input {
        font-size: 16px;
    }
    .mv-work-surface .mv-work-book input {
        height: 44px;
    }
    .mv-inventory-panel.mv-work-surface .mv-work-header [data-close] {
        min-width: 44px;
        min-height: 44px;
    }
    .mv-output-group {
        min-height: 112px;
    }
    .mv-craft-quantity input {
        min-height: 44px;
    }
    .mv-work-surface button:not(.mv-item-slot):not([data-material]) {
        min-height: 44px;
    }
    .mv-inventory-panel.mv-work-surface {
        --craft-height: 204px;
    }
}
@media (pointer: coarse) and (max-width: 759px) {
    .mv-inventory-panel.mv-work-surface {
        --craft-height: 284px;
        --material-slot: 36px;
        padding-top: 56px;
    }
    .mv-work-surface[data-surface='table'] {
        --craft-height: 368px;
    }
}
@media (pointer: coarse) and (min-width: 380px) and (max-width: 759px) {
    .mv-inventory-panel.mv-work-surface {
        padding-top: 48px;
    }
}

/* Furniture and the opened pack are two objects in one interaction surface. */
.mv-inventory-panel.mv-work-surface.mv-docked {
    --kit-padding: 26px;
    --kit-width: calc(var(--bag-width) + 2 * var(--kit-padding) + 2px);
    width: max-content;
    max-width: calc(var(--world-ui-usable-width) - 16px);
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 10px 18px #15140c55);
}
.mv-docked .mv-work-layout {
    grid-template-columns: var(--book-width) var(--kit-width);
    grid-template-rows: auto auto;
    gap: 16px 20px;
    align-items: center;
}
.mv-docked .mv-work-layout:has(.mv-work-book[hidden]) {
    grid-template-columns: var(--kit-width);
    grid-template-rows: auto auto;
}
.mv-docked .mv-work-book {
    align-self: stretch;
}
.mv-docked .mv-work-inventory {
    position: relative;
    isolation: isolate;
    width: var(--kit-width);
    padding: 38px var(--kit-padding) 22px;
    box-shadow:
        0 3px 0 #5d4d36,
        inset 0 0 0 7px #806c4845,
        inset 0 1px 2px #fff2ce;
}
.mv-docked .mv-work-upper {
    width: 100%;
}
.mv-docked .mv-work-header {
    top: 4px;
    right: 6px;
}
.mv-docked .mv-work-upper[data-mode='craft'] {
    height: max(236px, var(--craft-height));
    padding: 18px;
    border: 4px solid #806345;
    border-radius: 4px 5px 3px 4px;
    background: linear-gradient(100deg, #b3976a, #c8b18a 45%, #a78b62);
    box-shadow:
        0 3px #574330,
        inset 0 2px 5px #51412d45;
    grid-template-columns: max-content minmax(0, 1fr);
}
.mv-docked .mv-work-upper[data-mode='craft']::before {
    display: none;
}
.mv-docked .mv-work-upper[data-mode='craft'] .mv-item-slot {
    border-radius: 3px !important;
    background: #4b361b25;
}
.mv-docked .mv-work-upper[data-mode='craft'] .mv-item-slot::before {
    display: none;
}
.mv-docked.mv-work-night .mv-work-inventory {
    border-color: #3a3a2b;
}
.mv-docked .mv-chest-grid {
    margin-block: 3px;
}
/* Side docking keeps transfer distances short on a wide desk. */
@media (min-width: 760px) and (max-height: 440px) {
    .mv-inventory-panel.mv-work-surface.mv-docked {
        --kit-padding: 16px;
    }
}
@media (min-width: 940px) {
    .mv-docked[data-surface='station'] .mv-work-layout:has(.mv-work-book[hidden]) {
        grid-template-columns: 320px var(--kit-width);
        grid-template-rows: auto;
        grid-template-areas: 'craft inventory';
    }
    .mv-docked[data-surface='chest']:has([data-mode='delivery'])
        .mv-work-layout:has(.mv-work-book[hidden]) {
        grid-template-columns: 224px var(--kit-width);
        grid-template-rows: auto;
        grid-template-areas: 'craft inventory';
    }
}
@media (min-width: 1120px) {
    .mv-docked[data-surface='chest'] .mv-work-layout:has(.mv-work-book[hidden]) {
        grid-template-columns: var(--kit-width) var(--kit-width);
        grid-template-rows: auto;
        grid-template-areas: 'craft inventory';
    }
}
@media (min-width: 820px) and (max-height: 440px) {
    .mv-docked:is([data-surface='station'], [data-surface='chest'])
        .mv-work-layout:has(.mv-work-book[hidden]) {
        grid-template-columns: minmax(0, 280px) var(--kit-width);
        grid-template-rows: auto;
        grid-template-areas: 'craft inventory';
    }
    .mv-inventory-panel.mv-work-surface.mv-docked:is(
            [data-surface='station'],
            [data-surface='chest']
        ) {
        --kit-padding: 18px;
        --work-slot: min(42px, calc((var(--world-ui-usable-width) - 410px) / 9));
    }
    .mv-station-row {
        gap: 12px;
    }
}
@media (max-width: 759px) {
    .mv-inventory-panel.mv-work-surface.mv-docked {
        --kit-padding: 18px;
        padding: 8px;
    }
    .mv-docked .mv-work-layout {
        grid-template-columns: var(--kit-width);
        grid-template-rows: auto auto 224px;
        grid-template-areas: 'craft' 'inventory' 'book';
    }
    .mv-docked .mv-work-upper[data-mode='craft'] {
        padding: 14px;
    }
}
@media (pointer: coarse) {
    .mv-docked .mv-work-inventory {
        padding-top: 52px;
    }
}
@media (max-width: 379px) {
    .mv-inventory-panel.mv-work-surface:not([data-surface='table']) {
        --craft-height: 312px;
    }
}
/* The button stays in view while the contents scroll; no second toolbar. */
.mv-inventory-panel.mv-work-surface.mv-scroll-close {
    padding-top: 52px;
    scroll-padding-block: 48px 12px;
}
.mv-scroll-close > .mv-work-header {
    position: sticky;
    display: block;
    top: -44px;
    right: 0;
    width: 44px;
    height: 0;
    margin: -44px 0 0 auto;
    z-index: 5;
}
.mv-scroll-close.mv-docked .mv-work-inventory {
    padding-top: 22px;
}

.mv-object-surface [data-letter-text] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 120px;
    height: min(360px, max(120px, calc(var(--world-ui-height, 100dvh) - 200px)));
    resize: none;
    padding: 12px 4px;
    border: 0;
    border-bottom: 1px solid var(--work-line);
    border-radius: 0;
    background: transparent !important;
    color: var(--work-paper-ink) !important;
    font:
        17px/1.7 Georgia,
        serif;
    box-shadow: none;
}

/* Object editors share the close control, paper and scroll treatment of the pack. */
.mv-object-toolbar {
    justify-content: flex-end;
    min-height: 44px;
    padding: 0;
    margin-bottom: 8px;
    border: 0;
}
.mv-object-toolbar button {
    border: 0;
}
.mv-object-toolbar > :first-child:not(button) {
    margin-right: auto;
}
.mv-letter-sender {
    color: var(--work-muted);
    overflow-wrap: anywhere;
}
.mv-object-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}
.mv-object-actions:not(:has(button)):has([data-letter-status]:empty) {
    display: none;
}
.mv-object-status,
[data-letter-status] {
    color: var(--work-muted);
    font-size: 12px;
}
.mv-object-status {
    margin: 8px 0 0;
}
.mv-object-status:empty {
    display: none;
}
.mv-object-toolbar .mv-object-status {
    margin-top: 0;
}
.mv-paint-work {
    display: grid;
    justify-items: center;
    gap: 12px;
}
[data-paint-surface] {
    display: block;
    width: min(336px, 100%);
    height: auto;
    aspect-ratio: 1;
    touch-action: none;
    border-radius: 1px;
    box-shadow:
        0 1px 0 var(--work-line),
        0 3px 10px #47382116;
}
.mv-paint-palette {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.mv-paint-swatch {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 4px;
    border: 1px solid var(--work-line);
    background: #42361f55;
    border-radius: 50% !important;
    box-shadow:
        inset 0 2px 4px #30251866,
        0 1px #d4b67b66;
    cursor: pointer;
}
.mv-paint-swatch:disabled {
    opacity: 0.35;
    cursor: default;
}
.mv-paint-swatch[aria-pressed='true'] {
    background: #d2b97d30;
    outline: 2px solid #eed098;
    outline-offset: 2px;
}
.mv-paint-dab {
    width: 26px;
    height: 26px;
    border-radius: 45% 55% 48% 42%;
    background: var(--paint-color);
    box-shadow:
        inset 1px 2px 2px #fff3,
        inset -1px -2px 3px #0003;
    pointer-events: none;
}
.mv-paint-swatch b {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font-size: 11px;
    font-weight: 500;
    text-shadow: 0 1px var(--work-panel);
}
/* A cost appearing mid-stroke must never move the cloth under the pointer. */
[data-paint-status],
[data-paint-status]:empty {
    display: block;
    min-height: 17px;
    text-align: center;
}
@media (max-height: 520px) and (min-width: 500px) {
    .mv-paint-work {
        grid-template-columns: auto 48px;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }
    [data-paint-surface] {
        width: max(140px, calc(var(--world-ui-height, 100dvh) - 150px));
        max-width: 336px;
    }
    .mv-paint-palette {
        flex-direction: column;
    }
}

.mv-object-surface textarea:focus-visible {
    outline: none;
    border-bottom-color: var(--work-accent) !important;
    box-shadow: 0 1px var(--work-accent);
}
.mv-paint-swatch:hover:not(:disabled) {
    filter: brightness(1.12);
}