/* ==========================================================================
   COTE identity components

   The palette lives in app.css with the rest of the tokens. This file holds
   only the things that are specifically COTE: the lockup, the letterhead's
   structural devices, and the maker credit.

   Everything here reads from tokens. There is no raw brand hex below this
   comment — that rule is what keeps the rebrand reversible and what keeps the
   two themes honest.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Letterhead devices

   Three shapes carried over from the document so the application and the
   proposal read as the work of one hand.
   -------------------------------------------------------------------------- */

/*
 * The rule under the letterhead. Thin, brand orange, full bleed of its
 * container. Used once per screen at most — it is a masthead device, and a
 * page with four of them has none.
 */
.brand-rule {
	height: 2px;
	background: var(--brand-rule);
	border: 0;
	margin: 0;
	opacity: .9;
}

/*
 * The eyebrow-over-heading unit: orange letterspaced caps, navy heading
 * directly beneath, no gap worth the name. The application already has .micro
 * doing the eyebrow; this is the pairing, not a new label style.
 */
/*
 * Letterspaced caps get wide fast. A 44-character tenant name already runs to
 * the full measure of the form column, and nothing stops a business from being
 * called something longer — so the eyebrow wraps rather than widening its
 * container and dragging the form off centre.
 */
.brand-eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--s2);
	max-width: 100%;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.brand-heading {
	font-size: var(--t-title);
	font-weight: 660;
	letter-spacing: -.017em;
	color: var(--brand-navy);
	margin: 0;
}

[data-bs-theme="dark"] .brand-heading { color: var(--ink); }

/*
 * The two panel tints. The letterhead uses cool for "prepared for" (the
 * client) and warm for "prepared by" (COTE). That warm/cool split carries a
 * meaning worth keeping: cool is about them, warm is about us.
 */
.brand-panel-cool,
.brand-panel-warm {
	padding: var(--s4);
	border-radius: var(--r-lg);
}
.brand-panel-cool {
	background: var(--brand-tint-cool);
	border-left: 3px solid var(--brand-navy);
}
.brand-panel-warm {
	background: var(--brand-tint-warm);
	border-left: 3px solid var(--brand-orange);
}

[data-bs-theme="dark"] .brand-panel-cool { border-left-color: var(--ink-subtle); }

/* --------------------------------------------------------------------------
   2. The maker credit

   Appears in two places and nowhere else: once on the login page, where the
   authorship of the software is genuinely of interest, and once in the
   application footer, where it is a signature rather than an announcement.

   The customer's own name owns the sidebar, the page title and every printed
   invoice. This is the only real estate COTE takes.
   -------------------------------------------------------------------------- */

.made-by {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: var(--t-caption);
	color: var(--ink-subtle);
	letter-spacing: .01em;
}

.made-by a {
	color: inherit;
	text-decoration: none;
	font-weight: 560;
	border-bottom: 1px solid transparent;
	transition: color var(--d-hover) var(--ease),
	            border-color var(--d-hover) var(--ease);
}

.made-by a:hover {
	color: var(--accent);
	border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/*
 * Focus is not styled away here. Phase 1 sets a global :focus-visible ring and
 * this link uses it unchanged — the hover treatment above is additional, not a
 * replacement.
 */
.made-by a:focus-visible { color: var(--accent); }

/* The footer credit sits on its own line, quiet, centred with the rest. */
.app-credit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s3);
	flex-wrap: wrap;
	padding: var(--s4) var(--s4) var(--s5);
	/*
	 * Room for the fixed .count-actions thumb bar on the stock-take screen at
	 * narrow widths. Without this the credit sits underneath it and is both
	 * unreadable and unclickable.
	 */
	margin-bottom: 0;
	border-top: 1px solid var(--line);
	margin-top: var(--s6);
}

@media (max-width: 640px) {
	.count-mode ~ .app-credit,
	body:has(.count-actions) .app-credit { padding-bottom: 104px; }
}


/* --------------------------------------------------------------------------
   3. Login page identity

   The login screen is the one place the maker is allowed presence rather than
   just a credit, because it is the only screen where nobody is mid-task.
   -------------------------------------------------------------------------- */

.auth-maker {
	display: flex;
	align-items: center;
	gap: var(--s3);
	/*
	 * Below 992px this sits under the form on the page ground, so it takes the
	 * page's own ink. Above 992px it is placed back over the dark panel and
	 * inherits that panel's light ink instead — see the override below.
	 */
	margin: 0;
	padding: var(--s4) var(--s5) var(--s5);
	border-top: 1px solid var(--line);
	color: var(--ink-subtle);
}

@media (min-width: 992px) {
	.auth-maker {
		padding: var(--s4) var(--s6) var(--s6);
		border-top-color: rgb(255 255 255 / .18);
		color: var(--primary-ink);
	}

	[data-bs-theme="dark"] .auth-maker { color: var(--ink); }
}

/*
 * The aside is a dark panel with light text, so --ink-subtle — a slate tuned
 * for a white ground — measures 2.18:1 on it. That is invisible, and it is the
 * kind of failure a token-level contrast audit misses entirely, because both
 * values are legitimate tokens and neither is wrong on its own.
 *
 * Inheriting the panel's own ink and stepping it back with opacity keeps the
 * credit quiet without making it unreadable: 6.45:1 at 80%.
 */
.auth-maker .made-by,
.auth-maker .maker-contact {
	color: inherit;
	opacity: .8;
}

.auth-maker .made-by a {
	opacity: 1;
	border-bottom-color: color-mix(in srgb, currentColor 30%, transparent);
}
.auth-maker .made-by a:hover {
	color: inherit;
	border-bottom-color: currentColor;
}

.auth-maker-line {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--t-caption);
	line-height: 1.35;
}

.auth-maker-line .made-by { font-size: inherit; }
.auth-maker-line .maker-contact { opacity: .75; }