/*
 * Portal layout on Mentha tokens. Mentha (public/mentha/styles.css) owns all paint: colours, radii,
 * type, shadows and the primitives' class recipes. This file only places things: the shell, page
 * widths, grids, and the few native elements (table cells, <details>, <dialog>) whose Mentha
 * counterparts are client-side React. Every value here is a Mentha token or a house size.
 */

/* Fonts: Mentha expects --font-inter / --font-paper-mono. The Synopsys typeface is Roboto, with Arial as its
   fallback (Brand Identity Guidelines), so Roboto takes the sans slot. Paper Mono is not public, so mono falls to
   the system stack. */
:root {
	--font-inter: "Roboto", Arial;
	--font-paper-mono: ui-monospace, "SF Mono", Menlo, Consolas;
	/* Tailwind only emits theme variables a utility uses, so the font stacks are restated here. */
	--font-sans: var(--font-inter), system-ui, sans-serif;
	--font-mono: var(--font-paper-mono), ui-monospace, monospace;
	--container-page: 64rem;
	--container-page-medium: 48rem;
	--container-page-small: 36rem;
	color-scheme: light;
}
.dark { color-scheme: dark; }

/*
 * Synopsys theme on Mentha's tokens, the same palette as the Ansys, part of Synopsys developer docs: Synopsys
 * Purple #5A2A82 and Light Purple #7E45AF take Mentha's brand scale (checkboxes, switches, focus rings, brand
 * buttons, selection), and everything else stays Mentha's neutral greys. Mentha's own values are in
 * public/mentha/styles.css; these come later, so they win, and the .dark block follows the :root one so it wins
 * in dark mode.
 */
:root {
	--brand-1: #fdfcfe; --brand-2: #f8f5fb; --brand-3: #eeeaf2; --brand-4: #e5daef; --brand-5: #d9c8e8; --brand-6: #c9b1de;
	--brand-7: #b28fcf; --brand-8: #9a6cc2; --brand-9: #7e45af; --brand-10: #6b3698; --brand-11: #5a2a82; --brand-12: #2d1541;
	--brand-a3: rgb(90 42 130 / 0.08); --brand-a4: rgb(90 42 130 / 0.12); --brand-a6: rgb(90 42 130 / 0.24);
	/* Synopsys Purple under white text, 10.1:1 */
	--surface-brand-base: #5a2a82;
	--surface-brand-weak: #7e45af;
	--surface-brand-weaker: var(--brand-2);
	--stroke-brand-base: var(--brand-4);
	--stroke-brand-focus: var(--brand-8);
	/* Secondary text in Synopsys Dark Gray, 5.1:1 on white. Mentha's grey-10 is 3.8:1, under WCAG AA. */
	--text-main-weak: #646e81;
	/* Mentha's success badge sets its label in the icon green (3:1 on its tint); the text green is 5:1+. */
	--icon-alert-success: var(--green-11);
}
.dark {
	--brand-1: #110a16; --brand-2: #170e1f; --brand-3: #2d1541; --brand-4: #371a50; --brand-5: #43205f; --brand-6: #4f276f;
	--brand-7: #5e3383; --brand-8: #7e45af; --brand-9: #8f59c0; --brand-10: #9e6ccb; --brand-11: #b28fcf; --brand-12: #e5daef;
	--brand-a3: rgb(178 143 207 / 0.12); --brand-a4: rgb(178 143 207 / 0.18); --brand-a6: rgb(178 143 207 / 0.32);
	/* Light Purple on black, under white text (6.3:1); Mentha's dark brand is a light mint under dark text */
	--surface-brand-base: #7e45af;
	--surface-brand-weak: #9a6cc2;
	--surface-brand-weaker: var(--brand-2);
	--stroke-brand-base: var(--brand-3);
	--stroke-brand-focus: var(--brand-11);
	--text-main-on-color: #ffffff;
	/* Mentha's own on black (7:1); restated because the :root value above would otherwise apply here too */
	--text-main-weak: var(--grey-10);
	--icon-alert-success: var(--green-10);
}

/* Reset (Mentha's compiled CSS carries no preflight). Layered so every Mentha utility outranks it. */
@layer base {
	*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
	html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
	body { margin: 0; min-height: 100dvh; background: var(--surface-main-surface-0); color: var(--text-main-base); font-family: var(--font-sans); font-size: var(--text-15-regular); line-height: var(--text-15-regular--line-height); letter-spacing: var(--text-15-regular--letter-spacing); }
	h1, h2, h3, h4, p, ul, ol, pre, figure, fieldset { margin: 0; padding: 0; }
	ul, ol { list-style: none; }
	button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0; background: none; border-radius: 0; }
	button, summary { cursor: default; }
	a { color: inherit; text-decoration: none; }
	img, svg { display: block; }
	img { max-width: 100%; }
	summary { list-style: none; }
	summary::-webkit-details-marker { display: none; }
	[hidden] { display: none !important; }
	code { font-family: var(--font-mono); font-size: 0.92em; }
	.mono { font-family: var(--font-mono); font-size: var(--text-13-mono); font-weight: var(--text-13-mono--font-weight); letter-spacing: var(--text-13-mono--letter-spacing); }
	.nowrap { white-space: nowrap; }
	.portal-native-check { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
	.portal-select { appearance: none; -webkit-appearance: none; }
	.portal-select-icon { inset-inline-end: 0; top: 0; bottom: 0; }
.portal-select option { color: var(--text-main-strong); background: var(--surface-main-surface-2); }
	.portal-textarea { min-height: 96px; }
	::placeholder { opacity: 1; }
	::selection { background: var(--surface-brand-weak); color: var(--text-main-on-color); }
}

/* Shell */
.shell-banner { padding: 12px 24px 0; }
.shell-header { position: sticky; top: 0; z-index: 40; height: 52px; display: flex; align-items: center; gap: 20px; padding: 0 24px; background: var(--surface-main-surface-0); background-image: linear-gradient(to top, var(--stroke-main-base) var(--hairline), transparent var(--hairline)); }
.shell-brand { display: inline-flex; align-items: center; gap: 12px; font-size: var(--text-14-bold); font-weight: var(--text-14-bold--font-weight); line-height: var(--text-14-bold--line-height); color: var(--text-main-strong); white-space: nowrap; }
/* The lockup at 40px tall is 78px wide, above the guide's 72px minimum; the product name sits apart from it */
.shell-logo { height: 40px; width: auto; }
.shell-logo-dark, .dark .shell-logo-light { display: none; }
.dark .shell-logo-dark { display: block; }
.shell-product { padding-inline-start: 12px; box-shadow: inset var(--hairline) 0 0 var(--stroke-main-base); color: var(--text-main-base); font-weight: var(--text-14-regular--font-weight, 400); }
@media (max-width: 640px) { .shell-product { display: none; } }
.shell-nav { display: flex; align-items: center; height: 100%; }
.shell-nav [data-tabs-list] { height: 100%; align-items: stretch; }
.shell-nav [data-tabs-list] a { height: 100%; }
.shell-account { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.shell-account form { display: contents; }
.shell-email { font-size: var(--text-13-regular); line-height: var(--text-13-regular--line-height); color: var(--text-main-weak); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pages */
.page { width: 100%; max-width: var(--container-page); margin: 0 auto; padding: 28px 24px 96px; }
.page[data-width="medium"] { max-width: var(--container-page-medium); }
.page[data-width="small"] { max-width: var(--container-page-small); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.page-head > .page-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-head .actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-title h1 { font-size: var(--text-h3); line-height: var(--text-h3--line-height); letter-spacing: var(--text-h3--letter-spacing); font-weight: var(--text-h3--font-weight); color: var(--text-main-strong); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-title p { font-size: var(--text-14-regular); line-height: var(--text-14-regular--line-height); color: var(--text-main-weak); }
.crumb { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-13-bold); font-weight: var(--text-13-bold--font-weight); line-height: var(--text-13-bold--line-height); color: var(--text-main-weak); width: fit-content; }
.crumb:hover { color: var(--text-main-base); }
.crumb svg { width: 14px; height: 14px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-lg { display: flex; flex-direction: column; gap: 28px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.end { align-items: flex-end; }
.card { --formbar-bg: var(--surface-main-surface-1); }
.spacer { flex: 1; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 20px; align-items: start; }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.grid-form > .wide { grid-column: 1 / -1; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius-8); background: var(--surface-main-surface-1); box-shadow: var(--shadow-weak); transition: background-color 150ms ease-out; }
.stat:hover { background: color-mix(in srgb, rgb(from var(--surface-hover-base) r g b / 1) 2%, var(--surface-main-surface-1)); }
.stat b { font-size: var(--text-h2); line-height: var(--text-h2--line-height); letter-spacing: var(--text-h2--letter-spacing); font-weight: var(--text-h2--font-weight); color: var(--text-main-strong); font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--text-13-regular); line-height: var(--text-13-regular--line-height); color: var(--text-main-weak); }
.section-title { font-size: var(--text-h4); line-height: var(--text-h4--line-height); letter-spacing: var(--text-h4--letter-spacing); font-weight: var(--text-h4--font-weight); color: var(--text-main-strong); }
.card-title { font-size: var(--text-15-bold); line-height: var(--text-15-bold--line-height); font-weight: var(--text-15-bold--font-weight); color: var(--text-main-strong); }
.muted { color: var(--text-main-weak); }
.small { font-size: var(--text-13-regular); line-height: var(--text-13-regular--line-height); }
.prose { display: flex; flex-direction: column; gap: 10px; }
.prose ol { list-style: decimal; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; }
.prose code { padding: 1px 4px; border-radius: var(--radius-3); background: var(--surface-main-surface-sunken-1); font-size: var(--text-13-mono); }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 24px; text-align: center; border-radius: var(--radius-8); background: var(--surface-main-surface-1); box-shadow: var(--shadow-weak); }
.empty p { max-width: 36rem; font-size: var(--text-14-regular); line-height: var(--text-14-regular--line-height); color: var(--text-main-weak); }
.empty .empty-title { font-size: var(--text-15-bold); font-weight: var(--text-15-bold--font-weight); color: var(--text-main-strong); }

/* Tables: native cells wearing the Mentha data grid's paint (header 32px, rows 40px, hairline separators). */
.mt-table table { border-collapse: separate; border-spacing: 0; width: 100%; }
.mt-table th { height: 32px; padding: 0 16px; text-align: start; font-size: var(--text-13-bold); font-weight: var(--text-13-bold--font-weight); line-height: var(--text-13-bold--line-height); color: var(--text-main-weak); white-space: nowrap; background: var(--surface-main-surface-sunken-1); }
.mt-table th:first-child { padding-inline-start: 12px; }
.mt-table thead tr th { position: relative; }
.mt-table thead { background: var(--surface-main-surface-sunken-1); }
.mt-table > div { background: var(--surface-main-surface-sunken-1); box-shadow: none; }
.mt-table tbody { background: var(--surface-main-surface-0); box-shadow: var(--shadow-weak); border-radius: var(--radius-6); }
.mt-table tbody td { padding: 10px 16px; vertical-align: middle; font-size: var(--text-14-regular); line-height: var(--text-14-regular--line-height); background-image: linear-gradient(to top, var(--stroke-main-base) var(--hairline), transparent var(--hairline)); }
.mt-table tbody td:first-child { padding-inline-start: 12px; }
.mt-table tbody tr:last-child td { background-image: none; }
.mt-table tbody tr:first-child td:first-child { border-start-start-radius: var(--radius-6); }
.mt-table tbody tr:first-child td:last-child { border-start-end-radius: var(--radius-6); }
.mt-table tbody tr:last-child td:first-child { border-end-start-radius: var(--radius-6); }
.mt-table tbody tr:last-child td:last-child { border-end-end-radius: var(--radius-6); }
.mt-table tbody tr:hover td { background-color: color-mix(in srgb, rgb(from var(--surface-hover-base) r g b / 1) 2%, var(--surface-main-surface-0)); }
.mt-table tbody tr.group td { padding: 6px 16px; font-size: var(--text-13-bold); font-weight: var(--text-13-bold--font-weight); color: var(--text-main-weak); background-color: var(--surface-main-surface-1); }
.mt-table tbody tr.group td:first-child { padding-inline-start: 12px; }
.mt-table tbody tr.denied td { background-color: var(--surface-alert-destructive); }
.mt-table td.num, .mt-table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.mt-table td.actions { text-align: end; white-space: nowrap; padding-block: 4px; }
.mt-table td.nowrap, .mt-table td.rel { white-space: nowrap; }
.mt-table td.what { min-width: 16rem; }
.mt-table td.actions > div { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.mt-table td.check, .mt-table th.check { width: 28px; padding-inline-end: 0; }
.mt-table .link { color: var(--text-main-strong); font-weight: var(--text-14-bold--font-weight); }
.mt-table .link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--stroke-main-strong); }
.mt-table .sub { font-size: var(--text-13-regular); line-height: var(--text-13-regular--line-height); color: var(--text-main-weak); }
.mt-table .tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* App groups on Your apps */
.appgroup { display: flex; flex-direction: column; gap: 10px; }
.appgroup-head { display: flex; align-items: center; gap: 12px; }
.appgroup-head h2 { font-size: var(--text-15-bold); font-weight: var(--text-15-bold--font-weight); line-height: var(--text-15-bold--line-height); color: var(--text-main-strong); }
.appgroup-head .meta { display: flex; flex-direction: column; min-width: 0; }
.appgroup-head .meta span { font-size: var(--text-13-regular); line-height: var(--text-13-regular--line-height); color: var(--text-main-weak); }

/* Menu on <details>: popup placement; paint comes from the recipe. */
details.menu > summary { list-style: none; }
details.menu > [data-menu-popup] { top: 100%; width: max-content; max-width: 20rem; }
details.menu [role="menuitem"] { white-space: nowrap; }
details.menu > [data-menu-popup][data-align="end"] { inset-inline-end: 0; }
details.menu > [data-menu-popup][data-align="start"] { inset-inline-start: 0; }
details.menu form { display: contents; }
details.menu [role="menuitem"]:hover:not([data-disabled]), details.menu [role="menuitem"]:focus-visible:not([data-disabled]) { background: var(--surface-hover-base); color: var(--text-main-strong); }
details.menu [role="menuitem"][data-highlighted]:not([data-disabled]) { background: var(--surface-hover-base); color: var(--text-main-strong); }

/* Confirm dialog on <dialog>: the popup recipe paints the panel, this resets the element. */
.portal-dialog { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); margin: auto; color: inherit; }
.portal-dialog::backdrop { background: var(--surface-elements-backdrop); }
.portal-dialog[open] { display: flex; }

/* Collapsible subsections on the version page */
details.subsection > summary { display: flex; align-items: center; gap: 6px; height: 32px; font-size: var(--text-14-bold); font-weight: var(--text-14-bold--font-weight); color: var(--text-main-strong); border-radius: var(--radius-6); padding: 0 6px; margin: 0 -6px; width: fit-content; }
details.subsection > summary:hover { background: var(--surface-hover-base); }
details.subsection > summary::before { content: ""; width: 6px; height: 6px; border-inline-end: 1.5px solid var(--icon-main-weak); border-bottom: 1.5px solid var(--icon-main-weak); transform: rotate(-45deg); margin-inline-end: 6px; transition: transform 150ms ease-out; }
details.subsection[open] > summary::before { transform: rotate(45deg); }
details.subsection > :not(summary) { margin-top: 10px; }
details.collapse > summary { font-size: var(--text-13-bold); font-weight: var(--text-13-bold--font-weight); color: var(--text-main-strong); cursor: default; }
details.collapse > summary:hover { color: var(--text-main-base); }

/* Dropzones on the version page */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; padding: 16px; text-align: center; border-radius: var(--radius-6); background: var(--surface-main-surface-2); box-shadow: var(--shadow-weak); font-size: var(--text-13-regular); line-height: var(--text-13-regular--line-height); color: var(--text-main-base); background-image: repeating-linear-gradient(0deg, transparent, transparent); }
.drop::after { content: ""; position: absolute; inset: 4px; border-radius: var(--radius-4); border: 1px dashed var(--stroke-main-strong); pointer-events: none; }
.drop:hover { background: color-mix(in srgb, rgb(from var(--surface-hover-base) r g b / 1) 2%, var(--surface-main-surface-2)); }
.drop:has(input:focus-visible) { box-shadow: var(--shadow-weak-focus); }
.drop input[type="file"] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.drop img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--radius-6); }
.drop.small { min-height: 56px; flex-direction: row; }
.drop .dim { color: var(--text-main-weak); }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-6); box-shadow: var(--shadow-weak); }
/* Screenshot uploads: file, alt text and title per row; the version page's list with captions and reordering. */
.shot-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
/* In the version page's side card the upload rows stack: file, then alt text, then title */
.media-card .shot-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.media-list { display: flex; flex-direction: column; gap: 8px; }
.media-item { display: grid; grid-template-columns: auto 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px; border-radius: var(--radius-6); background: var(--surface-main-surface-2); box-shadow: var(--shadow-weak); }
.media-item img { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-4); }
.media-item.dragging { opacity: 0.5; }
.media-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.media-actions { gap: 4px; }
.media-handle { align-self: center; cursor: grab; padding: 4px 2px; color: var(--text-main-weak); letter-spacing: -2px; user-select: none; }
@media (max-width: 640px) {
	.shot-row { grid-template-columns: minmax(0, 1fr); }
	.media-item { grid-template-columns: auto 72px minmax(0, 1fr); }
	.media-item img { width: 72px; }
}

/* Chip pickers (Checkbox card variant + Badge type) */
.chips { display: flex; flex-direction: column; gap: 8px; }
.chips-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chips-toolbar .count { margin-inline-start: auto; font-size: var(--text-13-regular); color: var(--text-main-weak); }
.chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-group-label { font-size: var(--text-13-bold); font-weight: var(--text-13-bold--font-weight); color: var(--text-main-weak); min-width: 3rem; }
.chip { display: inline-flex !important; align-items: center !important; gap: 8px; padding: 5px 8px 5px 6px !important; }
.chip > span:last-child { font-size: var(--text-13-bold); font-weight: var(--text-13-bold--font-weight); color: var(--text-main-strong); white-space: nowrap; }
.chip.hidden { display: none !important; }

/* Locked (read-only) values in forms */
.locked { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; border-radius: var(--radius-6); background: var(--surface-main-surface-sunken-1); color: var(--text-main-base); font-size: var(--text-14-regular); }
.locked .lock { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-13-regular); color: var(--text-main-weak); }
.locked .lock svg { width: 14px; height: 14px; }

/* Sticky form action bar */
.formbar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 12px 0; background: var(--formbar-bg, var(--surface-main-surface-0)); background-image: linear-gradient(to bottom, var(--stroke-main-base) var(--hairline), transparent var(--hairline)); }
.formbar .muted { font-size: var(--text-13-regular); }
.form-section { display: flex; flex-direction: column; gap: 14px; }
.form-section-head { display: flex; flex-direction: column; gap: 2px; }
.form-section-head p { font-size: var(--text-13-regular); line-height: var(--text-13-regular--line-height); color: var(--text-main-weak); }
.field-meta { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-13-regular); line-height: var(--text-13-regular--line-height); color: var(--text-main-weak); }
.counter { font-variant-numeric: tabular-nums; margin-inline-start: auto; white-space: nowrap; }
.video-thumb { width: 160px; border-radius: var(--radius-6); box-shadow: var(--shadow-weak); margin-top: 4px; }
.req { color: var(--text-alert-destructive); font-weight: 500; }

/* Login */
.login { min-height: calc(100dvh - 52px); display: flex; align-items: flex-start; justify-content: center; padding: 72px 24px; }
.login-box { width: 100%; max-width: 20rem; display: flex; flex-direction: column; gap: 20px; }
.login-box h1 { text-align: center; font-size: var(--text-h4); line-height: var(--text-h4--line-height); font-weight: var(--text-h4--font-weight); color: var(--text-main-strong); }
.login-box .lede { text-align: center; font-size: var(--text-14-regular); line-height: var(--text-14-regular--line-height); color: var(--text-main-base); }

/* Activity filters */
.filters { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.filters > * { min-width: 12rem; }

/* CSV preview */
pre.tpl { padding: 10px 12px; border-radius: var(--radius-6); background: var(--surface-main-surface-sunken-1); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--text-main-base); overflow-x: auto; white-space: pre; }
.errs { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-13-regular); color: var(--text-alert-destructive); }

@media (max-width: 860px) {
	.two, .grid-form, .stats { grid-template-columns: minmax(0, 1fr); }
	.shell-banner { padding: 12px 16px 0; }
	.shell-header { padding: 0 16px; gap: 12px; }
	.shell-email { display: none; }
	.page { padding: 20px 16px 96px; }
}
@media (max-width: 560px) {
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Client-side navigation: 2px progress bar (after 150 ms) and a short cross-fade between pages. */
.nav-progress { position: fixed; inset: 0 auto auto 0; z-index: 1000; height: 2px; width: 0; background: var(--surface-brand-base); opacity: 0; transition: width 6s cubic-bezier(0.1, 0.6, 0.2, 1), opacity 150ms ease; pointer-events: none; }
.nav-progress.on { opacity: 1; width: 85%; }
.nav-progress.done { width: 100%; transition: width 120ms ease-out, opacity 200ms ease 100ms; opacity: 0; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; animation-timing-function: ease; }
main:focus { outline: none; }

/* Tabs underline and SegmentedControl pill: painted by CSS on the selected item (same height, colour
   and offset as Mentha's measured indicator), so they cannot desync from the selection. */
[data-tabs-list] > a[data-active]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--stroke-main-stronger); print-color-adjust: exact; }
[data-segmented] > label[data-checked] { background: var(--surface-main-surface-2); box-shadow: var(--shadow-part-layer-1), var(--shadow-part-border), var(--shadow-part-inset); }
@media (forced-colors: active) { [data-segmented] > label[data-checked] { outline: 1px solid; } }

/*
 * Synopsys brand layer: the Brand Identity Guidelines' look on Mentha's components. White pages, Synopsys
 * Purple title bands with white type and the Light Purple wedge (the guide's design element, sheared 17.7°),
 * Roboto set to the guide's hierarchy (large headline, subheads, body), neutral greys, and purple only where
 * it means something: actions, selection, the current tab. No decorative stripes on cards or rows.
 */
:root { --surface-main-surface-0: #ffffff; --band: #5a2a82; --band-wedge: #7e45af; --band-text: rgb(255 255 255 / 0.86); }
.dark { --surface-main-surface-0: var(--grey-2); }
body { overflow-x: clip; }

/* Demo banner: one slim line in the darkest purple tint, white text (16.2:1), like the docs site's banner */
.shell-banner { padding: 6px 24px; background: #2d1541; color: #ffffff; text-align: center; font-size: var(--text-13-regular); line-height: var(--text-13-regular--line-height); }
.shell-banner strong { font-weight: 600; }

/* Header: taller for the 40px lockup; the current tab is marked in Synopsys Purple */
.shell-header { height: 64px; }
[data-tabs-list] > a[data-active]::after { height: 2px; background: var(--surface-brand-base); }

/* Title band. Spans the window while its content keeps the page's width and alignment. */
/* The wedge is a clip-path polygon inside the band (about 17.7° over a band this tall), so the band needs no
   overflow clipping and its menus can open past its edge. */
.page-head.band { position: relative; margin: -28px calc(50% - 50vw) 28px; padding: 36px calc(50vw - 50%); background: var(--band); color: #ffffff; }
.page-head.band::after { content: ""; position: absolute; inset: 0; background: var(--band-wedge); clip-path: polygon(calc(100% - 5rem) 0, 100% 0, 100% 100%, calc(100% - 8rem) 100%); pointer-events: none; z-index: 0; }
.page-head.band > * { position: relative; z-index: 1; }
.page-head.band:has(details[open]) { z-index: 30; }
.band .page-title { gap: 8px; max-width: min(48rem, 100%); }
.band .page-title h1 { color: #ffffff; font-size: 32px; line-height: 40px; letter-spacing: -0.01em; font-weight: 600; }
.band .page-title p { color: var(--band-text); font-size: var(--text-15-regular); line-height: var(--text-15-regular--line-height); }
.band .crumb, .band .muted { color: var(--band-text); }
.band .crumb:hover { color: #ffffff; }
.band [data-status] { background: #ffffff; }
.band [data-testid="publish-needs"] { color: var(--band-text); }
/* Buttons on the band: the brand button turns white with purple type (10.1:1); ghost buttons are white */
.band .bg-surface-brand-base:not([role="menu"] *) { background: #ffffff !important; color: var(--band) !important; box-shadow: none; }
.band .bg-surface-brand-base:hover { background: #eeeaf2 !important; }
.band .bg-surface-brand-base svg { color: var(--band) !important; }
.band .text-text-main-base:not([role="menu"] *), .band .text-text-main-base:not([role="menu"] *) svg { color: #ffffff !important; }
.band .text-text-main-base:not([role="menu"] *):hover { background: rgb(255 255 255 / 0.12) !important; }
@media (max-width: 1100px) { .page-head.band::after { display: none; } }

/* Admin pages: the band first, then the section tabs */
.admin-shell > .page-head { order: -1; margin-bottom: 0; }

/* Headings below the band: the guide's subheads */
.card-title, .section-title { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; color: var(--text-main-strong); }

/* Admin figures: large light numerals in purple, as the guide sets figures */
.stat { background: var(--surface-main-surface-0); box-shadow: inset 0 0 0 1px var(--stroke-main-base); }
.stat b { font-size: 40px; line-height: 44px; font-weight: 300; letter-spacing: -0.02em; color: var(--brand-11); }

/* Sign-in as a cover page */
/* Full window under the header: out of the page column, over its padding */
.login { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100dvh - 64px - 30px); margin: -28px calc(50% - 50vw) -96px; padding: 0; align-items: stretch; justify-content: stretch; }
.login-cover { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 64px max(56px, calc((100vw - 72rem) / 2)); background: var(--band); color: #ffffff; }
.login-cover::after { content: ""; position: absolute; top: 0; bottom: 0; right: -5rem; width: 12rem; background: var(--band-wedge); transform: skewX(-17.7deg); pointer-events: none; }
.login-cover > * { position: relative; z-index: 1; max-width: 24rem; }
.login-kicker { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--band-text); }
.login-headline { font-size: 36px; line-height: 44px; font-weight: 600; letter-spacing: -0.01em; }
.login-copy { font-size: 16px; line-height: 24px; color: var(--band-text); }
.login-form { display: flex; align-items: center; justify-content: center; padding: 56px 24px; }
.login-box h1, .login-box .lede { text-align: left; }
.login-box h1 { font-size: 24px; line-height: 32px; font-weight: 600; }
@media (max-width: 860px) {
	.login { grid-template-columns: minmax(0, 1fr); min-height: 0; margin: -20px -16px -96px; }
	.login-cover { padding: 32px 24px; gap: 8px; }
	.login-cover::after { width: 6rem; right: -3rem; }
	.login-headline { font-size: 28px; line-height: 34px; }
	.login-copy { display: none; }
	.login-form { padding: 32px 24px 64px; }
	.shell-banner { padding: 6px 16px; }
	.page-head.band { padding-block: 28px; margin-top: -20px; }
	.band .page-title h1 { font-size: 26px; line-height: 32px; }
}
/* Dates stay on one line in tables (they scroll sideways on phones instead) */
td.mono { white-space: nowrap; }
/* Phones: the header keeps the logo, the tabs and Sign out; the banner says it in a few words */
.shell-banner-short { display: none; }
@media (max-width: 640px) {
	.shell-account a[href^="/auth/login?switch"] { display: none; }
	.shell-banner-long { display: none; }
	.shell-banner-short { display: inline; }
}

/* Uploads: the logo on a square tile beside its button; screenshots dropped in, then one card each */
.file-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; }
.hint { font-size: var(--text-13-regular); line-height: var(--text-13-regular--line-height); color: var(--text-main-weak); }
.logo-picker { display: flex; align-items: center; gap: 16px; }
.logo-tile { flex: none; display: grid; place-items: center; width: 80px; height: 80px; overflow: hidden; border-radius: var(--radius-8); background: #ffffff; box-shadow: inset 0 0 0 1px var(--stroke-main-base); }
.logo-tile img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.logo-empty { color: var(--text-main-weak); }
.logo-empty svg { width: 28px; height: 28px; }
.dark .logo-tile:has(.logo-empty) { background: var(--surface-main-surface-1); }
.logo-picker-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.logo-picker-button { position: relative; cursor: pointer; }
.logo-picker-button:has(input:focus-visible) { box-shadow: var(--shadow-weak-focus); }

.uploader-ui { display: flex; flex-direction: column; gap: 10px; }
.uploader-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; border: 1px dashed var(--stroke-main-strong); border-radius: var(--radius-8); background: var(--surface-main-surface-1); text-align: center; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; }
.uploader-drop:hover, .uploader-drop.is-over { border-color: var(--surface-brand-base); background: var(--surface-brand-weaker); }
.uploader-drop:has(input:focus-visible) { box-shadow: var(--shadow-weak-focus); }
.uploader-drop[hidden] { display: none; }
.uploader-drop-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--brand-3); color: var(--brand-11); }
.uploader-drop-icon svg { width: 18px; height: 18px; }
.uploader-drop-title { font-size: var(--text-14-regular); line-height: var(--text-14-regular--line-height); color: var(--text-main-base); }
.uploader-drop-title strong { font-weight: 600; color: var(--text-main-strong); }
.uploader-browse { color: var(--brand-11); text-decoration: underline; text-underline-offset: 2px; }
.uploader-list { display: flex; flex-direction: column; gap: 8px; }
.uploader-list:empty { display: none; }
.uploader-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 10px; border-radius: var(--radius-8); background: var(--surface-main-surface-1); box-shadow: inset 0 0 0 1px var(--stroke-main-base); }
.uploader-thumb { width: 112px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-6); background: var(--surface-main-surface-sunken-1); }
.uploader-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uploader-file { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.uploader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-14-bold); font-weight: 600; color: var(--text-main-strong); }
.uploader-errors { font-size: var(--text-13-regular); color: var(--text-alert-destructive); }
.media-card .uploader-item { grid-template-columns: 72px minmax(0, 1fr); }
.media-card .uploader-thumb { width: 72px; }
.media-card .uploader-item > [data-remove] { grid-column: 2; justify-self: start; }
@media (max-width: 640px) {
	.uploader-item { grid-template-columns: 72px minmax(0, 1fr); }
	.uploader-thumb { width: 72px; }
	.uploader-item > [data-remove] { grid-column: 2; justify-self: start; }
}
/* Secondary buttons on the band: translucent white, so the one solid white button is the main action */
.band .bg-surface-main-surface-2:not([role="menu"]):not([role="menu"] *) { background: rgb(255 255 255 / 0.14) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
.band .bg-surface-main-surface-2:not([role="menu"]):not([role="menu"] *):hover { background: rgb(255 255 255 / 0.22) !important; }
/* Once screenshots are in the list, the drop zone becomes one compact row under them */
.uploader-list:not(:empty) + .uploader-drop { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; padding: 14px 16px; }
.uploader-list:not(:empty) + .uploader-drop .uploader-drop-icon { width: 28px; height: 28px; }

/* Video links: one input per link, Remove beside each */
.url-list { display: flex; flex-direction: column; gap: 8px; }
.url-rows { display: flex; flex-direction: column; gap: 8px; }
.url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.url-list [data-url-add] { align-self: flex-start; }