/* Draw: WPDS family shell. White surfaces, Gutenberg grays, blueberry accent. */

:root {
	--draw-accent: #3858e9;
	--draw-accent-dark: #2a41ae;
	--draw-fg: #1e1e1e;
	--draw-fg-muted: #757575;
	--draw-border: #e0e0e0;
	--draw-bg: #ffffff;
	--draw-bg-quiet: #f6f7f7;
	--draw-danger: #cc1818;
	--draw-radius: 8px;
	--draw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--sidebar-w: 304px;
	--assist-w: 400px;
}
:root[data-theme="dark"] {
	--draw-fg: #e0e0e0;
	--draw-fg-muted: #949494;
	--draw-border: #2f2f2f;
	--draw-bg: #1e1e1e;
	--draw-bg-quiet: #262626;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: var(--draw-font);
	font-size: 13px;
	color: var(--draw-fg);
	background: var(--draw-bg);
}
button { font: inherit; color: inherit; }
a { color: var(--draw-accent); }

.app {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
	position: relative;
	width: var(--sidebar-w);
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: var(--draw-bg);
	border-inline-end: 1px solid var(--draw-border);
}
body.no-anim .sidebar { transition: none !important; }
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed .left-panel-resize-handle { display: none; }

.sidebar-top {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
}
.app-identity-link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	text-decoration: none;
	color: var(--draw-fg);
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--draw-radius);
	padding: 4px;
}
.app-identity-link img { width: 36px; height: 36px; border-radius: 8px; display: block; }
.app-identity-link:focus-visible { outline: 2px solid var(--draw-accent); outline-offset: 2px; }

.sidebar-collapse, .sidebar-restore {
	border: none;
	background: transparent;
	color: var(--draw-fg-muted);
	border-radius: 6px;
	width: 28px;
	height: 28px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.sidebar-collapse:hover, .sidebar-restore:hover { background: var(--draw-bg-quiet); color: var(--draw-fg); }
.sidebar-collapse:focus-visible, .sidebar-restore:focus-visible { outline: 2px solid var(--draw-accent); }
.sidebar-restore {
	position: fixed;
	inset-inline-start: 8px;
	inset-block-start: 12px;
	z-index: 40;
	border: 1px solid var(--draw-border);
	background: var(--draw-bg);
}

.sidebar-body { overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: none; }
.sidebar-body:hover, .sidebar-body:focus-within { scrollbar-width: thin; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; }
.nav-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: var(--draw-radius);
	text-decoration: none;
	color: var(--draw-fg);
	border: none;
	background: transparent;
	text-align: start;
	cursor: pointer;
	width: 100%;
}
.nav-item:hover { background: var(--draw-bg-quiet); }
.nav-item[aria-current="page"] { background: color-mix(in srgb, var(--draw-accent) 10%, transparent); font-weight: 600; }
.nav-item:focus-visible { outline: 2px solid var(--draw-accent); outline-offset: -2px; }
.nav-item svg { flex: none; fill: currentColor; }

.assistant-action {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 10px;
	border: none;
	border-radius: var(--draw-radius);
	background: var(--draw-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	margin: 0 0 4px;
}
.assistant-action:hover { background: var(--draw-accent-dark); }
.assistant-action:focus-visible { outline: 2px solid var(--draw-accent); outline-offset: 2px; }
.assistant-action svg { fill: currentColor; }

.sidebar-footer { border-block-start: 1px solid var(--draw-border); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.profile-control {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 6px;
	border: none;
	background: transparent;
	border-radius: var(--draw-radius);
	cursor: pointer;
	text-align: start;
}
.profile-control:hover { background: var(--draw-bg-quiet); }
.profile-control:focus-visible { outline: 2px solid var(--draw-accent); }
.profile-control .avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.profile-control .meta { min-width: 0; }
.profile-control .meta small { display: block; color: var(--draw-fg-muted); }
.profile-control .meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.appearance { display: flex; gap: 4px; }
.appearance button {
	flex: 1;
	border: 1px solid var(--draw-border);
	background: transparent;
	border-radius: 6px;
	padding: 5px 0;
	cursor: pointer;
	color: var(--draw-fg-muted);
}
.appearance button[aria-pressed="true"] { border-color: var(--draw-accent); color: var(--draw-accent); font-weight: 600; }
.appearance button:focus-visible { outline: 2px solid var(--draw-accent); }

.doc-links, .version-row { font-size: 12px; color: var(--draw-fg-muted); }
.doc-links { display: flex; gap: 4px; flex-wrap: wrap; }
.doc-links a { color: var(--draw-fg-muted); text-decoration: none; }
.doc-links a:hover { color: var(--draw-accent); text-decoration: underline; }

/* ---- Resize rails ---- */
.left-panel-resize-handle, .right-panel-resize-handle {
	position: absolute;
	inset-block: 0;
	width: 16px;
	cursor: col-resize;
	z-index: 30;
	background: transparent;
}
.left-panel-resize-handle { inset-inline-end: -8px; }
.right-panel-resize-handle { inset-inline-start: 0; }
.left-panel-resize-handle::after, .right-panel-resize-handle::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	translate: 0 -50%;
	width: 4px;
	height: 32px;
	border-radius: 2px;
	background: var(--draw-accent);
	opacity: 0;
}
.left-panel-resize-handle::after { inset-inline-start: 2px; }
.right-panel-resize-handle::after { inset-inline-start: 8px; }
.left-panel-resize-handle:hover::after, .left-panel-resize-handle:focus-visible::after, .left-panel-resize-handle.is-dragging::after,
.right-panel-resize-handle:hover::after, .right-panel-resize-handle:focus-visible::after, .right-panel-resize-handle.is-dragging::after { opacity: 1; }
.left-panel-resize-handle:focus-visible, .right-panel-resize-handle:focus-visible { outline: 2px solid var(--draw-accent); outline-offset: -2px; }
[hidden] { display: none !important; }

/* ---- Main ---- */
.main { overflow-y: auto; background: var(--draw-bg); }
.view { max-width: 880px; margin: 0 auto; padding: 32px 24px 64px; }
.view h1 { font-size: 24px; margin: 0 0 4px; }
.view h2 { font-size: 16px; margin: 32px 0 12px; }

.hero { min-height: 96px; margin-block-end: 24px; }
.hero .kicker { color: var(--draw-accent); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px; }
.hero p { color: var(--draw-fg-muted); font-size: 14px; margin: 4px 0 0; }

.journeys { display: flex; flex-direction: column; gap: 8px; }
.journey-button {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--draw-border);
	border-radius: var(--draw-radius);
	background: var(--draw-bg);
	cursor: pointer;
	text-align: start;
}
.journey-button:hover { border-color: var(--draw-accent); }
.journey-button:focus-visible { outline: 2px solid var(--draw-accent); outline-offset: 2px; }
.journey-button .ordinal { font-size: 18px; font-weight: 700; color: var(--draw-fg-muted); font-variant-numeric: tabular-nums; }
.journey-button.primary { border-color: var(--draw-accent); background: color-mix(in srgb, var(--draw-accent) 5%, var(--draw-bg)); }
.journey-button.primary .ordinal { color: var(--draw-accent); }
.journey-button .body strong { display: block; font-size: 14px; }
.journey-button .body span { color: var(--draw-fg-muted); }
.journey-button .chevron { margin-inline-start: auto; color: var(--draw-fg-muted); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.drawing-card {
	border: 1px solid var(--draw-border);
	border-radius: var(--draw-radius);
	background: var(--draw-bg);
	overflow: hidden;
	text-align: start;
	cursor: pointer;
	padding: 0;
}
.drawing-card:hover { border-color: var(--draw-accent); }
.drawing-card:focus-visible { outline: 2px solid var(--draw-accent); outline-offset: 2px; }
.drawing-card .thumb { aspect-ratio: 4 / 3; background: #fff; border-block-end: 1px solid var(--draw-border); display: flex; align-items: center; justify-content: center; color: var(--draw-fg-muted); }
.drawing-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.drawing-card .label { padding: 8px 10px; }
.drawing-card .label strong { display: block; font-size: 13px; }
.drawing-card .label span { color: var(--draw-fg-muted); font-size: 12px; }

.empty-state { border: 1px dashed var(--draw-border); border-radius: var(--draw-radius); padding: 32px; text-align: center; color: var(--draw-fg-muted); }

/* ---- Editor ---- */
.editor-view { max-width: none; padding: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.editor-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-block-end: 1px solid var(--draw-border);
	flex-wrap: wrap;
	background: var(--draw-bg);
}
.editor-toolbar input[type="text"] {
	font: inherit;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 6px 8px;
	width: 200px;
	background: transparent;
	color: var(--draw-fg);
}
.editor-toolbar input[type="text"]:hover, .editor-toolbar input[type="text"]:focus { border-color: var(--draw-border); outline: none; }
.editor-toolbar input[type="text"]:focus-visible { border-color: var(--draw-accent); }
.tool-group { display: flex; gap: 2px; border: 1px solid var(--draw-border); border-radius: var(--draw-radius); padding: 2px; }
.tool-button {
	border: none;
	background: transparent;
	border-radius: 6px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--draw-fg-muted);
}
.tool-button:hover { background: var(--draw-bg-quiet); color: var(--draw-fg); }
.tool-button[aria-pressed="true"] { background: color-mix(in srgb, var(--draw-accent) 12%, transparent); color: var(--draw-accent); }
.tool-button:focus-visible { outline: 2px solid var(--draw-accent); }
.tool-button svg { fill: currentColor; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--draw-fg); }
.swatch:focus-visible { outline: 2px solid var(--draw-accent); outline-offset: 1px; }
.size-slider { accent-color: var(--draw-accent); }
.toolbar-spacer { flex: 1; }
.save-button {
	border: none;
	border-radius: var(--draw-radius);
	background: var(--draw-accent);
	color: #fff;
	font-weight: 600;
	padding: 8px 16px;
	cursor: pointer;
}
.save-button:hover { background: var(--draw-accent-dark); }
.save-button:disabled { opacity: 0.5; cursor: default; }
.save-button:focus-visible { outline: 2px solid var(--draw-accent); outline-offset: 2px; }
.editor-status { color: var(--draw-fg-muted); font-size: 12px; min-width: 90px; }
.canvas-wrap { position: relative; overflow: hidden; background: #fff; }
.canvas-wrap canvas { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }

/* ---- Assistant panel ---- */
.assistant-panel {
	position: relative;
	width: var(--assist-w);
	border-inline-start: 1px solid var(--draw-border);
	background: var(--draw-bg);
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}
.assistant-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-block-end: 1px solid var(--draw-border); font-weight: 600; }
.assistant-head button { border: none; background: transparent; cursor: pointer; color: var(--draw-fg-muted); border-radius: 6px; width: 28px; height: 28px; }
.assistant-head button:hover { background: var(--draw-bg-quiet); }
.assistant-body { padding: 16px; overflow-y: auto; color: var(--draw-fg-muted); }
.assistant-body .notice { border: 1px solid var(--draw-border); border-radius: var(--draw-radius); padding: 16px; background: var(--draw-bg-quiet); color: var(--draw-fg); }

/* ---- Forms (profile, settings) ---- */
.field { margin: 0 0 16px; max-width: 400px; }
.field label { display: block; font-weight: 600; margin-block-end: 4px; }
.field input {
	width: 100%;
	font: inherit;
	padding: 8px 10px;
	border: 1px solid var(--draw-border);
	border-radius: 6px;
	background: var(--draw-bg);
	color: var(--draw-fg);
}
.field input:focus-visible { outline: 2px solid var(--draw-accent); border-color: var(--draw-accent); }
.field .help { color: var(--draw-fg-muted); font-size: 12px; margin-block-start: 4px; }
.form-actions { display: flex; gap: 8px; }
.button-secondary {
	border: 1px solid var(--draw-border);
	background: transparent;
	border-radius: var(--draw-radius);
	padding: 8px 16px;
	cursor: pointer;
}
.button-secondary:hover { border-color: var(--draw-accent); color: var(--draw-accent); }
.button-danger { border-color: var(--draw-danger); color: var(--draw-danger); }
.button-danger:hover { border-color: var(--draw-danger); color: var(--draw-danger); background: color-mix(in srgb, var(--draw-danger) 6%, transparent); }
.form-status { margin-block-start: 12px; color: var(--draw-fg-muted); }
.form-status.error { color: var(--draw-danger); }
.profile-avatar-preview { width: 96px; height: 96px; border-radius: 50%; margin-block-end: 16px; }

/* ---- Mobile ---- */
@media (max-width: 781px) {
	.app { grid-template-columns: minmax(0, 1fr); }
	.sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50; width: min(304px, 85vw); translate: -100% 0; transition: translate 0.2s; box-shadow: 0 0 24px rgba(0,0,0,0.15); }
	body.drawer-open .sidebar { translate: 0 0; }
	.left-panel-resize-handle, .right-panel-resize-handle, .sidebar-collapse { display: none; }
	.sidebar-restore { display: block; }
	.assistant-panel { position: fixed; inset: 0; width: auto; z-index: 60; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}