/* ==========================================================================
   Fractable — Figma-style UI, Flexoki colors
   Design tokens follow the Figma UI spec (bundle-decompiled):
   type: body-sm 9/14, body-md 11/16, body-lg 13/22, strong = w550
   radius: 5px controls/panels, 13px floating surfaces
   spacers: 0/4/8/12/16/24/32/40 · panels: 240px + 1px border
   ========================================================================== */

/* ---- Flexoki palette ---------------------------------------------------- */
:root {
	--flexoki-black: #100F0F;
	--flexoki-paper: #FFFCF0;

	--flexoki-50: #F2F0E5; --flexoki-100: #E6E4D9; --flexoki-150: #DAD8CE;
	--flexoki-200: #CECDC3; --flexoki-300: #B7B5AC; --flexoki-400: #9F9D96;
	--flexoki-500: #878580; --flexoki-600: #6F6E69; --flexoki-700: #575653;
	--flexoki-800: #403E3C; --flexoki-850: #343331; --flexoki-900: #282726;
	--flexoki-950: #1C1B1A;

	--red-100: #FFCABB; --red-200: #F89A8A; --red-300: #E8705F; --red-400: #D14D41; --red-500: #C03E35; --red-600: #AF3029; --red-700: #942822; --red-800: #6C201C; --red-850: #551B18;
	--orange-100: #FED3AF; --orange-200: #F9AE77; --orange-300: #EC8B49; --orange-400: #DA702C; --orange-500: #CB6120; --orange-600: #BC5215; --orange-700: #9D4310; --orange-800: #71320D;
	--yellow-100: #F6E2A0; --yellow-200: #ECCB60; --yellow-300: #DFB431; --yellow-400: #D0A215; --yellow-500: #BE9207; --yellow-600: #AD8301; --yellow-700: #8E6B01; --yellow-800: #664D01;
	--green-100: #DDE2B2; --green-200: #BEC97E; --green-300: #A0AF54; --green-400: #879A39; --green-500: #768D21; --green-600: #66800B; --green-700: #536907; --green-800: #3D4C07;
	--cyan-100: #BFE8D9; --cyan-200: #87D3C3; --cyan-300: #5ABDAC; --cyan-400: #3AA99F; --cyan-500: #2F968D; --cyan-600: #24837B; --cyan-700: #1C6C66; --cyan-800: #164F4A;
	--blue-100: #C6DDE8; --blue-200: #92BFDB; --blue-300: #66A0C8; --blue-400: #4385BE; --blue-500: #3171B2; --blue-600: #205EA6; --blue-700: #1A4F8C; --blue-800: #163B66;
	--purple-100: #E2D9E9; --purple-200: #C4B9E0; --purple-300: #A699D0; --purple-400: #8B7EC8; --purple-500: #735EB5; --purple-600: #5E409D; --purple-700: #4F3685; --purple-800: #3C2A62;
	--magenta-100: #FCCFDA; --magenta-200: #F4A4C2; --magenta-300: #E47DA8; --magenta-400: #CE5D97; --magenta-500: #B74583; --magenta-600: #A02F6F; --magenta-700: #87285E; --magenta-800: #641F46;
}

/* ---- Semantic tokens (dark = source design, light derived) --------------- */
body,
body.dark {
	--f-bg: var(--flexoki-black);        /* canvas paper */
	--f-bg-2: var(--flexoki-950);        /* app background */
	--f-ui: var(--flexoki-900);          /* panel background */
	--f-ui-2: var(--flexoki-850);        /* hover surface */
	--f-ui-3: var(--flexoki-800);        /* active surface */
	--f-stroke: #4B4A47;                 /* from the Figma design (base/stroke) */
	--f-stroke-soft: rgba(255, 252, 240, 0.1);
	--f-tx: var(--flexoki-200);
	--f-tx-2: var(--flexoki-500);
	--f-tx-3: var(--flexoki-700);
	--f-ghost-hover: rgba(255, 252, 240, 0.06);
	--f-ghost-press: rgba(255, 252, 240, 0.12);
	--f-accent: var(--green-400);
	--f-danger: var(--red-400);
	--f-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	color-scheme: dark;
}

body.light {
	--f-bg: var(--flexoki-paper);
	--f-bg-2: var(--flexoki-50);
	--f-ui: var(--flexoki-paper);
	--f-ui-2: var(--flexoki-50);
	--f-ui-3: var(--flexoki-100);
	--f-stroke: var(--flexoki-150);
	--f-stroke-soft: rgba(16, 15, 15, 0.09);
	--f-tx: var(--flexoki-black);
	--f-tx-2: var(--flexoki-600);
	--f-tx-3: var(--flexoki-300);
	--f-ghost-hover: rgba(16, 15, 15, 0.05);
	--f-ghost-press: rgba(16, 15, 15, 0.1);
	--f-accent: var(--green-600);
	--f-danger: var(--red-600);
	--f-shadow: 0 4px 14px rgba(16, 15, 15, 0.12);
	color-scheme: light;
}

/* Per-hue tokens: light 100 bg · 700/600/300 text, dark 800 bg · 200/500/700 text */
body .chip-red { --cc-bg: var(--red-100); --cc-tx: var(--red-700); --cc-tx-2: var(--red-600); --cc-tx-3: var(--red-300); --cc-solid: var(--red-400); }
body .chip-orange { --cc-bg: var(--orange-100); --cc-tx: var(--orange-700); --cc-tx-2: var(--orange-600); --cc-tx-3: var(--orange-300); --cc-solid: var(--orange-400); }
body .chip-yellow { --cc-bg: var(--yellow-100); --cc-tx: var(--yellow-700); --cc-tx-2: var(--yellow-600); --cc-tx-3: var(--yellow-300); --cc-solid: var(--yellow-400); }
body .chip-green { --cc-bg: var(--green-100); --cc-tx: var(--green-700); --cc-tx-2: var(--green-600); --cc-tx-3: var(--green-300); --cc-solid: var(--green-400); }
body .chip-cyan { --cc-bg: var(--cyan-100); --cc-tx: var(--cyan-700); --cc-tx-2: var(--cyan-600); --cc-tx-3: var(--cyan-300); --cc-solid: var(--cyan-400); }
body .chip-blue { --cc-bg: var(--blue-100); --cc-tx: var(--blue-700); --cc-tx-2: var(--blue-600); --cc-tx-3: var(--blue-300); --cc-solid: var(--blue-400); }
body .chip-purple { --cc-bg: var(--purple-100); --cc-tx: var(--purple-700); --cc-tx-2: var(--purple-600); --cc-tx-3: var(--purple-300); --cc-solid: var(--purple-400); }
body .chip-magenta { --cc-bg: var(--magenta-100); --cc-tx: var(--magenta-700); --cc-tx-2: var(--magenta-600); --cc-tx-3: var(--magenta-300); --cc-solid: var(--magenta-400); }

body.dark .chip-red { --cc-bg: var(--red-800); --cc-tx: var(--red-200); --cc-tx-2: var(--red-500); --cc-tx-3: var(--red-700); }
body.dark .chip-orange { --cc-bg: var(--orange-800); --cc-tx: var(--orange-200); --cc-tx-2: var(--orange-500); --cc-tx-3: var(--orange-700); }
body.dark .chip-yellow { --cc-bg: var(--yellow-800); --cc-tx: var(--yellow-200); --cc-tx-2: var(--yellow-500); --cc-tx-3: var(--yellow-700); }
body.dark .chip-green { --cc-bg: var(--green-800); --cc-tx: var(--green-200); --cc-tx-2: var(--green-500); --cc-tx-3: var(--green-700); }
body.dark .chip-cyan { --cc-bg: var(--cyan-800); --cc-tx: var(--cyan-200); --cc-tx-2: var(--cyan-500); --cc-tx-3: var(--cyan-700); }
body.dark .chip-blue { --cc-bg: var(--blue-800); --cc-tx: var(--blue-200); --cc-tx-2: var(--blue-500); --cc-tx-3: var(--blue-700); }
body.dark .chip-purple { --cc-bg: var(--purple-800); --cc-tx: var(--purple-200); --cc-tx-2: var(--purple-500); --cc-tx-3: var(--purple-700); }
body.dark .chip-magenta { --cc-bg: var(--magenta-800); --cc-tx: var(--magenta-200); --cc-tx-2: var(--magenta-500); --cc-tx-3: var(--magenta-700); }

/* selection highlight: brand accent (green), independent of course color */
body {
	--f-select-bg: var(--green-100);
	--f-select-tx: var(--green-700);
	--f-select-tx-2: var(--green-600);
	--f-select-tx-3: var(--green-300);
}
body.dark {
	--f-select-bg: var(--green-800);
	--f-select-tx: var(--green-200);
	--f-select-tx-2: var(--green-500);
	--f-select-tx-3: var(--green-700);
}

/* ---- Base --------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
	font-family: var(--font-ui);
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.055px;
	font-weight: 450;
	color: var(--f-tx);
	background: var(--f-bg-2);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow: hidden;
}

button {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

input, select, textarea { font: inherit; letter-spacing: inherit; color: var(--f-tx); }

::placeholder { color: var(--f-tx-3); opacity: 1; }

/* ---- Type tokens ---------------------------------------------------------
   Figma spec: body-small 9/14 +0.045 · body-medium 11/16 +0.055
   body-large 13/22 −0.032 · strong = 550 · mono variants w400 */
.t-sm        { font-size: 9px;  line-height: 14px; letter-spacing: 0.045px; font-weight: 450; }
.t-md        { font-size: 11px; line-height: 16px; letter-spacing: 0.055px; font-weight: 450; }
.t-md-strong { font-size: 11px; line-height: 16px; letter-spacing: 0.055px; font-weight: 550; }
.t-lg        { font-size: 13px; line-height: 22px; letter-spacing: -0.032px; font-weight: 450; }
.t-lg-strong { font-size: 13px; line-height: 22px; letter-spacing: -0.032px; font-weight: 550; }
.t-mono-sm   { font-family: var(--font-mono); font-size: 9px;  line-height: 14px; letter-spacing: 0.045px; font-weight: 400; }
.t-mono-md   { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.055px; font-weight: 400; }

:root {
	--font-content: -apple-system, BlinkMacSystemFont, "Inter", "IBM Plex Sans", Segoe UI, Helvetica, Arial, sans-serif;
	--font-ui: var(--font-content);
	--font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", "IBM Plex Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace;
}

/* ---- App shell ----------------------------------------------------------- */
#app {
	display: flex;
	height: 100vh;
	background: var(--f-bg-2);
}

.panel {
	width: 240px;
	flex-shrink: 0;
	background: var(--f-ui);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#sidebar { border-right: 1px solid var(--f-stroke); }
#details { border-left: 1px solid var(--f-stroke); overflow-y: auto; }

.divider { height: 1px; flex-shrink: 0; background: var(--f-stroke); }

/* 40px header / section rows (design: h-40, pl-16 pr-8) */
.panel-row {
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 2px;
	padding-left: 16px;
	padding-right: 8px;
}

.panel-row .spacer { flex: 1; }

/* ---- Icon button (Figma IconButton: 24px box, 5px radius, ghost) --------- */
.icon-btn {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	border-radius: 5px;
	color: var(--f-tx-2);
}
.icon-btn:hover { background: var(--f-ghost-hover); color: var(--f-tx); }
.icon-btn:active { background: var(--f-ghost-press); }
.icon-btn svg { display: block; }

#theme-toggle .icon-sun { display: none; }
body.dark #theme-toggle .icon-moon { display: none; }
body.dark #theme-toggle .icon-sun { display: block; }

/* ---- Text buttons (Figma Button: h24, pad 0 8, 11/16, 5px radius) -------- */
.btn {
	text-decoration: none;
	height: 24px;
	padding: 0 8px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-weight: 450;
}
.btn-secondary { border: 1px solid var(--f-stroke-soft); color: var(--f-tx); }
.btn-secondary:hover { background: var(--f-ghost-hover); }
.btn-secondary:active { background: var(--f-ghost-press); }
.btn-ghost { color: var(--f-tx-2); }
.btn-ghost:hover { background: var(--f-ghost-hover); color: var(--f-tx); }
.btn-danger { color: var(--f-danger); }
.btn-danger:hover { background: var(--f-ghost-hover); }

/* ---- Logo ----------------------------------------------------------------- */
.logo { height: 16px; width: auto; display: block; }
.logo-link { display: flex; align-items: center; border-radius: 5px; }
.logo-link:hover { opacity: 0.85; }
.logo-glyph path { fill: var(--f-ui); }

/* Fade-in build-up of the fractal glyph — keyframes exported from Figma (2s loop) */
@keyframes lg-in-50 { 0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); } 50%, 100% { opacity: 1; } }
@keyframes lg-in-40 { 0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); } 40%, 100% { opacity: 1; } }
@keyframes lg-in-35 { 0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); } 35%, 100% { opacity: 1; } }
@keyframes lg-in-30 { 0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); } 30%, 100% { opacity: 1; } }
@keyframes lg-in-25 { 0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); } 25%, 100% { opacity: 1; } }
@keyframes lg-in-20 { 0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); } 20%, 100% { opacity: 1; } }
@keyframes lg-in-15 { 0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); } 15%, 100% { opacity: 1; } }
@keyframes lg-in-10 { 0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); } 10%, 100% { opacity: 1; } }
@keyframes lg-in-5  { 0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); } 5%, 100% { opacity: 1; } }

.logo-glyph path:nth-child(1)  { animation: lg-in-50 2s linear 1; }
.logo-glyph path:nth-child(2)  { animation: lg-in-50 2s linear 1; }
.logo-glyph path:nth-child(3)  { animation: lg-in-40 2s linear 1; }
.logo-glyph path:nth-child(4)  { animation: lg-in-35 2s linear 1; }
.logo-glyph path:nth-child(5)  { animation: lg-in-30 2s linear 1; }
.logo-glyph path:nth-child(6)  { animation: lg-in-25 2s linear 1; }
.logo-glyph path:nth-child(7)  { animation: lg-in-20 2s linear 1; }
.logo-glyph path:nth-child(8)  { animation: lg-in-15 2s linear 1; }
.logo-glyph path:nth-child(9)  { animation: lg-in-10 2s linear 1; }
.logo-glyph path:nth-child(10) { animation: lg-in-5 2s linear 1; }

/* Wordmark shimmer — per-letter opacity dips, values exported from Figma */
@keyframes lw-1 { 0% { opacity: 1; animation-timing-function: cubic-bezier(.5,0,.5,1); } 25% { opacity: .44; animation-timing-function: cubic-bezier(.5,0,.5,1); } 100% { opacity: 1; } }
@keyframes lw-2 { 0% { opacity: 1; animation-timing-function: cubic-bezier(.5,0,.5,1); } 78.715% { opacity: .36; animation-timing-function: cubic-bezier(.5,0,.5,1); } 100% { opacity: 1; } }
@keyframes lw-3 { 0% { opacity: 1; animation-timing-function: cubic-bezier(.5,0,.5,1); } 53.136% { opacity: .45; animation-timing-function: cubic-bezier(.5,0,.5,1); } 100% { opacity: 1; } }
@keyframes lw-4 { 0% { opacity: 1; animation-timing-function: cubic-bezier(.5,0,.5,1); } 65.945% { opacity: .38; animation-timing-function: cubic-bezier(.5,0,.5,1); } 100% { opacity: 1; } }
@keyframes lw-5 { 0% { opacity: 1; animation-timing-function: cubic-bezier(.5,0,.5,1); } 78.715% { opacity: .42; animation-timing-function: cubic-bezier(.5,0,.5,1); } 100% { opacity: 1; } }
@keyframes lw-6 { 0% { opacity: 1; animation-timing-function: cubic-bezier(.5,0,.5,1); } 53.136% { opacity: .32; animation-timing-function: cubic-bezier(.5,0,.5,1); } 100% { opacity: 1; } }
@keyframes lw-7 { 0% { opacity: 1; animation-timing-function: cubic-bezier(.5,0,.5,1); } 35% { opacity: .35; animation-timing-function: cubic-bezier(.5,0,.5,1); } 100% { opacity: 1; } }
@keyframes lw-8 { 0% { opacity: 1; animation-timing-function: cubic-bezier(.5,0,.5,1); } 61.413% { opacity: .3; animation-timing-function: cubic-bezier(.5,0,.5,1); } 100% { opacity: 1; } }
@keyframes lw-9 { 0% { opacity: 1; animation-timing-function: cubic-bezier(.5,0,.5,1); } 43.395% { opacity: .4; animation-timing-function: cubic-bezier(.5,0,.5,1); } 100% { opacity: 1; } }

.logo-word path:nth-child(1) { animation: lw-1 2s linear 1; }
.logo-word path:nth-child(2) { animation: lw-2 2s linear 1; }
.logo-word path:nth-child(3) { animation: lw-3 2s linear 1; }
.logo-word path:nth-child(4) { animation: lw-4 2s linear 1; }
.logo-word path:nth-child(5) { animation: lw-5 2s linear 1; }
.logo-word path:nth-child(6) { animation: lw-6 2s linear 1; }
.logo-word path:nth-child(7) { animation: lw-7 2s linear 1; }
.logo-word path:nth-child(8) { animation: lw-8 2s linear 1; }
.logo-word path:nth-child(9) { animation: lw-9 2s linear 1; }

@media (prefers-reduced-motion: reduce) {
	.logo-glyph path, .logo-word path { animation: none; }
}

/* after the intro finishes, keep the logo static (also when re-shown later) */
body.logo-static .logo-glyph path,
body.logo-static .logo-word path { animation: none; }

/* ---- Sidebar: view switch ------------------------------------------------ */
.section-label {
	flex: 1;
	font-size: 11px;
	line-height: 16px;
	font-weight: 550;
	letter-spacing: 0.055px;
	color: var(--f-tx);
}

/* section rows are inset 8px, labels a further 8px (design: px-8 + pl-8) */
.section-row { padding-left: 8px; padding-right: 8px; }
.section-row .section-label { padding-left: 8px; }

.view-switch-wrap { padding: 0 16px 12px; flex-shrink: 0; }

.segmented {
	display: flex;
	background: var(--f-bg-2);
	border-radius: 5px;
	overflow: hidden;
}
.segmented button {
	flex: 1;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 5px;
	border: 0.5px solid transparent;
	color: var(--f-tx-2);
}
.segmented button svg { width: 16px; height: 16px; }
.segmented button:hover { color: var(--f-tx); }
.segmented button.active {
	background: var(--f-ui-3);
	border-color: var(--f-stroke);
	color: var(--f-tx);
}

/* ---- Sidebar: course list ------------------------------------------------ */
.courses-section {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 8px 12px;
	overflow-y: auto;
	flex-shrink: 1;
}

.courses-header { height: 40px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding-left: 8px; }

/* Figma-style find bar: replaces the Courses header row while active */
.find-row {
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 0 0 0;
}
.find-field {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	padding: 0 4px 0 6px;
	border: 1px solid var(--f-accent);
	border-radius: 5px;
	background: var(--f-ui-2);
	color: var(--f-tx-2);
}
.find-field svg { flex-shrink: 0; }
.find-field input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	outline: none;
	height: 100%;
}

.course-row {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 4px 8px;
	border-radius: 5px;
	text-align: left;
	color: var(--f-tx);
}
.course-row:hover { background: var(--f-ghost-hover); }
.course-row.selected { background: var(--f-select-bg); color: var(--f-select-tx); }
.course-row .name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.course-row .slot-tag {
	font-family: var(--font-mono);
	font-size: 9px;
	line-height: 14px;
	color: var(--f-tx-3);
	text-transform: uppercase;
	flex-shrink: 0;
}
.course-row.selected .slot-tag { color: var(--f-select-tx-3); }

.course-empty { padding: 4px 8px; color: var(--f-tx-3); }

/* ---- Export (left sidebar, Figma export-panel pattern) -------------------- */
.sidebar-bottom { margin-top: auto; flex-shrink: 0; }

.export-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 16px 16px;
}
.export-wrap .prop-select {
	flex: none;
	width: 100%;
}
.export-wrap .btn { width: 100%; }

@supports (appearance: base-select) {
	#export-format::picker(select) {
		position-area: block-start;
		margin-block-end: 4px;
	}
}


/* Collapsed sidebar → floating island: shared-element morph (View Transitions) */
#sidebar { view-transition-name: sidebar-shell; }
#sidebar-island { view-transition-name: sidebar-shell; }
#sidebar .logo { view-transition-name: sidebar-logo; }
#sidebar-island .logo { view-transition-name: sidebar-logo; }
#collapse-sidebar { view-transition-name: sidebar-toggle; }
#expand-sidebar { view-transition-name: sidebar-toggle; }

#details { view-transition-name: details-shell; }
#details-island { view-transition-name: details-shell; }
#collapse-details { view-transition-name: details-toggle; }
#expand-details { view-transition-name: details-toggle; }

::view-transition-group(sidebar-shell),
::view-transition-group(sidebar-logo),
::view-transition-group(sidebar-toggle),
::view-transition-group(details-shell),
::view-transition-group(details-toggle),
::view-transition-group(paper) {
	animation-duration: 280ms;
	animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
}

/* Collapsed sidebar → floating island (radius 13 = Figma floating surface) */
#sidebar-island {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 10;
	display: none;
	align-items: center;
	gap: 8px;
	padding: 8px 8px 8px 12px;
	background: var(--f-ui);
	border: 1px solid var(--f-stroke);
	border-radius: 13px;
	box-shadow: var(--f-shadow);
}
#details-island {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 10;
	display: none;
	align-items: center;
	padding: 8px;
	background: var(--f-ui);
	border: 1px solid var(--f-stroke);
	border-radius: 13px;
	box-shadow: var(--f-shadow);
}

body.sidebar-collapsed #sidebar { display: none; }
body.sidebar-collapsed #sidebar-island { display: flex; }
body.details-collapsed #details { display: none; }
body.details-collapsed #details-island { display: flex; }

/* ---- Canvas -------------------------------------------------------------- */
#canvas {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 68px 20px 20px;
}

.paper {
	view-transition-name: paper;
	width: 100%;
	height: 100%;
	background: var(--f-bg);
	border: 1px solid var(--f-stroke);
	border-radius: 8px;
	overflow: auto;
	padding: 16px;
}

/* ---- Timetable grid ------------------------------------------------------ */
.timetable {
	display: grid;
	grid-template-columns: 44px repeat(4, minmax(0, 1fr)) 24px repeat(2, minmax(0, 1fr));
	gap: 4px;
	min-width: 640px;
}

.tt-corner { }

.tt-time {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--f-tx-3);
	font-family: var(--font-mono);
	font-size: 9px;
	line-height: 14px;
	padding: 4px 0;
}

.tt-day {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--f-tx-2);
	font-weight: 550;
	font-size: 9px;
	line-height: 14px;
	letter-spacing: 0.27px; /* body-small-strong */
}

.tt-lunch {
	grid-row: 2 / span 5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--f-tx-3);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 1px;
	writing-mode: vertical-rl;
	text-transform: uppercase;
	border-left: 1px dashed var(--f-stroke-soft);
	border-right: 1px dashed var(--f-stroke-soft);
}

.tt-cell {
	min-height: 64px;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--f-stroke-soft);
	border-radius: 5px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 2px;
}

/* single-course cell: the cell itself becomes the colored block */
.tt-cell.occupied { background: var(--cc-bg); border-color: transparent; }
.tt-cell.occupied:hover, .tt-cell.occupied.selected { border-color: var(--cc-solid); }
.tt-cell.occupied .slot-letter { color: var(--cc-tx-2); }
.tt-cell.occupied .tt-chip,
.tt-cell.occupied .tt-chip:hover,
.tt-cell.occupied .tt-chip.selected {
	background: none;
	border-color: transparent;
	border-radius: 0;
}

.tt-cell .slot-letter {
	position: absolute;
	top: 3px;
	left: 5px;
	color: var(--f-tx-3);
	font-family: var(--font-mono);
	font-size: 9px;
	line-height: 14px;
	text-transform: uppercase;
	pointer-events: none;
}

.tt-chip {
	flex: 1;
	min-height: 0;
	border-radius: 4px;
	background: var(--cc-bg);
	color: var(--cc-tx);
	padding: 4px 6px;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid transparent;
}
.tt-chip:hover { border-color: var(--cc-solid); }
.tt-chip.selected { border-color: var(--cc-solid); }
.tt-chip .code { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-chip .cname {
	font-size: 9px;
	line-height: 14px;
	color: var(--cc-tx-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tt-chip.conflict { border-color: var(--f-danger); }

.tt-conflict-note {
	margin-top: 12px;
	color: var(--f-danger);
	font-size: 9px;
	line-height: 14px;
}

/* ---- Agenda view ---------------------------------------------------------- */
.agenda { max-width: 560px; margin: 0 auto; padding: 8px 4px; }

.agenda-day { margin-bottom: 20px; }
.agenda-day > h3 {
	font-size: 11px;
	line-height: 16px;
	font-weight: 550;
	letter-spacing: 0.055px;
	color: var(--f-tx);
	padding: 0 8px 6px;
	border-bottom: 1px solid var(--f-stroke-soft);
	margin-bottom: 6px;
}

.agenda-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 4px 8px;
	margin-bottom: 4px;
	border-radius: 5px;
	border: 1px solid transparent;
	text-align: left;
	background: var(--cc-bg);
}
.agenda-item:hover, .agenda-item.selected { border-color: var(--cc-solid); }
.agenda-item .a-name { color: var(--cc-tx); }
.agenda-item .a-time {
	font-family: var(--font-mono);
	font-size: 9px;
	line-height: 14px;
	color: var(--cc-tx-2);
	width: 88px;
	flex-shrink: 0;
}
.agenda-item .a-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-item .a-meta { color: var(--cc-tx-3); font-size: 9px; line-height: 14px; flex-shrink: 0; }

.agenda-empty { color: var(--f-tx-3); padding: 2px 8px; }

/* ---- Details panel -------------------------------------------------------- */
.panel-title {
	font-size: 13px;
	line-height: 22px;
	font-weight: 550;
	letter-spacing: -0.032px;
	white-space: nowrap;
}

.details-empty {
	padding: 24px 16px;
	color: var(--f-tx-3);
	text-align: center;
}
.details-empty p { margin-bottom: 8px; }

.prop-section { padding: 4px 0 12px; }

.prop-section-title {
	height: 32px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	font-weight: 550;
	color: var(--f-tx);
}

.prop-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	margin: 4px 0;
	min-height: 24px;
}

.prop-input, .prop-select {
	flex: 1;
	min-width: 0;
	height: 24px;
	padding: 0 7px;
	border-radius: 5px;
	border: 1px solid var(--f-stroke);
	background: var(--f-ui-2);
	outline: none;
}
.prop-input:focus, .prop-select:focus { border-color: var(--f-accent); }

.prop-select { cursor: pointer; }

/* ---- Dropdowns (HTML customizable select — no JS) -------------------------
   Figma menu spec: 5px radius, body-medium 11/16, 24px rows, panel bg + stroke.
   Falls back to the native picker where `appearance: base-select` is
   unsupported; the closed button is styled everywhere. */
select { appearance: none; -webkit-appearance: none; }

@supports (appearance: base-select) {
	select, ::picker(select) { appearance: base-select; }

	select {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	select::picker-icon {
		content: "";
		width: 8px;
		height: 8px;
		flex-shrink: 0;
		margin-left: auto;
		background: currentColor;
		-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" fill="none"><path d="M2 3l2 2 2-2" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
		mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" fill="none"><path d="M2 3l2 2 2-2" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
		color: var(--f-tx-2);
	}

	::picker(select) {
		background: var(--f-ui);
		border: 1px solid var(--f-stroke);
		border-radius: 5px;
		box-shadow: var(--f-shadow);
		padding: 4px;
		margin: 2px 0;
		min-width: anchor-size(self-inline);
	}

	select option {
		display: flex;
		align-items: center;
		position: relative;
		min-height: 24px;
		padding: 4px 8px 4px 24px;
		border-radius: 4px;
		font-size: 11px;
		line-height: 16px;
		letter-spacing: 0.055px;
		font-weight: 450;
		color: var(--f-tx);
		background: none;
	}
	select option:hover,
	select option:focus-visible {
		background: var(--f-select-bg);
		color: var(--f-select-tx);
		outline: none;
	}
	/* Figma menus: checkmark in a fixed left gutter */
	select option::checkmark {
		position: absolute;
		left: 6px;
		top: 50%;
		transform: translateY(-50%);
		color: inherit;
	}
}

textarea.prop-input {
	height: auto;
	min-height: 48px;
	padding: 4px 7px;
	resize: vertical;
	line-height: 16px;
}

.prop-hint {
	padding: 2px 16px 0 84px;
	color: var(--f-tx-3);
	font-size: 9px;
	line-height: 14px;
}
.prop-hint.full { padding-left: 16px; }

/* disclosure rows: "+ Custom dates", "+ Add note" */
.disclose {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 2px 8px;
	padding: 4px 8px;
	border-radius: 5px;
	color: var(--f-tx-2);
	width: calc(100% - 16px);
	text-align: left;
}
.disclose:hover { background: var(--f-ghost-hover); color: var(--f-tx); }
.disclose svg { flex-shrink: 0; }
.disclose[data-open="1"] .di-v { display: none; }

/* color swatches: circles; selected ring = the hue's secondary accent
   (flexoki: light 600 fill / 400 ring, dark 400 fill / 600 ring) */
.swatches { display: flex; gap: 8px; padding: 4px 16px; flex-wrap: wrap; }
.swatch {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: none;
}
.swatch:hover { transform: scale(1.12); }
.swatch.selected { outline: 1.5px solid var(--sw2); outline-offset: 1.5px; }
.swatch-red { background: var(--red-600); --sw2: var(--red-400); }
.swatch-orange { background: var(--orange-600); --sw2: var(--orange-400); }
.swatch-yellow { background: var(--yellow-600); --sw2: var(--yellow-400); }
.swatch-green { background: var(--green-600); --sw2: var(--green-400); }
.swatch-cyan { background: var(--cyan-600); --sw2: var(--cyan-400); }
.swatch-blue { background: var(--blue-600); --sw2: var(--blue-400); }
.swatch-purple { background: var(--purple-600); --sw2: var(--purple-400); }
.swatch-magenta { background: var(--magenta-600); --sw2: var(--magenta-400); }
body.dark .swatch-red { background: var(--red-400); --sw2: var(--red-600); }
body.dark .swatch-orange { background: var(--orange-400); --sw2: var(--orange-600); }
body.dark .swatch-yellow { background: var(--yellow-400); --sw2: var(--yellow-600); }
body.dark .swatch-green { background: var(--green-400); --sw2: var(--green-600); }
body.dark .swatch-cyan { background: var(--cyan-400); --sw2: var(--cyan-600); }
body.dark .swatch-blue { background: var(--blue-400); --sw2: var(--blue-600); }
body.dark .swatch-purple { background: var(--purple-400); --sw2: var(--purple-600); }
body.dark .swatch-magenta { background: var(--magenta-400); --sw2: var(--magenta-600); }

.export-buttons { display: flex; flex-direction: column; gap: 4px; padding: 4px 16px; }
.export-buttons .btn { width: 100%; }

/* ---- Shortcuts ------------------------------------------------------------- */
kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 4px;
	border: 1px solid var(--f-stroke);
	background: var(--f-ui-2);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.045px;
	color: var(--f-tx-2);
}

.details-footer {
	margin-top: auto;
	flex-shrink: 0;
	padding: 8px;
}
.details-footer .btn { width: 100%; justify-content: flex-start; gap: 4px; }
.details-footer .btn span { margin-left: 4px; }

#shortcuts-dialog { width: 300px; padding: 0; }
.dlg-head {
	position: relative;
	padding: 16px 48px 0 16px;
}
.dlg-head .panel-title { line-height: 24px; }
.dlg-head .icon-btn {
	position: absolute;
	top: 16px;
	right: 12px;
}
.dlg-head .icon-btn svg { width: 16px; height: 16px; }
.dlg-head .icon-btn:focus,
.dlg-head .icon-btn:focus-visible { outline: none; }
.dlg-head .spacer { flex: 1; }
.sc-list { padding: 8px 8px 12px; }
.sc-row {
	display: flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 8px;
	border-radius: 5px;
}
.sc-row span:first-child { flex: 1; }
.sc-row .keys { display: inline-flex; gap: 3px; }
kbd svg { display: block; }

#import-dialog { width: 300px; padding: 0; }
.import-body { padding: 8px 16px 16px; }
.import-steps {
	margin: 0;
	padding-left: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--f-tx-2);
}
.import-steps li::marker { color: var(--f-tx-3); }
.import-steps strong { font-weight: 550; color: var(--f-tx); }
.import-steps a:not(.btn) { color: var(--f-tx); text-decoration: underline; }
.import-steps .btn { display: flex; width: 100%; margin-top: 4px; cursor: grab; }

/* ---- Dialog --------------------------------------------------------------- */
dialog {
	margin: auto;
	background: var(--f-ui);
	color: var(--f-tx);
	border: 1px solid var(--f-stroke);
	border-radius: 13px;
	box-shadow: var(--f-shadow);
	padding: 16px;
	width: 260px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog p { margin-bottom: 16px; font-size: 11px; line-height: 16px; }
dialog .dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; }
#confirm-ok {
	background: var(--f-danger);
	color: var(--flexoki-paper);
}
#confirm-ok:hover { opacity: 0.9; background: var(--f-danger); }
#confirm-ok kbd {
	background: rgba(255, 252, 240, 0.22);
	border-color: transparent;
	color: var(--flexoki-paper);
}
.dlg-buttons .btn { padding-right: 4px; }
.dlg-buttons .btn:focus,
.dlg-buttons .btn:focus-visible { outline: none; }

/* ---- Scrollbars (panel-quiet) --------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--f-stroke); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Small screens: stack panels ------------------------------------------ */
@media (max-width: 820px) {
	body { overflow: auto; overscroll-behavior-y: none; }
	#app { flex-direction: column; height: auto; }
	.panel { width: 100%; border: none; border-bottom: 1px solid var(--f-stroke); }
	#sidebar { border-right: none; }
	#details { border-left: none; border-right: none; border-top: 1px solid var(--f-stroke); overflow: visible; }
	#canvas { padding: 12px; }
	.paper { overflow-x: auto; height: auto; }
	.timetable { min-width: 560px; }
	.tt-cell { min-height: 52px; }

	/* the sidebar never collapses on small screens */
	#collapse-sidebar { display: none; }
	#collapse-details { display: none; }
	#sidebar-island, #details-island { display: none !important; }
	body.sidebar-collapsed #sidebar { display: flex; }
	body.details-collapsed #details { display: flex; }
	#canvas { padding: 12px; }

	.courses-section { max-height: 40vh; }
	.sidebar-bottom, .details-footer { margin-top: 0; }
	.export-wrap .btn, .btn { min-height: 32px; }
	dialog { width: min(300px, calc(100vw - 32px)); }
}

/* ---- Print ----------------------------------------------------------------- */
@media print {
	@page { margin: 0; }
	.paper::before {
		content: "Timetable";
		display: block;
		text-align: center;
		font-size: 20px;
		line-height: 28px;
		font-weight: 550;
		letter-spacing: -0.3px;
		margin: 4px 0 16px;
	}
	body { overflow: visible; background: white; }
	#sidebar, #details, #sidebar-island, #details-island { display: none !important; }
	#app { height: 100vh; background: white; }
	#canvas { padding: 10mm; height: 100%; align-items: center; justify-content: center; }
	.paper {
		border: none;
		background: white;
		width: auto;
		height: auto;
		overflow: visible;
	}
	.timetable { min-width: 0; }
}