/* tabien.css -- the licence-plate keychain page's own parts (/tabien/, 2026-11-09; live 2026-11-10, /preview/ keeps its own copy). The rest is shop.css (the
   storefront's frame, cards, segments, pills), griptok.css (buttons, help lines, the view switch) and bubble.css (the
   stage element, tiles, the test box, the font credits), which this page shares by id and class. */

/* the plate type's buttons: a small plate outline before the word */
#typeCard .segs button{display:flex;align-items:center;justify-content:center;gap:7px}
#typeCard .segs svg{width:22px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}

/* หมวดอักษร + เลขทะเบียน side by side, the province under them; the fields read like the plate's own line */
.tbrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tbfield{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:12px;font-weight:600;color:var(--ink3)}
.tbin{width:100%;min-width:0;min-height:52px;padding:0 14px;border-radius:12px;border:1px solid #0f172a1f;background:#0f172a0d;
  font-size:22px;font-weight:700;letter-spacing:.06em;outline:0;caret-color:var(--green-ink);box-sizing:border-box}
.tbin.tbsmall{min-height:46px;font-size:16px;letter-spacing:0;font-weight:600}
.tbin:focus,.tbsel:focus{border-color:#22c55e99;box-shadow:0 0 0 4px #22c55e26}
.tbin::placeholder{color:#94a3b8;font-weight:600}
.tbin[aria-invalid="true"]{border-color:#dc262680;box-shadow:0 0 0 3px #dc26261a}
.tbsel{width:100%;min-height:48px;padding:0 40px 0 14px;border-radius:12px;border:1px solid #0f172a1f;outline:0;box-sizing:border-box;
  background:#0f172a0d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356627a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px;
  font-size:16px;font-weight:600;color:var(--ink);-webkit-appearance:none;appearance:none}
#plateMsg,#logoMsg{margin:-6px 2px 0;font-size:12px;line-height:1.55;color:var(--ink3)}
#plateMsg:empty,#logoMsg:empty{display:none}
#plateMsg.warn,#logoMsg.warn{color:#b45309}
#logoTextBox{display:flex;flex-direction:column;gap:10px}
#logoTextBox[hidden]{display:none}
#logoCard .segs button,#tabCard .segs button{padding:0 4px;font-size:12.5px}

/* the two sizes: the width under the word, as the bubble plate's sizes */
#sizeCard .segs button{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
#sizeCard .segs button small{font-size:11px;font-weight:600;opacity:.75}

/* the colourings: a small plate in its two colours, the name under it */
/* one row of whatever the plate type offers (a car four, a motorbike three) */
.tblooks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:5px}
.tblook[hidden]{display:none}
.tblook{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 2px 8px;border:0;border-radius:12px;
  background:#0f172a0a;color:var(--ink3);font-size:11px;font-weight:600;line-height:1.2;text-align:center}
.tblook i{position:relative;width:100%;max-width:52px;aspect-ratio:52/24;border-radius:5px;box-shadow:inset 0 0 0 1px #0f172a26}
.tblook i::after{content:'';position:absolute;inset:3px;border-radius:2.5px;border:2px solid var(--ink-c)}
.tblook i b{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--ink-c)}
.tblook[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--blue)}
.tblook:disabled{opacity:.45}
.tblook em{font-style:normal;font-weight:500;font-size:10px;color:var(--ink4)}

/* ?shop=1 */
#shopCard{border:1px dashed #b4530966;background:#fffbeb}
.tbsliders{display:flex;flex-direction:column;gap:10px}
.tbslider{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;font-size:12px;color:var(--ink3)}
.tbslider output{font:600 12px 'IBM Plex Mono',monospace;color:var(--ink)}
.tbslider input{grid-column:1/-1;width:100%;margin:2px 0 0;accent-color:var(--blue-d)}
.tbcheck{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.tbcheck input{width:18px;height:18px;margin:0;accent-color:var(--blue-d)}
.tbupload{display:flex;gap:8px;flex-wrap:wrap}
.tbupload .gtghost{min-height:44px;padding:0 14px;font-size:13px}
.tbwarn{padding:9px 12px;border-radius:10px;background:#fef3c7;color:#78350f;font-size:12.5px;line-height:1.5;display:flex;flex-direction:column;gap:4px}
.tbwarn[hidden],#shopPic[hidden]{display:none}

/* the cord's colours (shop.css .sw swatches), under its switch */
.tbcords{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.tbcords[hidden],.tbcords .sw[hidden]{display:none}
#cordCard .segs button{font-size:13px}