/* FineArtPrint – Print Size Calculator */

.fapps-root {
	--fapps-fg: #1a1a1a;
	--fapps-muted: #6b6b6b;
	--fapps-border: #e0ddd6;
	--fapps-bg: #faf9f6;
	--fapps-accent: #1a1a1a;
	--fapps-ok: #1f7a4d;
	--fapps-ok-bg: #e8f4ed;
	--fapps-warn: #9a5b00;
	--fapps-warn-bg: #fcf2e2;
	--fapps-radius: 12px;

	max-width: 720px;
	margin: 0 auto;
	color: var(--fapps-fg);
	font-family: inherit;
	line-height: 1.5;
	box-sizing: border-box;
}

.fapps-root *,
.fapps-root *::before,
.fapps-root *::after {
	box-sizing: border-box;
}

.fapps-title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 600;
}

/* Intro row: upload field (left) + notice (right), side by side */
.fapps-intro {
	display: flex;
	gap: 1rem;
	align-items: stretch;
	margin-bottom: 1rem;
}
.fapps-intro > .fapps-drop,
.fapps-intro > .fapps-notice {
	flex: 1 1 50%;
	min-width: 0;
	margin: 0;
}
.fapps-intro > .fapps-drop[hidden] + .fapps-notice {
	flex-basis: 100%;
}
/* The .fapps-drop base rule uses display:flex, which would otherwise win over
   the [hidden] attribute, so make hiding explicit. */
.fapps-drop[hidden] {
	display: none;
}

/* Notice / disclaimer */
.fapps-notice {
	margin: 0 0 1rem;
	padding: 1rem 1.1rem;
	font-size: .85rem;
	line-height: 1.45;
	color: var(--fapps-warn);
	background: var(--fapps-warn-bg);
	border-left: 3px solid var(--fapps-warn);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media ( max-width: 600px ) {
	.fapps-intro {
		flex-direction: column;
	}
}

/* Drop zone */
.fapps-drop {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: 2rem 1.5rem;
	text-align: center;
	background: var(--fapps-bg);
	border: 2px dashed var(--fapps-border);
	border-radius: var(--fapps-radius);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .05s ease;
}
.fapps-drop:hover,
.fapps-drop:focus-visible {
	border-color: var(--fapps-accent);
	outline: none;
}
.fapps-drop.is-dragover {
	border-color: var(--fapps-accent);
	background: #f1efe9;
	transform: scale( 1.005 );
}
.fapps-icon {
	color: var(--fapps-muted);
	margin-bottom: .75rem;
}
.fapps-drop-title {
	margin: 0 0 .4rem;
	font-size: 1.05rem;
	font-weight: 600;
}
.fapps-drop-sub {
	margin: 0;
	font-size: .85rem;
	color: var(--fapps-muted);
	max-width: 34ch;
}

/* Status message */
.fapps-message {
	margin: 1rem 0 0;
	padding: .75rem 1rem;
	border-radius: 8px;
	background: var(--fapps-bg);
	font-size: .95rem;
}
.fapps-message.is-error {
	background: var(--fapps-warn-bg);
	color: var(--fapps-warn);
}

/* Results */
.fapps-results {
	margin-top: 1rem;
}
.fapps-fileinfo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .75rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--fapps-border);
}
.fapps-fileinfo-name {
	font-weight: 600;
	word-break: break-all;
}
.fapps-fileinfo-meta {
	font-size: .85rem;
	color: var(--fapps-muted);
}

.fapps-recommended {
	margin: 1.25rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--fapps-bg);
	border: 1px solid var(--fapps-border);
	border-radius: var(--fapps-radius);
	text-align: center;
}
.fapps-recommended-label {
	display: block;
	font-size: .85rem;
	letter-spacing: .02em;
	color: var(--fapps-muted);
	text-transform: uppercase;
}
.fapps-recommended-size {
	display: block;
	margin: .35rem 0 .25rem;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.15;
}
.fapps-recommended-note {
	display: block;
	font-size: .9rem;
	color: var(--fapps-muted);
}

/* Table */
.fapps-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
	font-size: .95rem;
}
.fapps-table th,
.fapps-table td {
	padding: .65rem .75rem;
	text-align: left;
	border-bottom: 1px solid var(--fapps-border);
}
.fapps-table th {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--fapps-muted);
	font-weight: 600;
}
.fapps-table td:nth-child( 2 ) {
	font-weight: 600;
	white-space: nowrap;
}
.fapps-table tr.is-recommended td {
	background: var(--fapps-ok-bg);
}

/* 100% preview */
.fapps-preview {
	margin: 1.25rem 0;
}
.fapps-preview-title {
	margin: 0 0 .6rem;
	font-weight: 600;
}
.fapps-ppi-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: .6rem;
}
.fapps-ppi-tab {
	flex: 1 1 auto;
	min-width: 90px;
	padding: .5rem .6rem;
	font: inherit;
	font-size: .85rem;
	line-height: 1.2;
	text-align: center;
	color: var(--fapps-fg);
	background: #fff;
	border: 1px solid var(--fapps-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}
.fapps-ppi-tab:hover {
	border-color: var(--fapps-accent);
}
.fapps-ppi-tab.is-active {
	color: #fff;
	background: var(--fapps-accent);
	border-color: var(--fapps-accent);
}
.fapps-ppi-tab .fapps-ppi-tab-size {
	display: block;
	font-size: .76rem;
	opacity: .75;
	margin-top: .15rem;
}
.fapps-preview-sub {
	margin: 0 0 .6rem;
	font-size: .88rem;
	color: var(--fapps-muted);
}
.fapps-preview-stage {
	position: relative;
	display: flex;
	justify-content: center;
	background: #1a1a1a;
	border-radius: var(--fapps-radius);
	overflow: hidden;
}
.fapps-preview-canvas {
	display: block;
	max-width: 100%;
	touch-action: none;
	cursor: grab;
}
.fapps-preview-nav {
	position: absolute;
	right: 10px;
	bottom: 10px;
	border: 1px solid rgba( 255, 255, 255, .6 );
	box-shadow: 0 1px 6px rgba( 0, 0, 0, .4 );
	line-height: 0;
	cursor: crosshair;
}
.fapps-nav-canvas {
	display: block;
	opacity: .85;
	touch-action: none;
}
.fapps-nav-rect {
	position: absolute;
	border: 1.5px solid #fff;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, .5 );
	pointer-events: none;
	box-sizing: border-box;
}
.fapps-preview-hint {
	margin: .5rem 0 0;
	font-size: .82rem;
	color: var(--fapps-muted);
}
.fapps-preview-note {
	margin: .75rem 0 0;
	padding: .65rem .85rem;
	border-radius: 8px;
	background: var(--fapps-warn-bg);
	color: var(--fapps-warn);
	font-size: .9rem;
}

/* Target check */
.fapps-target {
	margin: 1.25rem 0;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--fapps-border);
	border-radius: var(--fapps-radius);
}
.fapps-target-title {
	margin: 0 0 .75rem;
	font-weight: 600;
}
.fapps-target-row {
	display: flex;
	align-items: flex-end;
	gap: .75rem;
	flex-wrap: wrap;
}
.fapps-target-field {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	font-size: .82rem;
	color: var(--fapps-muted);
}
.fapps-target-field input {
	width: 120px;
	max-width: 40vw;
	padding: .5rem .6rem;
	font-size: 1rem;
	color: var(--fapps-fg);
	border: 1px solid var(--fapps-border);
	border-radius: 8px;
	background: #fff;
}
.fapps-target-field input:focus-visible {
	outline: 2px solid var(--fapps-accent);
	outline-offset: 1px;
}
.fapps-target-x {
	padding-bottom: .55rem;
	font-size: 1.1rem;
	color: var(--fapps-muted);
}
.fapps-target-result {
	margin: .85rem 0 0;
	padding: .65rem .85rem;
	border-radius: 8px;
	font-size: .92rem;
}
.fapps-target-result.is-ok {
	background: var(--fapps-ok-bg);
	color: var(--fapps-ok);
}
.fapps-target-result.is-warn {
	background: var(--fapps-warn-bg);
	color: var(--fapps-warn);
}

/* Reset button */
.fapps-reset {
	display: inline-block;
	margin-top: .5rem;
	padding: .6rem 1.2rem;
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
	background: var(--fapps-accent);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity .15s ease;
}
.fapps-reset:hover {
	opacity: .85;
}

.fapps-disclaimer {
	margin: 1rem 0 0;
	font-size: .8rem;
	color: var(--fapps-muted);
}

@media ( max-width: 480px ) {
	.fapps-recommended-size {
		font-size: 1.6rem;
	}
	.fapps-table th:nth-child( 3 ),
	.fapps-table td:nth-child( 3 ) {
		display: none;
	}
}