/* Wanxiang P2: shared chrome and controls. Loaded last; shell.theme owns theme state.
 * 60px topbar must match CHROME_TOP_H and LEFT_TOP_INSET_FALLBACK. */
@import url("./wanxiang-tokens.css");
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.5; }
body { --wx-sidebar-width: 208px; grid-template-rows: 60px minmax(0, 1fr) 24px; }
#topbar { height: 60px; gap: 8px; padding: 0 16px; background: var(--kaypal-topbar-glass); }
body[data-titlebar="inset"] #topbar { padding-left: 78px; }
#brand-home { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px;
  background: transparent; border: 0; border-radius: 8px; color: var(--kaypal-text);
  font-family: inherit; font-size: 15px; font-weight: 650; line-height: 1.2;
  cursor: pointer; -webkit-app-region: no-drag; }
#brand-home img { width: 28px; height: 28px; object-fit: contain; }
#brand-home:hover { background: var(--kaypal-accent-soft); }
#tabs { flex: 0 1 auto; max-width: 36%; min-width: 48px; gap: 6px; }
#tabs:empty { display: none; }
#tabs .tab { border-radius: 8px; }
#palette-hint { display: flex; align-items: center; gap: 10px; width: 240px; height: 36px;
  padding: 0 12px; background: var(--kaypal-card); border: 1px solid var(--kaypal-border);
  color: var(--kaypal-text-sub); font-size: 12px; }
#palette-hint::before { content: none; }
#palette-hint svg { width: 16px; height: 16px; flex: none; }
#palette-hint kbd { margin-left: auto; padding: 0 4px; border: 1px solid var(--kaypal-border);
  border-radius: 4px; font-family: inherit; font-size: 11px; line-height: 18px; }
#eco-toggle, #browser-toggle, #topbar-more, #identity button { min-height: 34px; font-size: 13px; }
#org-switch select { max-width: 160px; height: 34px; font-size: 12px; }
#org-switch .org-note { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
#body { grid-template-columns: var(--wx-sidebar-width) minmax(0, 1fr); min-width: 0; }
#body.with-panel { grid-template-columns: var(--wx-sidebar-width) minmax(0, 1fr) 320px; }
#sidebar { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 12px; overflow-y: auto; }
#sidebar .nav-item { flex: none; position: relative; min-height: 44px; height: auto; padding: 10px 14px;
  border-radius: 8px; font-size: 14px; line-height: 24px; }
#sidebar .nav-item.active { background: var(--kaypal-accent-tint); color: var(--kaypal-primary-ink); font-weight: 600; }
#sidebar .nav-item.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: var(--kaypal-primary-ink); }
#sidebar .nav-sep { flex: none; margin: 8px 6px; }
#sidebar .nav-footer-separator { margin-top: auto; }
#sidebar .panel-pick { flex: none; padding: 4px 2px 0; gap: 4px; }
#sidebar .panel-pick button { min-height: 30px; padding: 4px 8px; }
#main { padding: 24px 24px 40px; }
#main h1 { font-size: 26px; line-height: 1.4; font-weight: 650; margin-bottom: 6px; }
#main h1.doc-hero { font-size: 30px; font-weight: 650; }
#main .section-note { font-size: 13px; line-height: 1.6; margin-bottom: 24px; }
.row, .card, .sv-card, .sk-card, .app-card { border-radius: 12px; background: var(--kaypal-card); border-color: var(--kaypal-border); }
.row { padding: 16px; }
.btn, .act-btn, .btn-ghost, .sv-btn, .sv-act-btn { border-radius: 8px; font-family: inherit; }
.act-btn, .btn-ghost, .sv-act-btn { min-height: 32px; }
.btn.primary, .sv-btn-primary { background: var(--kaypal-primary); color: #fff; }
input, select, textarea { font-family: inherit; }
.search-bar { border-radius: 8px; }
.pill, .chip, .market-chip { line-height: 1.5; }
#panel { border-color: var(--kaypal-border); }
#palette .box { width: 640px; border-radius: 16px; box-shadow: var(--kaypal-shadow-pop); }
#palette .hit { min-height: 44px; }
#palette .hit .title { color: var(--kaypal-text); }
#palette .hit.active .title { color: var(--kaypal-primary-ink); }
#palette input { color: var(--kaypal-text); }
#statusbar { height: 24px; font-size: 11px; background: var(--kaypal-sidebar); }
button:disabled { cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; }
.sk-line, .sk-icon { background: var(--kaypal-accent-soft); }
:focus-visible { outline: 2px solid var(--kaypal-focus); outline-offset: 2px; }
@media (max-width: 1300px) {
  body { --wx-sidebar-width: 192px; }
  #main { padding: 20px 20px 32px; }
  #brand-home span { display: none; }
  #palette-hint { width: 190px; }
}
@media(min-width:1700px){body{--wx-sidebar-width:224px}#main{padding:32px 32px 40px}}
@media(max-width:1080px){body{--wx-sidebar-width:176px}#main{padding:16px}}
@media (max-width: 1100px) {
  #palette-hint { width: 36px; padding: 0; justify-content: center; }
  #palette-hint span, #palette-hint kbd { display: none; }
  #org-switch .org-note { display: none; }
  #org-switch select { max-width: 110px; }
  #main .section-home.has-props:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  body { --wx-sidebar-width: 176px; }
  #topbar { gap: 4px; padding-right: 8px; }
  #eco-toggle, #browser-toggle, #topbar-more { padding-left: 8px; padding-right: 8px; }
  #body.with-panel { grid-template-columns: var(--wx-sidebar-width) minmax(0, 1fr); }
  #body.with-panel #panel { position: absolute; right: 0; top: 60px; bottom: 24px; width: min(320px, 70vw); z-index: 20; }
  #main { padding: 16px; }
}
/* P7: keep frequent navigation clear, technical tools remain available below. */
#sidebar .nav-label{display:none}
#sidebar .nav-item{padding:0 14px;height:44px;min-height:44px;display:flex;align-items:center}
#sidebar .nav-footer-separator{border:0;height:0}
.wx-category-nav{display:flex;flex-direction:column;gap:2px;margin:0 0 14px 25px;padding-left:16px;border-left:1px solid var(--kaypal-border)}
.wx-category-nav button{background:transparent;border:0;text-align:left;padding:8px 0;font-size:12px;color:var(--kaypal-text-sub)}
.wx-category-nav button[aria-pressed="true"]{color:var(--kaypal-primary-ink);font-weight:600}
#sidebar .panel-pick button{font-size:10px;padding:4px}

#tabs{max-width:280px;flex:0 1 280px}
#tabs .tab-item{min-width:0;max-width:220px;flex:none}
#tabs .tab{min-width:0;padding:6px 8px;font-size:12px}
#tabs .tab>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
#palette-hint{flex:1;max-width:420px;min-width:120px}
@media(max-width:1300px){#tabs{max-width:180px}#palette-hint{max-width:260px}}
@media(max-width:1100px){#palette-hint{flex:0 0 36px;min-width:36px}}

/* P8: one product mark, explicit workspace selection, persistent account entry. */
#tabs .tab-logo{display:none}
#brand-home[aria-pressed="true"]{background:var(--kaypal-accent-tint);color:var(--kaypal-primary-ink)}
body.wx-workspace-active #tabs .tab.active{background:transparent;color:var(--kaypal-text-sub)}
#org-switch .org-note{display:none}
#org-switch select{max-width:128px;text-overflow:ellipsis}
#tabs{max-width:260px;flex:0 1 260px}
#palette-hint{flex:1 1 280px;max-width:420px}
.wx-account-entry{display:flex;align-items:center;gap:10px;flex:none;width:100%;margin-top:12px;padding:14px 2px 0;border:0;border-top:1px solid var(--kaypal-border);background:transparent;text-align:left;color:var(--kaypal-text);cursor:pointer}
.wx-account-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--kaypal-accent-tint);color:var(--kaypal-primary-ink);flex:none}
.wx-account-avatar svg{width:18px;height:18px}
.wx-account-entry>span:nth-child(2){flex:1;min-width:0}.wx-account-entry strong{display:block;font-size:12px;font-weight:600}.wx-account-entry small{display:block;color:var(--kaypal-text-sub);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1300px){#tabs{max-width:180px;flex-basis:180px}#palette-hint{max-width:320px}}
@media(max-width:1100px){#palette-hint{flex:0 0 36px;min-width:36px}#org-switch select{max-width:110px}}

body.wx-workspace-active #tabs .tab.pinned{background:transparent;color:var(--kaypal-text-sub)}

/* Secondary tools stay reachable without occupying the workspace hero area. */
.wx-tools-menu{flex:none;color:var(--kaypal-text-sub)}
.wx-tools-menu>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;min-height:40px;padding:8px 14px;border-radius:8px;font-size:13px}
.wx-tools-menu>summary::-webkit-details-marker{display:none}
.wx-tools-menu>summary:after{content:'›';margin-left:auto;transition:transform .15s}
.wx-tools-menu[open]>summary:after{transform:rotate(90deg)}
.wx-tools-menu>summary:hover{background:var(--kaypal-accent-soft)}
.wx-tools-menu>summary:focus-visible{outline:2px solid var(--kaypal-primary-ink);outline-offset:2px}
.wx-tools-menu svg{width:18px;height:18px;flex:none}
.wx-tools-items{padding:4px 0 4px 14px}
#sidebar .wx-tool-item{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:6px 12px;border:0;border-radius:8px;background:transparent;color:var(--kaypal-text-sub);text-align:left;font-size:12px}
#sidebar .wx-tool-item.active{background:var(--kaypal-accent-tint);color:var(--kaypal-primary-ink)}
#sidebar .wx-tool-item:hover{background:var(--kaypal-accent-soft)}

/* P10: compact controls for secondary activity pages. */
.wx-activity-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.wx-activity-toolbar input{flex:1;min-width:180px;max-width:480px;padding:10px 12px;border:1px solid var(--kaypal-border);border-radius:10px;background:var(--kaypal-card);color:var(--kaypal-text);font:inherit}
.wx-activity-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.wx-activity-filters [aria-pressed="true"]{background:var(--kaypal-primary);color:#fff}
.wx-page-tasks .row .grow,.wx-page-files .row .grow,.wx-page-notifications .row .grow{min-width:0;overflow-wrap:anywhere}
.wx-page-files .row .grow{order:0}.wx-page-files .row>.pill{order:1;flex-shrink:0}
.wx-page-files code{white-space:normal;overflow-wrap:anywhere}
.wx-activity-toolbar input:focus-visible,.wx-activity-filters button:focus-visible{outline:2px solid var(--kaypal-primary);outline-offset:3px}

/* P11: supplied full-bleed ribbon artwork; no extra glyph, tint or frame. */
.wx-ribbon-icon{display:block;width:28px;height:28px;flex:none;object-fit:cover;border-radius:24%;background:none;border:0;padding:0}
.wx-ribbon-icon[hidden]{display:none}
#sidebar .nav-item>.wx-ribbon-icon{width:28px;height:28px}
.wx-tools-menu .wx-ribbon-icon{width:24px;height:24px}
.wx-account-avatar{background:none}
.wx-account-avatar .wx-ribbon-icon{width:32px;height:32px}
.wx-surface-heading .wx-ribbon-icon,.wx-page-surface h2 .wx-ribbon-icon{width:28px;height:28px}
.wx-page-surface>.list>.row>.wx-ribbon-icon{width:40px;height:40px}
#main .section .wx-page-surface>.empty>.wx-ribbon-icon{width:48px;height:48px;margin:0 auto 12px}
.wx-project-icon{background:none}
.wx-project-icon .wx-ribbon-icon{width:100%;height:100%}
.wx-category .wx-category-icon{width:48px;height:48px;background:none;border:0;border-radius:24%}
.wx-category-icon .wx-ribbon-icon{width:100%;height:100%}
.wx-art-tile.one,.wx-art-tile.two,.wx-art-tile.three{background:none;border:0;box-shadow:none;aspect-ratio:1;height:auto}
.wx-art-tile .wx-ribbon-icon{width:100%;height:auto}
.wx-media-empty>.wx-ribbon-icon,.wx-detail-status>.wx-ribbon-icon{width:48px;height:48px;margin:0 auto 12px}
.wx-dev-theme>.wx-ribbon-icon{width:40px;height:40px}
@media(max-width:1080px){#sidebar .nav-item>.wx-ribbon-icon{width:24px;height:24px}}