/* =====================================================
   mahinote.fyi — "สมุดสนามของวิศวกร"
   สว่าง = กระดาษกราฟ  ·  มืด = พิมพ์เขียว
   ===================================================== */

/* ---------- Tokens ---------- */
:root {
  --paper: #ffffff;          /* พื้นหลัง */
  --paper-2: #f3f7fa;        /* พื้นหลังรอง (แถบ section) */
  --ink: #142b44;            /* ตัวอักษรหลัก        14.4:1 บน paper */
  --graphite: #4a5a6c;       /* ตัวอักษรรอง          7.1:1 */
  --pen: #1e4f8f;            /* ลิงก์ / ปุ่มหลัก       8.2:1 */
  --pen-hover: #173e72;
  --on-pen: #ffffff;         /* ตัวอักษรบนปุ่มหลัก    8.2:1 */
  --field: #f6c343;          /* เหลืองสมุดสนาม (พื้น ไม่ใช้เป็นสีตัวอักษร) */
  --on-field: #142b44;       /* ตัวอักษรบนเหลือง      8.8:1 */
  --line: #d3e3ee;           /* เส้นแบ่ง (ตกแต่ง) */
  --grid: #e6f0f7;           /* เส้นกระดาษกราฟ ย่อย */
  --grid-major: #d3e5f1;     /* เส้นกระดาษกราฟ หลัก */
  --on-mark: #ffffff;

  --font-head: "Bai Jamjuree", "IBM Plex Sans Thai Looped", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Thai Looped", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;

  /* 8-pt spacing */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px;
  --container: 1080px;
  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #0e2a47;
  --paper-2: #12335a;
  --ink: #eaf2fb;            /* 12.9:1 */
  --graphite: #a7bed6;       /*  7.6:1 */
  --pen: #ffd45c;            /* 10.3:1 */
  --pen-hover: #ffe08a;
  --on-pen: #0e2a47;
  --field: #ffd45c;
  --on-field: #0e2a47;
  --line: #2a4f78;
  --grid: rgba(234, 242, 251, 0.06);
  --grid-major: rgba(234, 242, 251, 0.12);
  --on-mark: #0e2a47;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;            /* ภาษาไทยต้องมีที่ให้สระบน-ล่าง */
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
a { color: var(--pen); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--pen-hover); }
img, svg { display: block; }
ul, ol { list-style: none; }

:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s3); }

.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 100;
  padding: var(--s1) var(--s2); background: var(--ink); color: var(--paper);
  font-family: var(--font-head); font-weight: 600; border-radius: 6px;
}
.skip-link:focus { top: var(--s2); color: var(--paper); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: var(--s3); min-height: 64px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 28px; height: 28px; color: var(--ink); }

.site-nav { display: flex; gap: var(--s1); margin-left: auto; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-family: var(--font-head); font-weight: 500; font-size: 16px;
  color: var(--graphite); text-decoration: none; border-radius: 6px;
}
.site-nav a:hover { color: var(--ink); background: var(--paper-2); }

.header-controls { display: flex; gap: var(--s1); }
.icon-btn {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
  border: 1.5px solid var(--line); border-radius: 8px; background: transparent;
  color: var(--ink); font: 600 14px/1 var(--font-head); cursor: pointer;
}
.icon-btn:hover { border-color: var(--pen); color: var(--pen); }
.icon-btn svg { width: 20px; height: 20px; }
[data-theme="light"] .icon-sun, [data-theme="dark"] .icon-moon { display: none; }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s3);
  border: 2px solid transparent; border-radius: 8px;
  font: 600 17px/1.2 var(--font-head); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--pen); color: var(--on-pen); }
.btn-primary:hover { background: var(--pen-hover); color: var(--on-pen); }
.btn-secondary { background: transparent; color: var(--pen); border-color: var(--pen); }
.btn-secondary:hover { background: var(--paper-2); color: var(--pen-hover); border-color: var(--pen-hover); }

/* ---------- Hero (กระดาษกราฟ / พิมพ์เขียว) ---------- */
.hero {
  position: relative;
  padding: var(--s12) 0 var(--s12);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px; align-items: center;
}
.hello { font-family: var(--font-head); font-weight: 500; font-size: 19px; color: var(--graphite); margin-bottom: var(--s2); }
.hero h1 { font-size: clamp(2rem, 1.1rem + 3vw, 3rem); line-height: 1.3; max-width: 15em; white-space: pre-line; }
.lead { margin: var(--s3) 0 var(--s4); font-size: 19px; line-height: 1.8; color: var(--graphite); max-width: 34em; }

/* Title block — กล่องข้อมูลมุมแบบก่อสร้าง */
.title-block {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 2px;
  font-family: var(--font-head);
}
.tb-head {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) 20px;
  background: var(--field); color: var(--on-field);
  border-bottom: 2px solid var(--ink);
}
.avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--on-field); color: var(--field);
  font-weight: 700; font-size: 24px; border: 2px solid var(--on-field);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb-name { font-weight: 700; font-size: 22px; line-height: 1.3; }
.tb-role { font-weight: 500; font-size: 15px; line-height: 1.4; }

.tb-rows { display: grid; grid-template-columns: 112px 1fr; }
.tb-rows dt, .tb-rows dd { padding: 12px 20px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.tb-rows dt { font-weight: 500; font-size: 14px; color: var(--graphite); border-right: 1px solid var(--line); padding-right: 12px; }
.tb-rows dd { font-weight: 600; font-size: 16px; white-space: pre-line; }
.tb-rows dt:nth-last-of-type(1), .tb-rows dd:nth-last-of-type(1) { border-bottom: 0; }

/* ---------- Sections ---------- */
.section { padding: var(--s12) 0; }
.section-tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.section-head { margin-bottom: var(--s6); max-width: 40em; }
.section h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }
.section-sub { margin-top: var(--s1); color: var(--graphite); }

/* Notes list */
.note-list { border-top: 2px solid var(--ink); }
.note {
  position: relative;
  display: grid; grid-template-columns: 152px minmax(0, 1fr) auto;
  gap: var(--s1) var(--s3); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.note-date { font-family: var(--font-head); font-weight: 500; font-size: 15px; color: var(--graphite); }
.note h3 { font-size: 21px; line-height: 1.45; }
.note h3 a { color: var(--ink); text-decoration: none; }
.note h3 a::after { content: ""; position: absolute; inset: 0; }   /* คลิกได้ทั้งแถว */
.note:hover h3 a { color: var(--pen); text-decoration: underline; }
.note p { color: var(--graphite); margin-top: 4px; max-width: 40em; }
.note-meta { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: flex-end; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 2px 10px; border: 1.5px solid currentColor; border-radius: 4px;
  font: 500 14px/1.6 var(--font-head);
}
.chip svg { width: 14px; height: 14px; }
.chip-tried { color: var(--pen); }
.chip-trying { background: var(--field); border-color: var(--field); color: var(--on-field); }
.chip-idea, .chip-lang { color: var(--graphite); border-color: var(--line); }

.empty {
  padding: var(--s4); border: 2px dashed var(--line); border-radius: 6px;
  color: var(--graphite); text-align: left;
}
.empty strong { display: block; color: var(--ink); font-family: var(--font-head); font-size: 19px; margin-bottom: 4px; }

/* Tools */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); }
.tool {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--s2); align-items: start;
  padding: var(--s3); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 6px;
  color: var(--ink); text-decoration: none;
  transition: border-color 0.15s;
}
.tool:hover { border-color: var(--pen); color: var(--ink); }
.tool-icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--paper-2); border-radius: 6px; font-size: 24px; line-height: 1;
}
.tool h3 { font-size: 19px; line-height: 1.4; }
.tool p { font-size: 16px; color: var(--graphite); margin-top: 4px; }

/* About + Now */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
.about-story h2 { margin-bottom: var(--s3); }
.about-story p { max-width: 36em; }
.about-story p + p { margin-top: var(--s2); }

.now-box {
  padding: var(--s3); border: 2px solid var(--ink); border-radius: 2px;
  background: var(--paper);
}
.now-box h3 { font-size: 19px; }
.now-date { font-family: var(--font-head); font-size: 14px; color: var(--graphite); margin-bottom: var(--s2); }
.now-box li { position: relative; padding-left: 22px; }
.now-box li + li { margin-top: 12px; }
.now-box li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 10px; height: 10px; background: var(--field); border: 1.5px solid var(--ink);
}

/* Contact */
.contact > * { max-width: 40em; }
.contact-body { margin: var(--s1) 0 var(--s3); color: var(--graphite); }
.email {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem); line-height: 1.3;
  overflow-wrap: anywhere; margin-bottom: var(--s3);
}
.copy-status { min-height: 1.75em; margin-top: 12px; font-family: var(--font-head); font-weight: 500; color: var(--pen); }
.reply-time { color: var(--graphite); font-size: 15px; }
.elsewhere { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.elsewhere p { color: var(--graphite); font-size: 15px; margin-bottom: var(--s1); }
.elsewhere ul { display: flex; flex-wrap: wrap; gap: var(--s1); }
.elsewhere a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2);
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper);
  font-family: var(--font-head); font-weight: 600; text-decoration: none;
}
.elsewhere a:hover { border-color: var(--pen); }

/* Footer */
.site-footer { padding: var(--s4) 0; font-size: 15px; color: var(--graphite); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: center; }
.footer-inner a { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; }

/* =====================================================
   หน้าโน้ต (notes/*)
   ===================================================== */
.note-page { padding: var(--s8) 0 var(--s12); }
.note-page .container { max-width: calc(42em + 48px); }
.back-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-head); font-weight: 500; margin-bottom: var(--s3); }
.note-page h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); line-height: 1.35; margin-bottom: var(--s3); }
.note-page .title-block { margin-bottom: var(--s6); }
.note-page .tb-rows { grid-template-columns: 128px 1fr; }

.prose > * + * { margin-top: var(--s2); }
.prose h2 { font-size: 24px; margin-top: var(--s6); }
.prose ol, .prose ul { padding-left: 1.6em; }
.prose ol { list-style: decimal; }
.prose ul { list-style: disc; }
.prose li + li { margin-top: var(--s1); }
.prose li::marker { font-family: var(--font-head); font-weight: 600; color: var(--graphite); }
.prose code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.88em;
  padding: 1px 6px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px;
}
.prose strong { font-weight: 600; }
.callout {
  padding: var(--s2) 20px; background: var(--paper-2);
  border: 1px solid var(--line); border-left: 6px solid var(--field); border-radius: 4px;
}
.callout strong { font-family: var(--font-head); display: block; }
.revisions { margin-top: var(--s8); padding-top: var(--s3); border-top: 2px solid var(--ink); }
.revisions h2 { font-size: 19px; margin: 0 0 var(--s1); }
.revisions dl { display: grid; grid-template-columns: 128px 1fr; gap: 4px var(--s2); color: var(--graphite); font-size: 15px; }
.revisions dt { font-family: var(--font-head); font-weight: 500; }
.feedback { margin-top: var(--s3); color: var(--graphite); font-size: 15px; }

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 900px) {
  .hero { padding: var(--s8) 0; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .title-block { max-width: 480px; }
  .about-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .section { padding: var(--s8) 0; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .container { padding-inline: var(--s2); }

  /* มือถือ: เมนูย้ายลงแถวที่สอง (ไม่ซ่อน) และ header ไม่ติดค้างด้านบน เพื่อไม่กินพื้นที่จอ */
  .site-header { position: static; }
  .header-inner { flex-wrap: wrap; gap: 0; padding-top: var(--s1); }
  .header-controls { margin-left: auto; }
  .site-nav {
    order: 3; width: calc(100% + 2 * var(--s2)); margin: var(--s1) calc(-1 * var(--s2)) 0;
    padding: 0 var(--s1); gap: 0; overflow-x: auto; border-top: 1px solid var(--line);
  }
  .site-nav a { flex: 1 0 auto; justify-content: center; }

  .hero { padding: var(--s6) 0 var(--s8); }
  .lead { font-size: 17.5px; }
  .actions .btn { flex: 1 1 100%; }

  .note { grid-template-columns: 1fr auto; padding: 20px 0; }
  .note-date { grid-column: 1; grid-row: 1; }
  .note-meta { grid-column: 2; grid-row: 1; }
  .note-body { grid-column: 1 / -1; }

  .tool-grid { grid-template-columns: 1fr; }
  .tb-rows { grid-template-columns: 112px 1fr; }
  .tb-rows dt, .tb-rows dd { padding: 12px 16px; }
  .tb-head { padding: 14px 16px; }
  .footer-inner a { margin-left: 0; }
  .revisions dl { grid-template-columns: 1fr; }
  .revisions dd + dt { margin-top: var(--s1); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}