/*
 * Caspar screen mockups for the use case sections (template-parts/use-case/caspar/).
 * Illustrations of the Caspar UI with fictional data, drawn at a fixed size and
 * scaled to fit by assets/js/use-case-caspar.js. Prefix: gdcs-.
 */

/* Fixed-size canvas, scaled to its container. Without JS it scrolls sideways. */
.gdcs-canvas { width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.gdcs-sizer { position: relative; }
.gdcs-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; font-family: Nunito, ui-sans-serif, system-ui, sans-serif; color: #334155; line-height: 1.3; }
.gdcs-inner * { box-sizing: border-box; }
.gdcs-app { border: 1px solid #dbe3ec; border-radius: 8px; background: #f4f7fa; }
.gdcs-sheet { border: 1px solid #dbe3ec; border-radius: 8px; background: #fff; }

/* Top bar with product tabs. */
.gdcs-top { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #e5eaf0; background: #fff; font-size: 10.5px; }
.gdcs-brand { margin-right: 8px; font-size: 15px; font-weight: 800; color: #1f9d6c; }
.gdcs-tab { border: 1px solid #dbe3ec; border-radius: 4px; padding: 4px 9px; font-weight: 600; color: #475569; }
.gdcs-tab.is-on { border-color: #1f9d6c; background: #1f9d6c; font-weight: 700; color: #fff; }

/* Search form. */
.gdcs-panel { margin: 12px 14px 0; border: 1px solid #e5eaf0; border-radius: 6px; background: #fff; overflow: hidden; }
.gdcs-form { padding: 12px 14px; }
.gdcs-fields { display: grid; gap: 10px; }
.gdcs-fields + .gdcs-fields { margin-top: 8px; }
.gdcs-lbl { margin-bottom: 3px; font-size: 9.5px; font-weight: 700; color: #475569; }
.gdcs-input { display: flex; align-items: center; height: 24px; border: 1px solid #cfd8e3; border-radius: 3px; background: #fff; padding: 0 7px; font-size: 11px; color: #1e293b; white-space: nowrap; }
.gdcs-input.is-on { border-color: #1f9d6c; box-shadow: 0 0 0 2px rgba(31, 157, 108, 0.15); }
.gdcs-actions { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.gdcs-ghost { border: 1px solid #dbe3ec; border-radius: 3px; padding: 3px 8px; font-size: 9.5px; font-weight: 600; color: #475569; }
.gdcs-btn { display: inline-block; border-radius: 3px; background: #3b7fd9; padding: 4px 14px; font-size: 10px; font-weight: 700; color: #fff; }
.gdcs-bar { position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: #3b7fd9; transform-origin: 0 50%; opacity: 0; visibility: hidden; }

/* Result tables. Column templates per table. */
.gdcs-row { display: grid; gap: 6px; align-items: center; padding: 8px 12px; border-top: 1px solid #eef2f6; font-size: 10.5px; color: #1e293b; }
.gdcs-row > span { min-width: 0; }
.gdcs-row.is-head { padding-top: 7px; padding-bottom: 7px; border-top: 0; background: #f3f6f9; font-size: 9.5px; font-weight: 700; color: #475569; }
.gdcs-row.is-sel { background: #f0f6ff; box-shadow: inset 3px 0 0 #2f6db5; }
.gdcs-row.is-soft { color: #475569; }
.gdcs-cols-search { grid-template-columns: 22px 1.3fr 1.1fr 0.9fr 34px 34px 36px 1.15fr 0.6fr 1.1fr 16px; padding-left: 10px; padding-right: 10px; }
.gdcs-cols-occ { grid-template-columns: 22px 1.5fr 1.1fr 0.9fr 34px 34px 36px 1.05fr 1.1fr; }
.gdcs-cols-trace { grid-template-columns: 22px 88px 1.1fr 1fr 0.8fr 30px 30px 0.95fr 1.65fr 1fr; }
.gdcs-cols-found { grid-template-columns: 22px 92px 1.1fr 1fr 0.8fr 34px 1.5fr 1.05fr; }
.gdcs-cols-next { grid-template-columns: 22px 1.3fr 1.05fr 0.8fr 34px 34px 36px 1.15fr 1.05fr; }
.gdcs-cols-act { grid-template-columns: 104px 84px 1fr 44px; gap: 8px; padding: 7px 12px; font-size: 10px; }
.gdcs-cols-act.is-head { padding-top: 6px; padding-bottom: 6px; }
.gdcs-group { padding: 5px 12px; border-top: 1px solid #eef2f6; background: #f8fafc; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.gdcs-group.is-primary { color: #2f6db5; }
.gdcs-caption-row { padding: 6px 10px; border-top: 1px solid #eef2f6; font-size: 9.5px; color: #64748b; }
.gdcs-title-row { padding: 6px 10px; border-bottom: 1px solid #eef2f6; text-align: center; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: #64748b; }
.gdcs-a { color: #2f6db5; }
.gdcs-a.is-b { font-weight: 600; }
.gdcs-a.is-u { text-decoration: underline; }
.gdcs-none { color: #94a3b8; }
.gdcs-nw { white-space: nowrap; }
.gdcs-score { display: flex; align-items: center; gap: 5px; }
.gdcs-pill { border-radius: 3px; background: #2f6db5; padding: 1px 5px; font-size: 8.5px; font-weight: 700; color: #fff; }
.gdcs-pill.is-dash { border: 1px dashed #94a3b8; background: none; padding: 0 4px; color: #475569; }
.gdcs-hit { justify-self: start; border-radius: 3px; background: #dcfce7; box-shadow: 0 0 0 1px #4ade80; padding: 1px 4px; font-weight: 600; color: #14532d; }
.gdcs-phone { display: flex; align-items: center; gap: 4px; color: #2f6db5; }
.gdcs-phone::before { content: ""; flex: none; width: 9px; height: 9px; border: 1.5px solid #cbd5e1; border-radius: 50%; }
.gdcs-sym { font-family: 'Material Symbols Outlined'; font-weight: 400; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; font-feature-settings: 'liga'; }

/* Record Detail drawer and cards. */
.gdcs-dim { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.32); }
.gdcs-drawer { position: absolute; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; background: #f4f7fa; box-shadow: -18px 0 40px -18px rgba(15, 23, 42, 0.5); }
.gdcs-drawer-h { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 9px 12px; background: #4f7fbf; font-size: 12px; font-weight: 700; color: #fff; }
.gdcs-card { overflow: hidden; border: 1px solid #dbe3ec; border-radius: 5px; background: #fff; }
.gdcs-card + .gdcs-card { margin-top: 8px; }
.gdcs-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #e8edf2; background: #f8fafc; }
.gdcs-chips { display: flex; gap: 4px; }
.gdcs-chip { display: inline-block; border: 1px solid #3b7fd9; border-radius: 4px; padding: 2px 7px; font-size: 8.5px; font-weight: 700; color: #2f6db5; white-space: nowrap; }
.gdcs-kv { font-size: 8.5px; color: #64748b; }
.gdcs-kv b { display: block; margin-top: 1px; font-size: 10px; font-weight: 400; color: #1e293b; }
.gdcs-sub { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 9.5px; font-weight: 700; color: #1e293b; }
.gdcs-box { margin-top: 4px; border: 1px solid #e2e8f0; border-radius: 4px; padding: 6px 8px; }
.gdcs-status { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; font-size: 9px; color: #475569; }
.gdcs-status > span:first-child { display: flex; align-items: center; gap: 5px; }
.gdcs-dot { flex: none; width: 9px; height: 9px; border: 1.5px solid #cbd5e1; border-radius: 50%; }
.gdcs-dot.is-dotted { border-style: dotted; border-color: #94a3b8; }
.gdcs-mini { border: 1px solid #3b7fd9; border-radius: 3px; padding: 1px 5px; font-size: 8px; font-weight: 600; color: #2f6db5; white-space: nowrap; }
.gdcs-empty { margin-top: 3px; font-size: 9px; font-style: italic; color: #64748b; }
.gdcs-ip { display: grid; grid-template-columns: 78px 1fr auto; gap: 6px; padding: 5px 10px; font-size: 9px; color: #1e293b; }
.gdcs-ip + .gdcs-ip { border-top: 1px solid #eef2f6; }

/* Record Detail at reading size (Record assessment). */
.gdcs-rd { display: flex; flex-direction: column; border: 1px solid #c9d6e6; border-radius: 10px; background: #f4f7fa; box-shadow: 0 20px 44px -24px rgba(15, 23, 42, 0.35); }
.gdcs-rd .gdcs-drawer-h { padding: 10px 16px; font-size: 14px; }
.gdcs-rd-body { position: relative; flex: 1; overflow-y: auto; padding: 4px 16px 16px; scrollbar-width: thin; }
.gdcs-rd-sec { margin-top: 12px; overflow: hidden; border: 1px solid #dbe3ec; border-radius: 6px; background: #fff; }
[data-gdcs-rd] { transition: box-shadow 0.35s ease; }
[data-gdcs-rd].is-flash { box-shadow: 0 0 0 3px rgba(19, 236, 128, 0.6); }
.gdcs-rd-h { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #e8edf2; background: #f3f6f9; }
.gdcs-rd-h b { display: block; font-size: 13px; font-weight: 700; color: #1e293b; }
.gdcs-rd-h small { display: block; margin-top: 1px; font-size: 10.5px; color: #64748b; }
.gdcs-rd-p { padding: 12px 14px; }
.gdcs-rd .gdcs-kv { font-size: 10.5px; }
.gdcs-rd .gdcs-kv b { margin-top: 2px; font-size: 12px; }
.gdcs-rd .gdcs-chip { padding: 3px 9px; font-size: 10px; }
.gdcs-rd .gdcs-mini { padding: 1px 6px; font-size: 9px; }
.gdcs-rd-sub { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11.5px; font-weight: 700; color: #1e293b; }
.gdcs-rd-box { margin-top: 5px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 11px; color: #1e293b; }
.gdcs-mk { display: flex; flex: none; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: #13ec80; font-family: Manrope, ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 800; color: #06281a; }
.gdcs-src { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 10.5px; color: #64748b; }
.gdcs-src.is-on { color: #1e293b; }
.gdcs-src + .gdcs-src { border-top: 1px solid #eef2f6; }
.gdcs-warn { border-radius: 5px; background: #fde2e2; padding: 9px 11px; color: #b91c1c; }
.gdcs-gauges { display: grid; grid-template-columns: repeat(3, 1fr); }
.gdcs-gauges > span { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }

/* PDF record extract pages (hero). */
.gdcs-page { position: absolute; left: 0; bottom: 0; width: 100%; overflow: hidden; border-radius: 3px; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1), 0 18px 36px -16px rgba(15, 23, 42, 0.4); transform-origin: 30% 100%; }
.gdcs-page .gdcs-inner { padding: 48px 50px 40px; background: #fff; font-size: 13px; line-height: 1.45; }
.gdcs-pg-card { margin-top: 16px; overflow: hidden; border: 1px solid #dbe3ec; border-radius: 4px; }
.gdcs-pg-card:first-child { margin-top: 0; }
.gdcs-pg-h { padding: 14px 16px; border-bottom: 1px solid #dbe3ec; background: #f3f6f9; font-size: 13px; color: #64748b; }
.gdcs-pg-h b { display: block; font-size: 16px; font-weight: 700; color: #1e293b; }
.gdcs-pg-kv { font-size: 13px; color: #64748b; }
.gdcs-pg-kv b { display: block; margin-top: 3px; font-size: 14px; font-weight: 400; color: #1e293b; }
.gdcs-pg-foot { position: absolute; left: 50px; right: 50px; bottom: 22px; font-size: 9px; color: #475569; }

/* Hero: monitor frame and the fanned PDF. */
.gdcs-monitor { margin-left: 9%; border-radius: 16px; background: #0f172a; padding: 10px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), 0 34px 60px -28px rgba(15, 23, 42, 0.45); }
.gdcs-monitor .gdcs-canvas { overflow: hidden; border-radius: 7px; }
.gdcs-pdf { position: absolute; left: 0; bottom: 56px; z-index: 3; width: 19%; min-width: 72px; aspect-ratio: 794 / 1123; }
.gdcs-pdf .gdcs-canvas { overflow: hidden; }
.gdcs-pg2 { transform: translateX(11%) rotate(7deg); }
.gdcs-pg3 { transform: translateX(22%) rotate(14deg); }
/*
 * Without the script the result, Record Detail and PDF fade in after the search would
 * have run; the script cancels this and plays the demo instead.
 */
@keyframes gdcs-in { to { opacity: 1; } }
.gdcs-hero [data-gdcs="hero-row"],
.gdcs-hero [data-gdcs="hero-dim"],
.gdcs-hero [data-gdcs="hero-rec"],
.gdcs-hero [data-gdcs="hero-pdf"] { opacity: 0; animation: gdcs-in 0.4s ease 2.5s forwards; }
@media (prefers-reduced-motion: reduce) {
	.gdcs-hero [data-gdcs="hero-row"],
	.gdcs-hero [data-gdcs="hero-dim"],
	.gdcs-hero [data-gdcs="hero-rec"],
	.gdcs-hero [data-gdcs="hero-pdf"] { opacity: 1; animation: none; }
}
/* The PDF pages only make sense once scaled; keep them hidden until the script sizes them. */
.gdcs-pdf:not(.is-sized) { visibility: hidden; }

/* Stepper layers (Initial search). The script animates them, so no transition here. */
.gdcs-layer.is-off { opacity: 0; visibility: hidden; }

/* Follow-up search: the chip that carries the email into the next search. */
.gdcs-chip-fly { position: absolute; left: 0; top: 0; z-index: 5; display: inline-block; border-radius: 4px; background: #dcfce7; box-shadow: 0 0 0 1px #4ade80, 0 10px 22px -8px rgba(15, 23, 42, 0.45); padding: 1px 4px; font-size: 10.5px; font-weight: 600; color: #14532d; white-space: nowrap; opacity: 0; visibility: hidden; }
.gdcs-kicker { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; }