/* Verifate UX layer · 2026-11-05 · design candidate
   Presentation only. Loaded after page/tool styles and before vf-global-nav.css.
   Does not touch the shared navigation (.vf-global-*), analytics, forms, scripts or copy.
   Same file is shipped to verifate.net and tools.verifate.net. */

/* ---------- 0. Tokens (fallbacks reuse the existing indigo / gold / ivory palette) ---------- */
:root{
 --ux-r:10px;--ux-r-sm:8px;
 --ux-line:var(--line,#d9d0b8);
 --ux-surface:var(--sheet,var(--white,#fbf8ef));
 --ux-accent:var(--btn,var(--button-bg,#2b2f6e));
 --ux-gold:var(--vf-gold,#876715);
 --ux-ink:var(--ink,#1c1b30);
 --ux-muted:var(--muted,#5d5a6e);
 --ux-focus:#876715;
 --ux-info-bg:#eef0fa;--ux-info-bar:#2b2f6e;
 --ux-warn-bg:#f8f1dc;--ux-warn-bar:#876715;
 --ux-err-bg:#fbeceb;--ux-err-bar:#a32f27;--ux-err-ink:#7c1f19;
 --ux-ok-bg:#eaf4ec;--ux-ok-bar:#2f6b3f;
 --ux-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang TC","Microsoft JhengHei","Noto Sans CJK TC",sans-serif;
 --ux-serif:Georgia,"Times New Roman","Songti TC","Noto Serif CJK TC",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --ux-line:#2c3157;--ux-surface:#151a33;--ux-ink:#ece6d3;--ux-muted:#a9a8bd;--ux-accent:#c9a55c;--ux-gold:#d9bb6e;
 --ux-focus:#d9bb6e;
 --ux-info-bg:#1a2040;--ux-info-bar:#d9bb6e;
 --ux-warn-bg:#2b2818;--ux-warn-bar:#d9bb6e;
 --ux-err-bg:#321a1d;--ux-err-bar:#e0685b;--ux-err-ink:#ffb4aa;
 --ux-ok-bg:#16291e;--ux-ok-bar:#6fbf86}}
:root[data-theme="dark"]{
 --ux-line:#2c3157;--ux-surface:#151a33;--ux-ink:#ece6d3;--ux-muted:#a9a8bd;--ux-accent:#c9a55c;--ux-gold:#d9bb6e;
 --ux-focus:#d9bb6e;
 --ux-info-bg:#1a2040;--ux-info-bar:#d9bb6e;
 --ux-warn-bg:#2b2818;--ux-warn-bar:#d9bb6e;
 --ux-err-bg:#321a1d;--ux-err-bar:#e0685b;--ux-err-ink:#ffb4aa;
 --ux-ok-bg:#16291e;--ux-ok-bar:#6fbf86}

/* ---------- 1. Language-aware typography (5 languages, local fonts only) ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--ux-sans)}
:lang(zh-Hans) body,body:lang(zh-Hans){--ux-sans:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--ux-serif:Georgia,"Times New Roman","Songti SC","Noto Serif CJK SC",serif}
:lang(ja) body,body:lang(ja){--ux-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Yu Gothic UI","Meiryo","Noto Sans CJK JP",sans-serif;--ux-serif:Georgia,"Times New Roman","Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP",serif;line-break:strict}
:lang(ko) body,body:lang(ko){--ux-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR",sans-serif;--ux-serif:Georgia,"Times New Roman","Noto Serif KR","Batang",serif}
/* Korean wraps at word spaces, not mid-word; long tokens (emails, IDs) still break */
:lang(ko) main :where(p,li,dd,td,summary,label,h1,h2,h3,h4){word-break:keep-all;overflow-wrap:anywhere}
:lang(ja) main :where(p,li,dd,td,summary,label){overflow-wrap:anywhere}
/* English uses a Latin stack so punctuation is not drawn with CJK glyphs */
:lang(en) body,body:lang(en){--ux-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
:lang(en) main :where(h1,h2,h3){font-family:var(--ux-serif)}
main :where(h1,h2){font-family:var(--ux-serif);text-wrap:balance}
main :where(h3,h4){text-wrap:balance}
main :where(p,li){text-wrap:pretty}
/* Heading scale: compact, no oversized hero lines on interior pages */
main h1{font-size:clamp(24px,2.2vw + 14px,34px);line-height:1.3;letter-spacing:0}
main h2{font-size:clamp(19px,1.1vw + 14px,24px);line-height:1.35}
main h3{font-size:clamp(17px,.5vw + 14px,19px);line-height:1.4}
body :where(main) :where(p,li,dd){line-height:1.7}

/* ---------- 2. Skip link: hidden until keyboard focus, then a clear solid button ---------- */
html body .skip,html body .skip-link{position:absolute!important;left:8px!important;top:-80px!important;z-index:100001;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
 border-radius:var(--ux-r-sm);background:var(--ux-accent)!important;color:#fff!important;font:600 15px/1 var(--ux-sans);text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}
html body .skip:focus,html body .skip-link:focus{top:8px!important;outline:3px solid var(--ux-focus);outline-offset:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body :is(.skip,.skip-link){color:#16142a!important}}
:root[data-theme="dark"] body :is(.skip,.skip-link){color:#16142a!important}

/* ---------- 3. Focus: one visible ring everywhere ---------- */
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid var(--ux-focus);outline-offset:2px;border-radius:6px}
main[tabindex="-1"]:focus{outline:none}

/* ---------- 4. Forms: one input language across the site and the tools ---------- */
html body :where(main,.vf-account,form) :where(input:not([type=checkbox],[type=radio],[type=hidden],[type=range],[type=submit],[type=button],[type=file],[type=color]),select,textarea){
 box-sizing:border-box;max-width:100%;min-height:44px;padding:9px 12px;font:400 16px/1.4 var(--ux-sans);color:var(--ux-ink);
 background:var(--ux-surface);border:1px solid var(--ux-line);border-radius:var(--ux-r-sm)}
main textarea{min-height:96px;line-height:1.5}
main select{padding-right:32px}
main :where(input,select,textarea)::placeholder{color:var(--ux-muted);opacity:.85}
main :where(input,select,textarea):hover{border-color:var(--ux-gold)}
main :where(input,select,textarea):focus-visible{border-color:var(--ux-gold);outline:3px solid var(--ux-focus);outline-offset:1px}
main :where(input,select,textarea)[aria-invalid="true"]{border-color:var(--ux-err-bar)}
main label{font-weight:600}
main label:where(.radio-choice,.checkbox-field,.radio-item) {font-weight:500}
/* radios / checkboxes: whole label row is the 44px touch target, native control stays (same name/value) */
html body :where(main,form) input:is([type=checkbox],[type=radio]){width:20px;height:20px;min-height:0;margin:0;accent-color:var(--ux-accent);flex:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) main :where(input[type=checkbox],input[type=radio]){accent-color:#d9bb6e}}
:root[data-theme="dark"] main :where(input[type=checkbox],input[type=radio]){accent-color:#d9bb6e}
main label:not(.radio-choice):has(>input[type=checkbox]),main label:not(.radio-choice):has(>input[type=radio]){display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
main fieldset{min-width:0;margin:0 0 14px;padding:12px 14px 8px;border:1px solid var(--ux-line);border-radius:var(--ux-r)}
main legend{padding:0 6px;font-weight:700;font-size:15px}
main :where(.field-help,.hint,.help){font-size:13.5px;line-height:1.6;color:var(--ux-muted)}

/* ---------- 5. Buttons: primary / secondary / ghost, same height, same radius ---------- */
main :where(button,.button,.btn,a.vf2-btn,.vf-actions a){box-sizing:border-box;min-height:44px;border-radius:var(--ux-r-sm);font-weight:600;line-height:1.25}
main :where(button,.button,.btn):not(:disabled):active{transform:translateY(1px)}
main :where(button,input[type=submit],input[type=button]):disabled{opacity:.55;cursor:not-allowed}
main :where(.vf-actions,.actions,.submit-row,.experience-actions,.vf2-actions,.vf2-cta){display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (max-width:480px){main :where(.vf-actions,.actions,.submit-row,.experience-actions,.vf2-cta)>:is(button,.button,.btn,a.vf2-btn){flex:1 1 100%;text-align:center;justify-content:center}}
/* legacy green primary buttons (older pages) follow the indigo / gold system */
main :where(a.button,.send-primary,.experience-primary){background-color:var(--ux-accent)}

/* ---------- 6. Notices, errors, empty states: one callout pattern ---------- */
main :where(.notice,.phase1-note,.sample-warning,.preview-note,.price-note,.locale-note,.vf-guide-result-note,.source-note){
 padding:12px 14px;border:1px solid var(--ux-line);border-left:4px solid var(--ux-warn-bar);border-radius:var(--ux-r-sm);background:var(--ux-warn-bg);color:var(--ux-ink);font-size:14.5px;line-height:1.65}
main :where([role=alert],.error,.vf-guide-error,.form-error,.field-error){padding:12px 14px;border:1px solid var(--ux-err-bar);border-left-width:4px;border-radius:var(--ux-r-sm);background:var(--ux-err-bg);color:var(--ux-err-ink);font-size:14.5px;line-height:1.6}
main :where([role=status],.status,.queue-status,.editor-status){font-size:14.5px;line-height:1.6}
main :where(.empty,.vf-empty,[data-empty]){padding:18px 14px;border:1px dashed var(--ux-line);border-radius:var(--ux-r);text-align:center;color:var(--ux-muted)}

/* ---------- 7. Cards, details, tables ---------- */
main :where(.card,.sheet,.vf2-svc,.vf-discovery-card,.vf2-tool,.vf-contact-card){border-radius:var(--ux-r)}
main details:not(.vf-lang):not(.vf-global-lang-dropdown)>summary{min-height:44px;cursor:pointer;font-weight:600}
main :where(.vf-table-scroll,.table-wrap){overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
main :where(table){border-collapse:collapse}
main :where(th){text-align:start;font-weight:700;background:var(--ux-info-bg)}
main :where(th,td){padding:8px 10px;border-bottom:1px solid var(--ux-line);vertical-align:top}
main :where(td,th){overflow-wrap:anywhere}
main :where(table)[tabindex]:focus-visible,main :where(.vf-table-scroll):focus-visible{outline:3px solid var(--ux-focus)}

/* ---------- 8. Reading width and rhythm ---------- */
main :where(.lead,.intro,.sub,.vf2-lead){max-width:46em}
main :where(section,.section){scroll-margin-top:72px}
main [id]{scroll-margin-top:72px}

/* ---------- 9. Tool pages: tarot / astrology / yijing / liuren / palm-study share one frame ---------- */
main.yijing-app,main.astrology-app,body>main#main:not(.yijing-app):not(.astrology-app),body>main:has(>header>.subtitle){box-sizing:border-box;width:100%;max-width:960px;margin-inline:auto;padding:20px 16px 40px}
body.vf-wide-tool>main.astrology-app{max-width:1040px}
body>main.astrology-app,body>main.astrology-app #app,body>main#main #app{background:transparent!important}
main.yijing-app :where(h1,h2,h3),main.astrology-app :where(h1,h2,h3){margin-block:0 .6em}
main.yijing-app h2,main.astrology-app h2{margin-top:1.4em}
main.yijing-app :where(button,select),main.astrology-app :where(button,select){min-height:44px}
main.yijing-app :where(.mode-section,.input-section,.edit-section) label{display:inline-flex;align-items:center;min-height:44px}
main.yijing-app .result-section,main.astrology-app :where(.result,.result-section,.astro-card){border-radius:var(--ux-r);border:1px solid var(--ux-line);background:var(--ux-surface)}
main.astrology-app{font-family:var(--ux-sans)}
main.astrology-app :where(#birth-form){max-width:760px}
@media (min-width:720px){main.astrology-app #birth-form.astro-form{grid-template-columns:1fr 1fr;column-gap:16px}main.astrology-app #birth-form .submit-row,main.astrology-app #birth-form .field:has(fieldset),main.astrology-app #birth-form .field:has(textarea),main.astrology-app #birth-form .full{grid-column:1/-1}}
/* liuren (research only) keeps its own header but adopts the shared frame */
body>main>header:has(.subtitle){text-align:start;margin-bottom:1.25rem}
body>main:has(>header>.subtitle) :where(.scope-section,section){border-radius:var(--ux-r)}
body>main:has(>header>.subtitle) .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){body>main:has(>header>.subtitle) .form-grid{grid-template-columns:1fr}}

/* ---------- 10. Home & directory: aligned guide, calm card rhythm ---------- */
[data-vf-tool-guide]{max-width:none}
[data-vf-tool-guide]>details,[data-vf-tool-guide] details.vf-guide{margin-inline:0;max-width:none;width:100%;box-sizing:border-box}
.vf2-grid,.vf-discovery-grid{align-items:stretch}
.vf2-tool,.vf-discovery-card{height:100%;box-sizing:border-box}
.vf2-tool:hover,.vf-discovery-card:hover{border-color:var(--ux-gold)}

/* ---------- 11. Account / My Services / administrator ---------- */
.vf-account :where(h1,h2){margin-block:0 .5em}
.vf-account :where(.card,section,form){border-radius:var(--ux-r)}
.vf-account :where(.status,.notice,[role=status]){margin-block:12px}
.vf-account table{width:100%}

/* ---------- 12. Motion & print ---------- */
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media print{.skip,.skip-link{display:none!important}}

/* ---------- 13. Touch targets: label rows, stand-alone links, legacy header link (>= 44px, layout otherwise unchanged) ---------- */
html body label.radio-choice,html body label.check,html body label.choice{min-height:44px;box-sizing:border-box;cursor:pointer}
html body input[type=checkbox]+label,html body input[type=radio]+label{display:inline-flex;align-items:center;min-height:44px}
html body .experience-actions>a,html body .related-tools>a,html body .site-links>a,html body .links>a,html body .related-tools a,html body main aside>a,html body main aside p>a:only-child{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
html body>a:not([class]):first-child,html body>a[href*="verifate.net"]:not([class]){display:inline-flex;align-items:center;min-height:44px;margin:4px 16px 0;color:var(--ux-accent);font-weight:700;letter-spacing:.08em;text-decoration:none}
html body main aside p>a:only-child,html body .vf-discovery>a,html body section.vf-discovery p>a:only-child{display:inline-flex;align-items:center;min-height:44px}
html body :where(section,aside,article)>a:not([class]){display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
html .vf-page .radio-options label,html body .radio-options label,html .vf-page label:has(>input:is([type=radio],[type=checkbox])){min-height:44px}
html body #birth-form .radio-item,html body .radio-item{min-height:44px;align-items:center}
html body #birth-form input[type=radio],html body #birth-form input[type=checkbox]{width:20px;height:20px;min-height:20px;flex:none}
html body footer>a:not([class]){display:inline-flex;align-items:center;min-height:44px;margin-inline-start:8px}
html body select:not([multiple]){min-height:44px;box-sizing:border-box}
html body label:not(.radio-choice):has(>input:is([type=radio],[type=checkbox])){min-height:44px;align-items:center}

/* ---------- 14. Contrast repairs found by the audit (dark-mode figure captions, footer note, dark lead text) ---------- */
body footer:not([class]){color:var(--ux-muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 }
 :root:not([data-theme="light"]) figcaption.ok{color:#8fd9a6}
 :root:not([data-theme="light"]) figcaption.bad{color:#ffa79b}
 :root:not([data-theme="light"]) main :where(p.lead,.lead){color:var(--ux-muted)}}

/* unstyled links take the brand colour instead of the browser default blue (any author colour still wins) */
:where(a:link,a:visited){color:var(--ux-accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) section.band p{color:var(--ux-muted)}
 :root:not([data-theme="light"]) body:has(figcaption.ok) button:not([class*=ghost]):not(:disabled){color:#16142a}}
html body :is(input,select,textarea,button,summary,a):focus-visible{outline:3px solid var(--ux-focus);outline-offset:2px}
html body input:is([type=checkbox],[type=radio]):focus-visible{outline-offset:3px}
html body input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]):is(:focus,:focus-within){outline:3px solid var(--ux-focus);outline-offset:1px}

/* administrator / account pages: page background follows the theme all the way down (no light strip under dark content) */
html:has(body.vf-account){background-color:var(--paper,#f3eee1)}