/* ==========================================================================
   JPEX Autograph Desk — light interface
   One idea runs through it: everything is a paper ticket. Cards have a stub
   edge, the running total sits on a torn strip, and the pass itself is the
   only place colour is allowed to shout.
   ========================================================================== */

:root {
	--jw-paper: #f6f7f9;
	--jw-surface: #ffffff;
	--jw-sunken: #fafbfc;
	--jw-ink: #0f1319;
	--jw-ink-2: #3c4454;
	--jw-muted: #61697a;
	--jw-line: #e4e7ee;
	--jw-line-soft: #eef0f5;
	--jw-navy: #12203b;
	--jw-ok: #0e9f6e;
	--jw-warn: #b45309;
	--jw-bad: #dc2626;

	--jw-r-sm: 12px;
	--jw-r: 16px;
	--jw-r-lg: 20px;
	--jw-r-xl: 28px;
	--jw-spring: cubic-bezier(.2, .9, .25, 1);

	/* Layered and low-contrast: shadows read as depth, not as a drop shadow. */
	--jw-shadow-1: 0 1px 1px rgba(16, 20, 28, .04), 0 2px 4px -2px rgba(16, 20, 28, .05);
	--jw-shadow-2: 0 2px 4px -2px rgba(16, 20, 28, .06), 0 8px 20px -8px rgba(16, 20, 28, .1);
	--jw-shadow-3: 0 4px 10px -4px rgba(16, 20, 28, .08), 0 24px 48px -24px rgba(16, 20, 28, .3);

	--jw-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--jw-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

	--jw-veil: rgba(255, 255, 255, .92);
	--jw-blur: saturate(140%) blur(14px);
}

.jw-app,
.jw-sheet,
.jw-toasts,
.jw-scrim {
	font-family: var(--jw-sans);
	color: var(--jw-ink);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	box-sizing: border-box;
}

.jw-app *, .jw-app *::before, .jw-app *::after,
.jw-sheet *, .jw-sheet *::before, .jw-sheet *::after { box-sizing: border-box; }

/* :where() keeps this at zero specificity so a single class can still win. */
.jw-app :where(img),
.jw-sheet :where(img) { max-width: 100%; height: auto; display: block; }

/* Plain surfaces: white on off-white, no tints. */
.jw-glass,
.jw-app .jw-topbar,
.jw-app .jw-tabbar {
	background-color: var(--jw-veil);
	background-image: none;
	-webkit-backdrop-filter: var(--jw-blur);
	backdrop-filter: var(--jw-blur);
}
.jw-app .jw-kpi,
.jw-app .jw-bar,
.jw-app .jw-countdown,
.jw-app .jw-result { background-color: var(--jw-surface); background-image: none; }

/* Popups: off-white paper, white cards inside it. */
.jw-sheet { background-color: var(--jw-paper); }
.jw-sheet .jw-sheet__head { background: var(--jw-surface); border-bottom-color: var(--jw-line); }
.jw-sheet .jw-fieldset,
.jw-sheet .jw-attendee,
.jw-sheet .jw-card { background-color: var(--jw-surface); }
.jw-sheet .jw-sessrow { background-color: var(--jw-surface); }
.jw-sheet input,
.jw-sheet select,
.jw-sheet textarea,
.jw-sheet .jw-stepper { background-color: #fff; }

/* Armour: themes often style article/button/li globally, so the surfaces that
   matter carry a class-on-class selector. */
.jw-app .jw-card,
.jw-sheet .jw-card { background-color: var(--jw-surface); border: 1px solid var(--jw-line); }
.jw-app .jw-item,
.jw-sheet .jw-item { background-color: var(--jw-surface); color: var(--jw-ink); text-transform: none; }
.jw-app .jw-badge,
.jw-sheet .jw-badge { background-color: var(--jw-sunken); color: var(--jw-muted); }
.jw-app .jw-badge--ok { background-color: rgba(14, 159, 110, .1); color: #08774f; }
.jw-app .jw-badge--warn { background-color: rgba(180, 83, 9, .1); color: var(--jw-warn); }
.jw-app .jw-badge--bad { background-color: rgba(220, 38, 38, .09); color: var(--jw-bad); }
.jw-app .jw-badge--live { background-color: rgba(var(--jw-primary-rgb), .09); color: var(--jw-primary); }

/* Cards stay plain white; a card can opt into a tint via --jw-card-color. */
.jw-app .jw-card { background-image: none; }
.jw-app .jw-card[style*="--jw-card-color"] { background-color: var(--jw-card-color); }

.jw-wrap {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 18px;
}

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

.jw-h1 {
	font-size: clamp(28px, 5vw, 44px);
	font-weight: 800;
	letter-spacing: -.033em;
	line-height: 1.05;
	margin: 0 0 8px;
}

.jw-h2 {
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 0 0 6px;
}

.jw-h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0; }

.jw-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--jw-muted);
}

.jw-lede { font-size: 17px; color: var(--jw-muted); margin: 0 0 24px; max-width: 62ch; }
.jw-muted { color: var(--jw-muted); }
.jw-mono { font-family: var(--jw-mono); letter-spacing: .04em; }
.jw-num { font-variant-numeric: tabular-nums; }

.jw-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}

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

.jw-card {
	background: var(--jw-surface);
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-r-lg);
	box-shadow: var(--jw-shadow-1);
	position: relative;
	transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s, border-color .18s;
}

.jw-card--pad { padding: 22px; }

.jw-card--tap { cursor: pointer; }
.jw-card--tap:hover { transform: translateY(-3px); box-shadow: var(--jw-shadow-3); border-color: #d8dce6; }
.jw-card--tap:active { transform: translateY(-1px); }
.jw-card:focus-visible { outline: 2.5px solid var(--jw-primary); outline-offset: 3px; }

.jw-card.is-selected {
	border-color: var(--jw-primary);
	box-shadow: 0 0 0 3px rgba(var(--jw-primary-rgb), .14), var(--jw-shadow-2);
}

.jw-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (min-width: 620px) {
	.jw-grid--2, .jw-grid--3, .jw-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
	.jw-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.jw-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Photos off: cards fall back to type alone, which suits a text-only
   programme as much as a lineup with no portrait yet. */
.jw-nophoto .jw-wk__media,
.jw-nophoto .jw-tutor__media { display: none; }
.jw-nophoto .jw-wk__body,
.jw-nophoto .jw-tutor__body { padding-top: 18px; }
.jw-grid--list.jw-nophoto .jw-wk,
.jw-grid--list.jw-nophoto .jw-tutor { flex-direction: column; }

/* A single column of wide cards, chosen in Settings. The row layout applies at
   every width — on a phone the grid is already one column, so without this the
   setting would appear to do nothing. */
.jw-grid--list { grid-template-columns: 1fr !important; gap: 12px; }

.jw-grid--list .jw-wk,
.jw-grid--list .jw-tutor { flex-direction: row; align-items: stretch; }

.jw-grid--list .jw-wk__media,
.jw-grid--list .jw-tutor__media {
	width: 34%;
	min-width: 108px;
	max-width: 150px;
	aspect-ratio: auto;
	flex: none;
}
.jw-grid--list .jw-wk__body,
.jw-grid--list .jw-tutor__body { flex: 1; min-width: 0; padding: 14px 16px; }
.jw-grid--list .jw-wk::after { display: none; }
.jw-grid--list .jw-wk__price { right: auto; left: 10px; bottom: 10px; font-size: 13px; padding: 5px 10px; }
.jw-grid--list .jw-wk__list { display: none; }
.jw-grid--list .jw-countdown { display: none; }

@media (min-width: 680px) {
	.jw-grid--list .jw-wk__media,
	.jw-grid--list .jw-tutor__media { width: 30%; max-width: 260px; }
	.jw-grid--list .jw-wk__list { display: grid; }
	.jw-grid--list .jw-countdown { display: inline-flex; }
}

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

.jw-tutor { overflow: hidden; display: flex; flex-direction: column; }

.jw-tutor__media {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--jw-sunken);
	overflow: hidden;
}
/* Class-on-class so a theme's `img { width: auto }` cannot shrink the photo
   into a strip down the left of the card. */
.jw-app .jw-tutor__media img,
.jw-app .jw-wk__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 22%;
	transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.jw-card--tap:hover .jw-tutor__media img { transform: scale(1.04); }

.jw-tutor__tag {
	position: absolute;
	left: 12px;
	top: 12px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(8px);
	border-radius: 999px;
	padding: 5px 11px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: var(--jw-shadow-1);
}

.jw-tutor__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.jw-tutor__name { font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.jw-tutor__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

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

.jw-wk { display: flex; flex-direction: column; overflow: hidden; }

.jw-wk__media { aspect-ratio: 16 / 10; background: var(--jw-sunken); position: relative; overflow: hidden; }

.jw-wk__price {
	position: absolute;
	right: 12px;
	bottom: 12px;
	background: var(--jw-primary);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: -.01em;
	padding: 7px 13px;
	border-radius: 999px;
	box-shadow: 0 6px 16px -6px rgba(var(--jw-primary-rgb), .8);
}
.jw-wk__price .amount { color: inherit; }

.jw-wk__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.jw-wk__title { font-size: 18px; font-weight: 750; letter-spacing: -.02em; }

.jw-wk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.jw-wk__list li {
	font-size: 14px;
	color: var(--jw-muted);
	padding-left: 20px;
	position: relative;
}
.jw-wk__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--jw-primary);
}

.jw-wk__foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px dashed var(--jw-line);
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
}

/* Torn edge at the bottom of a ticket card — the recurring motif. */
.jw-wk::after {
	content: "";
	display: block;
	height: 10px;
	background:
		radial-gradient(circle at 6px -2px, transparent 6px, var(--jw-surface) 6.5px) repeat-x;
	background-size: 16px 10px;
	border-top: 1px dashed var(--jw-line-soft);
	margin-top: -1px;
}

/* An instructor's one-liner is the reason someone books, so it wraps rather
   than truncating the way a card subtitle normally would. */
.jw-tutor__bio {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--jw-muted);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------------------------------------------ workshop facts */

/* Duration, level and age sit together: the three things that decide whether a
   class is right for you. */
.jw-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.jw-fact {
	font-size: 11.5px;
	font-weight: 650;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--jw-sunken);
	border: 1px solid var(--jw-line);
	color: var(--jw-ink-2);
	white-space: nowrap;
}

/* The tutor, credited on the card without competing with the class name. */
.jw-tutorline {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border-radius: var(--jw-r-sm);
	background: var(--jw-sunken);
	border: 1px solid var(--jw-line-soft);
}
.jw-tutorline__photo {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 25%;
	flex: none;
}
.jw-tutorline__text { min-width: 0; display: grid; gap: 1px; }
.jw-tutorline__text strong { font-size: 13.5px; font-weight: 750; letter-spacing: -.01em; }
.jw-tutorline__text span {
	font-size: 12px;
	color: var(--jw-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* With photos off the price needs a home in the body. */
.jw-wk__priceline { font-size: 18px; font-weight: 800; letter-spacing: -.025em; }
.jw-wk__priceline .amount { color: inherit; }

/* -------------------------------------------------------------- sessions */

.jw-sessions { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }

.jw-sess {
	appearance: none;
	font: inherit;
	text-align: left;
	background: var(--jw-surface);
	border: 1.5px solid var(--jw-line);
	border-radius: var(--jw-r);
	padding: 11px 12px;
	cursor: pointer;
	display: grid;
	gap: 2px;
	transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
	position: relative;
}
.jw-sess:hover { border-color: #cfd5e2; transform: translateY(-2px); box-shadow: var(--jw-shadow-2); }
.jw-sess__date { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--jw-muted); }
.jw-sess__time { font-size: 15.5px; font-weight: 750; letter-spacing: -.015em; }
.jw-sess__left { font-size: 12.5px; color: var(--jw-muted); font-variant-numeric: tabular-nums; }
.jw-sess__where {
	font-size: 11.5px;
	color: var(--jw-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jw-sess.is-selected {
	border-color: var(--jw-primary);
	background: rgba(var(--jw-primary-rgb), .05);
	box-shadow: 0 0 0 3px rgba(var(--jw-primary-rgb), .12);
}
.jw-sess.is-tight .jw-sess__left { color: var(--jw-warn); font-weight: 650; }
.jw-sess.is-full,
.jw-sess:disabled {
	opacity: .5;
	cursor: not-allowed;
	background: var(--jw-sunken);
	transform: none;
	box-shadow: none;
}
.jw-sess.is-full .jw-sess__left { color: var(--jw-bad); }

.jw-sess__flash { animation: jw-flash .9s ease; }
@keyframes jw-flash {
	0% { background: rgba(var(--jw-primary-rgb), .18); }
	100% { background: transparent; }
}

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

.jw-app .jw-btn,
.jw-sheet .jw-btn {
	appearance: none;
	-webkit-appearance: none;
	white-space: nowrap;
	font-family: inherit;
	font-weight: 650;
	font-size: 15px;
	letter-spacing: -.005em;
	line-height: 1.2;
	border: 1.5px solid transparent;
	background-color: var(--jw-primary);
	/* A flat second layer, so a theme that only sets background-color cannot flatten it. */
	background-image: linear-gradient(var(--jw-primary), var(--jw-primary));
	color: #fff;
	border-radius: 999px;
	padding: 12px 22px;
	min-height: 46px;
	width: auto;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	text-transform: none;
	transition: transform .14s cubic-bezier(.2, .8, .3, 1), box-shadow .14s, background-color .14s, opacity .14s;
	box-shadow: 0 6px 18px -8px rgba(var(--jw-primary-rgb), .9);
	-webkit-tap-highlight-color: transparent;
}
.jw-app .jw-btn:hover,
.jw-sheet .jw-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -10px rgba(var(--jw-primary-rgb), .95);
	background-color: var(--jw-primary);
	color: #fff;
}
.jw-app .jw-btn:active,
.jw-sheet .jw-btn:active { transform: translateY(0) scale(.985); }
.jw-app .jw-btn:focus-visible,
.jw-sheet .jw-btn:focus-visible { outline: 2.5px solid var(--jw-ink); outline-offset: 2px; }
.jw-app .jw-btn[disabled],
.jw-sheet .jw-btn[disabled] { opacity: .45; pointer-events: none; box-shadow: none; }

.jw-app .jw-btn--ghost,
.jw-sheet .jw-btn--ghost {
	background-color: var(--jw-surface);
	background-image: none;
	color: var(--jw-ink);
	border-color: var(--jw-line);
	box-shadow: var(--jw-shadow-1);
}
.jw-app .jw-btn--ghost:hover,
.jw-sheet .jw-btn--ghost:hover {
	background-color: var(--jw-surface);
	color: var(--jw-ink);
	border-color: rgba(var(--jw-primary-rgb), .35);
	box-shadow: var(--jw-shadow-2);
}

.jw-app .jw-btn--quiet,
.jw-sheet .jw-btn--quiet {
	background-color: transparent;
	background-image: none;
	color: var(--jw-muted);
	box-shadow: none;
	border-color: transparent;
}
.jw-app .jw-btn--quiet:hover,
.jw-sheet .jw-btn--quiet:hover { background-color: var(--jw-sunken); color: var(--jw-ink); box-shadow: none; }

.jw-app .jw-btn--danger,
.jw-sheet .jw-btn--danger,
.jw-app .jw-btn--danger:hover,
.jw-sheet .jw-btn--danger:hover { background-color: var(--jw-bad); box-shadow: 0 6px 18px -8px rgba(220, 38, 38, .8); }

.jw-app .jw-btn--dark,
.jw-sheet .jw-btn--dark,
.jw-app .jw-btn--dark:hover,
.jw-sheet .jw-btn--dark:hover { background-color: var(--jw-navy); box-shadow: 0 6px 18px -8px rgba(18, 32, 59, .7); }

.jw-app .jw-btn--sm,
.jw-sheet .jw-btn--sm { font-size: 13.5px; padding: 8px 15px; min-height: 38px; }
.jw-app .jw-btn--lg,
.jw-sheet .jw-btn--lg { font-size: 16.5px; padding: 15px 28px; min-height: 54px; }
.jw-app .jw-btn--block,
.jw-sheet .jw-btn--block { width: 100%; }

.jw-app .jw-btn--icon,
.jw-sheet .jw-btn--icon { padding: 0; width: 46px; min-height: 46px; border-radius: 50%; }
.jw-app .jw-btn--icon.jw-btn--sm,
.jw-sheet .jw-btn--icon.jw-btn--sm { width: 38px; min-height: 38px; }

.jw-btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

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

.jw-field { display: grid; gap: 6px; }
.jw-field > label { font-size: 13px; font-weight: 650; color: var(--jw-ink); }
.jw-field .jw-hint { font-size: 12.5px; color: var(--jw-muted); }

.jw-app input[type="text"],
.jw-app input[type="email"],
.jw-app input[type="tel"],
.jw-app input[type="url"],
.jw-app input[type="number"],
.jw-app input[type="search"],
.jw-app input[type="date"],
.jw-app input[type="time"],
.jw-app select,
.jw-app textarea {
	font: inherit;
	font-size: 16px; /* keeps iOS from zooming on focus */
	width: 100%;
	background: var(--jw-surface);
	border: 1.5px solid var(--jw-line);
	border-radius: var(--jw-r-sm);
	padding: 12px 14px;
	color: var(--jw-ink);
	min-height: 48px;
	min-width: 0;
	max-width: 100%;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}
.jw-app input[type="number"],
.jw-sheet input[type="number"] { -moz-appearance: textfield; }
.jw-app textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.jw-app select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2361697a' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}

.jw-app input:focus,
.jw-app select:focus,
.jw-app textarea:focus {
	outline: none;
	border-color: var(--jw-primary);
	box-shadow: 0 0 0 3px rgba(var(--jw-primary-rgb), .13);
}

.jw-app input::placeholder,
.jw-app textarea::placeholder { color: #9aa2b1; }

.jw-row { display: grid; gap: 12px; }
.jw-row > * { min-width: 0; }
.jw-field { min-width: 0; }
@media (min-width: 620px) { .jw-row--2 { grid-template-columns: 1fr 1fr; } .jw-row--3 { grid-template-columns: repeat(3, 1fr); } }

.jw-stack { display: grid; gap: 14px; }

.jw-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; font-weight: 550; }
.jw-switch input { position: absolute; opacity: 0; pointer-events: none; }
.jw-switch__track {
	width: 46px;
	height: 28px;
	border-radius: 999px;
	background: #d5d9e2;
	position: relative;
	transition: background .2s;
	flex: none;
}
.jw-switch__track::after {
	content: "";
	position: absolute;
	inset: 3px auto 3px 3px;
	width: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--jw-shadow-1);
	transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}
.jw-switch input:checked + .jw-switch__track { background: var(--jw-primary); }
.jw-switch input:checked + .jw-switch__track::after { transform: translateX(18px); }
.jw-switch input:focus-visible + .jw-switch__track { outline: 2.5px solid var(--jw-ink); outline-offset: 2px; }

/* ----------------------------------------------------------------- steps */

.jw-steps {
	display: flex;
	gap: 4px;
	margin-bottom: 22px;
	counter-reset: jxstep;
}
.jw-step {
	flex: 1;
	display: grid;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #a2a9b7;
	transition: color .2s;
}
.jw-step::before {
	content: "";
	height: 4px;
	border-radius: 999px;
	background: var(--jw-line);
	transition: background .3s;
}
.jw-step.is-done { color: var(--jw-muted); }
.jw-step.is-done::before { background: #c3cad6; }
.jw-step.is-current { color: var(--jw-primary); }
.jw-step.is-current::before { background: var(--jw-primary); }

.jw-pane { display: none; animation: jw-in .28s cubic-bezier(.2, .8, .3, 1); }
.jw-pane.is-active { display: block; }
@keyframes jw-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------- attendee block */

.jw-attendee {
	border: 1.5px solid var(--jw-line);
	border-radius: var(--jw-r);
	padding: 16px;
	background: var(--jw-surface);
	display: grid;
	gap: 12px;
}
.jw-attendee__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jw-attendee__n {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jw-primary);
}
.jw-remove {
	appearance: none;
	background: none;
	border: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--jw-bad);
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 8px;
}
.jw-remove:hover { background: rgba(220, 38, 38, .08); }

/* =========================================================================
   The signature: a pass that looks like a real ticket.
   ========================================================================= */

.jw-ticket {
	position: relative;
	background: var(--jw-surface);
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-r-lg);
	box-shadow: var(--jw-shadow-3);
	overflow: hidden;
	display: grid;
}

.jw-ticket__band {
	background: var(--jw-primary);
	color: #fff;
	padding: 11px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	position: relative;
	overflow: hidden;
}
/* A faint repeat of the event name, like foil printing on a real stub. */
.jw-ticket__band::after {
	content: attr(data-repeat);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	white-space: nowrap;
	opacity: .16;
	font-size: 11px;
	letter-spacing: .5em;
	pointer-events: none;
}
.jw-ticket__band > * { position: relative; z-index: 1; }

.jw-ticket__top { padding: 20px 20px 16px; display: flex; gap: 14px; align-items: center; }
.jw-ticket__photo { width: 62px; height: 62px; border-radius: 14px; object-fit: cover; flex: none; border: 1px solid var(--jw-line); }
.jw-ticket__instructor { font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.jw-ticket__sub { font-size: 13.5px; color: var(--jw-muted); }

/* Die-cut notches and the dashed tear line. */
.jw-ticket__perf { position: relative; height: 22px; }
.jw-ticket__perf::before,
.jw-ticket__perf::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--jw-paper);
	border: 1px solid var(--jw-line);
	transform: translateY(-50%);
}
.jw-ticket__perf::before { left: -12px; }
.jw-ticket__perf::after { right: -12px; }
.jw-ticket__perf i {
	position: absolute;
	left: 18px;
	right: 18px;
	top: 50%;
	border-top: 2px dashed var(--jw-line);
}

.jw-ticket__qr { padding: 4px 20px 18px; display: grid; justify-items: center; gap: 8px; }
.jw-qr-plate {
	background: #fff;
	padding: 12px;
	border-radius: var(--jw-r);
	border: 1px solid var(--jw-line);
	line-height: 0;
}
.jw-qr-plate svg { width: 200px; height: 200px; display: block; }
.jw-ticket__code { font-family: var(--jw-mono); font-size: 16px; font-weight: 600; letter-spacing: .12em; }

.jw-ticket__facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--jw-line-soft);
}
.jw-ticket__fact { padding: 12px 14px; display: grid; gap: 2px; border-right: 1px solid var(--jw-line-soft); }
.jw-ticket__fact:last-child { border-right: 0; }
.jw-ticket__fact span { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--jw-muted); }
.jw-ticket__fact strong { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

.jw-ticket.is-used { filter: grayscale(1); opacity: .68; }
.jw-stamp {
	position: absolute;
	top: 46%;
	right: 18px;
	transform: rotate(-13deg);
	border: 3px solid var(--jw-muted);
	color: var(--jw-muted);
	border-radius: 8px;
	padding: 4px 12px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .8;
	pointer-events: none;
}

/* -------------------------------------------------------- sticky summary */

.jw-bar {
	position: sticky;
	bottom: 0;
	z-index: 30;
	margin-top: 22px;
	background: var(--jw-surface);
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-r-lg);
	box-shadow: var(--jw-shadow-3);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	position: -webkit-sticky;
}
.jw-bar__mini { flex: 1; min-width: 0; display: grid; gap: 2px; }
.jw-bar__label { font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--jw-muted); }
.jw-bar__value {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.015em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.jw-bar__total { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.jw-bar__total .amount { color: inherit; }

/* ---------------------------------------------------------------- badges */

.jw-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--jw-sunken);
	color: var(--jw-muted);
	border: 1px solid var(--jw-line);
	white-space: nowrap;
}
.jw-badge--ok { background: rgba(14, 159, 110, .1); color: #08774f; border-color: rgba(14, 159, 110, .25); }
.jw-badge--warn { background: rgba(180, 83, 9, .1); color: var(--jw-warn); border-color: rgba(180, 83, 9, .25); }
.jw-badge--bad { background: rgba(220, 38, 38, .09); color: var(--jw-bad); border-color: rgba(220, 38, 38, .24); }
.jw-badge--live { background: rgba(var(--jw-primary-rgb), .09); color: var(--jw-primary); border-color: rgba(var(--jw-primary-rgb), .25); }
.jw-badge--live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: jw-pulse 1.9s ease-in-out infinite;
}
@keyframes jw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ------------------------------------------------------------- app shell */

.jw-shell { display: grid; min-height: 100vh; min-height: 100dvh; background: var(--jw-paper); }

.jw-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--jw-line);
	padding: 10px 16px;
	padding-top: max(10px, env(safe-area-inset-top));
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	min-width: 0;
}
/* Beats the .jw-app :where(img) reset, so a 1500px logo cannot take the page. */
.jw-app .jw-topbar__logo {
	height: 28px;
	width: auto;
	max-width: 132px;
	object-fit: contain;
	flex: none;
}
@media (min-width: 640px) { .jw-app .jw-topbar__logo { height: 32px; max-width: 168px; } }

.jw-topbar__title {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.02em;
	white-space: nowrap;
	flex: none;
}
.jw-topbar__spacer { flex: 1 1 auto; min-width: 0; }
.jw-topbar .jw-btn { flex: none; }
.jw-topbar .jw-badge { flex: none; }
@media (max-width: 520px) {
	.jw-topbar__title { display: none; }
	.jw-topbar { gap: 8px; }
}

.jw-main { padding: 20px 16px 96px; }
@media (min-width: 1024px) { .jw-main { padding: 26px 26px 40px; } }

.jw-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	background: rgba(255, 255, 255, .93);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-top: 1px solid var(--jw-line);
	display: grid;
	grid-auto-flow: column;
	padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.jw-tabbar button {
	appearance: none;
	background: none;
	border: 0;
	font: inherit;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--jw-muted);
	padding: 8px 4px;
	display: grid;
	justify-items: center;
	gap: 3px;
	cursor: pointer;
	border-radius: 12px;
	-webkit-tap-highlight-color: transparent;
}
.jw-tabbar button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.jw-tabbar button.is-active { color: var(--jw-primary); }

@media (min-width: 1024px) {
	.jw-shell--desk { grid-template-columns: 244px 1fr; }
	.jw-shell--desk .jw-topbar { grid-column: 1 / -1; }
	.jw-tabbar {
		position: sticky;
		top: 57px;
		bottom: auto;
		height: calc(100dvh - 57px);
		grid-auto-flow: row;
		align-content: start;
		gap: 4px;
		padding: 16px 12px;
		border-top: 0;
		border-right: 1px solid var(--jw-line);
		background: transparent;
		backdrop-filter: none;
	}
	.jw-tabbar button {
		grid-auto-flow: column;
		justify-items: start;
		justify-content: start;
		gap: 12px;
		font-size: 14.5px;
		letter-spacing: -.005em;
		padding: 11px 14px;
		width: 100%;
	}
	.jw-tabbar button.is-active { background: rgba(var(--jw-primary-rgb), .08); }
}

/* Full-screen page: kill theme chrome that slipped through. */
body.jpws-fullscreen { margin: 0; padding: 0; background: #f2f3f7; overflow-x: hidden; }
body.jpws-fullscreen .jw-app { max-width: 100vw; }
body.jpws-fullscreen #wpadminbar { display: none; }
html.jpws-fullscreen-html { margin-top: 0 !important; }

/* -------------------------------------------------------------- desk UI */

.jw-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 22px; }
@media (min-width: 760px) { .jw-kpis { grid-template-columns: repeat(4, 1fr); } }

.jw-kpi {
	background: var(--jw-surface);
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-r);
	padding: 16px;
	box-shadow: var(--jw-shadow-1);
	display: grid;
	gap: 2px;
}
.jw-kpi strong {
	font-size: clamp(20px, 4.2vw, 30px);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.jw-kpi span { font-size: 12.5px; color: var(--jw-muted); font-weight: 550; }
.jw-app .jw-kpi--alert {
	border-color: rgba(220, 38, 38, .4);
	background-color: #fef5f5;
	background-image: none;
}
.jw-kpi--alert strong { color: var(--jw-bad); }

.jw-list { display: grid; gap: 8px; }

.jw-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--jw-surface);
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-r);
	padding: 12px 14px;
	box-shadow: var(--jw-shadow-1);
	text-align: left;
	width: 100%;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.jw-item:hover { border-color: #d5dae4; transform: translateY(-1px); box-shadow: var(--jw-shadow-2); }
.jw-item--static { cursor: default; }
.jw-item--static:hover { transform: none; box-shadow: var(--jw-shadow-1); border-color: var(--jw-line); }

.jw-avatar { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; background: var(--jw-sunken); flex: none; border: 1px solid var(--jw-line); }
.jw-item__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.jw-item__title { font-weight: 700; font-size: 15px; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jw-item__sub { font-size: 12.5px; color: var(--jw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jw-item__side { text-align: right; font-size: 12.5px; color: var(--jw-muted); display: grid; gap: 3px; flex: none; }
.jw-item__side strong { font-size: 14.5px; color: var(--jw-ink); font-weight: 750; }

.jw-app .jw-more {
	appearance: none;
	border: 1px solid var(--jw-line);
	background: var(--jw-surface);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
	color: var(--jw-muted);
	cursor: pointer;
	flex: none;
	padding: 0;
	transition: background .15s, color .15s, border-color .15s;
}
.jw-app .jw-more:hover { background: var(--jw-sunken); color: var(--jw-ink); border-color: #d5dae4; }

.jw-meter { height: 5px; border-radius: 999px; background: var(--jw-line-soft); overflow: hidden; margin-top: 6px; }
.jw-meter i { display: block; height: 100%; background: var(--jw-primary); border-radius: 999px; transition: width .6s cubic-bezier(.2, .8, .3, 1); }

.jw-toolbar { display: grid; gap: 10px; margin-bottom: 16px; }
@media (min-width: 760px) { .jw-toolbar { grid-template-columns: 2fr 1fr 1fr auto; align-items: center; } }

/* ------------------------------------------------------------- scanner */

/* Camera on the left, the tools that support it on the right. */
.jw-checkin { display: grid; gap: 18px; align-content: start; }
@media (min-width: 1024px) {
	.jw-checkin { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); align-items: start; }
}
.jw-checkin__stage { display: grid; gap: 14px; align-content: start; min-width: 0; }
.jw-checkin__side { display: grid; gap: 14px; align-content: start; min-width: 0; }

.jw-scan__overlay {
	position: absolute;
	left: 14px;
	right: 14px;
	top: 14px;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}
.jw-scan__pill {
	background: rgba(15, 19, 25, .58);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 7px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.jw-scan__pill--hint { font-weight: 600; letter-spacing: 0; opacity: .92; }
@media (max-width: 520px) { .jw-scan__pill--hint { display: none; } }

.jw-scan__tools {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	display: flex;
	gap: 10px;
	justify-content: center;
}
.jw-app .jw-round {
	appearance: none;
	border: 0;
	background: rgba(15, 19, 25, .55);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	border-radius: 18px;
	padding: 9px 14px;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	display: grid;
	justify-items: center;
	gap: 3px;
	min-width: 66px;
	transition: background .15s, transform .15s;
}
.jw-app .jw-round:hover { background: rgba(15, 19, 25, .75); transform: translateY(-1px); }
.jw-app .jw-round svg { width: 21px; height: 21px; }

.jw-manual { display: flex; gap: 8px; }
.jw-manual input { text-transform: uppercase; letter-spacing: .1em; }
.jw-manual .jw-btn { flex: none; }

.jw-recent { max-height: 340px; overflow-y: auto; }
.jw-recent .jw-item { padding: 10px 12px; }

.jw-scan { display: grid; gap: 14px; }

.jw-scan__stage {
	position: relative;
	aspect-ratio: 3 / 4;
	max-height: 58vh;
	background: #0b0e13;
	border-radius: var(--jw-r-xl);
	overflow: hidden;
	box-shadow: var(--jw-shadow-3);
}
@media (min-width: 760px) { .jw-scan__stage { aspect-ratio: 4 / 3; max-height: 64vh; } }
/* A soft vignette so the white pills and frame hold up against any background. */
.jw-scan__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(11, 14, 19, .55), rgba(11, 14, 19, 0) 22%),
		linear-gradient(0deg, rgba(11, 14, 19, .6), rgba(11, 14, 19, 0) 26%);
}
.jw-scan__overlay, .jw-scan__tools, .jw-scan__frame { z-index: 2; }
.jw-scan__stage video { width: 100%; height: 100%; object-fit: cover; display: block; }

.jw-scan__frame {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: min(58%, 250px);
	aspect-ratio: 1;
	pointer-events: none;
}
.jw-scan__frame i {
	position: absolute;
	width: 34px;
	height: 34px;
	border: 3px solid #fff;
	border-radius: 6px;
}
.jw-scan__frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.jw-scan__frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.jw-scan__frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.jw-scan__frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.jw-scan__frame b {
	position: absolute;
	left: 6%;
	right: 6%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--jw-primary), transparent);
	animation: jw-sweep 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes jw-sweep { 0%, 100% { top: 8%; } 50% { top: 92%; } }

.jw-scan__hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	text-align: center;
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	font-weight: 600;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.jw-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.jw-flash.go { animation: jw-blink .5s ease; }
@keyframes jw-blink { 0% { opacity: .85; } 100% { opacity: 0; } }

.jw-result {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--jw-r-lg);
	border: 1.5px solid var(--jw-line);
	transform: translateY(8px);
	background: var(--jw-surface);
	box-shadow: var(--jw-shadow-2);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .2s, transform .2s;
	min-height: 84px;
}
.jw-result.is-shown { opacity: 1; transform: none; }
.jw-result__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	background: var(--jw-muted);
	flex: none;
}
.jw-result__title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.jw-result__sub { font-size: 13.5px; color: var(--jw-muted); }
.jw-result.ok { border-color: rgba(14, 159, 110, .45); background: rgba(14, 159, 110, .05); }
.jw-result.ok .jw-result__icon { background: var(--jw-ok); }
.jw-result.warn { border-color: rgba(180, 83, 9, .45); background: rgba(180, 83, 9, .05); }
.jw-result.warn .jw-result__icon { background: var(--jw-warn); }
.jw-result.bad { border-color: rgba(220, 38, 38, .45); background: rgba(220, 38, 38, .05); }
.jw-result.bad .jw-result__icon { background: var(--jw-bad); }

/* -------------------------------------------------------- scan verdict */

.jw-verdict {
	display: grid;
	gap: 16px;
	--tone: var(--jw-muted);
	--tone-soft: var(--jw-sunken);
}
.jw-verdict--ok { --tone: #0e9f6e; --tone-soft: #eefaf4; }
.jw-verdict--warn { --tone: #b45309; --tone-soft: #fdf6ec; }
.jw-verdict--bad { --tone: #dc2626; --tone-soft: #fdf2f2; }

.jw-verdict__mark {
	width: 66px;
	height: 66px;
	border-radius: 22px;
	display: grid;
	place-items: center;
	background: var(--tone-soft);
	color: var(--tone);
	justify-self: center;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 22%, transparent);
	animation: jw-pop .42s cubic-bezier(.2, 1.5, .4, 1);
}
.jw-verdict__mark svg { width: 34px; height: 34px; }
.jw-verdict__mark--big { width: 92px; height: 92px; border-radius: 30px; }
.jw-verdict__mark--big svg { width: 48px; height: 48px; }

@keyframes jw-pop {
	0% { transform: scale(.6); opacity: 0; }
	60% { transform: scale(1.06); opacity: 1; }
	100% { transform: scale(1); }
}

.jw-verdict__head { text-align: center; display: grid; gap: 4px; }
.jw-verdict__state {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--tone);
	line-height: 1.1;
}
.jw-verdict__why { font-size: 14px; color: var(--jw-muted); }

.jw-verdict__who {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px;
	border-radius: var(--jw-r);
	background: var(--jw-surface);
	border: 1px solid var(--jw-line);
}
.jw-verdict__photo { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; flex: none; }
.jw-verdict__name { font-size: 19px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.jw-verdict__meta { font-size: 13.5px; color: var(--jw-muted); }

.jw-verdict__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background: var(--jw-line);
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-r);
	overflow: hidden;
}
.jw-verdict__fact { background: var(--jw-surface); padding: 11px 13px; display: grid; gap: 2px; }
.jw-verdict__fact span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--jw-muted);
}
.jw-verdict__fact strong { font-size: 14px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }

.jw-verdict__actions { display: grid; gap: 8px; }
.jw-app .jw-btn--go, .jw-sheet .jw-btn--go {
	background-color: #0e9f6e;
	background-image: linear-gradient(#0e9f6e, #0e9f6e);
	box-shadow: 0 8px 22px -10px rgba(14, 159, 110, .9);
}
.jw-app .jw-btn--go:hover, .jw-sheet .jw-btn--go:hover { background-color: #0c8a5f; }

.jw-verdict.is-done { justify-items: center; }
.jw-verdict.is-done .jw-btn { margin-top: 6px; }

/* --------------------------------------------------------------- sheets */

.jw-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(15, 19, 25, .42);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .22s;
}
.jw-scrim.is-open { opacity: 1; }

.jw-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	border-radius: var(--jw-r-xl) var(--jw-r-xl) 0 0;
	box-shadow: 0 -20px 60px -20px rgba(15, 19, 25, .4);
	max-height: 88dvh;
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	transform: translateY(102%);
	transition: transform .38s var(--jw-spring);
	padding-bottom: env(safe-area-inset-bottom);
}
.jw-sheet.is-open { transform: none; }
@media (min-width: 760px) {
	.jw-sheet {
		left: 50%;
		right: auto;
		bottom: auto;
		top: 50%;
		width: min(560px, 92vw);
		border-radius: var(--jw-r-xl);
		transform: translate(-50%, -46%) scale(.97);
		opacity: 0;
		transition: transform .24s cubic-bezier(.2, .9, .25, 1), opacity .2s;
	}
	.jw-sheet.is-open { transform: translate(-50%, -50%); opacity: 1; }
	.jw-sheet--wide { width: min(780px, 94vw); }
}
.jw-sheet__grab { width: 40px; height: 4px; border-radius: 999px; background: var(--jw-line); margin: 10px auto 2px; flex: none; }
@media (min-width: 760px) { .jw-sheet__grab { display: none; } }
.jw-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--jw-line-soft);
	flex: none;
}
.jw-sheet__title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.jw-sheet__body {
	padding: 18px 20px 24px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
.jw-sheet__body > * { min-width: 0; }
/* Nothing inside a popup may be wider than the popup. This is what let the
   ticket editor scroll sideways and push its buttons off screen. */
.jw-sheet__body :where(div, section, ul, ol, p, label, textarea, select, input) { max-width: 100%; }
.jw-sheet .jw-editor,
.jw-sheet .jw-fieldset,
.jw-sheet .jw-stack,
.jw-sheet .jw-row { min-width: 0; max-width: 100%; }
.jw-sheet select, .jw-sheet input, .jw-sheet textarea { width: 100%; }

/* Actions ride along the bottom of the popup, always in reach. */
.jw-sheet__actions {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin: 4px -20px -24px;
	padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
	background: var(--jw-surface);
	border-top: 1px solid var(--jw-line);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.jw-sheet__actions .jw-btn { flex: 1 1 auto; }
@media (max-width: 640px) {
	.jw-sheet__actions { margin: 4px -16px -20px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
	.jw-sheet .jw-sheet__actions { flex-direction: row; }
	.jw-sheet .jw-sheet__actions .jw-btn { width: auto; }
}
.jw-sheet__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.jw-close {
	appearance: none;
	border: 0;
	background: var(--jw-sunken);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 19px;
	line-height: 1;
	color: var(--jw-muted);
	cursor: pointer;
	flex: none;
}
.jw-close:hover { background: var(--jw-line); color: var(--jw-ink); }

/* -------------------------------------------------------------- toasts */

.jw-toasts {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 120;
	display: grid;
	gap: 8px;
	width: min(440px, calc(100vw - 32px));
}
.jw-toast {
	background: var(--jw-navy);
	color: #fff;
	padding: 13px 17px;
	border-radius: 14px;
	font-size: 14.5px;
	font-weight: 550;
	box-shadow: var(--jw-shadow-3);
	animation: jw-toast-in .28s cubic-bezier(.2, .9, .25, 1);
}
.jw-toast--ok { background: #0b7d57; }
.jw-toast--bad { background: #b91c1c; }
@keyframes jw-toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- countdown */

.jw-countdown {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	background: var(--jw-surface);
	border: 1px solid var(--jw-line);
	border-radius: 999px;
	padding: 8px 16px;
	box-shadow: var(--jw-shadow-1);
}
.jw-countdown__label { font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--jw-muted); }
.jw-countdown__clock { font-family: var(--jw-mono); font-size: 16px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- rules */

.jw-rules { display: grid; gap: 16px; }
@media (min-width: 760px) { .jw-rules { grid-template-columns: 1fr 1fr; } }
.jw-rules ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.jw-rules li { font-size: 14.5px; padding-left: 24px; position: relative; color: var(--jw-muted); }
.jw-rules li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 12px;
	height: 8px;
	border-left: 2px solid var(--jw-ok);
	border-bottom: 2px solid var(--jw-ok);
	transform: rotate(-45deg);
}
.jw-rules--no li::before {
	border: 0;
	width: 12px;
	height: 2px;
	background: var(--jw-bad);
	top: 11px;
	transform: none;
}

/* -------------------------------------------------------------- manage */

.jw-editor { display: grid; gap: 18px; }
.jw-fieldset { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--jw-line); border-radius: var(--jw-r); background: var(--jw-surface); }
.jw-fieldset > h4 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--jw-muted); }

.jw-drop {
	border: 2px dashed #cbd2df;
	border-radius: var(--jw-r);
	padding: 18px;
	text-align: center;
	background: var(--jw-sunken);
	cursor: pointer;
	transition: border-color .15s, background .15s;
	display: grid;
	gap: 8px;
	justify-items: center;
}
.jw-drop:hover, .jw-drop.is-over { border-color: var(--jw-primary); background: rgba(var(--jw-primary-rgb), .04); }
.jw-drop img { width: 110px; height: 110px; object-fit: cover; border-radius: var(--jw-r-sm); }
.jw-drop small { color: var(--jw-muted); font-size: 12.5px; }
.jw-drop::before {
	content: "";
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(var(--jw-primary-rgb), .1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ea3d2e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.jw-drop img + small { order: 3; }

/* Sized against the sheet, not the window — a viewport media query here was
   squeezing six columns into 560px and collapsing the seats field. */
.jw-sessrow {
	display: grid;
	gap: 8px 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: end;
	padding: 12px;
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-r-sm);
	background: var(--jw-sunken);
}
.jw-sessrow > * { min-width: 0; }
.jw-sessrow > .jw-field:first-child { grid-column: 1 / -1; }
.jw-sessrow > .jw-remove { grid-column: 1 / -1; justify-self: start; padding: 6px 0; }
.jw-sessrow .jw-field > label {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--jw-muted);
	white-space: nowrap;
}
@media (min-width: 860px) {
	.jw-sheet--wide .jw-sessrow { grid-template-columns: 1.25fr .85fr .85fr .7fr .95fr auto; }
	.jw-sheet--wide .jw-sessrow > .jw-field:first-child,
	.jw-sheet--wide .jw-sessrow > .jw-remove { grid-column: auto; }
	.jw-sheet--wide .jw-sessrow > .jw-remove { align-self: end; padding-bottom: 14px; }
}

.jw-statusdot { width: 8px; height: 8px; border-radius: 50%; background: var(--jw-muted); flex: none; }
.jw-statusdot--publish { background: var(--jw-ok); }
.jw-statusdot--draft { background: var(--jw-warn); }
.jw-statusdot--archived { background: var(--jw-muted); }

/* ------------------------------------------------------- empty + skeleton */

.jw-empty {
	text-align: center;
	padding: 44px 22px;
	border: 1.5px dashed var(--jw-line);
	border-radius: var(--jw-r-lg);
	color: var(--jw-muted);
	background: var(--jw-surface);
	display: grid;
	gap: 6px;
	justify-items: center;
}
.jw-empty strong { display: block; color: var(--jw-ink); font-size: 17px; font-weight: 750; letter-spacing: -.015em; }

.jw-skel {
	background: linear-gradient(90deg, var(--jw-line-soft) 25%, #f6f7fa 37%, var(--jw-line-soft) 63%);
	background-size: 400% 100%;
	animation: jw-shimmer 1.3s ease infinite;
	border-radius: var(--jw-r-sm);
	height: 68px;
}
@keyframes jw-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.jw-locked { padding: 40px 18px; max-width: 520px; margin: 0 auto; }
.jw-staff-panel { margin-bottom: 24px; }
.jw-staff-panel__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 16px; }
.jw-staff-panel__stats strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.jw-staff-panel__stats span { font-size: 12px; color: var(--jw-muted); }
.jw-staff-panel__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* The customer's box on My Account. */
.jw-mine { display: grid; gap: 14px; }
.jw-mine__head { display: flex; gap: 14px; align-items: center; }
.jw-mine__photo { width: 56px; height: 56px; border-radius: 16px; }
.jw-mine__intro { min-width: 0; display: grid; gap: 3px; }
.jw-mine__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.jw-mine__cta { justify-self: start; }
@media (max-width: 520px) { .jw-mine__cta { width: 100%; } }

.jw-live { font-variant-numeric: tabular-nums; font-weight: 750; }
.jw-hide { display: none !important; }

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

.jw-app .jw-btn.is-busy,
.jw-sheet .jw-btn.is-busy { pointer-events: none; opacity: .92; }
.jw-app .jw-btn.is-busy::before,
.jw-sheet .jw-btn.is-busy::before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: jw-spin .7s linear infinite;
	flex: none;
}
@keyframes jw-spin { to { transform: rotate(360deg); } }

.jw-app .jw-btn--ghost.is-busy::before { border-color: var(--jw-primary); border-right-color: transparent; }

/* A thin progress line across the top of a working panel. */
.jw-working { position: relative; }
.jw-working::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, transparent, var(--jw-primary), transparent);
	background-size: 44% 100%;
	background-repeat: no-repeat;
	animation: jw-sweepx 1.1s ease-in-out infinite;
}
@keyframes jw-sweepx {
	0% { background-position: -44% 0; }
	100% { background-position: 144% 0; }
}

/* ------------------------------------------------------ segmented tabs */

.jw-seg {
	display: inline-flex;
	padding: 4px;
	gap: 3px;
	border-radius: 999px;
	background: var(--jw-sunken);
	border: 1px solid var(--jw-line);
	margin-bottom: 18px;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}
.jw-seg::-webkit-scrollbar { display: none; }
.jw-app .jw-seg button {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 650;
	color: var(--jw-muted);
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s, color .18s, box-shadow .18s;
	min-height: 40px;
}
.jw-app .jw-seg button.is-active {
	background: var(--jw-surface);
	color: var(--jw-ink);
	box-shadow: var(--jw-shadow-1);
}
@media (max-width: 520px) { .jw-seg { display: flex; width: 100%; } .jw-app .jw-seg button { flex: 1; padding: 9px 10px; } }

/* ------------------------------------------------------------- stepper */

/* Replaces the number spinner: on a phone a 30px spin control is unusable. */
.jw-stepper {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1.5px solid var(--jw-line);
	border-radius: var(--jw-r-sm);
	background: var(--jw-surface);
	overflow: hidden;
	min-height: 48px;
}
.jw-app .jw-stepper button {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	color: var(--jw-ink);
	width: 42px;
	min-height: 46px;
	cursor: pointer;
	flex: none;
	transition: background .15s;
}
.jw-app .jw-stepper button:hover { background: rgba(var(--jw-primary-rgb), .08); color: var(--jw-primary); }
.jw-app .jw-stepper button:disabled { opacity: .3; pointer-events: none; }
.jw-app .jw-stepper input {
	border: 0 !important;
	border-radius: 0;
	text-align: center;
	min-height: 46px;
	padding: 0 2px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	box-shadow: none !important;
	background: transparent;
	flex: 1;
	min-width: 0;
	-moz-appearance: textfield;
}
.jw-app .jw-stepper input::-webkit-outer-spin-button,
.jw-app .jw-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jw-stepper--wide { max-width: 190px; }

/* -------------------------------------------------------- rich content */

.jw-rich, .jw-rich-list { font-size: 14.5px; line-height: 1.65; color: var(--jw-ink-2); }
.jw-rich > *:first-child { margin-top: 0; }
.jw-rich > *:last-child { margin-bottom: 0; }
.jw-rich p { margin: 0 0 10px; }
.jw-rich a { color: var(--jw-primary); }
.jw-rich ul, .jw-rich ol { margin: 0 0 10px; padding-left: 20px; }
.jw-rich li { margin-bottom: 5px; }
.jw-rich h1, .jw-rich h2, .jw-rich h3, .jw-rich h4 {
	font-size: 15px; font-weight: 750; letter-spacing: -.01em; margin: 14px 0 6px; color: var(--jw-ink);
}
.jw-rich img { border-radius: var(--jw-r-sm); margin: 8px 0; }
.jw-rich table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.jw-rich th, .jw-rich td { border: 1px solid var(--jw-line); padding: 7px 10px; text-align: left; }

.jw-rich-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.jw-rich-list li { padding-left: 24px; position: relative; }
.jw-rich-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 12px;
	height: 8px;
	border-left: 2px solid var(--jw-ok);
	border-bottom: 2px solid var(--jw-ok);
	transform: rotate(-45deg);
}
.jw-rich-list--no li::before {
	border: 0;
	width: 12px;
	height: 2px;
	background: var(--jw-bad);
	top: 11px;
	transform: none;
}

/* -------------------------------------------------------------- alerts */

.jw-alert {
	padding: 12px 14px;
	border-radius: var(--jw-r-sm);
	border: 1.5px solid rgba(220, 38, 38, .4);
	background: #fef5f5;
	color: #a01818;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

/* ------------------------------------------------------- who you'll meet */

.jw-whom {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 16px;
	border-radius: var(--jw-r-lg);
	background: var(--jw-surface);
	border: 1px solid var(--jw-line);
	box-shadow: var(--jw-shadow-1);
	margin-bottom: 4px;
}
.jw-whom__photo {
	width: 76px;
	height: 76px;
	border-radius: 20px;
	object-fit: cover;
	object-position: center 20%;
	flex: none;
	border: 1px solid var(--jw-line);
}
.jw-whom__text { min-width: 0; display: grid; gap: 2px; }
.jw-whom__name { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.jw-whom__sub { font-size: 13.5px; color: var(--jw-muted); }

/* ------------------------------------------------------ session picker */

.jw-pick {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--jw-line);
	border-radius: var(--jw-r);
	background: var(--jw-surface);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.jw-pick:hover { border-color: #cfd5e2; }
.jw-pick.is-on {
	border-color: var(--jw-primary);
	background: rgba(var(--jw-primary-rgb), .04);
	box-shadow: 0 0 0 3px rgba(var(--jw-primary-rgb), .1);
}
.jw-pick.is-full { opacity: .5; cursor: not-allowed; background: var(--jw-sunken); }
/* Budget spent elsewhere: still visible, clearly not takeable. */
.jw-pick.is-capped { opacity: .62; }
.jw-pick.is-capped .jw-pick__left::after {
	content: " · limit reached";
	color: var(--jw-warn);
	font-weight: 650;
}
.jw-pick__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.jw-pick__time { font-size: 16px; font-weight: 750; letter-spacing: -.015em; }
.jw-pick__left { font-size: 12.5px; color: var(--jw-muted); font-variant-numeric: tabular-nums; }
.jw-pick__where { font-size: 12.5px; color: var(--jw-ink-2); font-weight: 600; }
.jw-pick__left.is-tight { color: var(--jw-warn); font-weight: 650; }

/* --------------------------------------------------------------- price */

/* The currency sits back so the amount reads first. */
.jw-price { white-space: nowrap; }
.jw-price__cur {
	font-size: .62em;
	font-weight: 650;
	color: var(--jw-muted);
	letter-spacing: .04em;
	margin-right: .16em;
	vertical-align: baseline;
}

/* --------------------------------------------------------- required */

.jw-req { color: var(--jw-bad); font-weight: 800; }

.jw-app input.is-bad,
.jw-sheet input.is-bad {
	border-color: var(--jw-bad);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

/* ------------------------------------------------------------- summary */

.jw-sum__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
}
.jw-sum__row strong { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }

/* ------------------------------------------------- provided / to bring */

.jw-panel {
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-r);
	background: var(--jw-surface);
	padding: 16px 18px;
	display: grid;
	gap: 8px;
}
.jw-panel__head {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--jw-muted);
}
.jw-panel__mark {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex: none;
	background-repeat: no-repeat;
	background-position: center;
}
/* Provided: a tick. To bring: a small bag. */
.jw-panel--provided .jw-panel__mark {
	background-color: rgba(14, 159, 110, .12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230e9f6e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
.jw-panel--bring .jw-panel__mark {
	background-color: rgba(var(--jw-primary-rgb), .12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ea3d2e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}
.jw-panel--provided { border-color: rgba(14, 159, 110, .28); }
.jw-panel--bring { border-color: rgba(var(--jw-primary-rgb), .28); }

/* ---------------------------------------------------------- disclosure */

.jw-disc {
	border: 1px solid var(--jw-line);
	border-radius: var(--jw-r);
	background: var(--jw-surface);
	overflow: hidden;
}
.jw-app .jw-disc__head {
	appearance: none;
	width: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--jw-muted);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	text-align: left;
	min-height: 52px;
}
.jw-app .jw-disc__head:hover { color: var(--jw-ink); background: var(--jw-sunken); }
.jw-disc__chev {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .25s cubic-bezier(.2, .8, .3, 1);
	flex: none;
}
.jw-disc.is-open .jw-disc__chev { transform: rotate(225deg) translate(-2px, -2px); }

/* Prohibited items lead in red — it is the one list people skim past. */
.jw-disc--no { border-color: rgba(220, 38, 38, .35); }
.jw-app .jw-disc--no .jw-disc__head { color: var(--jw-bad); }
.jw-app .jw-disc--no .jw-disc__head:hover { color: #a01818; background: #fef5f5; }

.jw-disc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s cubic-bezier(.2, .8, .3, 1);
}
.jw-disc__panel > * { overflow: hidden; min-height: 0; }
.jw-disc.is-open .jw-disc__panel { grid-template-rows: 1fr; }
.jw-disc.is-open .jw-disc__panel > * { padding: 0 18px 18px; }

/* ---------------------------------------------------------- back a step */

.jw-backrow { margin-top: 16px; display: flex; }
.jw-app .jw-btn--back,
.jw-sheet .jw-btn--back {
	background-color: var(--jw-surface);
	background-image: none;
	color: var(--jw-primary);
	border-color: rgba(var(--jw-primary-rgb), .45);
	box-shadow: none;
	font-weight: 700;
}
.jw-app .jw-btn--back:hover {
	background-color: rgba(var(--jw-primary-rgb), .07);
	color: var(--jw-primary);
	border-color: var(--jw-primary);
	box-shadow: none;
}
@media (max-width: 520px) { .jw-backrow .jw-btn { width: 100%; } }

/* -------------------------------------------------------------- slider */

.jw-slides { position: absolute; inset: 0; }
.jw-slides img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .7s ease;
}
.jw-slides img.is-on { opacity: 1; }
.jw-slides__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	gap: 5px;
	justify-content: center;
	pointer-events: none;
}
.jw-slides__dots i {
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	transition: width .3s, background .3s;
}
.jw-slides__dots i.is-on { width: 16px; background: #fff; }

/* ------------------------------------------------------ gallery editor */

.jw-gal { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.jw-gal__item {
	position: relative;
	width: 92px;
	height: 92px;
	border-radius: var(--jw-r-sm);
	overflow: hidden;
	border: 1px solid var(--jw-line);
	background: var(--jw-sunken);
}
.jw-gal__item img { width: 100%; height: 100%; object-fit: cover; }
.jw-app .jw-gal__x {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 0;
	background: rgba(15, 19, 25, .68);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.jw-gal__cover {
	position: absolute;
	left: 4px;
	top: 4px;
	background: var(--jw-primary);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 3px 6px;
	border-radius: 999px;
}
.jw-app .jw-gal__first {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border: 0;
	background: rgba(15, 19, 25, .7);
	color: #fff;
	font-size: 10px;
	font-weight: 650;
	padding: 5px 4px;
	cursor: pointer;
}

/* ------------------------------------------------------------ add-ons */

.jw-addon {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--jw-line);
	border-radius: var(--jw-r);
	background: var(--jw-surface);
}
.jw-addon__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.jw-addon__label { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.jw-addon__note { font-size: 12.5px; color: var(--jw-muted); }
.jw-addon__price { font-weight: 750; font-size: 14px; white-space: nowrap; }
.jw-addon.is-on { border-color: var(--jw-primary); box-shadow: 0 0 0 3px rgba(var(--jw-primary-rgb), .12); }
.jw-addon.is-out { opacity: .5; }

/* ----------------------------------------------------- extras on a row */

.jw-extras { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.jw-extra {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(var(--jw-primary-rgb), .09);
	color: var(--jw-primary);
	white-space: nowrap;
}

.jw-verdict__extras {
	display: grid;
	gap: 8px;
	padding: 14px;
	border-radius: var(--jw-r);
	background: rgba(var(--jw-primary-rgb), .06);
	border: 1px solid rgba(var(--jw-primary-rgb), .22);
}
.jw-verdict__extra { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; }
.jw-verdict__qty {
	min-width: 34px;
	text-align: center;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--jw-primary);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
}

/* ------------------------------------------------- desk price breakdown */

.jw-mb-price {
	display: grid;
	gap: 2px;
	padding: 14px 16px;
	border-radius: var(--jw-r);
	background: var(--jw-sunken);
	border: 1px solid var(--jw-line);
}
.jw-mb-price__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
}
.jw-mb-price__main { min-width: 0; }
.jw-mb-price__label { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.jw-mb-price__detail { font-size: 12.5px; color: var(--jw-muted); }
.jw-mb-price__row--total {
	border-top: 1px dashed var(--jw-line);
	margin-top: 4px;
	padding-top: 12px;
	font-weight: 700;
}
.jw-mb-price__row--total strong { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }

/* -------------------------------------------------------- tappable KPI */

.jw-app .jw-kpi--tap { cursor: pointer; text-align: left; font: inherit; width: 100%; }
.jw-app .jw-kpi--tap:hover { border-color: #d5dae4; box-shadow: var(--jw-shadow-2); transform: translateY(-1px); }
.jw-app .jw-kpi--tap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 16px;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--jw-muted);
	border-bottom: 2px solid var(--jw-muted);
	transform: rotate(-45deg);
	opacity: .55;
}
.jw-app .jw-kpi { position: relative; transition: transform .15s, box-shadow .15s, border-color .15s; }

/* ------------------------------------------------------------ filters */

.jw-filters {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr;
	padding: 14px;
	border-radius: var(--jw-r);
	border: 1px solid var(--jw-line);
	background: var(--jw-surface);
	margin-bottom: 14px;
}
.jw-filters > * { min-width: 0; }
.jw-filters .jw-field > label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--jw-muted); }
.jw-filters__search { grid-column: 1 / -1; }
.jw-filters__actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
/* Phones: search full width, then the three pickers on one line, then the two
   dates on one line. */
@media (max-width: 759px) {
	.jw-filters { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 12px; }
	.jw-filters > .jw-field { grid-column: span 2; }
	.jw-filters__search { grid-column: 1 / -1; }
	.jw-filters .jw-field > label {
		font-size: 9.5px;
		letter-spacing: .04em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.jw-filters input[type="date"],
	.jw-filters select { padding: 10px 8px; font-size: 15px; min-height: 44px; }
	.jw-filters select { background-position: right 6px center; padding-right: 22px; }
	/* The two date fields share a line. */
	.jw-filters input[type="date"] { min-width: 0; }
	.jw-filters > .jw-field:has(input[type="date"]) { grid-column: span 3; }
}

@media (min-width: 760px) {
	.jw-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.jw-filters__search { grid-column: span 2; }
	.jw-filters__actions { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- phone polish */

/* Nothing that gets tapped should be smaller than a fingertip, and no tap
   should trigger the browser's double-tap zoom delay. */
.jw-app button,
.jw-app a,
.jw-app select,
.jw-app input,
.jw-sheet button,
.jw-sheet select,
.jw-sheet input { touch-action: manipulation; }

@media (max-width: 640px) {
	.jw-app .jw-h1 { font-size: 26px; }
	.jw-app .jw-lede { font-size: 15.5px; margin-bottom: 18px; }
	.jw-main { padding: 16px 14px 104px; }
	.jw-wrap { padding: 0 14px; }

	/* Sheet actions sit at the bottom of the screen where a thumb reaches. */
	.jw-sheet__body { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); }
	.jw-sheet .jw-btn-row { flex-direction: column; align-items: stretch; }
	.jw-sheet .jw-btn-row .jw-btn { width: 100%; }

	.jw-app .jw-item { padding: 12px; gap: 10px; }
	.jw-app .jw-item__title { font-size: 14.5px; }
	.jw-avatar { width: 38px; height: 38px; }

	.jw-sessions { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
	.jw-ticket__facts { grid-template-columns: 1fr 1fr; }
	.jw-ticket__fact:nth-child(2) { border-right: 0; }
	.jw-ticket__fact:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--jw-line-soft); }

	.jw-bar { flex-wrap: wrap; gap: 10px; }
	.jw-bar .jw-btn { width: 100%; }
	.jw-staff-panel__stats { gap: 6px; }
	.jw-staff-panel__stats strong { font-size: 22px; }
}

/* Landscape phones: the sheet must not swallow the whole screen. */
@media (max-height: 480px) and (orientation: landscape) {
	.jw-sheet { max-height: 96dvh; }
	.jw-scan__stage { aspect-ratio: 16 / 9; max-height: 54vh; }
}

/* ------------------------------------------------------------ motion off */

@media (prefers-reduced-motion: reduce) {
	.jw-app *,
	.jw-sheet,
	.jw-scrim { animation: none !important; transition-duration: .01ms !important; }
	.jw-scan__frame b { display: none; }
}

/* ------------------------------------------------------------------ print */

@media print {
	.jw-topbar, .jw-tabbar, .jw-bar, .jw-btn, .jw-toasts { display: none !important; }
	.jw-ticket { box-shadow: none; page-break-inside: avoid; margin-bottom: 18px; }
	body.jpws-fullscreen { background: #fff; }
}