/* ReelAI — fishing.digital palette.
   Navy #0C1C3A · Ocean #0C44A0 · Gold #DCA01E · Teal #0A7A6E · Cream #F5F4EF
   -webkit-text-fill-color is set explicitly wherever light text sits on a dark
   ground: the Newsup theme otherwise overrides colour on some elements. */

.reelai {
	--reelai-navy: #0C1C3A;
	--reelai-ocean: #0C44A0;
	--reelai-gold: #DCA01E;
	--reelai-teal: #0A7A6E;
	--reelai-cream: #F5F4EF;
	font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
	background: var(--reelai-cream);
	border: 1px solid rgba(12, 28, 58, .12);
	border-radius: 10px;
	padding: 1.5rem;
	margin: 2rem 0;
}

.reelai .reelai-heading {
	font-family: "Libre Baskerville", Georgia, serif;
	color: var(--reelai-navy);
	-webkit-text-fill-color: var(--reelai-navy);
	margin: 0 0 .25rem;
	font-size: 1.35rem;
}

.reelai .reelai-sub {
	margin: 0 0 1rem;
	color: rgba(12, 28, 58, .7);
	-webkit-text-fill-color: rgba(12, 28, 58, .7);
	font-size: .95rem;
}

.reelai .reelai-form { display: flex; flex-direction: column; gap: .75rem; }

.reelai .reelai-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
}

@media (max-width: 640px) {
	.reelai .reelai-row { grid-template-columns: 1fr; }
}

.reelai label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; color: var(--reelai-navy); -webkit-text-fill-color: var(--reelai-navy); }

.reelai input,
.reelai select,
.reelai textarea {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid rgba(12, 28, 58, .2);
	border-radius: 6px;
	font: inherit;
	font-weight: 400;
	background: #fff;
	color: var(--reelai-navy);
	-webkit-text-fill-color: var(--reelai-navy);
}

.reelai input:focus,
.reelai select:focus,
.reelai textarea:focus {
	outline: 2px solid var(--reelai-ocean);
	outline-offset: 1px;
}

.reelai .reelai-submit {
	align-self: flex-start;
	background: var(--reelai-navy);
	color: #fff;
	-webkit-text-fill-color: #fff;
	border: 0;
	border-radius: 6px;
	padding: .7rem 1.4rem;
	font-weight: 700;
	cursor: pointer;
}

.reelai .reelai-submit:hover:not(:disabled) { background: var(--reelai-ocean); }
.reelai .reelai-submit:disabled { opacity: .6; cursor: progress; }

.reelai .reelai-output {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 3px solid var(--reelai-gold);
}

.reelai .reelai-answer h3,
.reelai .reelai-answer h4 {
	font-family: "Libre Baskerville", Georgia, serif;
	color: var(--reelai-navy);
	-webkit-text-fill-color: var(--reelai-navy);
	margin: 1.25rem 0 .4rem;
}

.reelai .reelai-answer h4 { font-size: 1.05rem; }
.reelai .reelai-answer p,
.reelai .reelai-answer li { color: #1b2b45; -webkit-text-fill-color: #1b2b45; line-height: 1.6; }
.reelai .reelai-answer ul { padding-left: 1.2rem; }

.reelai .reelai-working { color: rgba(12, 28, 58, .6); -webkit-text-fill-color: rgba(12, 28, 58, .6); font-style: italic; }
.reelai .reelai-error { color: #8a1c1c; -webkit-text-fill-color: #8a1c1c; }

.reelai .reelai-notice {
	background: rgba(220, 160, 30, .14);
	border-left: 4px solid var(--reelai-gold);
	padding: .75rem 1rem;
	margin-bottom: 1rem;
	font-size: .9rem;
	color: var(--reelai-navy);
	-webkit-text-fill-color: var(--reelai-navy);
}

.reelai .reelai-meta { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 .5rem; font-size: .8rem; }

.reelai .reelai-conf {
	padding: .2rem .6rem;
	border-radius: 99px;
	font-weight: 700;
	text-transform: capitalize;
	color: #fff;
	-webkit-text-fill-color: #fff;
	background: #6b7280;
}

.reelai .reelai-conf-confirmed { background: var(--reelai-teal); }
.reelai .reelai-conf-supported { background: var(--reelai-ocean); }
.reelai .reelai-conf-limited   { background: #B07908; }
.reelai .reelai-conf-unknown   { background: #6b7280; }

.reelai .reelai-asof { color: rgba(12, 28, 58, .6); -webkit-text-fill-color: rgba(12, 28, 58, .6); align-self: center; }

.reelai h5 { margin: 1rem 0 .35rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(12, 28, 58, .65); -webkit-text-fill-color: rgba(12, 28, 58, .65); }
.reelai .reelai-source-list { font-size: .85rem; padding-left: 1.2rem; }
.reelai .reelai-source-list li { margin-bottom: .3rem; }
.reelai .reelai-handle { font-weight: 700; color: var(--reelai-ocean); -webkit-text-fill-color: var(--reelai-ocean); }
.reelai .reelai-date { color: rgba(12, 28, 58, .55); -webkit-text-fill-color: rgba(12, 28, 58, .55); }
.reelai .reelai-stale { color: #B07908; -webkit-text-fill-color: #B07908; font-weight: 600; }

.reelai .reelai-feedback { margin-top: 1rem; display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.reelai .reelai-feedback button {
	background: transparent;
	border: 1px solid rgba(12, 28, 58, .25);
	border-radius: 5px;
	padding: .25rem .8rem;
	cursor: pointer;
	color: var(--reelai-navy);
	-webkit-text-fill-color: var(--reelai-navy);
}
.reelai .reelai-feedback button:hover { border-color: var(--reelai-ocean); color: var(--reelai-ocean); -webkit-text-fill-color: var(--reelai-ocean); }
.reelai .reelai-thanks { color: var(--reelai-teal); -webkit-text-fill-color: var(--reelai-teal); font-weight: 600; }

.reelai .reelai-attribution {
	margin: 1.5rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid rgba(12, 28, 58, .12);
	font-size: .78rem;
	line-height: 1.5;
	color: rgba(12, 28, 58, .6);
	-webkit-text-fill-color: rgba(12, 28, 58, .6);
}
.reelai .reelai-attribution strong { color: var(--reelai-navy); -webkit-text-fill-color: var(--reelai-navy); }

.reelai-badge { padding: .75rem 1rem; margin: 1rem 0; }
.reelai-badge .reelai-attribution { margin: 0; padding-top: 0; border-top: 0; }

/* ============================================================
   Commercial modules.
   Deliberately visually distinct from the ReelAI card: dashed
   neutral borders, no ocean accent, own disclosure. A reader
   must never have to work out which part is editorial.
   ============================================================ */
.reelai .reelai-commerce{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid rgba(12,28,58,.12)}
.reelai .reelai-commerce-intro{
	font-size:.74rem;color:rgba(12,28,58,.55);-webkit-text-fill-color:rgba(12,28,58,.55);
	margin:0 0 .9rem;font-style:italic;
}
.reelai .reelai-module{
	border:1px dashed rgba(12,28,58,.22);
	border-radius:8px;padding:.9rem 1rem;margin-bottom:.85rem;background:#FCFCFB;
}
.reelai .reelai-module-label{
	margin:0 0 .6rem;font-size:.66rem;font-weight:800;text-transform:uppercase;
	letter-spacing:.1em;color:rgba(12,28,58,.6);-webkit-text-fill-color:rgba(12,28,58,.6);
}
.reelai .reelai-module-item{
	display:block;text-decoration:none;padding:.55rem 0;
	border-bottom:1px solid rgba(12,28,58,.07);
}
.reelai .reelai-module-item:last-of-type{border-bottom:0}
.reelai .reelai-module-name{
	display:block;font-weight:700;font-size:.9rem;
	color:var(--reelai-navy);-webkit-text-fill-color:var(--reelai-navy);
}
.reelai .reelai-module-item:hover .reelai-module-name{
	color:var(--reelai-ocean);-webkit-text-fill-color:var(--reelai-ocean);
}
.reelai .reelai-module-blurb{
	display:block;font-size:.8rem;margin-top:.15rem;
	color:rgba(12,28,58,.65);-webkit-text-fill-color:rgba(12,28,58,.65);
}
.reelai .reelai-module-disclosure{
	margin:.7rem 0 0;font-size:.7rem;line-height:1.45;
	color:rgba(12,28,58,.5);-webkit-text-fill-color:rgba(12,28,58,.5);
}

/* Inline contextual CTA appended to reports and guides. Sits apart from the
   article body so it reads as a product handoff, not as editorial copy. */
.reelai-inline-cta{
	margin:2.5rem 0 1rem;padding:1.5rem;border-radius:12px;
	background:linear-gradient(150deg,#0C1C3A,#173766 60%,#0A2E5C);
	font-family:"Nunito Sans",system-ui,-apple-system,sans-serif;
}
.reelai-inline-cta h3{
	margin:0 0 .4rem;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;
	color:#fff;-webkit-text-fill-color:#fff;
}
.reelai-inline-cta > p{
	margin:0 0 1rem;font-size:.92rem;line-height:1.55;
	color:rgba(255,255,255,.82);-webkit-text-fill-color:rgba(255,255,255,.82);
}
.reelai-inline-cta .reelai{margin:0;background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.2)}
.reelai-inline-cta .reelai .reelai-attribution{font-size:.72rem}
.reelai-inline-more{margin:1rem 0 0}
.reelai-inline-more a{
	color:#DCA01E;-webkit-text-fill-color:#DCA01E;
	font-weight:700;font-size:.9rem;text-decoration:none;
}
.reelai-inline-more a:hover{text-decoration:underline}