/**
 * Field Journal — capture page.
 *
 * The front-end is a surface this plugin fully owns (unlike wp-admin,
 * which must keep the core font stack), so this applies the full
 * workspace design system: hierarchy, the palette from palette.json as
 * scoped CSS custom properties, and depth via background/shadow rather
 * than borders. Values sourced from palette.json — same tokens as
 * assets/css/admin.css, scoped independently here since this file is
 * never loaded alongside it (front-end vs. wp-admin).
 */

.adec-fj-capture {
	/* Raw scale, from palette.json */
	--adec-fj-orange-050: #FFE8D9;
	--adec-fj-orange-100: #FFD0B5;
	--adec-fj-orange-300: #FF9466;
	--adec-fj-orange-600: #DE3A11;
	--adec-fj-orange-700: #C52707;
	--adec-fj-grey-050: #F5F7FA;
	--adec-fj-grey-100: #E4E7EB;
	--adec-fj-grey-300: #9AA5B1;
	--adec-fj-grey-500: #616E7C;
	--adec-fj-grey-600: #52606D;
	--adec-fj-grey-900: #1F2933;
	--adec-fj-green-050: #E3F9E5;
	--adec-fj-green-900: #05400A;
	--adec-fj-yellow-050: #FFFAEB;
	--adec-fj-yellow-900: #513C06;
	--adec-fj-red-050: #FFEEEE;
	--adec-fj-red-900: #610404;

	/* Semantic roles */
	--adec-fj-panel: #FFFFFF;
	--adec-fj-well: var(--adec-fj-grey-050);
	--adec-fj-text-primary: var(--adec-fj-grey-900);
	--adec-fj-text-secondary: var(--adec-fj-grey-600);
	--adec-fj-text-tertiary: var(--adec-fj-grey-500);
	--adec-fj-border-soft: var(--adec-fj-grey-100);
	--adec-fj-action-primary: var(--adec-fj-orange-600);
	--adec-fj-action-primary-hover: var(--adec-fj-orange-700);
	--adec-fj-focus-ring: var(--adec-fj-orange-300);
	--adec-fj-success-text: var(--adec-fj-green-900);
	--adec-fj-success-bg: var(--adec-fj-green-050);
	--adec-fj-warning-text: var(--adec-fj-yellow-900);
	--adec-fj-warning-bg: var(--adec-fj-yellow-050);
	--adec-fj-error-text: var(--adec-fj-red-900);
	--adec-fj-error-bg: var(--adec-fj-red-050);
	--adec-fj-shadow: rgba(31, 41, 51, 0.12);
	--adec-fj-radius: 8px;

	/* System font stack — no bundled/hotlinked webfont, per the asset
	   catalog's licensing rule and the house "no CDN fonts" hard limit. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--adec-fj-text-primary);

	max-width: 28rem;
	margin: 0 auto;
	padding: 24px;
	background: var(--adec-fj-panel);
	border-radius: var(--adec-fj-radius);
	border-top: 4px solid var(--adec-fj-action-primary);
	box-shadow: 0 1px 3px var(--adec-fj-shadow);
}

/* Buttons: one primary per step, secondary as soft/outline, text as tertiary. */
.adec-fj-capture .adec-fj-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	margin: 8px 0;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	border-radius: var(--adec-fj-radius);
	border: none;
	cursor: pointer;
}

.adec-fj-capture .adec-fj-btn:focus-visible {
	outline: 2px solid var(--adec-fj-focus-ring);
	outline-offset: 2px;
}

.adec-fj-capture .adec-fj-btn-primary {
	background: var(--adec-fj-action-primary);
	color: #FFFFFF;
}

.adec-fj-capture .adec-fj-btn-primary:hover,
.adec-fj-capture .adec-fj-btn-primary:focus-visible {
	background: var(--adec-fj-action-primary-hover);
}

.adec-fj-capture .adec-fj-btn-primary:disabled {
	background: var(--adec-fj-grey-300);
	cursor: not-allowed;
}

.adec-fj-capture .adec-fj-btn-secondary {
	background: var(--adec-fj-orange-050);
	color: var(--adec-fj-action-primary-hover);
}

.adec-fj-capture .adec-fj-btn-secondary:hover,
.adec-fj-capture .adec-fj-btn-secondary:focus-visible {
	background: var(--adec-fj-orange-100);
}

.adec-fj-capture .adec-fj-btn-text {
	width: auto;
	background: none;
	color: var(--adec-fj-text-secondary);
	font-weight: 500;
	text-decoration: underline;
}

.adec-fj-capture .adec-fj-actions {
	display: flex;
	flex-direction: row-reverse;
	gap: 8px;
	margin-top: 12px;
}

.adec-fj-capture .adec-fj-actions .adec-fj-btn {
	width: auto;
	flex: 1;
	margin: 0;
}

.adec-fj-capture .adec-fj-actions .adec-fj-btn-text {
	flex: 0 0 auto;
}

/* The record button is the plugin's flagship interaction, so it gets
   extra visual weight beyond the standard primary button: larger,
   icon-led, taller. */
.adec-fj-capture .adec-fj-btn-record {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	font-size: 1.05rem;
}

.adec-fj-capture .adec-fj-btn-record .adec-fj-icon {
	flex-shrink: 0;
}

.adec-fj-capture .adec-fj-btn-record .adec-fj-icon-primary {
	fill: #FFFFFF;
}

.adec-fj-capture .adec-fj-btn-record .adec-fj-icon-secondary {
	fill: var(--adec-fj-orange-100);
}

/* "or" divider between the record button and the typed fallback. */
.adec-fj-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0;
	color: var(--adec-fj-text-tertiary);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.adec-fj-divider::before,
.adec-fj-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--adec-fj-border-soft);
}

/* Inputs: comfortable height, soft border, focus ring — never stretched
   just to fill the row. */
.adec-fj-transcript-input,
.adec-fj-details-form input[type="text"],
.adec-fj-details-form input[type="datetime-local"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0.75rem;
	margin-top: 4px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--adec-fj-text-primary);
	background: var(--adec-fj-panel);
	border: 1px solid var(--adec-fj-border-soft);
	border-radius: var(--adec-fj-radius);
}

.adec-fj-transcript-input {
	min-height: 6rem;
}

.adec-fj-transcript-input:focus,
.adec-fj-details-form input:focus {
	outline: 2px solid transparent;
	border-color: var(--adec-fj-action-primary);
	box-shadow: 0 0 0 1px var(--adec-fj-focus-ring);
}

.adec-fj-details-form input[type="file"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 4px;
	padding: 0.5rem 0;
	font-size: 0.9rem;
	color: var(--adec-fj-text-secondary);
}

/* Confirm step: transcript preview as an inset well, per the design
   system's "group secondary content without promoting it" rule. */
.adec-fj-transcript-preview {
	background: var(--adec-fj-well);
	border-radius: var(--adec-fj-radius);
	padding: 1rem;
	margin: 0.5rem 0;
	font-size: 1.05rem;
	line-height: 1.5;
}

/* Details form: label proximity clearly tighter than inter-field spacing. */
.adec-fj-details-form .adec-fj-field {
	display: block;
	margin: 1rem 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--adec-fj-text-secondary);
}

.adec-fj-status {
	min-height: 1.5em;
	margin: 0.75rem 0;
	font-weight: 600;
	color: var(--adec-fj-text-secondary);
}

.adec-fj-status-success {
	color: var(--adec-fj-success-text);
}

.adec-fj-status-warning {
	color: var(--adec-fj-warning-text);
}

.adec-fj-status-error {
	color: var(--adec-fj-error-text);
}

.adec-fj-notice {
	max-width: 28rem;
	margin: 0 auto;
	padding: 1.5rem;
	text-align: center;
	color: #52606D;
}