/*
 * Casino Licence Lookup — frontend styles.
 *
 * Everything is scoped under .cll-app and driven by custom properties, so a
 * theme can restyle the widget by overriding the variables alone.
 */

.cll-app {
	--cll-ink: #101820;
	--cll-slate: #5c6672;
	--cll-hairline: #dfe4e9;
	--cll-paper: #ffffff;
	--cll-wash: #f5f7f9;
	--cll-accent: #10425f;
	--cll-valid: #14663f;
	--cll-warn: #8a5a00;
	--cll-void: #9e2a1f;
	--cll-radius: 3px;
	--cll-mono: ui-monospace, "SF Mono", "IBM Plex Mono", "Roboto Mono", Menlo, Consolas, monospace;

	/*
	 * Where a block theme publishes its own palette and fonts, those win. The
	 * values above are only the fallback for a theme that publishes nothing.
	 */
	--cll-font: inherit;
	--cll-accent: var(--wp--preset--color--primary, #10425f);

	--cll-width: 780px;

	box-sizing: border-box;
	font-family: var(--cll-font);
	color: var(--cll-ink);
	max-width: var(--cll-width);
}

/* Density: the same layout at two scales, rather than a second stylesheet. */

.cll-app--compact .cll-row {
	min-height: 44px;
	padding: 6px 2px;
}

.cll-app--compact .cll-row__name { font-size: 14px; }
.cll-app--compact .cll-row__domain { font-size: 11px; }
.cll-app--compact .cll-search__input { padding: 10px 40px 10px 13px; font-size: 15px; }
.cll-app--compact .cll-entry__head { padding: 13px 15px; }
.cll-app--compact .cll-section { padding: 13px 15px; }
.cll-app--compact .cll-meta__cell { padding: 10px 15px; }
.cll-app--compact .cll-entry__brand { font-size: 21px; }
.cll-app--compact .cll-licence__number { font-size: 18px; }

.cll-app--norank .cll-row {
	grid-template-columns: minmax(0, 1fr) auto;
}

/* The verified marker, as a dot or as words. */

.cll-app--marker-text .cll-row__verified::after {
	content: none;
}

.cll-app--marker-text .cll-row__verified {
	margin-left: 7px;
	font-family: var(--cll-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cll-valid);
}

/*
 * Themes commonly style headings and buttons globally — a highlight behind an
 * h3, a background on every button — which lands on our markup uninvited. These
 * reset only what would disfigure the component, not its typography.
 */
.cll-app :is(h2, h3, h4) {
	background: none;
	box-shadow: none;
	padding: 0;
	border: 0;
	color: inherit;
}

.cll-app button {
	font-family: inherit;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
}

.cll-app a {
	box-shadow: none;
}

.cll-app *,
.cll-app *::before,
.cll-app *::after {
	box-sizing: inherit;
}

.cll-app__heading {
	margin: 0 0 0.6em;
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- search */

.cll-search__label {
	display: block;
	font-family: var(--cll-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cll-slate);
	margin-bottom: 8px;
}

.cll-search__field {
	position: relative;
}

.cll-search__input {
	width: 100%;
	padding: 14px 44px 14px 16px;
	font-size: 17px;
	line-height: 1.3;
	color: var(--cll-ink);
	background: var(--cll-paper);
	border: 1px solid var(--cll-hairline);
	border-bottom-width: 2px;
	border-bottom-color: var(--cll-accent);
	border-radius: var(--cll-radius);
	outline-offset: 2px;
}

.cll-search__input:focus {
	outline: 2px solid var(--cll-accent);
}

.cll-search__clear {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 1;
	color: var(--cll-slate);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.cll-search__clear:hover {
	background: var(--cll-wash);
	color: var(--cll-ink);
}

.cll-search__hint {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--cll-slate);
}

/* ------------------------------------------------------------ suggestions */

.cll-suggest {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 340px;
	overflow-y: auto;
	background: var(--cll-paper);
	border: 1px solid var(--cll-hairline);
	border-radius: var(--cll-radius);
	box-shadow: 0 12px 28px -18px rgba(16, 24, 32, 0.5);
}

.cll-suggest[hidden] {
	display: none;
}

.cll-suggest__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--cll-hairline);
}

.cll-suggest__item:last-child {
	border-bottom: 0;
}

.cll-suggest__item[aria-selected="true"],
.cll-suggest__item:hover {
	background: var(--cll-wash);
}

.cll-suggest__brand {
	font-weight: 600;
}

.cll-suggest__domain {
	font-family: var(--cll-mono);
	font-size: 12px;
	color: var(--cll-slate);
	margin-left: auto;
	white-space: nowrap;
}

.cll-suggest__matched {
	font-size: 12px;
	color: var(--cll-slate);
}

.cll-suggest__empty {
	padding: 12px 14px;
	font-size: 14px;
	color: var(--cll-slate);
}

/* ----------------------------------------------------------------- entry */

.cll-result:empty {
	display: none;
}

.cll-entry {
	margin-top: 20px;
	background: var(--cll-paper);
	border: 1px solid var(--cll-hairline);
	border-radius: var(--cll-radius);
}

.cll-entry__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--cll-hairline);
}

.cll-entry__eyebrow {
	width: 100%;
	font-family: var(--cll-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cll-slate);
}

.cll-entry__brand {
	margin: 0;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.cll-entry__domain {
	font-family: var(--cll-mono);
	font-size: 13px;
	color: var(--cll-accent);
	align-self: center;
}

.cll-status {
	margin-left: auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 10px;
	font-family: var(--cll-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid currentColor;
	border-radius: 100px;
	color: var(--cll-slate);
}

.cll-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.cll-status--valid { color: var(--cll-valid); }
.cll-status--warn { color: var(--cll-warn); }
.cll-status--void { color: var(--cll-void); }

/* Key/value grid */

.cll-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	background: var(--cll-hairline);
	border-bottom: 1px solid var(--cll-hairline);
}

.cll-app--dark .cll-meta {
	background: var(--cll-hairline);
}

.cll-meta__cell {
	padding: 14px 20px;
	background: var(--cll-paper);
}

.cll-meta__label {
	display: block;
	font-family: var(--cll-mono);
	font-size: 10px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--cll-slate);
	margin-bottom: 5px;
}

.cll-meta__value {
	font-size: 15px;
	line-height: 1.45;
	word-break: break-word;
}

/* Licence blocks — the signature element: a status rail plus the licence
   number set large in the data face. */

.cll-section {
	padding: 18px 20px;
	border-bottom: 1px solid var(--cll-hairline);
}

.cll-section:last-child {
	border-bottom: 0;
}

.cll-section__title {
	margin: 0 0 12px;
	font-family: var(--cll-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cll-slate);
}

.cll-licence {
	position: relative;
	padding: 2px 0 2px 18px;
	margin-bottom: 20px;
}

.cll-licence:last-child {
	margin-bottom: 0;
}

.cll-licence::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: 3px;
	background: var(--cll-slate);
	border-radius: 2px;
}

.cll-licence--valid::before { background: var(--cll-valid); }
.cll-licence--warn::before { background: var(--cll-warn); }
.cll-licence--void::before { background: var(--cll-void); }

.cll-licence__regulator {
	font-size: 15px;
	font-weight: 600;
}

.cll-licence__number {
	display: block;
	margin: 4px 0 8px;
	font-family: var(--cll-mono);
	font-size: 21px;
	letter-spacing: -0.01em;
	word-break: break-all;
}

.cll-licence__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 13px;
	color: var(--cll-slate);
}

.cll-licence__facts b {
	font-family: var(--cll-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	margin-right: 6px;
}

.cll-licence__source {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--cll-accent);
}

/* Regulatory actions */

.cll-action {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 4px 16px;
	padding: 10px 0;
	border-top: 1px dotted var(--cll-hairline);
}

.cll-action:first-of-type {
	border-top: 0;
}

.cll-action__date {
	font-family: var(--cll-mono);
	font-size: 12px;
	color: var(--cll-slate);
	padding-top: 2px;
}

.cll-action__title {
	font-weight: 600;
	font-size: 15px;
}

.cll-action__type {
	font-family: var(--cll-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cll-void);
	margin-left: 8px;
}

.cll-action__summary {
	grid-column: 2;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cll-slate);
	margin: 2px 0 0;
}

.cll-action__link,
.cll-sources__link {
	font-size: 13px;
	color: var(--cll-accent);
}

.cll-sources {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cll-entry__foot {
	padding: 12px 20px;
	font-family: var(--cll-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--cll-slate);
	background: var(--cll-wash);
	border-top: 1px solid var(--cll-hairline);
}

.cll-empty {
	margin-top: 20px;
	padding: 16px 20px;
	font-size: 15px;
	color: var(--cll-slate);
	background: var(--cll-wash);
	border-left: 3px solid var(--cll-slate);
}

/* ----------------------------------------------------------------- lists */

.cll-lists {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--cll-hairline);
}

.cll-list__title {
	margin: 0 0 10px;
	font-family: var(--cll-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cll-slate);
}

.cll-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cll-list__item + .cll-list__item {
	border-top: 1px solid var(--cll-hairline);
}

.cll-list__empty {
	margin: 0;
	font-size: 14px;
	color: var(--cll-slate);
}

/* Collapsed row: three columns, two lines of content. */

.cll-row {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: start;
	gap: 2px 10px;
	/* A fixed two-line box: rows stay the same height whether or not a site
	   has a separate domain line, so the column reads as a list rather than a
	   ragged stack. */
	padding: 9px 2px;
	min-height: 56px;
}

.cll-row__rank {
	font-family: var(--cll-mono);
	font-size: 11px;
	line-height: 1.7;
	color: var(--cll-slate);
}

.cll-row__main {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.cll-row__main:hover .cll-row__name,
.cll-row__main:focus-visible .cll-row__name {
	color: var(--cll-accent);
}

.cll-row__name {
	display: block;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* A small mark on the uncommon case: a name the regulator actually publishes. */
.cll-row__verified::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 7px;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--cll-valid);
}

.cll-row__unverified {
	margin-left: 7px;
	font-family: var(--cll-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cll-slate);
	opacity: 0.75;
}

.cll-row__domain {
	display: block;
	font-family: var(--cll-mono);
	font-size: 12px;
	line-height: 1.5;
	color: var(--cll-slate);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cll-row__meta {
	display: block;
	margin-top: 2px;
	font-family: var(--cll-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--cll-slate);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cll-row__sep {
	margin: 0 6px;
	opacity: 0.5;
}

.cll-row__status--valid { color: var(--cll-valid); }
.cll-row__status--warn { color: var(--cll-warn); }
.cll-row__status--void { color: var(--cll-void); }

.cll-row__aside {
	align-self: start;
	font-family: var(--cll-mono);
	font-size: 11px;
	line-height: 1.7;
	color: var(--cll-slate);
	white-space: nowrap;
	text-align: right;
}

.cll-row__main[aria-expanded="true"] .cll-row__name::after {
	content: "";
}

/* Expanded panel */

.cll-row__panel[hidden] {
	display: none;
}

.cll-panel {
	margin: 0 0 12px 36px;
	padding: 12px 14px;
	background: var(--cll-wash);
	border-left: 2px solid var(--cll-hairline);
	border-radius: 0 var(--cll-radius) var(--cll-radius) 0;
}

.cll-panel__facts {
	display: grid;
	grid-template-columns: minmax(90px, auto) 1fr;
	gap: 5px 14px;
	margin: 0 0 10px;
}

.cll-panel__facts dt {
	font-family: var(--cll-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cll-slate);
	padding-top: 2px;
}

.cll-panel__facts dd {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	word-break: break-word;
}

.cll-panel__open {
	font-family: var(--cll-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cll-accent);
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	padding: 0 0 1px;
	cursor: pointer;
}

.cll-row__loading {
	margin: 0 0 12px 36px;
	font-size: 13px;
	color: var(--cll-slate);
}

/* Provenance and status rule */

.cll-provenance {
	margin: 0;
	padding: 10px 20px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cll-slate);
	background: var(--cll-wash);
	border-bottom: 1px solid var(--cll-hairline);
}

.cll-provenance__date {
	font-family: var(--cll-mono);
	font-size: 12px;
}

.cll-entry__rule {
	width: 100%;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cll-slate);
}

.cll-licence__nonumber {
	display: block;
	margin: 4px 0 8px;
	font-size: 14px;
	font-style: italic;
	color: var(--cll-slate);
}

.cll-licence__published,
.cll-action__published {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--cll-slate);
}

.cll-licence__publishedLabel {
	font-family: var(--cll-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cll-licence__publishedValue {
	font-style: italic;
}

/* ----------------------------------------------------------------- theme */

/*
 * The palette above assumes a light page. On a dark theme the ink colour lands
 * on a dark background and the site name disappears, so the same variables are
 * restated for dark surfaces.
 *
 * `theme="auto"` (the default) follows the reader's system setting.
 * `theme="dark"` or `theme="light"` on the shortcode forces one, for themes
 * that are dark regardless of the system preference.
 */

.cll-app--dark {
	--cll-ink: #e8edf2;
	--cll-slate: #96a2b0;
	--cll-hairline: #2b333d;
	--cll-paper: #151b22;
	--cll-wash: #1b222a;
	--cll-accent: #7fb2d6;
	--cll-valid: #5fc58a;
	--cll-warn: #e0ab5a;
	--cll-void: #e28b81;
}

@media (prefers-color-scheme: dark) {
	.cll-app--auto {
		--cll-ink: #e8edf2;
		--cll-slate: #96a2b0;
		--cll-hairline: #2b333d;
		--cll-paper: #151b22;
		--cll-wash: #1b222a;
		--cll-accent: #7fb2d6;
		--cll-valid: #5fc58a;
		--cll-warn: #e0ab5a;
		--cll-void: #e28b81;
	}
}

/* Surfaces that were written assuming a white page. */

.cll-app--dark .cll-entry,
.cll-app--dark .cll-suggest,
.cll-app--dark .cll-search__input,
.cll-app--dark .cll-meta__cell,
.cll-app--dark .cll-panel,
.cll-app--dark .cll-provenance,
.cll-app--dark .cll-entry__foot,
.cll-app--dark .cll-empty {
	background: var(--cll-paper);
	color: var(--cll-ink);
}

.cll-app--dark .cll-panel,
.cll-app--dark .cll-provenance,
.cll-app--dark .cll-entry__foot {
	background: var(--cll-wash);
}

.cll-app--dark .cll-search__input::placeholder {
	color: var(--cll-slate);
}

@media (prefers-color-scheme: dark) {
	.cll-app--auto .cll-entry,
	.cll-app--auto .cll-suggest,
	.cll-app--auto .cll-search__input,
	.cll-app--auto .cll-meta__cell,
	.cll-app--auto .cll-empty {
		background: var(--cll-paper);
		color: var(--cll-ink);
	}

	.cll-app--auto .cll-panel,
	.cll-app--auto .cll-provenance,
	.cll-app--auto .cll-entry__foot {
		background: var(--cll-wash);
	}
}

/* --------------------------------------------------------------- utility */

.cll-app .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cll-app.is-busy .cll-search__input {
	background-image: linear-gradient(90deg, transparent, rgba(16, 66, 95, 0.08), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: cll-scan 1s linear infinite;
}

@keyframes cll-scan {
	from { background-position: -40% 0; }
	to { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.cll-app.is-busy .cll-search__input {
		animation: none;
	}
}

@media (max-width: 480px) {
	.cll-entry__brand { font-size: 22px; }
	.cll-licence__number { font-size: 18px; }
	.cll-action { grid-template-columns: 1fr; }
	.cll-action__summary { grid-column: 1; }
}

/* Provenance markers: an unverified name and an action's attribution route
   are both stated rather than quietly presented as fact. */

.cll-suggest__unverified {
	font-family: var(--cll-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cll-slate);
	opacity: 0.75;
}

.cll-entry__note {
	width: 100%;
	font-size: 13px;
	color: var(--cll-slate);
}

.cll-action__relation {
	font-family: var(--cll-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cll-slate);
	margin-left: 8px;
}

/* ------------------------------------------------------------------ feeds */

.cll-feed {
	max-width: 560px;
}

.cll-feed__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cll-feed__item {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 2px 14px;
	padding: 10px 0;
	border-top: 1px solid var(--cll-hairline);
}

.cll-feed__item:first-child {
	border-top: 0;
}

.cll-feed__date {
	font-family: var(--cll-mono);
	font-size: 11px;
	line-height: 1.7;
	color: var(--cll-slate);
	white-space: nowrap;
}

.cll-feed__site {
	display: block;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
}

.cll-feed__domain {
	display: block;
	font-family: var(--cll-mono);
	font-size: 11px;
	color: var(--cll-slate);
}

.cll-feed__headline {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	margin-top: 2px;
}

.cll-feed__from {
	color: var(--cll-slate);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.cll-feed__arrow {
	margin: 0 6px;
	color: var(--cll-slate);
}

.cll-feed__meta {
	display: block;
	margin-top: 2px;
	font-family: var(--cll-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--cll-slate);
}

.cll-feed__more {
	display: inline-block;
	margin-top: 12px;
	font-family: var(--cll-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cll-accent);
}

/* Register summary */

.cll-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0 32px;
}

.cll-stats__figure {
	display: block;
}

.cll-stats__number {
	display: block;
	font-family: var(--cll-mono);
	font-size: 26px;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.cll-stats__label {
	display: block;
	font-family: var(--cll-mono);
	font-size: 10px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--cll-slate);
}

.cll-feed .cll-provenance {
	margin-top: 14px;
	padding: 0;
	background: none;
	border: 0;
}

@media (max-width: 480px) {
	.cll-feed__item { grid-template-columns: 1fr; }
	.cll-feed__date { line-height: 1.4; }
}