/* Page shell (header + sidebar), loaded last on every workbench page by scripts/build-shell.mjs.
   The markup is static, so the first paint already looks like this. */

/* Language and appearance live on the Settings page. */
#language-toggle,#drawer-theme-toggle{display:none!important}

/* ---- Header: tutorial book, search pill, messages, account ---- */
body .site-header .header-actions{gap:8px;align-items:center}
body .site-header .header-actions .header-icon{width:40px;height:40px;min-width:40px;border:0;border-radius:50%;background:transparent;color:#fff;transition:background-color .18s ease,transform .18s ease}
body .site-header .header-actions .header-icon:hover{background:rgba(255,255,255,.1)}
body .site-header .header-actions .header-icon:active{transform:scale(.94)}
body .site-header .header-actions .header-icon:focus-visible{outline:2px solid #fff;outline-offset:2px}
body .site-header .header-actions .header-icon>svg:not(.tutor-book){width:21px;height:21px}
/* Search reads as a field on wide screens. */
body .site-header .header-actions #header-search{display:inline-flex;align-items:center;gap:8px;width:auto;padding:0 18px 0 13px;border-radius:999px;background:rgba(255,255,255,.09)}
body .site-header .header-actions #header-search:hover{background:rgba(255,255,255,.15)}
body .site-header .hdr-label{font-size:14px;font-weight:500;color:rgba(255,255,255,.66);white-space:nowrap}
body .site-header .header-actions a[href$="#account"]{background:rgba(255,255,255,.09)}
body .site-header .header-actions a[href$="#account"]:hover{background:rgba(255,255,255,.16)}
@media(max-width:760px){
 body .site-header .header-actions #header-search{width:40px;padding:0;justify-content:center;background:transparent}
 body .site-header .hdr-label{display:none}
}

/* Tutorial button: a flat open book; a page turns every few seconds, and at once on hover. */
body .site-header .header-actions #source-guide-toggle.header-tutor{width:46px;min-width:46px;height:40px;border-radius:13px;font-size:0}
body .site-header .header-actions #source-guide-toggle[aria-current=page]{background:rgba(255,255,255,.13)}
body .site-header .header-actions #source-guide-toggle[aria-expanded=true]{background:rgba(139,92,240,.32)}
.tutor-book{display:block;width:34px;height:34px;overflow:visible;stroke:none}
.tutor-book .tb-cover{fill:#8a5cf0}
.tutor-book .tb-left{fill:#fff}
.tutor-book .tb-right{fill:#f1ebff}
.tutor-book .tb-lines{fill:none;stroke:#c7b4f5;stroke-width:1.5;stroke-linecap:round}
.tutor-book .tb-mark{fill:#ffc93c}
.tutor-book .tb-page{fill:#fff;opacity:0;transform-box:view-box;transform-origin:20px 20px;animation:tb-turn 7s cubic-bezier(.45,0,.25,1) 1.2s infinite}
#source-guide-toggle:hover .tb-page,#source-guide-toggle:focus-visible .tb-page{animation:tb-turn-now .9s cubic-bezier(.45,0,.25,1)}
#source-guide-toggle:hover .tutor-book{transform:translateY(-1px)}
.tutor-book{transition:transform .2s ease}
@keyframes tb-turn{0%,74%{opacity:0;transform:none;fill:#fff}76%{opacity:1}86%{fill:#ddd0f8}92%{transform:scaleX(-1);opacity:1;fill:#fff}97%,100%{transform:scaleX(-1);opacity:0}}
@keyframes tb-turn-now{0%{opacity:1;transform:none;fill:#fff}50%{fill:#ddd0f8}80%{transform:scaleX(-1);opacity:1;fill:#fff}100%{transform:scaleX(-1);opacity:0}}

/* ---- Logo: draws itself on the first page of a visit only; later pages show it at rest. ---- */
:root[data-brand-seen] .site-header .neo-mark *,:root[data-brand-seen] .drawer-heading .neo-mark *{animation:none!important;stroke-dashoffset:0}
:root[data-brand-seen] .site-header .neo-mark .neo-flow,:root[data-brand-seen] .drawer-heading .neo-mark .neo-flow{opacity:0}

@media(prefers-reduced-motion:reduce){
 .tutor-book .tb-page{animation:none!important}
 body .site-header .header-actions .header-icon{transition:none}
}

/* The product library hides its own old rows (journey.css .journey-old-nav); 设置 stays. */
#drawer-navigation.journey-old-nav>a[data-nav-settings]{display:flex}
/* Same drawer heading on every page. */
.drawer-heading .demo-tag{display:none}

/* Motion curves for every page (same as tutorial-art.css): --spring overshoots about 16%, --spring-soft about 5%. */
:root{--spring:linear(0,.093,.307,.561,.795,.977,1.095,1.152,1.162,1.14,1.102,1.061,1.025,.998,.981,.974,.974,.979,.985,.992,.997,1.001,1.003,1.004,1.004,1.003,1.002,1.001,1,1,.999,.999,1);--spring-soft:linear(0,.068,.224,.411,.592,.747,.868,.954,1.01,1.04,1.053,1.053,1.047,1.038,1.027,1.018,1.011,1.005,1.001,.999,.997,.997,.997,.998,.998,.999,.999,1,1,1,1,1,1);}


/* ===== Page columns: every page's content sits in the middle of the white panel. ===== */
#main>#blog-root{width:100%;max-width:1040px;margin-inline:auto;box-sizing:border-box}
/* ===== Sidebar account row (nav-account.js): one soft tile, no divider line, no arrow. ===== */
#drawer-navigation{display:flex;flex-direction:column;min-height:100%}/* the row sits at the bottom of the sidebar */
body #nav-account{display:flex;align-items:center;gap:12px;margin:auto 0 0;padding:10px 12px 10px 10px;border:0;border-radius:18px;background:color-mix(in srgb,var(--ink) 4%,var(--bg));color:var(--ink);text-decoration:none;transition:background-color .2s ease,transform .35s var(--spring-soft,ease)}
body #nav-account:hover{background:color-mix(in srgb,var(--ink) 7%,var(--bg))}
body #nav-account:active{transform:scale(.97);transition-duration:.12s}
body #nav-account:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
body #nav-account .account-avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border:0;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent);color:var(--muted);overflow:hidden}
body #nav-account .account-avatar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body #nav-account .account-avatar.is-initial{background:#7532d6;box-shadow:none;color:#fff;font-size:16px;font-weight:650}
body #nav-account .account-nav-copy{display:flex;flex-direction:column;gap:1px;min-width:0}
body #nav-account .account-nav-copy strong{overflow:hidden;font-size:14px;font-weight:600;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}
body #nav-account .account-nav-copy>span{overflow:hidden;font-size:12px;line-height:1.4;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
body #nav-account .account-chevron{display:none}
body #nav-account[aria-current=page]{background:var(--ink);color:var(--bg)}
body #nav-account[aria-current=page] .account-nav-copy>span{color:color-mix(in srgb,var(--bg) 70%,transparent)}
body #nav-account[aria-current=page] .account-avatar:not(.is-initial){background:color-mix(in srgb,var(--bg) 14%,var(--ink));box-shadow:none;color:var(--bg)}
:root[data-theme=dark] body #nav-account:not([aria-current=page]){background:#1c1c1e}
:root[data-theme=dark] body #nav-account:not([aria-current=page]):hover{background:#2c2c2e}
:root[data-theme=dark] body #nav-account .account-avatar:not(.is-initial){background:#2c2c2e}
@media(prefers-reduced-motion:reduce){body #nav-account{transition:none}}
#main :is(.tut,.tbx,.set,.hc),#saved-view .saved,#detail-view,#account-view{margin-inline:auto}
#main>#journey-notice{max-width:880px;margin-inline:auto}
/* Phone drawer: the menu fills what is left under the drawer heading, so the settings row sits at the bottom edge instead of below it. */
#nav-drawer .drawer-panel{display:flex;flex-direction:column}
#nav-drawer .drawer-panel>#drawer-navigation{flex:1 0 auto;min-height:0}

/* ===== 消息 (messages-core.js): header envelope, sidebar row, unread badges ===== */
#drawer-navigation.journey-old-nav>a[data-nav-messages]{display:flex}
body .site-header .header-actions #header-messages{position:relative}
body .site-header .header-actions #header-messages[aria-current=page]{background:rgba(255,255,255,.13)}
.hdr-badge,.nav-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff3b30;color:#fff;font-size:11px;font-weight:700;font-style:normal;line-height:1;font-variant-numeric:tabular-nums;animation:badge-in .45s var(--spring,ease) both}
.hdr-badge[hidden],.nav-badge[hidden]{display:none}
body .site-header .header-actions .hdr-badge{position:absolute;top:1px;right:0;box-shadow:0 0 0 2px #000}
[data-nav-messages] .nav-badge{margin-left:auto}
@keyframes badge-in{from{transform:scale(0)}}
#menu-toggle{position:relative}
#menu-toggle[data-unread]::after{content:"";position:absolute;top:7px;right:6px;width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 2px #000}
@media(max-width:700px){body .site-header .header-actions #header-messages{display:none}}
@media(prefers-reduced-motion:reduce){.hdr-badge,.nav-badge{animation:none}}

/* ---- Navigation list: the current page ----
   Dark pages: the current group was a black pill on a black panel, so it vanished; it is light there.
   消息 / 设置 (the icon rows) show the current page with the same soft fill as the sub-pages, not a box. */
:root[data-theme=dark] #drawer-navigation .sidebar-main-row:has(>a[data-active]){background:#f5f5f7;color:#000;border-color:#f5f5f7}
:root[data-theme=dark] #drawer-navigation .sidebar-main-row>a[data-active]{color:#000}
/* The row paints the fill; a filled link inside it left a thin seam along the rounded edge. */
#drawer-navigation .sidebar-main-row>a[data-active]{background:transparent}
:root[data-theme=dark] #drawer-navigation .sidebar-main-row:has(>a[data-active])>button::before{background:#d8d8dd}
#drawer-navigation .nav-row[aria-current=page]{border-color:transparent;background:var(--line);font-weight:600}

/* ---- Phone menu (the same panel inside #nav-drawer, below 1024px) ----
   Height: inset 0 rather than 100dvh. On iPhone Safari with the floating toolbar 100dvh reaches under the
   toolbar while the screen area for fixed things stops above it, so the bottom (the settings row) was cut off.
   Close button: inside the panel, at the right of the logo row, instead of a white disc over the header icons.
   Rows: the same sizes as the desktop sidebar. */
#nav-drawer{height:auto;inset:0}
#nav-drawer .drawer-close{top:calc(env(safe-area-inset-top) + 24px);left:calc(min(76vw,340px) - 65px);width:40px;height:40px;border:0;background:color-mix(in srgb,var(--ink) 6%,var(--bg));color:var(--ink);transition:background-color .15s ease}
#nav-drawer .drawer-close:hover{background:color-mix(in srgb,var(--ink) 11%,var(--bg))}
#nav-drawer .drawer-close:active{background:color-mix(in srgb,var(--ink) 15%,var(--bg))}
#nav-drawer .drawer-close svg{width:18px;height:18px}
#nav-drawer .nav-row{gap:11px;padding:13px 12px;min-height:50px;font-size:15px;border-radius:12px}
#nav-drawer .nav-row svg{width:21px;height:21px}
@media(max-width:360px){#nav-drawer .drawer-close{left:calc(min(76vw,340px) - 59px)}}

/* Phones (the menu slides out below 1024px): the account lives in the header only, not in the menu. */
#nav-drawer #nav-account{display:none}

/* Dark controls use opaque surfaces and visible outlines. Light styles are unchanged. */
:root[data-theme=dark]{--control-line:color-mix(in srgb,var(--ink) 52%,var(--bg))}
:root[data-theme=dark] :is(.hdr-badge,.nav-badge){background:color-mix(in srgb,#ff3b30 70%,var(--bg));color:var(--ink);font-size:12px}
:root[data-theme=dark] :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:none}
:root[data-theme=dark] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){color:var(--ink);border-color:var(--control-line)}
:root[data-theme=dark] :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
:root[data-theme=dark] :is(.drawer-close,.toast,.favorite-toast){background:var(--bg);color:var(--ink);border:1px solid var(--line);box-shadow:none}
:root[data-theme=dark] :is(.batch2-photo,.detail-main-image,.metric-photo,.metric-main-image){background:color-mix(in srgb,var(--ink) 14%,var(--bg))}
:root[data-theme=dark] :is(.batch2-photo,.detail-main-image,.metric-photo,.metric-main-image) img{mix-blend-mode:normal}
:root[data-theme=dark] #main .msg{--m-purple:color-mix(in srgb,#7532d6 50%,var(--ink))}
:root[data-theme=dark] #main .msg .sv-opts input:checked+span{background:var(--m-purple);color:var(--bg)}
:root[data-theme=dark] #main .hc{--hc-purple:color-mix(in srgb,#7532d6 50%,var(--ink))}
:root[data-theme=dark] #main #health-root .hc-comp-head em{color:var(--hc-purple);background:color-mix(in srgb,var(--hc-purple) 12%,var(--bg))}
:root[data-theme=dark] #main #health-root .hc-input:focus-within{box-shadow:none;outline:2px solid var(--ink);outline-offset:3px}
:root[data-theme=dark] #main :is(.msg,.hc) :is(input,textarea,select){border-color:var(--control-line)}
:root[data-theme=dark] :is(#main,body) .tp :is(.tp-btn,.tb-pill){box-shadow:none}
:root[data-theme=dark] :is(#main,body) .tp .tb-key mark{background:color-mix(in srgb,var(--tp-purple) 22%,var(--bg));color:var(--ink)}
:root[data-theme=dark] :is(#main,body) .tp .tb-stage .tb-seg.is-you{color:var(--bg)}
:root[data-theme=dark] :is(#main,body) .tp :is(.tb-input,.tb-url input,.tb-form input,.tb-form select,.tb-form textarea){border-color:var(--control-line)}


:root[data-theme=dark] #main .tut .tut-dot{color:var(--ink)}
:root[data-theme=dark] #main .tut .tut-node:is(.is-now,.is-done) .tut-dot{color:var(--bg)}
:root[data-theme=dark] :is(#main,body) .tp .tp-guide{color:var(--bg);box-shadow:none}

:root[data-theme=dark] .supply-route-stale dl{opacity:1}
:root[data-theme=dark] .supply-image{background:color-mix(in srgb,var(--ink) 14%,var(--bg));color:var(--muted)}

:root[data-theme=dark] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){outline:1px solid var(--control-line);outline-offset:-1px}
:root[data-theme=dark] :is(input,select,textarea):focus-visible{outline:2px solid var(--ink);outline-offset:3px}

:root[data-theme=dark] :is(.catalog-pagination button:disabled,.source-chip:disabled){opacity:1;background:var(--bg);color:var(--muted);border-color:var(--control-line)}