/*
 * public.css — styling for reporter-facing shortcodes.
 *
 * Scoped under .hnc-public-wrap so host-theme bleed is minimal.
 * Uses CSS variables for easy theme overrides.
 */

.hnc-public-wrap {
	--hnc-bg:            #0B0F16;
	--hnc-panel:         #121824;
	--hnc-panel-alt:     #1A2130;
	--hnc-border:        #2A3342;
	--hnc-text:          #E5E9EF;
	--hnc-text-dim:      #9AA3B2;
	--hnc-green:         #10B981;
	--hnc-green-hover:   #0EA371;
	--hnc-red:           #EF4444;
	--hnc-amber:         #F5C518;
	--hnc-blue:          #3B82F6;

	box-sizing: border-box;
	max-width: 780px;
	margin: 0 auto 2rem;
	padding: 1.5rem 1.25rem;
	background: var(--hnc-bg);
	color: var(--hnc-text);
	border-radius: 12px;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	line-height: 1.5;
}

.hnc-public-wrap *,
.hnc-public-wrap *::before,
.hnc-public-wrap *::after { box-sizing: border-box; }

.hnc-map-wrap, .hnc-transparency-wrap { max-width: 1040px; }

.hnc-public-title {
	margin: 0 0 0.75rem;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--hnc-text);
}

.hnc-public-intro { margin: 0 0 1.25rem; color: var(--hnc-text-dim); }

.hnc-confidential-banner {
	background: #2B1F15;
	border-left: 4px solid var(--hnc-amber);
	padding: 0.9rem 1rem;
	margin-bottom: 1rem;
	border-radius: 6px;
}
.hnc-confidential-banner p { margin: 0.35rem 0 0; color: var(--hnc-text-dim); }

.hnc-ks-banner {
	background: #3a1515;
	border: 1px solid var(--hnc-red);
	color: var(--hnc-text);
	padding: 0.75rem 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
}
.hnc-ks-banner strong { display: block; margin-bottom: 0.25rem; }

/* ---- Form ---- */

.hnc-form { display: flex; flex-direction: column; gap: 1rem; }

.hnc-field { display: flex; flex-direction: column; gap: 0.35rem; }
.hnc-field label { font-weight: 500; color: var(--hnc-text); font-size: 0.95rem; }

.hnc-field input[type="text"],
.hnc-field input[type="tel"],
.hnc-field input[type="email"],
.hnc-field input[type="file"],
.hnc-field textarea,
.hnc-field select {
	padding: 0.6rem 0.75rem;
	background: var(--hnc-panel);
	color: var(--hnc-text);
	border: 1px solid var(--hnc-border);
	border-radius: 6px;
	font: inherit;
	width: 100%;
}
.hnc-field input:focus,
.hnc-field textarea:focus,
.hnc-field select:focus {
	outline: 2px solid var(--hnc-green);
	outline-offset: 1px;
	border-color: var(--hnc-green);
}

.hnc-field-hint { color: var(--hnc-text-dim); font-size: 0.85rem; }

.hnc-field-group {
	border: 1px solid var(--hnc-border);
	border-radius: 6px;
	padding: 0.85rem 1rem;
	background: var(--hnc-panel);
}
.hnc-field-group legend { padding: 0 0.4rem; font-weight: 500; color: var(--hnc-text); }
.hnc-field-group .hnc-check { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.3rem 0; }

.hnc-check { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--hnc-text-dim); font-size: 0.92rem; }
.hnc-check input { margin-top: 0.25rem; accent-color: var(--hnc-green); }

/* ---- Buttons ---- */

.hnc-btn {
	display: inline-block;
	padding: 0.65rem 1.1rem;
	font-weight: 500;
	border-radius: 6px;
	border: 1px solid var(--hnc-border);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95rem;
	transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.hnc-btn-primary {
	background: var(--hnc-green);
	color: #07130D;
	border-color: var(--hnc-green);
}
.hnc-btn-primary:hover:not(:disabled) { background: var(--hnc-green-hover); border-color: var(--hnc-green-hover); }
.hnc-btn-secondary {
	background: var(--hnc-panel-alt);
	color: var(--hnc-text);
}
.hnc-btn-secondary:hover:not(:disabled) { background: var(--hnc-border); }
.hnc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.hnc-btn-submit { align-self: flex-start; padding: 0.75rem 1.5rem; font-size: 1rem; }

/* ---- Camera stage ---- */

.hnc-camera-stage {
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	min-height: 120px;
	margin: 0.6rem 0;
}
.hnc-camera-video,
.hnc-camera-canvas,
.hnc-camera-preview {
	display: block;
	width: 100%;
	max-height: 60vh;
	object-fit: cover;
}

/*
 * The three camera elements are swapped in/out via the HTML `hidden`
 * attribute. A prior CSS rule used `display: block` at the same
 * specificity as the user-agent `[hidden] { display: none }`, which
 * caused all three to render at once and the stage to grow to ~3x
 * the viewport on iOS. The `!important` below wins against any
 * future layout tweaks that might set `display` on these elements.
 */
.hnc-camera-stage > [hidden] {
	display: none !important;
}

.hnc-camera-controls { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.hnc-gps-status { margin: 0 0 0.5rem; color: var(--hnc-text-dim); }

/* ---- Result panel ---- */

.hnc-result {
	margin-top: 1rem;
	padding: 1rem 1.1rem;
	border-radius: 8px;
	border: 1px solid var(--hnc-border);
	background: var(--hnc-panel);
}
.hnc-result-success { border-color: var(--hnc-green); }
.hnc-result-error   { border-color: var(--hnc-red); }
.hnc-result p { margin: 0.3rem 0; }
.hnc-code {
	background: var(--hnc-panel-alt);
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: 0.05em;
	font-weight: 600;
	color: var(--hnc-green);
}

/* ---- Toast ---- */

.hnc-public-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translate(-50%, 20px);
	padding: 0.75rem 1.25rem;
	background: var(--hnc-panel);
	color: var(--hnc-text);
	border: 1px solid var(--hnc-border);
	border-radius: 6px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.35);
	z-index: 9999;
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 0.95rem;
}
.hnc-public-toast-in { opacity: 1; transform: translate(-50%, 0); }
.hnc-public-toast-error { border-color: var(--hnc-red); }
.hnc-public-toast-success { border-color: var(--hnc-green); }

/* ---- Map ---- */

.hnc-map-filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0 0.75rem; }
.hnc-map-filters select {
	padding: 0.55rem 0.7rem;
	background: var(--hnc-panel);
	color: var(--hnc-text);
	border: 1px solid var(--hnc-border);
	border-radius: 6px;
}
.hnc-map-canvas {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--hnc-border);
	background: #1a1f2a;
}
.hnc-map-loading,
.hnc-map-count {
	color: var(--hnc-text-dim);
	font-size: 0.9rem;
	margin-top: 0.5rem;
}
.hnc-popup { color: #111; font-size: 0.92rem; line-height: 1.35; }

/* ---- Transparency ---- */

.hnc-transparency-downloads { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.hnc-transparency-list { display: flex; flex-direction: column; gap: 0.9rem; }
.hnc-transparency-card {
	background: var(--hnc-panel);
	border: 1px solid var(--hnc-border);
	border-radius: 8px;
	padding: 1rem 1.1rem;
}
.hnc-transparency-period {
	margin: 0 0 0.5rem;
	color: var(--hnc-green);
	font-size: 1.1rem;
	letter-spacing: 0.04em;
}
.hnc-transparency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hnc-transparency-col h4 { margin: 0 0 0.35rem; font-weight: 600; }
.hnc-transparency-col ul { margin: 0; padding-left: 1rem; color: var(--hnc-text-dim); }
.hnc-transparency-col li { margin: 0.15rem 0; }
.hnc-transparency-note {
	margin: 0.7rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--hnc-border);
	color: var(--hnc-text-dim);
	font-size: 0.9rem;
}
.hnc-transparency-meta { color: var(--hnc-text-dim); font-size: 0.85rem; margin: 0.5rem 0 0; }
.hnc-transparency-meta a { color: var(--hnc-green); }

@media (max-width: 640px) {
	.hnc-transparency-grid { grid-template-columns: 1fr; }
	.hnc-public-wrap { padding: 1rem 0.9rem; }
	.hnc-public-title { font-size: 1.35rem; }
}