/* =========================================================
   RULE AND LEDGER  ธีมร่วมของหน้า Hub และเอกสารทุกหน้า
   หน้าเหล่านี้เป็นหน้าแบบเลื่อนอ่านและปรับตามความกว้างจอ
   ต่างจากชุดสไลด์ซึ่งตรึงอัตราส่วน 16 ต่อ 9  ห้ามนำกฎเวทีตรึงมาใช้ที่นี่

   โทเคนสีและตัวอักษรชุดนี้ตรงกับ assets/deck.css ทุกค่า
   ถ้าแก้ที่นี่ ต้องแก้ที่ deck.css ให้ตรงกันเสมอ มิฉะนั้นสองส่วนจะดูคนละตระกูล
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
    --ink: #171c2b;
    --ink-2: #232a3d;
    --paper: #f7f4ed;
    --paper-2: #efece3;
    --paper-3: #e2ddd0;
    --rule: rgba(23, 28, 43, .22);
    --muted: #59607a;

    /* ชุดสีห้าตัว ค่าเดียวกับ deck.css และ MathLit Study ทุกค่า */
    --c1: #5b46e0;
    --c1-deep: #4331b4;
    --c2: #1470cf;
    --c2-deep: #0f56a0;
    --c3: #0d8f80;
    --c3-deep: #0a6a5f;
    --c4: #d1820c;
    --c4-deep: #8a5406;
    --c5: #cf3a52;
    --c5-deep: #a52639;

    /* นามแฝงเชิงความหมายที่หน้าเหล่านี้ใช้อยู่เดิม */
    --vermillion: var(--c5-deep);
    --vermillion-soft: rgba(207, 58, 82, .10);
    --teal: var(--c3-deep);
    --teal-soft: rgba(13, 143, 128, .10);
    --gold: var(--c4-deep);
    --gold-bright: #e6b662;

    --font-display: 'Bai Jamjuree', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans Thai', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --maxw: 1180px;
    --radius: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: .01ms !important;
        transition-duration: .2s !important;
    }
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.72;
    font-size: 19px;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ความสูงบรรทัดขั้นต่ำของภาษาไทย หัวเรื่องใหญ่ 1.30 กลาง 1.34 เล็ก 1.40
   ห้ามลดต่ำกว่านี้ เพราะสระบนและวรรณยุกต์จะถูกตัด */
h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
    max-width: 24ch;
    line-height: 1.30;
}

h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    line-height: 1.34;
}

h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    line-height: 1.44;
}

h4 {
    line-height: 1.44;
}

p {
    margin-bottom: 1em;
}

a {
    color: var(--teal);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: var(--radius);
}

strong {
    font-weight: 600;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: .9rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .7rem;
}

.rule-bar {
    height: 3px;
    width: 108px;
    background: var(--gold);
    margin: 1.4rem 0;
}

.hairline {
    height: 1px;
    background: var(--rule);
    margin: 2.4rem 0;
}

/* --- แถบนำทางติดบน --- */
.topnav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(20, 25, 31, .96);
    border-bottom: 1px solid rgba(246, 242, 233, .16);
    backdrop-filter: saturate(140%) blur(6px);
}

.topnav .wrap {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-height: 62px;
    flex-wrap: wrap;
}

.topnav .brand {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--paper);
    margin-right: auto;
    text-decoration: none;
    /* พื้นที่กดต้องไม่ต่ำกว่า 44 พิกเซล เพราะหน้านี้ถูกเปิดบนมือถือเป็นหลัก */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.topnav a.navlink {
    color: rgba(246, 242, 233, .82);
    text-decoration: none;
    font-size: 1rem;
    padding: .55rem .3rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.topnav a.navlink:hover {
    color: var(--gold-bright);
}

section[id] {
    scroll-margin-top: 78px;
}

/* --- หัวหน้าเว็บ --- */
.hero {
    /* พื้นเรียบสีเดียวทั้งแถบ ห้ามใส่การไล่สีหรือลายเส้นกลับเข้ามา
       รุ่นก่อนหน้าใช้การไล่สีแบบรัศมีคู่กับลายเส้นแนวตั้ง
       ผลคือขอบล่างของแถบไล่จางจนดูเหมือนมีแถบสีขาวคั่นก่อนถึงส่วนถัดไป
       และเห็นชัดขึ้นมากเมื่อผู้ใช้ซูมด้วย Ctrl กับล้อเมาส์ */
    background: var(--ink);
    color: var(--paper);
    padding: clamp(3.4rem, 8vw, 6rem) 0 clamp(3.4rem, 8vw, 6rem);
    /* ให้แถบสูงพอที่ขอบล่างจะเป็นเส้นแบ่งส่วนที่ตั้งใจ ไม่ใช่ที่ว่างที่เหลือจากการไล่สี */
    min-height: min(76vh, 660px);
    display: flex;
    align-items: center;
}

/* .wrap ปกติได้ความกว้างจาก block flow แต่เมื่อพ่อเป็น flex จะหดตามเนื้อหา
   ต้องบังคับความกว้างคืน มิฉะนั้นข้อความในแถบ Hero จะแคบลงผิดจากส่วนอื่น */
.hero > .wrap {
    width: 100%;
}

.hero .eyebrow {
    color: var(--gold-bright);
}

.hero .rule-bar {
    background: var(--gold-bright);
}

.hero-sub {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.3rem, 2.6vw, 1.95rem);
    line-height: 1.40;
    color: var(--gold-bright);
    margin: .5rem 0 0;
    max-width: 48ch;
}

.hero p.lead {
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    color: rgba(246, 242, 233, .84);
    max-width: 62ch;
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-top: 2rem;
}

.meta-row div {
    min-width: 150px;
}

.meta-row .k {
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-bright);
    display: block;
    margin-bottom: .2rem;
}

.meta-row .v {
    color: var(--paper);
    font-size: 1.08rem;
}

/* --- ส่วนเนื้อหา --- */
.section {
    padding: clamp(2.6rem, 6vw, 4.2rem) 0;
}

.section.alt {
    background:
        repeating-linear-gradient(0deg, rgba(20, 25, 31, .035) 0 1px, transparent 1px 78px),
        var(--paper-2);
}

.cards {
    display: grid;
    gap: 1.3rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 1.8rem;
}

.card {
    background: #fffdf7;
    border: 1px solid var(--rule);
    border-top: 4px solid var(--ink-2);
    border-radius: var(--radius);
    padding: 1.5rem 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
}

.card.out {
    border-top-color: var(--vermillion);
}

.card.in {
    border-top-color: var(--teal);
}

.card h3 {
    margin-bottom: .5rem;
}

.card p {
    font-size: 1.05rem;
    color: #3c4450;
}

.tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .12em;
    padding: .28rem .6rem;
    border-radius: var(--radius);
    background: var(--ink-2);
    color: var(--paper);
    margin-bottom: .8rem;
    align-self: flex-start;
}

.tag.out {
    background: var(--vermillion);
}

.tag.in {
    background: var(--teal);
}

.tag.wip {
    background: var(--gold);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .6rem 1.1rem;
    margin-top: auto;
    background: var(--ink-2);
    color: var(--paper);
    text-decoration: none;
    border-radius: var(--radius);
    font-size: 1rem;
    border: 1px solid var(--ink-2);
}

.btn:hover {
    background: var(--ink);
}

.btn.ghost {
    background: transparent;
    color: var(--ink);
}

.btn.ghost:hover {
    background: var(--paper-3);
}

.btn[aria-disabled='true'] {
    opacity: .55;
    pointer-events: none;
}

.btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4rem 0;
}

@media (max-width: 640px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: normal;
    }

    .doc {
        padding-left: 16px;
        padding-right: 16px;
    }
}

th,
td {
    text-align: left;
    padding: .78rem .9rem;
    vertical-align: top;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--rule);
}

th {
    font-family: var(--font-mono);
    font-size: .84rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 2px solid var(--ink-2);
}

tr.hi td {
    background: rgba(165, 50, 28, .07);
}

ul.dash {
    list-style: none;
}

ul.dash li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .6rem;
}

ul.dash li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .78em;
    width: .85rem;
    height: 2px;
    background: var(--gold);
}

ol.steps {
    list-style: none;
    counter-reset: st;
}

ol.steps li {
    counter-increment: st;
    position: relative;
    padding-left: 2.6rem;
    margin-bottom: .9rem;
}

ol.steps li::before {
    content: counter(st);
    position: absolute;
    left: 0;
    top: .12em;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--ink-2);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.note {
    background: rgba(143, 103, 28, .1);
    border: 1px solid rgba(143, 103, 28, .34);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    font-size: 1.02rem;
}

.note.warn {
    background: var(--vermillion-soft);
    border-color: rgba(165, 50, 28, .4);
}

footer.site {
    background: var(--ink);
    color: rgba(246, 242, 233, .72);
    padding: 2.4rem 0 3rem;
    font-size: .95rem;
}

footer.site a {
    color: var(--gold-bright);
}

/* --- เอกสารสำหรับพิมพ์ --- */
.doc {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(1.6rem, 5vw, 3rem) 24px 4rem;
}

.doc h2 {
    margin: 2rem 0 .8rem;
}

.doc h3 {
    margin: 1.4rem 0 .5rem;
}

.doc .field {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: #fffdf7;
    padding: .9rem 1rem;
    min-height: 5.2rem;
    margin-bottom: 1.1rem;
}

.doc .field .lbl {
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: .45rem;
}

.doc .field .hintline {
    font-size: .93rem;
    color: var(--muted);
}

.backlink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    font-size: 1rem;
}

@media print {

    .topnav,
    .noprint,
    footer.site {
        display: none !important;
    }

    body {
        background: #fff;
        font-size: 11.5pt;
    }

    .doc {
        max-width: none;
        padding: 0;
    }

    .doc .field {
        min-height: 4.4rem;
        break-inside: avoid;
    }

    .card,
    table,
    .note {
        break-inside: avoid;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .page-break {
        break-before: page;
    }
}