/* Itsuki product editorial theme v1
 * Presentation-only overrides for the signed-in product, authentication, and
 * legal overlay. Layout, routes, application state, and component behaviour
 * remain owned by public/index.html.
 */

/* -------------------------------------------------------------------------
   Semantic product palettes
   ---------------------------------------------------------------------- */
body.app-mode,
body.auth-mode,
body.legal-mode {
	--font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--bg: #f2ebdd;
	--panel: #fbf8f1;
	--panel2: #eee3d2;
	--panel3: #f7f0e5;
	--input-bg: #fffaf2;
	--border: #d5c9b6;
	--border2: #958772;
	--text: #15130f;
	--muted: #514b42;
	--faint: #716657;
	--accent: #b64221;
	--accent-hover: #9f3517;
	--on-accent: #fffaf2;
	--focus-ring: #7b2e17;
	--green: #176b47;
	--amber: #8a5817;
	--red: #a72e27;
	--purple: #7357a6;
	--success-bg: #e7f4ea;
	--warning-bg: #f8ecd2;
	--danger-bg: #fae7e2;
	--success-border: #75a88a;
	--warning-border: #bd8a3c;
	--danger-border: #c87268;
	--overlay: rgba(28, 22, 15, .56);
	--shadow-sm: 0 1px 0 rgba(30, 24, 17, .08), 0 4px 12px rgba(45, 34, 20, .07);
	--shadow-md: 0 14px 38px rgba(45, 34, 20, .13);
	--shadow-lg: 0 28px 80px rgba(45, 34, 20, .2);
	--editorial-press-shadow: #15130f;
	--editorial-grid: rgba(21, 19, 15, .045);
	--mw-selbg: rgba(182, 66, 33, .065);
	color-scheme: light;
}

/* Dark is neutral black with deliberate orange. Surfaces, borders, and text
   stay achromatic so the terracotta accent only appears where it means
   something: primary actions, active navigation, links, focus, selection
   edges. The warm brown-black ramp this replaced tinted every panel. */
html[data-theme="dark"] body.app-mode,
html[data-theme="dark"] body.auth-mode,
html[data-theme="dark"] body.legal-mode {
	--bg: #0f0f10;
	--panel: #161617;
	--panel2: #1e1e20;
	--panel3: #242427;
	--input-bg: #1a1a1d;
	--border: #2c2c30;
	--border2: #585860;
	--text: #f4f4f2;
	--muted: #b3b3b6;
	--faint: #85858a;
	--accent: #e38362;
	--accent-hover: #ef9677;
	--on-accent: #18120e;
	--focus-ring: #f1a488;
	--green: #70c99d;
	--amber: #d5a85d;
	--red: #ef9185;
	--purple: #b39ad6;
	--success-bg: #142520;
	--warning-bg: #2a2312;
	--danger-bg: #2e1a18;
	--success-border: #357458;
	--warning-border: #8d692c;
	--danger-border: #9e4e47;
	--overlay: rgba(0, 0, 0, .76);
	--shadow-sm: 0 1px 0 rgba(244, 244, 242, .04), 0 5px 16px rgba(0, 0, 0, .3);
	--shadow-md: 0 16px 42px rgba(0, 0, 0, .42);
	--shadow-lg: 0 30px 86px rgba(0, 0, 0, .58);
	--editorial-press-shadow: #000000;
	--editorial-grid: rgba(244, 244, 242, .03);
	--mw-selbg: rgba(244, 244, 242, .055);
	color-scheme: dark;
}

/* -------------------------------------------------------------------------
   Product shell and surfaces. These rules deliberately do not alter geometry.
   ---------------------------------------------------------------------- */
body.app-mode {
	background-color: var(--bg);
	background-image:
		linear-gradient(var(--editorial-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--editorial-grid) 1px, transparent 1px);
	background-size: 48px 48px;
}

body.app-mode #appHeader,
body.app-mode #rail,
body.app-mode .detail {
	background: color-mix(in srgb, var(--panel) 97%, transparent);
}

body.app-mode #appHeader {
	border-bottom-color: var(--border);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}

body.app-mode #rail {
	border-right-color: var(--border);
}

body.app-mode .rail-brand {
	color: var(--text);
}

body.app-mode .rail-label {
	color: var(--faint);
	font-family: var(--font-mono);
}

body.app-mode .tab:hover {
	background: var(--panel2);
	color: var(--text);
}

body.app-mode .tab.active {
	background: color-mix(in srgb, var(--accent) 11%, var(--panel));
	box-shadow: inset 3px 0 0 var(--accent);
	color: var(--accent);
}

/* In dark, the active state keeps the orange bar and label but sits on a
   neutral surface — an 11% orange wash across a full black row read as a
   tinted stripe, not a highlight. Same treatment for the settings sub-nav. */
html[data-theme="dark"] body.app-mode .tab.active,
html[data-theme="dark"] body.app-mode .set-nav button.active {
	background: color-mix(in srgb, var(--text) 6%, var(--panel));
}

body.app-mode .tab-badge {
	background: var(--accent);
	color: var(--on-accent);
}

body.app-mode .box,
body.app-mode .action-box,
body.app-mode .overview-card,
body.app-mode .overview-kpi,
body.app-mode .pg-col,
body.app-mode .mw-list,
body.app-mode .mw-insp,
body.app-mode .set-card,
body.app-mode .project-modal,
body.app-mode .policy-modal,
body.app-mode .key-modal {
	border-color: var(--border);
	box-shadow: var(--shadow-sm);
}

body.app-mode .project-menu,
body.app-mode .organization-menu,
body.app-mode .mw-menu,
body.app-mode .pg-menu,
body.app-mode .overview-tooltip,
body.app-mode .overview-bucket-drawer,
body.app-mode .overview-jobs-dialog,
body.app-mode .modal-backdrop > * {
	box-shadow: var(--shadow-md);
}

body.app-mode .project-switcher-button,
body.app-mode .organization-switcher-button,
body.app-mode .theme-quick,
body.app-mode .overview-control,
body.app-mode .overview-ranges,
body.app-mode .pg-chip-btn,
body.app-mode .pg-view-btn,
body.app-mode .pg-icon-btn,
body.app-mode .mw-btn:not(.mw-btn-primary) {
	background: var(--panel);
	border-color: var(--border);
	color: var(--muted);
}

body.app-mode .project-switcher-button:hover:not(:disabled),
body.app-mode .organization-switcher-button:hover:not(:disabled),
body.app-mode .theme-quick:hover:not(:disabled),
body.app-mode .overview-control:hover:not(:disabled),
body.app-mode .pg-chip-btn:hover:not(:disabled),
body.app-mode .pg-view-btn:hover:not(:disabled),
body.app-mode .pg-icon-btn:hover:not(:disabled),
body.app-mode .mw-btn:not(.mw-btn-primary):hover:not(:disabled) {
	background: var(--panel2);
	border-color: var(--border2);
	color: var(--text);
	filter: none;
}

body.app-mode .overview-kpi:hover,
body.app-mode .mw-row:hover,
body.app-mode tr.click:hover td {
	background: color-mix(in srgb, var(--panel2) 78%, var(--panel));
}

body.app-mode .badge,
body.app-mode .stat,
body.app-mode kbd {
	background: var(--panel2);
	border-color: var(--border);
}

body.app-mode .toast {
	background: var(--panel);
	border-color: var(--border2);
	box-shadow: var(--shadow-md);
}

/* The memory graph is intentionally an instrument panel in both themes.
   Neutral charcoal instrument housing; the orange survives only as the
   accent token and a faint centre glow so nodes and edges carry the color. */
body.app-mode #graphWrap {
	--panel: #151516;
	--panel2: #1e1e20;
	--panel3: #242427;
	--input-bg: #191a1c;
	--border: #303034;
	--border2: #585860;
	--text: #f4f4f2;
	--muted: #b3b3b6;
	--faint: #85858a;
	--accent: #e38362;
	--on-accent: #18120e;
	background:
		radial-gradient(circle at 50% 44%, rgba(227, 131, 98, .07), transparent 35%),
		linear-gradient(180deg, #151516 0%, #0d0d0e 100%);
	border: 1px solid #303034;
}

body.app-mode #graphWrap::before {
	background-image:
		linear-gradient(rgba(244, 244, 242, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(244, 244, 242, .03) 1px, transparent 1px);
}

body.app-mode #graphWrap::after {
	background: radial-gradient(circle at 50% 45%, rgba(227, 131, 98, .07), transparent 35%);
}

/* -------------------------------------------------------------------------
   Form controls. Native choice, range, upload, and colour controls are left
   native and therefore keep their hit targets and platform affordances.
   ---------------------------------------------------------------------- */
body.app-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
body.app-mode select,
body.app-mode textarea,
body.auth-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
body.auth-mode select,
body.auth-mode textarea {
	background: var(--input-bg);
	border-color: var(--border2);
	color: var(--text);
}

body.app-mode input::placeholder,
body.app-mode textarea::placeholder,
body.auth-mode input::placeholder,
body.auth-mode textarea::placeholder {
	color: var(--faint);
	opacity: 1;
}

body.app-mode input:focus,
body.app-mode select:focus,
body.app-mode textarea:focus,
body.auth-mode input:focus,
body.auth-mode select:focus,
body.auth-mode textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 19%, transparent);
}

body.app-mode :where(a, button, input, select, textarea, [tabindex]):focus-visible,
body.auth-mode :where(a, button, input, select, textarea, [tabindex]):focus-visible,
#legalView.legal-shell :where(a, button, [tabindex]):focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Explicit primary controls. No generic button is promoted to a CTA.
   ---------------------------------------------------------------------- */
body.app-mode .mw-btn-primary,
body.app-mode .btn.primary,
body.app-mode .install-btn,
body.auth-mode .auth-actions button[type="submit"] {
	background: var(--accent);
	border: 1px solid var(--editorial-press-shadow);
	color: var(--on-accent);
	box-shadow: 4px 4px 0 var(--editorial-press-shadow);
	filter: none;
	transform: translate(0, 0);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease,
		box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}

body.app-mode .mw-btn-primary:hover:not(:disabled),
body.app-mode .btn.primary:hover:not(:disabled),
body.app-mode .install-btn:hover:not([aria-disabled="true"]),
body.auth-mode .auth-actions button:hover:not(:disabled) {
	background: var(--accent-hover);
	border-color: var(--editorial-press-shadow);
	box-shadow: 2px 2px 0 var(--editorial-press-shadow);
	color: var(--on-accent);
	filter: none;
	transform: translate(2px, 2px);
}

body.app-mode .mw-btn-primary:active:not(:disabled),
body.app-mode .btn.primary:active:not(:disabled),
body.app-mode .install-btn:active:not([aria-disabled="true"]),
body.auth-mode .auth-actions button:active:not(:disabled) {
	box-shadow: 0 0 0 var(--editorial-press-shadow);
	transform: translate(4px, 4px);
}

body.app-mode .install-btn[aria-disabled="true"] {
	box-shadow: none;
	cursor: not-allowed;
	filter: none;
	opacity: .48;
	transform: none;
}

body.app-mode button:disabled,
body.app-mode button:disabled:hover,
body.app-mode button:disabled:active,
body.auth-mode button:disabled,
body.auth-mode button:disabled:hover,
body.auth-mode button:disabled:active {
	background: var(--panel2);
	border-color: var(--border);
	box-shadow: none;
	color: var(--faint);
	cursor: not-allowed;
	filter: none;
	opacity: .58;
	transform: none;
}

/* Setup steps, segmented controls, and ordinary navigation stay neutral. */
body.app-mode .setup-step-button,
body.app-mode .term-tab,
body.app-mode .overview-range,
body.app-mode .overview-mode,
body.app-mode .mw-seg,
body.app-mode .set-nav button,
body.app-mode .pg-menu button {
	box-shadow: none;
	transform: none;
}

/* Destructive semantics always outrank primary and neutral families. */
body.app-mode button.danger,
body.app-mode button.ghost.danger,
body.app-mode .mw-danger,
body.app-mode .set-danger button,
#legalView.legal-shell button.danger {
	background: var(--danger-bg);
	border-color: var(--danger-border);
	box-shadow: none;
	color: var(--red);
	filter: none;
	transform: none;
}

body.app-mode button.danger:hover:not(:disabled),
body.app-mode button.ghost.danger:hover:not(:disabled),
body.app-mode .mw-danger:hover:not(:disabled),
body.app-mode .set-danger button:hover:not(:disabled),
#legalView.legal-shell button.danger:hover:not(:disabled) {
	background: color-mix(in srgb, var(--red) 12%, var(--danger-bg));
	border-color: var(--red);
	box-shadow: none;
	color: var(--red);
	filter: none;
	transform: none;
}

/* -------------------------------------------------------------------------
   Authentication
   ---------------------------------------------------------------------- */
body.auth-mode {
	overflow: hidden auto;
	background: var(--bg);
	color: var(--text);
}

body.auth-mode .auth-shell {
	min-height: 100dvh;
	display: block;
	padding: 0;
	background:
		radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
		linear-gradient(var(--editorial-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--editorial-grid) 1px, transparent 1px),
		var(--bg);
	background-size: auto, 48px 48px, 48px 48px, auto;
}

/* The legacy inline .auth-shell centers a shrink-wrapped card; the editorial
   layout needs the full viewport, or every percentage width inside collapses
   to content size (a 240px sign-in card on a 1920px screen). */
body.auth-mode .auth-shell {
	display: block;
	/* Chrome applies box-alignment justify-items to block containers too, so
	   the legacy place-items: center must be reset or children shrink-wrap. */
	place-items: stretch;
	padding: 0;
	background: var(--bg);
}

body.auth-mode .auth-layout {
	min-height: 100dvh;
	display: grid;
	grid-template-columns: minmax(360px, 43%) minmax(0, 57%);
	background: var(--bg);
}

body.auth-mode .auth-editorial-panel {
	position: relative;
	display: flex;
	min-height: 100dvh;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	padding: clamp(30px, 5vw, 72px);
	background:
		linear-gradient(rgba(255, 250, 242, .08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 250, 242, .08) 1px, transparent 1px),
		#9f3517;
	background-size: 44px 44px, 44px 44px, auto;
	color: #fffaf2;
}

/* A quiet ensō, fully inside the panel — the old half-cropped giant circle
   with halo rings read as a rendering mistake rather than a mark. */
body.auth-mode .auth-editorial-panel::after {
	content: "";
	position: absolute;
	right: clamp(24px, 4vw, 56px);
	bottom: clamp(20px, 6vh, 64px);
	width: min(17vw, 210px);
	aspect-ratio: 1;
	border: 1.5px solid rgba(255, 250, 242, .22);
	border-radius: 50%;
	box-shadow: inset 0 0 0 10px rgba(255, 250, 242, .04);
	mask-image: conic-gradient(from 205deg, transparent 0 26deg, #000 40deg 360deg);
	-webkit-mask-image: conic-gradient(from 205deg, transparent 0 26deg, #000 40deg 360deg);
	pointer-events: none;
}

body.auth-mode .auth-editorial-brand {
	position: relative;
	z-index: 1;
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 13px;
	color: #fffaf2;
	text-decoration: none;
}

body.auth-mode .auth-editorial-brand img {
	width: 46px;
	height: 46px;
	content: url("/assets/brand/itsuki-bonsai-mark-inverse.svg?v=1");
}

body.auth-mode .auth-editorial-brand span {
	display: flex;
	align-items: baseline;
	gap: 9px;
}

body.auth-mode .auth-editorial-brand b {
	font-family: var(--font-serif);
	font-size: 25px;
	font-weight: 650;
}

body.auth-mode .auth-editorial-brand small {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	opacity: .76;
}

body.auth-mode .auth-editorial-copy {
	position: relative;
	z-index: 1;
	max-width: 620px;
	margin: clamp(70px, 12vh, 160px) 0 auto;
}

body.auth-mode .auth-kicker,
body.auth-mode .auth-step-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

body.auth-mode .auth-kicker {
	margin-bottom: 20px;
	color: rgba(255, 250, 242, .78);
}

body.auth-mode .auth-editorial-copy h1 {
	max-width: 11ch;
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(42px, 5vw, 78px);
	font-weight: 540;
	line-height: .98;
	letter-spacing: -.045em;
}

body.auth-mode .auth-editorial-copy p {
	max-width: 51ch;
	margin: 28px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 250, 242, .78);
}

body.auth-mode .auth-proof-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid rgba(255, 250, 242, .35);
	color: rgba(255, 250, 242, .82);
}

body.auth-mode .auth-proof-grid span {
	display: grid;
	gap: 7px;
	padding: 18px 12px 0 0;
	font-size: 12px;
}

body.auth-mode .auth-proof-grid b {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: #fffaf2;
}

body.auth-mode .auth-entry-panel {
	display: grid;
	min-width: 0;
	/* The card's width lives on the TRACK: a percentage inside an auto track
	   is indefinite and collapses to shrink-to-fit (a 240px sign-in card). */
	grid-template-columns: min(560px, 100%);
	justify-content: center;
	align-content: center;
	place-items: center;
	padding: clamp(28px, 5vw, 88px);
	background:
		linear-gradient(var(--editorial-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--editorial-grid) 1px, transparent 1px),
		var(--bg);
	background-size: 48px 48px, 48px 48px, auto;
}

body.auth-mode .auth-card {
	width: 100%;
	padding: clamp(28px, 4vw, 52px);
	background: color-mix(in srgb, var(--panel) 96%, transparent);
	border-color: var(--border2);
	border-radius: 0;
	box-shadow: 8px 8px 0 color-mix(in srgb, var(--editorial-press-shadow) 88%, transparent), var(--shadow-lg);
	color: var(--text);
}

body.auth-mode .auth-card-mark {
	display: none;
}

body.auth-mode .auth-card-seal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--faint);
}

body.auth-mode .auth-card-seal img {
	width: 18px;
	height: 18px;
	opacity: .72;
}

body.auth-mode .auth-step-label {
	margin-bottom: 16px;
	color: var(--accent);
}

body.auth-mode .auth-card h2 {
	font-family: var(--font-serif);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 560;
	line-height: 1.03;
	letter-spacing: -.035em;
}

body.auth-mode .auth-card h2,
body.auth-mode .brand-lockup,
body.auth-mode .form-row label {
	color: var(--text);
}

body.auth-mode .auth-card p,
body.auth-mode .brand-lockup span,
body.auth-mode .help,
body.auth-mode .auth-agree,
body.auth-mode .auth-divider {
	color: var(--muted);
}

body.auth-mode .auth-divider::before,
body.auth-mode .auth-divider::after {
	background: var(--border);
}

body.auth-mode .google-btn {
	background: #ffffff;
	border-color: #b8aa94;
	box-shadow: 0 2px 0 rgba(21, 19, 15, .16);
	color: #1f1d19;
	filter: none;
	transform: none;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease,
		transform .15s ease, opacity .15s ease;
}

body.auth-mode .github-btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #171513;
	border: 1px solid #171513;
	box-shadow: 0 2px 0 color-mix(in srgb, var(--text) 20%, transparent);
	color: #fffaf2;
	filter: none;
	transform: none;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease,
		transform .15s ease, opacity .15s ease;
}

body.auth-mode .github-btn:hover:not(:disabled) {
	background: #2d2925;
	border-color: #2d2925;
	box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 20%, transparent);
	filter: none;
	transform: translateY(1px);
}

body.auth-mode .github-btn:active:not(:disabled) {
	box-shadow: none;
	transform: translateY(2px);
}

body.auth-mode .github-btn svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

body.auth-mode .auth-provider-grid {
	display: grid;
	gap: 10px;
	margin-top: 22px;
}

body.auth-mode .auth-access-card .auth-actions,
body.auth-mode .first-run-actions {
	margin-top: 22px;
}

body.auth-mode .auth-access-card .auth-actions > *,
body.auth-mode .first-run-actions > * {
	min-height: 44px;
	flex: 1 1 180px;
	justify-content: center;
}

body.auth-mode .auth-code-row {
	margin-top: 24px;
}

body.auth-mode .auth-code-input {
	height: 64px;
	font-family: var(--font-mono);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .32em;
	text-align: center;
}

body.auth-mode .auth-code-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 9px;
	font-size: 12px;
	color: var(--faint);
}

body.auth-mode .auth-text-button {
	width: auto;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--accent);
	font-size: 12px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* First-run onboarding and the one-time key handoff use the same editorial
   split, so authentication never hands off into an unrelated visual product. */
body.auth-mode .first-run-card {
	width: min(660px, 100%);
}

body.auth-mode .first-run-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 22px;
}

body.auth-mode .first-run-head h2 {
	margin-bottom: 0;
}

body.auth-mode .first-run-progress {
	display: flex;
	width: min(150px, 35%);
	gap: 5px;
	padding-top: 9px;
}

body.auth-mode .first-run-progress span {
	height: 3px;
	flex: 1;
	background: var(--border);
}

body.auth-mode .first-run-progress span.active {
	background: var(--accent);
}

body.auth-mode .first-run-intro {
	max-width: 58ch;
}

body.auth-mode .onboarding-fieldset {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
}

body.auth-mode .onboarding-fieldset legend {
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text);
}

body.auth-mode .onboarding-choice-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 9px;
}

body.auth-mode .onboarding-choice {
	display: flex;
	min-height: 116px;
	align-items: flex-start;
	gap: 10px;
	padding: 15px;
	background: var(--panel3);
	border: 1px solid var(--border);
	border-radius: 0;
	box-shadow: none;
	color: var(--text);
	text-align: left;
	transform: none;
}

body.auth-mode .onboarding-choice:hover:not(:disabled) {
	background: var(--panel2);
	border-color: var(--border2);
	filter: none;
	transform: none;
}

body.auth-mode .onboarding-choice.active {
	background: color-mix(in srgb, var(--accent) 9%, var(--panel));
	border-color: var(--accent);
}

body.auth-mode .onboarding-choice-dot {
	width: 11px;
	height: 11px;
	margin-top: 4px;
	border: 1px solid var(--border2);
	border-radius: 50%;
	background: var(--panel);
	box-shadow: inset 0 0 0 3px var(--panel);
}

body.auth-mode .onboarding-choice.active .onboarding-choice-dot {
	border-color: var(--accent);
	background: var(--accent);
}

body.auth-mode .onboarding-choice span:last-child {
	display: grid;
	gap: 7px;
}

body.auth-mode .onboarding-choice small,
body.auth-mode .onboarding-consent small,
body.auth-mode .onboarding-private-note span,
body.auth-mode .first-run-summary small {
	display: block;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--muted);
}

body.auth-mode .onboarding-consent {
	display: flex;
	gap: 12px;
	margin: 22px 0;
	padding: 16px;
	background: var(--panel3);
	border: 1px solid var(--border);
	cursor: pointer;
}

body.auth-mode .onboarding-consent input {
	margin-top: 3px;
}

body.auth-mode .onboarding-consent span {
	display: grid;
	gap: 4px;
}

body.auth-mode .onboarding-private-note,
body.auth-mode .first-key-empty {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 22px 0;
	padding: 18px;
	background: var(--panel3);
	border: 1px solid var(--border);
}

body.auth-mode .onboarding-private-note {
	display: grid;
	gap: 5px;
}

body.auth-mode .first-key-index {
	font-family: var(--font-mono);
	font-size: 28px;
	color: var(--accent);
}

body.auth-mode .first-key-empty h3,
body.auth-mode .first-run-ready h3 {
	margin: 0 0 7px;
	font-family: var(--font-serif);
	font-size: 26px;
}

body.auth-mode .first-key-empty p {
	margin: 0;
}

body.auth-mode .first-key-panel {
	margin-top: 24px;
}

body.auth-mode .first-key-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 9px;
	font-size: 12px;
}

body.auth-mode .first-key-label span {
	font-family: var(--font-mono);
	color: var(--accent);
}

body.auth-mode .first-key-secret {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

body.auth-mode .first-key-secret input {
	min-width: 0;
	font-family: var(--font-mono);
}

body.auth-mode .first-key-secret button {
	min-width: 98px;
	background: var(--text);
	border-color: var(--text);
	color: var(--panel);
	box-shadow: none;
}

body.auth-mode .first-run-ready {
	text-align: center;
}

body.auth-mode .first-run-ready-mark {
	display: grid;
	width: 64px;
	height: 64px;
	margin: 4px auto 18px;
	place-items: center;
	background: var(--success-bg);
	border: 1px solid var(--success-border);
	border-radius: 50%;
	color: var(--green);
	font-size: 28px;
}

body.auth-mode .first-run-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 28px 0 0;
	border: 1px solid var(--border);
	text-align: left;
}

body.auth-mode .first-run-summary span {
	display: grid;
	gap: 4px;
	padding: 15px;
}

body.auth-mode .first-run-summary span + span {
	border-left: 1px solid var(--border);
}

body.auth-mode .google-btn:hover:not(:disabled) {
	background: #f7f2e8;
	border-color: #8f816d;
	box-shadow: 0 1px 0 rgba(21, 19, 15, .16);
	filter: none;
	transform: translateY(1px);
}

body.auth-mode .google-btn:active:not(:disabled) {
	box-shadow: none;
	transform: translateY(2px);
}

body.auth-mode .auth-actions .cta-secondary {
	background: var(--panel);
	border-color: var(--border2);
	color: var(--text);
	box-shadow: none;
}

body.auth-mode .auth-actions .cta-secondary:hover {
	background: var(--panel2);
	border-color: var(--accent);
	color: var(--text);
}

body.auth-mode a.forgot-link {
	color: var(--accent);
	text-decoration-color: color-mix(in srgb, var(--accent) 48%, transparent);
	text-underline-offset: 3px;
}

body.auth-mode a.forgot-link:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

body.auth-mode .auth-agree a,
body.auth-mode .help a {
	color: var(--accent);
}

body.auth-mode .auth-error {
	background: var(--danger-bg);
	border-color: var(--danger-border);
	color: var(--red);
}

/* The official mark uses an inverse asset, not a CSS brightness approximation. */
html[data-theme="dark"] body.app-mode .logo-mark,
html[data-theme="dark"] body.auth-mode .brand-lockup img {
	content: url("/assets/brand/itsuki-bonsai-mark-inverse.svg?v=1");
}

/* -------------------------------------------------------------------------
   Terms and privacy overlay. It has no body mode of its own at runtime, so it
   carries a self-contained palette and then follows the resolved HTML theme.
   ---------------------------------------------------------------------- */
#legalView.legal-shell {
	--bg: #f2ebdd;
	--panel: #fbf8f1;
	--panel2: #eee3d2;
	--input-bg: #fffaf2;
	--border: #d5c9b6;
	--border2: #958772;
	--text: #15130f;
	--muted: #514b42;
	--accent: #b64221;
	--accent-hover: #9f3517;
	--on-accent: #fffaf2;
	--focus-ring: #7b2e17;
	background: color-mix(in srgb, var(--bg) 96%, transparent);
	color: var(--text);
	color-scheme: light;
}

html[data-theme="dark"] #legalView.legal-shell {
	--bg: #0f0f10;
	--panel: #161617;
	--panel2: #1e1e20;
	--input-bg: #1a1a1d;
	--border: #2c2c30;
	--border2: #585860;
	--text: #f4f4f2;
	--muted: #b3b3b6;
	--accent: #e38362;
	--accent-hover: #ef9677;
	--on-accent: #18120e;
	--focus-ring: #f1a488;
	background: rgba(15, 15, 16, .97);
	color-scheme: dark;
}

#legalView.legal-shell .legal-doc {
	background: var(--panel);
	border-color: var(--border);
	box-shadow: var(--shadow-lg, 0 28px 80px rgba(0, 0, 0, .25));
	color: var(--text);
}

#legalView.legal-shell .legal-doc p,
#legalView.legal-shell .legal-doc li,
#legalView.legal-shell .legal-meta {
	color: var(--muted);
}

#legalView.legal-shell .legal-doc h2,
#legalView.legal-shell .legal-doc a {
	color: var(--accent);
}

#legalView.legal-shell .legal-close {
	background: var(--panel2);
	border: 1px solid var(--border2);
	box-shadow: none;
	color: var(--text);
}

#legalView.legal-shell .legal-close:hover:not(:disabled) {
	background: color-mix(in srgb, var(--accent) 9%, var(--panel2));
	border-color: var(--accent);
	color: var(--text);
	filter: none;
}

@media (max-width: 980px) {
	body.auth-mode .auth-layout {
		grid-template-columns: 1fr;
	}

	body.auth-mode .auth-editorial-panel {
		min-height: auto;
		padding: 26px clamp(20px, 5vw, 48px);
	}

	body.auth-mode .auth-editorial-copy {
		margin: 52px 0 44px;
	}

	body.auth-mode .auth-editorial-copy h1 {
		max-width: 14ch;
		font-size: clamp(38px, 8vw, 64px);
	}

	body.auth-mode .auth-proof-grid {
		display: none;
	}

	body.auth-mode .auth-entry-panel {
		padding: 44px clamp(18px, 6vw, 64px) 72px;
	}
}

@media (max-width: 620px) {
	body.auth-mode .auth-editorial-copy p {
		display: none;
	}

	body.auth-mode .auth-editorial-copy {
		margin: 38px 0 18px;
	}

	body.auth-mode .auth-entry-panel {
		padding: 0;
		place-items: stretch;
	}

	body.auth-mode .auth-card {
		width: 100%;
		min-height: 58dvh;
		padding: 30px 20px 50px;
		border-width: 1px 0 0;
		box-shadow: none;
	}

	body.auth-mode .onboarding-choice-grid {
		grid-template-columns: 1fr;
	}

	body.auth-mode .onboarding-choice {
		min-height: auto;
	}

	body.auth-mode .first-run-head {
		display: grid;
	}

	body.auth-mode .first-run-progress {
		width: 100%;
		max-width: none;
	}

	body.auth-mode .first-key-secret,
	body.auth-mode .first-run-summary {
		grid-template-columns: 1fr;
	}

	body.auth-mode .first-run-summary span + span {
		border-top: 1px solid var(--border);
		border-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.app-mode *,
	body.app-mode *::before,
	body.app-mode *::after,
	body.auth-mode *,
	body.auth-mode *::before,
	body.auth-mode *::after,
	#legalView.legal-shell *,
	#legalView.legal-shell *::before,
	#legalView.legal-shell *::after {
		animation: none !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}

	body.app-mode :where(button, a, .overview-kpi, .mw-row),
	body.auth-mode :where(button, a),
	#legalView.legal-shell :where(button, a) {
		transform: none !important;
	}
}

/* ===========================================================================
   Operator console — the admin surface, rebuilt.

   The old page was a stack of rounded boxes with ghost buttons: fine for four
   numbers, useless for answering "who did what". This is a directory beside a
   trail, with a density closer to a log viewer than a dashboard. Everything
   here is metadata; memory content never reaches this screen.
   ======================================================================== */

.ops { border: 1px solid var(--border); background: var(--panel); }
.ops-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px 12px; }
.ops-title h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.ops-sub { margin: 3px 0 0; color: var(--faint); font-size: 12.5px; }
.ops-meta { display: flex; align-items: center; gap: 9px; }
.ops-pill { border: 1px solid var(--border2); color: var(--faint); padding: 4px 9px;
  font: 600 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ops-tabs { display: flex; gap: 0; overflow-x: auto; border-top: 1px solid var(--border); }
.ops-tab { flex: 0 0 auto; border: 0; border-right: 1px solid var(--border); background: transparent;
  color: var(--faint); padding: 10px 16px; font: 600 12.5px/1 var(--font-ui); cursor: pointer;
  transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease; }
.ops-tab:hover { color: var(--text); background: var(--panel2); }
.ops-tab.is-active { color: var(--text); background: var(--panel2); box-shadow: inset 0 -2px 0 var(--accent); }

/* ---- people: directory beside trail ---- */
.ops-people { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ops-dir { border: 1px solid var(--border); background: var(--panel); min-width: 0; }
.ops-dir-search { padding: 10px; border-bottom: 1px solid var(--border); }
.ops-dir-search input { width: 100%; }
/* A fixed viewport with its own scroll: the directory must not push the trail
   down the page when the account list grows. */
.ops-dir-list { max-height: 620px; overflow-y: auto; }
.ops-person-row { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0;
  border-bottom: 1px solid var(--border); background: transparent; color: var(--text);
  text-align: left; cursor: pointer; transition: background 120ms ease, box-shadow 120ms ease; }
.ops-person-row:hover { background: var(--panel2); }
.ops-person-row.is-selected { background: var(--panel2); box-shadow: inset 2px 0 0 var(--accent); }
.ops-person-name { font-size: 13px; font-weight: 650; }
.ops-person-mail, .ops-person-meta { color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-person-meta { font-family: var(--font-mono); font-size: 10.5px; }

.ops-person, .ops-panel { border: 1px solid var(--border); background: var(--panel); min-width: 0; }
.ops-person-body, .ops-panel { padding: 16px 18px 18px; }
.ops-person-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ops-person-sub { margin: 3px 0 0; color: var(--faint); font-size: 12.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ops-person-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-h { margin: 20px 0 9px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.ops-person-head .ops-h, .ops-panel-head .ops-h { margin-top: 0; font-size: 16px; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.ops-empty { padding: 34px 18px; color: var(--faint); font-size: 13px; }

.ops-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 1px;
  margin-top: 14px; background: var(--border); border: 1px solid var(--border); }
.ops-stat { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; background: var(--panel); }
.ops-stat b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.ops-stat span { color: var(--faint); font-size: 11px; }
.ops-stat i { color: var(--faint); font-style: normal; font-size: 10px; font-family: var(--font-mono); }

/* ---- the ledger table ---- */
.ops-scroll { overflow-x: auto; border: 1px solid var(--border); }
.ops-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ops-table th { position: sticky; top: 0; z-index: 1; background: var(--panel2); color: var(--faint);
  text-align: left; padding: 8px 11px; border-bottom: 1px solid var(--border);
  font: 600 10px/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.ops-table td { padding: 8px 11px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ops-table tr:last-child td { border-bottom: 0; }
.ops-table tbody tr:hover { background: var(--panel2); }
.ops-when { color: var(--faint); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.ops-actor { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-action { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); }
.ops-target { color: var(--faint); font-family: var(--font-mono); font-size: 11px; }
/* A failed action gets a left rule rather than a red row: an operator scanning
   a long ledger needs the failures findable, not the screen alarming. */
.ops-row-bad td:first-child { box-shadow: inset 2px 0 0 var(--red); }
.ops-more { margin-top: 12px; }

@media (max-width: 900px) {
  .ops-people { grid-template-columns: 1fr; }
  .ops-dir-list { max-height: 280px; }
  .ops-head { flex-direction: column; gap: 10px; }
}