/* DMARC Analyzer: additions to the bright color workbench (bc-workbench.css).
   Only tokens from bc-tokens.css; no colours of our own. */

/* Chart colours, validated for both modes: passed and failed as status colours. */
[data-bc-variant="workbench"] { --app-chart-pass: var(--bc-ok-text); --app-chart-fail: var(--bc-pink); }
[data-bc-variant="workbench"][data-theme="dark"] { --app-chart-pass: var(--bc-ok-deep); }

/* Skip link: hidden until focused, yellow on ink like the rail focus. */
.bc .app-skip {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1100;
	padding: 8px 14px;
	background: var(--bc-ink);
	border-radius: var(--bc-radius-sm);
	color: var(--bc-yellow);
	font-weight: 700;
	transform: translateY(-200%);
}
.bc .app-skip:focus { transform: none; outline: 3px solid var(--bc-yellow); outline-offset: 2px; }
.bc-content:focus { outline: 0; }

/* A module without sub menu: the current page carries the mark of the open module. */
.bc-rail__item[aria-current="page"] { background: var(--bc-rail-2); color: #ffffff; }
.bc-rail__item[aria-current="page"]::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: -12px;
	width: 4px;
	border-radius: 0 3px 3px 0;
	background: var(--bc-yellow);
}
.bc-rail__item[aria-current="page"] .bc-rail__icon { color: var(--bc-yellow); opacity: 1; }

/* Page head with actions on the right. */
.app-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.app-head__text { min-width: 0; }
.app-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.app-head__actions:empty { display: none; }
.bc .bc-page-head h1 { overflow-wrap: break-word; }

.app-user__meta { display: block; color: var(--bc-text-quiet); font-size: 12.5px; }
.bc .app-user__meta a { color: var(--bc-text-quiet); text-underline-offset: 3px; }
.bc .app-user__meta a:hover { color: var(--bc-text-loud); }

/* Layout helpers ------------------------------------------------------------------- */

.app-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
@container (min-width: 60rem) {
	.app-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.app-grid--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.app-stack > * + * { margin-top: 12px; }
.app-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-inline form { margin: 0; }
/* Form rows that belong to one choice of a select (data-show-for); they stay part of the form grid */
.app-contents { display: contents; }
.app-contents[hidden] { display: none; }
.bc-formgrid > .app-contents > label,
.bc-formgrid > .app-contents > .bc-formgrid__label { font-weight: 700; color: var(--bc-text-loud); }
.app-reason { display: block; margin-top: 4px; color: var(--bc-text-quiet); font-size: 12.5px; overflow-wrap: anywhere; }

.bc .app-quiet { color: var(--bc-text-quiet); }
.bc .app-small { font-size: 13px; }
.app-mono { font-family: var(--bc-font-mono); font-size: .92em; }
.app-break { overflow-wrap: anywhere; }
.app-nowrap { white-space: nowrap; }

/* Key and value pairs. */
.app-dl { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.app-dl dt { color: var(--bc-text-quiet); font-size: 13px; font-weight: 700; }
.app-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Empty state inside a panel. */
.bc .app-empty { padding: 28px 24px; text-align: center; color: var(--bc-text-quiet); }
.bc .app-empty__title { margin: 0 0 4px; font-weight: 700; color: var(--bc-text-loud); }
.bc .app-empty p { margin: 0 auto 12px; max-width: 34rem; }

/* Filters above a table. */
.app-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--bc-rule); }
.app-filter label { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; color: var(--bc-text-loud); }
.app-filter .bc-input,
.app-filter .bc-select { width: auto; min-width: 11rem; }

/* Code box for DNS records and tokens, with a copy button. */
.app-code { display: flex; align-items: stretch; margin: 0 0 12px; }
.app-code code {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	background: var(--bc-head);
	border: 1px solid var(--bc-field-edge);
	border-right: 0;
	border-radius: var(--bc-radius-sm) 0 0 var(--bc-radius-sm);
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.app-code .bc-button { border-radius: 0 var(--bc-radius-sm) var(--bc-radius-sm) 0; }
.app-code__label { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--bc-text-loud); }

/* Report format badge: new format in cyan with deep ink (8.1:1), old format neutral. */
.app-format {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}
.app-format--rfc9990 { background: var(--bc-cyan); color: var(--bc-deep); }
.app-format--rfc7489 { background: var(--bc-head); color: var(--bc-text); box-shadow: inset 0 0 0 1px var(--bc-rule-loud); }
.app-format--unknown { background: transparent; color: var(--bc-text-quiet); box-shadow: inset 0 0 0 1px var(--bc-rule); }

/* Legend for charts: swatch plus word, never colour alone. */
.app-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 13px; }
.app-legend li { display: inline-flex; align-items: center; gap: 8px; }
.app-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.app-swatch--pass { background: var(--app-chart-pass); }
.app-swatch--fail { background: var(--app-chart-fail); }

/* Stacked day bars. */
.app-bars__pass { fill: var(--app-chart-pass); }
.app-bars__fail { fill: var(--app-chart-fail); }
.app-bars__hit { fill: transparent; }
.app-bars__day:hover .app-bars__hit { fill: var(--bc-hover); }
.app-bars__axis { stroke: var(--bc-rule-loud); stroke-width: 1; }

/* Share bars for magnitudes: one hue, the number stands beside the bar. */
.app-share { display: block; height: 8px; min-width: 2px; background: var(--bc-magenta); border-radius: 99px; }
.app-share-track { display: block; background: var(--bc-head); border-radius: 99px; box-shadow: inset 0 0 0 1px var(--bc-rule); }

/* Disclosure "als Tabelle" under a chart. */
.bc .app-details { margin-top: 14px; }
.bc .app-details summary { cursor: pointer; color: var(--bc-link); font-size: 13px; font-weight: 700; }
.bc .app-details summary:hover { color: var(--bc-link-hover); }
.bc .app-details[open] summary { margin-bottom: 10px; }

/* Explanations and comparisons on the help page. */
.bc .app-prose { max-width: 46rem; }
.bc .app-prose p,
.bc .app-prose li { line-height: 1.6; }
.bc .app-prose ul { margin: 0 0 .8em; padding-left: 1.2em; }
.bc .app-compare td,
.bc .app-compare th { vertical-align: top; }

/* Password strength: five segments; the word carries the meaning. */
.app-strength { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 8px 0 4px; }
.app-strength span { height: 6px; background: var(--bc-head); border-radius: 99px; box-shadow: inset 0 0 0 1px var(--bc-rule); }
.app-strength[data-level="1"] span:nth-child(-n+1),
.app-strength[data-level="2"] span:nth-child(-n+2) { background: var(--bc-pink); box-shadow: none; }
.app-strength[data-level="3"] span:nth-child(-n+3) { background: var(--bc-yellow); box-shadow: none; }
.app-strength[data-level="4"] span:nth-child(-n+4),
.app-strength[data-level="5"] span:nth-child(-n+5) { background: var(--bc-ok-mid); box-shadow: none; }
.bc .app-strength-text { margin: 0; font-size: 13px; color: var(--bc-text-quiet); }

/* Form rows outside the form grid. */
.bc .app-field { display: grid; gap: 6px; }
.bc .app-field > label { font-weight: 700; color: var(--bc-text-loud); }
.bc .app-field .bc-field-error { grid-column: 1; margin: 0; }
.app-form { display: grid; gap: 16px; }

/* The standalone pages (login, setup) keep the login layout. */
.bc .bc-login__brand h1 { overflow-wrap: break-word; }
.bc .app-login-note { margin: 0; color: var(--bc-on-ink-quiet); font-size: 13px; }

@media (max-width: 900px) {
	.app-filter { padding: 14px 16px; }
	.app-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
	.app-dl dd { margin-bottom: 8px; }
}

/* Error page without the frame. */
.app-error { display: grid; place-items: center; min-height: 100vh; padding: 48px 16px; }
.app-error__card { width: min(100%, 36rem); }
.bc .app-error h1 { margin: 0 0 12px; }
.bc .app-error__message { max-width: 34rem; }

/* Button glued to the right of a field, like the unit add-on. */
.bc-addon .app-addon-button {
	min-height: 38px;
	border: 1px solid var(--bc-field-edge);
	border-left: 0;
	border-radius: 0 var(--bc-radius-sm) var(--bc-radius-sm) 0;
	color: var(--bc-text-quiet);
}
.bc-addon .app-addon-button[aria-pressed="true"] { color: var(--bc-text-loud); }

/* State pills stay on one line. */
.bc-state { white-space: nowrap; }

/* File field: the native button sits inside the workbench field. */
.bc .app-file { height: auto; padding: 6px 8px; }
.bc .app-file::file-selector-button {
	margin-right: 12px;
	padding: 6px 12px;
	background: var(--bc-head);
	border: 1px solid var(--bc-field-edge);
	border-radius: 6px;
	color: var(--bc-text-loud);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* A button that reads like a text link. */
.bc .app-link-button {
	padding: 0;
	background: none;
	border: 0;
	color: var(--bc-link);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.bc .app-link-button:hover { color: var(--bc-link-hover); }