/* base.css — AesPlus design tokens, page reset, header band, shared bits.
   Single light theme BY RULE (white page, green gradient band, AesPlus logo).
   Clinic colours appear only as identity dots. See docs/DESIGN.md. */
:root{
  color-scheme:light;
  --bg:#ffffff;
  --ink:#12302b;
  --muted:#53675f;
  --line:#d9e7e3;
  --mint:#eef8f5;
  --mint2:#f6fbf9;
  --brand:#31b099;
  --brand-d:#0e8d70;
  --deep:#0f4941;
  --head:#cde8e0;
  --stripe:#fafaf9;
  --f-display:'Prompt','Noto Sans Thai','Leelawadee UI',Tahoma,sans-serif;
  --f-body:'Sarabun','Noto Sans Thai','Leelawadee UI',Tahoma,sans-serif;
  --ctl:46px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:#fff}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,th.s:focus-visible,.dd-list li:focus-visible{outline:2px solid var(--brand-d);outline-offset:2px}

/* ---------- band ---------- */
.band{position:relative;overflow:hidden;color:#fff;background:linear-gradient(100deg,#0e8d70 0%,#0f4941 58%,#0e4f46 100%)}
.band::after{content:"";position:absolute;right:-40px;top:-30px;width:360px;height:140%;background:url("../img/watermark.png") no-repeat right top/contain;opacity:.09;pointer-events:none}
.wrap{max-width:1320px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.band-in{position:relative;z-index:1;padding-block:20px 24px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.logo{height:48px;width:auto;display:block}
.mode{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid rgba(255,255,255,.45);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.12)}
.mode button{border:0;background:transparent;color:#fff;font-weight:600;font-size:15px;padding:0 18px;height:40px}
.mode button+button{border-left:1px solid rgba(255,255,255,.35)}
.mode button[aria-pressed="true"]{background:#fff;color:var(--deep)}
h1{font-family:var(--f-display);font-weight:600;font-size:clamp(1.45rem,4.4vw,2.2rem);line-height:1.25;margin:20px 0 4px;text-wrap:balance;display:flex;align-items:flex-start;gap:12px;flex-wrap:nowrap}
h1 span{min-width:0}
h1 .dot{width:22px;height:22px;border-width:3px;margin-top:.2em}
.sub{margin:0;color:#d7f1ea;font-size:clamp(.95rem,2.8vw,1.1rem);font-weight:500}

/* ---------- shared: identity dots, back-to-top ---------- */
.wrap.det{max-width:1760px}
.dot{display:inline-block;flex:none;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(15,73,65,.22);vertical-align:middle}
.dot.s{width:11px;height:11px;border-width:1.5px}
.dots{flex:none;display:grid;grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:2px;width:20px;height:20px}
.dots i{border-radius:50%;display:block}
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;border-radius:50%;border:0;background:var(--brand-d);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(15,73,65,.35);padding:0}
.totop:hover{background:var(--deep)}
.totop svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:760px){.logo{height:42px}}
@media (max-width:520px){.mode button{padding:0 12px;font-size:14px}.band-in{padding-block:16px 20px}}

/* ---------- account strip (top of band) ---------- */
/* Faint divider after every item; the divider (+ spacing) that ends each line is pushed past the
   right edge and cut off by clip-path, so a wrapped line never starts or ends with a stray divider. */
.acct{--sep:12px;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;row-gap:4px;font-size:.86rem;
  margin:-6px calc(-2 * var(--sep) - 1px) 12px 0;clip-path:inset(-6px calc(2 * var(--sep) + 1px) -6px -6px);color:#d7f1ea}
.acct>*{display:inline-flex;align-items:center;line-height:1.2;
  padding-right:var(--sep);margin-right:var(--sep);border-right:1px solid rgba(255,255,255,.28)}
.acct-name{gap:6px;font-weight:600;color:#fff}
.acct-ico{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.acct a,.acct button{color:#d7f1ea;text-decoration:none;background:none;font:inherit;cursor:pointer;padding-top:2px;padding-bottom:2px}
.acct button{border:0;padding:2px 0}
@media (max-width:480px){.acct{--sep:8px;font-size:.8rem}.acct-ico{width:15px;height:15px}}
.acct a:hover,.acct button:hover{color:#fff;text-decoration:underline}
.acct a:focus-visible,.acct button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.acct form{margin-top:0;margin-bottom:0}

/* ---------- messages ---------- */
.alert{margin:0 0 14px;padding:10px 14px;border-radius:10px;font-weight:500}
.alert.err{background:#fdecea;color:#8a1c12;border:1px solid #f3c2bc}
.alert.ok{background:var(--mint);color:var(--deep);border:1px solid var(--line)}
.muted{color:var(--muted)}
.small{font-size:.86rem}