/* NATIVE-PANELS-02. Serialized prefab/IL evidence: docs/original-evidence/native-panels.md.
   Browser scaling and outer dialog composition remain adapters. */
#profilePanel{border-radius:0;border-color:#77716366;background:#211f1be8;color:#e8e5df}
#profilePanel .panel-heading{border-bottom:1px solid #77716366}

/* EquipSlotsWidget uses Slot % 3 and Slot / 3, with no enum value 2. */
.native-equipment-slots{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:var(--profile-slots-width);height:var(--profile-slots-height);margin:0 auto;position:relative}
.native-equipment-slot{display:grid;place-items:center;position:relative;min-width:0;padding:0;border:0;border-radius:0;background:#00000032;color:#e8e5df}
.native-equipment-slot:disabled{opacity:1;cursor:default}
.native-equipment-slot.selected{background:#ffd85b28}
.native-equipment-slot img{grid-area:1/1;object-fit:contain;pointer-events:none}
.native-equipment-slot .equip-slot-background{width:var(--profile-slot-background);height:var(--profile-slot-background);opacity:.0784314}
.native-equipment-slot .equip-slot-item{width:var(--profile-slot-art);height:var(--profile-slot-art)}
.native-equipment-slot .equip-slot-placeholder{grid-area:1/1;font-size:44px;color:#aaa69b}
.native-equipment-slot{border-right:1px solid #ffffff18;border-bottom:1px solid #ffffff18}
.native-equipment-tab{height:44px;line-height:44px;font-size:14px;margin:0 0 10px;background:#373737eb;text-align:center}
.native-equipment-tabs{display:flex;justify-content:center;gap:6px;margin:0 0 10px;min-height:44px}
.native-equipment-tabs button{width:144px;min-height:44px;border:0;border-radius:0;background:#0008;color:#bfb8ab;font-size:14px}
.native-equipment-tabs button[aria-pressed="true"]{background:#373737eb;color:#ffd85b;border-bottom:2px solid #ffd85b}
#profileAvatarHint{font-size:12px;line-height:1.6;color:#bfb8ab;text-align:center;margin:0 0 10px}
/* PROFILE-ROOT140: profile geometry now has one owner, character-header.css,
   consuming source profile/profile-layout and central WEB policy variables. */

/* NATIVE-GRID-03: each saved item owns its source-sized rectangle. Coordinates
   and rows are explicit ItemList packing output, never CSS dense reordering. */

/* Source selection icons are 38px. Outer flex sizing is a browser adapter. */
.native-selection-buttons{display:flex;align-items:center;gap:3px}
.native-icon-button[aria-pressed="true"]{background:#ffd85b22;box-shadow:inset 0 -2px #ffd65b}
#bagPanel.multiselect .item-actions{display:none}
@media(max-width:600px){.native-bag-menubar{padding:6px}.native-bag-menubar label{gap:4px}.native-bag-menubar select{width:100px}.native-selection-buttons{gap:0}}
#bagPanel.multiselect #itemUsage{display:none}

/* TagSelectPopup11880: source dimensions/colors; viewport fitting is a browser adapter. */
.native-tag-popup{width:min(720px,75vw);height:min(596px,75vh);max-width:none;max-height:none;margin:auto;padding:0;overflow:hidden;background:#312d24;color:#b6b1a1;border:1px solid #ffffff0a;border-radius:0;box-sizing:border-box}
.native-tag-popup[open]{display:flex;flex-direction:column}
.native-tag-popup::backdrop{background:#000a}
.native-tag-popup h2{position:relative;flex:0 0 54px;display:flex;align-items:center;justify-content:center;margin:0;background:#a08747;color:#000;font-size:20px;border-bottom:2px solid #000}
.native-tag-popup h2::before,.native-tag-popup h2::after{content:"";position:absolute;top:0;width:240px;height:54px;pointer-events:none;background:url('assets/native-tags/bg_tooltip_grunge.webp') center/100% 100% no-repeat}
.native-tag-popup h2::before{left:0}.native-tag-popup h2::after{right:0;transform:scaleX(-1);background-image:url('assets/native-tags/bg_tooltip_grunge2.webp')}
.tag-search{display:flex;align-items:center;gap:12px;padding:7px 14px;height:74px;flex:0 0 74px;box-sizing:border-box;background:#26211b}
.tag-search>img{width:34px;height:34px;opacity:.275}
.tag-search input{flex:1;width:0;min-width:0;height:60px;border:0;border-radius:0;padding:0 10px;background:#1b1813;color:#b6b1a1;font-size:18px}
.tag-search button{width:34px;height:34px;border:0;padding:0;background:none}
.tag-search button img{width:34px;height:34px;opacity:.275}
.tag-selected{flex:0 0 14px;min-height:14px;display:flex;align-items:center;gap:6px;overflow:auto;white-space:nowrap;background:#26211b;padding:0 14px;box-sizing:border-box}
.tag-selected.has-tags{flex-basis:76px;min-height:76px}
.tag-selected button{height:44px;flex:0 0 auto;border:0;border-radius:0;background:#0006;color:#fff;display:flex;align-items:center;gap:12px;padding:0 12px;font-size:16px}
.tag-selected img{height:22px;width:22px}
.tag-options{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:76px;align-content:start;border-top:2px solid #000}
.tag-options button{height:76px;min-width:0;text-align:left;position:relative;padding:10px 40px 10px 18px;background:#2b271e;color:#b6b1a1;border:1px solid #0002;border-radius:0;font-size:16px;overflow-wrap:anywhere}
.tag-options button[aria-pressed="true"]{background:#a08747;color:#000}
.tag-options button[aria-pressed="true"]::after{content:"";position:absolute;right:12px;top:calc(50% - 11px);width:24px;height:22px;background:url('assets/native-tags/icon_check_ok.webp') center/contain no-repeat}
.tag-popup-actions{height:84px;flex:0 0 84px;display:flex;align-items:center;justify-content:center;gap:14px;background:#1f1c15;border-top:2px solid #0008;box-sizing:border-box}
.tag-popup-actions button{height:60px;width:196px;border-radius:0;border:1px solid #ffffff1a;background:#4a4437;color:#e8e5df;font-size:18px}
.tag-popup-actions #tagConfirm{width:274px;background:#a08747;color:#000}
@media(max-width:600px){.native-tag-popup{width:calc(100vw - 24px);height:calc(100dvh - 24px)}.tag-options{grid-template-columns:repeat(2,minmax(0,1fr))}.tag-options button{padding-left:10px;font-size:14px}.tag-popup-actions{padding:12px;gap:10px}.tag-popup-actions button{width:40%}.tag-popup-actions #tagConfirm{width:60%}.native-tag-popup h2::before,.native-tag-popup h2::after{width:45%}}
.tag-selected button{width:auto}
.tag-search input::-webkit-search-cancel-button{display:none}
.native-tag-popup::backdrop{backdrop-filter:none}
@media(max-height:500px){.native-tag-popup{height:calc(100dvh - 24px)}.native-tag-popup h2{flex-basis:40px;font-size:18px}.native-tag-popup h2::before,.native-tag-popup h2::after{height:40px}.tag-search{height:50px;flex-basis:50px;padding:5px 14px}.tag-search input{height:40px;font-size:16px}.tag-selected.has-tags{flex-basis:50px;min-height:50px}.tag-selected button{height:36px;font-size:14px}.tag-options{grid-auto-rows:56px}.tag-options button{height:56px;font-size:14px}.tag-popup-actions{height:56px;flex-basis:56px}.tag-popup-actions button{height:40px;font-size:16px}}

/* CharacterInfoGroup links the same native ItemList/ItemIcon as the bag. */
/* StringSelector12964: nonmodal, item70/high/font24, black alpha200/255,
   original bg_black_shadow with 4px nine-slice; runtime width170 from 055E6. */
#profilePanel .frontend-equipment-context{position:fixed;inset:auto;margin:0;padding:0;width:170px;height:70px;border:0;border-radius:0;overflow:visible;background:transparent;isolation:isolate;z-index:10;color:#fff}
.frontend-equipment-context::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:4px solid transparent;border-image:url('assets/frontend-context/bg_black_shadow.webp') 4 fill stretch;filter:brightness(0);opacity:.7843137383}
#profilePanel .frontend-equipment-context>button{width:100%;height:100%;margin:0;padding:0 15px;border:0;border-radius:0;background:transparent;color:#fff;font-size:24px;font-weight:400;text-align:center}
#profilePanel .frontend-equipment-context>button:focus-visible{outline:2px solid #ffd85b;outline-offset:-3px}
#profilePanel #equipmentList{grid-auto-flow:row;align-content:start;grid-auto-rows:116px;max-height:100%;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;padding:0}
#profilePanel #equipmentList .equipment-card{aspect-ratio:auto;min-width:0;width:100%;height:100%;container-type:inline-size}
#profilePanel #equipmentList .equipment-card>img,#profilePanel #equipmentList .equipment-art-placeholder{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--native-art);height:var(--native-art);max-width:100%;max-height:100%;pointer-events:none}
#profilePanel #equipmentList .profile-item-level{display:block;position:absolute;right:5px;top:5px;line-height:1.25;font-size:clamp(10px,13.7931cqw,16px);color:#ffffff3c;pointer-events:none}
#profilePanel #equipmentList .profile-item-lock{display:block;position:absolute;left:5px;bottom:10px;width:18px;height:24px;background:#ffd85b;mask:url("assets/inventory-ui/icon_item_lock.webp") center / contain no-repeat;pointer-events:none}
#profilePanel #equipmentList .equipment-card.equipped::before{left:5px;top:5px;width:20px;height:20px}
#profilePanel #equipmentList .equipment-card:focus-visible{outline:2px solid #f3d887;outline-offset:-2px}
#profilePanel #equipmentList .profile-item-lock{left:calc(5px * var(--native-scale,1));bottom:calc(10px * var(--native-scale,1));width:calc(18px * var(--native-scale,1));height:calc(24px * var(--native-scale,1))}
#profilePanel #equipmentList .equipment-card.equipped::before{left:calc(5px * var(--native-scale,1));top:calc(5px * var(--native-scale,1));width:calc(20px * var(--native-scale,1));height:calc(20px * var(--native-scale,1))}
#profilePanel #equipmentList .equipment-card.selected::after{border-width:calc(15px * var(--native-scale,1));border-image-width:calc(15px * var(--native-scale,1))}

/* FRONT-26: prefab proportions with a user-authorized 0.8 web frame scale.
   Native PC widths: bag detail300/main580; character abilities244/equip306,
   main600/detail300; slots260x294, background60/icon64. Dynamic prefab anchors
   are not a fixed runtime screenshot ratio. Evidence: frontend-v27.md. */

/* The original InfoWidget has abilities beside equipment and a full-width
   inventory below. The large rotating body preview and duplicate equipped
   summary are web additions, not PortraitFaceWindow70/PortraitBuilder. Keep
   their legacy DOM IDs until root removes their JS consumers. */
#profilePanel.character-panel .portrait-card,
#profilePanel.character-panel .equipped-title,
#profilePanel.character-panel #equippedMetadata,
#profilePanel.character-panel #toolDetail,
#profilePanel.character-panel .equipped-card>.item-actions{display:none}