/* Code Card's deck in the site's look, on top of tool-page.css: the search bar
   is a big pill, each card a white tile with a navy header (language chip and
   statement), the snippet on a pale panel with an indigo Copy button, the note
   beside it; unselected cards sit back, faded. The tour's toasts and the copy
   toast take the same navy. Every id and class the script drives is kept. */

/* search */
.cc-search { width: min(760px, 100%); margin: 0 auto 22px; }
#search-bar.input-group { display: flex; align-items: stretch; width: 100%; background: var(--ic-card); border: 1.5px solid var(--ic-rule); border-radius: 999px; box-shadow: 0 10px 24px -16px rgba(30,27,75,.45); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
#search-bar.input-group:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 10px 24px -16px rgba(30,27,75,.45); }
#search-bar .input-group-prepend, #search-bar .input-group-append { display: flex; }
#search-bar .input-group-text { border: 0; background: transparent; font: 700 13px/1 sans-serif; font-family: inherit; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); padding: 0 8px 0 20px; }
#search-bar .input-group-text.result-count { color: #fff; background: var(--ic-kicker-bg); border-radius: 999px; margin: 6px 6px 6px 0; padding: 0 14px; letter-spacing: .02em; text-transform: none; font-size: 13px; }
#search-bar input.form-control { flex: 1 1 auto; height: 56px; border: 0; background: transparent; font-size: 18px; color: var(--ic-ink); padding: 0 12px; box-shadow: none !important; outline: none; }
#search-bar input::placeholder { color: var(--ic-muted); }
#search-bar input.text-highlight::placeholder { color: var(--accent); font-weight: 600; }
#search-bar input:focus::placeholder { color: transparent; }
#search-bar.flash { z-index: 4; }

/* the deck */
.cc-deck { width: min(1160px, 100%); margin: 0 auto; }
.main-carousel { min-height: 320px; opacity: 0; transition: opacity .4s; padding: 12px 0 16px; }
.main-carousel.is-hidden { display: none; }
.main-carousel.flickity-enabled { opacity: 1; min-height: 0; } /* the arrows centre on the viewport, so it must be no taller than the cards */
.main-carousel.is-fullscreen { margin-top: 75px; padding: 20px; background: var(--ic-panel); }
.main-carousel.is-fullscreen .carousel-cell { height: 88%; }
.carousel-cell { width: 66%; margin-right: 16px; background: var(--ic-card); border-radius: 18px; box-shadow: 0 3px 4px 0 rgba(0,0,0,.08), 0 1px 8px 0 var(--ic-chip); overflow: hidden; border-bottom: 5px solid var(--accent-line); transition: opacity .3s, transform .3s, box-shadow .3s; }
.carousel-cell.is-selected { box-shadow: 0 22px 44px -24px rgba(30,27,75,.45), 0 2px 8px var(--ic-chip); }
.carousel-cell:not(.is-selected) { opacity: .45; transform: scale(.96); }
.carousel-cell-inner { position: relative; height: 100%; }
.carousel-cell-inner h4 { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 16px 20px; background: var(--ic-kicker-bg); color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -.01em; text-align: center; }
.carousel-cell-inner h4 .language { display: inline-block; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-ink); background: #fde047; border-radius: 999px; padding: 7px 11px; transform: rotate(-2deg); }
.carousel-cell-inner h4 .statement { color: #fff; }
.carousel-cell-content { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 0; margin: 0; padding: 22px 22px 26px; text-align: left; }
.carousel-cell-content-1, .carousel-cell-content-2 { display: block; width: auto; padding: 0; vertical-align: top; position: relative; }
.carousel-cell-content-1 { min-width: 0; padding-right: 22px; }
.carousel-cell-content-2 { border-left: 1px solid var(--ic-rule); padding-left: 22px; }
.carousel-cell-content-2 span { display: block; font-size: 16px; line-height: 1.55; color: var(--ic-text-2); }
.pre-wrapper { text-align: left; }
.carousel-cell-inner pre { display: block; margin: 0; padding: 16px 18px 46px; background: var(--ic-panel); border: 1px solid var(--ic-rule); border-radius: 12px; overflow: auto; text-align: left; font-size: 17px; line-height: 1.5; }
.carousel-cell-inner pre code { font-family: var(--mono); font-weight: 400; font-size: 17px; line-height: 1.5; background: none; }
button.copy { position: absolute; left: 12px; bottom: 10px; width: auto; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: 700 13px/1 sans-serif; font-family: inherit; padding: 9px 16px; cursor: pointer; box-shadow: 0 8px 18px -10px var(--accent); transition: transform .15s, filter .15s; }
button.copy:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; background: var(--accent); font-weight: 700; }
button.copy:active { filter: brightness(.95) !important; background: var(--accent) !important; }
.carousel-cell:not(.is-selected) button.copy { cursor: grab !important; }
button.info { display: none; position: absolute; right: 22px; bottom: 26px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--ic-kicker-bg); color: #fff; font: 700 15px/1 Georgia, "Times New Roman", serif !important; cursor: pointer; padding: 0; }
button.info:hover, button.info.clicked { background: var(--accent); color: #fff; font-weight: 700; }
button.info:focus { box-shadow: none; }
.carousel-cell .popover { font-family: inherit; border-radius: 12px; border-color: var(--ic-rule); box-shadow: 0 16px 34px -18px rgba(30,27,75,.5); }
.carousel-cell .popover-body { color: var(--ic-text-2); font-size: 14.5px; line-height: 1.5; }

/* flickity chrome */
.flickity-button { background: var(--ic-kicker-bg) !important; color: #fff !important; z-index: 2; box-shadow: 0 10px 20px -10px rgba(30,27,75,.7); transition: transform .15s, background .15s; }
.flickity-button:hover { background: var(--accent) !important; transform: scale(1.06); }
.flickity-button:disabled { opacity: .3; }
.flickity-button-icon { fill: #fff !important; color: #fff !important; }
.flickity-prev-next-button { width: 44px; height: 44px; }
.flickity-prev-next-button.previous { left: -6px; }
.flickity-prev-next-button.next { right: -6px; }
.flickity-fullscreen-button { background: var(--ic-kicker-bg) !important; border-radius: 10px; }
.flickity-page-dots { display: none; } /* one dot per card would be hundreds */

/* the tour and the copy toast */
#toaster { position: fixed; top: 76px; right: 16px; z-index: 5; width: min(360px, calc(100vw - 32px)); }
#toaster .toast { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 22px 44px -22px rgba(30,27,75,.55), 0 2px 8px rgba(0,0,0,.08); font-family: inherit; }
#toaster .toast-header { background: var(--ic-kicker-bg); color: #fff; border: 0; font-weight: 700; padding: 10px 14px; }
#toaster .toast-header img { width: 22px; height: 22px; }
#toaster .toast-header .close { color: #fff; opacity: .9; text-shadow: none; }
#toaster .toast-body { background: var(--ic-card); color: var(--ic-text); font-size: 14.5px; line-height: 1.5; padding: 12px 14px; }
.tutorial { font-weight: 700; text-decoration: underline; cursor: pointer; color: var(--accent); }
.hide-tutorial { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--ic-muted); cursor: pointer; }
button.next-step { font: 700 12px/1 sans-serif; font-family: inherit; margin-right: 10px; background: var(--accent); padding: 7px 12px; border-radius: 999px; color: #fff !important; opacity: 1; text-shadow: none; }
button.next-step:hover { background: var(--accent-ink) !important; color: #fff !important; }
#overlay { display: none; position: fixed; inset: 0; background: rgba(30,27,75,.55); z-index: 3; }
.flash-border { box-shadow: 0 0 0 4px var(--accent) !important; border-radius: 18px; }

@media only screen and (max-width: 991px) {
	.carousel-cell-content { grid-template-columns: minmax(0, 1fr); }
	.carousel-cell-content-1 { padding-right: 0; }
	.carousel-cell-content-2 { display: none; }
	button.info { display: grid; place-items: center; }
	.carousel-cell { width: 80%; }
}
@media only screen and (max-width: 650px) {
	.main-carousel { min-height: 240px; }
	.carousel-cell { width: 88%; margin-right: 12px; }
	.carousel-cell-inner h4 { font-size: 18px; padding: 12px 14px; gap: 8px; }
	.carousel-cell-content { padding: 14px 14px 18px; }
	.carousel-cell-inner pre { font-size: 14px; padding: 12px 12px 44px; }
	.carousel-cell-inner pre code { font-size: 14px; }
	#search-bar input.form-control { height: 50px; font-size: 16px; }
	#search-bar .input-group-text { padding-left: 16px; }
	.result-count { display: none !important; }
}
@media only screen and (max-width: 450px) {
	.carousel-cell-inner pre, .carousel-cell-inner pre code { font-size: 12px; }
}