/* Member layer (member.js): email sign-in bar, payment wait, account and saved-report
   dialog. Normal document flow only; the dialogs scroll as a whole like the native
   guide dialogs. Native classes (pass-login, pass-status, analysis-card, pass-section)
   keep their own styling. */
/* Contrast fix (2026-10-16 browser audit). The member layer's two dark .guide-dialog dialogs
   (#oraclys-member-dialog incl. its sign-in panel and saved-reading view, #oraclys-unlock-dialog;
   background #17131f from styles.css) inherited the light-page tokens, so headings, .secondary,
   .text-button and .small-note were dark green/grey on near-black. Fix: redefine the native tokens
   on these two dialogs only, with colours from the v41 dark palette already in use (close button
   #ead8b7 / hover #fff1d9 / hover border #d8ba89 / hover fill #c7aa7512 in reading-layout.css;
   body text #e4d7c0, secondary text #c4b8a3, link #d1b57f in styles.css .guide-dialog rules;
   dark-card label #d6b77e in styles.css .analysis-period). The light cream cards inside them
   (.analysis-card, .psy-card) and the dark-green .primary get the native light tokens back, so
   they render exactly as before. Role rules use :where() so they keep native specificity
   (later-file tie wins) and skip anything inside a cream card. No other page is touched:
   every selector starts at one of the two member-layer dialogs. test/contrast.test.mjs checks
   the ratios. */
:where(.oraclys-member-dialog,.oraclys-unlock-dialog){--ink:#ead8b7;--text:#e4d7c0;--muted:#c4b8a3}
:where(.oraclys-member-dialog,.oraclys-unlock-dialog) :is(.analysis-card,.psy-card){--ink:#193d32;--text:#34453c;--muted:#68756c}
:where(.oraclys-member-dialog,.oraclys-unlock-dialog) .primary{--ink:#193d32}
:where(.oraclys-member-dialog,.oraclys-unlock-dialog) .secondary:where(:not(:is(.analysis-card,.psy-card) *)){border-color:#bba079}
:where(.oraclys-member-dialog,.oraclys-unlock-dialog) .secondary:hover:not(:disabled):where(:not(.oraclys-member-danger,[aria-disabled="true"],:is(.analysis-card,.psy-card) *)){color:#fff1d9;border-color:#d8ba89;background:#c7aa7512}
:where(.oraclys-member-dialog,.oraclys-unlock-dialog) .text-button:where(:not(:is(.analysis-card,.psy-card) *)){color:#d1b57f}
:where(.oraclys-member-dialog,.oraclys-unlock-dialog) .text-button:hover:not(:disabled):where(:not(:is(.analysis-card,.psy-card) *)){color:#fff1d9}
:where(.oraclys-member-dialog,.oraclys-unlock-dialog) .psy-eyebrow:where(:not(:is(.analysis-card,.psy-card) *)){color:#d6b77e}
/* Light commerce dialog (.credit-dialog, background #f7f3eb): member-layer notes at full opacity
   and darker than the native --muted (#68756c is 4.36:1 there); #5c7150 is the v41 .psy-empty
   text colour. Native notes outside the member slots keep their v41 colour. */
.credit-dialog [data-member-slot] .small-note,.credit-dialog .small-note.oraclys-member-afterbuy{color:#5c7150}
/* Contrast round 2 (2026-10-16 review of the fix above). CSS only, member-layer scope only.
   Dark dialogs: the dark-green .primary gets the same #bba079 outline as .secondary (7.32 on the
   dialog), a disabled .secondary gets no native #dee8d6 hover blob, and a busy (aria-disabled)
   button that keeps focus gets a ring that survives its opacity .5 (#fff1d9 at 50%: 4.86). */
:where(.oraclys-member-dialog,.oraclys-unlock-dialog) .primary:where(:not(:is(.analysis-card,.psy-card) *)){border-color:#bba079}
:where(.oraclys-member-dialog,.oraclys-unlock-dialog) .secondary:disabled:hover:where(:not(:is(.analysis-card,.psy-card) *)){background:transparent}
:where(.oraclys-member-dialog,.oraclys-unlock-dialog) [aria-disabled="true"]:focus-visible:where(:not(:is(.analysis-card,.psy-card) *)){outline-color:#fff1d9}
/* Member dialog inputs (sign-in email and code, check-in note): a 3:1 edge (#bba079: 6.68 on the
   sign-in panel, 7.32 on the dialog). */
.oraclys-member-dialog :is(.pass-login,.oraclys-member-checkin) input{border-color:#bba079}
/* Saved-reading paid cards are cream inside the dark dialog: the dark-card cue colour (#c7cfbf) and
   the light-page label greys are too pale there. #49613e is the v41 reason-text green (5.67 on the
   darker card stop #eceadf). */
.oraclys-member-paid .psy-card :is(.analysis-period-cue,.mini-label,.small-note,.psy-eyebrow){color:#49613e}
/* Light commerce dialog, member slots only: inputs get a visible edge and a light fill instead of
   the dark-design ones (#8a7a5c: 3.78 on #f7f3eb), the key-format placeholder 5.25, and the claim
   summary and checkout link get the darker #96733d ring the native .credit-dialog buttons use. */
.credit-dialog [data-member-slot] .pass-login input{border-color:#8a7a5c;background:#fffdf7}
.credit-dialog [data-member-slot] input::placeholder{color:#5c7150;opacity:1}
.credit-dialog [data-member-slot] :is(a,summary):focus-visible{outline-color:#96733d}
.oraclys-member-bar{margin:-.4rem 0 1rem;font-size:13px;line-height:1.7}
.oraclys-member-bar p{margin:0}
.oraclys-member-who{font-weight:600;overflow-wrap:anywhere}
.oraclys-member-bar .text-button,.oraclys-member-who .text-button{min-height:36px;padding:6px 0;font-size:12px}
.oraclys-member-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:6px 0 0}
.oraclys-member-links .text-button{margin-top:0}
.oraclys-member-notice{margin:0 0 8px;padding:10px 12px;border-left:3px solid #b99c64;font-size:13px;line-height:1.7}
.oraclys-member-signin [data-member-code-sent]{overflow-wrap:anywhere}
.oraclys-member-signin form,.oraclys-member-claim form{display:grid;gap:10px}
.oraclys-member-claim{margin-top:12px}
.oraclys-member-claim summary,.oraclys-member-delete summary{font-size:13px;cursor:pointer}
.oraclys-member-paywait{display:grid;gap:10px;margin:14px 0 0}
.oraclys-member-paywait[hidden]{display:none}
.oraclys-member-paywait p{margin:0}
/* Approved privacy-rewrite lines in the checkout dialog (review 3, 2026-10-16): S01 before the
   legal links, S04 under the status line in the member bar, X04 in the activation section. */
.oraclys-member-privacy{font-size:11px;line-height:1.7;margin:20px 0 0;opacity:.75}
.oraclys-member-bar .oraclys-member-session{font-size:11px;line-height:1.6;margin:4px 0 0}
.oraclys-member-afterbuy{font-size:11px;line-height:1.7;margin:12px 0 0}
.oraclys-member-paywait button,.oraclys-member-paywait a{justify-self:start}
.oraclys-member-dialog .guide-dialog-body{display:grid;gap:14px}
.oraclys-member-account,.oraclys-member-report{display:grid;gap:12px;min-width:0}
.oraclys-member-account h3,.oraclys-member-report h3{margin:10px 0 0}
.oraclys-member-history{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.oraclys-member-history-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid #b99c6466;border-radius:14px}
.oraclys-member-history-item div{display:grid;gap:2px;min-width:0}
.oraclys-member-history-item small{opacity:.8}
.oraclys-member-badge{justify-self:start;font-size:11px;padding:2px 8px;border:1px solid #b99c64;border-radius:999px}
.oraclys-member-report-title{font-size:20px}
.oraclys-member-free{margin:4px 0}
.oraclys-member-locked{display:grid;gap:10px;padding:16px;border:1px solid #b99c6499;border-radius:16px}
.oraclys-member-locked p{margin:0}
.oraclys-member-locked button{justify-self:start;display:inline-flex;align-items:center;gap:8px}
.oraclys-member-paid{display:grid;gap:12px}
.oraclys-member-paid-heading{font-size:16px}
.oraclys-member-checkin{display:grid;gap:10px;padding:16px;border:1px solid #b99c6466;border-radius:16px}
.oraclys-member-checkin h3{margin:0}
.oraclys-member-checkin p{margin:0}
.oraclys-member-checkin-choices{display:flex;flex-wrap:wrap;gap:8px}
.oraclys-member-checkin-choices [aria-pressed="true"]{border-color:#d8ba89;box-shadow:inset 0 0 0 1px #d8ba89;font-weight:600}
.oraclys-member-checkin input{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid #b99c6466;background:transparent;color:inherit;min-width:0}
.oraclys-member-checkin [data-member-checkin-save]{justify-self:start}
.oraclys-member-checkin-history{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13px}
.oraclys-member-delete{border-top:1px solid #b99c6440;padding-top:12px}
.oraclys-member-delete p{line-height:1.7}
.oraclys-member-ack{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.oraclys-member-danger{border-color:#c0617a;color:inherit}
.oraclys-member-danger[aria-disabled="true"],[data-member-report-delete-cancel][aria-disabled="true"]{opacity:.5;cursor:default}
/* Review 5: a busy (aria-disabled, not :disabled) confirm or Cancel does nothing, so it gets no
   hover lift or hover fill from the native .secondary:hover rules. */
.oraclys-member-history-item [aria-disabled="true"]:hover{background:transparent;transform:none}
.oraclys-member-history-item .oraclys-member-danger[aria-disabled="true"]:hover{background:#c0617a1f}
/* Review 5: the armed confirm carries a red tint so it does not read like the Cancel next to it. */
.oraclys-member-history-item .oraclys-member-danger{background:#c0617a1f}
.oraclys-member-history-item .oraclys-member-danger:hover:not([aria-disabled="true"]){background:#c0617a3d}
/* Contrast round 2: the account-level delete gets the same red hover tint instead of the native
   #dee8d6 blob (text #e4d7c0 on it was 1.12; on the tint 9.61). */
.oraclys-member-dialog .oraclys-member-delete .oraclys-member-danger:hover:not(:disabled){background:#c0617a3d}
@media (max-width:760px){
 /* Review 5: a wider gap between side-by-side buttons on phones (the confirm and its Cancel). */
 .oraclys-member-history-item{align-items:flex-start;column-gap:18px}
 .oraclys-member-checkin-choices button{flex:1 1 100%}
}
/* Refund policy R2 unlock confirmation (unlock-confirm.js): one short modal, document-sized
   text, buttons that wrap to full width on phones. No animation (reduced-motion safe). */
.oraclys-unlock-dialog{width:min(560px,calc(100vw - 32px))}
.oraclys-unlock-dialog>header h2{font-size:18px;line-height:1.5}
.oraclys-unlock-content{display:grid;gap:12px}
.oraclys-unlock-content p{margin:0;line-height:1.75;overflow-wrap:anywhere}
.oraclys-unlock-window{padding:10px 12px;border-left:3px solid #b99c64}
.oraclys-unlock-policy a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.oraclys-unlock-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:4px}
.oraclys-unlock-actions button{min-height:44px}
@media (max-width:760px){
 .oraclys-unlock-actions{flex-direction:column-reverse}
 .oraclys-unlock-actions button{width:100%}
}
@media (prefers-reduced-motion:reduce){.oraclys-unlock-dialog,.oraclys-unlock-dialog *{animation:none!important;transition:none!important}}

/* Cloudflare Turnstile box on the sign-in step (decision g, 2026-10-16); the widget is 65 px tall. */
.oraclys-member-turnstile{margin:12px 0;min-height:65px}

/* Checkout plan cards (plan-cards.js; copy approved by Henry 2026-10-16, "核准"). Light commerce
   dialog only (#f7f3eb, v41 palette). Badge: #fffaf0 on the v41 gold #8a662b (5.03). Saving line:
   #7c5a24 (5.12 on the selected card fill, the darkest card state). Per-month line, included
   items and heading: the dialog text #2a2533; included notes at opacity .75 (5.86 on the selected
   card fill, 6.12 on the included block). Check marks: the v41 card check colour #9b7541 (3.68,
   decorative, aria-hidden). Everything wraps; nothing is wider than its card at 360 px. The badge
   is anchored by its bottom edge (8 px into the card, the old top:-9px for one 17 px line), so at
   large text sizes it wraps upward inside its card width instead of spilling sideways or over the
   plan name. oraclys-plan-sep: visually hidden ", " between the badge, price and lines.
   test/contrast.test.mjs checks the ratios. */
.oraclys-checkout .oraclys-plan-options{padding-top:4px}
.oraclys-plan-badge{position:absolute;bottom:calc(100% - 8px);left:8px;max-width:calc(100% - 16px);padding:1px 8px;border-radius:999px;background:#8a662b;color:#fffaf0;font:600 11px/15px var(--sans,system-ui,sans-serif);font-style:normal;letter-spacing:.02em;white-space:normal;overflow-wrap:anywhere;pointer-events:none}
.oraclys-plan-choice .oraclys-plan-sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.oraclys-plan-choice .oraclys-plan-math{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.oraclys-plan-choice .oraclys-plan-math span{font-size:inherit;line-height:inherit}
.oraclys-plan-choice .oraclys-plan-save{color:#7c5a24;font-weight:600}
.oraclys-included{margin:0 0 19px;padding:14px 16px;border:1px solid #a88b6540;border-radius:12px;background:#9f8c7508;min-width:0;overflow-wrap:anywhere}
.oraclys-included h3{margin:0 0 8px;font:600 13px/1.6 var(--sans,system-ui,sans-serif);color:#2a2533}
.oraclys-included ul{list-style:none;margin:0;padding:0}
.oraclys-included li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.6}
.oraclys-included li+li{margin-top:5px}
.oraclys-included-mark{flex:none;width:12px;color:#9b7541;font-weight:600}
.oraclys-included li>span:last-child{min-width:0}
.oraclys-included-note{margin:10px 0 0;font-size:12px;line-height:1.7;opacity:.75}
@media screen and (max-width:760px), screen and (max-width:960px) and (max-height:500px){
 .oraclys-checkout .oraclys-plan-options{row-gap:16px}
 .oraclys-plan-choice .oraclys-plan-math{flex-basis:100%;font-size:13px}
 .oraclys-included{padding:14px}
}
/* The key label (恒印之鑰 / ORACLYS Key / ORACLYSキー) is longer than the v41 label. On phones the two
   control columns size to their content, so the label never breaks mid-word (checked at 320 to 375 px, five languages). */
@media screen and (max-width:760px), screen and (max-width:960px) and (max-height:500px){
 html[data-mode="journey"] header.masthead{grid-template-columns:minmax(0,1fr) max-content max-content}
 html[data-mode="journey"] header.masthead :is(.credit-menu,.motion-toggle){white-space:nowrap}
}