/* =========================================
   ASHIRAN MASTER THEME
   v3.0 — Black & Gold + Orange Accent
   ========================================= */

/* 1. IMPORTS & SETUP */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&family=Sarabun:wght@300;400;500&display=swap');

:root {
    /* Colour, shadow and aurora tokens moved out on 2026-09-05 into
       theme-dark.css and theme-light.css -- they are the only tokens that change
       between modes. What stays here does not change between modes, so keeping it
       in one place is what stops the two files drifting apart. */

    /* === Fonts === */
    --font-head: 'Kanit', sans-serif;
    --font-body: 'Sarabun', sans-serif;
    --font-code: 'Consolas', 'Courier New', monospace;

    /* === Radii === */
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-pill: 30px;

    /* === Motion === */
    --edge-turn: 3.4s;
}

/* --a is the angle the focus ring's highlight travels around. It has to be REGISTERED, not just
   declared: an unregistered custom property is not interpolatable, so `to { --a: 360deg }` would
   jump from 0 to 360 in one step at the end instead of sweeping, and the ring would flick rather
   than run. @property is what makes the browser treat it as an angle and tween it. */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }


/* 2. GLOBAL RESET */
html, body {
    width: 100%;
    max-width: 100%;
    /* clip (not hidden): hides horizontal overflow WITHOUT forcing overflow-y:auto,
       which would turn the element into a scroll container. hidden here was nesting
       html>body>main scrollers -> janky "grab the wrong scrollbar" wheel scroll. */
    overflow-x: clip !important;
    background-color: var(--bg-dark) !important;
    color: var(--text-main) !important;
    font-family: var(--font-body) !important;
    font-weight: 400;
    line-height: 1.6;
    margin: 0; padding: 0;
}

/* Page templates redefine `main { overflow-x: hidden }` which re-creates the
   scroll-container side effect. Force clip site-wide so the viewport is the
   single vertical scroll context. */
main { overflow-x: clip !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark) !important; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--ashi-gold-fill-rgb), 0.5);
    border-radius: 4px;
    border: 1px solid var(--bg-dark);
}
::-webkit-scrollbar-thumb:hover { background: var(--ashi-gold) !important; }

/* Links */
a { color: var(--ashi-gold); text-decoration: none; transition: all 0.2s ease; }
a:hover { color: var(--ashi-gold-hover); text-shadow: 0 0 5px rgba(var(--ashi-gold-fill-rgb), 0.4); }
a.whitecon { color: var(--text-main); }
a.whitecon:hover { color: var(--ashi-gold) !important; }

/* 3. TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head) !important; color: var(--ashi-gold) !important; }
h1 { font-size: 1.65rem; letter-spacing: 1px; }
h2, h3 { font-size: 1.4rem; letter-spacing: 1px; }
h4, h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
@media (min-width: 768px) {
    h1 { font-size: 1.75rem; letter-spacing: 1.5px; }
    h2, h3 { font-size: 1.5rem; }
}

/* Hero title — gold gradient text */
.ashi-hero-title {
    font-size: 2.5rem;
    font-weight: 600;
    background: var(--ashi-gold-grad-bright);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .ashi-hero-title { font-size: 1.6rem; }
}

/* Section heading with left-border accent */
.ashi-section-title {
    color: var(--text-main);
    border-left: 4px solid var(--ashi-gold-bright);
    padding-left: 12px;
    margin-bottom: 1.5rem;
}

/* 4. NAVBAR & MENU */
#mainnav {
    position: fixed !important;
    z-index: 9999 !important;
    /* [FIX] เต็มจอ — กัน inner element ที่อาจมี max-width */
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}
#mainnav #mainNavBut {
    /* container-fluid default มี padding 0.75rem ทำให้ขอบไม่ touch — บังคับเต็ม */
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin: 0 !important;
}
#sponnav { position: fixed !important; z-index: 9999 !important; }
#ads_footer { position: fixed !important; z-index: 5555 !important; }
.navbar-bgcustom { background-color: var(--bg-dark) !important; border-bottom: 1px solid var(--ashi-gold-dim); }
.navbar-custom .navbar-brand, .navbar-custom .nav-link { color: var(--text-main) !important; }
.navbar-custom .nav-link.active, .navbar-custom .nav-link:hover { color: var(--ashi-gold) !important; }
.nav-link.border-success { border-color: var(--ashi-gold) !important; }

/* [FIX] Mobile collapse menu — กางเมนูแล้วต้องมีพื้นหลัง dark + เต็มจอ */
#mainnav .collapse.navbar-collapse,
#mainnav .navbar-collapse.collapsing,
#mainnav .navbar-collapse.show {
    background-color: var(--bg-dark) !important;
    width: 100%;
    margin: 0;
    padding: 0;
}
#mainnav .collapse.navbar-collapse .navbar-nav {
    width: 100%;
    padding: 8px 0;
}
#mainnav .collapse.navbar-collapse .nav-item {
    width: 100%;
    border-bottom: 1px solid rgba(var(--ashi-gold-ink-rgb), 0.08);
}
#mainnav .collapse.navbar-collapse .nav-link {
    padding: 12px 16px !important;
}
/* Dropdown menu สีพื้น dark ให้กลืน */
#mainnav .collapse.navbar-collapse .dropdown-menu {
    background-color: var(--bg-darker) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0;
    padding: 0;
}
#mainnav .collapse.navbar-collapse .dropdown-menu .dropdown-item {
    color: var(--text-main) !important;
    padding: 10px 24px;
}
#mainnav .collapse.navbar-collapse .dropdown-menu .dropdown-item:hover {
    background-color: var(--ashi-gold-dim) !important;
    color: var(--ashi-gold-bright) !important;
}

/* Hamburger Animation */
.animated-icon2 { width: 30px; height: 20px; position: relative; cursor: pointer; }
.animated-icon2 span {
    display: block; position: absolute; height: 3px; width: 100%;
    border-radius: 9px; opacity: 1; left: 0; background: var(--ashi-gold) !important;
    transition: .25s ease-in-out;
}
.animated-icon2 span:nth-child(1) { top: 0px; }
.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) { top: 10px; }
.animated-icon2 span:nth-child(4) { top: 20px; }
.animated-icon2.open span:nth-child(1), .animated-icon2.open span:nth-child(4) { top: 11px; width: 0%; left: 50%; }
.animated-icon2.open span:nth-child(2) { transform: rotate(45deg); }
.animated-icon2.open span:nth-child(3) { transform: rotate(-45deg); }

/* Dropdown */
.dropdown-menu { background-color: #ffffff !important; border: 1px solid var(--ashi-gold-dim) !important; }
.dropdown-item { color: var(--lg-ink-212529) !important; }
.dropdown-item:hover { background-color: var(--ashi-gold-dim) !important; color: var(--ashi-gold) !important; }
.dropdown-divider { border-top: 1px solid rgba(255,255,255,0.1); }

/* Sticky sub-nav (ใช้ในหน้า brokers/service) */
.ashi-sub-navbar {
    background-color: var(--bg-darker);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-faint);
    position: sticky;
    top: 0;
    z-index: 999;
}
.ashi-sub-nav-link {
    color: var(--text-dim);
    font-size: 0.95rem;
    padding: 15px 20px;
    text-decoration: none;
    transition: 0.3s;
    border-bottom: 2px solid transparent;
    display: inline-block;
}
.ashi-sub-nav-link:hover,
.ashi-sub-nav-link.active {
    color: var(--ashi-gold-bright);
    border-bottom-color: var(--ashi-gold-bright);
}

/* 5. BUTTONS */
/* Solid Gold */
.btn-custom, .btn-primary, .btn-gold-gradient, .btn-gold {
    background: var(--ashi-gold-grad) !important;
    color: var(--ashi-on-gold) !important;
    border: none !important;
    border-radius: var(--radius-pill);
    font-weight: 500;
    transition: 0.3s;
}
.btn-custom:hover, .btn-primary:hover, .btn-gold-gradient:hover, .btn-gold:hover {
    background: var(--ashi-gold-bright) !important;
    color: var(--lg-ink-000000) !important;
    box-shadow: var(--shadow-gold) !important;
    transform: translateY(-2px);
}

/* Outline Gold */
.btn-outline-custom, .btn-dark-outline-gold, .btn-read-review {
    background: transparent !important;
    color: var(--ashi-gold) !important;
    border: 1px solid var(--ashi-gold) !important;
    border-radius: var(--radius-pill);
    font-weight: 500;
    transition: 0.3s;
}
.btn-outline-custom:hover, .btn-dark-outline-gold:hover, .btn-read-review:hover {
    background: var(--ashi-gold-dim) !important;
    color: var(--ashi-gold-bright) !important;
    border-color: var(--ashi-gold-bright) !important;
}

/* Solid Orange (CTA highlight) */
.btn-orange {
    background: var(--ashi-orange-grad) !important;
    color: var(--text-main) !important;
    border: none !important;
    border-radius: var(--radius-pill);
    font-weight: 500;
    transition: 0.3s;
}
.btn-orange:hover {
    background: var(--ashi-orange-hover) !important;
    color: var(--text-main) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--ashi-orange-dim) !important;
}

/* 6. CARDS & CONTENT */
.blog-card, .form-card, .luxury-ads-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--ashi-gold-dim);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 25px;
}

/* Generic card สำหรับ broker/service/forex */
.ashi-card {
    background-color: var(--bg-card);
    border: 1px solid var(--ashi-gold-dim);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ashi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--ashi-gold-border);
}
.ashi-card-header {
    padding: 20px;
    text-align: center;
    background: linear-gradient(180deg, var(--bg-card-elevated) 0%, var(--bg-card) 100%);
    border-bottom: 1px solid var(--ashi-gold-dim);
}
.ashi-card-body {
    padding: 20px;
}
.ashi-card-footer {
    padding: 15px 20px;
    background-color: var(--lg-glass-000000-20);
    border-top: 1px solid var(--ashi-gold-dim);
}

/* Stat row (ใน broker card) */
.ashi-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-faint);
}
.ashi-stat-row:last-child { border-bottom: none; }
.ashi-stat-label { color: var(--text-dim); font-size: 0.9rem; }
.ashi-stat-val { color: var(--ashi-gold-bright); font-weight: 600; }
.ashi-stat-val--white { color: var(--text-main); }

/* Cover Image (Standard 16:9) */
.cover-ratio-16-9 {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--lg-bg-000000);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-hover);
    display: block;
}

/* Hero section (ใช้บนสุดของ landing page) */
.ashi-hero {
    position: relative;
    padding: 60px 0 40px;
    background: radial-gradient(circle at center, var(--lg-bg-2a2a2a) 0%, var(--bg-darker) 100%);
    border-bottom: 1px solid var(--border-faint);
}

/* Trust counter / KPI box */
.ashi-trust-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-faint);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
}
.ashi-trust-num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ashi-gold-bright);
}
.ashi-trust-label {
    color: var(--text-dim);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ads Components */
.ads-header-gold {
    background: linear-gradient(90deg, var(--lg-bg-000000) 0%, var(--bg-card) 100%);
    color: var(--ashi-gold);
    padding: 15px 20px;
    font-family: var(--font-head) !important;
    font-weight: 600;
    font-size: 1.25rem;
    border-bottom: 1px solid var(--ashi-gold-dim);
}
.ads-detail-box {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.03);
    border-left: 4px solid var(--ashi-gold);
    margin: 15px;
    border-radius: 0 5px 5px 0;
    font-family: var(--font-body) !important;
}
.ads-detail-box p {
    margin-bottom: 10px;
    color: var(--lg-ink-e0e0e0);
}
.ads-detail-box a {
    color: var(--ashi-gold);
    text-decoration: underline;
    word-break: break-all;
}
.ads-action-area {
    background-color: var(--lg-glass-000000-20);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.ads-media-wrapper.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--lg-bg-000000);
}
.ads-media-wrapper.video-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
    display: block;
}

/* maincontent iframes (responsive YouTube) */
[name="maincontent"] iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    display: block !important;
    margin: 20px auto !important;
    border-radius: var(--radius-md);
    border: 1px solid var(--ashi-gold-border);
    box-shadow: var(--shadow-card-hover);
}
[name="maincontent"] p:has(iframe) { width: 100%; margin: 0; padding: 0; }

/* 7. FORMS & INPUTS */
.form-control, div[type=text], .textarea, select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-field) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-sm);
}
.form-control:focus, div[type=text]:focus {
    border-color: var(--ashi-gold) !important;
    background-color: var(--lg-glass-000000-20) !important;
    box-shadow: none;
}
.form-floating label { color: var(--text-muted); }
.form-floating input:focus ~ label,
.form-floating input:not(:placeholder-shown) ~ label { color: var(--ashi-gold); }

/* 8. CODE BLOCKS */
.code-container {
    background-color: var(--lg-bg-1a1a1a) !important;
    border: 1px solid var(--ashi-gold-dim);
    border-radius: 6px;
    margin: 20px 0;
    overflow: hidden;
    font-family: var(--font-code);
    font-size: 16px;
}
ol.code { padding: 10px 0; margin: 0; list-style: none; counter-reset: item; }
ol.code li { position: relative; padding-left: 3.5em; color: var(--lg-ink-d4d4d4); }
ol.code li::before {
    content: counter(item); position: absolute; left: 0; width: 2.5em;
    text-align: right; color: var(--lg-ink-666666); padding-right: 15px; border-right: 1px solid var(--border-faint);
}
/* MQL4/5 syntax highlighting */
.mqlType { color: var(--ashi-gold-bright); font-weight: bold; }
.mqlCondition { color: var(--lg-ink-c586c0); }
.mqlFunction { color: var(--lg-ink-dcdcaa); }
.mqlNumber { color: var(--lg-ink-b5cea8); }
.mqlString { color: var(--lg-ink-ce9178); }
.mqlComment { color: var(--lg-ink-6a9955); font-style: italic; }
.mqlText { color: var(--lg-ink-9cdcfe); }           /* variable names */
.mqlOperator { color: var(--lg-ink-d4d4d4); }       /* = + - / etc. */
.mqlSemicolon { color: var(--lg-ink-808080); }      /* ; */
.mqlPreDefined { color: var(--lg-ink-4fc1ff); }     /* Ask, Bid, Close, etc. */
.mqlCommon { color: var(--lg-ink-dcdcaa); }         /* Print, Comment, Alert */
.mqlOrderProp { color: var(--lg-ink-4ec9b0); }      /* OP_BUY, OP_SELL */
.mqlAccount { color: var(--lg-ink-4ec9b0); }        /* AccountBalance, etc. */

/* 9. UTILITIES */
.text-gold { color: var(--ashi-gold-bright) !important; }
.text-orange { color: var(--ashi-orange) !important; }
.bg-card { background-color: var(--bg-card) !important; }
.border-gold { border-color: var(--ashi-gold) !important; }
.shadow-gold { box-shadow: var(--shadow-gold) !important; }

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid var(--lg-bd-dc3545);
    color: var(--lg-ink-ff6b6b);
}

/* Badges */
.ashi-badge-gold {
    display: inline-block;
    padding: 4px 12px;
    background: var(--ashi-gold-grad);
    color: var(--lg-ink-000000);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
}
.ashi-badge-orange {
    display: inline-block;
    padding: 4px 12px;
    background: var(--ashi-orange-grad);
    color: var(--text-main);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
}

.ui-tooltip {
    padding: 8px 15px;
    background: var(--bg-card) !important;
    color: var(--ashi-gold);
    border: 1px solid var(--ashi-gold);
    border-radius: var(--radius-sm);
    font-size: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* Image lazy-load helper */
.ashi-img-lazy {
    background: var(--bg-card);
    transition: opacity 0.3s;
}
.ashi-img-lazy[loading="lazy"] { opacity: 0.95; }

.th-switch {
    background: none; border: 0; padding: 5px 8px; line-height: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.th-switch:focus-visible { outline: 2px solid var(--ashi-gold); outline-offset: 3px; border-radius: 999px; }
.th-track {
    position: relative; display: inline-flex; align-items: center; box-sizing: border-box;
    width: 50px; height: 28px; padding: 2px; border-radius: 999px;
    background: linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--ashi-gold-border);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.th-knob {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 22px; height: 22px; border-radius: 999px; font-size: 12px; line-height: 1;
    background: linear-gradient(145deg, var(--ashi-gold-fill-bright) 0%, var(--ashi-gold-fill) 55%, var(--ashi-gold-fill-deep) 100%);
    color: var(--ashi-on-gold);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35),
                0 0 14px rgba(var(--ashi-gold-fill-rgb), 0.45);
    transform: translateX(0); will-change: transform;
    transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), background .35s ease,
                box-shadow .35s ease, width .16s ease;
}
.th-knob .th-i { display: block; width: 13px; height: 13px; }
.th-knob .th-i-sun { display: none; }
:root[data-theme="light"] .th-knob .th-i-moon { display: none; }
:root[data-theme="light"] .th-knob .th-i-sun { display: block; }
.th-switch:hover .th-knob { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 18px rgba(var(--ashi-gold-fill-rgb), 0.7); }
.th-switch:active .th-knob { width: 27px; }
:root[data-theme="light"] .th-track {
    background: linear-gradient(180deg, var(--ashi-gold-fill) 0%, var(--ashi-gold-fill-deep) 100%);
    border-color: var(--ashi-gold-fill-deep);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}
:root[data-theme="light"] .th-knob {
    transform: translateX(22px);
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-card) 45%, var(--bg-darker) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.5);
}
:root[data-theme="light"] .th-switch:active .th-knob { transform: translateX(17px); }
@media (prefers-reduced-motion: reduce) { .th-track, .th-knob { transition: none; } }

/* =========================================================================
   Bootstrap utilities that were only ever corrected for ONE theme.

   theme-light.css carries a block of these and says why it stopped where it did:
   "Everything here is scoped to [data-theme='light'] on purpose: dark mode is what every
   reader currently sees, and it must not move by a single pixel." That was the right call
   the day it was written. Tarm withdrew it on 2026-09-09 by looking at a card and saying
   the grey was too hard to read -- so the thing that must not move is now the thing to fix.

   .text-muted is Bootstrap's #6c757d, a cool blue-grey chosen for a white page. Measured
   against the four dark grounds it is 2.95:1, under the 4.5 body-text floor, and it is the
   text inside every feature card, caption and sub-line: 675 uses across 56 templates. Routed
   through --text-dim it lands at 4.82:1 on dark and 5.80:1 on cream, and it stops being blue.

   Written unscoped, so ONE rule answers both themes -- --text-dim already differs per theme.
   It lives in theme.css because that file loads after bootstrap (36 -> 39 in home_layout),
   and !important is required because Bootstrap ships these utilities as !important.

   code is the same shape: Bootstrap paints it #d63384, a pink, and nothing on the site ever
   overrode it. Measured live on /stocks/ before this rule existed. 12 pages show <code>.
   ========================================================================= */
/* --text-muted, not --text-dim. The first attempt routed it to --text-dim (4.82:1 on dark) and
   Tarm looked at a card and said it still had to be brighter. He is describing the right thing:
   .text-muted is not decoration, it is the BODY of every feature card and step, so it belongs on
   the token whose name it shares. --text-muted measures 10.17:1 on dark and 8.08:1 on cream, and
   the three-step hierarchy still reads: main #F7F3ED > muted #E4DCD0 > dim #A39785. */
.text-muted { color: var(--text-muted) !important; }
code { color: var(--ashi-gold-ink); }

/* Links were `color: var(--ashi-gold)` -- the FILL value used as ink, the exact confusion the
   ink/fill split exists to prevent. On dark that is 5.07:1 where the ink token gives 6.09:1.

   Colour alone was never going to carry this anyway. The palette is deliberately one hue wide,
   so a link and the sentence around it sit 23-27 dE apart -- measurable, but at Thai body size
   and weight it reads as the same family, which is what Tarm meant by "กลืนมาก". A link has to be
   identifiable by SHAPE, so prose links get an underline back. Only prose: nav, buttons and
   whole-card links keep text-decoration:none, because underlining those is what the site turned
   the underline off for in the first place. */
a { color: var(--ashi-gold-ink); }
/* `li a` was in this list for one version and it underlined the whole navigation menu -- the nav
   is <li><a> like any other list, and CSS cannot see the difference from the outside. Prose links
   live in paragraphs; the one list that is really prose is the body of a blog article, so it is
   named explicitly instead of every <li> on the site. */
p a:not([class*="btn"]), dd a:not([class*="btn"]), blockquote a:not([class*="btn"]),
.inner-content li a:not([class*="btn"]) {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}


/* =========================================================================
   FOCUS EDGE RING
   A ring of exactly --edge-w that follows the element's own border-radius, with an orange
   highlight that travels around it while focus is inside. Approved 2026-09-09.

   Built from a ::before rather than a border because a border cannot carry a conic gradient that
   follows a rounded corner: border-image ignores border-radius. The two masks below cut the
   middle out of a filled box -- one mask covers the padding box, the other the whole box, and
   compositing them with `exclude` leaves only the difference, which is a ring. That is the only
   way to get a gradient ring that corners correctly.

   Safety, in the order it matters:
   - At rest --edge-rest is transparent and opacity is 0, so this rule CANNOT change how any page
     looks today. It only ever adds paint while something inside has focus.
   - position:relative is new for most of the list. Every class was surveyed for absolutely
     positioned descendants before it joined; each one found already had a positioned parent
     of its own. Survey and method: TEMPLATE_NOTES.md.
   - A class in the list may not spend its own ::before on anything else -- the ring lives
     there. tests_a_tap_can_reach_the_edge_light fails the build if one does.
   - Cards use :focus-within, not :focus. Cards are not focusable and giving them tabindex would
     add a tab stop in front of every card on the page, which is worse for keyboard users than
     having no ring at all. :focus-within lights the card when a control inside it is focused.
   ========================================================================= */

:where(.card, .stk-card, .calculator-card, .result-box-luxury, .tool-card, .dashboard-card,
    .ws-card, .ashiran-card, .a-card, .acc-card, .article-card, .astro-card, .auth-card,
    .broker-card, .chart-luxury-card, .content-card, .course-card, .element-card, .faq-card,
    .feature-card, .forex-article-card, .form-card, .fx-card, .group-card, .guide-card,
    .instructor-card, .lb-card, .lead-card, .luxury-card, .meter-card, .news-item-card,
    .pl-card, .playlist-card, .policy-card, .product-card, .profile-card, .rp-card, .rv-card,
    .stat-card, .sub-card, .syllabus-card, .thanks-card, .tk-card, .zone-card, .ad-card, .blog-card, .luxury-ads-card, .sidebar-card, .thx-card, .ashi-edge) {
    position: relative;
}

:is(.card, .stk-card, .calculator-card, .result-box-luxury, .tool-card, .dashboard-card,
    .ws-card, .ashiran-card, .a-card, .acc-card, .article-card, .astro-card, .auth-card,
    .broker-card, .chart-luxury-card, .content-card, .course-card, .element-card, .faq-card,
    .feature-card, .forex-article-card, .form-card, .fx-card, .group-card, .guide-card,
    .instructor-card, .lb-card, .lead-card, .luxury-card, .meter-card, .news-item-card,
    .pl-card, .playlist-card, .policy-card, .product-card, .profile-card, .rp-card, .rv-card,
    .stat-card, .sub-card, .syllabus-card, .thanks-card, .tk-card, .zone-card, .ad-card, .blog-card, .luxury-ads-card, .sidebar-card, .thx-card, .ashi-edge)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--edge-w);
    background: var(--edge-rest);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

:is(.card, .stk-card, .calculator-card, .result-box-luxury, .tool-card, .dashboard-card,
    .ws-card, .ashiran-card, .a-card, .acc-card, .article-card, .astro-card, .auth-card,
    .broker-card, .chart-luxury-card, .content-card, .course-card, .element-card, .faq-card,
    .feature-card, .forex-article-card, .form-card, .fx-card, .group-card, .guide-card,
    .instructor-card, .lb-card, .lead-card, .luxury-card, .meter-card, .news-item-card,
    .pl-card, .playlist-card, .policy-card, .product-card, .profile-card, .rp-card, .rv-card,
    .stat-card, .sub-card, .syllabus-card, .thanks-card, .tk-card, .zone-card, .ad-card, .blog-card, .luxury-ads-card, .sidebar-card, .thx-card, .ashi-edge):focus-within::before,
.ashi-edge:focus::before, .ashi-edge:active::before {
    opacity: 1;
    background: conic-gradient(from var(--a),
        var(--ashi-gold-fill) 0 24%,
        var(--edge-spec) 32%,
        var(--ashi-gold-fill) 40%,
        var(--ashi-gold-fill) 100%);
    animation: ashi-edge-turn var(--edge-turn) linear infinite;
}

.ashi-edge:focus, .ashi-edge:focus-within, .ashi-edge:active { outline: none; }

.ashi-tap:focus { outline: none; }

@keyframes ashi-edge-turn { to { --a: 360deg; } }

/* A ring that circles forever is exactly the kind of motion people who set this preference are
   asking the machine to stop. The ring still appears on focus -- the focus signal is not
   decoration and must not be removed -- it simply stops travelling. */
@media (prefers-reduced-motion: reduce) {
    :is(.card, .stk-card, .calculator-card, .result-box-luxury, .tool-card, .dashboard-card,
        .ws-card, .ashiran-card, .a-card, .acc-card, .article-card, .astro-card, .auth-card,
        .broker-card, .chart-luxury-card, .content-card, .course-card, .element-card, .faq-card,
        .feature-card, .forex-article-card, .form-card, .fx-card, .group-card, .guide-card,
        .instructor-card, .lb-card, .lead-card, .luxury-card, .meter-card, .news-item-card,
        .pl-card, .playlist-card, .policy-card, .product-card, .profile-card, .rp-card, .rv-card,
        .stat-card, .sub-card, .syllabus-card, .thanks-card, .tk-card, .zone-card, .ad-card, .blog-card, .luxury-ads-card, .sidebar-card, .thx-card, .ashi-edge):focus-within::before,
    .ashi-edge:focus::before, .ashi-edge:active::before {
        animation: none;
    }
}