/* Grayscale wireframe kit. --accent is a PLACEHOLDER (not brand colour). */
:root { --accent: 37 99 235; }
html, body { font-family: "Sarabun", "IBM Plex Sans Thai", system-ui, sans-serif; line-height: 1.7; color: #18181b; }
.input { height: 2.5rem; width: 100%; border: 1px solid #e4e4e7; border-radius: .375rem; padding: 0 .75rem; font-size: .875rem; background: #fff; }
.input:focus, .focus { outline: 2px solid rgb(var(--accent) / .35); outline-offset: 1px; border-color: rgb(var(--accent)); }
textarea.input { height: auto; padding: .5rem .75rem; }
.label { font-size: .8125rem; font-weight: 500; color: #3f3f46; display: block; margin-bottom: .25rem; }
.req::after { content: " *"; color: #18181b; font-weight: 700; }
/* validation (grayscale: heavy dark border + ⚠ message; destructive color comes from brand tokens later) */
.err .input { border: 2px solid #18181b; background: #fafafa; }
.err-msg { font-size: .8125rem; font-weight: 600; color: #18181b; margin-top: .25rem; }
.ok .input { border-color: #a1a1aa; }
.card { background: #fff; border: 1px solid #e4e4e7; border-radius: .5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 2.5rem; padding: 0 1rem; border-radius: .375rem; font-size: .875rem; font-weight: 500; border: 1px solid #e4e4e7; background: #fff; white-space: nowrap; }
.btn-primary { background: #18181b; color: #fff; border-color: #18181b; }
.btn-accent { background: rgb(var(--accent)); color: #fff; border-color: rgb(var(--accent)); }
.btn-sm { height: 2rem; padding: 0 .75rem; font-size: .8125rem; }
.btn[disabled], .btn.disabled { opacity: .45; }
.chip { display: inline-flex; align-items: center; min-height: 2rem; padding: .25rem .75rem; line-height: 1.35; text-align: left; border-radius: 999px; border: 1px solid #e4e4e7; font-size: .8125rem; background: #fff; }
.chip.on { background: #18181b; color: #fff; border-color: #18181b; }
.badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: 0 .5rem; font-size: .75rem; font-weight: 500; border: 1px solid #d4d4d8; background: #fafafa; color: #3f3f46; line-height: 1.5rem; white-space: nowrap; }
.badge.accent { border-color: rgb(var(--accent) / .4); background: rgb(var(--accent) / .08); color: rgb(var(--accent)); }
.badge.dark { background: #18181b; color: #fff; border-color: #18181b; }
.badge.warn { border: 1px solid #52525b; background: #e4e4e7; color: #18181b; }
.badge.dashed { border: 1px dashed #71717a; background: #fff; color: #52525b; }
.flagrow { background: #f4f4f5; } /* overdue row (grayscale) */
.kbd { font-family: ui-monospace, monospace; font-size: .6875rem; border: 1px solid #d4d4d8; border-bottom-width: 2px; border-radius: .25rem; padding: 0 .3rem; background: #fafafa; color: #52525b; }
/* Yellow = designer annotation only (not part of the UI). */
.anno { display: none !important; }
html.notes .anno { display: inline-block !important; }
.anno { font-size: .6875rem; color: #713f12; background: #fef9c3; border: 1px dashed #ca8a04; border-radius: .25rem; padding: 0 .375rem; max-width: 100%; }
.mono { font-family: ui-monospace, SFMono-Regular, monospace; }
/* Release split (PM, 22 Oct): grey tag on items that move to release 2 if the owner picks plan A.
   Staff/designer-only: on customer-facing pages use .r2tag.cust (shown only with ?notes=1). */
.r2tag { display: inline-block; vertical-align: middle; font-size: .6875rem; line-height: 1.5; font-weight: 500; color: #52525b; background: #f4f4f5; border: 1px solid #d4d4d8; border-radius: 999px; padding: 0 .45rem; white-space: nowrap; }
.r2tag.cust { display: none !important; }
html.notes .r2tag.cust { display: inline-block !important; }
.coretag { display: inline-block; vertical-align: middle; font-size: .6875rem; line-height: 1.5; font-weight: 600; color: #fff; background: #3f3f46; border-radius: 999px; padding: 0 .45rem; white-space: nowrap; }
.autosave { font-size: .75rem; color: #52525b; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.lightcard { border: 1px solid #d4d4d8; border-radius: .5rem; background: #fff; }
.lightnum { height: 1.5rem; min-width: 1.5rem; padding: 0 .375rem; border-radius: 999px; background: #18181b; color: #fff; font-size: .75rem; font-weight: 600; display: inline-grid; place-items: center; }