/* =====================================================================
   TalkingDraft skin — one place for the look of the webapp.
   Colours come from the FigCraft UI kit ("shadcn colors" collection):
     - default (no data-theme)  = the "talkingdraft" mode (dark, branded)
     - [data-theme="light"]     = the kit's light mode (neutral placeholder;
                                  a branded light theme is still to be designed)
   Classes are all prefixed "td-" so nothing here changes an existing page
   until a page (or utils.js) opts in.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
	/* general */
	--td-background: #150D33;
	--td-foreground: #FFFFFE;
	--td-primary: #FFD800;
	--td-primary-foreground: #1A1A2E;
	--td-secondary: #38385A;
	--td-secondary-foreground: #FFFFFE;
	--td-accent: #2D334A;
	--td-accent-foreground: #FFFFFE;
	--td-muted: #1C1640;
	--td-muted-foreground: #8E9BB8;
	--td-destructive: #F87171;
	--td-border: #38385A;
	--td-input: #38385A;
	--td-card: #272344;
	--td-card-foreground: #FFFFFE;
	--td-popover: #272344;
	--td-popover-foreground: #FFFFFE;
	--td-ring: #FFD800;
	--td-ring-error: #7F1D1D;
	/* sidebar / page shell */
	--td-sidebar: #0E0726;
	--td-sidebar-foreground: #BAE8E8;
	--td-sidebar-accent: #272344;
	--td-sidebar-accent-foreground: #FFD800;
	--td-sidebar-primary: #FFD800;
	--td-sidebar-primary-foreground: #1A1A2E;
	--td-sidebar-border: #272344;
	/* TalkingDraft extras used across the designs */
	--td-page: #0E0726;          /* outermost page background */
	--td-teal: #BAE8E8;          /* section labels, links */
	--td-growth: #2CD83D;
	--td-friction: #F87171;
	/* shape + type */
	--td-radius-sm: 6px;
	--td-radius: 8px;
	--td-radius-lg: 12px;
	--td-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--td-font-script: 'Courier Prime', 'Courier New', monospace;
}

[data-theme="light"] {
	--td-background: #FFFFFF;
	--td-foreground: #000000;
	--td-primary: #171717;
	--td-primary-foreground: #FFFFFF;
	--td-secondary: #F5F5F5;
	--td-secondary-foreground: #171717;
	--td-accent: #F5F5F5;
	--td-accent-foreground: #000000;
	--td-muted: #F5F5F5;
	--td-muted-foreground: #737373;
	--td-destructive: #DC2626;
	--td-border: #E5E5E5;
	--td-input: #E5E5E5;
	--td-card: #FFFFFF;
	--td-card-foreground: #0A0A0A;
	--td-popover: #FFFFFF;
	--td-popover-foreground: #0A0A0A;
	--td-ring: #D4D4D4;
	--td-ring-error: #FECACA;
	--td-sidebar: #FAFAFA;
	--td-sidebar-foreground: #404040;
	--td-sidebar-accent: #F5F5F5;
	--td-sidebar-accent-foreground: #171717;
	--td-sidebar-primary: #404040;
	--td-sidebar-primary-foreground: #FFFFFF;
	--td-sidebar-border: #E5E5E5;
	--td-page: #FAFAFA;
	--td-teal: #0F766E;
}

/* ---------- type ---------- */
.td-font { font-family: var(--td-font); }
.td-script { font-family: var(--td-font-script); }
.td-label {            /* small caps section label, e.g. SHARE WITH A FRIEND */
	font-family: var(--td-font);
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--td-teal);
}
.td-muted { color: var(--td-muted-foreground); }
.td-link { color: var(--td-teal); text-decoration: none; cursor: pointer; }
.td-link:hover { color: var(--td-primary); }

/* ---------- buttons ---------- */
.td-btn, .td-btn-primary, .td-btn-ghost {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font-family: var(--td-font); font-size: 13px; font-weight: 600; line-height: 1.2;
	padding: 6px 12px; border-radius: var(--td-radius);
	border: 1px solid transparent; cursor: pointer; white-space: nowrap;
	transition: background-color .15s, border-color .15s, color .15s;
}
.td-btn { background: transparent; color: var(--td-secondary-foreground); border-color: #5A5F80; }
.td-btn:hover { border-color: var(--td-primary); }
.td-btn-primary { background: var(--td-primary); color: var(--td-primary-foreground); }
.td-btn-primary:hover { filter: brightness(1.08); }
.td-btn-ghost { background: transparent; color: var(--td-foreground); }
.td-btn-ghost:hover { background: var(--td-sidebar-accent); }
.td-btn:focus-visible, .td-btn-primary:focus-visible, .td-btn-ghost:focus-visible, .td-icon-btn:focus-visible {
	outline: 2px solid var(--td-ring); outline-offset: 2px;
}
.td-btn[disabled], .td-btn-primary[disabled] { opacity: .45; cursor: not-allowed; }

.td-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; min-height: 32px; padding: 4px;
	border-radius: var(--td-radius); border: 1px solid #5A5F80;
	background: transparent; color: var(--td-foreground); cursor: pointer;
}
.td-icon-btn:hover { border-color: var(--td-primary); }

/* ---------- inputs ---------- */
.td-input {
	font-family: var(--td-font); font-size: 13px;
	padding: 6px 10px; border-radius: var(--td-radius);
	background: var(--td-muted); color: var(--td-foreground);
	border: 1px solid var(--td-input);
}
.td-input::placeholder { color: var(--td-muted-foreground); font-style: italic; }
.td-input:focus { outline: none; border-color: var(--td-ring); }

/* ---------- surfaces ---------- */
.td-card {
	background: var(--td-card); color: var(--td-card-foreground);
	border: 1px solid var(--td-border); border-radius: var(--td-radius-lg);
}
.td-panel {
	background: var(--td-muted); color: var(--td-foreground);
	border: 1px solid var(--td-border); border-radius: var(--td-radius-lg);
}

/* ---------- menus (user menu, Help menu, story menu) ---------- */
.td-menu {
	position: absolute; min-width: 220px; padding: 6px;
	background: var(--td-popover); color: var(--td-popover-foreground);
	border: 1px solid var(--td-border); border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.td-menu-item {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 10px; border-radius: var(--td-radius-sm);
	font-family: var(--td-font); font-size: 13px; color: var(--td-popover-foreground);
	cursor: pointer; text-decoration: none;
}
.td-menu-item:hover { background: var(--td-secondary); }
.td-menu-item.is-disabled { color: var(--td-muted-foreground); cursor: default; }
.td-menu-item.is-disabled:hover { background: transparent; }
.td-menu-divider { height: 1px; margin: 4px 0; background: var(--td-border); }
.td-menu-label {
	padding: 7px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em;
	text-transform: uppercase; color: var(--td-muted-foreground);
}

/* ---------- switch (segmented control: This scene | Whole script, etc.) ---------- */
.td-switch {
	display: inline-flex; gap: 2px; padding: 3px;
	background: var(--td-muted); border-radius: var(--td-radius);
}
.td-switch-item {
	padding: 6px 14px; border-radius: var(--td-radius-sm);
	font-family: var(--td-font); font-size: 12px; font-weight: 500;
	color: var(--td-muted-foreground); background: transparent; border: 0; cursor: pointer;
}
.td-switch-item.is-active { background: var(--td-secondary); color: var(--td-foreground); font-weight: 600; }

/* ---------- pop-ups ---------- */
.td-scrim { position: fixed; inset: 0; background: rgba(5,2,16,.6); z-index: 40; }
.td-dialog {
	background: var(--td-popover); color: var(--td-popover-foreground);
	border: 1px solid var(--td-primary); border-radius: var(--td-radius-lg);
	box-shadow: 0 12px 32px rgba(0,0,0,.5); padding: 20px;
}
@media (max-width: 600px) {
	/* phones: dialogs become bottom sheets */
	.td-dialog.td-sheet-on-phone {
		position: fixed; left: 0; right: 0; bottom: 0; border: 0;
		border-radius: 16px 16px 0 0; padding: 12px 20px 28px;
	}
}

/* ---------- solid faces (used by utils.js baseBtn / iconBtn) ----------
   Filled so the existing td-depth-* ledge + press-in effect still reads as a raised key. */
.td-btn-solid {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font-family: var(--td-font); font-size: 13px; font-weight: 600; line-height: 1.2;
	padding: 5px 12px; border-radius: var(--td-radius); white-space: nowrap; cursor: pointer;
	background: var(--td-secondary); color: var(--td-secondary-foreground);
	border: 1px solid #5A5F80;
	transition: background-color .15s, border-color .15s;
}
.td-btn-solid:hover { border-color: var(--td-primary); }
.td-icon-btn-solid {
	display: flex; align-items: center; cursor: pointer;
	padding: 4px 8px; border-radius: var(--td-radius);
	background: var(--td-secondary); color: var(--td-secondary-foreground);
	border: 1px solid #5A5F80;
}
.td-icon-btn-solid:hover { border-color: var(--td-primary); }

/* ---------- background helpers (replace the old hand-typed #2D334A) ---------- */
.td-bg-page { background-color: var(--td-background); }
.td-bg-popover { background-color: var(--td-popover); }
.td-bg-field { background-color: var(--td-muted); }

/* ---------- top bar icon buttons (no border; as in the design's top bar) ---------- */
.td-icon-btn-ghost {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0;
	border-radius: var(--td-radius); border: 0;
	background: transparent; color: var(--td-foreground); cursor: pointer;
	transition: background-color .15s, color .15s;
}
.td-icon-btn-ghost:hover { background: var(--td-sidebar-accent); color: var(--td-primary); }
.td-icon-btn-ghost:focus-visible { outline: 2px solid var(--td-ring); outline-offset: 2px; }

/* ---------- story page top bar: title + Outline | Dictate tabs (Phase 2.4) ---------- */
.td-story-title {
	display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 72px;
	padding: 6px 8px; border: 0; border-radius: var(--td-radius); background: transparent; cursor: pointer;
	font-family: var(--td-font); font-size: 15px; font-weight: 600; color: var(--td-foreground);
}
.td-story-title:hover { background: var(--td-sidebar-accent); }
.td-tabs { display: flex; flex-shrink: 0; align-items: center; gap: 2px; margin: 0 8px; }
.td-tab {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
	border: 0; border-radius: var(--td-radius); background: transparent; cursor: pointer;
	font-family: var(--td-font); font-size: 13px; font-weight: 500; color: var(--td-foreground);
	transition: background-color .15s, color .15s;
}
.td-tab:hover { background: var(--td-sidebar-accent); }
.td-tab.is-on { color: var(--td-primary); background: rgba(255,216,0,0.08); }
.td-tab:focus-visible { outline: 2px solid var(--td-ring); outline-offset: 2px; }

/* ---------- desktop sidebar on the story page (Phase 2.5) ---------- */
.td-sidebar {
	position: fixed; top: 0; bottom: 0; left: 0; width: 256px; z-index: 25;
	display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; overflow-y: auto;
	background: var(--td-sidebar); border-right: 1px solid var(--td-sidebar-border); font-family: var(--td-font);
}
@media (max-width: 1023px) { .td-sidebar { display: none; } }
@media (min-width: 1024px) {
	body:has(.td-sidebar) .grow.grid { margin-left: 256px; }
	body.two-col-mode:has(.td-sidebar) .grow.grid { width: calc(100% - max(38%, 400px) - 256px) !important; }
	body:has(.td-sidebar.is-rail) .grow.grid { margin-left: 56px; }
	body.two-col-mode:has(.td-sidebar.is-rail) .grow.grid { width: calc(100% - max(38%, 400px) - 56px) !important; }
	/* the top bar starts right of the sidebar, and its own logo hides (the sidebar carries it) */
	body:has(.td-sidebar) .td-appbar { margin-left: 256px; }
	body:has(.td-sidebar.is-rail) .td-appbar { margin-left: 56px; }
	body:has(.td-sidebar) .td-appbar-logo { display: none; }
}
/* logo + « / » (Oct 27) */
.td-sb-logo { display: flex; align-items: center; height: 28px; padding: 0 2px; flex-shrink: 0; }
.td-sb-logo-long { height: 28px; width: auto; }
.td-sb-logo-icon { display: none; width: 36px; height: 36px; }
.td-sb-toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 4px 0 6px;
	border: 0; border-radius: var(--td-radius); background: transparent; cursor: pointer; color: var(--td-foreground); opacity: .75; flex-shrink: 0;
}
.td-sb-toggle:hover { background: var(--td-sidebar-accent); color: var(--td-primary); opacity: 1; }
.td-sb-toggle:focus-visible { outline: 2px solid var(--td-ring); outline-offset: 2px; }
.td-sb-chev-r { display: none; }
.td-sidebar:not(.is-rail) .td-sb-toggle { align-self: flex-end; }
/* collapsed rail: 56px, icons only (the title attribute gives each one a tooltip) */
.td-sidebar.is-rail { width: 56px; padding: 10px 0 16px; align-items: center; gap: 6px; }
.td-sidebar.is-rail .td-sb-logo { height: 36px; padding: 0; }
.td-sidebar.is-rail .td-sb-logo-long, .td-sidebar.is-rail .td-sb-chev-l,
.td-sidebar.is-rail .td-sb-switch, .td-sidebar.is-rail .td-sb-label, .td-sidebar.is-rail .td-sb-sections,
.td-sidebar.is-rail .td-sb-item > span { display: none; }
.td-sidebar.is-rail .td-sb-logo-icon, .td-sidebar.is-rail .td-sb-chev-r { display: block; }
.td-sidebar.is-rail .td-sb-toggle { width: 36px; height: 28px; margin: 0 0 8px; }
.td-sidebar.is-rail .td-sb-item { width: 36px; height: 36px; padding: 0; justify-content: center; }
.td-sb-story {
	display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; margin-bottom: 8px;
	border: 0; border-radius: var(--td-radius); background: transparent; cursor: pointer; color: var(--td-foreground);
}
.td-sb-story:hover { background: var(--td-sidebar-accent); }
.td-sb-label { padding: 12px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--td-foreground); }
.td-sb-item {
	display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px;
	border: 0; border-radius: var(--td-radius); background: transparent; cursor: pointer; text-decoration: none;
	font-size: 13px; color: var(--td-sidebar-foreground);
}
.td-sb-item:hover { background: var(--td-sidebar-accent); }
.td-sb-item.is-on { background: var(--td-sidebar-accent); color: var(--td-sidebar-accent-foreground); }
.td-sb-sections { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 18px; padding-left: 8px; border-left: 1px solid var(--td-sidebar-border); }
.td-sb-sub {
	display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px;
	border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 12px; color: var(--td-sidebar-foreground);
}
.td-sb-sub:hover { background: var(--td-sidebar-accent); }
.td-sb-sub.is-on { background: var(--td-sidebar-accent); color: var(--td-foreground); }
.td-sb-count { flex-shrink: 0; font-size: 11px; color: var(--td-muted-foreground); font-variant-numeric: tabular-nums; }
.td-sb-sub.is-on .td-sb-count { color: var(--td-primary); }

/* ---------- phone ☰ menu (Phase 2.6) ---------- */
.td-phone-sheet {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(288px, 85vw); z-index: 41;
	display: flex; flex-direction: column; padding: 8px 6px 20px; overflow-y: auto;
	background: var(--td-popover); color: var(--td-popover-foreground);
	border-left: 1px solid var(--td-border); box-shadow: -8px 0 24px rgba(0,0,0,.45);
	animation: td-sheet-in .18s ease-out;
}
@keyframes td-sheet-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.td-phone-sheet .td-menu-item { min-height: 42px; }
@media (max-width: 639px) {
	.td-tabs { display: none; }
	.td-story-title { pointer-events: none; }	/* story actions live in the ☰ menu on phones */
	.td-appbar > .td-appbar-right { flex: none; }
	/* Dictate pop-up: fills the screen right under the 56px top bar; slug row on top, buttons at the bottom,
	   only the middle scrolls (100vh is taller than the visible screen on phones, so heights come from the fixed box) */
	body:not(.two-col-mode) .td-dlg { top: 56px; }
	.td-dlg > .td-dlg-wrap { display: block; height: 100%; min-height: 0; padding: 0; }
	body:not(.two-col-mode) .td-dlg-panel { display: block; height: 100%; max-height: none; border-radius: 0; margin: 0; overflow: hidden; }
	.td-dlg .td-dlg-body { flex: 1 1 auto; min-height: 0; }	/* only as wide as the ☰, so the title gets the rest */
	.td-story-title > svg:last-child { display: none; }
	.td-story-title > svg:first-child { display: none; }	/* no story-actions icon: the title is not a button on phones */
}

/* ---------- Script column (Phase 3) ---------- */
.td-scriptcol { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
/* the column's flex boxes must be allowed to shrink, or the script grows past the window instead of scrolling */
.td-dlg-panel > div, .td-dlg .td-dlg-body { min-height: 0; }
.td-script-hdr { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.td-script-hbtn {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--td-radius);
	border: 1px solid var(--td-border); background: transparent; color: var(--td-foreground);
	font-family: var(--td-font); font-size: 12px; font-weight: 500; cursor: pointer;
}
.td-script-hbtn:hover { border-color: var(--td-primary); }
.td-script-bar { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: var(--td-radius); background: var(--td-secondary); }
.td-script-bar-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--td-font-script); font-weight: 700; font-size: 13px; text-transform: uppercase; }
.td-script-body {
	flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px; border-radius: var(--td-radius);
	background: var(--td-sidebar); border: 1px solid var(--td-border);
	font-family: var(--td-font-script); font-size: 13px; line-height: 1.45; color: var(--td-foreground);
}
@media (min-width: 640px) { body:not(.two-col-mode) .td-script-body { max-height: 55vh; } }
.td-script-body textarea, .td-script-body input { background: var(--td-secondary) !important; border-color: var(--td-border) !important; font-family: inherit; }
.td-script-head { font-weight: 700; text-transform: uppercase; margin: 0 0 6px; padding-top: 4px; }
.td-script-div { height: 1px; background: var(--td-border); margin: 14px 0; }
.td-script-empty { font-family: var(--td-font); font-style: italic; font-size: 12px; color: var(--td-muted-foreground); cursor: pointer; margin: 4px 0; }
.td-script-empty:hover { color: var(--td-foreground); }
.td-script-next { display: block; margin: 14px 0 2px auto; border: 0; background: transparent; cursor: pointer; font-family: var(--td-font); font-size: 12px; color: var(--td-sidebar-foreground); }
.td-script-next:hover { color: var(--td-primary); }
.td-locked-bar {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--td-border); border-radius: var(--td-radius);
	font-family: var(--td-font); font-size: 12px; color: var(--td-muted-foreground); text-decoration: none; flex-shrink: 0;
}
.td-locked-bar:hover { color: var(--td-foreground); }
.td-pill { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--td-secondary); font-size: 11px; font-weight: 600; color: var(--td-foreground); }

/* ---------- Script column follows the audio (Phase 3b) ---------- */
.td-script-body { padding-left: 30px; }
.td-script-body .td-line { position: relative; border-radius: 4px; }
.td-script-body .td-line.is-playing { background: rgba(255, 216, 0, .08); box-shadow: inset 0 0 0 1.5px var(--td-primary); }
.td-line-play {
	position: absolute; left: -24px; top: 8px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; background: transparent; color: var(--td-muted-foreground); opacity: .5; cursor: pointer;
}
.td-line:hover .td-line-play, .td-line.is-playing .td-line-play { opacity: 1; color: var(--td-primary); }

/* ---------- Characters column (Phase 4a) ---------- */
.td-chars { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.td-chars-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px 20px; }
.td-chars-status { font-size: 12px; line-height: 1.6; color: var(--td-muted-foreground); margin-top: 12px; }
.td-chars-status b { font-weight: 500; color: var(--td-primary); }
.td-chars-btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--td-radius);
	border: 1px solid #5A5F80; background: transparent; color: var(--td-foreground);
	font-family: var(--td-font); font-size: 12px; font-weight: 500; cursor: pointer;
}
.td-chars-btn:hover { border-color: var(--td-primary); }
.td-chars-btn.is-primary { background: var(--td-primary); border-color: var(--td-primary); color: #1A1A2E; font-weight: 600; }
.td-cast-card { background: var(--td-secondary); border: 1px solid var(--td-border); border-radius: 10px; margin-bottom: 12px; }
.td-cast-bar { height: 4px; border-radius: 10px 10px 0 0; background: var(--tc); opacity: .85; }
.td-cast-body { padding: 14px 16px; }
.td-cast-face {
	width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--tc); background: var(--td-sidebar);
	display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--tc);
}
.td-cast-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.td-cast-count { flex-shrink: 0; font-size: 10px; font-weight: 500; color: var(--td-muted-foreground); }
.td-cast-type { margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--tc); white-space: pre; }
.td-cast-wound { margin-top: 3px; font-size: 11px; font-style: italic; color: var(--td-muted-foreground); }
.td-cast-none { margin-top: 3px; font-size: 11px; color: var(--td-muted-foreground); opacity: .7; }
.td-cast-tag { padding: 2px 7px; border-radius: 4px; background: #1C1640; font-size: 10px; font-weight: 500; color: var(--td-muted-foreground); text-transform: capitalize; }
.td-chars-name {
	flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--td-radius); border: 1px solid var(--td-border);
	background: var(--td-sidebar); color: var(--td-foreground); font-size: 15px; font-weight: 700; text-transform: uppercase;
}
.td-chars-name:focus { outline: none; border-color: var(--td-primary); }
.td-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.td-type-card {
	text-align: left; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--td-border); background: var(--td-secondary);
	color: var(--td-foreground); font-family: var(--td-font); cursor: pointer;
}
.td-type-card:hover, .td-type-card.is-on { border-color: var(--tc); }
.td-type-num { margin-right: 6px; font-size: 20px; font-weight: 700; color: var(--tc); }
.td-type-name { font-size: 13px; font-weight: 700; }
.td-type-cur { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--tc); }
.td-type-line { margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--td-muted-foreground); }

/* ---------- Character photos (Phase 4b) ---------- */
.td-face-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.td-face-btn { position: relative; padding: 0; cursor: pointer; }
.td-face-btn.is-empty { border-style: dashed; color: var(--td-muted-foreground); }
.td-face-lock {
	position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--td-secondary); border: 1px solid var(--td-border); color: var(--td-muted-foreground);
}
.td-face-col .td-chars-name { width: 100%; }
.td-face-link { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--td-muted-foreground); background: none; border: 0; padding: 0; cursor: pointer; }
.td-face-link:hover { color: var(--td-foreground); text-decoration: underline; }
.td-photo-add { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #8E9BB8; background: none; border: 0; padding: 0; cursor: pointer; }
.td-photo-add:hover { color: var(--td-foreground); }
.td-photo-circle {
	position: relative; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1.5px dashed currentColor;
	display: flex; align-items: center; justify-content: center;
}
.td-photo-circle.has-photo { border-style: solid; border-color: var(--td-border); }
.td-crop {
	width: min(400px, 100%); padding: 20px; border-radius: 14px; border: 1px solid var(--td-border);
	background: var(--td-popover); color: var(--td-popover-foreground); box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.td-crop-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.td-crop-stage { position: relative; height: 280px; border-radius: 10px; overflow: hidden; background: #0E0A26; touch-action: none; cursor: grab; user-select: none; }
.td-crop-stage:active { cursor: grabbing; }
.td-crop-img { position: absolute; left: 50%; top: 50%; max-width: none; pointer-events: none; user-select: none; }
.td-crop-ring {
	position: absolute; left: 50%; top: 50%; width: 224px; height: 224px; margin: -112px 0 0 -112px; border-radius: 50%;
	border: 2px solid #FFFFFF; box-shadow: 0 0 0 999px rgba(14, 10, 38, .55); pointer-events: none;
}
.td-crop-zoom { color: var(--td-muted-foreground); }
.td-crop-range { accent-color: #FFFFFF; }
.td-crop-hint { margin-top: 10px; font-size: 12px; color: var(--td-muted-foreground); }
.td-crop-link { font-size: 13px; color: #A8DDEB; background: none; border: 0; padding: 0; cursor: pointer; }
.td-crop-link:hover { text-decoration: underline; }

/* 4b follow-up: smaller photo links; Remove instead of Change */
.td-face-link { font-size: 11px; }
.td-face-btn:not(.is-empty) { cursor: default; }
.td-photo-add { font-size: 12px; cursor: default; }
.td-photo-add:hover { color: #8E9BB8; }
.td-photo-circle:not(.has-photo) { cursor: pointer; }
.td-photo-link { font-size: 12px; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.td-photo-link:hover { color: var(--td-foreground); text-decoration: underline; }

/* ---------- Phase 4c: discover bars, INTJ-style picker, quiz, results, Full Profile ---------- */
.td-discover {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 12px; padding: 12px 14px; border-radius: 10px; background: var(--td-secondary); font-size: 13px; color: var(--td-foreground);
}
.td-cast-jung { margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--td-teal); }
.td-letters { display: flex; flex-direction: column; gap: 6px; }
.td-letter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.td-letter {
    display: flex; align-items: baseline; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer;
    border: 1.5px solid var(--td-border); background: var(--td-secondary); color: var(--td-muted-foreground); font-size: 11px; line-height: 1.35;
}
.td-letter b { flex-shrink: 0; font-size: 15px; color: var(--td-foreground); }
.td-letter.is-on { border-color: var(--td-teal); color: var(--td-foreground); background: var(--td-accent); }
.td-letter.is-on b { color: var(--td-teal); }
.td-jcode { font-size: 15px; font-weight: 800; color: var(--tc); letter-spacing: .02em; }
.td-jex { margin-top: 6px; font-size: 11px; font-style: italic; color: var(--td-muted-foreground); }
.td-acc { border: 1px solid var(--td-border); border-radius: 10px; overflow: hidden; }
.td-acc-sec + .td-acc-sec { border-top: 1px solid var(--td-border); }
.td-acc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: var(--td-secondary); border: 0; cursor: pointer; color: var(--td-foreground); font-size: 13px; }
.td-acc-need { margin-left: 8px; font-size: 11px; color: var(--td-muted-foreground); }
.td-acc-body { padding: 12px; }
.td-quiz-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; }
.td-quiz-title { font-size: 13px; font-weight: 700; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-quiz-bar { height: 4px; border-radius: 2px; background: var(--td-secondary); overflow: hidden; }
.td-quiz-bar > div { height: 4px; border-radius: 2px; background: var(--td-primary); transition: width .3s; }
.td-quiz-count { flex-shrink: 0; font-size: 11px; color: var(--td-muted-foreground); font-variant-numeric: tabular-nums; }
.td-quiz-ins { margin-bottom: 12px; font-size: 12px; color: var(--td-muted-foreground); line-height: 1.5; }
.td-quiz-ask { margin-bottom: 12px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--td-muted-foreground); text-align: center; }
.td-quiz-q { margin-bottom: 12px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.td-quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 639px) { .td-quiz-opts { grid-template-columns: 1fr; } }
.td-quiz-opt {
    display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 18px 16px; border-radius: 10px; cursor: pointer;
    border: 2px solid var(--td-border); background: var(--td-card); color: var(--td-foreground); font-size: 13px; line-height: 1.55;
}
.td-quiz-opt:hover, .td-quiz-opt.is-on { border-color: var(--td-primary); background: var(--td-secondary); }
.td-quiz-ab { font-size: 10px; color: var(--td-muted-foreground); }
.td-quiz-back { display: block; margin: 16px auto 0; font-size: 11px; color: var(--td-muted-foreground); text-decoration: underline; background: none; border: 0; cursor: pointer; }
.td-res-title { margin-top: 8px; font-size: 18px; font-weight: 800; }
.td-res-card { position: relative; }
.td-res-top { position: absolute; top: 8px; right: 10px; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tc); }
.td-back { font-size: 12px; color: var(--td-teal); background: none; border: 0; padding: 0; cursor: pointer; margin-top: 6px; }
.td-back:hover { text-decoration: underline; }
.td-prof-sec { margin-bottom: 10px; border: 1px solid var(--td-border); border-radius: 10px; background: var(--td-card); }
.td-prof-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: none; border: 0; cursor: pointer; color: var(--td-foreground); }
.td-prof-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.td-prof-sub { margin-top: 2px; font-size: 12px; color: var(--td-muted-foreground); line-height: 1.4; }
.td-prof-body { padding: 0 14px 14px; }
.td-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.td-pgrid > .td-pbox { margin-bottom: 0; }
@media (max-width: 639px) { .td-pgrid { grid-template-columns: 1fr; } }
.td-pbox { margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; background: var(--td-secondary); }
.td-pbox.is-vice { border-top: 2px solid rgba(248,113,113,.5); }
.td-pbox.is-virtue { border-top: 2px solid rgba(44,216,61,.5); }
.td-pbox.is-stress { border-left: 3px solid rgba(248,113,113,.6); }
.td-pbox.is-best { border-left: 3px solid rgba(44,216,61,.6); }
.td-pbox.is-invite { border-left: 3px solid var(--tc, var(--td-teal)); }
.td-plabel { margin-bottom: 4px; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--td-muted-foreground); }
.td-ptext { font-size: 12px; line-height: 1.6; color: var(--td-foreground); }
.td-pmuted { color: var(--td-muted-foreground); }
.td-pquote { font-style: italic; font-size: 13px; }
.td-ptags { margin-top: 6px; font-size: 11px; color: var(--td-teal); }
.td-pgname { margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--td-teal); }
.td-plist { margin: 0; padding-left: 16px; list-style: disc; font-size: 12px; line-height: 1.6; color: var(--td-muted-foreground); }
.td-ppair { margin-bottom: 10px; border: 1px solid var(--td-border); border-radius: 8px; overflow: hidden; }
.td-ppair-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--td-secondary); font-size: 12px; }
.td-ppair-type { font-size: 10px; color: var(--td-muted-foreground); }
.td-ppair-tone { margin-left: auto; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.td-ppair-tone.is-growth, .td-dot.is-growth { color: var(--td-growth); }
.td-ppair-tone.is-toxic, .td-dot.is-toxic { color: var(--td-friction); }
.td-ppair-tone.is-neutral, .td-dot.is-neutral { color: var(--td-muted-foreground); }
.td-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.td-ppair-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.td-pnote { margin-top: 4px; padding-top: 8px; font-size: 12px; line-height: 1.6; border-top: 1px solid var(--td-border); color: var(--td-foreground); }
.td-pnote.is-toxic { color: var(--td-friction); border-top-color: rgba(248,113,113,.25); }
.td-pnote.is-growth { color: var(--td-growth); border-top-color: rgba(44,216,61,.25); }
.td-pnote.is-stress { color: rgba(255,200,100,.85); border-top-color: rgba(255,200,100,.2); }
.td-pnote .td-plabel { color: inherit; opacity: .7; }

/* ---------- Phase 4c follow-up: mapping titles, labelled letter rows, tie screen, full-width Characters ---------- */
.td-map-why { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--td-muted-foreground); }
.td-letters { gap: 10px; }
.td-lrow-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--td-muted-foreground); }
.td-lrow-tag { padding: 1px 6px; border-radius: 4px; background: var(--td-primary); color: #1A1A2E; font-size: 10px; letter-spacing: .02em; text-transform: none; }
.td-letter-row.is-tied { padding: 8px; border: 1.5px solid var(--td-primary); border-radius: 10px; }
.td-letter.is-on { background: var(--td-primary); border-color: var(--td-primary); color: #1A1A2E; }
.td-letter.is-on b { color: #1A1A2E; }
.td-jresult { margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; background: var(--td-secondary); font-size: 13px; }
.td-jresult b { font-size: 16px; letter-spacing: .15em; color: var(--td-primary); }
@media (min-width: 1024px) {
    body.two-col-mode.chars-full .grow.grid { display: none !important; }
    body.two-col-mode.chars-full .two-col-sidebar { left: 0 !important; width: auto !important; }
    body.two-col-mode.chars-full:has(.td-sidebar) .two-col-sidebar { left: 256px !important; }
    body.two-col-mode.chars-full:has(.td-sidebar.is-rail) .two-col-sidebar { left: 56px !important; }
    body.chars-full .two-col-sidebar .td-dlg-panel { max-width: none !important; }
    body.chars-full .td-chars-scroll { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
    body.chars-full .td-cast-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; align-items: start; }
    body.chars-full .td-cast-wrap > :not(.td-cast-card) { grid-column: 1 / -1; }
    body.chars-full .td-cast-wrap > .td-cast-card { margin-bottom: 0; }
    body.chars-full .td-prof-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-content: start; align-items: start; }
    body.chars-full .td-prof-wrap > :not(.td-prof-sec) { grid-column: 1 / -1; }
}

/* ---------- Group Dynamics (Phase 4d) ---------- */
.td-dyn-grid { margin-top: 12px; }
.td-dyn-pic { margin-bottom: 16px; }
.td-dyn-svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; font-family: var(--td-font); }
.td-dyn-node { cursor: pointer; }
.td-dyn-hit { cursor: pointer; }
.td-dyn-hint { margin: 8px 0 0; font-size: 11px; color: var(--td-muted-foreground); text-align: center; }
.td-dyn-focus { margin-top: 8px; font-size: 12px; text-align: center; color: var(--td-foreground); }
.td-dyn-focus .td-link { background: none; border: 0; padding: 0; font-size: 12px; }
.td-dyn-trios { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.td-dyn-trio { padding: 7px 12px; border-radius: 6px; border-left: 3px solid; background: var(--td-card); font-size: 11px; color: var(--td-muted-foreground); }
.td-dyn-trio-name { font-size: 10px; font-weight: 600; letter-spacing: .05em; margin-bottom: 2px; }
.td-dyn-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 8px; font-size: 11px; color: var(--td-foreground); }
.td-dyn-leg { display: inline-flex; align-items: center; gap: 6px; }
.td-dyn-block { margin-bottom: 10px; padding: 12px 14px; border-radius: 8px; background: var(--td-card); border-left: 3px solid rgba(255,255,255,.2); }
.td-dyn-block.is-hi { border-left-color: var(--td-primary); }
.td-dyn-block.is-pot { border-left-color: rgba(255,255,255,.1); }
.td-dyn-block-label { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--td-muted-foreground); margin-bottom: 4px; }
.td-dyn-block.is-hi .td-dyn-block-label { color: var(--td-primary); }
.td-dyn-block-sub { font-size: 12px; font-weight: 600; color: var(--td-foreground); margin-bottom: 4px; }
.td-dyn-block-text { font-size: 12px; line-height: 1.65; color: var(--td-muted-foreground); }
.td-dyn-sec { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--td-teal); }
.td-dyn-card { border-left: 3px solid var(--tc); }
.td-dyn-card-title { font-size: 14px; font-weight: 700; }
.td-dyn-tag { margin-bottom: 8px; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tc); }
@media (min-width: 1024px) {
    body.chars-full .td-dyn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
    body.chars-full .td-dyn-pic { position: sticky; top: 0; }
}

/* browser windows have rounded corners: round the lower-right of the right column (top-right stays square) */
body.two-col-mode .two-col-sidebar .td-dlg-body { border-bottom-right-radius: 18px; }

/* ---------- phone swipe dots (one view at a time, under 1024px) ---------- */
:root { --td-dots-h: 24px; }
.td-dots {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
	display: flex; justify-content: center; align-items: flex-start; gap: 2px;
	height: calc(var(--td-dots-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
	background: var(--td-page);
}
.td-dot { display: flex; align-items: center; justify-content: center; width: 24px; height: var(--td-dots-h); padding: 0; border: 0; background: none; cursor: pointer; }
.td-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--td-muted-foreground); opacity: .5; }
.td-dot.is-on::before { background: var(--td-primary); opacity: 1; }
/* make room for the dots: the page and the full-screen Dictate box end above them */
body.has-dots > .h-screen { height: calc(100vh - var(--td-dots-h) - env(safe-area-inset-bottom)); }
@media (max-width: 639px) {
	body.has-dots:not(.two-col-mode) .td-dlg { bottom: calc(var(--td-dots-h) + env(safe-area-inset-bottom)); }
}

/* ---------- account block at the bottom of the sidebar (replaces the top-right avatar from 1024px; comment #111) ---------- */
@media (min-width: 1024px) {
	.td-usermenu { display: none !important; }
	/* pages without a story get a plain sidebar (logo + account): the page moves right of it */
	body:has(.td-sidebar.is-plain) { padding-left: 256px; }
	body:has(.td-sidebar.is-plain) .td-appbar { margin-left: 0; }
}
.td-sb-spacer { flex: 1 1 auto; min-height: 12px; }
.td-acct { position: relative; flex-shrink: 0; width: 100%; }
.td-acct-btn {
	display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px;
	border: 0; border-radius: var(--td-radius); background: transparent; cursor: pointer; text-align: left; font-family: var(--td-font);
}
.td-acct-btn:hover { background: var(--td-sidebar-accent); }
.td-acct-av {
	position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%; background: var(--td-muted-foreground); color: var(--td-background); font-size: 14px; font-weight: 700;
}
.td-acct-dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: #ef4444; border: 2px solid var(--td-sidebar); }
.td-acct-text { display: flex; flex-direction: column; min-width: 0; }
.td-acct-name, .td-acct-plan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 15px; }
.td-acct-name { font-weight: 600; color: var(--td-teal); }
.td-acct-plan { color: var(--td-muted-foreground); }
.td-acct-menu { position: fixed; left: 12px; bottom: 64px; width: 232px; z-index: 60; }
.td-sidebar.is-rail .td-acct-text { display: none; }
.td-sidebar.is-rail .td-acct-btn { justify-content: center; width: 40px; padding: 4px; }
.td-sidebar.is-rail .td-acct-menu { left: 8px; }
.td-acct-chev { flex-shrink: 0; width: 16px; height: 16px; margin-left: auto; color: var(--td-muted-foreground); transition: transform .15s; }
.td-acct-chev.is-open { transform: rotate(180deg); }
.td-sidebar.is-rail .td-acct-chev { display: none; }
/* the Script column is a flex column: without this the header shrank to 30px in Whole script and grew to 36px in This scene */
.td-script-hdr, .td-script-bar { flex-shrink: 0; }

/* ---------- Scene Configurations + saved team page (Phase 4e) ---------- */
.td-chars .td-switch { max-width: 100%; overflow-x: auto; scrollbar-width: none; }	/* phones: the view switch scrolls sideways */
.td-chars .td-switch::-webkit-scrollbar { display: none; }
.td-chars .td-switch-item { flex-shrink: 0; white-space: nowrap; }
.td-dyn-cfg { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--td-border); border-radius: 10px; background: var(--td-card); }
.td-dyn-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.td-dyn-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 0; border-left: 2px solid var(--tc, rgba(255,255,255,.2)); border-radius: 4px; background: var(--td-secondary); color: var(--td-foreground); font-size: 11px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.td-dyn-badge.is-plain { border-left: 0; cursor: default; }
.td-dyn-badge-t { font-size: 10px; font-weight: 600; color: var(--tc); }
.td-dyn-saved { flex-shrink: 0; font-size: 11px; font-style: italic; color: var(--td-muted-foreground); }
.td-dyn-remove { color: var(--td-destructive); }
.td-dyn-team-name { margin: 10px 0 8px; font-size: 18px; font-weight: 700; }
/* Group Psychology blocks: 2 lines, then more › / less ‹ (FigCraft 45518) */
.td-dyn-block-text.is-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-dyn-more { margin-top: 4px; padding: 0; border: 0; background: none; font-size: 11px; color: var(--td-teal); cursor: pointer; }
.td-dyn-more:hover { text-decoration: underline; }
/* account menu always open on Dashboard, Settings, Upgrades, Payments; Library on all but the Dashboard */
.td-acct-btn.is-pinned { cursor: default; }
.td-acct-btn.is-pinned:hover { background: transparent; }
.td-acct-list { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.td-acct-div { height: 1px; margin: 4px 0; background: var(--td-sidebar-border); }
.td-sb-lib { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }

/* ---------- Phase 5: locked Character Diagnostic tools (thin gray + lock; tap opens the pop-up) ---------- */
.td-lockable { position: relative; }
.is-locked { opacity: .55; }
.td-switch-item.is-locked, .td-chars-btn.is-locked { color: var(--td-muted-foreground); font-weight: 400; }
.td-lk { display: inline-block; width: 11px; height: 11px; margin-left: 4px; vertical-align: -1px; }
.td-jung.is-locked-area .td-letter, .td-jung.is-locked-area .td-jcard { opacity: .5; }
.td-lock-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; }
.td-lock-wrap .td-scrim { z-index: 0; }
.td-lock-pop { position: relative; z-index: 1; width: 100%; max-width: 380px; text-align: center; }
.td-lock-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--td-secondary); color: var(--td-primary); margin-bottom: 10px; }
.td-lock-title { font-size: 17px; font-weight: 700; }
.td-lock-body { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--td-muted-foreground); }
.td-lock-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--td-muted-foreground); opacity: .85; }
.td-lock-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.td-lock-go { display: block; padding: 9px 12px; border-radius: var(--td-radius); font-weight: 600; text-decoration: none; }
@media (max-width: 639px) {	/* phones: bottom sheet */
	.td-lock-wrap { align-items: flex-end; padding: 0; }
	.td-lock-pop { max-width: none; border-radius: 16px 16px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
/* What's New opens next to its trigger: beside the sidebar's account block from 1024px (top right below that) */
@media (min-width: 1024px) {
	body:has(.td-sidebar) .td-wn-wrap { align-items: flex-end; justify-content: flex-start; padding: 0 0 16px 268px; }
	body:has(.td-sidebar.is-rail) .td-wn-wrap { padding-left: 68px; }
}

/* Usertour: no floating checklist pill; Help > Take the Tour reopens the checklist */
iframe.usertour-widget-checklist-launcher { display: none !important; }

/* ---------- Phase 7: Dashboard (FigCraft 38544 / 43219) ---------- */
.td-dash { display: flex; flex-direction: column; gap: 24px; padding: 12px 12px 48px; color: #FFFFFE; }
@media (min-width: 640px) { .td-dash { padding: 32px 40px 64px; } }
.td-dash-head { display: flex; align-items: center; gap: 10px; }
.td-dash-h1 { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; }
@media (min-width: 640px) { .td-dash-h1 { font-size: 26px; } }
.td-dash-n { font-size: 13px; font-weight: 600; color: #8E9BB8; }
.td-dash-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #38385A; border-radius: 8px; background: transparent; color: #FFFFFE; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.td-dash-btn:hover { border-color: #FFD800; }
.td-new { background: #1C1640; border: 1px solid #38385A; border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.td-dlg-body .td-new, [role="dialog"] .td-new { background: transparent; border: 0; padding: 0; }
.td-new-title { font-size: 15px; font-weight: 600; color: #FFFFFE; }
.td-new-fields { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .td-new-fields { flex-direction: row; align-items: flex-end; gap: 14px; } }
.td-new-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.td-new-name { flex: 1 1 auto; }
@media (min-width: 640px) { .td-new-st { flex: 0 0 220px; } }
.td-new-lbl { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8E9BB8; }
.td-new-in { height: 36px; padding: 0 12px; background: #150D33; border: 1px solid #38385A; border-radius: 8px; color: #FFFFFE; font-size: 16px; outline: none; width: 100%; }
@media (min-width: 640px) { .td-new-in { font-size: 13px; } }
.td-new-in::placeholder { color: #8E9BB8; font-style: italic; }
.td-new-in:hover, .td-new-in:focus { border-color: #FFD800; }
.td-new-struct { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.td-new-struct.is-empty span { color: #8E9BB8; font-style: italic; }
.td-new-pp { width: 64px; text-align: center; font-weight: 600; }
.td-new-unit { font-size: 12px; color: #8E9BB8; }
.td-new-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: #FFD800; color: #1A1A2E; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.td-new-go:hover { filter: brightness(1.08); }
@media (min-width: 640px) { .td-new-go { margin-bottom: 1px; } }
.td-new-desc { font-size: 12px; font-style: italic; color: #8E9BB8; }
.td-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
@media (max-width: 639px) { .td-dash-grid { grid-template-columns: 1fr; } }
.td-dash-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: #1C1640; border: 1px solid #38385A; border-radius: 12px; color: #FFFFFE; text-decoration: none; transition: border-color .15s; }
.td-dash-card:hover { border-color: #FFD800; }
.td-dash-top { display: flex; align-items: center; gap: 6px; min-height: 36px; }
.td-dash-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-dash-badge { flex-shrink: 0; padding: 2px 6px; border-radius: 4px; background: #38385A; color: #BAE8E8; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.td-dash-dots { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 36px; border-radius: 8px; color: #FFFFFE; cursor: pointer; }
.td-dash-dots:hover { background: rgba(255,255,255,.08); }
.td-dash-meta { font-size: 12px; color: #8E9BB8; }
.td-dash-bars { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.td-dash-bar { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.td-dash-bl { flex: 0 0 62px; color: #8E9BB8; }
.td-dash-track { flex: 1 1 auto; height: 6px; border-radius: 3px; background: #272344; overflow: hidden; }
.td-dash-fill { display: block; height: 100%; border-radius: 3px; }
.td-dash-pct { flex: 0 0 32px; text-align: right; font-weight: 600; color: #FFFFFE; }
.td-dash-foot { margin-top: 2px; font-size: 12px; font-weight: 600; color: #BAE8E8; }
.td-dash-gs { display: flex; flex-direction: column; gap: 12px; }
.td-dash-h2 { font-size: 15px; font-weight: 600; color: #FFFFFE; }
.td-dash-tour { display: none; align-items: center; gap: 12px; width: 380px; max-width: 100%; padding: 14px 16px; background: #1C1640; border: 1px solid #38385A; border-radius: 10px; color: #FFFFFE; cursor: pointer; }
@media (min-width: 640px) { .td-dash-tour { display: flex; } }
.td-dash-tour:hover { border-color: #FFD800; }
.td-dash-tour-t { display: block; font-size: 14px; font-weight: 600; }
.td-dash-tour-s { display: block; font-size: 12px; color: #8E9BB8; margin-top: 3px; }
.td-dash-faq { font-size: 13px; font-weight: 600; color: #FFD800; text-decoration: none; }
.td-dash-faq:hover { text-decoration: underline; }

/* ---------- Phase 7: themed confirm / prompt (FigCraft 43097 / 43105 / 43113) ---------- */
.td-ask-scrim { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,2,16,.6); }
.td-ask { width: 400px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; background: #272344; border: 1px solid #38385A; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.5); color: #FFFFFE; text-align: left; }
.td-ask-title { font-size: 16px; font-weight: 600; color: #FFFFFE; }
.td-ask-title.is-warn { color: #FFD800; }
.td-ask-body { font-size: 13px; line-height: 1.4; color: #C9D1E3; white-space: pre-line; overflow-wrap: anywhere; }
.td-ask-in { width: 100%; padding: 8px 10px; background: #0E0726; border: 1px solid #FFD800; border-radius: 8px; color: #FFFFFE; font-size: 16px; outline: none; }
@media (min-width: 640px) { .td-ask-in { font-size: 14px; } }
.td-ask-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.td-ask-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid #5A5F80; background: transparent; color: #FFFFFE; font-size: 13px; font-weight: 600; cursor: pointer; }
.td-ask-btn:hover { border-color: #FFD800; }
.td-ask-btn.is-go { padding: 7px 16px; background: #FFD800; border-color: #FFD800; color: #1A1A2E; }
.td-ask-btn.is-danger { padding: 7px 16px; background: #DC2626; border-color: #DC2626; color: #FFFFFF; }
.td-ask-btn.is-go:hover, .td-ask-btn.is-danger:hover { filter: brightness(1.08); }
.td-ask-btn:disabled { opacity: .4; cursor: default; filter: none; }

/* ---------- Phase 7: full logo in the phone header on pages without a story ---------- */
@media (max-width: 639px) {
	.td-appbar-logo.is-plain .td-logo-long { display: block !important; height: 26px; width: auto; padding-top: 0; }
	.td-appbar-logo.is-plain .td-logo-icon { display: none !important; }
}

/* ---------- Phase 7b: Talk Your Draft on phone scene cards: app icon only, full button on the last-used scene ---------- */
.td-tyd-logo { display: none; width: 18px; height: 18px; }
@media (max-width: 639px) {
	.td-tyd.is-mini .td-tyd-mic, .td-tyd.is-mini .td-tyd-label { display: none; }
	.td-tyd.is-mini .td-tyd-logo { display: block; }
	.td-tyd.is-mini { padding-left: 6px; padding-right: 6px; }
}

/* ---------- Phase 7c: Series on the Dashboard (desktop app style) ---------- */
dash-card { display: flex; min-width: 0; }
dash-card > .td-dash-card { flex: 1 1 auto; min-width: 0; }
.td-dash-series { display: flex; flex-direction: column; gap: 12px; }
.td-dash-sub { display: flex; align-items: center; gap: 8px; color: #8E9BB8; }
.td-dash-sub-n { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #BAE8E8; }
.td-dash-sub-c { font-size: 11px; color: #8E9BB8; }
.td-dash-more { display: flex; align-items: center; gap: 10px; }
.td-dash-more span { flex: 1; height: 1px; background: #272344; }
.td-dash-more b { font-size: 11px; font-weight: 400; color: #8E9BB8; white-space: nowrap; }
.td-ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.td-ask-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid #38385A; background: transparent; color: #C9D1E3; font-size: 12px; cursor: pointer; }
.td-ask-chip:hover, .td-ask-chip.is-on { border-color: #FFD800; color: #FFFFFE; }

/* ---------- Oct 31: phones hide the scene-card trash (Delete Scene stays in the ⋯ menu); + New Team panel ---------- */
@media (max-width: 639px) { .td-scene-del { display: none; } }
.td-dyn-new { flex-direction: column; align-items: stretch; gap: 10px; }
.td-chars-btn:disabled { opacity: .4; cursor: default; }

/* ---------- Oct 31: scene progress tick (FigCraft Frame 13) and Free Form Add Section (35236) ---------- */
.td-prog { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 4px; background: none; border: 0; cursor: pointer; font-size: 11px; color: #8E9BB8; }
.td-prog-l { display: inline-block; width: 48px; text-align: right; }
.td-prog-r { display: inline-block; min-width: 48px; text-align: left; }
.td-prog-c { width: 18px; height: 18px; flex-shrink: 0; color: #5A5F80; }
.td-prog:hover .td-prog-c { color: #8E9BB8; }
.td-prog.is-outlined .td-prog-l, .td-prog.is-outlined .td-prog-c { color: #BAE8E8; font-weight: 600; }
.td-prog.is-outlined .td-prog-r { color: #5A5F80; font-weight: 300; }
.td-prog.is-scripted .td-prog-c, .td-prog.is-scripted .td-prog-r { color: #2CD83D; font-weight: 600; }
@media (max-width: 639px) {
	/* phones: the circle and the current word only */
	.td-prog.is-outlined .td-prog-r { display: none; }
	.td-prog.is-scripted .td-prog-l { display: none; }
	.td-prog-l { width: auto; }
}
.td-add-section { margin-top: 4px; color: #FFFFFE; border-color: #8E9BB8; }
.td-add-section:hover { border-color: #FFFFFE; }
@media (max-width: 639px) {
	/* phones: fit pp, the tick and the full Talk Your Draft button on one row */
	.td-prog { padding: 0; gap: 4px; }
	.td-scene-card div:has(> .td-prog) { gap: 4px; }
	.td-tyd:not(.is-mini) { padding-left: 8px; padding-right: 8px; }
	.td-tyd:not(.is-mini) .td-tyd-label { margin-left: 4px; }
}

/* ---------- Oct 31: Upgrade button beside (?) ---------- */
.td-upgrade-btn { align-items: center; height: 30px; padding: 0 12px; margin-right: 6px; border: 1px solid #FFD800; border-radius: 8px; color: #FFD800; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.td-upgrade-btn:hover { background: #FFD800; color: #1A1A2E; }

/* ---------- Oct 31: phone Dashboard: Create Story to the right of Page Target ---------- */
@media (max-width: 639px) {
	.td-new-fields { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: end; }
	.td-new-name, .td-new-st { grid-column: 1 / -1; }
	.td-new-go { justify-self: stretch; }
}

/* ---------- Oct 31: recorder notices sit over Edit Transcript (phones and tablets) ---------- */
@media (max-width: 1023px) {
	.td-alert-dictate { top: auto !important; bottom: calc(64px + var(--td-dots-h, 0px) + env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto !important; max-width: 560px; }
}

/* ---------- Oct 31: Dictate column (phones, tablets, desktop): the whole column fits, no scrolling ---------- */
@media (min-width: 640px) {	/* tablets and one-column desktop: the Dictate pop-up fills the height, like phones */
	body:not(.two-col-mode) .td-dlg > .td-dlg-wrap { height: 100%; min-height: 0; }
	body:not(.two-col-mode) .td-dlg-panel { height: 100%; max-height: none !important; overflow: hidden !important; }
	body:not(.two-col-mode) .td-dlg .td-dlg-body { flex: 1 1 auto; min-height: 0; }
}
.td-notes { position: relative; }
.td-notes-more, .td-notes-less { display: none; }
.td-reuse-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #38385A; border-radius: 8px; background: transparent; color: #FFFFFE; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.td-reuse-btn:hover { border-color: #FFD800; }
.td-reuse-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(320px, 86vw); max-height: 50vh; overflow-y: auto; padding: 6px 0; }
.td-reuse-item { display: flex; gap: 8px; width: 100%; padding: 8px 12px; background: none; border: 0; text-align: left; font-size: 13px; line-height: 1.35; color: #FFFFFE; cursor: pointer; }
.td-reuse-item:hover { background: rgba(255,216,0,.08); color: #FFD800; }
.td-reuse-item.is-ph, .td-reuse-item.is-this { color: #8E9BB8; }
.td-reuse-item.is-ph { font-style: italic; }
.td-reuse-item:disabled { cursor: default; background: none; }
.td-reuse-n { flex-shrink: 0; min-width: 14px; color: inherit; opacity: .8; }
/* every screen size (Fred, Oct 31): keys and audio sit at the bottom; the notes fill the rest */
.td-dict-main { display: flex; flex-direction: column; overflow: hidden; }
.td-dict-inner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.td-dict-pad { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
.td-dict-pad > div:has(> .td-keygrid) { flex: 1 1 auto; min-height: 0; }
.td-keygrid { flex: 1 1 auto; min-height: 0; gap: 8px; padding: 4px 0; align-content: end;
	grid-template-rows: repeat(3, minmax(44px, 88px)) minmax(52px, 72px); }
.td-keygrid > div { height: 100%; }
.td-keygrid .td-numpad-btn { height: 100% !important; min-height: 0 !important; width: 100%; }
.td-keygrid .record-button-wrapper { height: 100%; padding: 2px; }
.td-keygrid .record-button-container { height: 100%; }
/* notes: always as tall as their text (--nh, set in index.html). If they don't fit, the keys shrink first (to 44px rows),
   then the notes box scrolls. No "more" (Fred, Oct 31) */
.td-notes { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 42px; }
.td-notes .td-notes-in { flex: 1 1 auto; height: var(--nh, 30px) !important; min-height: 0; overflow-y: auto; }
.td-dict-inner:has(> .td-notes) .td-dict-pad,
.td-dict-inner:has(> .td-notes) .td-dict-pad > div:has(> .td-keygrid) { min-height: auto; }
.td-dict-inner:has(> .td-notes) .td-dict-pad { flex-shrink: 1000; }	/* the keys give up their space before the notes do */
.td-dict-inner:has(> .td-notes) .td-keygrid { height: 216px; min-height: 0; }	/* smallest keys (3 x 44 + 52 + gaps); grows into any space the notes leave */
/* faces and the record button's mic follow the key size (see the @container rules below) */
.td-keygrid .td-numpad-btn.td-key-char { container-type: size; }
.td-keygrid .record-button-container { container-type: size; }
@media (max-width: 639px) and (max-height: 700px) {
	body:not(.two-col-mode) .td-key-avatar { display: none; }	/* the shortest phones: names only */
}

/* phones: key faces hide on short keys; the REC mic and its word shrink with the button (containers set above) */
@container (max-height: 45px) { .td-keygrid .td-numpad-btn .td-key-avatar { display: none; } }	/* the key's inside height (key minus its 18px padding): faces hide when the key is under ~64px */
@container (max-height: 70px) {
	.td-keygrid .record-button-container .mic-icon-wrapper, .td-keygrid .record-button-container .mic-icon-wrapper-active { width: 30px; height: 30px; }
	.td-keygrid .record-button-container .mic-icon, .td-keygrid .record-button-container .mic-icon-wrapper-active svg, .td-keygrid .record-button-container .td-wait-hourglass { width: 16px; height: 16px; }
	.td-keygrid .record-button-container .button-text, .td-keygrid .record-button-container .button-text-active { font-size: 9px; }
}
@container (max-height: 54px) { .button-text, .button-text-active { display: none; } }
.td-reuse-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-reuse-cast { font-size: 11px; font-style: normal; color: #8E9BB8; }

/* ---------- Nov 2: team side label (Protagonists / Antagonists) ---------- */
.td-dyn-side { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--td-border, #38385A); border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--td-muted-foreground); vertical-align: middle; }
.td-dyn-new .td-ask-chips { margin: 8px 0 4px; }

/* ---------- Nov 2: Delete Character pop-up (character in scenes) and the merge list ---------- */
.td-chdel-in { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.td-chdel { max-height: calc(100vh - 32px); }
.td-chdel-link { align-self: flex-start; padding: 0; border: 0; background: none; color: #8E9BB8; font-size: 12px; font-weight: 500; cursor: pointer; }
.td-chdel-link:hover { color: #FFD800; text-decoration: underline; }
.td-chdel-q { border-color: #38385A; }
.td-chdel-q:focus { border-color: #FFD800; }
.td-chdel-list { display: flex; flex-direction: column; gap: 6px; max-height: 234px; overflow-y: auto; padding-right: 4px; }
.td-chdel-row { flex-shrink: 0; padding: 8px 12px; border: 1px solid #38385A; border-radius: 8px; background: #1C1640; color: #FFFFFE; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.td-chdel-row:hover { border-color: #5A5F80; }
.td-chdel-row.is-on { border-color: #FFD800; color: #FFD800; font-weight: 600; }
.td-chdel-none { font-size: 12px; color: #8E9BB8; padding: 4px 2px; }

/* ---------- Nov 4: Dictate Instructions shelf, keyboard picture and caption centered and finished before the NAME keys (Fred) ---------- */
.td-dict-pad .image-container { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 12px; }
.td-dict-pad .image-container img { display: block; max-width: 300px; width: 100%; height: auto; }
.td-dict-pad .image-caption { font-size: 12px; line-height: 1.3; color: #8E9BB8; text-align: center; }