/* One continuous masthead and navigation frame in either palette. */
:root { --shell-paper:#18191b; --shell-edge:#3d3e41; --shell-accent:#e99445; --shell-header:#18191b; }
:root[data-theme="parchment"] { --shell-paper:#f6eee2; --shell-edge:#c8baa5; --shell-accent:#8b252b; --shell-header:linear-gradient(90deg,#fbf7eed9,#f1e5d4cc),url('../img/site/ink-landscape.svg') center / cover; }
body.parchment-ui.compact-desktop { margin-left:184px; width:var(--vw); min-width:0; }
body.parchment-ui.compact-desktop::before { content:''; position:fixed; left:0; top:0; bottom:0; width:183px; background:var(--shell-paper); border-right:1px solid var(--shell-edge); z-index:0; }
body.parchment-ui.compact-desktop::after { content:''; position:fixed; left:0; top:0; width:calc(var(--vw) + 184px); height:78px; background:var(--shell-header); border-bottom:1px solid var(--shell-edge); z-index:1; pointer-events:none; }
body.parchment-ui.compact-desktop .taskbar .brand { position:fixed; left:15px; top:20px; width:154px; z-index:1000; }
body.parchment-ui.compact-desktop .brand-logo { width:154px; height:auto; }
body.parchment-ui.compact-desktop .taskbar .views { position:fixed; left:14px; top:128px; width:154px; display:flex; flex-direction:column; align-items:stretch; z-index:1000; }
body.parchment-ui.compact-desktop .view-tab { text-align:left; padding:14px 12px; margin:4px 0; white-space:normal; border-left:2px solid transparent; border-radius:0; }
body.parchment-ui.compact-desktop .view-tab.active { border-left-color:var(--shell-accent); box-shadow:none; }
body.parchment-ui.compact-desktop .taskbar { min-height:74px; justify-content:flex-end; background:transparent; border:1px solid transparent; border-radius:0; box-shadow:none; backdrop-filter:none; transform:none; }
body.parchment-ui.compact-desktop .site-footer,body.parchment-ui.compact-desktop[data-sub=alchemy] > .devbar { left:196px; }
body #theme-toggle { min-width:36px; font-size:21px; line-height:1; }

body.parchment-ui.compact-desktop .sticky-toolbar { background:transparent; }
body.parchment-ui.compact-desktop .taskbar .views { background:transparent; border:0; border-radius:0; gap:4px; }

body.parchment-ui.compact-desktop .site-footer { left:0; width:calc(var(--vw) + 184px); max-width:none; border-radius:0; border-left:0; border-right:0; box-sizing:border-box; }
/* Sidebar subsections reuse the workspace controls and their existing handlers. */
#character-sections > summary { list-style:none; cursor:pointer; }
#character-sections > summary::-webkit-details-marker { display:none; }
#character-sections > summary .view-tab { width:100%; }
body.compact-desktop #character-sections .workspace-sections { display:flex; flex-direction:column; gap:3px; padding:2px 0 8px 12px; }
body.compact-desktop #character-sections .sub-tab { text-align:left; justify-content:flex-start; white-space:normal; font-size:12px; padding:9px 4px; width:100%; border-radius:0; height:auto; }
body.compact-desktop #character-sections .sub-tab::before { width:18px; height:18px; flex-shrink:0; }
@media (max-width:819px) {
  body .sub-tabs .tb-windows .m2-btn[data-toggle], body .taskbar .tb-windows .m2-btn[data-toggle] { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; min-height:72px; align-self:stretch; }
  body .tb-windows .m2-btn[data-toggle] > span { white-space:normal; overflow:visible; text-overflow:clip; }
  #win-equipment .equipment-content { padding-right:0; flex-wrap:wrap; }
  #win-equipment #costume-sets { position:static; flex:0 0 100%; flex-direction:row; justify-content:center; margin:8px 0 0; }
  .taskbar .tb-right .account { width:100%; padding:4px 14px; box-sizing:border-box; }
  .taskbar .tb-right .acct-btn { width:100%; justify-content:center; }
  body #theme-toggle { justify-content:center; }
}
body.compact-desktop #character-sections > summary .view-tab::after { content:'▸'; float:right; }
body.compact-desktop #character-sections[open] > summary .view-tab::after { content:'▾'; }

#editor-body .aura-base-heading, #editor-body .aura-base-row .combo-cur, #editor-body .aura-base-row input { color:var(--positive) !important; }
/* The main sidebar uses the same game icons as the phone navigation. */
body.parchment-ui.compact-desktop .taskbar .views .view-tab { display:grid; grid-template-columns:24px minmax(0,1fr) 8px; align-items:center; column-gap:8px; position:relative; box-sizing:border-box; }
body.parchment-ui.compact-desktop .taskbar .views .view-tab::before { content:''; width:24px; height:24px; background:var(--view-icon) center / contain no-repeat; }
body.parchment-ui.compact-desktop .taskbar .views [data-view="builder"] { --view-icon:url('../img/char/character_button_01.png'); }
body.parchment-ui.compact-desktop .taskbar .views [data-view="simulator"] { --view-icon:url('../img/char/mouse_button_attack_01.png'); }
body.parchment-ui.compact-desktop .taskbar .views [data-view="gallery"] { --view-icon:url('../img/m2/mall_button_01.png'); }/* Keep the workspace bars on the same outer edges as the panels. */
body.parchment-ui.compact-desktop .sticky-toolbar > :is(.taskbar,.build-row,.sub-tabs,.sim-credit,.gallery-edit-bar),
body.parchment-ui.compact-desktop .affect-bar { width:calc(var(--vw) - 12px); max-width:calc(var(--vw) - 12px); margin-left:12px; margin-right:0; box-sizing:border-box; }
body.parchment-ui.compact-desktop .taskbar { padding-right:0; }
/* Phone controls and slides use the whole available workspace. */
@media (max-width:819px) {
  body { box-sizing:border-box; }
  body .sticky-toolbar > :is(.taskbar,.build-row,.sub-tabs,.sim-credit,.gallery-edit-bar),
  body .affect-bar, body .site-footer { width:100%; max-width:100%; margin-left:0; margin-right:0; box-sizing:border-box; }
  body .taskbar .tb-right .m2-btn { justify-content:center; text-align:center; }
  body .menu-btn { align-items:center; }
  body .menu-btn span { width:20px; }
  body .desktop.static { align-items:flex-start; padding:0; }
  body .desktop.static .board:not(.sheet-open) { flex-basis:100%; margin:0; min-height:calc(var(--mobile-workspace-height, 0px) / var(--z, 1)); }
  body .site-footer { margin-top:0; }
}
@media (max-width:819px) {
  body .taskbar .tb-right { padding:6px; border-left-width:1px; }
  body .taskbar .tb-right .account { width:100%; margin:0; padding:6px 14px; box-sizing:border-box; }
  body .taskbar .tb-right .acct-wrap { width:100%; }
  body .taskbar .tb-right .acct-btn { width:100%; min-height:48px; justify-content:center; text-align:center; box-sizing:border-box; }
  body .taskbar .tb-right .lang-dd .cat-cur { position:relative; justify-content:center; text-align:center; gap:8px; padding:0 36px; }
  body .taskbar .tb-right .lang-dd .cat-cur .arr { position:absolute; right:14px; margin:0; }
}
/* Empty-slot outlines extracted from the client equipment/costume backgrounds. */
.slot[data-kind="armor"] { --ico:url("../img/slot-preview/armor.png"); }
.slot[data-kind="helmet"] { --ico:url("../img/slot-preview/helmet.png"); }
.slot[data-kind="shoes"] { --ico:url("../img/slot-preview/shoes.png"); }
.slot[data-kind="bracelet"] { --ico:url("../img/slot-preview/bracelet.png"); }
.slot[data-kind="weapon"] { --ico:url("../img/slot-preview/weapon.png"); }
.slot[data-kind="necklace"] { --ico:url("../img/slot-preview/necklace.png"); }
.slot[data-kind="earrings"] { --ico:url("../img/slot-preview/earrings.png"); }
.slot[data-kind="shield"] { --ico:url("../img/slot-preview/shield.png"); }
.slot[data-kind="belt"] { --ico:url("../img/slot-preview/belt.png"); }
.slot[data-kind="pendant"] { --ico:url("../img/slot-preview/pendant.png"); }
.slot[data-kind="glove"] { --ico:url("../img/slot-preview/glove.png"); }
.slot[data-kind="costumeBody"] { --ico:url("../img/slot-preview/costumeBody.png"); }
.slot[data-kind="hair"] { --ico:url("../img/slot-preview/hair.png"); }
.slot[data-kind="costumeWeapon"] { --ico:url("../img/slot-preview/costumeWeapon.png"); }
#equip-bg .slot:not([data-kind="ring"]):empty::before, #costume-bg .slot:is([data-kind="costumeBody"],[data-kind="hair"],[data-kind="costumeWeapon"]):empty::before { background-size:100% 100%; opacity:.65; filter:none; image-rendering:pixelated; }

.slot[data-kind="aura"] { --ico:url("../img/slot-preview/aura.svg"); }
.slot[data-kind="sash"] { --ico:url("../img/slot-preview/sash.svg"); }

/* File actions belong to the selected character's build row. */
.build-file-actions { display:flex; align-items:center; gap:6px; padding:6px 12px; flex-shrink:0; }
.build-file-actions .m2-btn { display:flex; align-items:center; justify-content:center; min-height:36px; cursor:pointer; }
body.compact-desktop .build-row { justify-content:flex-start; gap:12px; }
body.compact-desktop .build-row .build-bar { flex:0 1 auto; min-width:0; padding:0; }
body.compact-desktop .build-file-actions { padding:0; }
body.compact-desktop .build-row .saved-note { max-width:420px; margin-left:auto; }
@media (max-width:819px) {
  .build-file-actions .m2-btn { flex:1; }
}
/* The desktop buff/skill column scrolls with its neighboring panels. */
body.compact-desktop.side-dock #equipment-dock { position:absolute; }

/* Tall desktop workspaces keep gear at the top and expand the inventory below. */
body.compact-desktop #equipment-stack #win-equipment .equipment-content { flex:none; align-items:flex-start; }
body.compact-desktop #equipment-stack #win-inventory { min-height:var(--inventory-min-height, 0px); }
body.compact-desktop #equipment-stack #inventory-grid-viewport { max-height:var(--inventory-viewport-height, 400px); }
/* All desktop columns end four pixels above the same footer boundary. */
body.compact-desktop.side-dock {
  --desktop-panel-height:calc(var(--vh) - var(--window-nav-top) - var(--footer-height, 92px) - 20px);
}
body.compact-desktop.side-dock #equipment-dock,
body.compact-desktop.side-dock[data-sub="equip"] :is(#win-character,#win-item-catalog),
body.compact-desktop.side-dock[data-view="simulator"] #desktop > :is(#win-sim-character,#win-battle,#win-mob) {
  height:var(--desktop-panel-height); max-height:var(--desktop-panel-height);
}
body.compact-desktop.side-dock[data-view="simulator"] #win-polymorph { height:340px; max-height:340px; box-sizing:border-box; }
body.compact-desktop.side-dock[data-view="simulator"] #win-history {
  height:calc(var(--desktop-panel-height) - 352px); max-height:calc(var(--desktop-panel-height) - 352px); min-height:0;
}
body.parchment-ui.compact-desktop .site-footer { text-align:center; display:block; }
body.parchment-ui.compact-desktop .site-footer > * { margin-left:auto; margin-right:auto; }

/* Device emulation may expand the layout viewport after a resize. */
body.compact-desktop .site-footer { top:calc(var(--vh) - var(--footer-height, 92px) - 4px); bottom:auto; }
body.compact-desktop[data-sub="alchemy"] > .devbar { top:calc(var(--vh) - var(--skill-footer-gap) - var(--development-total-height)); bottom:auto; }

/* Give the Dragon Gate progress diagram a readable, left-aligned desktop size. */
@media (min-width:820px) {
  body .dg-diagram { width:min(300px, 100%); height:auto; aspect-ratio:220 / 340; margin:12px 0; }
  body .dg-diagram .dg-space { width:38px; height:38px; font-size:17px; }
}

/* Desktop workspaces scroll inside panels, never behind the anchored footer. */
html:has(body.compact-desktop) { min-height:0; height:100%; overflow:hidden; }
body.compact-desktop { height:var(--vh); min-height:0; overflow:hidden; }
body.compact-desktop[data-sub="alchemy"] > .devbar { margin:0; box-sizing:border-box; }
body.compact-desktop[data-sub="alchemy"] .dv-vals { min-width:0; }
.dv-vals span { overflow-wrap:anywhere; max-width:100%; }

/* Phone navigation leaves most of the screen for the selected window. */
@media (max-width:819px) {
  body:not([data-view="simulator"]) .affect-bar { display:none !important; }
  body .taskbar { padding:4px 10px; margin-bottom:4px; min-height:44px; }
  body .taskbar .brand-logo { height:24px; width:auto; }
  body .menu-btn { width:36px; height:36px; min-height:36px; padding:7px; }
  body .build-row { margin:0 0 4px; gap:0; }
  body .build-bar { padding:4px 6px; gap:4px; }
  body .build-bar .bc-act, body .build-bar .share-btn { width:36px; height:36px; min-height:36px; }
  body .build-bar .build-card { padding:2px 4px; min-height:36px; }
  body .build-bar .bc-face { width:28px; height:28px; }
  body .build-file-actions { padding:0 6px 4px; gap:4px; }
  body .build-file-actions .m2-btn { min-height:30px; height:30px; padding:0 8px; font-size:12px; }
  body .sub-tabs { margin:0 0 4px; padding:0 4px 4px; gap:3px; }
  body .sub-tabs .sub-tab { min-height:32px; padding:4px 8px; font-size:12px; }
  body .sub-tabs .tb-windows { gap:3px; padding:0; margin:0; }
  body .sub-tabs .tb-windows .m2-btn[data-toggle] { min-height:42px; height:auto; padding:3px 2px; gap:2px; font-size:10px; }
  body .sub-tabs .tb-windows .m2-btn[data-toggle]::before { width:18px; height:18px; }
  body .bottom-nav { gap:3px; padding:3px 4px calc(3px + env(safe-area-inset-bottom, 0px)); }
  body .bottom-nav .bn-tab { min-height:34px; padding:2px; gap:1px; font-size:10px; }
  body .bottom-nav .bn-tab img { width:18px; height:18px; }
}
@media (max-width:819px) {
  body[data-sub="equip"] .skillbar, body[data-view="simulator"] .skillbar { bottom:var(--mobile-nav-height, calc(41px + env(safe-area-inset-bottom, 0px))) !important; }
}
@media (max-width:819px) {
  body .build-row { flex-direction:row; align-items:center; }
  body .build-row .build-bar { flex:1; min-width:0; }
  body .build-file-actions { flex:none; padding:0 4px 0 0; }
  body .build-file-actions .m2-btn { flex:none; padding:0 5px; font-size:10px; min-height:36px; height:36px; }
  body .build-bar .bc-act, body .build-bar .share-btn { width:30px; height:36px; }
  body .build-bar .build-card { gap:3px; }
  body .build-bar .bc-face { width:22px; height:22px; }
  body .build-bar .bc-text { min-width:0; }
  body .build-bar .bc-name { max-width:100%; }
}

@media (max-width:819px) { body .build-bar .bc-sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }

#mobile-window-disclosure { display:none; }
@media (max-width:819px) {
  body .sub-tabs { position:relative; }
  body[data-view="builder"] .sub-tabs .workspace-sections { display:flex; padding-right:32px; }
  body[data-view="builder"] #mobile-window-disclosure { display:flex; position:absolute; top:0; right:4px; align-items:center; justify-content:center; width:32px; height:32px; padding:0; font-size:18px; }
  body[data-view="builder"] .sub-tabs.shortcuts-collapsed .tb-windows { display:none; }
  body #win-character { padding:6px; }
  body #win-character > .tabs { margin:0 0 6px; padding:2px; }
  body #win-character > .tabs .tab { min-height:30px; height:30px; padding:4px 6px; font-size:12px; }
  body #page-general .char-head { grid-template-columns:46px minmax(0,1fr); gap:6px; }
  body #page-general .char-face { width:40px; height:40px; }
  body #page-general .char-face img { width:34px; height:34px; left:3px; top:3px; }
  body #page-general .char-slots { gap:4px; }
  body #page-general .char-slots > *, body #page-general .char-slots .rank-cur,
  body #page-general .char-row > *, body #page-general .char-row .lv-exp { min-height:30px !important; height:30px !important; }
  body #page-general .slot-input, body #page-general .slot-text, body #page-general .rank-cur, body #page-general .rank-chip { font-size:13px; }
  body #page-general .char-row { margin:4px 0; gap:6px; grid-template-columns:46px minmax(0,1fr); }
  body #page-general .lv-input { font-size:14px; }
  body #page-general .class-rows { margin:6px 0; gap:3px; }
  body #page-general .class-row { min-height:26px; padding:2px 3px; gap:3px; }
  body #page-general .class-row .cls-name { font-size:13px; }
  body #page-general .class-row .cls-ic { width:18px; height:18px; }
  body #page-general .class-row .cls-skills img { width:16px; height:16px; }
  body #page-general .stat-pages { margin:4px 0; gap:4px; }
  body #page-general .section-title { margin:6px 0; font-size:14px; }
}
@media (max-width:819px) {
  body[data-view="builder"] .workspace-sections .sub-tab { flex:1; justify-content:center; }
  body #page-general .portrait-controls { grid-template-rows:60px 30px; gap:4px; }
  body #page-general .portrait-controls .lv-exp { width:46px; height:30px; padding:0 2px; gap:1px; }
  body #page-general .portrait-controls .lv-exp::before { font-size:8px; }
  body #page-general .portrait-controls .lv-exp input.lv-input { width:26px; height:28px; font-size:13px; }
  body #page-general .section { margin:6px 0; font-size:14px; }
}

/* Keep phone character actions in the masthead instead of a separate row. */
@media (max-width:819px) {
  body[data-view="builder"] .taskbar { gap:4px; padding:4px; flex-wrap:nowrap; }
  body[data-view="builder"] .taskbar .brand { flex:none; width:24px; overflow:hidden; }
  body[data-view="builder"] .taskbar .brand-logo { width:108px; max-width:none; height:24px; }
  body .taskbar .build-row { flex:1; width:auto; min-width:0; margin:0; border:0; background:transparent; }
  /* not a scroll box here (the name shrinks instead): it would clip the character list that opens under it */
  body .taskbar .build-bar { position:static; overflow:visible; padding:0; gap:3px; }
  body .taskbar .build-row .bc-menu { left:0; right:0; top:calc(100% + 6px); max-height:70vh; }
  body .taskbar .build-cards { gap:3px; padding:0; }
  body .taskbar .build-card { min-height:32px; padding:2px; }
  body .taskbar .build-card .bc-face { width:20px; height:20px; }
  body .taskbar .build-card .bc-name { font-size:11px; }
  body .taskbar .build-card .bc-sub { font-size:9px; }
  body .taskbar .bc-act, body .taskbar .share-btn { width:28px; min-width:28px; height:32px; min-height:32px; }
  body .taskbar .build-file-actions { gap:3px; padding:0 0 0 3px; }
  body .taskbar .build-file-actions .m2-btn { width:28px; min-width:28px; height:32px; min-height:32px; padding:0; font-size:0; }
  body .taskbar .build-file-actions label span { font-size:0; }
  body .taskbar .build-file-actions label::after { content:'↥'; font-size:21px; }
  body .taskbar .build-file-actions #export-txt::after { content:'↧'; font-size:21px; }
  body[data-view="builder"] .taskbar .menu-btn { flex:none; width:32px; min-width:32px; height:32px; min-height:32px; }
}
.yy-base-effect { display:block; margin-top:6px; color:var(--positive); }