/* Sign-in, sign-up and connect-consent pages, served by the system Worker (system/src/auth.js, system/src/oauth.js,
   shell in system/src/util.js authShell). Same tokens as app.css; the site's saved theme ("nml-theme") applies here too.
   Look (owner's pick, card 12 Nov 2026: "แบบ A เอาเส้นเวลาออก ... ฟอนไทยที่ตัวหนังสือเล็ก ไม่สวย ... เปลี่ยนเป็นแังกฤษ ...
   บนล่างมีพท้นที่ตั้งเยอะ จะปล่อยว่างทำไม"): the page is a piece of the home page's editing board. The site's ruled frame and
   nav strip, a large title, the fields as clips on two tracks, the button as the play clip, and the board's other
   tracks filling the rest of the screen. Small labels are English in the pixel face (NAME, PASS, V1, FX, A1): small Thai
   type read badly. No time ruler. No underlined links. A few pixel pieces stand in the composition, each once
   ("ใส่เยอะ แถมซ้ำอีก รกไป"), and none moves by itself: props are paused on their first frame, the button's play prop
   runs only while pointed at, the penguin moves only with the form. Text rule: PAGE-RULES.md.
   Second look (his picks on the choice sheet, 12 Nov 2026, "L3 T3 F3"; docs/2026-11-12-sign-look/README.md): the form
   sits in a pixel-stepped frame with a blue offset and two corner blocks (F3); the penguin strolls slowly along the
   frame's top edge, stopping to look, and stops to watch or cover its eyes when a field is used; the title is our own
   pixel Thai, bold with a blue step shadow (L3, system/src/pixel-title.js), with the slate right after the word; Thai
   text is Noto Sans Thai (T3). His card on the first build, same day: "เพิ่มขนาดแพนกวิ้นหน่อย ตรงสเลทย้ายมาต่อท้ายคำว่า
   ระบบ ปรับขนาดให้พอดี". */
:root {
  --paper: #F7F7F3; --card: #FFFFFF; --ink: #0D1220; --ink-2: #4A5167; --ink-3: #6A7085; --rule: #E2E3DC;
  --b50: #EEF2FF; --b100: #DCE4FF; --b200: #B8C9FF; --b300: #8DA8FF; --b500: #2F5BFF; --b600: #2045D6; --b700: #1834A6; --b800: #11246F;
  --cta-bg: var(--ink); --cta-fg: #FFFFFF; --stage-a: var(--b100); --clip: var(--b100); --clip-2: var(--b50); --deck: var(--b100);
  --f-sans: "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;   /* his pick T3, 12 Nov 2026 */
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-px: "Silkscreen", "IBM Plex Mono", ui-monospace, monospace;   /* the site's pixel face, English only */
}
:root[data-theme="dark"] {
  --paper: #0A0E18; --card: #111827; --ink: #ECEFF6; --ink-2: #AAB1C4; --ink-3: #8E96AC; --rule: #1E2638;
  --cta-bg: var(--b500); --cta-fg: #FFFFFF; --stage-a: #13204F; --clip: #17244F; --clip-2: #111B3A; --deck: #131C3A;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body.a-page { margin: 0; min-height: 100vh; min-height: 100dvh; font: 400 16px/1.6 var(--f-sans); color: var(--ink); background: var(--paper); }
.a-frame { max-width: 1280px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; border-inline: 1px solid var(--rule); display: flex; flex-direction: column; }

/* nav strip: brand left, the one ? button right */
.a-nav { position: relative; display: flex; align-items: stretch; height: 56px; border-bottom: 1px solid var(--rule); flex: none; }
.a-brand { display: flex; align-items: center; gap: 10px; padding: 0 20px; border-right: 1px solid var(--rule); font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.a-mark { display: grid; grid-template-columns: 7px 7px; gap: 2px; }
.a-mark i { width: 7px; height: 7px; background: var(--b500); }
.a-mark i:nth-child(2) { background: var(--b300); }
.a-mark i:nth-child(3) { background: var(--b800); }
.a-mark i:nth-child(4) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--b500); }
:root[data-theme="dark"] .a-mark i:nth-child(3) { background: var(--b200); }
.a-help { margin-left: auto; }
.a-help summary { list-style: none; width: 56px; height: 55px; display: grid; place-items: center; cursor: pointer; color: var(--b500); border-left: 1px solid var(--rule); }
.a-help summary::-webkit-details-marker { display: none; }
.a-help summary svg { display: block; shape-rendering: crispEdges; }
.a-help summary:hover, .a-help[open] summary { background: var(--b500); color: #FFFFFF; }
.a-help summary:focus-visible, .a-see:focus-visible, .a-btn:focus-visible { outline: 2px solid var(--b500); outline-offset: -2px; }
.a-help-body { position: absolute; z-index: 5; right: 12px; top: calc(100% + 10px); width: min(360px, calc(100% - 24px)); display: grid; gap: 8px; padding: 16px 18px; background: var(--ink); box-shadow: 4px 4px 0 var(--b500); }
.a-help-body p { margin: 0; color: var(--paper); font-size: 16px; line-height: 1.55; }

.a-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---- the board: sign-in and sign-up ---- */
.a-card.a-sheet { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.a-sheet h1 { margin: 0; padding: clamp(18px, 5vh, 72px) 20px clamp(40px, 6vh, 52px); font: 600 clamp(48px, 13vw, 112px)/1 var(--f-sans); letter-spacing: -.03em; }
.a-sheet .a-err { margin: 0; padding: 12px 20px; border-top: 1px solid var(--rule); color: #B3261E; font-size: 18px; font-weight: 500; }
:root[data-theme="dark"] .a-sheet .a-err { color: #FF8A80; }
.a-tl { display: block; border-top: 1px solid var(--rule); }
.a-track { display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 76px; border-bottom: 1px solid var(--rule); }
.a-lab { display: grid; place-items: center; border-right: 1px solid var(--rule); font: 400 13px/1 var(--f-px); letter-spacing: .04em; color: var(--ink-3); }
.a-clip { position: relative; display: flex; align-items: center; margin: 10px 12px 10px 0; padding: 0 16px; background: var(--clip); border-left: 3px solid var(--b500); }
.a-clip.a-pw { margin-right: clamp(12px, 18%, 220px); background: var(--clip-2); }
.a-clip:focus-within { box-shadow: inset 0 0 0 2px var(--b500); }
.a-in { width: 100%; min-width: 0; height: 56px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 400 20px/1.3 var(--f-sans); outline: 0; }
.a-in[name="username"] { font-family: var(--f-mono); }
.a-in::placeholder { color: var(--ink-3); opacity: 1; }
.a-see { flex: none; margin-right: -8px; padding: 10px 8px; border: 0; background: transparent; color: var(--b500); font: 400 13px/1 var(--f-px); letter-spacing: .04em; cursor: pointer; }
.a-track .a-btn { margin: 10px 12px 10px 0; padding: 0 16px 0 20px; justify-content: space-between; font-size: 20px; }
/* The account link page (system/src/link.js): the code in mono, the match line beside it, the result line. */
.a-code { font: 500 28px/1.2 var(--f-mono); letter-spacing: .08em; padding: 14px 0; }
.a-note { align-self: center; padding: 12px 12px 12px 16px; font-size: 16px; color: var(--ink-2, var(--ink)); }
.a-ok { margin: 0; padding: 16px 20px; font-size: 18px; }
/* ---- the frame (F3): a 5 px edge cut in pixel steps (four bars, no corners), a hard blue offset, a block at two corners ---- */
.a-box { position: relative; max-width: 900px; margin: clamp(52px, 9vh, 92px) clamp(22px, 4vw, 56px) clamp(34px, 5vh, 52px); background: var(--card);
  box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink), -5px 0 0 var(--ink), 5px 0 0 var(--ink), 11px 11px 0 var(--b500); }
.a-box .a-tl { border-top: 1px solid var(--rule); }
.a-box .a-more { border-bottom: 0; }
/* pixel.css loads after this file and makes every sprite position: relative; these selectors must outrank .px */
.a-box > .a-corner { position: absolute; z-index: 2; --s: 3; pointer-events: none; }
.a-box > .a-corner.tl { left: -15px; top: -15px; } .a-box > .a-corner.br { right: -15px; bottom: -15px; }
/* the penguin's lane: the frame's top edge. Feet on the edge = 5 px frame minus the sprite's one empty bottom row
   (4 px at --s:4, his "เพิ่มขนาดแพนกวิ้นหน่อย"). pixel.css makes sprites position: relative; this must win.
   web/pixel/pixel.js "stroll" moves it with a transform. */
.a-walk { position: absolute; left: 6px; right: 6px; bottom: 100%; height: 0; z-index: 3; pointer-events: none; }
.a-walk > .a-peng { position: absolute; left: 0; bottom: 1px; }
/* ---- the title (L3): our pixel Thai as an SVG, drawn at a whole number of screen pixels per pixel (--k) ---- */
.a-sheet h1 { position: relative; overflow: hidden; }
.a-sheet h1.a-px { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: clamp(26px, 5vh, 52px) 20px clamp(28px, 5vh, 44px); line-height: 0; }
.a-ptitle { --k: 4; position: relative; z-index: 1; display: block; flex: none; height: calc(var(--k) * 18px); width: calc(var(--k) * var(--cols) * 1px); max-width: 100%; color: var(--ink); }
.a-ptitle .sh { fill: var(--b500); } .a-ptitle .ink { fill: currentColor; }
@media (max-width: 359px) { .a-ptitle { --k: 3; } }   /* 320 px phones: the title and its slate fit the frame with even pixels */
@media (min-width: 600px) { .a-ptitle { --k: 5; } }
/* phone: the title fills the frame's width, so the six blocks sit above it instead of on its last letters */
@media (max-width: 599px) { .a-sheet h1.a-px { padding-top: 58px; } .a-box > .a-blocks { top: 12px; } }
@media (min-width: 900px) { .a-ptitle { --k: 7; } }
/* the slate right after the word, its 16-pixel sprite as tall as the letters' body (9 rows x --k: 36/45/63 px against
   32/48/64 px), centred on that body, which sits half a row above the middle of the title box (marks above and below) */
.a-sheet h1.a-px { flex-wrap: nowrap; }
.a-sheet h1 > .a-slate { --s: 2; position: relative; flex: none; margin-left: calc(var(--s) * 3px); transform: translateY(calc(var(--s) * -1px)); pointer-events: none; }
@media (min-width: 600px) { .a-sheet h1 > .a-slate { --s: 3; } }
@media (min-width: 900px) { .a-sheet h1 > .a-slate { --s: 4; } }
.a-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-prop { flex: none; }
/* six loose pixel blocks at the title's right, stepped like the brand mark grown large; still */
.a-card.a-sheet { position: relative; }
.a-blocks { position: absolute; top: clamp(14px, 4vh, 56px); right: 20px; display: grid; grid-template-columns: repeat(3, auto); gap: 6px; --s: 2; pointer-events: none; }
.a-blocks > :nth-child(2) { transform: translateY(10px); } .a-blocks > :nth-child(3) { transform: translate(8px, -6px); }
.a-blocks > :nth-child(4) { transform: translate(-10px, 4px); } .a-blocks > :nth-child(6) { transform: translate(6px, 12px); }
.a-blocks [data-px] { --s: 2; }
@media (min-width: 900px) { .a-blocks { right: 9%; gap: 12px; } .a-blocks [data-px] { --s: 5; } .a-blocks > :nth-child(2) { transform: translateY(26px); } .a-blocks > :nth-child(3) { transform: translate(22px, -14px); } .a-blocks > :nth-child(4) { transform: translate(-28px, 10px); } .a-blocks > :nth-child(6) { transform: translate(16px, 30px); } }
/* Props rest on their first frame. pixel.css loops every strip forever; on these pages nothing moves unless the visitor
   does something (owner, 10 Nov 2026: "ไม่ค่อยชอบที่ มันเดินตลอดเวลา"). The penguin is not a prop and keeps its form moves. */
.a-page [data-px="prop"] .px-strip { animation-play-state: paused; }
.a-btn:hover [data-px="prop"] .px-strip, .a-btn:focus-visible [data-px="prop"] .px-strip { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .a-btn [data-px="prop"] .px-strip { animation-play-state: paused !important; } }
/* the button keeps an arrow when /pixel/* does not load (the prop span stays empty) */
.a-btn .a-prop:empty { width: 0; height: 0; border-left: 12px solid currentColor; border-block: 8px solid transparent; }
.a-btn, .a-google { display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; font: 500 16px/1.2 var(--f-sans); text-decoration: none; background: var(--cta-bg); color: var(--cta-fg); }
.a-btn:hover { background: var(--b600); }
/* the other ways in: clips on an OR track, framed in pixel steps (no underlines) */
.a-more { border-bottom: 1px solid var(--rule); }
.a-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 10px 12px 12px 2px; }
.a-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; margin: 4px; font: 500 18px/1.2 var(--f-sans); color: var(--ink); text-decoration: none; background: var(--card);
  box-shadow: 0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink); }   /* four bars with no corners: a frame cut in 4 px pixel steps */
a.a-chip:hover { background: var(--b500); color: #FFFFFF; box-shadow: 0 -4px 0 var(--b500), 0 4px 0 var(--b500), -4px 0 0 var(--b500), 4px 0 0 var(--b500); }
a.a-chip:focus-visible { outline: 2px solid var(--b500); outline-offset: 6px; }
.a-chip.a-google { display: inline-flex; background: var(--card); color: var(--ink); font-size: 18px; }
:root[data-theme="dark"] .a-chip { box-shadow: 0 -4px 0 var(--b300), 0 4px 0 var(--b300), -4px 0 0 var(--b300), 4px 0 0 var(--b300); }
.a-chip.a-off, :root[data-theme="dark"] .a-chip.a-off { color: var(--ink-3); box-shadow: 0 -4px 0 var(--rule), 0 4px 0 var(--rule), -4px 0 0 var(--rule), 4px 0 0 var(--rule); }
.a-test { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 20px 20px; }
.a-test small { font: 500 12px/1 var(--f-mono); color: var(--ink-3); flex-basis: 100%; }
.a-test input { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; outline: 0; }
.a-test .a-btn { padding: 13px 18px; }

/* the rest of the board fills what is left of the screen: three still tracks, like the home page's hero */
.a-deck { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); overflow: hidden; }
.a-deck > div { flex: 1 1 52px; max-height: 96px; min-height: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.a-deck b { display: flex; align-items: center; gap: 6px; padding: 10px 0; overflow: hidden; }
.a-deck b > i { flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 12px; background: var(--deck); border-left: 3px solid var(--b300); }
.a-deck b > i.on { background: var(--b200); border-color: var(--b500); }
:root[data-theme="dark"] .a-deck b > i.on { background: #22346E; }
.a-deck [data-px] { flex: none; }
.a-deck .v1 i:nth-child(1) { width: 30%; } .a-deck .v1 i:nth-child(2) { width: 22%; } .a-deck .v1 i:nth-child(3) { width: 52%; }
.a-deck .fx b { gap: 10px; padding-left: 4%; }
.a-deck .fx [data-px="block"] { --s: 3; }
.a-deck .fx i:first-child { width: 18%; } .a-deck .fx i:last-child { width: 26%; }   /* the scissors stand at the cut between two clips */
.a-deck .a1 b { padding: 0; }
.a-deck .a1 i { width: 100%; height: 44%; align-self: center; padding: 0; border: 0; background: repeating-linear-gradient(to right, var(--b300) 0 3px, transparent 3px 6px); -webkit-mask: linear-gradient(to right, #000 0 12%, rgba(0,0,0,.35) 20% 31%, #000 38% 55%, rgba(0,0,0,.3) 62% 70%, #000 78%); mask: linear-gradient(to right, #000 0 12%, rgba(0,0,0,.35) 20% 31%, #000 38% 55%, rgba(0,0,0,.3) 62% 70%, #000 78%); }
.a-foot { margin: 0; padding: 14px 20px; font-size: 14px; color: var(--ink-3); flex: none; }
.a-foot a { color: inherit; text-decoration: none; }
.a-foot a::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--b500); }   /* a pixel instead of an underline */
.a-foot a:hover { color: var(--b500); }

/* ---- the plain card: consent and message pages ---- */
.a-card:not(.a-sheet) { width: min(440px, calc(100% - 32px)); margin: auto; padding: 32px 28px; display: grid; gap: 14px; background: var(--card); border: 1px solid var(--rule); }
.a-card:not(.a-sheet) h1 { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.a-card p { margin: 0; color: var(--ink-2); }
.a-card b { color: var(--ink); font-weight: 600; }
.a-card:not(.a-sheet) .a-btn { width: 100%; padding: 14px 18px; }
.a-btn.alt { background: var(--card); color: var(--ink); border: 1px solid var(--rule); }
.a-btn.alt:hover { border-color: var(--b500); background: var(--card); }
.a-card:not(.a-sheet) .a-err { color: #B3261E; font-weight: 500; }
:root[data-theme="dark"] .a-card:not(.a-sheet) .a-err { color: #FF8A80; }
.a-alt a { color: var(--ink); text-underline-offset: 3px; }
.a-who { font: 400 13px/1.4 var(--f-mono); color: var(--ink-3) !important; }
.a-host { font: 500 13px/1.4 var(--f-mono); padding: 1px 6px; background: var(--b50); color: var(--b800); }
:root[data-theme="dark"] .a-host { background: var(--stage-a); color: var(--b200); }
.a-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-2); }
.a-list li { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: baseline; }
.a-list li::before { content: ""; width: 8px; height: 8px; background: var(--b500); transform: translateY(-1px); }   /* a pixel, the site's mark */
.a-actions { display: grid; gap: 10px; margin-top: 4px; }
@media (max-width: 420px) { .a-card:not(.a-sheet) { padding: 24px 18px; } .a-card:not(.a-sheet) h1 { font-size: 23px; } }
@media (min-width: 900px) { .a-track, .a-deck > div { grid-template-columns: 96px minmax(0, 1fr); } .a-clip { max-width: 760px; width: 100%; } .a-clip.a-pw { max-width: 620px; margin-right: 12px; } .a-track .a-btn { max-width: 760px; width: 100%; } }