/* Minimal baseline — a design pass is a separate follow-up (see TODO §7). */

* {
	box-sizing: border-box;
}

body {
	font-family: system-ui, sans-serif;
	/* Top margin reserves room for the fixed-position logo (see bootstrap.css's #skye-logo), so the
	   content container starts below it at every width above the small-viewport breakpoint. */
	margin: 5rem 2rem 0 2rem;
	color: var(--text-primary);
	background-image: url("/assets/skye.webp");
	background-size: cover;
	min-height: calc(100svh - 2rem);
}

/* view.css also sets `body` margin (it styles the sandboxed view frame too, so it can't be changed there).
   `html body` outranks its plain `body` rule, so the top reserve for the fixed logo holds on every page. */
@media (min-width: 701px) {
	html body {
		margin-top: 5rem;
		/* The base body min-height assumed a 2rem top margin; shrink it by the extra 3rem so the body
		   (margin + min-height) still fits exactly one viewport and doesn't force a scrollbar.
		   Min-height is only a floor, so taller content still scrolls. */
		min-height: calc(100svh - 5rem);
		/* A little background stays visible below the container once the page scrolls. Padding rather
		   than margin, since a bottom margin can collapse through <html>. Border-box sizing (set
		   globally above) means this doesn't push the short-page height past one viewport. */
		padding-bottom: 2rem;
	}
}

#skye-app {
	background: var(--background);
	padding: 20px 30px;
	border-radius: 8px;
	max-width: 1000px;
	margin: 0 auto;
}

/* Pages ship every state in the markup and toggle it with `hidden` (see lib/ui/pageState.ts) —
   make sure nothing overrides that back to visible. */
[hidden] {
	display: none !important;
}

.skye-form {
	container-type: inline-size;
}

.skye-form__tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.skye-form__tabs button {
	padding: 10px 20px;
	justify-content: center;
	align-items: center;
	border-radius: var(--border-radius);
	background: var(--background-lightest);
	color: var(--text-primary);
	/* clip-path: polygon(15.709% 46.281%, 0.877% 8.982%, 0.877% 8.982%, 0.548% 7.925%, 0.346% 6.774%, 0.263% 5.579%, 0.292% 4.388%, 0.424% 3.247%, 0.652% 2.207%, 0.967% 1.313%, 1.363% 0.616%, 1.83% 0.162%, 2.36% 0%, 79.847% 0%, 79.847% 0%, 80.013% 0.017%, 80.177% 0.066%, 80.338% 0.147%, 80.496% 0.259%, 80.65% 0.401%, 80.798% 0.574%, 80.941% 0.775%, 81.078% 1.004%, 81.208% 1.261%, 81.33% 1.544%, 99.12% 46.281%, 99.12% 46.281%, 99.34% 46.933%, 99.512% 47.646%, 99.635% 48.405%, 99.708% 49.195%, 99.733% 50%, 99.708% 50.805%, 99.635% 51.595%, 99.512% 52.354%, 99.34% 53.067%, 99.12% 53.719%, 81.33% 98.456%, 81.33% 98.456%, 81.208% 98.739%, 81.078% 98.996%, 80.941% 99.225%, 80.798% 99.426%, 80.65% 99.599%, 80.496% 99.741%, 80.338% 99.853%, 80.177% 99.934%, 80.013% 99.983%, 79.847% 100%, 2.36% 100%, 2.36% 100%, 1.83% 99.838%, 1.363% 99.384%, 0.967% 98.687%, 0.652% 97.794%, 0.424% 96.753%, 0.292% 95.612%, 0.263% 94.421%, 0.346% 93.226%, 0.548% 92.075%, 0.877% 91.018%, 15.709% 53.719%, 15.709% 53.719%, 15.93% 53.067%, 16.101% 52.354%, 16.224% 51.595%, 16.298% 50.805%, 16.322% 50%, 16.298% 49.195%, 16.224% 48.405%, 16.101% 47.646%, 15.93% 46.933%, 15.709% 46.281%); */
}
.skye-form__tab--active {
	background: var(--primary-medium) !important;
	color: var(--text-invert) !important;
	font-weight: 600;
}
/* A page with a currently-shown validation error — surfaced on the tab so a problem on a page
   you're not looking at is still visible (renderForm marks this on validation + page switch). */
.skye-form__tabs button.skye-form__tab--error {
	color: var(--danger) !important;
	background: var(--danger-light) !important;
	border: var(--danger) dotted 2px;
}
.skye-form__tabs button.skye-form__tab--error::after {
	content: " ⚠︎";
	color: var(--danger);
}

.skye-form__page {
	padding-bottom: 1rem;
}

.skye-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.skye-field > label,
.skye-field legend {
	font-weight: 600;
	font-size: 0.9rem;
}
.skye-field fieldset {
	display: flex;
	flex-direction: column;
	border: var(--border-size) solid #ddd;
	padding: 0.5rem 0.75rem;
	border: none;
	padding: 0;

	legend {
		margin-bottom: 8px;
	}

	input[type="radio"], input[type="checkbox"] {
		margin-right: 4px;
	}
	
	label:not(:last-child) {
		margin-bottom: 8px;
	}
}

.skye-field__subtitle,
.skye-field__help {
	font-size: 0.8rem;
	color: #666;
}
.skye-field__message {
	font-size: 0.8rem;
	color: var(--danger);
	min-height: 1em;
}

/* Field-level validation — only ever visible once a field has been touched (blurred) or a submit
   was attempted (see renderForm.ts's validateAll/touchedFields), the same "don't flash red on a
   pristine field" idea as CSS's own :user-invalid. Applied via our own .skye-field--invalid class
   as the guaranteed, deterministic layer (driven directly by this app's own touchedFields
   tracking, not a browser heuristic), styled identically across native inputs AND this app's
   custom elements (skye-people-picker etc. — registerElements.ts's SkyeValueElement base class
   now makes these real form-associated custom elements via attachInternals(), so :user-invalid
   below is a free ADDITIONAL native/assistive-tech-facing layer on top of this class, not the
   only thing driving the visible styling — kept deliberately identical to .skye-field--invalid's
   own rules so the two can never visually disagree). The custom-element tag list here is the
   actual set from fieldRegistry.ts — skye-calculated-display is deliberately excluded, since it's
   a read-only derived display that's never itself validated (see validateFormValues.ts's own
   skip list). */
.skye-field--invalid input,
.skye-field--invalid select,
.skye-field--invalid textarea,
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
	border-color: var(--danger);
	outline-color: var(--danger);
}
.skye-field--invalid label {
	color: var(--danger);
}

/* skye-richtext and skye-lookup-table have no single native input/select/textarea the rule above
   already reaches (richtext's editor is a contenteditable div; a lookup table has one input per
   row, not one for the whole field) — give the CUSTOM ELEMENT ITSELF a real border here instead,
   since border-color alone (matching the rule above) wouldn't render without an actual
   border/outline already set on it. skye-people-picker/skye-lookup-picker don't need an entry
   here — their inner search <input> is already reached by the rule above. */
.skye-field--invalid > skye-richtext,
.skye-field--invalid > skye-lookup-table,
skye-richtext:user-invalid,
skye-lookup-table:user-invalid {
	border: var(--border-size) solid var(--danger);
}

/* checkbox appearance: "switch" (cosmetic only — see schema's `appearance` property) */
input[type="checkbox"].skye-switch {
	width: 2.5rem;
	height: 1.4rem;
	appearance: none;
	background-color: var(--background-secondary);
	border-radius: 999px;
	position: relative;
	cursor: pointer;
}
input[type="checkbox"].skye-switch:checked {
	background: var(--primary-medium);
}
input[type="checkbox"].skye-switch::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--background-secondary);
	border-radius: 50%;
	transition: transform 0.15s;
}
input[type="checkbox"].skye-switch:checked::before {
	transform: translateX(1.1rem);
}

/* --- new components: minimal, functional styling only --- */

/* status regions are <output> (implicit role=status) — make them block-level like the old <div>s */
.skye-form__status,
.skye-add-site__status,
.skye-create-assets__status {
	display: block;
}
.skye-form__status[data-level="error"] {
	color: var(--danger);
}
.skye-form__status[data-level="warning"] {
	color: #b45309;
}
.skye-form__status[data-level="success"] {
	color: #15803d;
}
.skye-form__submit {
	margin-top: 1rem;
	padding: 0.5rem 1.25rem;
}

.skye-search-picker {
	position: relative;
	display: inline-block;
	width: 100%;
}
.skye-search-picker input {
	width: 100%;
	box-sizing: border-box;
}
.skye-search-picker__dropdown {
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--background-lightest);
	border: var(--border-size) solid var(--border);
	max-height: 12rem;
	overflow-y: auto;
}
.skye-search-picker__dropdown li {
	padding: 0.4rem 0.6rem;
	cursor: pointer;
}
.skye-search-picker__dropdown li:hover {
	background-color: var(--background-light);
}

/* --- file field ("Poster"): a tall drag-and-drop zone that fills its (possibly row-spanning) grid cell --- */
.skye-field--file {
	height: 100%;
}
.skye-file-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex: 1 1 auto;
	min-height: 12rem;
	height: 100%;
	width: 100%;
	padding: 1.25rem;
	border: 2px dashed var(--border);
	border-radius: 10px;
	background: var(--background-secondary);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.skye-file-upload:hover {
	background-color: var(--primary-lightest);
}
.skye-file-upload--dragover {
	border-color: var(--primary-medium);
	background-color: var(--primary-light);
}
.skye-file-upload input[type="file"] {
	width: 100%;
	max-width: 22rem;
	cursor: pointer;
}

/* --- file field preview: shown once a file is picked, either a thumbnail (images) or a generic icon --- */
.skye-file-upload__preview {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 22rem;
	padding: 0.5rem 0.75rem;
	background: var(--background-lightest);
	border: var(--border-size) solid var(--border);
	border-radius: var(--border-radius);
}
.skye-file-upload__thumb {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}
.skye-file-upload__icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}
.skye-file-upload__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}
.skye-file-upload__name {
	font-size: 0.9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.skye-file-upload__size {
	font-size: 0.8rem;
	color: var(--text-secondary);
}
.skye-file-upload__remove {
	flex-shrink: 0;
	border: none;
	background: none;
	color: var(--text-secondary);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem;
}
.skye-file-upload__remove:hover {
	color: var(--danger);
}

/* --- token / chip picker: people picked as discrete removable units (no delimiters for the user) --- */
.skye-token-picker {
	position: relative;
	display: block;
	width: 100%;
}
.skye-token-picker__box {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	padding: 0.125rem;
	border: var(--border-size) solid var(--border);
	border-radius: var(--border-radius);
	background-color: var(--background-lightest);
}
.skye-token-picker__box input {
	outline: none;
	box-shadow: none;
}

.skye-token-picker__box input {
	background-color: var(--background-lightest);
}

.skye-token-picker__box:focus-within {
	outline: 2px solid var(--primary-medium);
	outline-offset: var(--border-size);
}
.skye-token {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0 0.15rem 0 0.55rem;
	background: var(--primary-lightest);
	border: var(--border-size) solid var(--primary-medium);
	border-radius: 999px;
	font-size: 0.85rem;
	line-height: 1.4;
}
.skye-token__remove {
	border: none;
	background: var(--primary-light);
	color: var(--primary-medium);
	cursor: pointer;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	font-size: 0.9rem;
	line-height: 1;
	display: inline-grid;
	place-items: center;
	padding: 0;
	margin: 2px;
	padding-bottom: 2px;
}
.skye-token__remove:hover {
	background: var(--primary-medium);
	color: white;
}
.skye-token-picker__input {
	flex: 1 1 6rem;
	min-width: 6rem;
	border: none;
	outline: none;
	padding: 0.25rem;
	font: inherit;
	background: transparent;
	margin: 0;
}
.skye-token-picker__dropdown {
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	margin: 0.15rem 0 0;
	padding: 0;
	list-style: none;
	background-color: var(--background-lightest);
	border: var(--border-size) solid var(--border);
	border-radius: var(--border-radius);
	max-height: 12rem;
	overflow-y: auto;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.skye-token-picker__dropdown li {
	padding: 0.45rem 0.6rem;
	cursor: pointer;
}
.skye-token-picker__dropdown li:hover,
.skye-token-picker__dropdown li[aria-selected="true"] {
	background-color: var(--primary-lightest);
}

/* --- multi-select dropdown: replaces a vertical checkbox list; opens a checkable option list --- */
.skye-multi-select {
	position: relative;
	display: block;
	width: 100%;
}
.skye-multi-select__trigger {
	width: 100%;
	text-align: left;
	padding: 0.35rem;
	border: var(--border-size) solid var(--border);
	border-radius: var(--border-radius);
	background-color: var(--background-lightest);
	cursor: pointer;
	font: inherit;
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	align-items: center;
	color: var(--text-primary);
}
.skye-multi-select__trigger:hover,
.skye-multi-select__trigger:focus-visible,
.skye-multi-select__trigger[aria-expanded="true"] {
	background-color: var(--background-lightest);
	color: var(--text-primary);
}

.skye-multi-select__trigger:focus-visible {
	outline: 2px solid #ccc;
}
.skye-multi-select__trigger[aria-expanded="true"] {
	border-color: var(--border);
}
.skye-multi-select__caret {
	color: #888;
}
.skye-multi-select__placeholder {
	color: #767680;
}
.skye-multi-select__panel {
	position: absolute;
	z-index: 1000;
	left: 0;
	right: 0;
	margin: 0.15rem 0 0;
	padding: 0.25rem;
	list-style: none;
	background-color: var(--background-lightest);
	border: var(--border-size) solid var(--border);
	border-radius: var(--border-radius);
	max-height: 14rem;
	overflow-y: auto;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.skye-multi-select__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.5rem;
	cursor: pointer;
	border-radius: 4px;
}
.skye-multi-select__option:hover {
	background-color: var(--background-light);
}
.skye-multi-select__option input {
	margin: 0;
}

.skye-lookup-table {
	overflow: scroll;
	max-width: 100cqw;
}

.skye-lookup-table table {
	border-collapse: collapse;
	overflow: scroll;
	margin-bottom: 0.5rem;
	border-radius: var(--border-radius);
	border-collapse: separate;
	border-spacing: 0;

	td {
		border-style: solid none none solid;
	}

	td:last-child {
		border-style: solid solid none solid;
	}

	tr:last-child td {
		border-bottom-style: solid;
	}

	th {
		border-style: solid none solid solid;
		background-color: var(--background-secondary);
	}

	th:last-child {
		border-right-style: solid;
		border-top-right-radius: var(--border-radius);
	}

	th:first-child {
		border-top-left-radius: var(--border-radius);
	}

	tr:last-child td:first-child {
		border-bottom-left-radius: var(--border-radius);
	}

	tr:last-child td:last-child {
		border-bottom-right-radius: var(--border-radius);
	}
}
.skye-lookup-table th,
.skye-lookup-table td {
	border: var(--border-size) solid var(--border);
}

.skye-lookup-table td {
	padding: 0;
	max-height: fit-content;
}

.skye-lookup-table td,
.skye-lookup-table th {
	border-style: none solid solid none;
}

.skye-lookup-table td > input,
.skye-lookup-table td > select,
.skye-lookup-table td > [class^=".skye-"] {
	border-radius: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	border: none;
	background: transparent;
}

.skye-lookup-table td:last-child > button {
	margin: 0;
	background: transparent;
	color: var(--primary-medium);
	border: none;
	border-radius: 0;
}

.skye-richtext__toolbar-placeholder {
	display: flex;
	gap: 0.4rem;
	padding: 0.35rem;
	background: #f3f4f6;
	border: var(--border-size) solid var(--border);
	border-bottom: none;
}
.skye-richtext__toolbar-placeholder span {
	display: inline-block;
	width: 1.5rem;
	height: 1.2rem;
	background: #d1d5db;
	border-radius: 3px;
}
.skye-richtext__editor {
	border: var(--border-size) solid var(--border);
	min-height: 4rem;
	padding: 0.4rem;
}

.skye-form__draft-banner {
	background: #fef9c3;
	border: var(--border-size) solid #eab308;
	padding: 0.5rem 0.75rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
}
.skye-form__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
	align-items: center;
}
.skye-form__nav-link {
	display: inline-block;
	font-size: 0.85rem;
}

.skye-form__submitted-message {
	display: block;
	margin-bottom: 1rem;
}
.skye-form__submitted-message[data-level="warning"] {
	color: #b45309;
}
.skye-form__submitted-message[data-level="success"] {
	color: #15803d;
}
.skye-form__submitted-actions {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.skye-form__submitted-action {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border: var(--border-size) solid var(--border);
	text-decoration: none;
}

.skye-site-switcher ul {
	list-style: none;
	padding: 0;
}
.skye-site-switcher li {
	margin-bottom: 0.5rem;
}
.skye-site-switcher button {
	padding: 0.5rem 1rem;
	width: 100%;
	text-align: left;
}
.skye-picker-kind {
	color: #666;
	font-size: 0.8rem;
	margin-left: 0.4rem;
}
.skye-picker-create {
	margin-top: 1rem;
	padding: 0.5rem 1rem;
}

/* "Set up SKYE on another site" panel */
.skye-add-site {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: var(--border-size) solid #ddd;
}
.skye-add-site h3 {
	font-size: 1rem;
	margin-bottom: 0.25rem;
}
.skye-add-site p {
	font-size: 0.85rem;
	color: #666;
	margin: 0 0 0.5rem;
}
.skye-add-site__form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.skye-add-site__input {
	flex: 1 1 20rem;
	padding: 0.45rem 0.6rem;
}
.skye-add-site__button {
	padding: 0.45rem 1rem;
}
.skye-add-site__status {
	font-size: 0.85rem;
	min-height: 1.2em;
	margin-top: 0.5rem;
}
.skye-add-site__status[data-level="error"] {
	color: var(--danger);
}
.skye-add-site__status[data-level="success"] {
	color: #15803d;
}

/* "Manage permissions" step, shown after a new site is set up */
.skye-permissions-step p,
.skye-create-assets p {
	max-width: 42rem;
}
.skye-permissions-step__link {
	display: inline-block;
	margin: 0.5rem 0 1rem;
	font-weight: 600;
}
.skye-permissions-step__done {
	display: block;
	padding: 0.5rem 1.25rem;
}

/* "Create Site Assets first" step */
.skye-create-assets__link {
	display: inline-block;
	margin: 0.5rem 0 1rem;
	font-weight: 600;
}
.skye-create-assets__row {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.skye-create-assets__row button {
	padding: 0.45rem 1rem;
}
.skye-create-assets__status {
	font-size: 0.85rem;
	min-height: 1.2em;
	margin-top: 0.5rem;
}
.skye-create-assets__status[data-level="error"] {
	color: var(--danger);
}

/* diag.astro's results table — reuses the same data-level color convention as .skye-form__status */
table {
	border-collapse: collapse;
	width: 100%;
	margin-top: 1.5rem;
	font-size: 0.9rem;
}
th,
td {
	border: var(--border-size) solid #ddd;
	padding: 0.4rem 0.6rem;
	text-align: left;
	vertical-align: top;
}
td[data-level="success"] {
	color: #15803d;
}
td[data-level="error"] {
	color: var(--danger);
}

/* --------------------------------------------------------------------------
   Responsive / small-screen (phones, narrow SharePoint side panels).
   A page's grid — its column count and gridTemplateAreas — is applied as an
   INLINE style by layoutEngine.ts / renderForm's showPage(). The inactive
   tab pages are hidden with an inline `display:none` (NOT the [hidden]
   attribute), and the active one carries inline `display:grid`. So this
   block must NOT touch `display` at all — overriding it would re-show every
   tab. It only collapses the grid TRACKS: one column, no named-area map,
   and each field's inline `grid-area:<fieldKey>` cleared (an unresolved
   area name would otherwise pin every field onto one cell). Result: on the
   visible page the fields stack top-to-bottom by `order`; the hidden pages
   stay hidden.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	body {
		margin: 0;
		background: white;
		height: auto;
	}
	/* The logo is position:fixed on wide screens (floating over the page background). On a narrow
	   screen that overlaps the top of the content, so it moves into normal flow above it instead. */
	#skye-logo {
		position: static;
		display: block;
		margin: 1rem 1rem 0;
	}
	#skye-app {
		padding: 1rem;
		border-radius: 0;
		max-height: none;
		overflow: visible;
	}

	.skye-form__tabs {
		flex-wrap: wrap;
		gap: 0.25rem;
	}
	.skye-form__tabs button {
		padding: 0.5rem 0.75rem;
	}

	.skye-form__page {
		grid-template-columns: 1fr !important;
		grid-template-areas: none !important;
		grid-template-rows: auto !important;
		gap: 1rem !important;
	}
	.skye-form__page > .skye-field,
	.skye-form__page > .skye-field--content {
		grid-area: auto !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}

	/* A row-spanning file drop zone shouldn't stay tall once it's the full width. */
	.skye-file-upload {
		min-height: 8rem;
	}

	/* The lookupTable is genuinely wide (5+ columns) — let it scroll within its
     own field instead of stretching the page past the viewport. */
	.skye-lookup-table {
		overflow-x: auto;
	}
	.skye-lookup-table table {
		min-width: 34rem;
	}
}

/* Never let any field control force the page wider than the screen. */
.skye-field input,
.skye-field select,
.skye-field textarea,
.skye-field skye-people-picker,
.skye-field skye-multi-select,
.skye-field skye-lookup-picker {
	max-width: 100%;
}