/* มดแดง — ห้องน้ำใกล้ฉัน. Palette is the site's, from the approved design study; retune the variables, not the rules. Big targets and big type on purpose — this app is used at arm's length, in a hurry, in the sun. */ :root{ --paper:#faf5ea;--ink:#2a1e16;--ant:#c13a2e;--ant-dark:#8f2a21; --link:#14479b;--soft:#e3d5bc;--mute:#a08b6c; --card:#fffdf7;--card-alt:#f8f0dd;--ink-soft:#544636; --gold:#c08a2d;--gold-light:#f3c34b;--gold-pale:#f9e2a4; --jade:#1f6b57;--jade-a:#cfe3d2;--jade-ink:#26402c; --warm-border:#e3d5bc;--row-hover:#fcf3dc; --shadow:#e3d5bc;--shadow-dark:#c9b074; --water:#a8c8d8; --sheet-peek:212px; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none} body{ font-family:'Prompt','Noto Sans Thai',system-ui,sans-serif; background:var(--paper);color:var(--ink);font-size:18px; display:flex;flex-direction:column; } /* ---- header ribbon ---- */ /* The inset lives on the ribbon, not on : added to the body it leaves a cream strip behind the iPhone status bar, whose text is white on a Home Screen app. The red band has to reach the top of the glass. */ .ribbon{ flex:0 0 auto;display:flex;align-items:center;justify-content:space-between; padding:calc(10px + env(safe-area-inset-top)) 14px 10px;gap:8px; background:linear-gradient(135deg,var(--ant) 0%,var(--ant-dark) 100%); color:#fff;box-shadow:0 2px 14px rgba(143,42,33,.35);z-index:30; } .brand{display:flex;align-items:center;gap:10px;min-width:0} .ant-dot{ font-size:24px;background:rgba(255,255,255,.16);border-radius:14px; width:46px;height:46px;display:grid;place-items:center; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); } .brand-words{display:flex;flex-direction:column;line-height:1.15;min-width:0} .brand-words b{font-size:20px;letter-spacing:.2px;white-space:nowrap} .brand-words small{font-size:12px;opacity:.85} .ribbon-actions{display:flex;gap:8px} .chip-btn{ font-size:22px;width:48px;height:48px;border:none;border-radius:14px; background:rgba(255,255,255,.16);color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3); transition:transform .12s cubic-bezier(.34,1.56,.64,1),background .15s; } .chip-btn:active{transform:scale(.88);background:rgba(255,255,255,.3)} /* ---- map ---- */ #map-wrap{position:relative;flex:1 1 auto;min-height:0} #map{position:absolute;inset:0;width:100%;height:100%;touch-action:none;background:#f2ead9} .map-controls{ position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:10px;z-index:5; } .round-btn{ width:54px;height:54px;border-radius:18px;border:1.5px solid var(--warm-border); background:rgba(255,253,247,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); font-size:24px;color:var(--ink);box-shadow:0 4px 16px rgba(84,70,54,.18); transition:transform .12s cubic-bezier(.34,1.56,.64,1); } .round-btn:active{transform:scale(.86)} .round-btn.locate{font-size:22px} .round-btn.locate.on{background:var(--jade);color:#fff;border-color:var(--jade)} #attribution{ position:absolute;left:8px;bottom:6px;z-index:4;font-size:10px;color:var(--ink-soft); background:rgba(250,245,234,.75);padding:2px 7px;border-radius:8px;backdrop-filter:blur(6px); } /* ---- bottom sheet ---- */ .sheet{ flex:0 0 auto;position:relative;z-index:20; height:var(--sheet-peek);max-height:72vh; background:rgba(255,253,247,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-top:1.5px solid var(--warm-border); border-radius:22px 22px 0 0; box-shadow:0 -8px 30px rgba(84,70,54,.16); display:flex;flex-direction:column; transition:height .28s cubic-bezier(.32,.72,.28,1); padding-bottom:env(safe-area-inset-bottom); } .sheet.tall{height:66vh} .sheet-handle{flex:0 0 auto;padding:9px 0 5px;display:grid;place-items:center} .sheet-handle span{width:52px;height:5px;border-radius:3px;background:var(--shadow-dark);opacity:.6} #sheet-body{flex:1 1 auto;overflow-y:auto;padding:0 12px 14px} .near-head{padding:2px 6px 8px;font-size:16px} .near-head small{color:var(--mute)} .near-from{display:block;font-size:12.5px;color:var(--ink-soft)} .near-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .near-list li{ display:flex;align-items:center;gap:11px;padding:10px 12px; background:var(--card);border:1.5px solid var(--warm-border);border-radius:16px; box-shadow:0 2px 0 var(--shadow); transition:transform .12s cubic-bezier(.34,1.56,.64,1); } .near-list li:active{transform:scale(.97);background:var(--row-hover)} .near-list li.none{opacity:.55} .pin-em{ flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center; font-size:22px;background:var(--card-alt);box-shadow:inset 0 0 0 1.5px var(--warm-border); } .pin-em.mapped{background:var(--ant);box-shadow:none} .row-words{flex:1 1 auto;min-width:0;line-height:1.25} .row-words b{display:block;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .row-words small{color:var(--ink-soft);font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .row-dist{flex:0 0 auto;text-align:right;line-height:1.15} .row-dist b{font-size:16px;color:var(--jade)} .row-dist small{display:block;font-size:11.5px;color:var(--mute)} .row-badge{font-size:12px;color:var(--gold);white-space:nowrap} /* ---- detail card ---- */ .veil{position:fixed;inset:0;background:rgba(42,30,22,.35);z-index:40;backdrop-filter:blur(2px)} .card{ position:fixed;left:10px;right:10px;bottom:10px;z-index:50; background:var(--card);border:1.5px solid var(--warm-border);border-radius:24px; box-shadow:0 14px 44px rgba(42,30,22,.35); padding:18px 16px calc(14px + env(safe-area-inset-bottom)); max-height:82vh;overflow-y:auto; animation:pop .26s cubic-bezier(.34,1.4,.64,1); } @keyframes pop{from{transform:translateY(26px) scale(.96);opacity:0}} .card h2{margin:0 0 2px;font-size:21px;line-height:1.25} .card .sub{color:var(--ink-soft);font-size:14px;margin:0 0 10px} .tier-chip{ display:inline-flex;align-items:center;gap:6px;font-size:14px; padding:5px 11px;border-radius:999px;background:var(--card-alt); box-shadow:inset 0 0 0 1.5px var(--warm-border);margin:0 6px 6px 0; } .tier-chip.gold{background:var(--gold-pale);box-shadow:inset 0 0 0 1.5px var(--gold);color:#6d5411} .tier-chip.jade{background:var(--jade-a);box-shadow:inset 0 0 0 1.5px var(--jade);color:var(--jade-ink)} .basis{ font-size:14.5px;color:var(--ink-soft);background:var(--card-alt); border-radius:14px;padding:10px 12px;margin:8px 0;line-height:1.5; } .basis small{display:block;color:var(--mute);margin-top:6px;font-size:12.5px} .card-actions{display:flex;gap:10px;margin:12px 0 4px;flex-wrap:wrap} .big-btn{ flex:1 1 40%;min-height:54px;border:none;border-radius:16px;font-size:16.5px; font-family:inherit;background:var(--ant);color:#fff;box-shadow:0 3px 0 var(--ant-dark); transition:transform .12s cubic-bezier(.34,1.56,.64,1); } .big-btn:active{transform:translateY(2px) scale(.97);box-shadow:0 1px 0 var(--ant-dark)} .big-btn.quiet{background:var(--card-alt);color:var(--ink);box-shadow:0 3px 0 var(--shadow-dark)} .big-btn.jade{background:var(--jade);box-shadow:0 3px 0 #14483a} .report-block{margin-top:12px;border-top:1.5px dashed var(--shadow-dark);padding-top:12px} .report-block>b{font-size:16px} .report-block>small{display:block;color:var(--ink-soft);font-size:13px;margin:2px 0 10px} .rep-grid{display:flex;flex-direction:column;gap:8px} .rep-grid button{ min-height:52px;text-align:left;padding:8px 14px;border-radius:14px;font-size:16px; font-family:inherit;border:1.5px solid var(--warm-border);background:var(--card); box-shadow:0 2px 0 var(--shadow); transition:transform .12s cubic-bezier(.34,1.56,.64,1); } .rep-grid button:active{transform:scale(.97);background:var(--row-hover)} .rep-grid button small{color:var(--mute);display:block;font-size:12.5px} .close-x{ position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:14px; border:none;background:var(--card-alt);font-size:19px;color:var(--ink-soft); } /* ---- full page (privacy / my log) ---- */ .page{ position:fixed;inset:0;z-index:60;background:var(--paper);overflow-y:auto; padding:calc(14px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); animation:pop .22s cubic-bezier(.34,1.4,.64,1); } .page h2{margin:6px 0 2px;font-size:22px} .page .sub{color:var(--ink-soft);font-size:14px;margin:0 0 14px} .page section{ background:var(--card);border:1.5px solid var(--warm-border);border-radius:18px; padding:14px;margin:0 0 12px;box-shadow:0 2px 0 var(--shadow); font-size:15.5px;line-height:1.55; } .page section b.h{display:block;font-size:16.5px;margin-bottom:4px} .page section small{color:var(--ink-soft)} .visit-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--soft);font-size:15px} .visit-row:last-child{border-bottom:none} .visit-row time{color:var(--mute);font-size:13px;white-space:nowrap} /* ---- toast ---- */ .toast{ position:fixed;left:50%;bottom:calc(var(--sheet-peek) + 24px);transform:translateX(-50%); z-index:70;background:var(--ink);color:var(--paper);font-size:15.5px; padding:12px 20px;border-radius:999px;box-shadow:0 8px 24px rgba(42,30,22,.4); animation:pop .2s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis; } /* The location pre-prompt. Same veil as the card, with a box on it — plain on purpose: it asks one question and answers "where does this go" in one line, before Android's own dialog appears. */ .locgate{display:flex;align-items:center;justify-content:center;padding:18px;z-index:80} .locgate[hidden]{display:none} .locbox{max-width:360px;background:var(--card);border:1.5px solid var(--warm-border); border-radius:24px;padding:20px;box-shadow:0 14px 44px rgba(42,30,22,.35)} .locbox b{display:block;font-size:17px;margin-bottom:8px} .locbox p{margin:0 0 16px;font-size:15px;line-height:1.5} .locacts{display:flex;flex-direction:column;gap:10px} .locacts button{width:100%;border:0;border-radius:16px;padding:14px 16px; font-size:16px;font-weight:700;color:#fff;background:var(--ant,#D4552C);cursor:pointer} .locacts .ghost{background:transparent;color:var(--ink);border:1.5px solid var(--warm-border)} /* ---- ใส่ไว้ที่หน้าจอโฮม ---- */ .chip-btn.install{background:rgba(255,255,255,.34);font-weight:700} .instsheet .locbox{max-width:22rem} .inst-steps{margin:.6rem 0 .2rem 1.1rem;padding:0;line-height:1.5;font-size:.92rem} .inst-steps li{margin:.3rem 0}