/*
 * M-1000 Automated Manager
 * Theme-adaptive: no hardcoded page background. Surfaces are translucent grey
 * so they sit correctly on light (default/purple/waves) and dark themes alike.
 * Text uses `inherit` to follow the active theme's body colour.
 */

#m1000 {
	--m1000-accent: #d23f2a;   /* cold machine red — reads on light and dark */
	--m1000-amber:  #b9791f;
	--m1000-surface: rgba(127,127,127,0.09);
	--m1000-surface2: rgba(127,127,127,0.16);
	--m1000-line: rgba(127,127,127,0.32);
	--m1000-mono: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
	--m1000-thai: 'Prompt', 'Leelawadee UI', Leelawadee, Tahoma, 'Arial Unicode MS', sans-serif;

	max-width: 680px;
	margin: 0 auto;
	padding: 0 14px 48px;
	text-align: left;
}

/* ---- product banner ---- */
.m1000-banner {
	border: 1px solid var(--m1000-line);
	border-radius: 12px;
	background: var(--m1000-surface);
	padding: 16px 18px;
	margin: 6px 0 22px;
}
.m1000-status {
	font-family: var(--m1000-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .7;
	display: flex;
	align-items: center;
	gap: 8px;
}
.m1000-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #3fb950;
	box-shadow: 0 0 8px #3fb950;
	animation: m1000-pulse 2s infinite;
}
@keyframes m1000-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.m1000-tagline {
	font-size: clamp(20px, 4.5vw, 30px);
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 8px 0 4px;
	line-height: 1.15;
}
.m1000-fineprint { font-size: 12px; opacity: .6; font-style: italic; }

/* ---- module tabs ---- */
.m1000-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}
.m1000-tabs button {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--m1000-line);
	background: transparent;
	color: inherit;
	opacity: .62;
	cursor: pointer;
	transition: .15s;
}
.m1000-tabs button:hover { opacity: 1; }
.m1000-tabs button.active {
	opacity: 1;
	background: var(--m1000-accent);
	border-color: transparent;
	color: #fff;
}

/* ---- panels ---- */
.m1000-panel {
	border: 1px solid var(--m1000-line);
	border-radius: 12px;
	background: var(--m1000-surface);
	padding: 20px;
	animation: m1000-fade .3s ease;
}
.m1000-panel[hidden] { display: none; }
@keyframes m1000-fade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.m1000-lead { font-size: 14px; opacity: .78; margin: 0 0 16px; line-height: 1.55; }

.m1000-input {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 15px;
	padding: 11px 13px;
	margin-bottom: 10px;
	color: inherit;
	background: var(--m1000-surface2);
	border: 1px solid var(--m1000-line);
	border-radius: 9px;
	resize: vertical;
}
.m1000-input:focus { outline: none; border-color: var(--m1000-accent); }

.m1000-btnrow { margin: 6px 0 4px; }
.m1000-go {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 11px 22px;
	border: none;
	border-radius: 9px;
	background: var(--m1000-accent);
	color: #fff;
	cursor: pointer;
	transition: filter .15s, transform .1s;
}
.m1000-go:hover { filter: brightness(1.08); }
.m1000-go:active { transform: translateY(1px); }

/* ---- generated phrase output (Thai + phonetic + gloss) ---- */
.m1000-output {
	margin-top: 18px;
	padding: 18px;
	border-radius: 10px;
	border: 1px solid var(--m1000-line);
	background: var(--m1000-surface2);
	min-height: 40px;
}
.m1000-output.empty {
	opacity: .5;
	font-style: italic;
	font-size: 13px;
}
.m1000-th {
	font-family: var(--m1000-thai);
	font-size: clamp(20px, 5vw, 27px);
	line-height: 1.5;
	margin-bottom: 8px;
}
/* nudge the talking-head speaker down to sit on the text baseline (scoped to this page) */
#m1000 .head_talking {
	position: relative;
	top: .25em;
}
.m1000-sy {
	font-family: var(--m1000-thai);
	font-size: 15px;
	opacity: .72;
	margin-bottom: 8px;
	line-height: 1.5;
}
.m1000-gloss { font-size: 14px; opacity: .85; line-height: 1.5; }
.m1000-note {
	margin-top: 12px;
	font-family: var(--m1000-mono);
	font-size: 11px;
	letter-spacing: .05em;
	opacity: .5;
	text-transform: uppercase;
}

/* ---- performance review card ---- */
.m1000-review-card {
	margin-top: 18px;
	border: 1px solid var(--m1000-line);
	border-radius: 10px;
	background: var(--m1000-surface2);
	padding: 18px;
	animation: m1000-fade .3s ease;
}
.m1000-review-card .row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--m1000-line);
	font-size: 14px;
}
.m1000-review-card .row:last-child { border-bottom: none; }
.m1000-review-card .row .k { opacity: .65; }
.m1000-rating { font-weight: 700; color: var(--m1000-amber); }
.m1000-summary { margin-top: 14px; font-size: 14px; line-height: 1.6; }

.m1000-footer {
	margin-top: 26px;
	text-align: center;
	font-size: 12px;
	opacity: .55;
	line-height: 1.6;
}