/* style.css — ธีมขาว-ฟ้า กรมเจ้าท่า */

:root {
  --blue: #0b5ea8;
  --blue-d: #084a86;
  --blue-l: #eaf4ff;
  --ink: #103a5c;
  --ink-s: #4a6a85;   /* เดิม #5c7d99 = 4.33:1 บนขาว ไม่ผ่าน AA → 5.69:1 (แก้ contrast 19 ก.ย. 2569) */
  --line: #d7e5f2;
  --bg: #f4f8fc;
  --white: #fff;
  --warn: #8a5a0b;    /* เดิม #b0740f = 3.77:1 → 5.69:1 */
  --warn-bg: #fdf3e2;
  --err: #b3261e;
  --err-bg: #fdeceb;
}

* { box-sizing: border-box; }

/* ต้องมาก่อนทุกกฎที่ตั้ง display — ไม่งั้น display:grid/flex ข้างล่างจะไปทับ
   display:none ที่ attribute hidden ให้มา แล้วสั่งซ่อนจะไม่ซ่อนจริง */
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  font-family: "Segoe UI", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- หน้าโยนไฟล์ ---------- */
#drop {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 50% -10%, #dceaf8 0%, transparent 60%),
    var(--bg);
  overflow-y: auto;
}
.drop-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(16, 58, 92, .08);
  padding: 34px 32px 26px;
  max-width: 520px;
  width: 100%;
  text-align: center;
}
.drop-logo { width: 74px; height: auto; }
.drop-card h1 { font-size: 25px; margin: 12px 0 2px; color: var(--blue); }
.sub { margin: 0 0 22px; color: var(--ink-s); font-size: 14px; }

#dz {
  border: 2px dashed #a9cbe8;
  border-radius: 12px;
  background: #f8fbfe;
  color: var(--blue);
  padding: 34px 20px;
  transition: background .15s, border-color .15s, transform .15s;
}
#dz:hover, #dz:focus-visible { background: var(--blue-l); border-color: var(--blue); }
#dz.over { background: var(--blue-l); border-color: var(--blue); transform: scale(1.015); }
.dz-main { font-size: 16px; margin-top: 8px; }
.dz-main b { color: var(--blue-d); }
.dz-sub { font-size: 13px; color: var(--ink-s); margin-top: 3px; }

.hint { font-size: 12px; color: var(--ink-s); line-height: 1.6; margin: 14px 0 0; }
.err {
  margin: 14px 0 0; padding: 11px 13px; text-align: left;
  background: var(--err-bg); border-left: 4px solid var(--err);
  border-radius: 0 6px 6px 0; color: var(--err); font-size: 13px; line-height: 1.6;
}

/* ---------- หน้าดูพื้นผิว ---------- */
#app { height: 100%; display: flex; }
#panel {
  width: 320px; flex: 0 0 320px;
  background: var(--white);
  border-right: 1px solid var(--line);
  box-shadow: 2px 0 10px rgba(16, 58, 92, .05);
  padding: 14px 16px 16px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 54px; height: auto; }
.brand-t { font-size: 21px; font-weight: 700; color: var(--blue); line-height: 1.25; }
.brand-s { font-size: 13px; color: var(--ink-s); }

.meta {
  font-size: 12px; color: var(--ink-s); line-height: 1.65;
  background: #f7fbff; border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px;
}
.meta b { color: var(--ink); font-weight: 600; }
.meta .warn { color: var(--warn); }

.row { display: flex; flex-direction: column; gap: 7px; }

/* รายการพื้นผิวที่เปิดอยู่ (รองรับหลายไฟล์) */
#surfList { display: flex; flex-direction: column; gap: 5px; }
.surf-item {
  display: flex; align-items: flex-start; gap: 7px;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 8px; background: #fbfdff; font-size: 12px; cursor: pointer;
}
.surf-item:hover { background: var(--blue-l); }
.surf-item input { accent-color: var(--blue); margin-top: 2px; flex: 0 0 auto; }
/* ไฟล์ที่ติ๊กซ่อน — หรี่ด้วยสีพื้น/สีตัวหนังสือแทน opacity .55 (เดิมตัวหนังสือเหลือ 2.3–3.2:1 ไม่ผ่าน AA)
   ยังอ่านออกเพื่อกดเปิดกลับได้ · ช่องสีหรี่ลงให้รู้ว่าปิดอยู่ (แก้ contrast 19 ก.ย. 2569) */
.surf-item.off { background: #eef2f6; }
.surf-item.off .surf-name { color: var(--ink-s); font-weight: 500; }
.surf-item.off .surf-swatch { opacity: .4; }
.surf-body { min-width: 0; flex: 1; }
.surf-name {
  font-weight: 600; color: var(--ink); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.surf-meta { color: var(--ink-s); font-size: 12px; line-height: 1.45; }
.surf-swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 4px; vertical-align: -1px;
}
#surfCount { color: var(--ink-s); font-weight: 400; }
.lab { font-size: 13px; font-weight: 600; }
select {
  width: 100%; padding: 6px 8px; font-size: 13px;
  border: 1px solid #c3d8ea; border-radius: 6px; background: var(--white); color: var(--ink);
}
button.primary, button.ghost {
  width: 100%; padding: 8px 10px; font-size: 13px; border-radius: 6px;
  border: 1px solid var(--blue); background: var(--blue); color: #fff; font-weight: 600;
}
button.primary:hover { background: var(--blue-d); }
button.primary.on { background: #0d7a3e; border-color: #0d7a3e; }
button.ghost { background: var(--white); color: var(--blue); font-weight: 500; }
button.ghost:hover { background: var(--blue-l); }
button:disabled { opacity: .5; cursor: not-allowed; }

.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 6px 4px; font-size: 12.5px;
  border: 1px solid #c3d8ea; border-radius: 6px; background: var(--white); color: var(--ink);
}
.seg button:hover { background: var(--blue-l); }
.seg button.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

.sld { display: flex; align-items: center; gap: 7px; }
.sld span { font-size: 12px; width: 32px; color: var(--ink-s); }
.sld input[type=range] { flex: 1; accent-color: var(--blue); min-width: 0; }
.sld output {
  font-size: 12px; width: 58px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.chk input { accent-color: var(--blue); }

.foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.attrib { font-size: 12px; color: var(--ink-s); line-height: 1.5; }

#plotwrap { flex: 1; min-width: 0; position: relative; }
#plot { width: 100%; height: 100%; }

/* เข็มทิศมุมขวาบนของพื้นที่ 3D — เข็มแดงชี้ทิศเหนือจริงตามมุมกล้อง */
#compass {
  position: absolute; top: 12px; right: 14px; width: 50px; height: 50px; z-index: 5;
  background: rgba(255, 255, 255, .85); border-radius: 50%;
  box-shadow: 0 1px 6px rgba(16, 58, 92, .25); pointer-events: none;
}
#compass svg { width: 100%; height: 100%; display: block; }
.cmp-ring { fill: none; stroke: #c3d8ea; stroke-width: 2; }
.cmp-n { fill: #d23b3b; }
.cmp-s { fill: #9db6cb; }
.cmp-lbl { fill: #fff; font: 700 11px "Segoe UI", sans-serif; text-anchor: middle; }
#cmpRose { transition: transform .12s linear; }
@media (prefers-reduced-motion: reduce) { #cmpRose { transition: none; } }

/* ---------- แผนที่ 2D ---------- */
#mapview { position: fixed; inset: 0; z-index: 60; background: var(--bg); }
#map { position: absolute; inset: 0; }
.mapbtn {
  position: absolute; top: 12px; right: 12px; z-index: 1000;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--blue); border-radius: 6px;
  background: var(--white); color: var(--blue);
  box-shadow: 0 2px 8px rgba(16, 58, 92, .2);
}
.mapbtn:hover { background: var(--blue-l); }
/* เครดิตแผนที่ของ Leaflet — ค่าเดิมลิงก์ #0078A8 บนพื้นขาวโปร่ง .8 ทับภาพดาวเทียม วัดได้ 3.6:1
   → แผ่นรองขาวทึบขึ้น + ลิงก์สีน้ำเงินเข้ม ให้ผ่าน contrast WCAG AA (แก้ 19 ก.ย. 2569) */
#map .leaflet-control-attribution { background: rgba(255, 255, 255, .95); color: var(--ink); font-size: 12px; }
#map .leaflet-control-attribution a { color: var(--blue-d); }

/* ---------- สถานะกำลังทำงาน ---------- */
#busy {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(244, 248, 252, .82);
  display: grid; place-items: center;
}
.busy-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(16, 58, 92, .14);
  padding: 22px 26px; min-width: 260px; text-align: center;
  font-size: 13.5px; color: var(--ink);
}
.spin {
  width: 26px; height: 26px; margin: 0 auto 12px;
  border: 3px solid var(--line); border-top-color: var(--blue);
  border-radius: 50%; animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }
.bar {
  margin-top: 12px; height: 4px; border-radius: 2px;
  background: var(--line); overflow: hidden;
}
.bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .15s; }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
  #dz, .bar i { transition: none; }
}

/* ---------- จอแคบ ---------- */
@media (max-width: 780px) {
  #app { flex-direction: column; }
  #panel {
    width: 100%; flex: 0 0 auto; max-height: 46%;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  #plotwrap { flex: 1; }
}

/* ---------- ลิงก์ไปหน้าสร้าง surface (surface.hg-md.com) ---------- */
.build-link { display:block; margin:18px 0 6px; padding:14px 16px; border-radius:12px; text-decoration:none;
  background:#0b4f8a; color:#fff; text-align:left; }
.build-link b { display:block; font-size:18px; }
.build-link span { display:block; font-size:14px; line-height:1.5; margin-top:4px; color:#e6f0fa; }
.build-link:hover, .build-link:focus-visible { background:#093e6d; }
.hint.links a { color:#0b4f8a; }