/* Circuit Craftworks Service Desk: intake + customer portal.
 *
 * Design tokens mirror the live site (page tokens --bg #0f1c34, --blue #4a86ff,
 * --cyan #55c8ef, --purple #7b68ee, --green #39c9a5, --amber #f0b458) and are
 * shared in meaning with the staff desk (desk.css):
 *
 *   blue / cyan    primary and informational actions, selected state
 *   green / teal   success, approval, completion
 *   amber          needs attention, waiting, caution
 *   red            destructive, errors, cancellation
 *   grey (muted)   secondary information, disabled
 *   purple         brand accent only (progress), never a state
 *
 * Contrast: body text >= 7:1 and muted text >= 4.5:1 on every surface below;
 * white on the primary button is 4.9:1. Everything is scoped to .ccsd so
 * nothing leaks into the theme.
 */

.ccsd, .ccsd-info__pop {
	/* palette */
	--cc-navy: #0f1c34;
	--cc-blue: #4a86ff;
	--cc-blue-strong: #2f67dc;
	--cc-blue-text: #8fb8ff;
	--cc-cyan: #55c8ef;
	--cc-purple: #8f7cf2;
	--cc-green: #39c9a5;
	--cc-green-text: #7ee6c8;
	--cc-amber: #f0b458;
	--cc-amber-text: #ffd699;
	--cc-red: #ff7a7a;
	--cc-red-text: #ffb4b4;

	/* surfaces */
	--s-card: linear-gradient(158deg, rgba(20, 42, 74, .97), rgba(12, 27, 49, .98));
	--s-card-flat: #13284a;
	--s-raised: #1a3257;
	--s-sunken: #0a1830;
	--s-field: #0a1830;

	/* lines */
	--line: rgba(165, 197, 244, .18);
	--line-strong: rgba(165, 197, 244, .32);
	--line-hot: rgba(128, 176, 255, .6);

	/* text */
	--t-1: #f7fbff;
	--t-2: #c9d7ea;
	--t-3: #9fb3cf;

	/* semantic */
	--c-primary: var(--cc-blue-strong);
	--c-success: var(--cc-green);
	--c-warn: var(--cc-amber);
	--c-danger: var(--cc-red);
	--c-info: var(--cc-cyan);
	--c-selected-bg: rgba(74, 134, 255, .2);
	--c-focus: #bff4ff;

	/* shape + type */
	--r-lg: 18px;
	--r: 14px;
	--r-sm: 10px;
	--gap: 16px;
	--font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--fs-small: 14px;
	--fs-body: 16px;
	--fs-h3: 19px;
	--fs-h2: clamp(22px, 3.4vw, 28px);
	--control-h: 48px;
}

.ccsd {
	color: var(--t-1);
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.5;
	text-align: left;
	box-sizing: border-box;
}

.ccsd *, .ccsd *::before, .ccsd *::after { box-sizing: border-box; }
.ccsd [hidden] { display: none !important; }
/* The host page lays us out in a grid; never let our content widen it. */
.ccsd-intake, .ccsd-portal { contain: inline-size; width: 100%; max-width: 100%; min-width: 0; }

.ccsd-loading { min-height: 220px; border-radius: var(--r-lg); background: var(--s-card); border: 1px solid var(--line); position: relative; overflow: hidden; }
.ccsd-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(128, 176, 255, .08), transparent); animation: ccsd-sweep 1.4s linear infinite; }
@keyframes ccsd-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ccsd-loading::after { animation: none; } .ccsd * { transition: none !important; } }

/* ---------------------------------------------------------------- type */

.ccsd h2, .ccsd h3, .ccsd h4, .ccsd .ccsd-card h2, .ccsd .ccsd-card h3, .ccsd .ccsd-card h4 { color: var(--t-1) !important; margin: 0 0 10px; line-height: 1.2; font-family: var(--font); letter-spacing: 0; text-transform: none; }
.ccsd h2 { font-size: var(--fs-h2); }
.ccsd h3 { font-size: var(--fs-h3); }
.ccsd h4 { font-size: 16px; }
.ccsd p { margin: 0 0 12px; color: var(--t-2); }
.ccsd .ccsd-card p:not(.ccsd-eyebrow):not(.ccsd-note):not(.ccsd-empty) { color: var(--t-2); }
.ccsd a { color: var(--cc-blue-text); }
.ccsd small, .ccsd .ccsd-help, .ccsd .ccsd-sub { color: var(--t-3); font-size: var(--fs-small); }
.ccsd .ccsd-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-cyan) !important; margin: 0 0 6px; }

/* ---------------------------------------------------------------- cards */

.ccsd-card {
	background: var(--s-card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: 0 18px 44px rgba(5, 12, 26, .3), inset 0 1px 0 rgba(218, 233, 255, .06);
	padding: clamp(18px, 3.2vw, 28px);
	min-width: 0;
	max-width: 100%;
}
.ccsd-card > :last-child { margin-bottom: 0; }
.ccsd-card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.ccsd-card-title h3 { margin: 0; }

.ccsd-empty { color: var(--t-3); font-size: 15px; margin: 0; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r-sm); }

/* ---------------------------------------------------------------- info popover (shared component) */

.ccsd-info { display: inline-flex; vertical-align: middle; }
.ccsd-info__btn {
	display: inline-grid; place-items: center; width: 22px; height: 22px; min-height: 0 !important; padding: 0 !important; margin: 0 2px;
	border-radius: 50%; border: 1.5px solid #8fb8ff !important; background: transparent !important; color: #8fb8ff !important;
	font: italic 700 13px/1 Georgia, "Times New Roman", serif !important; cursor: pointer; box-shadow: none !important; text-transform: none !important;
	position: relative;
}
.ccsd-info__btn::after { content: ""; position: absolute; inset: -11px; } /* 44px touch target */
.ccsd-info__btn[aria-expanded="true"], .ccsd-info__btn:hover { background: rgba(143, 184, 255, .18) !important; }
.ccsd-info__btn:focus-visible { outline: 3px solid #bff4ff; outline-offset: 2px; }
.ccsd-info__pop {
	position: fixed; z-index: 100000; max-width: min(320px, calc(100vw - 16px));
	background: #f7fbff; color: #0b1a31; border: 1px solid #b9cbe6; border-radius: 10px;
	box-shadow: 0 14px 34px rgba(4, 10, 22, .45); padding: 10px 12px;
	font: 400 14px/1.45 var(--font); text-align: left; white-space: normal;
}

/* ---------------------------------------------------------------- intake: step header */

.ccsd-stephead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 10px; }
.ccsd-stephead .ccsd-eyebrow { margin: 0; }
.ccsd-stephead h3 { margin: 0; font-size: 22px; }
.ccsd-stephead h3:focus { outline: none; }
.ccsd-progress { height: 6px; background: rgba(165, 197, 244, .14); border-radius: 6px; overflow: hidden; margin: 0 0 18px; }
.ccsd-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--cc-blue), var(--cc-cyan)); transition: width .25s ease; }

/* Completed steps collapse behind a one-line summary. */
.ccsd-summary { min-width: 0; max-width: 100%; overflow: hidden; display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s-sunken); }
.ccsd-summary b { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-green-text); margin-right: 8px; }
.ccsd-summary b::before { content: "\2713  "; }
.ccsd-summary span { color: var(--t-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ccsd-summary button { flex: none; }

/* The Request Service page's own step rail, driven by the intake. */
.ccreq-step-rail > div { transition: border-color .2s, background .2s, opacity .2s; }
.ccreq-step-rail > div.ccsd-rail-done span { background: #d8f5ec !important; color: #0c7a5c !important; }
.ccreq-step-rail > div.ccsd-rail-skip { opacity: .45; }
.ccreq-step-rail > div.active { border-color: #4a86ff !important; box-shadow: 0 0 0 2px rgba(74, 134, 255, .25); }
@media (max-width: 900px) { .ccreq-form-layout > .ccreq-step-rail { display: none !important; } }

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

.ccsd-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ccsd-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ccsd-grid .span2 { grid-column: 1 / -1; } }

.ccsd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ccsd-field > label, .ccsd-field > .ccsd-label { font-weight: 600; font-size: 15px; color: var(--t-1); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ccsd-field .ccsd-opt { font-weight: 400; color: var(--t-3); font-size: 13px; }
.ccsd-field .ccsd-req { font-weight: 600; color: var(--cc-amber-text); font-size: 11px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.ccsd input[type="text"], .ccsd input[type="email"], .ccsd input[type="tel"], .ccsd input[type="date"], .ccsd input[type="number"], .ccsd select, .ccsd textarea {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	background: var(--s-field);
	color: var(--t-1);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	font: inherit;
	font-size: 16px; /* prevents iOS zoom */
	min-height: var(--control-h);
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}
.ccsd select { background-image: linear-gradient(45deg, transparent 50%, var(--cc-blue-text) 50%), linear-gradient(135deg, var(--cc-blue-text) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
.ccsd textarea { min-height: 120px; resize: vertical; }
.ccsd input::placeholder, .ccsd textarea::placeholder { color: #7f96b6; opacity: 1; }
.ccsd input:focus, .ccsd select:focus, .ccsd textarea:focus { outline: none; border-color: var(--cc-blue-text); box-shadow: 0 0 0 3px rgba(74, 134, 255, .35); }
.ccsd input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }

.ccsd-field.has-error input, .ccsd-field.has-error select, .ccsd-field.has-error textarea { border-color: var(--c-danger); }
.ccsd-field.has-error .ccsd-choices { border: 1px solid var(--c-danger); padding: 6px; }
.ccsd-error { color: var(--cc-red-text); font-size: 14px; }
.ccsd-error::before { content: "\26A0  "; }

.ccsd-choices { display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid transparent; border-radius: var(--r-sm); }
.ccsd-choice { position: relative; max-width: 100%; }
.ccsd-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ccsd-choice span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--s-field); color: var(--t-2); cursor: pointer; font-size: 15px; line-height: 1.25; }
.ccsd-choice span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--t-3); flex: none; }
.ccsd-choice input:checked + span { border-color: var(--cc-blue-text); background: var(--c-selected-bg); color: var(--t-1); box-shadow: inset 0 0 0 1px var(--cc-blue-text); }
.ccsd-choice input:checked + span::before { border-color: var(--cc-blue-text); background: radial-gradient(circle, var(--cc-blue-text) 42%, transparent 48%); }
.ccsd-choice input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.ccsd-choice span:hover { border-color: var(--line-hot); }

.ccsd-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--s-sunken); cursor: pointer; }
.ccsd-check input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--cc-blue); }
.ccsd-check span { color: var(--t-2); font-size: 15px; }

.ccsd-service-pill { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-hot); background: var(--c-selected-bg); font-size: 14px; color: var(--t-1); margin: 0 0 16px; max-width: 100%; }
.ccsd-service-pill b { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--cc-cyan); text-transform: uppercase; }

.ccsd-note { border-left: 3px solid var(--c-warn); background: rgba(240, 180, 88, .1); padding: 10px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--t-2); font-size: 14px; margin: 0; }

.ccsd-drop { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px dashed rgba(165, 197, 244, .4); border-radius: var(--r-sm); background: var(--s-sunken); }
.ccsd-drop input[type="file"] { color: var(--t-2); font-size: 15px; max-width: 100%; }
.ccsd-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ccsd-files li { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--t-2); background: var(--s-raised); border-radius: 8px; padding: 4px 4px 4px 10px; }
.ccsd-files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------------------------------------------------------------- buttons */

.ccsd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 22px; }
.ccsd .ccsd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); padding: 12px 22px; border-radius: 12px;
	border: 1px solid transparent; font: inherit; font-weight: 650; font-size: 16px; cursor: pointer; text-decoration: none; line-height: 1.15;
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none; text-align: center;
}
.ccsd .ccsd-btn.primary, .ccsd button.ccsd-btn.primary[type="submit"] { background: linear-gradient(180deg, #3b78f0, var(--c-primary)) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 24px rgba(47, 103, 220, .32) !important; }
.ccsd .ccsd-btn.ghost { background: transparent !important; color: var(--cc-blue-text) !important; border: 1px solid rgba(143, 184, 255, .5) !important; }
.ccsd .ccsd-btn.good { background: linear-gradient(180deg, #4bd8b4, var(--c-success)) !important; color: #052a21 !important; border-color: transparent !important; }
.ccsd .ccsd-btn.bad { background: transparent !important; color: var(--cc-red-text) !important; border: 1px solid rgba(255, 122, 122, .55) !important; }
.ccsd .ccsd-btn.danger { background: #d9534f !important; color: #fff !important; border-color: transparent !important; }
.ccsd .ccsd-btn.small { min-height: 40px; padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.ccsd .ccsd-btn.block { width: 100%; }
.ccsd .ccsd-btn:hover { filter: brightness(1.08); }
.ccsd .ccsd-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.ccsd .ccsd-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
@media (max-width: 480px) { .ccsd-actions .ccsd-btn { flex: 1 1 auto; } }

.ccsd-alert { padding: 12px 14px; border-radius: var(--r-sm); margin: 0 0 14px; font-size: 15px; }
/* Alerts are opaque: they also sit directly on the site's light page background. */
.ccsd-alert.error { background: #3b1d2b; border: 1px solid #b85b6a; color: #ffe1e1; }
.ccsd-alert.ok { background: #0f3a36; border: 1px solid #2f9c83; color: #d9fcf1; }
.ccsd-alert.info { background: #122f4d; border: 1px solid #3f86b4; color: #e2eefc; }

/* ---------------------------------------------------------------- done */

.ccsd-done { text-align: center; }
.ccsd-done .ccsd-check-icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; background: rgba(57, 201, 165, .18); color: var(--cc-green-text); font-size: 28px; font-weight: 700; }
.ccsd-number { display: inline-block; font-family: var(--mono); font-size: clamp(24px, 6vw, 36px); letter-spacing: .1em; color: var(--t-1); background: var(--s-sunken); border: 1px solid var(--line-hot); border-radius: 12px; padding: 10px 18px; margin: 4px 0 16px; overflow-wrap: anywhere; }
.ccsd-next { text-align: left; max-width: 520px; margin: 8px auto 0; padding: 0; list-style: none; counter-reset: n; }
.ccsd-next li { counter-increment: n; display: flex; gap: 12px; align-items: flex-start; color: var(--t-2); margin: 0 0 10px; }
.ccsd-next li::before { content: counter(n); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--s-raised); color: var(--cc-cyan); font: 700 13px var(--mono); }

/* ---------------------------------------------------------------- portal layout */

/* Controls that sit directly on the light page background, outside a card. */
.ccsd-portal-shell > .ccsd-topline .ccsd-btn.ghost, .ccsd-portal-shell > div > .ccsd-btn.ghost { background: #13284a !important; color: #f7fbff !important; border-color: #13284a !important; }
.ccsd .ccsd-portal-shell > .ccsd-topline .ccsd-eyebrow { color: #0b5f8f !important; }
.ccsd .ccsd-portal-shell > .ccsd-topline h2 { color: #0f1c34 !important; }

.ccsd-portal { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.ccsd-portal-shell { padding: clamp(24px, 5vw, 56px) 0; display: flex; flex-direction: column; gap: var(--gap); }
.ccsd-topline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ccsd-cols { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ccsd-cols { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; } }
.ccsd-stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

.ccsd-list { display: flex; flex-direction: column; gap: 10px; }
.ccsd-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--s-card-flat); color: inherit; text-decoration: none; min-height: 44px; }
.ccsd-item:hover, .ccsd-item:focus-visible { border-color: var(--line-hot); outline: none; }
.ccsd-item:focus-visible { box-shadow: 0 0 0 3px rgba(74, 134, 255, .35); }
.ccsd-item .num { font-family: var(--mono); letter-spacing: .06em; color: var(--cc-cyan); font-size: 14px; }
.ccsd-item .title { color: var(--t-1); font-weight: 600; grid-column: 1 / -1; overflow-wrap: anywhere; }
.ccsd-item .meta { color: var(--t-3); font-size: 14px; grid-column: 1 / -1; }

.ccsd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 650; background: rgba(74, 134, 255, .18); color: var(--cc-blue-text); border: 1px solid rgba(143, 184, 255, .4); white-space: nowrap; }
.ccsd-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ccsd-pill.attn { background: rgba(240, 180, 88, .16); color: var(--cc-amber-text); border-color: rgba(240, 180, 88, .5); }
.ccsd-pill.done { background: rgba(57, 201, 165, .14); color: var(--cc-green-text); border-color: rgba(57, 201, 165, .45); }
.ccsd-pill.muted { background: rgba(159, 179, 207, .12); color: var(--t-3); border-color: var(--line); }

.ccsd-hero .ccsd-hero-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ccsd-hero h2 { margin: 4px 0 6px; overflow-wrap: anywhere; }
.ccsd-hero .ccsd-status-help { font-size: 17px; color: var(--t-1); margin: 12px 0 0; }
.ccsd-hero .ccsd-meta-line { color: var(--t-3); font-size: 14px; margin: 0; }

.ccsd-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 16px 0 6px; }
.ccsd-track div { height: 6px; border-radius: 4px; background: rgba(165, 197, 244, .16); }
.ccsd-track div.on { background: linear-gradient(90deg, var(--cc-blue), var(--cc-cyan)); }
.ccsd-track div.now { background: linear-gradient(90deg, var(--cc-cyan), var(--cc-purple)); }
.ccsd-track-labels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--t-3); }
.ccsd-track-labels span { overflow: hidden; text-overflow: ellipsis; }
.ccsd-track-labels span.on { color: var(--t-1); font-weight: 700; }
@media (max-width: 520px) { .ccsd-track-labels span { font-size: 9.5px; letter-spacing: 0; } }

.ccsd-attention { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: var(--r); background: #2b2616; border: 1px solid #c8913c; border-left: 6px solid var(--cc-amber); box-shadow: 0 12px 30px rgba(5, 12, 26, .25); }
.ccsd-attention > div { min-width: 0; flex: 1 1 240px; }
.ccsd-attention h3 { margin: 0 0 2px; font-size: 18px; color: var(--cc-amber-text); }
.ccsd-attention p { margin: 0; color: var(--t-1); }
.ccsd-attention.ready { background: #0f3330; border-color: #2f9c83; border-left-color: var(--cc-green); }
.ccsd-attention.ready h3 { color: var(--cc-green-text); }

.ccsd-appt { display: flex; gap: 14px; align-items: flex-start; }
.ccsd-appt + .ccsd-appt { margin-top: 12px; }
.ccsd-appt .cal { flex: none; width: 52px; text-align: center; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--s-sunken); }
.ccsd-appt .cal b { display: block; background: var(--c-primary); color: #fff; font-size: 11px; letter-spacing: .08em; padding: 2px 0; text-transform: uppercase; }
.ccsd-appt .cal span { display: block; font-size: 20px; font-weight: 700; padding: 3px 0; color: var(--t-1); }
.ccsd-appt .what { color: var(--t-1); font-weight: 600; }
.ccsd-appt .where { color: var(--t-2); font-size: 15px; overflow-wrap: anywhere; }

.ccsd-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 15px; }
.ccsd-dl dt { color: var(--t-3); }
.ccsd-dl dd { margin: 0; color: var(--t-1); overflow-wrap: anywhere; }
.ccsd-dl .due { font-weight: 700; }

.ccsd-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ccsd-steps-list li { display: flex; gap: 10px; align-items: center; color: var(--t-2); font-size: 15px; }
.ccsd-steps-list li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(165, 197, 244, .45); flex: none; }
.ccsd-steps-list li.done { color: var(--t-1); }
.ccsd-steps-list li.done::before { background: var(--c-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%23052a21' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--c-success); }

.ccsd-more { border: 1px solid var(--line); border-radius: var(--r); background: var(--s-card-flat); min-width: 0; }
.ccsd-more > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--t-1); min-height: 52px; border-radius: var(--r); }
.ccsd-more > summary::-webkit-details-marker { display: none; }
.ccsd-more > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--cc-blue-text); border-bottom: 2px solid var(--cc-blue-text); transform: rotate(45deg); transition: transform .2s; margin: 0 4px 3px auto; flex: none; }
.ccsd-more[open] > summary::after { transform: rotate(-135deg); margin-bottom: -3px; }
.ccsd-more > summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.ccsd-more > summary small { font-weight: 400; }
.ccsd-more > .ccsd-more-body { padding: 0 18px 18px; }

.ccsd-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ccsd-timeline li { padding: 12px 14px; border-radius: 12px; background: var(--s-sunken); border: 1px solid var(--line); }
.ccsd-timeline li.msg-staff { border-left: 3px solid var(--cc-blue); }
.ccsd-timeline li.msg-you { border-left: 3px solid var(--cc-cyan); background: rgba(85, 200, 239, .07); }
.ccsd-timeline li.system { background: transparent; border-style: dashed; padding: 9px 14px; }
.ccsd-timeline .head { display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: space-between; font-size: 13px; color: var(--t-3); margin-bottom: 4px; }
.ccsd-timeline li.system .head { margin: 0; }
.ccsd-timeline .head b { color: var(--t-1); font-weight: 600; font-size: 14px; }
.ccsd-timeline .body { white-space: pre-wrap; color: var(--t-1); overflow-wrap: anywhere; font-size: 15px; }
.ccsd-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ccsd-thumbs a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; min-height: 44px; }
.ccsd-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }

/* ---------------------------------------------------------------- estimate */

.ccsd-estimate:focus { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.ccsd-estimate.attn { border-color: rgba(240, 180, 88, .6); box-shadow: 0 0 0 1px rgba(240, 180, 88, .25), 0 18px 44px rgba(5, 12, 26, .34); }
.ccsd-est-section { margin: 0 0 18px; }
.ccsd-est-section h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-3); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.ccsd-est-section p { color: var(--t-1); white-space: pre-wrap; margin: 0; }
.ccsd-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ccsd-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--t-1); }
.ccsd-lines li .amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ccsd-lines li.sum { color: var(--t-2); border-bottom: 0; padding: 6px 0; }
.ccsd-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ccsd-option { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 10px 10px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--s-sunken); }
.ccsd-option > div { min-width: 0; }
.ccsd-option .desc { color: var(--t-1); overflow-wrap: anywhere; display: block; }
.ccsd-option .price { color: var(--t-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.ccsd-option.on { border-style: solid; border-color: var(--cc-blue-text); background: var(--c-selected-bg); }
.ccsd .ccsd-option .ccsd-btn { flex: none; min-width: 104px; }
.ccsd .ccsd-option.on .ccsd-btn { background: var(--c-primary) !important; color: #fff !important; border-color: transparent !important; }
.ccsd-total { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--s-raised); border: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.ccsd-total span { color: var(--t-2); }
.ccsd-total strong { font-size: 26px; color: var(--t-1); font-variant-numeric: tabular-nums; }
.ccsd-total small { flex-basis: 100%; }
.ccsd-decision { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ccsd-decision .ccsd-approve-text { color: var(--t-1); font-size: 15px; margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(57, 201, 165, .08); border: 1px solid rgba(57, 201, 165, .3); }
.ccsd-decision .secondary { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
@media (min-width: 560px) { .ccsd-decision .secondary { grid-template-columns: 1fr 1fr; } }
.ccsd-decision .secondary > div { display: flex; flex-direction: column; gap: 6px; }
.ccsd-decision .secondary small { text-align: center; }
.ccsd-confirm { padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 122, 122, .45); background: rgba(255, 122, 122, .08); display: flex; flex-direction: column; gap: 10px; }
.ccsd-confirm p { margin: 0; color: var(--t-1); font-weight: 600; }

/* ------------------------------------------------------------ payments (v1.2.0) */

.ccsd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.ccsd .ccsd-linkbtn { background: none !important; border: 0 !important; padding: 4px 0 !important; color: var(--cc-blue-text) !important; text-decoration: underline; font-size: 14px; cursor: pointer; min-height: 0 !important; box-shadow: none !important; }
.ccsd .ccsd-linkbtn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.ccsd-pay.due { border-color: rgba(240, 180, 88, .55); box-shadow: 0 0 0 1px rgba(240, 180, 88, .18) inset; }
.ccsd-pay .ccsd-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ccsd-pay-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.ccsd-pay-amount { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 750; color: var(--t-1); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ccsd-pay-buttons { display: grid; gap: 10px; margin: 14px 0 6px; }
.ccsd-pay-area { min-width: 0; }
.ccsd-pay-mount { margin: 14px 0 8px; border-radius: var(--r-sm); overflow: hidden; background: #fff; min-height: 120px; }
.ccsd-pay-mount > p { color: #334155 !important; padding: 16px; margin: 0; }
.ccsd-paypal { margin: 14px 0 8px; padding: 12px; border-radius: var(--r-sm); background: #fff; min-height: 60px; }
.ccsd-pay-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.ccsd-pay-options { border: 0; padding: 0; margin: 12px 0 4px; display: grid; gap: 8px; min-width: 0; }
.ccsd-pay-options legend { padding: 0; margin-bottom: 6px; }
.ccsd-pay-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--s-sunken); cursor: pointer; }
.ccsd-pay-option:has(input:checked) { border-color: var(--line-hot); background: var(--c-selected-bg); }
.ccsd-pay-option input { margin-top: 3px; accent-color: var(--cc-blue); }
.ccsd-pay-option span { display: grid; gap: 2px; min-width: 0; }
.ccsd-pay-option small { color: var(--t-3); }
.ccsd-secure { margin: 8px 0 12px !important; }
.ccsd-pay .ccsd-dl { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ccsd-pay-history { margin-top: 12px; }
.ccsd-pay-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ccsd-pay-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.ccsd-pay-list li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.ccsd-pay-list small { color: var(--t-3); overflow-wrap: anywhere; }
.ccsd-pay-result h2 { margin-top: 0; }
.ccsd-pay-result.ok { border-color: rgba(57, 201, 165, .55); }
.ccsd-pay-result.pending { border-color: rgba(240, 180, 88, .55); }
.ccsd-pay-result:focus { outline: none; }
.ccsd-lines li.sum.muted span { color: var(--t-3); font-style: italic; }
@media (max-width: 480px) { .ccsd-pay-amount { font-size: 28px; } }
.ccsd-pay-other { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.ccsd-pay-other p { margin: 0 !important; }
.ccsd-paypal-slot + .ccsd-paypal-slot { margin-top: 8px; }