/* ══════════════════════════════════════════════════════════════════════
   FileDrop — WooCommerce File Uploader (Frontend)

   Styles the drag-drop uploader on the single product page.
   Components: drop zone, file table, progress bars, summary, cart list.
   Uses CSS custom properties that inherit from the theme when available,
   falling back to sensible defaults for standalone use.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ───
   Inherit from the active theme's CSS variables when possible (Thread and Film
   defines --color-primary, --radius, etc. in base.css). Fallback values ensure
   the plugin still looks good on themes that don't define these properties. */
.taffd-wrapper {
	--fd-primary: var(--color-primary, #0073aa);
	--fd-accent: var(--color-accent, #2271b1);
	--fd-border: var(--color-border, #ddd);
	--fd-bg: var(--color-bg-alt, #f9f9f9);
	--fd-radius: var(--radius, 6px);
	--fd-text: #333;
	--fd-text-muted: #777;
	--fd-success: #28a745;
	--fd-error: #dc3545;
	--fd-bar: var(--fd-primary);             /* progress bar fill color */

	margin-bottom: 1.5em;
	font-size: 14px;
	color: var(--fd-text);
}

/* ─── Drop Zone ───
   Dashed border area where users drag files or click to browse.
   .hover class is toggled by JS during dragover to provide visual feedback. */

.taffd-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 24px;
	border: 2px dashed var(--fd-border);
	border-radius: var(--fd-radius);
	background: var(--fd-bg);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.taffd-dropzone.hover {
	border-color: var(--fd-primary);
	background: rgba(0, 115, 170, 0.04);
}

.taffd-icon {
	color: var(--fd-text-muted);
	margin-bottom: 4px;
}

.taffd-text {
	color: var(--fd-text-muted);
	font-size: 14px;
}

.taffd-browse-btn {
	display: inline-block;
	padding: 8px 20px;
	background: var(--fd-primary);
	color: #fff;
	border-radius: var(--fd-radius);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.taffd-browse-btn:hover {
	background: var(--fd-accent);
}

.taffd-counter {
	font-size: 12px;
	color: var(--fd-text-muted);
}

/* ─── Notes ───
   Yellow info box below the drop zone showing file requirements
   (accepted formats, max size, min DPI). Warm amber palette for attention. */

.taffd-notes {
	margin: 12px 0;
	padding: 10px 14px;
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: var(--fd-radius);
	font-size: 13px;
	line-height: 1.5;
	color: #5d4037;
}

/* DPI color-code legend (v1.9.2) — a swatch row inside the note box explaining
   the per-card DPI pill colors. Rendered server-side from taffd_get_dpi_tiers()
   so it always matches the admin-configured tier colors/labels. */
.taffd-dpi-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #ffe082;   /* match the note box border */
	font-size: 12px;
}

.taffd-dpi-legend-title {
	font-weight: 700;
}

.taffd-dpi-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.taffd-dpi-legend-swatch {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	flex: none;
}

.taffd-dpi-legend-min {
	color: #8d6e63;                  /* muted, on the warm-brown note palette */
}

/* ─── File Card (v1.8.1) ───
   Each completed upload is a card: a left solid framed placeholder box with
   width/length dimension markers on its edges, and a right info column
   (filename + size + badges, then a labeled field grid and a × remove button).
   Replaces the pre-1.8.1 grid "table" so the layout breathes on desktop and
   matches the uploading row's shape. Only the quantity field is editable. */

.taffd-file-row {
	position: relative;            /* anchors the absolute remove button */
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius);
	background: #fff;
	margin-top: 6px;
	padding: 12px 14px;
	padding-right: 36px;           /* clear the absolute remove button */
	font-size: 13px;
}

/* Left placeholder box — a solid, framed measurement diagram: a generic image
   glyph in the center (::before), with width/length dimension lines +
   arrowheads and value labels around it. A real thumbnail/preview is
   deliberately deferred.

   Deliberately NOT a transparency checkerboard any more. A checkerboard is the
   universal "this image is transparent" signal, but this box is a static
   placeholder that never sees the customer's pixels — so on a file WITH a
   solid background it silently asserted the opposite of the truth, right next
   to the "Background detected" warning that says so. Transparency is reported
   by that warning, which is measured; the box no longer implies anything.

   The arrow color is a one-off literal (acceptable per CSS hygiene). The arrow
   dimensions are custom properties so the mobile breakpoint can scale every
   arrowhead at once. */
.taffd-file-thumb {
	--fd-arrow: 5px;          /* arrowhead length (point) */
	--fd-arrow-half: 3px;     /* arrowhead half-width */
	--fd-dim-line: #9e9e9e;   /* line + arrow color */
	position: relative;       /* anchors the markers + center glyph */
	flex: none;
	width: 104px;
	height: 104px;
	border: 1px solid var(--fd-border);
	border-radius: 4px;
	background-color: #fafafa;
	/* Inner hairline frame — reads as a picture mount, and gives the dimension
	   arrows an edge to point at now that the checker pattern is gone. */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Center "image" glyph (framed mountain + sun). Inline SVG data URI — the hex
   color is %23-escaped (a raw # would truncate the URL) and angle brackets are
   %-escaped, so it renders rather than appearing blank. Sits below the
   positioned line/label siblings (no z-index needed). */
.taffd-file-thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.45;
	background: center / 40px 40px no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e9e9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}

/* Dimension lines — a 1px line whose ::before/::after are the two arrowheads
   (CSS border-triangle idiom). Width line runs across the top, length line down
   the left, both inset so the arrowheads clear the rounded corners. */
.taffd-dim-line {
	position: absolute;
	background: var(--fd-dim-line);
}

.taffd-dim-line::before,
.taffd-dim-line::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
}

/* Width (horizontal) line + left/right arrowheads. Symmetric 18px inset
   (v1.9.0) keeps the line centered while clearing the top-left arrowhead
   overlap; the label centers on the line midpoint = box centre. */
.taffd-dim-line-w {
	top: 10px;
	left: 18px;
	right: 18px;
	height: 1px;
}

.taffd-dim-line-w::before,
.taffd-dim-line-w::after {
	top: 50%;
	transform: translateY(-50%);
	border-top: var(--fd-arrow-half) solid transparent;
	border-bottom: var(--fd-arrow-half) solid transparent;
}

.taffd-dim-line-w::before {   /* left head, points left */
	left: -1px;
	border-right: var(--fd-arrow) solid var(--fd-dim-line);
}

.taffd-dim-line-w::after {    /* right head, points right */
	right: -1px;
	border-left: var(--fd-arrow) solid var(--fd-dim-line);
}

/* Length (vertical) line + top/bottom arrowheads. Symmetric 18px inset. */
.taffd-dim-line-l {
	left: 10px;
	top: 18px;
	bottom: 18px;
	width: 1px;
}

.taffd-dim-line-l::before,
.taffd-dim-line-l::after {
	left: 50%;
	transform: translateX(-50%);
	border-left: var(--fd-arrow-half) solid transparent;
	border-right: var(--fd-arrow-half) solid transparent;
}

.taffd-dim-line-l::before {   /* top head, points up */
	top: -1px;
	border-bottom: var(--fd-arrow) solid var(--fd-dim-line);
}

.taffd-dim-line-l::after {    /* bottom head, points down */
	bottom: -1px;
	border-top: var(--fd-arrow) solid var(--fd-dim-line);
}

/* Dimension value labels — centered ON their line (v1.9.0): the SOLID pill
   masks the arrow line passing behind it (engineering-dimension look). Solid
   brand-cyan fill with dark ink text (v1.9.1) — a semi-transparent fill let the
   line show through behind the text. #00AEEF is a one-off literal: note
   --fd-primary is #0073aa (a darker blue), NOT the brand cyan. Values come from
   the server's width_in / length_in; "Length" (not Height) matches the pricing. */
.taffd-dim-w,
.taffd-dim-l {
	position: absolute;
	font-size: 10px;
	font-weight: 700;
	color: #0a2b3a;                /* dark navy ink — high contrast on the cyan fill */
	background: #00AEEF;           /* solid brand cyan; opaque so it masks the line */
	padding: 0 4px;
	border-radius: 3px;
	white-space: nowrap;
}

/* Width label centered ON the top line (top:10px). */
.taffd-dim-w {
	top: 10px;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Length label centered ON the left line (left:10px), rotated. translate
   BEFORE rotate so the -50%s apply on the unrotated axes. */
.taffd-dim-l {
	top: 50%;
	left: 10px;
	transform: translate(-50%, -50%) rotate(-90deg);
	transform-origin: center;
}

/* Right info column. */
.taffd-file-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Name line — filename (truncates) on the left, file size pinned right. The
   size lives OUTSIDE the truncating filename span so the ellipsis can't clip
   it (the pre-1.8.1 bug that hid the size on desktop). */
.taffd-file-name-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.taffd-file-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.taffd-file-size {
	flex: none;
	font-size: 11px;
	color: var(--fd-text-muted);
	white-space: nowrap;
}

/* Field grid — labeled cells, auto-fit so it reflows with the card width
   (no media query needed for column count). */
.taffd-file-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 8px 14px;
	margin-top: 2px;
}

.taffd-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	text-align: left;
}

.taffd-field-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--fd-text-muted);
}

.taffd-field-value {
	font-size: 13px;
}

/* ─── Single-shape card lifecycle (v1.9.0) ───
   The uploading row IS the card. It renders in an `.is-uploading` loading
   state (spinner thumb, 0" markers, progress bar, disabled qty), then
   fillFileCard() flips it to `.is-done` in place — no shape change. */

/* In-flight cards: muted fields + a progress strip under the filename. */
.taffd-file-row.is-uploading .taffd-file-fields {
	opacity: 0.55;
}

/* Progress strip — the bar + status, full width inside the info column
   (replaces the pre-1.9.0 thin flex row; the bar no longer uses flex:2). */
.taffd-file-progress {
	display: flex;
	align-items: center;
	gap: 8px;
}

.taffd-file-progress .taffd-progress-bar {
	flex: 1;
	height: 6px;
	background: #eee;
	border-radius: 3px;
	overflow: hidden;
}

/* Hide the whole progress strip once the upload is done (checkmark aside). */
.taffd-file-row.is-done .taffd-file-progress {
	display: none;
}

/* Loading thumbnail — a spinning ring; fade the center image glyph while
   the real metadata is still coming. */
.taffd-file-thumb.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	/* 44px, up from 26px. At 26px with a 3px border the ring left only 20px of
	   clear space, which a three-character percentage ("100%") overflowed — the
	   number sat on the ring rather than inside it. 44px leaves 38px clear,
	   enough for the widest value with margin on both sides. */
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 3px solid rgba(0, 174, 239, 0.25);
	border-top-color: var(--fd-primary);
	border-radius: 50%;
	animation: taffd-spin 0.8s linear infinite;
}

.taffd-file-thumb.is-loading::before {
	opacity: 0.15;   /* fade the image glyph under the spinner */
}

@keyframes taffd-spin {
	to { transform: rotate(360deg); }
}

/* Live upload % inside the spinner ring (v1.9.1) — centered in the box, on top
   of the spinning ::after ring. Color matches the spinner ring's border-top
   (--fd-primary = #0073aa, NOT the #00AEEF brand cyan on the dim pills — this is
   intentional, it should match the ring). Hidden by default; shown only while
   the thumb is .is-loading (i.e. uploading). */
.taffd-thumb-pct {
	display: none;
}

.taffd-file-thumb.is-loading .taffd-thumb-pct {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 10px;
	font-weight: 700;
	color: var(--fd-primary);
	z-index: 3;                 /* above the spinner ::after + center glyph */
	pointer-events: none;
}

/* During server analysis the ring keeps spinning but the byte-percent is
   meaningless — hide it so the last upload % (e.g. 92%) doesn't freeze on the
   ring under "Analyzing…". MUST follow the .is-loading show-rule above: equal
   specificity (both 0,2,1) and during processing BOTH match (thumb still
   .is-loading, root now .is-processing), so later source order wins. */
.taffd-file-row.is-processing .taffd-thumb-pct {
	display: none;
}

/* Completion checkmark (v1.9.0) — a green tick shown beside the (now hidden)
   progress bar once the card fills in. CSS-drawn: a rotated two-border tick. */
.taffd-check {
	display: none;
}

.taffd-file-row.is-done .taffd-check {
	display: inline-block;
	width: 16px;
	height: 16px;
	position: relative;
	flex: none;
}

.taffd-file-row.is-done .taffd-check::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid var(--fd-success);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Background-detected warning overlay (v1.9.0) — an amber ribbon over the
   thumbnail. Non-blocking; shown only when the server flagged no alpha. */
.taffd-bg-warning {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(245, 158, 11, 0.92);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	text-align: center;
	padding: 2px 4px;
	border-radius: 4px 4px 0 0;
	cursor: help;
	z-index: 2;
}

/* DPI tier pill (v1.9.0) — the DPI field value gets the matched tier's color
   (set inline via JS) as a chip; text colour is forced white for contrast on
   the saturated tier backgrounds. */
.taffd-dpi-pill.taffd-dpi-pill {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}

/* Error card neutralization (v1.9.0) — a failed upload reuses the card shell,
   so hide every incomplete detail; leave only the filename, the error message
   (which replaced the progress bar), and the × dismiss. */
.taffd-file-row.error {
	border-color: var(--fd-error);
	background: #fff5f5;
}

.taffd-file-row.error .taffd-file-thumb,
.taffd-file-row.error .taffd-file-fields,
.taffd-file-row.error .taffd-badges,
.taffd-file-row.error .taffd-bg-warning,
.taffd-file-row.error .taffd-check {
	display: none;
}

.taffd-file-row.error .taffd-file-name {
	color: var(--fd-error);
}

/* ─── Server-decision badges (v1.8.0) ───
   Small pills under the filename showing what the server did to the file
   (Rotated / Trimmed / DPI ~96). Each carries a title= tooltip. Built only
   when the corresponding flag is set, so clean files show nothing. */

.taffd-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.taffd-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--fd-bg);
	color: var(--fd-text-muted);
	border: 1px solid var(--fd-border);
	cursor: help;            /* signals the title= tooltip */
	white-space: nowrap;
}

/* Tints — rotated/trimmed are informational (accent), DPI fallback is a
   soft caution (uses the error token at low intensity). One-off tint
   literals are acceptable here per CSS hygiene rules. */
.taffd-badge-rotated,
.taffd-badge-trimmed {
	background: rgba(34, 113, 177, 0.10);
	color: var(--fd-accent);
	border-color: rgba(34, 113, 177, 0.25);
}

.taffd-badge-dpi {
	background: rgba(220, 53, 69, 0.08);
	color: var(--fd-error);
	border-color: rgba(220, 53, 69, 0.25);
}

/* Muted display values (DPI / Width / Length / Price). */
.taffd-file-detail {
	color: var(--fd-text-muted);
}

/* Quantity input — the one editable field, sized to sit in its field cell. */
.taffd-file-row input[type="number"] {
	width: 56px;
	padding: 4px;
	border: 1px solid var(--fd-border);
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
}

/* Total — emphasized field value. */
.taffd-file-total {
	font-weight: 600;
	color: var(--fd-text);
}

/* Remove (×) — absolute top-right of the card (anchored by the row's
   position:relative). Distinct from .taffd-error-dismiss, which is a static
   inline button inside flex error rows. */
.taffd-file-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: none;
	background: none;
	color: var(--fd-text-muted);
	font-size: 18px;
	cursor: pointer;
	border-radius: 50%;
	transition: color 0.2s, background 0.2s;
	padding: 0;
	line-height: 1;
}

.taffd-file-remove:hover {
	color: var(--fd-error);
	background: rgba(220, 53, 69, 0.08);
}

/* ─── Queue Status Banner (v1.7.2) ───
   Shown above the file list whenever any file is queued/uploading/processing.
   Explains the one-at-a-time policy and asks the customer to keep the page
   open so they don't close the tab while files are still being validated. */

.taffd-queue-status {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 12px;
	padding: 10px 14px;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius);
	background: var(--fd-bg);
}

.taffd-queue-status-counts {
	font-size: 13px;
	font-weight: 600;
	color: var(--fd-text);
}

.taffd-queue-status-msg {
	font-size: 12px;
	color: var(--fd-text-muted);
	line-height: 1.5;
}

/* ─── Progress bar / status (inside the card, v1.9.0) ───
   The card carries a single file across its lifecycle via root classes:
   .is-queued (waiting its turn) → .is-uploading (bar + percent) →
   .is-processing (server analyzing, bar pulses) → .is-done (checkmark, bar
   hidden) or .error. The bar lives in .taffd-file-progress (sized above);
   these rules style the fill / percent and the per-state behavior. */

.taffd-progress-fill {
	height: 100%;
	width: 0;
	background: var(--fd-bar);
	border-radius: 3px;
	transition: width 0.15s ease;
}

.taffd-progress-pct {
	font-size: 12px;
	color: var(--fd-text-muted);
	min-width: 64px;
	text-align: right;
}

/* Queued — waiting its turn in the serialized drain: hide the bar movement. */
.taffd-file-row.is-queued .taffd-progress-bar {
	visibility: hidden;
}

/* Processing — bytes off the wire, server analyzing: pulse the full-width bar. */
.taffd-file-row.is-processing .taffd-progress-fill {
	width: 100%;
	animation: taffd-pulse 1.4s ease-in-out infinite;
}

@keyframes taffd-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

.taffd-error-msg {
	flex: 1;                 /* take the space the progress bar held, so the
	                            dismiss button sits at the right edge */
	font-size: 12px;
	color: var(--fd-error);
	min-width: 0;
}

/* Error dismiss (×) — top-right of the error card (v1.9.0: the error reuses
   the card shell, which is position:relative, so anchor the dismiss button
   absolutely like the file remove button rather than relying on flex order). */
.taffd-error-dismiss {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: none;
	background: none;
	color: var(--fd-error);
	font-size: 16px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.2s;
}

.taffd-error-dismiss:hover {
	background: rgba(220, 53, 69, 0.12);
}

/* ─── Summary ───
   Running totals bar below the file list showing file count, total inches,
   and total price. Updates dynamically via JS as files are added/removed. */

.taffd-summary {
	display: flex;
	gap: 16px;
	margin-top: 12px;
	padding: 12px 16px;
	border: 1px solid var(--fd-border);
	border-radius: var(--fd-radius);
	background: var(--fd-bg);
}

.taffd-summary-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.taffd-summary-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--fd-text-muted);
}

.taffd-summary-value {
	font-size: 16px;
	font-weight: 600;
}

.taffd-summary-total .taffd-summary-value {
	color: var(--fd-primary);
}

/* ─── Cart File List ───
   Compact list of uploaded filenames shown on the cart and checkout pages
   beneath the product name. Small font, muted color to stay unobtrusive. */

.taffd-cart-files {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #666;
}

.taffd-cart-files li {
	padding: 2px 0;
}

/* ─── Hide WooCommerce Quantity for FileDrop Products ───
   FileDrop products don't use the standard WooCommerce quantity selector
   because quantity is implicit (number of files × quantity per file).
   !important needed to override WooCommerce's inline display styles. */

.taffd-wrapper ~ .quantity,
.has-taffd .quantity {
	display: none !important;
}

/* ─── Responsive (768px) ───
   The card stays side-by-side on mobile (placeholder box left, info right) —
   stacking made the info column shrink and the field grid collapse to one tall
   column. Instead: shrink the placeholder to 72px, scale its measurement frame
   down, and pin the field grid to 2 columns so the 6 fields sit 2-up. The
   summary also switches to a stacked layout. */

@media (max-width: 768px) {
	/* Smaller placeholder box + tighter measurement frame so it reads at 72px. */
	.taffd-file-thumb {
		--fd-arrow: 4px;
		--fd-arrow-half: 2px;
		width: 72px;
		height: 72px;
	}

	.taffd-file-thumb::before {
		background-size: 28px 28px;   /* shrink the center glyph with the box */
	}

	/* Scale the spinner ring with the box. The desktop 44px would fill 61% of a
	   72px placeholder and crowd the dimension lines; 36px keeps the same
	   proportion it has on desktop and still clears a three-digit percentage. */
	.taffd-file-thumb.is-loading::after {
		width: 36px;
		height: 36px;
		margin: -18px 0 0 -18px;
	}

	/* Symmetric 14px inset on the 72px box clears the corner overlap. */
	.taffd-dim-line-w {
		top: 8px;
		left: 14px;
		right: 14px;
	}

	.taffd-dim-line-l {
		left: 8px;
		top: 14px;
		bottom: 14px;
	}

	.taffd-dim-w,
	.taffd-dim-l {
		font-size: 9px;
	}

	/* Re-center the labels ON their (mobile-positioned) lines. */
	.taffd-dim-w {
		top: 8px;
	}

	.taffd-dim-l {
		left: 8px;
	}

	/* Pin the fields to 2 columns (overrides the desktop auto-fit) so they sit
	   2-up beside the box instead of collapsing to a single tall column. */
	.taffd-file-fields {
		grid-template-columns: repeat(2, 1fr);
	}

	.taffd-summary {
		flex-direction: column;
		gap: 8px;
	}

	.taffd-summary-item {
		flex-direction: row;
		justify-content: space-between;
	}

	.taffd-dropzone {
		padding: 24px 16px;
	}
}