/* reading-class-marks.css — SINGLE SOURCE OF TRUTH for the 上級読解クラス grammar marks
   (主部/述部 colours, 〈〉 brackets, ▲, ovals, dotted stance box, 〈…〉省, legend pills).
   Used by every App/reading/advanced-class/<slug>/ page (Builder/reading_class/build_reading_class.py
   links it) AND by the back-office Sentence Lab (App/admin/sentence-lab/), so the two can never
   drift apart. Rules apply inside `.gram` or `.article[data-mode="grammar"]`. */
:root{--cream:#fffeef;--ink:#1a1f1c;--ink-soft:#4A5550;--mute:#8A8F86;--green-soft:#E6EFE9;--line:#CDD9D1;--gold:#B89C4A;--font-th:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;--font-jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;--pink:rgba(240,150,178,.58);--pink-line:#D9587E;--sky:rgba(125,185,240,.55);--sky-line:#2F7FD1;--red:#D9463E;--ref:#1E8E5A;}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:14px;padding:10px 14px;background:var(--cream);border:1px solid var(--line);border-radius:12px;font-size:11.5px;color:var(--ink-soft)}
.legend[hidden]{display:none}
.lg-hint{color:var(--mute)}
.gl-pill{padding:3px 11px;border-radius:999px;font-weight:700;font-size:11px;color:var(--ink);background:var(--green-soft)}
.gl-s{background:var(--pink)}.gl-p{background:var(--sky)}
.gl-item{display:inline-flex;align-items:center;gap:5px}
.gl-br{font-weight:700;font-family:var(--font-jp)}.gl-br-pink{color:var(--pink-line)}.gl-br-blue{color:var(--sky-line)}
.gl-u{border-bottom:1.5px solid #3a3a3a}.gl-c{color:var(--red);font-weight:700}
.gl-f{border:1.5px solid var(--red);border-radius:999px;padding:0 6px}.gl-m{border:1.5px dotted #3a3a3a;border-radius:6px;padding:0 4px}
.gl-h{color:#8a8f86;font-style:italic}.gl-r{border-bottom:2px dotted var(--ref);padding:0 2px}
.gl-arrow{color:var(--sky-line);font-weight:700;font-size:15px}.gl-arrow-red{color:var(--red)}
.gl-v{background:rgba(255,234,107,.55);border-bottom:2px dashed var(--gold)}
.gl-stance{background:rgba(184,156,74,.28)}
/* ---------- grammar marks ---------- */
.g-h{display:none}
.g-r{border-bottom:2px dotted var(--ref);cursor:pointer;padding-bottom:1px}
.g-r:hover,.g-r.on{background:rgba(30,142,90,.14);border-radius:3px}
.gram .g-s,.article[data-mode="grammar"] .g-s{background:var(--pink);border-radius:4px;padding:1px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.gram .g-p,.article[data-mode="grammar"] .g-p{background:var(--sky);border-radius:4px;padding:1px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.gram .g-sm::before,.article[data-mode="grammar"] .g-sm::before{content:"〈";color:var(--pink-line);font-weight:700;font-size:1.15em}
.gram .g-sm::after,.article[data-mode="grammar"] .g-sm::after{content:"〉";color:var(--pink-line);font-weight:700;font-size:1.15em}
.gram .g-pm::before,.article[data-mode="grammar"] .g-pm::before{content:"〈";color:var(--sky-line);font-weight:700;font-size:1.15em}
.gram .g-pm::after,.article[data-mode="grammar"] .g-pm::after{content:"〉";color:var(--sky-line);font-weight:700;font-size:1.15em}
.gram .g-u,.article[data-mode="grammar"] .g-u{border-bottom:1.5px solid #3a3a3a;padding-bottom:1px}
.gram .g-c,.article[data-mode="grammar"] .g-c{color:var(--red);font-weight:700}
.gram .g-c::before,.article[data-mode="grammar"] .g-c::before{content:"▲";font-size:.7em;margin-right:2px;vertical-align:1px}
.gram .g-f,.article[data-mode="grammar"] .g-f{border:1.5px solid var(--red);border-radius:999px;padding:0 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.gram .g-m,.article[data-mode="grammar"] .g-m,.article[data-mode="stance"] .g-m{border:1.5px dotted #3a3a3a;border-radius:6px;padding:0 4px}
.gram .g-h,.article[data-mode="grammar"] .g-h{display:inline;color:#8a8f86;font-style:italic;font-size:.82em;border:1px dashed #b5b9b3;border-radius:999px;padding:0 6px;margin:0 2px;background:rgba(217,212,190,.18)}
.gram .g-h::before,.article[data-mode="grammar"] .g-h::before{content:"〈"}
.gram .g-h::after,.article[data-mode="grammar"] .g-h::after{content:"〉省";font-size:.8em;vertical-align:super}
.article[data-mode="grammar"] .para{line-height:3}
.article[data-mode="stance"] .s[data-stance="1"]{background:rgba(184,156,74,.16)}
.article[data-mode="vocab"] .g-v{background:rgba(255,234,107,.6);border-bottom:2px dashed var(--gold);cursor:pointer;border-radius:3px}
.article[data-mode="vocab"] .g-v:hover{background:rgba(255,214,60,.8)}
.article[data-mode="ideas"] .s[data-weight="HIGH"]{background:rgba(196,43,28,.16)}
.article[data-mode="ideas"] .s[data-weight="MEDIUM"]{background:rgba(184,156,74,.18)}
.article[data-mode="ideas"] .s[data-weight="SUPPORT"]{background:rgba(21,101,192,.10)}
.article[data-mode="main"] .s[data-role="main"]{background:rgba(196,43,28,.2);font-weight:700}
.article[data-mode="main"] .s[data-role="support"]{background:rgba(0,109,64,.15)}
.article[data-mode="main"] .s[data-role="distractor"]{outline:2px dashed var(--red);outline-offset:1px}
.st-1{--stc:#E6EFE9}.st-2{--stc:#FBE3DF}.st-3{--stc:#FFF1B8}.st-4{--stc:#DDEEFC}.st-5{--stc:#EAE3F7}.st-6{--stc:#FFE0B2}.st-7{--stc:#D9F3F6}.st-8{--stc:#F8C7D8}
.article[data-mode="structure"] .s{background:var(--stc)}
.article[data-mode="structure"] .s[data-stage="1"]{--stc:#E6EFE9}.article[data-mode="structure"] .s[data-stage="2"]{--stc:#FBE3DF}.article[data-mode="structure"] .s[data-stage="3"]{--stc:#FFF1B8}.article[data-mode="structure"] .s[data-stage="4"]{--stc:#DDEEFC}
.article[data-mode="structure"] .s[data-stage="5"]{--stc:#EAE3F7}.article[data-mode="structure"] .s[data-stage="6"]{--stc:#FFE0B2}.article[data-mode="structure"] .s[data-stage="7"]{--stc:#D9F3F6}.article[data-mode="structure"] .s[data-stage="8"]{--stc:#F8C7D8}
.gl-pill[class*="st-"]{background:var(--stc)}
.gl-pill.w-HIGH{background:rgba(196,43,28,.16)}.gl-pill.w-MEDIUM{background:rgba(184,156,74,.2)}.gl-pill.w-SUPPORT{background:rgba(21,101,192,.12)}
.gl-pill.rl-main{background:rgba(196,43,28,.22)}.gl-pill.rl-support{background:rgba(0,109,64,.16)}.gl-pill.rl-distractor{outline:2px dashed var(--red);outline-offset:-2px;background:transparent}

/* ---------- [T:] 主題 หัวข้อ — yellow: time / condition / reason / cause parts of the sentence (added 2026-09-17) ---------- */
:root{--topic:rgba(255,214,64,.6);--topic-line:#B98A00}
.gl-t{background:var(--topic)}
.gram .g-t,.article[data-mode="grammar"] .g-t{background:var(--topic);border-radius:4px;padding:1px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}