/*
	Shared UI tokens and components.
	Style guide: .claude/rules/ui-style.md (project root)
	Reference implementations: Orders.cfm results grid and pipeline modal.
*/

/* ---------- Tokens ---------- */

:root {
	/* Each app's theme: its brand color and light tint. The theme files (production.css, parts.css, requests.css,
	   admin.css) point --wc-brand and --wc-hover at their app's pair; start.cfm colors each app's card with them. */
	--wc-theme-sales:            #115a8a;
	--wc-theme-sales-hover:      #eef4fa;
	--wc-theme-production:       #9b1c1c;
	--wc-theme-production-hover: #fcf0f0;
	--wc-theme-parts:            #025653;
	--wc-theme-parts-hover:      #e8f3f2;
	--wc-theme-requests:         #334155;
	--wc-theme-requests-hover:   #f1f5f9;
	--wc-theme-admin:            #3730a3;
	--wc-theme-admin-hover:      #eef0fb;

	--wc-brand: var(--wc-theme-sales);
	--wc-text: #1f2933;
	--wc-muted: #7b8794;
	--wc-border: #e4e7eb;
	--wc-border-strong: #cbd2d9;
	--wc-head-bg: #f5f7fa;
	--wc-stripe: #fafbfc;
	--wc-hover: var(--wc-theme-sales-hover);
	--wc-band-bg: #e9eef3;
	--wc-danger: #c62828;
	--wc-danger-bg: #fdecea;
	--wc-success: #2e7d32;
	--wc-success-bg: #e3f2e6;
	--wc-info: #1d4ed8;
	--wc-info-bg: #e3ecfa;
	--wc-disabled: #bcccdc;
	--wc-faint: #d9e2ec;
	--wc-focus-ring: 0 0 0 2px #1c3e5526;
	--wc-danger-ring: 0 0 0 2px #c6282826;
	--wc-shadow: 0 12px 32px rgba(16, 42, 67, .18);
	--wc-font: "Google Sans Flex", Arial, sans-serif;

	/* Status colors: text/accent on a light tint (both pass 4.5:1) */
	--wc-status-new:          #1d4ed8;
	--wc-status-new-bg:       #e3ecfa;
	--wc-status-hold:         #b45309;
	--wc-status-hold-bg:      #fef3c7;
	--wc-status-open:         #0f766e;
	--wc-status-open-bg:      #d5f5ef;
	--wc-status-shipped:      #6d28d9;
	--wc-status-shipped-bg:   #ede9fe;
	--wc-status-invoiced:     #a21caf;
	--wc-status-invoiced-bg:  #fae8ff;
	--wc-status-closed:       #2e7d32;
	--wc-status-closed-bg:    #e3f2e6;
	--wc-status-cancelled:    #c62828;
	--wc-status-cancelled-bg: #fdecea;

	/* Warranty orders (backend/Warranty.cfc): a yellow kept apart from the on-hold amber */
	--wc-warranty:        #7a5c00;
	--wc-warranty-bg:     #fff3b0;
	--wc-warranty-border: #e8c840;
	--wc-warranty-row:    #fffbe6;

	/* Shops (backend/ShopQueue.cfc): each shop's color, light tint, border, hover and focus ring, kept apart from the
	   status colors. Used through data-shop (below), and as a page subtheme on WorkOrders.cfm (workOrders.css). */
	/* Shop 1 gold: warm, to sit with the production red. Yellow, not the amber of "On hold" (--wc-status-hold),
	   though the two are hard to tell apart with red-green colorblindness */
	--wc-shop-1:          #a16207;
	--wc-shop-1-bg:       #fef9c3;
	--wc-shop-1-border:   #fde047;
	--wc-shop-1-hover:    #fefce8;
	--wc-shop-1-ring:     0 0 0 2px #a1620726;
	--wc-shop-2:          #c2410c;
	--wc-shop-2-bg:       #ffedd5;
	--wc-shop-2-border:   #fdba74;
	--wc-shop-2-hover:    #fff7ed;
	--wc-shop-2-ring:     0 0 0 2px #c2410c26;
	--wc-shop-both:        #475569;
	--wc-shop-both-bg:     #f1f5f9;
	--wc-shop-both-border: #94a3b8;
}

/* ---------- Status tones ---------- */

/* data-tone="<order or quote status>" sets --tone / --tone-bg for anything inside it */
[data-tone] {
	--tone: var(--wc-muted);
	--tone-bg: var(--wc-head-bg);
}

[data-tone="new" i],
[data-tone="quote" i]       { --tone: var(--wc-status-new);       --tone-bg: var(--wc-status-new-bg); }
[data-tone="onhold" i]      { --tone: var(--wc-status-hold);      --tone-bg: var(--wc-status-hold-bg); }
[data-tone="open" i]        { --tone: var(--wc-status-open);      --tone-bg: var(--wc-status-open-bg); }
[data-tone="shipping" i],
[data-tone="shipped" i]     { --tone: var(--wc-status-shipped);   --tone-bg: var(--wc-status-shipped-bg); }
[data-tone="invoiced" i]    { --tone: var(--wc-status-invoiced);  --tone-bg: var(--wc-status-invoiced-bg); }
[data-tone="closed" i],
[data-tone="closedquote" i] { --tone: var(--wc-status-closed);    --tone-bg: var(--wc-status-closed-bg); }
[data-tone="cancelled" i],
[data-tone="cquote" i]      { --tone: var(--wc-status-cancelled); --tone-bg: var(--wc-status-cancelled-bg); }

/* data-shop="1", "2" or "both" sets --shop / --shop-bg / --shop-border for anything inside it */
[data-shop] {
	--shop: var(--wc-muted);
	--shop-bg: var(--wc-head-bg);
	--shop-border: var(--wc-border-strong);
}

[data-shop="1"]      { --shop: var(--wc-shop-1);    --shop-bg: var(--wc-shop-1-bg);    --shop-border: var(--wc-shop-1-border); }
[data-shop="2"]      { --shop: var(--wc-shop-2);    --shop-bg: var(--wc-shop-2-bg);    --shop-border: var(--wc-shop-2-border); }
[data-shop="both" i] { --shop: var(--wc-shop-both); --shop-bg: var(--wc-shop-both-bg); --shop-border: var(--wc-shop-both-border); }

/* Status pill: <span class="wc-status" data-tone="open">Open</span> */
.wc-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background-color: var(--tone-bg);
	color: var(--tone);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

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

.wc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wc-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wc-muted);
}

.wc-input {
	box-sizing: border-box;
	height: 32px;
	padding: 4px 8px;
	border: 1px solid var(--wc-border-strong);
	border-radius: 4px;
	background: white;
	font: inherit;
	color: inherit;
}

textarea.wc-input {
	width: 100%;
	height: 88px;
	resize: none;
	line-height: 1.4;
}

.wc-input:focus {
	outline: none;
	border-color: var(--wc-brand);
	box-shadow: var(--wc-focus-ring);
}

/* Muted rather than faint: some disabled inputs display values (e.g. the group number) */
.wc-input:disabled {
	background-color: var(--wc-head-bg);
	color: var(--wc-muted);
	cursor: not-allowed;
}

select.wc-input { cursor: pointer; }

/* Calculated values the user can't edit (still posted, unlike disabled) */
.wc-input[readonly] {
	background-color: var(--wc-head-bg);
	color: var(--wc-text);
}

.wc-input[readonly]:focus {
	border-color: var(--wc-border-strong);
	box-shadow: none;
}

.wc-input.is-invalid { border-color: var(--wc-danger); }

.wc-input.is-invalid:focus {
	border-color: var(--wc-danger);
	box-shadow: var(--wc-danger-ring);
}

.wc-field-error {
	margin: 0;
	font-size: 12px;
	color: var(--wc-danger);
}

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

.wc-btn {
	height: 32px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.wc-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.wc-btn:focus-visible {
	outline: none;
	box-shadow: var(--wc-focus-ring);
}

.wc-btn--primary {
	background-color: var(--wc-brand);
	color: white;
}

.wc-btn--primary:hover { opacity: .9; }

.wc-btn--secondary {
	border-color: var(--wc-border-strong);
	background-color: white;
	color: var(--wc-brand);
}

.wc-btn--secondary:hover {
	border-color: var(--wc-brand);
	background-color: var(--wc-hover);
}

.wc-btn--danger {
	border-color: currentColor;
	color: var(--wc-danger);
}

.wc-btn--danger:hover { background-color: var(--wc-danger-bg); }

.wc-btn--text { color: var(--wc-muted); }

.wc-btn--text:hover {
	color: var(--wc-text);
	background-color: var(--wc-head-bg);
}

/* ---------- Badges ---------- */

.wc-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: .8em;
	font-weight: 600;
	vertical-align: middle;
}

.wc-badge--info    { background-color: var(--wc-info-bg);    color: var(--wc-info); }
.wc-badge--success { background-color: var(--wc-success-bg); color: var(--wc-success); }

/* Flag: a pill with an icon that pops in when the page loads, e.g. the Warranty flag on warranty orders
   <span class="wc-flag wc-flag--warranty" title="…"><i class="nf nf-md-flag" aria-hidden="true"></i>Warranty</span> */
.wc-flag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px 1px 6px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--wc-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
	vertical-align: middle;
	animation: wc-flag-pop .35s cubic-bezier(.34, 1.56, .64, 1) both;
}

.wc-flag .nf { font-size: 13px; }

.wc-flag--warranty {
	border-color: var(--wc-warranty-border);
	background-color: var(--wc-warranty-bg);
	color: var(--wc-warranty);
}

/* Shop flag, in the shop's colors (data-shop on it or around it); a "both" job's is half of each shop's tint.
   <span class="wc-flag wc-flag--shop" data-shop="1"><i class="nf nf-md-factory" aria-hidden="true"></i>Shop 1</span>
   wc-flag--queued: waiting in the shop's queue (dashed, on white) */
.wc-flag--shop {
	border-color: var(--shop-border);
	background-color: var(--shop-bg);
	color: var(--shop);
}

.wc-flag--shop[data-shop="both" i] {
	background-image: linear-gradient(90deg, var(--wc-shop-1-bg) 50%, var(--wc-shop-2-bg) 50%);
}

.wc-flag--shop.wc-flag--queued {
	border-style: dashed;
	background: white;
}

/* A copy: the job it was duplicated or revised from, usually a link to it (backend/JobHistory.cfc)
   <a class="wc-flag wc-flag--copy" href="orderOverview.cfm?orderID=q24560"><i class="nf nf-md-content_copy" aria-hidden="true"></i>Copy of q24560</a> */
.wc-flag--copy,
a.wc-flag--copy:visited {
	border-color: var(--wc-border-strong);
	background-color: white;
	color: var(--wc-brand);
	text-decoration: none;
}

a.wc-flag--copy:hover {
	border-color: var(--wc-brand);
	background-color: var(--wc-hover);
	color: var(--wc-brand);   /* not wc.css's brown a:hover */
	text-decoration: none;
}

a.wc-flag--copy:focus-visible {
	outline: none;
	box-shadow: var(--wc-focus-ring);
}

/* What keeps an order off the deck: BOL sent, Boxed; Back ordered and Delayed in red (wc-flag--hold-alert).
   Shown in place of the shop's flag (backend/ShopQueue.cfc holdsOf). */
.wc-flag--hold {
	border-color: var(--wc-border-strong);
	background-color: var(--wc-head-bg);
	color: var(--wc-text);
}

.wc-flag--hold.wc-flag--hold-alert {
	border-color: var(--wc-danger);
	background-color: var(--wc-danger-bg);
	color: var(--wc-danger);
}

@keyframes wc-flag-pop {
	from { opacity: 0; transform: scale(.6) translateX(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wc-flag { animation: none; }
}

/* ---------- Avatar ---------- */

/* A user's profile picture, or their initials when they have none (backend/Account.cfc card: thumbnailUrl,
   initials), as in the header's account menu, UserAdmin.cfm and orderOverview.cfm:
   <img class="wc-avatar" src="…" alt="">   or   <span class="wc-avatar" aria-hidden="true">PD</span> */
.wc-avatar {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	background-color: var(--wc-band-bg);
	font-family: var(--wc-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--wc-brand);
}

/* ---------- Part picture ---------- */

/* A part's picture next to its ID (OrderEdit.cfm's lines, additional hardware rows; backend/PartPhotos.cfc
   pictureOf): its thumbnail, a button where the page can show the full picture, and a placeholder of the same size
   for a part without one, so the IDs line up:
   <button type="button" class="wc-part-thumb" aria-label="Show the picture of …"><img src="…" alt=""></button>
   <span class="wc-part-thumb wc-part-thumb--none" aria-hidden="true"><i class="nf nf-md-package_variant_closed"></i></span> */
.wc-part-thumb {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--wc-border);
	border-radius: 4px;
	background-color: white;
	vertical-align: middle;
}

.wc-part-thumb img {
	width: 100%;
	height: 100%;
	border-radius: 3px;
	object-fit: contain;
}

button.wc-part-thumb { cursor: zoom-in; }
button.wc-part-thumb:hover { border-color: var(--wc-brand); }
button.wc-part-thumb:focus-visible { outline: none; border-color: var(--wc-brand); box-shadow: var(--wc-focus-ring); }

.wc-part-thumb--none {
	background-color: var(--wc-head-bg);
	font-size: 16px;
	color: var(--wc-disabled);
}

/* ---------- Modal ---------- */

.wc-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(16, 42, 67, .35);
	backdrop-filter: blur(3px);
}

.wc-modal-backdrop.hide { display: none; }

.wc-modal {
	width: 440px;
	max-width: calc(100vw - 32px);
	border: 1px solid var(--wc-border);
	border-radius: 8px;
	background: white;
	box-shadow: var(--wc-shadow);
	font-family: var(--wc-font);
	font-size: 13px;
	color: var(--wc-text);
}

.wc-modal-header {
	padding: 18px 24px;
	border-bottom: 1px solid var(--wc-border);
}

.wc-modal-title {
	margin: 0;
	font-family: var(--wc-font);  /* wc.css sets h1/h2 to Tahoma */
	font-size: 18px;
	font-weight: 600;
	color: var(--wc-brand);
}

.wc-modal-body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 20px 24px;
}

.wc-modal-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wc-muted);
}

.wc-modal-footer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-top: 1px solid var(--wc-border);
	border-radius: 0 0 8px 8px;
	background-color: var(--wc-head-bg);
}

/* Anything before the spacer sits left (e.g. destructive action); the rest sits right */
.wc-modal-footer .wc-spacer { flex: 1; }

/* A button keeps its label on one line; when the footer is too narrow the buttons go onto the next row, right-aligned
   (the primary action stays last) */
.wc-modal-footer { flex-wrap: wrap; justify-content: flex-end; }
.wc-modal-footer .wc-btn { white-space: nowrap; }

/* ---------- Text Pad pop-up (partials/textPadPopup.cfm: textPad.cfm in a frame) ---------- */

.wc-textpad .wc-textpad-dialog {
	display: flex;
	flex-direction: column;
	width: min(1200px, calc(100vw - 32px));
	height: calc(100vh - 48px);
	max-width: none;
	overflow: hidden;
}

.wc-textpad-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
}

.wc-textpad-header .wc-spacer { flex: 1; }
.wc-textpad-header .wc-btn .nf { margin-right: 6px; }
.wc-textpad-header .wc-btn--text .nf { margin-right: 0; font-size: 18px; }

.wc-textpad-error { margin: 0; border-radius: 0; }

.wc-textpad-frame {
	flex: 1;
	width: 100%;
	border: 0;
	border-radius: 0 0 8px 8px;
}

/* Phones: it fills the screen */
@media (max-width: 900px) {
	.wc-textpad .wc-textpad-dialog { width: 100vw; max-width: 100vw; height: 100%; border-radius: 0; }
	.wc-textpad-frame { border-radius: 0; }
}

/* ---------- Chips (active filters, tags) ---------- */

/* Wrapper that anchors a chip's popover */
.wc-chip-anchor {
	position: relative;
	display: inline-flex;
}

.wc-chip {
	display: inline-flex;
	align-items: center;
	height: 30px;
	border: 1px solid var(--wc-border-strong);
	border-radius: 999px;
	background-color: white;
	font-size: 13px;
	color: var(--wc-text);
}

.wc-chip-label,
.wc-chip-remove {
	height: 100%;
	border: none;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.wc-chip-label {
	padding: 0 4px 0 12px;
	border-radius: 999px 0 0 999px;
}

.wc-chip-label strong {
	font-weight: 600;
	color: var(--wc-brand);
}

.wc-chip-remove {
	padding: 0 10px 0 6px;
	border-radius: 0 999px 999px 0;
	font-size: 16px;
	line-height: 1;
	color: var(--wc-muted);
}

.wc-chip-label:hover         { color: var(--wc-brand); }
.wc-chip-remove:hover        { color: var(--wc-danger); }
.wc-chip:hover               { border-color: var(--wc-brand); }
.wc-chip-label:focus-visible,
.wc-chip-remove:focus-visible {
	outline: none;
	box-shadow: var(--wc-focus-ring);
}

/* ---------- Popover and menu (anchored below their trigger) ---------- */

.wc-popover,
.wc-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	border: 1px solid var(--wc-border);
	border-radius: 8px;
	background: white;
	box-shadow: var(--wc-shadow);
	font-family: var(--wc-font);
	font-size: 13px;
	color: var(--wc-text);
}

.wc-popover {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 240px;
	padding: 16px;
}

.wc-popover-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.wc-menu {
	display: flex;
	flex-direction: column;
	min-width: 200px;
	padding: 6px;
}

.wc-menu-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 8px 10px;
	border: none;
	border-radius: 4px;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.wc-menu-item:hover:not(:disabled),
.wc-menu-item:focus-visible {
	background-color: var(--wc-hover);
	outline: none;
}

/* Destructive item, e.g. "Cancel order" */
.wc-menu-item--danger { color: var(--wc-danger); }
.wc-menu-item--danger:hover:not(:disabled),
.wc-menu-item--danger:focus-visible { background-color: var(--wc-danger-bg); }

/* Group heading and separator inside a menu */
.wc-menu-label {
	margin: 0;
	padding: 6px 10px 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wc-muted);
}

.wc-menu-divider {
	margin: 6px 4px;
	border-top: 1px solid var(--wc-border);
}

.wc-menu-item:disabled {
	color: var(--wc-disabled);
	cursor: not-allowed;
}

.wc-menu-hint {
	font-size: 11px;
	color: var(--wc-muted);
}

/* Option list: a popover that shows choices directly; picking one applies it */
.wc-popover--list {
	gap: 6px;
	min-width: 220px;
	padding: 6px;
}

.wc-option-search { margin: 4px 4px 2px; }

.wc-option-list {
	display: flex;
	flex-direction: column;
	max-height: 300px;
	overflow-y: auto;
}

.wc-option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border: none;
	border-radius: 4px;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.wc-option:hover,
.wc-option:focus-visible {
	outline: none;
	background-color: var(--wc-hover);
}

.wc-option[aria-selected="true"] {
	font-weight: 600;
	color: var(--wc-brand);
}

/* Check mark on the current choice */
.wc-option[aria-selected="true"]::after {
	content: "\2713";
}

.wc-option-empty {
	margin: 0;
	padding: 8px 10px;
	color: var(--wc-muted);
}

/* Components above set display, which would otherwise override the hidden attribute */
.wc-chip-anchor[hidden],
.wc-popover[hidden],
.wc-menu[hidden],
.wc-option[hidden],
.wc-option-empty[hidden] { display: none; }

/* ---------- Page header ---------- */

.wc-page {
	width: min(960px, calc(100vw - 32px));
	margin: 0 auto 48px;
	font-family: var(--wc-font);
	font-size: 13px;
	color: var(--wc-text);
}

.wc-page-header { padding: 24px 0 16px; }

.wc-page-title {
	margin: 0;
	font-size: 28px;
	font-weight: 300;
	color: var(--wc-text);
}

.wc-page-subtitle {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--wc-muted);
}

/* ---------- Notice ---------- */

.wc-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 10px 14px;
	border: 1px solid var(--wc-border);
	border-radius: 8px;
	background-color: var(--wc-head-bg);
	font-size: 14px;
}

.wc-notice--success {
	border-color: #b7dfbb;
	background-color: var(--wc-success-bg);
	color: var(--wc-success);
}

.wc-notice--danger {
	border-color: #f3b9b3;
	background-color: var(--wc-danger-bg);
	color: var(--wc-danger);
}

.wc-notice[hidden] { display: none; }

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

/* A card of labelled rows, grouped into sections, with an action bar at the bottom */
.wc-form {
	border: 1px solid var(--wc-border);
	border-radius: 8px;
	background: white;
}

.wc-form-section {
	padding: 8px 24px 16px;
	border-bottom: 1px solid var(--wc-border);
}

.wc-form-section-title {
	margin: 12px 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--wc-brand);
}

/* Label column + controls column */
.wc-form-row {
	display: grid;
	grid-template-columns: 180px 1fr;
	align-items: start;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--wc-border);
}

.wc-form-section-title + .wc-form-row { border-top: none; }

/* Numbered step before a section title (step-by-step forms) */
.wc-form-step {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-right: 8px;
	border-radius: 999px;
	background-color: var(--wc-brand);
	color: white;
	font-size: 11px;
	font-weight: 600;
	vertical-align: 1px;
}

/* Muted aside after a section title, e.g. "optional" */
.wc-form-section-note {
	margin-left: 6px;
	font-size: 12px;
	font-weight: 400;
	color: var(--wc-muted);
}

/* Line the label up with a 32px control */
.wc-form-row > .wc-label { padding-top: 9px; }

.wc-form-controls {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.wc-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wc-inline[hidden] { display: none; }

.wc-form-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 0 0 8px 8px;
	background-color: var(--wc-head-bg);
}

.wc-form-actions .wc-spacer { flex: 1; }

/* Action bar that stays in view while a long form scrolls */
.wc-form-actions--sticky {
	position: sticky;
	bottom: 0;
	z-index: 5;
	border-top: 1px solid var(--wc-border);
	box-shadow: 0 -6px 16px rgba(16, 42, 67, .06);
}

/* Live summary of the choices made so far; sits at the left of the action bar */
.wc-form-summary {
	flex: 1;
	margin: 0;
	font-size: 12px;
	color: var(--wc-muted);
	overflow-wrap: break-word;
}

/* Phones: the summary takes its own line and the buttons wrap */
@media (max-width: 900px) {
	.wc-form-actions { flex-wrap: wrap; }
	.wc-form-summary { flex-basis: 100%; }
}

/* ---------- Input sizes, units and hints ---------- */

.wc-input--xs { width: 72px; }
.wc-input--sm { width: 120px; }
.wc-input--md { width: 180px; }
.wc-input--lg { flex: 1; width: 100%; max-width: 480px; }

.wc-unit { color: var(--wc-muted); }

.wc-field-hint {
	margin: 0;
	font-size: 12px;
	color: var(--wc-muted);
}

/* ---------- Choice pills (radio / checkbox groups) ---------- */

.wc-choice-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wc-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--wc-border-strong);
	border-radius: 4px;
	background: white;
	cursor: pointer;
	user-select: none;
}

.wc-choice input {
	margin: 0;
	accent-color: var(--wc-brand);
	cursor: pointer;
}

.wc-choice:hover { border-color: var(--wc-brand); }

.wc-choice:has(input:checked) {
	border-color: var(--wc-brand);
	background-color: var(--wc-hover);
	font-weight: 600;
	color: var(--wc-brand);
}

.wc-choice:has(input:focus-visible) { box-shadow: var(--wc-focus-ring); }

.wc-choice:has(input:disabled) {
	border-color: var(--wc-faint);
	background: none;
	color: var(--wc-disabled);
	cursor: not-allowed;
}

.wc-choice-group.is-invalid .wc-choice { border-color: var(--wc-danger); }

/* ---------- Compact variants ---------- */

/* Dense data-entry pages: add .wc-page--compact to .wc-page and .wc-form--compact to .wc-form */
.wc-page--compact .wc-page-header { padding: 12px 0 8px; }
.wc-page--compact .wc-page-title  { font-size: 22px; }
.wc-page--compact .wc-page-subtitle { margin-top: 2px; font-size: 13px; }
.wc-page--compact .wc-notice { margin-bottom: 8px; padding: 6px 12px; font-size: 13px; }

.wc-form--compact .wc-form-section { padding: 2px 16px 8px; }

.wc-form--compact .wc-form-section-title {
	margin: 8px 0 2px;
	font-size: 13px;
}

.wc-form--compact .wc-form-row {
	grid-template-columns: 120px 1fr;
	gap: 12px;
	padding: 4px 0;
	border-top: none;
}

.wc-form--compact .wc-form-row > .wc-label { padding-top: 7px; }
.wc-form--compact .wc-form-controls { gap: 4px; }
.wc-form--compact .wc-form-actions { padding: 10px 16px; }

.wc-form--compact .wc-input,
.wc-form--compact .wc-btn { height: 28px; }

.wc-form--compact textarea.wc-input { height: auto; }

.wc-form--compact .wc-choice-group { gap: 6px; }

.wc-form--compact .wc-choice {
	height: 28px;
	gap: 6px;
	padding: 0 10px;
}

/* Several labelled fields on one row: label, control, label, control… */
.wc-form-inline-label {
	margin-left: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wc-muted);
}

/* Fields side by side with labels above (short radio groups, paired textareas) */
.wc-form-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 24px;
	padding: 6px 0;
}

/* ---------- Toolbar ---------- */

/* A row of page actions: secondary buttons on the left, .wc-spacer, then the primary action */
.wc-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 4px 0 16px;
	font-family: var(--wc-font);
	font-size: 13px;
}

.wc-toolbar .wc-spacer { flex: 1; }

.wc-btn .nf { margin-right: 6px; }

/* Links styled as buttons */
a.wc-btn {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

a.wc-btn--secondary,
a.wc-btn--secondary:visited { color: var(--wc-brand); }

/* ---------- Screen readers only ---------- */

/* Read out, not shown: a label for a column of icon buttons, for instance */
.wc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Tooltip ---------- */

/* data-tooltip="Copy under this line" on a control: its text shows above the control at once on hover and on keyboard
   focus (a title attribute's tooltip waits about a second, and can't be made faster). Give the control an aria-label
   too, and no title, or the browser's own tooltip shows as well. */
[data-tooltip] { position: relative; }

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	z-index: 30;
	transform: translateX(-50%);
	padding: 3px 8px;
	border-radius: 4px;
	background-color: var(--wc-text);
	font: 600 12px/1.4 var(--wc-font);
	color: white;
	white-space: nowrap;
	pointer-events: none;
	visibility: hidden;
}

[data-tooltip]:focus-visible::after { visibility: visible; }

/* Not on touch screens, where a tap would leave it showing */
@media (hover: hover) {
	[data-tooltip]:hover::after { visibility: visible; }
}