@import './care-tokens.css?v=visual-v2-20260928';
/* 两档阅读模式（标准 / 大字）与共用排版变量。
   由 care-ui.css?v=visual-v2-20260928 以 @import 在最前面引入，六页共用；默认“标准”。
   实现方式仅为：在 <html> 上设置 data-care-reading 属性 + 一套 CSS 变量，
   不缩放页面（无 zoom/transform）、不重建业务 DOM、不覆盖浏览器默认字号。
   字号采用 rem（跟随用户浏览器的基准字号）与有界 clamp，正文参考 18/24px。 */

/* 两档变量唯一定义见 care-tokens.css?v=visual-v2-20260928，此处不留第二份定义。*/
/* --- 阅读模式控制：顶部 “Aa” 触发 + 两档菜单 --- */
.care-reading{position:relative;display:flex;align-items:center;flex:none}
.care-reading-trigger{display:inline-flex;align-items:center;gap:calc(.4em * var(--care-spacing-scale, .5));min-height:40px;padding:calc(.2em * var(--care-spacing-scale, .5)) calc(.7em * var(--care-spacing-scale, .5));border:var(--care-border-width,1px) solid var(--care-line);border-radius:12px;background:var(--care-btn-bg,#fbf7ed);color:var(--care-ink);font-family:"Times New Roman","Songti SC",serif;font-size:var(--care-fs-sm);font-weight:bold;letter-spacing:.05em;cursor:pointer}
.care-reading-trigger .care-reading-current{font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:var(--care-fs-xs);font-weight:normal;color:var(--care-muted)}
.care-reading[data-open="true"] .care-reading-trigger{background:var(--care-control-open-bg,#eef0e0);border-color:var(--care-control-open-border,#cbd6bb)}
/* The hero is an isolated stacking context: lift that context while its menu is open. */
.care-hero:has(.care-reading[data-open="true"]){z-index:100}
/* 菜单宽度跟随视口与正文档位，避免大字号时示例句被压挤。
   头区并入滚动区后菜单随之上移，高度上限收到 min(58dvh,20rem)：
   短屏(360x640 / 740x390)与大字档下两档仍全部落在滚动区内可点，超出部分菜单自身滚动。
   子项一律 flex:0 0 auto（自然高度、不收缩）——此前默认 flex:0 1 auto，在 max-height
   约束下会被压扁，大字档相邻两项文字互相叠压。 */
.care-reading-menu{position:absolute;top:calc(100% + .4rem);right:0;z-index:210;display:flex;flex-direction:column;gap:calc(2px * var(--care-spacing-scale, .5));width:var(--care-menu-width,min(92vw,20rem));max-width:var(--care-menu-width,min(92vw,20rem));max-height:var(--care-menu-max-h,min(58dvh,22rem));overflow-y:auto;overscroll-behavior:contain;padding:var(--care-menu-pad,calc(.5rem * var(--care-spacing-scale, .5)));background:var(--care-card);border:var(--care-border-width,1px) solid var(--care-line);border-radius:var(--care-menu-radius,16px);box-shadow:var(--care-menu-shadow,0 14px 36px #4b341926)}
.care-reading-menu[hidden]{display:none}
.care-reading-menu>*{flex:0 0 auto}
/* 菜单里的说明文字是 <p>，而本控件挂在头区里，会被两条别处规则命中：
   非聊天页的 .care-hero p（max-width:58% + 正文字号/行高）在大字档把它变成一个又窄又高的
   说明块；聊天页横屏还有 @media(max-height:560px) 的 .xiaowa-header p{display:none}，
   会把标题与说明整段藏掉。这里用更高作用域显式拉回小号、整行宽并保持显示。 */
.care-reading-menu p,html[data-care-ui="active"] .care-reading-menu p{display:block;width:auto;max-width:100%;margin:0;font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-size:var(--care-fs-xs);font-weight:normal;line-height:1.5;letter-spacing:0;text-align:left;transform:none;white-space:normal;overflow-wrap:anywhere}
.care-reading-menu .care-reading-menu-title,html[data-care-ui="active"] .care-reading-menu p.care-reading-menu-title{margin:calc(.25rem * var(--care-spacing-scale, .5)) calc(.375rem * var(--care-spacing-scale, .5)) calc(.375rem * var(--care-spacing-scale, .5));color:var(--care-muted)}
.care-reading-menu .care-reading-note,html[data-care-ui="active"] .care-reading-menu p.care-reading-note{margin:calc(.375rem * var(--care-spacing-scale, .5)) calc(.375rem * var(--care-spacing-scale, .5)) calc(.25rem * var(--care-spacing-scale, .5));color:var(--care-muted)}
/* 档位按钮：字号/内边距/行高/外边距自持，不依赖通用按钮规则（方案页内联 button{margin:calc(5px * var(--care-spacing-scale, .5))}
   也会命中这里，一并复位），每项高度仍由内容决定，不写死。 */
.care-reading-option{display:flex;align-items:center;justify-content:space-between;gap:calc(.75rem * var(--care-spacing-scale, .5));width:100%;margin:0;min-height:44px;padding:calc(.5rem * var(--care-spacing-scale, .5)) calc(.625rem * var(--care-spacing-scale, .5));border:0;border-radius:10px;background:none;color:var(--care-ink);font:inherit;font-size:var(--care-fs-sm);line-height:1.35;text-align:left;cursor:pointer}
.care-reading-option-text{display:flex;flex-direction:column;gap:calc(.15em * var(--care-spacing-scale, .5));min-width:0;flex:1 1 auto}
.care-reading-tier{font-size:var(--care-fs-sm);font-weight:bold;line-height:1.35;color:var(--care-ink)}
.care-reading-check{flex:none;visibility:hidden;color:var(--care-green,#456844);font-size:var(--care-fs-sm);line-height:1}
.care-reading-option[aria-checked="true"]{background:var(--care-pill-bg,#e9efdc)}
.care-reading-option[aria-checked="true"] .care-reading-check{visibility:visible}
.care-reading-option:hover{background:#f2f4e8}
/* 示例句字号直接等于该档正文，用户看到的就是实际阅读观感；
   菜单变窄时整行折行，不截断也不撑破按钮。 */
.care-reading-sample{font-size:var(--care-fs-body-1);line-height:var(--care-lh-body-1);color:var(--care-muted);white-space:normal;overflow-wrap:anywhere}

/* --- 聊天页：阅读控件并入既有 .xiaowa-header 同行，隐藏重复的 .care-topline --- */
.care-chat-page .care-topline{display:none}
.care-chat-page .xiaowa-header .care-reading{margin-left:auto;flex:none}

/* 大字号下多列网格收敛为更少、更高的列，避免压字或截字。 */
html[data-care-reading="large"] .care-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-care-reading="large"] #items{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-care-reading="large"] .care-reference{grid-template-columns:minmax(0,1fr)}
html[data-care-reading="large"] #sections{grid-template-columns:minmax(0,1fr)}
html[data-care-reading="large"] .care-ingredients{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 独立账号页、养生柜复用标准档字阶；大字沿用既有显示。 */
html[data-care-ui="active"]:not([data-care-reading="large"]) :is(.account-page,.cabinet-main){font-family:var(--care-font-body);font-size:var(--care-fs-body-1);line-height:var(--care-lh-body-1)}
html[data-care-ui="active"]:not([data-care-reading="large"]) :is(.account-page,.cabinet-main) h1{font-family:var(--care-font-head);font-size:var(--care-fs-h1);line-height:var(--care-lh-title)}
html[data-care-ui="active"]:not([data-care-reading="large"]) :is(.account-page,.cabinet-main) h2{font-family:var(--care-font-head);font-size:var(--care-fs-h2);line-height:var(--care-lh-title)}
html[data-care-ui="active"]:not([data-care-reading="large"]) :is(.account-page,.cabinet-main) h3{font-family:var(--care-font-head);font-size:var(--care-fs-h3);line-height:var(--care-lh-title)}
html[data-care-ui="active"]:not([data-care-reading="large"]) :is(.account-page,.cabinet-main) :is(p,.welcome,.menu-row,.primary,.secondary,.quiet){font-size:var(--care-fs-body-2);line-height:var(--care-lh-body-2)}
html[data-care-ui="active"]:not([data-care-reading="large"]) :is(.account-page,.cabinet-main) :is(.hint,.eyebrow,.section-label,.login-entry,.login-entry button,.menu-row>span:last-child,footer){font-size:var(--care-fs-body-3);line-height:var(--care-lh-body-3)}