@import url('ui/tokens.css');
@import url('ui/components.css');
/* #region zone:desk.login-shell — หน้าเข้าสู่ระบบร่วมของ Desk Monitor Map และ Disaster */
/* Canonical shared login presentation. Monitor, Map and Disaster serve this
   file through their existing asset maps. Auth IDs, validation and session owners are unchanged.
   Full-viewport layout, calm brand panel, one aligned form column. */
.login-shell{--login-form-title-size:23px;--login-brand-compact-size:24px;--u-body:16px;font-size:var(--u-body);line-height:1.55;--bg:var(--u-page);--panel:var(--u-card);--panel2:var(--u-card-2);--text:var(--u-text);--muted:var(--u-text-muted);--faint:var(--u-text-muted);--line:var(--u-border);--glass-strong:var(--u-card);--card-line:var(--u-border);--u-bg:var(--u-page);--u-surface:var(--u-card);--u-surface-2:var(--u-card-2);--u-pop:var(--u-sheet);--u-ink:var(--u-text);--u-muted:var(--u-text-muted);--u-line:var(--u-border);--u-line-strong:var(--u-border);--u-shadow:var(--u-shadow-overlay);min-height:100vh;min-height:100dvh;display:flex}
.login-shell-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);width:100%;min-height:100vh;min-height:100dvh;background: var(--u-page);}
.login-shell-brand{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;padding:clamp(var(--sp-8,var(--u-space-6)),6vw,96px);color: var(--u-text);background: var(--u-card);}
.login-shell-brand::before,.login-shell-brand::after{content:"";position:absolute;z-index:0;pointer-events:none;border:1px solid var(--u-border);border-radius:50%;width:70vw;height:70vw;right:-52vw;bottom:-30vw}
.login-shell-brand::after{width:90vw;height:90vw;right:-62vw;bottom:-40vw}
/* Decorative motion respects the device preference; no pause control (owner request). */
.login-shell-brand::before{background:none;animation:login-orbit 18s ease-in-out infinite alternate}
.login-shell-brand::after{animation:login-orbit 26s ease-in-out infinite alternate-reverse}
@keyframes login-orbit{from{transform:translate3d(-2%,-2%,0) scale(.94)}to{transform:translate3d(5%,4%,0) scale(1.08)}}
.login-shell-quote{margin:var(--sp-3,var(--u-space-3)) 0 0;padding:var(--sp-4,var(--u-space-4)) 0 0;border-top:1px solid var(--u-border);font-size:14px;line-height:1.9;color:var(--u-text-muted);max-width:36ch}
.login-shell-brand-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5,20px);max-width:38ch}
.login-shell-logo{display:block;width:64px;height:64px;border-radius:16px;margin-bottom:var(--sp-3,var(--u-space-3))}
.login-shell-brand .login-shell-eyebrow{margin:0;font-size:11px;font-weight:600;letter-spacing:.18em;line-height:1.5;color:var(--accent-text,var(--u-text-muted))}
.login-shell-brand .login-shell-name{--login-brand-type:clamp(30px,3.2vw,48px);font-size:var(--login-brand-type);font-weight:650;letter-spacing:-.035em;line-height:1.2;color: var(--u-text);margin:0}
.login-shell-brand .login-shell-tagline{font-size:16px;line-height:1.9;max-width:34ch;color:var(--u-text-muted);margin:0}
.login-shell-form{padding:clamp(var(--sp-8,var(--u-space-6)),5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:var(--sp-3,12px);background: var(--u-page);color:var(--text,var(--text-1,#16211f));min-width:0;border:0;border-radius:0;
 --ls-fg:var(--text,var(--text-1,#16211f));--ls-muted:var(--muted,var(--text-2,#52635f));--ls-line:var(--line,var(--border-soft,var(--card-line,#b8ccc5)));
 --ls-chip-bg:var(--accent-soft,var(--acc-soft,color-mix(in srgb,var(--accent,#17645e) 14%,transparent)));--ls-chip-fg:var(--accent-text,var(--accent,#17645e))}
/* Keep the column stronger than kit classes imported again by an app's later stylesheet. */
.login-shell .login-shell-form>*{box-sizing:border-box;min-width:0;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
.login-shell .login-shell-form>h1,.login-shell .login-shell-form>h2{font-size:var(--u-text-2xl);line-height:1.45;font-weight:650;letter-spacing:-.02em;margin-top:0;margin-bottom:0}
.login-shell .login-shell-form>h1+p,.login-shell .login-shell-form>h2+p{margin-top:calc(-1*var(--sp-2,8px))}
.login-shell .login-shell-form>p{font-size:14px;line-height:1.75;margin-top:0;margin-bottom:var(--sp-1,4px);color:var(--muted,var(--text-2,#52635f))}
.login-shell .login-shell-form label,.login-shell .login-shell-form .field-label{font-size:var(--u-text-sm);line-height:1.6;font-weight:500;color:var(--text,var(--text-1,#16211f))}
.login-shell-form input[type="text"]:not(.totp-box),
.login-shell-form input[type="password"]:not(.totp-box),
.login-shell-form input[type="email"]:not(.totp-box),
.login-shell-form input[type="search"]:not(.totp-box),
.login-shell-form input:not([type]):not(.totp-box){border-radius:var(--r-control,var(--r-md,10px));height:48px;padding:0 14px;font-size:16px}
.login-shell .auth-form{gap:var(--sp-1,4px)}
.login-shell .auth-form label{margin-top:var(--sp-3,12px)}
.login-shell .member-login-password>label:first-child{margin-top:0}
.login-shell .auth-form input{margin-top:0}
.login-shell .auth-form .hint{font-size:var(--u-text-xs);line-height:1.6;min-height:0;margin:0}
.login-shell .auth-form button[type="submit"],.login-shell .gate-form button[type="submit"],.login-shell #login-submit{min-height:48px;border-radius:var(--r-control,var(--r-md,10px));margin-top:var(--sp-2,8px);font-size:14px}
.login-shell .tabs{margin-top:0;margin-bottom:0;min-height:44px}
.login-shell .tab{min-height:40px}
.login-shell .login-shell-form>.u-seg{min-height:44px;gap:var(--u-space-1)}
.login-shell .login-shell-form>.u-seg>button{flex:1 1 0;min-width:0;min-height:36px;padding-inline:var(--u-space-2);white-space:normal}
/* #region zone:desk.login-shell.touch-tabs — แท็บจอสัมผัสเหนือขนาดโทรศัพท์คงเป้ากด 44px */
@media(min-width:481px) and (pointer:coarse){
 html:root .login-shell .login-shell-form>.u-seg{min-height:48px;padding:1px}
 html:root .login-shell .login-shell-form>.u-seg>button{min-height:var(--u-tap);padding-block:0}
}
/* #endregion */
.login-shell .login-help,.login-shell .gate-help{border-top:1px solid var(--line,var(--border-soft,var(--card-line,#dce5e1)));padding-top:var(--sp-4,var(--u-space-4));text-align:left}
.login-shell .login-shell-form>.login-help{border-top:0;padding-top:0}
.login-shell .gate-help{padding:var(--sp-4,var(--u-space-4));border:1px solid var(--line,var(--border-soft,var(--card-line,#dce5e1)));border-radius:var(--r-control,var(--r-md,10px));margin-top:var(--sp-1,var(--u-space-1))}
.login-shell .gate-help p{font-size:var(--u-text-sm);line-height:1.75;margin:0;color:var(--muted,var(--text-2,#52635f))}
.login-shell .gate-help h2{font-size:var(--u-text-sm);font-weight:600;margin:0 0 6px}
.login-shell .gate-or{display:flex;align-items:center;gap:var(--sp-3,var(--u-space-3));color:var(--muted,var(--text-3,#52635f));font-size:var(--u-text-xs);margin-top:var(--sp-2,var(--u-space-2));margin-bottom:0}
.login-shell .gate-or::before,.login-shell .gate-or::after{content:"";flex:1;height:1px;background:var(--line,var(--border-soft,var(--card-line,#dce5e1)))}
.login-shell .login-foot{margin-top:var(--sp-2,var(--u-space-2));padding-top:var(--sp-4,var(--u-space-4));font-size:var(--u-text-xs);line-height:1.7}
.login-shell .login-shell-form>.cookie-note{font-size:var(--u-text-xs);line-height:1.6;margin-top:calc(-1*var(--sp-2,8px));margin-bottom:0;color:var(--muted,var(--text-2,#52635f))}
.login-shell .cookie-note a{display:inline-block;padding-block:15px;margin-block:-15px;color:inherit;text-decoration:underline;text-underline-offset:2px}
.login-shell .cookie-note a:hover,.login-shell .cookie-note a:focus-visible{color:var(--text,var(--text-1,#16211f))}
@media(max-width:1024px){.login-shell-card{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}.login-shell-brand{padding:var(--sp-8,var(--u-space-6))}.login-shell-form{padding:48px var(--sp-8,var(--u-space-6))}}
@media(max-width:759px){
 .login-shell-card{grid-template-columns:1fr;grid-template-rows:max-content 1fr}
 .login-shell-brand{padding:28px var(--sp-6,var(--u-space-5))}
 .login-shell-brand-inner{display:grid;grid-template-columns:44px 1fr;gap:var(--sp-1,var(--u-space-1)) var(--sp-4,var(--u-space-4));max-width:none}
 .login-shell-logo{grid-row:1/3;width:44px;height:44px;border-radius:11px;margin:0;align-self:center}
 .login-shell-eyebrow{font-size:var(--u-text-xs)}
 .login-shell-brand .login-shell-name{font-size:25px}
 .login-shell-brand .login-shell-tagline{grid-column:1/-1;margin-top:var(--sp-3,var(--u-space-3));font-size:var(--u-text-sm);max-width:none}
 .login-shell-quote{margin-top:var(--sp-2,var(--u-space-2));font-size:var(--u-text-xs);padding-top:var(--sp-3,var(--u-space-3))}
 .login-shell .login-shell-form{padding:28px var(--sp-6,var(--u-space-5)) calc(var(--sp-8,var(--u-space-6)) + env(safe-area-inset-bottom));justify-content:flex-start;gap:14px}
 .login-shell .login-shell-form>h1,.login-shell .login-shell-form>h2{font-size:var(--login-form-title-size)}
}
/* One error colour for every web's login (Monitor's --danger-fg, else the shared --danger, else the Map/Hazard red). */
.login-shell-form { --login-error: var(--danger-fg, var(--danger, #A8102C)); }
.login-shell-form input[aria-invalid="true"] { border: 2px solid var(--login-error) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--login-error) 14%, transparent); }
.login-shell .login-shell-form .login-field-error { color: var(--login-error); font-size: var(--u-text-sm); line-height: 1.5; margin: var(--sp-1,var(--u-space-1)) 0 var(--sp-2,var(--u-space-2)); }
.login-shell-form .login-field-error[hidden] { display: none; }
.login-shell-form .password-reveal-field { position: relative; display: block; width: 100%; }
.login-shell-form .password-reveal-field > input { width: 100%; padding-right: 54px !important; }
.login-shell-form .password-reveal-button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  color: var(--muted, var(--text-2, #52635f)); background: transparent;
  border: 0; border-radius: 50%; cursor: pointer;
}
.login-shell-form .password-reveal-button:hover { color: var(--accent, #087e6e); }
.login-shell-form .password-reveal-button:focus-visible { outline: 2px solid var(--accent, #087e6e); outline-offset: 1px; }
.login-shell-form .password-reveal-slash { display: none; }
.login-shell-form .password-reveal-button[aria-pressed="true"] .password-reveal-slash { display: block; }
.login-shell-form .password-reveal-button[aria-pressed="true"] .password-reveal-eye { display: none; }
/* Pet-style assistant: full body, planted stance, original aspect ratio. */
.login-shell-brand-inner{gap:var(--sp-3,var(--u-space-3));width:100%;max-width:440px}
.login-agent{display:block;width:100%;height:clamp(380px,55vh,580px);object-fit:contain;align-self:center}
.login-agent:not([data-ready]){visibility:hidden}
.login-agent[hidden]{display:none}
.login-shell-brand-inner>.login-shell-logo{width:36px;height:36px;margin:0}
.login-shell-brand-inner>.login-shell-name{--login-brand-type:clamp(28px,2.5vw,38px);font-size:var(--login-brand-type)}
.login-shell-quote{margin-top:var(--sp-1,var(--u-space-1));padding-top:var(--sp-3,var(--u-space-3))}
@media(prefers-reduced-motion:reduce){.login-shell-brand::before,.login-shell-brand::after{animation:none}}
@media(max-width:759px){
 .login-shell-brand{padding:var(--sp-5,20px) var(--sp-6,var(--u-space-5));min-height:min-content}
 .login-shell-brand-inner{grid-template-columns:36px 1fr;gap:var(--sp-1,var(--u-space-1)) var(--sp-3,var(--u-space-3));max-width:420px;margin:auto}
 .login-agent{grid-column:1/-1;grid-row:3;height:260px}
 .login-shell-brand-inner>.login-shell-logo{grid-row:1/3}
 .login-shell-brand-inner>.login-shell-name{font-size:var(--login-brand-compact-size)}
 .login-shell-quote{grid-column:1/-1}
}
/* Phones: a compact hero (logo + name + one tagline line) so the form starts above the fold. Desktop split is unchanged. */
@media(max-width:600px){
 .login-shell-brand{padding:var(--sp-4,var(--u-space-4)) var(--sp-6,var(--u-space-5))}
 .login-agent,.login-shell-quote,.login-shell-eyebrow{display:none!important}
 .login-shell-brand-inner{margin:0;gap:2px var(--sp-3,var(--u-space-3))}
 .login-shell-brand .login-shell-tagline{margin-top:var(--sp-2,var(--u-space-2));font-size:var(--u-text-sm);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* #endregion */

/* #region zone:desk.login.mfa — กล่องรหัสและตัวเลือกขั้นที่สองร่วม */
.login-shell-form .password-reveal-button{width:44px;height:44px;right:2px}
.member-login-password{display:flex;flex-direction:column;gap:var(--sp-1,4px);border:0;padding:0;margin:0;min-width:0}
.member-login-password[hidden],.member-login-factor[hidden]{display:none!important}
.member-login-password:not(:has(#code-field:not([hidden]))) #otp-field,.member-login-password #login-otp-field,
.member-login-password #gate-otp-field,.member-login-password .otp-head,
.member-login-password #otp-boxes,.member-login-password #recovery-code{display:none!important}
.login-shell .member-login-steps{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2,var(--u-space-2));padding:0;
 margin:0 0 var(--sp-3,12px);list-style:none}
/* Step chips: colours come from the --ls-* tokens above (the old fixed light fill made the active chip unreadable in dark). */
.member-login-step{position:relative;display:grid;place-items:center;min-height:36px;padding:var(--sp-1,4px) var(--sp-3,12px);border:1px solid var(--ls-line);
 border-radius:10px;color:var(--ls-muted);font-size:var(--u-text-sm);line-height:1.5;text-align:center}
.member-login-step.is-current{border-color:var(--accent,#17645e);background:var(--ls-chip-bg);color:var(--ls-fg);font-weight:650}
.login-shell .member-login-back{justify-self:start;margin-inline-start:-12px;min-height:44px;padding:var(--sp-2,var(--u-space-2)) var(--sp-3,var(--u-space-3));border:0;background:transparent;
 color:var(--ls-chip-fg);font:inherit;text-align:left;border-radius:8px;cursor:pointer}
.login-shell .member-login-back:disabled{opacity:.55;cursor:default}
.login-shell .member-login-resend:disabled{opacity:1;color:var(--ls-muted);cursor:default}
.member-setup-email-status{margin:var(--sp-1,var(--u-space-1)) 0 0;font-size:var(--u-text-xs);line-height:1.7;
 color:var(--text,var(--text-1,#16211f))}
/* Factor panel: icon sits inline with the title (was a 72px tile on its own row); every other child spans the full width. */
.member-login-factor{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:var(--sp-3,12px);min-width:0;color:var(--ls-fg)}
.member-login-factor>*{grid-column:1/-1;min-width:0}
.member-login-factor>.member-mfa-icon{grid-column:1;grid-row:1}
.member-login-factor>.member-mfa-icon+h3{grid-column:2;grid-row:1}
.member-login-factor h3{margin:0;font-size:var(--u-text-xl);font-weight:650;line-height:1.4}
.member-login-factor p{margin:0;font-size:14px;line-height:1.7;overflow-wrap:anywhere;color:var(--ls-muted)}
.member-mfa-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
 background:var(--ls-chip-bg);color:var(--ls-chip-fg)}
.member-mfa-icon svg{width:24px;height:24px}
.member-method-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4,var(--u-space-4))}
.login-shell .member-method-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3,var(--u-space-3));
 min-height:190px;padding:var(--sp-5,20px) var(--sp-4,var(--u-space-4));text-align:left;border:1px solid var(--line,var(--border-soft,#dce5e1));
 border-radius:var(--r-card,16px);background:var(--panel,#fff);color:inherit;cursor:pointer;font:inherit}
.member-method-card:hover,.member-method-card:focus-visible{border-color:var(--accent,#17645e);
 box-shadow:0 0 0 3px var(--accent-soft,#e4f2ee)}
.member-method-card strong{font-size:14px}.member-method-card small{font-size:var(--u-text-xs);overflow-wrap:anywhere}
.member-method-last{font-size:11px;color:var(--accent,#17645e)}
.member-otp-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-2,var(--u-space-2))}
.login-shell .member-otp-boxes .totp-box{box-sizing:border-box;width:100%;min-width:0;height:56px;
 border:1px solid var(--line,var(--border-soft,#b8ccc5));border-radius:var(--r-control,10px);
 text-align:center;padding:0;font:inherit;font-weight:600;font-size:24px;background:var(--panel,var(--surface-1,var(--glass-strong,#fff)));color:var(--ls-fg)}
.member-otp-boxes .totp-box:focus{outline:2px solid var(--accent,#17645e);outline-offset:2px}
.member-otp-boxes .totp-box[aria-invalid="true"]{border-color:var(--login-error,#c93636)}
.login-shell .member-recovery{min-height:48px}
@media(max-width:360px){.member-method-cards{grid-template-columns:1fr}.member-method-card{min-height:150px}}
@media(max-width:359px){.member-otp-boxes{grid-template-columns:repeat(3,minmax(44px,1fr))}}
/* จดจำเครื่องนี้ (spec 2026-10-05-trusted-device.md): a switch, never touching its neighbours */
.member-remember{display:flex;align-items:center;gap:var(--sp-3,12px);margin:0;min-height:44px;color:var(--ls-fg)}
/* Chrome autofill paints fields light blue; keep the field's own colours in both themes (the long transition holds the original background). */
.login-shell-form input:-webkit-autofill,.login-shell-form input:-webkit-autofill:hover,.login-shell-form input:-webkit-autofill:focus{
 -webkit-text-fill-color:var(--ls-fg);caret-color:var(--ls-fg);transition:background-color 600000s 0s,color 600000s 0s}
/* #endregion */