/**
 * Athar: the field layer.
 *
 * Two halves in one file, because they dress the same idea:
 *
 *   1. The front end. Every element kind added with the ACF-shaped field layer:
 *      figures, dates, choices, flags, files and the repeater's five row
 *      layouts. Scoped under .athar-scope, colour and type inherited from the
 *      theme exactly as assets/css/athar.css does, currentColor and color-mix
 *      instead of hard-coded ink.
 *
 *   2. The studio. The composer's field pane and row designer, and the project
 *      editor's repeater. Scoped under .athar-app, painted from the --athar-*
 *      tokens so a retuned palette reaches it without this file changing.
 *
 * Every class is prefixed athar-fx- so it can never collide with anything else
 * in the plugin. Logical properties throughout; 1px borders, never shadows; no
 * gradients; no emoji.
 */

/* ==========================================================================
   1. The front end
   ========================================================================== */

/* --------------------------------------------------------------- the tick */

.athar-scope .athar-fx-tick {
	inline-size: 1em;
	block-size: 1em;
	flex: 0 0 auto;
	vertical-align: -0.125em;
}

/* ---------------------------------------------------------------- a flag */

.athar-scope .athar-fx-flag {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

/* -------------------------------------------------------------- a choice */

.athar-scope .athar-fx-choice {
	margin: 0;
}

.athar-scope .athar-fx-choice__caption {
	color: var(--athar-quiet);
}

.athar-scope .athar-fx-choice--badge .athar-fx-choice__value {
	display: inline-block;
	padding-block: 0.25em;
	padding-inline: 0.75em;
	border: 1px solid var(--athar-hairline);
	border-radius: 999px;
	font-size: 0.875em;
	line-height: 1.5;
}

/* -------------------------------------------------------------- a figure */

.athar-scope .athar-fx-figure {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	margin: 0;
}

.athar-scope .athar-fx-figure__value {
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.athar-scope .athar-fx-figure__unit {
	font-size: 0.6em;
	font-weight: 500;
	/* A unit sits beside its figure, not inside it: the space is what keeps
	   "12 weeks" from reading as one number. */
	margin-inline: 0.15em;
	color: var(--athar-quiet);
}

.athar-scope .athar-fx-figure__label {
	font-size: 0.875em;
	color: var(--athar-quiet);
}

/* ---------------------------------------------------------------- a date */

.athar-scope .athar-fx-date {
	margin: 0;
}

.athar-scope .athar-fx-date__caption {
	color: var(--athar-quiet);
}

/* ---------------------------------------------------------------- a file */

.athar-scope .athar-fx-file {
	margin: 0;
}

.athar-scope .athar-fx-file__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.75em;
	padding-block: 0.6em;
	padding-inline: 1em;
	border: 1px solid var(--athar-hairline);
	border-radius: var(--athar-radius);
	text-decoration: none;
}

.athar-scope .athar-fx-file__link:hover,
.athar-scope .athar-fx-file__link:focus-visible {
	border-color: currentColor;
}

.athar-scope .athar-fx-file__name {
	font-weight: 500;
}

.athar-scope .athar-fx-file__meta {
	font-size: 0.8125em;
	color: var(--athar-quiet);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ the rows */

.athar-scope .athar-fx-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.athar-scope .athar-fx-rows--stack {
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

.athar-scope .athar-fx-rows--grid,
.athar-scope .athar-fx-rows--logos {
	grid-template-columns: repeat(var(--athar-fx-across, 3), minmax(0, 1fr));
}

.athar-scope .athar-fx-rows--across-2 { --athar-fx-across: 2; }
.athar-scope .athar-fx-rows--across-3 { --athar-fx-across: 3; }
.athar-scope .athar-fx-rows--across-4 { --athar-fx-across: 4; }
.athar-scope .athar-fx-rows--across-5 { --athar-fx-across: 5; }

.athar-scope .athar-fx-row {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	min-inline-size: 0;
}

.athar-scope .athar-fx-rows--stack .athar-fx-row {
	padding-block-end: clamp(0.75rem, 2vw, 1.25rem);
	border-block-end: 1px solid var(--athar-hairline);
}

.athar-scope .athar-fx-rows--stack .athar-fx-row:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.athar-scope .athar-fx-cell {
	display: block;
	min-inline-size: 0;
	color: var(--athar-quiet);
}

.athar-scope .athar-fx-cell--lead {
	font-size: 1.0625em;
	font-weight: 600;
	color: inherit;
}

.athar-scope .athar-fx-cell--image {
	line-height: 0;
	margin-block-end: 0.35em;
}

.athar-scope .athar-fx-cellimg {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--athar-radius);
}

.athar-scope .athar-fx-celllink {
	font-size: 0.9375em;
}

/* A logo strip is a different animal: marks of wildly different proportions
   have to look like one row, so they are contained rather than cropped and
   given the same box to sit in. */

.athar-scope .athar-fx-rows--logos {
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
}

.athar-scope .athar-fx-rows--logos .athar-fx-row {
	align-items: center;
	text-align: center;
}

.athar-scope .athar-fx-rows--logos .athar-fx-cellimg {
	aspect-ratio: 3 / 2;
	object-fit: contain;
	border-radius: 0;
}

.athar-scope .athar-fx-rows--logos .athar-fx-cell--lead {
	font-size: 0.8125em;
	font-weight: 500;
	color: var(--athar-quiet);
}

@media (max-width: 640px) {
	.athar-scope .athar-fx-rows--grid {
		--athar-fx-across: 1;
	}
	.athar-scope .athar-fx-rows--logos {
		--athar-fx-across: 2;
	}
}

/* ---------------------------------------------------------------- a table */

/* The one shape that will not narrow. It scrolls inside its own box so the
   page never gains a horizontal scrollbar because of it. */
.athar-scope .athar-fx-tablewrap {
	inline-size: 100%;
	max-inline-size: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.athar-scope .athar-fx-table {
	inline-size: 100%;
	border-collapse: collapse;
	text-align: start;
	font-size: 0.9375em;
}

.athar-scope .athar-fx-table th,
.athar-scope .athar-fx-table td {
	padding-block: 0.7em;
	padding-inline: 0.9em;
	border-block-end: 1px solid var(--athar-hairline);
	text-align: start;
	vertical-align: top;
}

.athar-scope .athar-fx-table th {
	font-weight: 600;
	white-space: nowrap;
}

.athar-scope .athar-fx-table tbody tr:last-child td {
	border-block-end: 0;
}

.athar-scope .athar-fx-table .athar-fx-cellimg {
	inline-size: 96px;
	aspect-ratio: 1;
}

/* ------------------------------------------------------------ an accordion */

.athar-scope .athar-fx-faq {
	border-block-start: 1px solid var(--athar-hairline);
}

.athar-scope .athar-fx-faq__item {
	border-block-end: 1px solid var(--athar-hairline);
}

.athar-scope .athar-fx-faq__q {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding-block: 0.9em;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.athar-scope .athar-fx-faq__q::-webkit-details-marker {
	display: none;
}

/* The marker is drawn rather than borrowed, so it points the right way in
   Arabic and rotates on open without the theme having an opinion. */
.athar-scope .athar-fx-faq__q::after {
	content: "";
	inline-size: 0.55em;
	block-size: 0.55em;
	margin-inline-start: auto;
	flex: 0 0 auto;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 160ms ease;
}

.athar-scope .athar-fx-faq__item[open] > .athar-fx-faq__q::after {
	transform: rotate(-135deg);
}

.athar-scope .athar-fx-faq__a {
	padding-block-end: 1em;
	color: var(--athar-quiet);
}

.athar-scope .athar-fx-faq__cell + .athar-fx-faq__cell {
	margin-block-start: 0.6em;
}

@media (prefers-reduced-motion: reduce) {
	.athar-scope .athar-fx-faq__q::after {
		transition: none;
	}
}

/* ==========================================================================
   2. The studio
   ========================================================================== */

/* ------------------------------------------------------- required, counters */

.athar-app .athar-fx-req {
	margin-inline-start: 3px;
	color: var(--athar-accent);
	font-weight: 700;
}

.athar-app .athar-fx-count {
	margin: 4px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--athar-ink-3);
	font-variant-numeric: tabular-nums;
}

.athar-app .athar-fx-count.is-near {
	color: var(--athar-warn);
}

.athar-app .athar-fx-count.is-over {
	color: var(--athar-danger);
	font-weight: 600;
}

.athar-app .athar-fx-groupnote {
	margin: 0 0 var(--athar-step-3);
	font-size: 12px;
	line-height: 1.5;
	color: var(--athar-ink-3);
}

.athar-app .athar-fx-picker__note {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--athar-ink-3);
}

/* -------------------------------------------------------- files, drawings */

.athar-app .athar-fx-filename {
	margin: 0;
	padding: var(--athar-step-2) var(--athar-step-3);
	border: 1px solid var(--athar-border);
	border-radius: var(--athar-radius);
	background: var(--athar-canvas);
	font-size: 12px;
	line-height: 1.5;
	color: var(--athar-ink-2);
	overflow-wrap: anywhere;
}

.athar-app .athar-fx-filename.is-empty {
	color: var(--athar-ink-3);
	font-style: italic;
}

.athar-app .athar-fx-drawprev {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 92px;
	padding: var(--athar-step-2);
	border: 1px solid var(--athar-border);
	border-radius: var(--athar-radius);
	background: var(--athar-canvas);
	color: var(--athar-ink-2);
}

.athar-app .athar-fx-drawprev svg,
.athar-app .athar-fx-drawprev img {
	max-inline-size: 100%;
	max-block-size: 100%;
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

.athar-app .athar-fx-thumbimg {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
}

/* ------------------------------------------------- the editor's repeater */

.athar-app .athar-fx-repeater {
	gap: var(--athar-step-3);
}

.athar-app .athar-fx-rowlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--athar-step-3);
}

.athar-app .athar-fx-row-edit {
	display: flex;
	flex-direction: column;
	gap: var(--athar-step-2);
	padding: var(--athar-step-3);
	border: 1px solid var(--athar-border);
	border-radius: var(--athar-radius);
	background: var(--athar-surface);
}

.athar-app .athar-fx-row__head {
	display: flex;
	align-items: center;
	gap: var(--athar-step-2);
}

.athar-app .athar-fx-row__grip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 22px;
	block-size: 22px;
	flex: 0 0 auto;
	cursor: grab;
	color: var(--athar-ink-3);
}

.athar-app .athar-fx-row__grip:active {
	cursor: grabbing;
}

.athar-app .athar-fx-row__name {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-family: var(--athar-font);
	font-size: 12px;
	font-weight: 600;
	color: var(--athar-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.athar-app .athar-fx-rowfoot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--athar-step-2);
}

.athar-app .athar-fx-rownote {
	font-size: 11px;
	line-height: 1.5;
	color: var(--athar-warn);
}

.athar-app .athar-fx-sub {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* A picture inside a row needs less room than one in a field of its own.
   The row is already a card, and a full-width frame inside it reads as a
   second card. */
.athar-app .athar-fx-sub--image .athar-thumb,
.athar-app .athar-fx-sub--image .athar-thumb img {
	max-block-size: 88px;
}

/* -------------------------------------------- the composer's row designer */

.athar-app .athar-fx-subs {
	display: flex;
	flex-direction: column;
	gap: var(--athar-step-3);
}

.athar-app .athar-fx-sub-card {
	display: flex;
	flex-direction: column;
	gap: var(--athar-step-2);
	padding: var(--athar-step-3);
	border: 1px solid var(--athar-border);
	border-radius: var(--athar-radius);
	background: var(--athar-canvas);
}

.athar-app .athar-fx-sub__head {
	display: flex;
	align-items: center;
	gap: var(--athar-step-2);
}

.athar-app .athar-fx-sub__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	flex: 0 0 auto;
	border: 1px solid var(--athar-border-strong);
	border-radius: 999px;
	font-size: 11px;
	line-height: 1;
	color: var(--athar-ink-3);
	font-variant-numeric: tabular-nums;
}

.athar-app .athar-fx-sub__name {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-family: var(--athar-font);
	font-size: 12px;
	font-weight: 600;
	color: var(--athar-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.athar-app .athar-fx-sub__body {
	display: flex;
	flex-direction: column;
	gap: var(--athar-step-3);
}

.athar-app .athar-fx-file-field {
	gap: var(--athar-step-2);
}