/* ACD Service Desk - client surface.
   Built on the active design "Applecart Practical", captured from the site's
   Elementor global kit. Montserrat, warm neutrals, one red accent, flat.
   Tool surface: no hero, no imagery, no persuasion. Status legible at a glance. */

.acd-hd {
	--bg: #FFFFFF;
	--surface: #F7F5F3;
	--ink: #20201F;
	--accent: #ED193A;
	--accent-dark: #C81531;
	--accent-light: #FFE3E7;
	--muted: #75716F;
	--hair: #E7E4E1;
	--success: #1F7A4D;
	--r-sm: 0; /* the site's own panels are square, so ours are too - pills stay round, they're a status shape, not a panel */
	--r-md: 0;

	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 24px 96px;
	font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	color: var(--ink);
	line-height: 1.6;
}
.acd-hd--narrow { max-width: 780px; }

.acd-hd h1 {
	font-weight: 800;
	font-size: clamp(1.75rem, 3.2vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 8px;
	color: var(--ink);
}
.acd-hd h2 {
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 48px 0 16px;
}
.acd-hd p { margin: 0 0 16px; }
/* :where() keeps this at zero specificity so it's a true default - every
   component below (tabs, buttons, pills-as-links...) can override the link
   colour with an ordinary single class instead of needing to out-specificity
   a class+element selector. Without :where(), ".acd-hd a" (0,1,1) beat a
   plain ".acd-hd-btn" (0,1,0) and rendered accent-red text on the accent-red
   button fill - and did the same to every other single-class link colour. */
.acd-hd :where(a) { color: var(--accent); text-decoration: none; }
.acd-hd a:hover { text-decoration: underline; }

.acd-hd-eyebrow {
	font-weight: 800; font-size: 11px; letter-spacing: .11em;
	text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
.acd-hd-ref {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .82rem; letter-spacing: .02em; color: var(--muted);
}
.acd-hd-hint { color: var(--muted); font-size: .85rem; font-weight: 400; }
.acd-hd-lede { color: var(--muted); margin: 0 0 32px; }
.acd-hd-crumb { font-size: .85rem; margin: 0 0 24px; }
.acd-hd-crumb a { color: var(--muted); }

/* header row --------------------------------------------------------- */
.acd-hd-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	padding-bottom: 24px; border-bottom: 1px solid var(--hair); margin-bottom: 32px;
}
.acd-hd-head > div { min-width: 0; }

/* buttons ------------------------------------------------------------ */
.acd-hd-btn, .acd-hd button[type=submit] {
	display: inline-block; padding: 11px 20px; border: 0; border-radius: var(--r-sm);
	background: var(--accent); color: #fff; text-decoration: none;
	font-family: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2;
	cursor: pointer; transition: background .15s ease;
}
.acd-hd-btn:hover, .acd-hd button[type=submit]:hover { background: var(--accent-dark); text-decoration: none; color: #fff; }
.acd-hd-btn:active { transform: translateY(1px); }
.acd-hd-btn--quiet { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.acd-hd-btn--quiet:hover { background: var(--surface); color: var(--ink); }
.acd-hd button[disabled] { opacity: .5; cursor: default; }

/* the one thing that needs the client's attention --------------------- */
.acd-hd-pending {
	border: 1px solid var(--hair); border-left: 3px solid var(--accent);
	border-radius: var(--r-md); background: var(--bg);
	padding: 20px 24px; margin-bottom: 32px;
}
.acd-hd-pending h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.acd-hd-pending ul { list-style: none; margin: 12px 0 0; padding: 0; }
.acd-hd-pending li {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px; padding: 8px 0; border-top: 1px solid var(--hair); flex-wrap: wrap;
}
.acd-hd-pending li strong { font-weight: 600; }

/* summary stats -------------------------------------------------------
   A number alone is easy to skim past. A small icon gives each figure a
   shape to recognise before it's read - same move as the marketing site's
   claim cards. */
.acd-hd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 8px; }
.acd-hd-stat {
	display: flex; align-items: flex-start; gap: 14px;
	border: 1px solid var(--hair); border-radius: var(--r-md); padding: 18px 20px;
}
.acd-hd-stat-ic {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 34px; height: 34px; background: var(--surface); color: var(--accent);
}
.acd-hd-stat-n { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.acd-hd-stat-l {
	display: block; margin-top: 6px; font-size: 11px; font-weight: 800;
	letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}

/* table --------------------------------------------------------------
   Real padding on every side of every cell, not just a right-hand gutter -
   text sitting flush against the column edge is what made this look
   unfinished next to the generously-padded stat cards above it. */
.acd-hd-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--bg); }
.acd-hd-table th {
	text-align: left; vertical-align: middle; padding: 14px 20px;
	font-size: 11px; font-weight: 800; letter-spacing: .11em;
	text-transform: uppercase; color: var(--muted);
	border-bottom: 2px solid var(--ink);
}
.acd-hd-table td {
	padding: 18px 20px; border-bottom: 1px solid var(--hair);
	vertical-align: middle; background: var(--bg); transition: background .1s ease;
}
.acd-hd-table tbody tr:hover td { background: var(--surface); }
.acd-hd-table tr:last-child td { border-bottom: 0; }
.acd-hd-table th:first-child, .acd-hd-table td:first-child { padding-left: 4px; }
.acd-hd-table th:last-child, .acd-hd-table td:last-child { padding-right: 4px; }
.acd-hd-table a { color: var(--ink); font-weight: 600; }
.acd-hd-table a:hover { color: var(--accent); text-decoration: none; }
.acd-hd-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* trailing "view" arrow - the Summary link alone (bold ink text, same
   colour as everything else in the row) didn't read as clickable. This
   column gives every row an explicit, familiar "opens to detail" affordance,
   and the whole row becomes a click target too (see list.js) so a client
   isn't hunting for the one word that's actually a link. */
.acd-hd-row-link { cursor: pointer; }
.acd-hd-table-view-th { width: 32px; }
.acd-hd-table-view-td { text-align: right; }
.acd-hd-table-view {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--muted); transition: color .15s ease, transform .15s ease;
}
.acd-hd-table tbody tr:hover .acd-hd-table-view { color: var(--accent); transform: translateX(2px); }

/* status pills - the one rounded shape, because a pill reads as state -- */
.acd-hd-pill {
	display: inline-block; padding: 3px 11px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
	background: var(--surface); color: var(--muted);
}
.acd-hd-pill--new,
.acd-hd-pill--triaged { background: var(--surface); color: var(--ink); }
.acd-hd-pill--estimating,
.acd-hd-pill--awaiting-acceptance { background: var(--accent-light); color: var(--accent-dark); }
.acd-hd-pill--scheduled,
.acd-hd-pill--in-build,
.acd-hd-pill--in-uat { background: #E8F1EC; color: var(--success); }
.acd-hd-pill--complete { background: var(--surface); color: var(--muted); }
.acd-hd-pill--declined,
.acd-hd-pill--on-hold { background: var(--surface); color: var(--muted); }

/* forms -------------------------------------------------------------- */
.acd-hd-form label { display: block; margin: 24px 0 6px; font-weight: 600; font-size: .9rem; }
.acd-hd-form input[type=text],
.acd-hd-form input[type=url],
.acd-hd-form select,
.acd-hd-form textarea {
	width: 100%; padding: 11px 12px; border: 1px solid var(--hair);
	border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
	font-family: inherit; font-size: .95rem; line-height: 1.5;
}
.acd-hd-form textarea { resize: vertical; }
.acd-hd-form :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.acd-hd-form input[type=file] { font-family: inherit; font-size: .9rem; }
.acd-hd-actions { margin-top: 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acd-hd-status { color: var(--muted); font-size: .88rem; }

/* upload queue ------------------------------------------------------- */
.acd-hd-files { list-style: none; margin: 12px 0 0; padding: 0; }
.acd-hd-file {
	display: grid; grid-template-columns: 1fr 140px 110px; gap: 16px;
	align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: .85rem;
}
.acd-hd-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.acd-hd-file-state { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.acd-hd-bar { display: block; height: 4px; background: var(--hair); overflow: hidden; }
.acd-hd-bar-fill { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s ease; }
.acd-hd-file.is-done .acd-hd-bar-fill { background: var(--success); }
.acd-hd-file.is-error .acd-hd-file-state { color: var(--accent-dark); }
.acd-hd-file.is-error .acd-hd-bar-fill { background: var(--accent-dark); }

/* detail ------------------------------------------------------------- */
.acd-hd-flash { padding: 14px 18px; border-radius: var(--r-sm); margin: 0 0 24px; font-size: .92rem; }
.acd-hd-flash--ok { background: #E8F1EC; color: var(--success); }
.acd-hd-flash--err { background: var(--accent-light); color: var(--accent-dark); }
.acd-hd-body { max-width: 65ch; }
.acd-hd-attlist { list-style: none; margin: 0; padding: 0; }
.acd-hd-attlist li { padding: 10px 0; border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 16px; }
.acd-hd-attlist a { font-weight: 600; color: var(--ink); }
.acd-hd-attlist a:hover { color: var(--accent); }

.acd-hd-est { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 28px; }
.acd-hd-est--live { border-left: 3px solid var(--accent); }
.acd-hd-est-amount { margin: 0; font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.acd-hd-est-notes { margin-top: 16px; max-width: 65ch; }
.acd-hd-est-terms {
	margin: 24px 0; padding: 16px 18px; background: var(--surface);
	border-radius: var(--r-sm); font-size: .85rem; color: var(--muted); max-width: 65ch;
}
.acd-hd-decide { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
.acd-hd-est-decided { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); font-size: .9rem; }

.acd-hd-empty {
	padding: 40px 32px; background: var(--surface); border-radius: var(--r-md);
	color: var(--muted); text-align: left;
}
.acd-hd-empty strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 6px; }

@media (max-width: 720px) {
	.acd-hd { padding: 36px 18px 72px; }
	.acd-hd-stats { grid-template-columns: 1fr; }
	.acd-hd-file { grid-template-columns: 1fr 90px; }
	.acd-hd-bar { grid-column: 1 / -1; }
	.acd-hd-table thead { display: none; }
	.acd-hd-table tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--hair); }
	.acd-hd-table td { display: block; border: 0; padding: 2px 0; }
	.acd-hd-table td:first-child { margin-bottom: 4px; }
	.acd-hd-table-view-td { display: none; } /* whole card is already the tap target here */
}

/* sign-in form fields ---------------------------------------------------
   Reused inside the Service Desk landing page's login card below - the
   only piece of that page not driven by its own .acd-sd- rules, since the
   form markup/field names are what ACD_HD_Routes::signin_screen() posts to. */
.acd-hd-signin-form label { margin-top: 20px; }
.acd-hd-signin-form input[type=email] {
	width: 100%; padding: 12px 14px; border: 1px solid var(--hair);
	border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
	font-family: inherit; font-size: .95rem;
}
.acd-hd-signin-form input[type=email]:focus-visible {
	outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.acd-hd-signin-form .acd-hd-actions { margin-top: 20px; }
.acd-hd-signin-form button[type=submit] { width: 100%; justify-content: center; }
.acd-hd-signin-foot { margin: 20px 0 0; }

/* Service Desk landing page (login.php) ---------------------------------
   A hybrid marketing + sign-in page, not a tool surface - it runs full-
   bleed bands like the marketing solution pages instead of the boxed
   1180px .acd-hd container the rest of the plugin uses. Same tokens
   throughout (Applecart Practical): Montserrat, warm neutrals, one red
   accent, flat surfaces separated by hairlines, never a shadow. */
.acd-sd {
	/* Same tokens as .acd-hd, redeclared here rather than inherited: this
	   page has no .acd-hd ancestor (it's the marketing register, full-bleed
	   bands rather than the boxed tool container), so every var(--x) used
	   below - and by the .acd-hd-btn / .acd-hd-pill / .acd-dot-* classes
	   this page reuses - would otherwise resolve to nothing. */
	--bg: #FFFFFF;
	--surface: #F7F5F3;
	--ink: #20201F;
	--accent: #ED193A;
	--accent-dark: #C81531;
	--accent-light: #FFE3E7;
	--muted: #75716F;
	--hair: #E7E4E1;
	--success: #1F7A4D;
	--r-sm: 0;
	--r-md: 0;

	font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--ink); line-height: 1.6;
}
/* :where() on BOTH the ancestor and the element is what actually gets zero
   specificity end to end - :where(a) alone still carries .acd-sd's own
   (0,1,0), which tied .acd-hd-btn's own (0,1,0) and won on source order
   (this block comes later in the file), overriding every button and pill
   colour on the page with an unresolvable var(--accent) - no .acd-hd
   ancestor exists here to define it, so it fell through to inherited
   black/grey instead of red. Same root cause the .acd-hd :where(a) rule
   above already exists to avoid; :where(.acd-sd) closes the gap that
   rule's own comment didn't anticipate. */
:where(.acd-sd) :where(a) { color: var(--accent); text-decoration: none; }
:where(.acd-sd) :where(a):hover { text-decoration: underline; }
/* :where() here for the same reason as the :where(a) rule above: a bare
   ".acd-sd h1/h2/h3" or ".acd-sd p" descendant selector carries specificity
   (0,1,1) - one class plus one type - which silently beat every single-class
   spacing override below it (.acd-sd-lede, .acd-sd-hero-sub, .acd-sd-h2...,
   all (0,1,0)) regardless of source order, zeroing out their margin-bottom
   back to this rule's own `margin: 0`. Wrapping the type selector drops this
   rule to (0,1,0) so the later, more specific component rules win as
   intended instead of being dead code. */
.acd-sd :where(h1, h2, h3) { font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.acd-sd :where(p) { margin: 0; }

.acd-sd-band { padding: 88px 0; }
.acd-sd-band--surface { background: var(--surface); }
.acd-sd-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.acd-sd-wrap--narrow { max-width: 700px; }

.acd-sd-h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
.acd-sd-lede { color: var(--muted); font-size: 1.02rem; max-width: 640px; margin-bottom: 40px; }

/* hero -------------------------------------------------------------- */
.acd-sd-hero { padding-top: 64px; }
.acd-sd-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.acd-sd-hero h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); margin: 6px 0 20px; }
.acd-sd-hero-lede { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.acd-sd-hero-sub { color: var(--muted); font-size: 1rem; max-width: 480px; margin-bottom: 32px; }

/* The hero image is the product itself, not stock photography or a
   fabricated dashboard: real .acd-hd-pill / dot classes from the actual
   console, illustrating example tickets rather than a screenshot. */
.acd-sd-preview-panel { border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--bg); overflow: hidden; }
.acd-sd-preview-head {
	padding: 14px 20px; border-bottom: 1px solid var(--hair); background: var(--surface);
	font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.acd-sd-preview-row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hair); }
.acd-sd-preview-row:last-child { border-bottom: 0; }
.acd-sd-preview-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.acd-sd-preview-title { flex: 1; font-weight: 600; font-size: .88rem; }

/* service tiles -------------------------------------------------------- */
.acd-sd-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 8px; }
.acd-sd-tile { background: var(--bg); padding: 28px 24px; }
.acd-sd-tile svg { color: var(--ink); margin-bottom: 16px; }
.acd-sd-tile h3 { font-size: 1rem; margin-bottom: 6px; }
.acd-sd-tile p { color: var(--muted); font-size: .88rem; margin: 0; }

/* how it works ----------------------------------------------------------*/
.acd-sd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 8px; }
.acd-sd-step { border-top: 2px solid var(--ink); padding-top: 16px; }
.acd-sd-step-n { display: block; font-size: 1.6rem; font-weight: 800; color: var(--accent); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.acd-sd-step h3 { font-size: .98rem; margin-bottom: 6px; }
.acd-sd-step p { color: var(--muted); font-size: .88rem; margin: 0; }

/* login card - the page's destination, not an afterthought -------------- */
.acd-sd-login-card { background: var(--bg); border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 44px 48px; }
.acd-sd-login-card > p { margin: 14px 0 0; color: var(--muted); }
.acd-sd-login-card .acd-hd-eyebrow { margin-bottom: 8px; }
.acd-sd-login-card .acd-sd-h2 { margin-top: 2px; }
.acd-sd-login-card .acd-hd-flash { margin-top: 16px; }

/* capability grid ---------------------------------------------------------*/
.acd-sd-caps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.acd-sd-cap { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: var(--ink); }
.acd-sd-cap img, .acd-sd-cap svg { flex: none; width: 28px; height: 28px; object-fit: contain; }
.acd-sd-cap span { font-weight: 600; font-size: .92rem; }

/* final CTA ----------------------------------------------------------- */
.acd-sd-final { background: var(--ink); color: #fff; padding: 72px 0; }
.acd-sd-final h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 12px; }
.acd-sd-final p { color: #C7C4C1; max-width: 480px; }
.acd-sd-final-grid { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.acd-sd-final-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.acd-sd-btn-outline-dark {
	display: inline-block; padding: 11px 20px; border: 1px solid rgba(255,255,255,.35);
	border-radius: var(--r-sm); color: #fff; font-weight: 600; font-size: .9rem;
}
.acd-sd-btn-outline-dark:hover { border-color: #fff; text-decoration: none; }

@media (max-width: 900px) {
	.acd-sd-hero-grid { grid-template-columns: 1fr; }
	.acd-sd-tiles { grid-template-columns: 1fr 1fr; }
	.acd-sd-steps { grid-template-columns: 1fr 1fr; }
	.acd-sd-caps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.acd-sd-band { padding: 56px 0; }
	.acd-sd-tiles { grid-template-columns: 1fr; }
	.acd-sd-steps { grid-template-columns: 1fr; }
	.acd-sd-caps { grid-template-columns: 1fr; }
	.acd-sd-login-card { padding: 32px 24px; }
	.acd-sd-final-grid { flex-direction: column; align-items: flex-start; }
}

/* engagement choice -----------------------------------------------------
   Two big cards, not a radio list - the two commercial paths mean genuinely
   different things, so the decision gets room instead of being squeezed
   into a row. The radio stays in the DOM (still what the JS reads) but is
   visually replaced by the card's own border and fill. */
.acd-hd-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.acd-hd-opt {
	position: relative; display: block;
	padding: 20px 22px; border: 1.5px solid var(--hair);
	cursor: pointer; margin: 0; transition: border-color .12s ease, background .12s ease;
}
.acd-hd-opt:hover { border-color: var(--muted); }
.acd-hd-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.acd-hd-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.acd-hd-opt input {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.acd-hd-opt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.acd-hd-opt-ic {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 32px; height: 32px; background: var(--surface); color: var(--ink);
}
.acd-hd-opt:has(input:checked) .acd-hd-opt-ic { background: #fff; color: var(--accent); }
.acd-hd-opt-titles { display: block; min-width: 0; }
.acd-hd-opt-titles strong { display: block; font-weight: 700; font-size: .95rem; }
.acd-hd-opt-titles .acd-hd-opt-sub { display: block; font-weight: 600; font-size: .85rem; color: var(--ink); margin-top: 2px; }
.acd-hd-opt .acd-hd-hint { display: block; line-height: 1.5; }
@media (max-width: 640px) {
	.acd-hd-choice { grid-template-columns: 1fr; }
}
.acd-hd-cap {
	margin-top: 14px; padding: 18px 20px;
	background: var(--surface); border-radius: var(--r-md);
}
.acd-hd-cap label { margin-top: 0; }
.acd-hd-cap-field { display: flex; align-items: center; gap: 8px; max-width: 200px; }
.acd-hd-cap-field span { font-weight: 700; }
.acd-hd-cap-field input {
	width: 100%; padding: 11px 12px; border: 1px solid var(--hair);
	border-radius: var(--r-sm); font-family: inherit; font-size: .95rem; background: var(--bg);
}
.acd-hd-cap .acd-hd-hint { margin: 10px 0 0; display: block; }
.acd-hd-auth {
	border: 1px solid var(--hair); border-left: 3px solid var(--success);
	border-radius: var(--r-md); padding: 24px 28px;
}
.acd-hd-auth strong { font-weight: 700; }

/* admin console -------------------------------------------------------
   Same tokens as the client surface, same editorial hand: eyebrow labels,
   hairline dividers, one accent used deliberately. A work surface, not a
   filing cabinet - grouped by what needs attention, actions live on the card. */
.acd-console { max-width: 1120px; }
.acd-console h2 { margin: 44px 0 2px; }

/* toolbar: open count, quick links, primary action - one legible row
   instead of a run of middot-separated text. */
.acd-console-toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.acd-console-open { color: var(--muted); font-size: .85rem; }
.acd-console-open strong { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.acd-console-links {
	display: flex; align-items: center; gap: 16px;
	padding-left: 18px; border-left: 1px solid var(--hair);
	font-size: .85rem;
}
.acd-console-links a { color: var(--muted); }
.acd-console-links a:hover { color: var(--accent); }
@media (max-width: 560px) {
	.acd-console-toolbar { width: 100%; justify-content: space-between; }
	.acd-console-links { padding-left: 0; border-left: 0; order: 3; width: 100%; justify-content: flex-start; }
}
.acd-console-note { margin: 0 0 14px; }
.acd-console-foot { margin-top: 48px; font-size: .85rem; }

/* dense queue ("Option A") --------------------------------------------
   One line per ticket by default - a <details> row, not a card, so a whole
   queue is scannable in one screenful. The summary line is a grid that
   mirrors .acd-row-labels below it exactly; expanding it drops in
   everything a card used to show up front (body copy, chips, actions). */
.acd-row-labels,
.acd-row-summary {
	display: grid;
	grid-template-columns: 14px 108px minmax(0, 1fr) 110px 130px 118px 52px 16px;
	align-items: center; gap: 14px;
}
.acd-row-labels {
	padding: 0 14px 8px; margin-top: 8px;
	border-bottom: 1px solid var(--hair);
	font-size: 10px; font-weight: 800; letter-spacing: .09em;
	text-transform: uppercase; color: var(--muted);
}
/* No explicit grid-column here: the markup already opens with an empty
   span for the dot swatch, so leaving every label on auto-placement is
   what keeps this row's columns lined up with .acd-row-summary below it.
   Forcing the first span to column 2 (the old rule) pushed the "Reference"
   label back into column 1 instead - which is why the header looked
   shifted a whole column left of the data underneath it. */

.acd-row {
	border-bottom: 1px solid var(--hair);
}
.acd-row:first-of-type { border-top: 1px solid var(--hair); }
.acd-row summary {
	list-style: none; cursor: pointer; padding: 13px 14px;
	transition: background .1s ease;
}
.acd-row summary::-webkit-details-marker { display: none; }
.acd-row summary:hover { background: var(--surface); }
.acd-row[open] summary { background: var(--surface); border-bottom: 1px solid var(--hair); }
.acd-row--problem summary { border-left: 3px solid var(--accent); padding-left: 11px; }

.acd-row-dot {
	width: 9px; height: 9px; border-radius: 999px; background: var(--hair);
}
.acd-dot-low { background: var(--success); }
.acd-dot-medium { background: #A85B00; }
.acd-dot-high { background: var(--accent); }
.acd-dot-none { background: var(--hair); border: 1px solid var(--muted); }

.acd-row-title {
	display: flex; align-items: center; min-width: 0;
}
.acd-row-title-text {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-weight: 600; font-size: .92rem;
}
.acd-row-estimate {
	display: flex; align-items: center; overflow: hidden;
}
.acd-row-estimate .acd-hd-pill {
	overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.acd-row-estimate-empty {
	color: var(--muted); font-size: .82rem;
}
.acd-row-org {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: var(--muted); font-size: .85rem;
}
.acd-row-stage { display: flex; }
.acd-row-age {
	color: var(--muted); font-size: .82rem; text-align: right;
	font-variant-numeric: tabular-nums;
}
.acd-row-age.is-old { color: var(--accent-dark); font-weight: 700; }
.acd-row-chevron {
	display: flex; align-items: center; justify-content: center;
	color: var(--muted); transition: transform .15s ease;
}
.acd-row[open] .acd-row-chevron { transform: rotate(90deg); }

.acd-row-body {
	padding: 20px 24px 22px 38px;
	background: var(--surface);
}
.acd-row-body .acd-card-body { margin: 0 0 14px; color: var(--ink); font-size: .9rem; line-height: 1.55; max-width: 70ch; }
.acd-row-body .acd-card-chips { margin: 0 0 16px; }
.acd-row-body .acd-card-problem { background: #fff; }
.acd-row-body .acd-card-actions { border-top-color: var(--hair); }
.acd-card-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.acd-card-problem {
	margin: 0 0 14px; padding: 10px 14px; background: var(--accent-light);
	color: var(--accent-dark); border-radius: var(--r-sm); font-size: .85rem;
}
.acd-pill-dc { background: var(--successLight, #E8F1EC); color: var(--success); }
.acd-pill-risk-low { background: var(--successLight, #E8F1EC); color: var(--success); }
.acd-pill-risk-medium { background: #FFF3E6; color: #A85B00; }
.acd-pill-risk-high { background: var(--accent-light); color: var(--accent-dark); font-weight: 700; }
.acd-pill-wait { background: var(--accent-light); color: var(--accent-dark); font-weight: 700; }
.acd-pill-declined { background: var(--surface); color: var(--muted); }

.acd-card-actions {
	display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
	padding-top: 14px; border-top: 1px solid var(--hair);
}
.acd-act { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: nowrap; flex: none; }
/* Forced onto its own full-width line - it's the one form with enough fields
   that letting it wrap internally while short sibling forms share its line
   fragments the whole action row (a field would drop to line 2 while a
   sibling button stayed on line 1, purely by leftover-width luck). */
.acd-act--est { flex: 1 1 100%; flex-wrap: wrap; }
.acd-act-label {
	font-size: 11px; font-weight: 800; letter-spacing: .09em;
	text-transform: uppercase; color: var(--muted); margin: 0 2px 0 0;
}
.acd-act input[type=number], .acd-act input[type=text], .acd-act select {
	padding: 7px 9px; border: 1px solid var(--hair); border-radius: var(--r-sm);
	font-family: inherit; font-size: .85rem; background: var(--bg); color: var(--ink);
	width: auto; /* the theme's global form reset sets width:100% on every bare
	                select/input[type] and we never overrode it here - harmless
	                on a flex-shrunk nowrap row, but it forces the wider
	                estimate-form select onto its own full-width wrapped line. */
}
.acd-act input.acd-hours { width: 60px; } /* ties .acd-act input[type=number]'s
	specificity exactly (class+attr+element vs class+element+class) so source
	order decides - this rule is declared after it and wins, same trap as the
	select width bug above: a class selector alone loses to a class+element
	+attribute combo unless matched element-for-element. */
.acd-act .acd-note { flex: 1 1 180px; min-width: 140px; }
.acd-act :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.acd-act button {
	padding: 7px 14px; border: 0; border-radius: var(--r-sm); background: var(--accent);
	color: #fff; font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.acd-act button:hover { background: var(--accent-dark); }
.acd-act button.acd-btn-quiet { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.acd-act button.acd-btn-quiet:hover { background: var(--surface); }
.acd-est-op { font-size: .82rem; color: var(--muted); }
.acd-est-result { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .88rem; margin-right: 4px; }

/* Asana - a link once the card exists, a quiet button (form submit) while
   it doesn't. Same visual weight as acd-btn-quiet so the swap doesn't read
   as a demotion once the ticket's actually on the board. */
.acd-act-asana {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px; border: 1px solid var(--hair);
	font-size: .82rem; font-weight: 600; color: var(--ink);
}
.acd-act-asana:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.acd-act-asana svg { flex: none; }

.acd-row-links { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.acd-row-view {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 6px; color: var(--muted);
}
.acd-row-view:hover { color: var(--accent); }
.acd-row-view svg { flex: none; }

@media (max-width: 720px) {
	.acd-act--est { flex-basis: 100%; }
	.acd-row-links { margin-left: 0; }
	.acd-act { flex-wrap: wrap; }
}

/* tabs + filters ------------------------------------------------------ */
.acd-tabs {
	display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
	/* overflow-y must be set explicitly - leaving it at the default "visible"
	   while overflow-x is scrollable makes the browser silently promote it to
	   "auto" too (that's spec behaviour, not a bug in one browser), so a
	   sub-pixel rounding difference between scrollHeight and clientHeight was
	   enough to raise a spurious vertical scrollbar - the stray up/down arrow
	   glyphs floating above the real horizontal one. */
	border-bottom: 1px solid var(--hair); margin: 8px 0 0;
	scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.acd-tabs::-webkit-scrollbar { height: 5px; }
.acd-tabs::-webkit-scrollbar-track { background: transparent; }
.acd-tabs::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 999px; }
.acd-tabs::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.acd-tab {
	display: flex; align-items: center; gap: 6px; white-space: nowrap;
	padding: 11px 12px; margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--muted); font-size: .85rem; font-weight: 600; text-decoration: none;
}
.acd-tab:hover { color: var(--ink); text-decoration: none; background: var(--surface); }
.acd-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.acd-tab-n {
	display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px;
	background: var(--surface); color: var(--muted);
	font-size: 11px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.acd-tab.is-active .acd-tab-n { background: var(--ink); color: #fff; }
.acd-tab.is-alert .acd-tab-n { background: var(--accent-light); color: var(--accent-dark); }
.acd-tab.is-alert.is-active .acd-tab-n { background: var(--accent); color: #fff; }

.acd-filters {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 16px 0 8px; padding: 14px 16px; background: var(--surface);
}
.acd-filters select, .acd-filters input[type=search] {
	padding: 9px 11px; border: 1px solid var(--hair); border-radius: var(--r-sm);
	font-family: inherit; font-size: .87rem; background: var(--bg); color: var(--ink);
}
.acd-filters input[type=search] { flex: 1 1 300px; min-width: 200px; }
.acd-filters :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.acd-filters button {
	padding: 9px 18px; border: 0; border-radius: var(--r-sm); background: var(--ink);
	color: #fff; font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.acd-filters button:hover { background: var(--accent); }
.acd-filters-clear { font-size: .85rem; color: var(--muted); }
.acd-console h2:first-of-type { margin-top: 34px; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* raise for a client -------------------------------------------------- */
.acd-raise {
	border: 1px solid var(--hair); border-left: 3px solid var(--accent);
	background: var(--surface);
	border-radius: var(--r-md); padding: 28px 32px; margin: 8px 0 28px;
}
.acd-raise-h {
	font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em;
	text-transform: none; color: var(--ink); margin: 0 0 6px;
}
.acd-raise-form label { margin-top: 18px; }
.acd-raise-form input[type=text],
.acd-raise-form input[type=number],
.acd-raise-form select,
.acd-raise-form textarea { background: var(--bg); }
.acd-raise-row { display: flex; gap: 16px; flex-wrap: wrap; }
.acd-raise-row > div { flex: 1 1 200px; }
.acd-raise-row label { margin-top: 18px; }
.acd-raise-form select, .acd-raise-form input[type=number] {
	width: 100%; padding: 11px 12px; border: 1px solid var(--hair);
	border-radius: var(--r-sm); font-family: inherit; font-size: .95rem;
	background: var(--bg); color: var(--ink);
}
.acd-btn-sm { padding: 7px 14px !important; font-size: .82rem !important; }


/* v7 site alignment ------------------------------------------------------
   Brings the landing page in line with the v7 Elementor pages: dark hero
   with red base line, mono eyebrows, solid red buttons with offset-shadow
   hover, red-topped step cards. Loaded with ACD_HD_Site_Theme. */
.acp-sd-page .acd-hd,.acp-sd-page .acd-sd{font-family:Montserrat,sans-serif}
.acd-sd .acd-hd-eyebrow{font-family:ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:#ED193A}
.acd-sd .acd-sd-h2{font-size:36px;font-weight:800;letter-spacing:-1.2px;line-height:1.12}
.acd-sd .acd-sd-lede{font-size:17px;line-height:1.7}
/* hero: dark, like every other v7 page hero */
.acd-sd .acd-sd-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 30%,rgba(237,25,58,.28) 0%,rgba(20,20,19,0) 50%),#141413;color:#fff;padding:84px 0}
.acd-sd .acd-sd-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:#ED193A}
.acd-sd .acd-sd-hero .acd-hd-eyebrow{display:inline-block;color:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.24);padding:7px 12px;margin:0 0 24px}
.acd-sd .acd-sd-hero h1{font-size:52px;font-weight:800;letter-spacing:-1.6px;line-height:1.05;color:#fff;margin:0 0 16px}
.acd-sd .acd-sd-hero-lede{font-size:19px;font-weight:600;line-height:1.5;color:#fff;margin-bottom:10px}
.acd-sd .acd-sd-hero-sub{font-size:17px;line-height:1.6;color:rgba(255,255,255,.75);max-width:500px}
.acd-sd .acd-sd-preview-panel{border:0;box-shadow:12px 12px 0 #ED193A;color:#20201F}.acd-sd .acd-sd-preview-title{color:#20201F}
/* buttons */
.acd-sd .acd-hd-btn,.acd-sd .acd-hd-signin-form button[type=submit]{display:inline-block;background:#ED193A !important;color:#fff !important;border:0 !important;border-radius:0 !important;font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;padding:15px 24px;line-height:1.2;text-decoration:none !important;transition:transform .2s,box-shadow .2s;cursor:pointer}
.acd-sd .acd-hd-btn:hover,.acd-sd .acd-hd-signin-form button[type=submit]:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 #20201F;background:#ED193A !important}
.acd-sd .acd-sd-hero .acd-hd-btn:hover,.acd-sd .acd-sd-final .acd-hd-btn:hover{box-shadow:5px 5px 0 #fff}
.acd-sd .acd-sd-btn-outline-dark{color:#fff !important;font-weight:700;font-size:15px;padding:14px 24px;border-color:rgba(255,255,255,.4)}
/* tiles and steps */
.acd-sd .acd-sd-tile svg{color:#ED193A}
.acd-sd .acd-sd-tile h3,.acd-sd .acd-sd-step h3{font-size:17px;font-weight:800}
.acd-sd .acd-sd-tile p,.acd-sd .acd-sd-step p{font-size:14.5px;line-height:1.55}
.acd-sd .acd-sd-step{border-top:4px solid #ED193A;background:#fff;border-left:1px solid #E7E4E1;border-right:1px solid #E7E4E1;border-bottom:1px solid #E7E4E1;padding:22px 22px 24px}
.acd-sd .acd-sd-step-n{font-family:ui-monospace,monospace;font-size:12px;font-weight:700;letter-spacing:2px;margin-bottom:8px}
.acd-sd .acd-sd-step-n::before{content:'0'}
.acd-sd .acd-sd-steps{gap:18px}
/* sign-in card */
.acd-sd #signin{padding-top:0}
.acd-sd .acd-sd-login-card{border-left:4px solid #ED193A}
.acd-sd .acd-hd-signin-form label{display:block;font-weight:700;font-size:14px;margin:22px 0 8px}
.acd-sd .acd-hd-signin-form input[type=email]{width:100%;height:52px;border:1px solid #D9D5D1;border-radius:0;padding:0 16px;font-family:Montserrat,sans-serif;font-size:15px;background:#fff}
.acd-sd .acd-hd-signin-form input[type=email]:focus{outline:0;border-color:#20201F;box-shadow:0 0 0 3px rgba(237,25,58,.15)}
.acd-sd .acd-hd-actions{margin-top:16px}
.acd-sd .acd-hd-signin-form button[type=submit]{width:100%}
/* capability grid */
.acd-sd .acd-sd-cap span{font-size:15px;font-weight:700}
.acd-sd .acd-sd-cap svg{color:#ED193A}
/* closing CTA */
.acd-sd .acd-sd-final{background:#141413;padding:80px 0;position:relative}
.acd-sd .acd-sd-final h2{font-size:36px;font-weight:800;letter-spacing:-1.2px}
.acd-sd .acd-sd-final p{font-size:17px;line-height:1.6}
@media(max-width:767px){.acd-sd .acd-sd-hero{padding:56px 0}.acd-sd .acd-sd-hero h1{font-size:40px;letter-spacing:-1px}.acd-sd .acd-sd-h2,.acd-sd .acd-sd-final h2{font-size:28px}.acd-sd .acd-sd-preview-panel{box-shadow:8px 8px 0 #ED193A}}