/* OEG Resume Formatter — Shortcode Styles
   Design tokens from portal-pages/styles.css
   --color-primary: #204F70
   --color-page-bg: #F7F7F7
   --color-accent:  #DD404B  (portal-pages variant)
*/

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

#oeg-resume-formatter {
	font-family: OEG-Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	max-width: 720px;
	margin: 0 auto;
	color: #1C1C1E;
}

/* On the result step, widen so the A4-width preview isn't clipped. */
#oeg-resume-formatter:has(.oeg-rf-result-panel:not([hidden])) {
	max-width: 860px;
}

.oeg-rf-wrapper {
	position: relative;
}

/* ── Panels ──────────────────────────────────────────────────────────────── */

.oeg-rf-panel {
	animation: oeg-rf-fadein 0.25s ease;
}

@keyframes oeg-rf-fadein {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0);   }
}

/* ── Upload panel ────────────────────────────────────────────────────────── */

.oeg-rf-heading {
	font-size: 1.5rem;
	font-weight: 700;
	color: #204F70;
	margin: 0 0 0.5rem;
}

.oeg-rf-subheading {
	color: #555;
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.oeg-rf-dropzone {
	border: 2px dashed #b0c4d8;
	border-radius: 12px;
	padding: 3rem 2rem;
	text-align: center;
	cursor: pointer;
	background: #F7F7F7;
	transition: border-color 0.2s, background 0.2s;
	position: relative;
}

.oeg-rf-dropzone:hover,
.oeg-rf-dropzone:focus-within,
.oeg-rf-dropzone--over {
	border-color: #204F70;
	background: #E2EEFF;
	outline: none;
}

.oeg-rf-dropzone:focus {
	outline: 3px solid #204F70;
	outline-offset: 2px;
}

.oeg-rf-dropzone-icon {
	color: #204F70;
	margin-bottom: 1rem;
}

.oeg-rf-dropzone-text {
	font-size: 1rem;
	margin: 0 0 0.4rem;
	color: #333;
}

.oeg-rf-browse-link {
	color: #204F70;
	text-decoration: underline;
	cursor: pointer;
}

.oeg-rf-dropzone-sub {
	font-size: 0.9rem;
	color: #555;
	margin: 0.5rem auto 0.75rem;
	line-height: 1.5;
	max-width: 520px;
}

.oeg-rf-dropzone-hint {
	font-size: 0.8rem;
	color: #888;
	margin: 0;
}

.oeg-rf-submit-wrap {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

.oeg-rf-submit-wrap .oeg-rf-btn-primary {
	margin-top: 0;
}

.oeg-rf-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.oeg-rf-selected-file {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.5rem 0.75rem;
	background: #E2EEFF;
	border-radius: 6px;
	font-size: 0.9rem;
}

.oeg-rf-selected-file[hidden] {
	display: none;
}

.oeg-rf-file-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #204F70;
	font-weight: 600;
}

.oeg-rf-clear-file {
	background: none;
	border: none;
	font-size: 1.2rem;
	cursor: pointer;
	color: #888;
	padding: 0 0.25rem;
	line-height: 1;
}

.oeg-rf-clear-file:hover { color: #DD404B; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.oeg-rf-btn {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	text-decoration: none;
	font-family: inherit;
}

.oeg-rf-btn-primary {
	background: #204F70;
	color: #fff;
	border-color: #204F70;
	margin-top: 1rem;
}

.oeg-rf-btn-primary:hover:not(:disabled) {
	background: #163a55;
	border-color: #163a55;
}

.oeg-rf-btn-primary:disabled,
.oeg-rf-btn-primary[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

.oeg-rf-btn-secondary {
	background: transparent;
	color: #204F70;
	border-color: #204F70;
	margin-top: 0.75rem;
	margin-left: 0.75rem;
}

.oeg-rf-btn-secondary:hover,
.oeg-rf-btn-secondary:focus {
	background: #E2EEFF;
	color: #204F70;
	border-color: #204F70;
}

.oeg-rf-btn-sm {
	padding: 0.45rem 1rem;
	font-size: 0.875rem;
	margin-left: 0;
}

/* ── Privacy note ────────────────────────────────────────────────────────── */

.oeg-rf-privacy-note {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: #888;
	margin-top: 1rem;
}

/* ── Processing panel ────────────────────────────────────────────────────── */

.oeg-rf-processing-panel {
	padding: 4rem 2rem;
	text-align: center;
}

.oeg-rf-spinner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.oeg-rf-spinner-ring {
	width: 56px;
	height: 56px;
	border: 4px solid #E2EEFF;
	border-top-color: #204F70;
	border-radius: 50%;
	animation: oeg-rf-spin 0.8s linear infinite;
}

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

.oeg-rf-spinner-text {
	color: #204F70;
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

/* ── Result panel ────────────────────────────────────────────────────────── */

.oeg-rf-result-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.oeg-rf-result-headline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.oeg-rf-result-heading {
	font-size: 1.4rem;
	font-weight: 700;
	color: #204F70;
	margin: 0;
}

/* Full-width row between the headline and the action buttons */
.oeg-rf-guideline-note {
	flex-basis: 100%;
	order: 1;
	margin: 0;
	padding: 0.75rem 1rem;
	background: #E2EEFF;
	border-left: 4px solid #204F70;
	border-radius: 6px;
	color: #17324d;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.oeg-rf-guideline-note strong { color: #204F70; }

.oeg-rf-actions {
	order: 2;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.oeg-rf-actions .oeg-rf-btn {
	margin: 0;
}

/* ── Preview (mirrors the downloaded .docx: plain black-on-white, A4 width) ── */

.oeg-rf-result-panel { max-width: none; }

.oeg-rf-preview {
	background: #fff;
	color: #000;
	border: 1px solid #d0d7de;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	width: 794px;        /* A4 width at 96dpi */
	max-width: 100%;
	margin: 0 auto;
	padding: 72px 72px;  /* ~0.75in page margins */
	box-sizing: border-box;
	max-height: none;
	overflow: visible;
	font-family: Calibri, 'OEG-Sans', Arial, sans-serif;
}

.oeg-rf-preview-inner { font-size: 11pt; line-height: 1.35; color: #000; }

/* Mammoth-rendered DOCX preview. Mammoth emits h1/h2/p/ul/li/strong and no
   inline styles, so we style those tags here to look like a Word page. */
.oeg-rf-preview-docx { font-size: 11pt; line-height: 1.35; color: #000; }
.oeg-rf-preview-docx h1 {
	font-size: 20pt;
	font-weight: 700;
	text-align: center;
	margin: 0 0 0.25rem;
	color: #000;
}
.oeg-rf-preview-docx h2 {
	font-size: 11pt;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid #000;
	padding-bottom: 0.15rem;
	margin: 1rem 0 0.5rem;
	color: #000;
}
.oeg-rf-preview-docx h3 {
	font-size: 11pt;
	font-weight: 700;
	margin: 0.6rem 0 0.15rem;
	color: #000;
}
.oeg-rf-preview-docx p { margin: 0 0 0.35rem; color: #000; }
.oeg-rf-preview-docx ul { margin: 0.25rem 0 0.5rem 1.2rem; padding: 0; color: #000; }
.oeg-rf-preview-docx ul li { margin-bottom: 0.15rem; }
.oeg-rf-preview-docx a { color: #000; text-decoration: underline; }
.oeg-rf-preview-docx strong { font-weight: 700; }
.oeg-rf-preview-docx table { border-collapse: collapse; margin: 0.25rem 0; }
.oeg-rf-preview-docx td, .oeg-rf-preview-docx th { padding: 0.15rem 0.4rem; vertical-align: top; }
.oeg-rf-preview-header { text-align: center; margin-bottom: 0.9rem; }
.oeg-rf-name { font-size: 20pt; font-weight: 700; color: #000; margin: 0 0 0.25rem; }
.oeg-rf-meta { color: #000; font-size: 10pt; margin: 0 0 0.25rem; }
.oeg-rf-meta a { color: #000; text-decoration: underline; }
.oeg-rf-summary { color: #000; font-style: italic; margin: 0.5rem 0 0; text-align: left; }

.oeg-rf-section-title {
	font-size: 11pt;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #000;
	border-bottom: 1px solid #000;
	padding-bottom: 0.15rem;
	margin: 1rem 0 0.5rem;
}

.oeg-rf-job { margin-bottom: 0.75rem; }
.oeg-rf-job-header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem; color: #000; }
.oeg-rf-dates { font-size: 10pt; color: #000; white-space: nowrap; }
.oeg-rf-location { font-size: 10pt; color: #000; margin: 0.1rem 0 0.3rem; }

.oeg-rf-bullets {
	margin: 0.3rem 0 0 1.2rem;
	padding: 0;
	list-style: disc;
	color: #000;
}

.oeg-rf-bullets li { margin-bottom: 0.15rem; }

/* Dash bullets used for Projects → Responsibilities, matching the docx. */
.oeg-rf-bullets--dash { list-style: none; margin-left: 1.2rem; padding: 0; }
.oeg-rf-bullets--dash li { position: relative; padding-left: 1rem; }
.oeg-rf-bullets--dash li::before {
	content: "-";
	position: absolute;
	left: 0;
	color: #000;
}

.oeg-rf-proj-title { font-weight: 700; color: #000; margin: 0.5rem 0 0.15rem; }
.oeg-rf-proj-respheading { color: #000; margin-top: 0.2rem; }

/* Core-competencies row: "Applications - item, item, item" */
.oeg-rf-cc-row { margin: 0 0 0.2rem; color: #000; }

/* Experience: "Company - Location - Dates" bold company, then italic title */
.oeg-rf-exp-head { color: #000; margin-top: 0.5rem; }
.oeg-rf-exp-title { color: #000; font-style: italic; margin: 0.1rem 0 0.25rem; }

/* Education: degree line under university */
.oeg-rf-edu-degree { color: #000; margin: 0.1rem 0 0.2rem; }

.oeg-rf-skills-line { color: #000; margin: 0; }

.oeg-rf-edu { margin-bottom: 0.5rem; color: #000; }
.oeg-rf-edu .oeg-rf-dates { display: block; }

/* Skills/tools render as plain inline text, not colored chips, to match the docx */
.oeg-rf-skills { margin: 0 0 0.3rem; display: block; color: #000; }
.oeg-rf-skills strong { font-weight: 700; }

.oeg-rf-skill-tag {
	background: transparent;
	color: #000;
	border-radius: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
}
.oeg-rf-skill-tag:not(:last-child)::after { content: ", "; }

.oeg-rf-certs { margin: 0; padding-left: 1.2rem; color: #000; }
.oeg-rf-certs li { margin-bottom: 0.2rem; }

/* ── Feedback popup — OEG popup standards ─────────────────────────────────
   Ported from oeg-feedback-manager/docs/popup-standards.css, scoped to this
   popup so theme and Feedback Manager styles can't leak in. It is a compact
   card (under 480px tall), so it always sits centered with a backdrop. */

#oeg-rf-feedback-modal {
	--oeg-ink: #17324d;
	--oeg-ink-soft: #4e667d;
	--oeg-surface: #ffffff;
	--oeg-surface-soft: #eef5fb;
	--oeg-border: #cbdceb;
	--oeg-accent: #0d6a9f;
	--oeg-accent-strong: #0b547d;
	--oeg-success: #0f7a5c;
	--oeg-shadow: 0 24px 64px rgba(12, 38, 61, 0.18);
	--oeg-radius: 8px;
	--oeg-popup-gutter: 16px;

	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--oeg-popup-gutter);
	box-sizing: border-box;
}

#oeg-rf-feedback-modal[hidden] { display: none; }

#oeg-rf-feedback-modal .oeg-popup__backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: rgba(14, 28, 41, 0.55);
	backdrop-filter: blur(2px);
	animation: oeg-rf-popup-fade 0.2s ease-out;
}

/* Lock page scroll while the popup is open (toggled on <body> from JS) */
body.oeg-popup-open { overflow: hidden; }

#oeg-rf-feedback-modal .oeg-popup__card {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(400px, 100%);
	max-height: calc(100vh - 2 * var(--oeg-popup-gutter));
	max-height: calc(100dvh - 2 * var(--oeg-popup-gutter));
	padding: 20px 24px;
	background: var(--oeg-surface);
	border: 1px solid var(--oeg-border);
	border-radius: var(--oeg-radius);
	box-shadow: var(--oeg-shadow);
	color: var(--oeg-ink);
	font-family: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: oeg-rf-popup-pop 0.2s ease-out;
}

#oeg-rf-feedback-modal .oeg-popup__close {
	position: absolute;
	top: 12px;
	right: 14px;
	margin: 0;
	padding: 2px 4px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--oeg-ink-soft);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease;
}
#oeg-rf-feedback-modal .oeg-popup__close:hover { color: var(--oeg-ink); }

#oeg-rf-feedback-modal .oeg-popup__title {
	margin: 0 0 12px;
	padding-right: 32px; /* clear the close button */
	color: var(--oeg-ink);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
}

#oeg-rf-feedback-modal .oeg-popup__group { margin-bottom: 10px; }

#oeg-rf-feedback-modal .oeg-popup__label {
	display: block;
	margin-bottom: 5px;
	color: var(--oeg-ink);
	font-weight: 700;
}

#oeg-rf-feedback-modal .oeg-popup__optional {
	font-weight: 400;
	color: var(--oeg-ink-soft);
}

#oeg-rf-feedback-modal .oeg-popup__rating {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 8px;
}

#oeg-rf-feedback-modal .oeg-popup__rating button {
	flex: 1;
	margin: 0;
	padding: 10px 4px;
	border: 1.5px solid var(--oeg-border);
	border-radius: var(--oeg-radius);
	background: #fff;
	color: var(--oeg-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#oeg-rf-feedback-modal .oeg-popup__rating button:hover:not(.is-selected) {
	background: var(--oeg-surface-soft);
	border-color: var(--oeg-accent);
	color: var(--oeg-accent);
}

#oeg-rf-feedback-modal .oeg-popup__rating button.is-selected {
	background: var(--oeg-accent);
	border-color: var(--oeg-accent);
	color: #fff;
	box-shadow: 0 2px 8px rgba(13, 106, 159, 0.25);
}

#oeg-rf-feedback-modal .oeg-popup__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
	color: var(--oeg-ink-soft);
	font-size: 0.75rem;
}

#oeg-rf-feedback-modal .oeg-popup__textarea {
	display: block;
	width: 100%;
	min-height: 72px;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px;
	border: 1.5px solid var(--oeg-border);
	border-radius: var(--oeg-radius);
	background: #fff;
	color: var(--oeg-ink);
	font: inherit;
	font-size: 0.9375rem;
	resize: vertical;
	outline: none;
	transition: border-color 0.15s ease;
}
#oeg-rf-feedback-modal .oeg-popup__textarea:focus { border-color: var(--oeg-accent); }

#oeg-rf-feedback-modal .oeg-popup__submit {
	display: block;
	width: 100%;
	margin: 10px 0 0;
	padding: 13px 16px;
	border: 0;
	border-radius: var(--oeg-radius);
	background: linear-gradient(135deg, var(--oeg-accent) 0%, var(--oeg-accent-strong) 100%);
	color: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
#oeg-rf-feedback-modal .oeg-popup__submit:not(:disabled):hover { opacity: 0.88; }
#oeg-rf-feedback-modal .oeg-popup__submit:disabled {
	background: #c2d6e4;
	color: #7ea8c1;
	cursor: not-allowed;
}
#oeg-rf-feedback-modal .oeg-popup__submit[hidden] { display: none; }

#oeg-rf-feedback-modal .oeg-popup__confirmation {
	padding: 14px 16px;
	border-radius: var(--oeg-radius);
	background: rgba(15, 122, 92, 0.08);
	color: var(--oeg-success);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}
#oeg-rf-feedback-modal .oeg-popup__confirmation[hidden],
#oeg-rf-feedback-modal .oeg-popup__group[hidden],
#oeg-rf-feedback-modal .oeg-popup__textarea[hidden] { display: none; }

@media (max-width: 767px) {
	#oeg-rf-feedback-modal .oeg-popup__card { padding: 20px; }
}

@keyframes oeg-rf-popup-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes oeg-rf-popup-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	#oeg-rf-feedback-modal .oeg-popup__backdrop,
	#oeg-rf-feedback-modal .oeg-popup__card { animation: none !important; }
}

/* ── Login gate ──────────────────────────────────────────────────────────── */

.oeg-rf-login-gate {
	padding: 2.5rem 2rem;
	text-align: center;
	background: #E2EEFF;
	border-radius: 12px;
}
.oeg-rf-login-gate .oeg-rf-heading { color: #204F70; }
.oeg-rf-login-gate a.oeg-rf-btn { text-decoration: none; }

/* ── Feedback error ──────────────────────────────────────────────────────── */

.oeg-rf-feedback-error {
	color: #FA4457;
	font-weight: 600;
	font-size: 0.9rem;
	margin-top: 0.5rem;
}

/* ── Error panel ─────────────────────────────────────────────────────────── */

.oeg-rf-error-panel {
	padding: 3rem 2rem;
	text-align: center;
}

.oeg-rf-error-heading {
	font-size: 1.3rem;
	font-weight: 700;
	color: #1C1C1E;
	margin: 0.75rem 0 0.5rem;
}

.oeg-rf-error-message {
	color: #555;
	max-width: 480px;
	margin: 0 auto 1.5rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.oeg-rf-dropzone { padding: 2rem 1rem; }
	.oeg-rf-actions { flex-direction: column; }
	.oeg-rf-actions .oeg-rf-btn { margin: 0; width: 100%; }
	.oeg-rf-btn-secondary { margin-left: 0; }
	.oeg-rf-preview { padding: 2rem 1.25rem; }
	.oeg-rf-job-header { flex-direction: column; }
}