/*
 * TARC Club — component styles.
 *
 * Everything is driven by --tarc-* custom properties with sensible fallbacks,
 * so the components look right in any theme and pick up the club palette
 * automatically when the TARC theme (or a child theme) redefines the tokens.
 * Logical properties throughout, so Hebrew RTL needs no separate stylesheet.
 */

.tarc-timeline,
.tarc-archive,
.tarc-gallery,
.tarc-albums,
.tarc-album-head,
.tarc-loose-head,
.tarc-meetings,
.tarc-year-head,
.tarc-table-link,
.tarc-lesson,
.tarc-lesson-done,
.tarc-denied,
.tarc-events,
.tarc-members,
.tarc-boats,
.tarc-stats,
.tarc-signin {
	--tarc-ink: var(--tarc-color-ink, #101c19);
	--tarc-soft: var(--tarc-color-soft, #4a5a54);
	--tarc-faint: var(--tarc-color-faint, #78877f);
	--tarc-line: var(--tarc-color-line, #c6cfc7);
	--tarc-line-soft: var(--tarc-color-line-soft, #d8dfd8);
	--tarc-surface: var(--tarc-color-surface, #f5f7f3);
	--tarc-ground: var(--tarc-color-ground, #e7ebe7);
	--tarc-band: var(--tarc-color-band, #123a33);
	--tarc-on-band: var(--tarc-color-on-band, #dee9e2);
	--tarc-accent: var(--tarc-color-accent, #b8862f);
	--tarc-accent-ink: var(--tarc-color-accent-ink, #8a6417);
	--tarc-accent-wash: var(--tarc-color-accent-wash, #efe3c6);
	--tarc-good: var(--tarc-color-good, #2f7d5b);
	--tarc-good-wash: var(--tarc-color-good-wash, #dceae1);
	--tarc-warn: var(--tarc-color-warn, #9a6a16);
	--tarc-warn-wash: var(--tarc-color-warn-wash, #f2e6c8);
	--tarc-crit: var(--tarc-color-crit, #9c3a2c);
	--tarc-crit-wash: var(--tarc-color-crit-wash, #f0dcd7);
	--tarc-mono: var(--tarc-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
	--tarc-display: var(--tarc-font-display, Georgia, "Times New Roman", serif);
	--tarc-radius: var(--tarc-radius-base, 3px);
	color: var(--tarc-ink);
}

/* ---------- shared atoms ---------- */

.tarc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--tarc-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .18s, border-color .18s, color .18s;
}
.tarc-btn--solid { background: var(--tarc-band); color: var(--tarc-on-band); }
.tarc-btn--solid:hover { filter: brightness(1.12); color: var(--tarc-on-band); }
.tarc-btn--ghost { background: transparent; border-color: var(--tarc-line); color: var(--tarc-ink); }
.tarc-btn--ghost:hover { border-color: var(--tarc-accent); color: var(--tarc-accent-ink); }
.tarc-btn--sm { font-size: 13.5px; padding: 7px 13px; }
.tarc-btn[disabled] { opacity: .55; cursor: default; }

.tarc-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--tarc-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 2px;
	white-space: nowrap;
}
[dir="rtl"] .tarc-chip { letter-spacing: normal; }
.tarc-chip--free { background: var(--tarc-good-wash); color: var(--tarc-good); }
.tarc-chip--held { background: var(--tarc-warn-wash); color: var(--tarc-warn); }
.tarc-chip--out { background: var(--tarc-crit-wash); color: var(--tarc-crit); }

.tarc-field { display: grid; gap: 5px; }
.tarc-field > span {
	font-family: var(--tarc-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tarc-faint);
}
[dir="rtl"] .tarc-field > span { letter-spacing: normal; }
.tarc-field select,
.tarc-field input {
	font: inherit;
	font-size: 14.5px;
	color: var(--tarc-ink);
	background: var(--tarc-surface);
	border: 1px solid var(--tarc-line);
	border-radius: var(--tarc-radius);
	padding: 9px 12px;
	min-height: 40px;
}
.tarc-input-sm { max-width: 130px; }

.tarc-muted { color: var(--tarc-faint); font-size: 14px; margin: 0; }
.tarc-small { font-size: 13px; }
.tarc-empty { color: var(--tarc-faint); font-size: 15px; margin: 0; }

.tarc-note {
	background: var(--tarc-accent-wash);
	border-inline-start: 3px solid var(--tarc-accent);
	padding: 13px 16px;
	font-size: 14.5px;
	color: var(--tarc-soft);
}

/* ---------- stats ---------- */

.tarc-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--tarc-line-soft);
	border: 1px solid var(--tarc-line-soft);
}
.tarc-stat { background: var(--tarc-ground); padding: 24px 20px; display: grid; gap: 4px; }
.tarc-stat b {
	font-family: var(--tarc-display);
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.tarc-stat span {
	font-family: var(--tarc-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tarc-faint);
}
[dir="rtl"] .tarc-stat span { letter-spacing: normal; }

/* ---------- timeline ---------- */

.tarc-timeline { display: grid; }
.tarc-tl-item {
	display: grid;
	grid-template-columns: 118px 1fr;
	gap: 28px;
	padding-block: 26px;
	border-top: 1px solid var(--tarc-line-soft);
}
.tarc-tl-item:last-child { border-bottom: 1px solid var(--tarc-line-soft); }
.tarc-tl-year {
	font-family: var(--tarc-mono);
	font-size: 15px;
	color: var(--tarc-accent-ink);
	font-variant-numeric: tabular-nums;
	padding-top: 3px;
}
.tarc-tl-body { display: grid; gap: 7px; max-width: 62ch; }
.tarc-tl-body h3 { margin: 0; font-family: var(--tarc-display); font-size: 20px; }
.tarc-tl-body p { margin: 0; color: var(--tarc-soft); }

/* ---------- results table ---------- */

.tarc-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.tarc-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--tarc-line);
	border-radius: var(--tarc-radius);
	background: var(--tarc-surface);
}
.tarc-table { border-collapse: collapse; width: 100%; min-width: 700px; margin: 0; }
.tarc-table thead th {
	font-family: var(--tarc-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tarc-faint);
	font-weight: 500;
	text-align: start;
	padding: 13px 16px;
	border-bottom: 1px solid var(--tarc-line);
	background: var(--tarc-ground);
	white-space: nowrap;
}
[dir="rtl"] .tarc-table thead th { letter-spacing: normal; }
.tarc-table tbody td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--tarc-line-soft);
	font-size: 15px;
	vertical-align: baseline;
}
.tarc-table tbody tr:last-child td { border-bottom: 0; }
.tarc-num { font-family: var(--tarc-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.tarc-place b { font-family: var(--tarc-display); font-size: 17px; }
.tarc-place .tarc-first { color: var(--tarc-accent-ink); }

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

.tarc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tarc-shot {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--tarc-line);
	background: var(--tarc-surface);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.tarc-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tarc-shot figcaption {
	position: relative;
	display: grid;
	gap: 2px;
	/* Generous top padding so a caption that wraps to two lines still sits on
	   the dark end of the gradient rather than on open sky. */
	padding: 34px 14px 12px;
	background: linear-gradient(to top,
		rgba(6, 20, 17, .92) 0%,
		rgba(6, 20, 17, .78) 45%,
		rgba(6, 20, 17, 0) 100%);
	color: #eef4f0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.tarc-shot-year { font-family: var(--tarc-mono); font-size: 10.5px; opacity: .9; }
.tarc-shot-cap { font-size: 14px; line-height: 1.35; }
.tarc-shot-slot {
	position: absolute;
	inset-inline-start: 12px;
	top: 12px;
	font-family: var(--tarc-mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tarc-faint);
	border: 1px solid var(--tarc-line);
	padding: 2px 6px;
}
[dir="rtl"] .tarc-shot-slot { letter-spacing: normal; }

/* ---------- albums ---------- */

.tarc-albums {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.tarc-album {
	display: grid;
	grid-template-rows: auto 1fr;
	border: 1px solid var(--tarc-line);
	border-radius: var(--tarc-radius);
	background: var(--tarc-surface);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: border-color .18s, transform .18s;
}
.tarc-album:hover { border-color: var(--tarc-accent); transform: translateY(-2px); }
.tarc-album:focus-visible { outline: 3px solid var(--tarc-accent); outline-offset: 2px; }

.tarc-album-cover {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(135deg,
			color-mix(in srgb, currentColor 5%, transparent) 0 10px,
			transparent 10px 20px),
		var(--tarc-ground);
	overflow: hidden;
}
.tarc-album-cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.tarc-album:hover .tarc-album-cover img { transform: scale(1.04); }

.tarc-album-body { display: grid; gap: 6px; align-content: start; padding: 16px 18px 20px; }
.tarc-album-name { font-family: var(--tarc-display); font-size: 20px; font-weight: 700; line-height: 1.25; }
.tarc-album-meta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	font-family: var(--tarc-mono);
	font-size: 11.5px;
	color: var(--tarc-faint);
}

/* The album view */
.tarc-album-head { display: grid; gap: 8px; margin-bottom: 28px; }
.tarc-album-head .tarc-back { margin: 0; }
.tarc-album-title { font-family: var(--tarc-display); font-size: clamp(24px, 3.4vw, 34px); margin: 0; }
.tarc-album-sub {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
	font-family: var(--tarc-mono);
	font-size: 12px;
	color: var(--tarc-faint);
}
.tarc-album-desc { margin: 4px 0 0; color: var(--tarc-soft); max-width: 62ch; }

.tarc-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--tarc-accent-ink);
	text-decoration: none;
}
.tarc-back::before { content: "←"; }
[dir="rtl"] .tarc-back::before { content: "→"; }
.tarc-back:hover { text-decoration: underline; }

.tarc-loose-head {
	font-family: var(--tarc-display);
	font-size: 22px;
	margin: 40px 0 16px;
}

.tarc-forward {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--tarc-accent-ink);
	text-decoration: none;
}
.tarc-forward::after { content: "→"; }
[dir="rtl"] .tarc-forward::after { content: "←"; }
.tarc-forward:hover { text-decoration: underline; }

/* ---------- race meetings ---------- */

.tarc-year-head {
	font-family: var(--tarc-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tarc-soft);
	margin: 36px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--tarc-line-soft);
}
.tarc-year-head:first-child { margin-top: 0; }

.tarc-meetings {
	display: grid;
	gap: 10px;
	margin: 0 0 8px;
}

.tarc-meeting {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 16px;
	align-items: center;
	padding: 12px 16px;
	background: var(--tarc-surface);
	border: 1px solid var(--tarc-line-soft);
	border-radius: var(--tarc-radius);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.tarc-meeting:hover { border-color: var(--tarc-accent); background: var(--tarc-ground); }
.tarc-meeting:focus-visible { outline: 3px solid var(--tarc-accent); outline-offset: 2px; }

.tarc-meeting-thumb {
	display: block;
	inline-size: 64px;
	block-size: 48px;
	overflow: hidden;
	border-radius: var(--tarc-radius);
	background: var(--tarc-ground);
}
.tarc-meeting-thumb.is-blank {
	background: transparent;
	border: 1px solid var(--tarc-line-soft);
}
.tarc-meeting-thumb img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.tarc-meeting-body { display: grid; gap: 4px; min-width: 0; }
.tarc-meeting-name {
	font-family: var(--tarc-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}
.tarc-meeting-meta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-family: var(--tarc-mono);
	font-size: 11.5px;
	color: var(--tarc-soft);
}

.tarc-table-link { margin: 28px 0 0; }

/* ---------- turned away at sign-in ---------- */

.tarc-denied {
	background: var(--tarc-warn-wash);
	border-inline-start: 3px solid var(--tarc-warn);
	border-radius: var(--tarc-radius);
	padding: 22px 24px;
	margin-bottom: 26px;
	max-width: 640px;
	display: grid;
	gap: 12px;
}
.tarc-denied h3 {
	margin: 0;
	font-family: var(--tarc-display);
	font-size: 21px;
	line-height: 1.25;
}
.tarc-denied p { margin: 0; font-size: 15.5px; }
.tarc-denied-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- lesson request ---------- */

.tarc-lesson-form {
	background: var(--tarc-surface);
	border: 1px solid var(--tarc-line);
	border-radius: var(--tarc-radius);
	padding: 26px 26px 24px;
	max-width: 640px;
}

.tarc-lesson-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.tarc-lesson-grid .tarc-field input { width: 100%; }

.tarc-lesson-actions {
	display: grid;
	gap: 10px;
	margin-top: 22px;
}
.tarc-lesson-actions .tarc-btn { justify-self: start; }

.tarc-lesson-error {
	background: var(--tarc-crit-wash);
	border-inline-start: 3px solid var(--tarc-crit);
	color: var(--tarc-crit);
	padding: 12px 16px;
	margin: 0 0 18px;
	font-size: 15px;
	max-width: 640px;
}

.tarc-lesson-done {
	background: var(--tarc-good-wash);
	border-inline-start: 3px solid var(--tarc-good);
	border-radius: var(--tarc-radius);
	padding: 24px 26px;
	max-width: 640px;
	display: grid;
	gap: 10px;
}
.tarc-lesson-done h3 {
	margin: 0;
	font-family: var(--tarc-display);
	font-size: 22px;
}
.tarc-lesson-done p { margin: 0; }

/* Visible to a screen reader's tab order but not to the eye, because a bot
   that skips display:none still fills this in. */
.tarc-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 560px) {
	.tarc-lesson-grid { grid-template-columns: 1fr; }
	.tarc-lesson-form { padding: 20px; }
}

@media (max-width: 480px) {
	.tarc-meeting { grid-template-columns: 48px 1fr; gap: 12px; padding: 10px 12px; }
	.tarc-meeting-thumb { inline-size: 48px; block-size: 40px; }
	.tarc-meeting-name { font-size: 16px; }
}

@media (max-width: 900px) {
	.tarc-albums { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.tarc-albums { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.tarc-meeting { transition: none; }
	.tarc-album, .tarc-album-cover img { transition: none; }
	.tarc-album:hover { transform: none; }
	.tarc-album:hover .tarc-album-cover img { transform: none; }
}

/* Defined by most themes, repeated here so the plugin stands on its own. */
.tarc-shot-open .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* The whole tile is one button, so a click or Enter anywhere opens the
   photograph. Transparent until focused. */
.tarc-shot-open {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	appearance: none;
}
.tarc-shot-open:focus-visible {
	outline: 3px solid var(--tarc-accent);
	outline-offset: -3px;
}
.tarc-shot:hover img { transform: scale(1.03); }
.tarc-shot img { transition: transform .35s ease; }

@media (prefers-reduced-motion: reduce) {
	.tarc-shot img { transition: none; }
	.tarc-shot:hover img { transform: none; }
}

/* ---------- lightbox ---------- */

.tarc-lb-open, .tarc-lb-open body { overflow: hidden; }

.tarc-lb {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
}
.tarc-lb[hidden] { display: none; }

.tarc-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 16, 14, .95);
	/* Blur stops the gallery captions ghosting through behind the photograph. */
	backdrop-filter: blur(6px);
}

/* The inner box fills the screen so the photograph can be centred, which would
   otherwise swallow every click meant for the backdrop. Letting pointer events
   through means clicking the empty space around the picture closes the
   lightbox, as people expect. */
.tarc-lb-inner {
	position: relative;
	display: grid;
	place-items: center;
	padding: 56px 16px 24px;
	height: 100%;
	pointer-events: none;
}
.tarc-lb-figure,
.tarc-lb-btn { pointer-events: auto; }

.tarc-lb-figure {
	position: relative;
	margin: 0;
	display: grid;
	gap: 14px;
	justify-items: center;
	max-width: min(1200px, 92vw);
}

.tarc-lb-img {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	border-radius: 2px;
	background: rgba(255, 255, 255, .04);
	opacity: 0;
	transition: opacity .25s ease;
}
.tarc-lb-img.is-ready { opacity: 1; }

.tarc-lb-cap {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	color: #e6eee9;
	font-size: 15.5px;
	text-align: center;
	max-width: 70ch;
}
.tarc-lb-meta {
	display: inline-flex;
	gap: 14px;
	font-family: var(--tarc-mono, monospace);
	font-size: 12px;
	color: rgba(230, 238, 233, .6);
}

.tarc-lb-btn {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(230, 238, 233, .26);
	border-radius: 50%;
	background: rgba(8, 26, 22, .6);
	color: #e6eee9;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .18s, border-color .18s;
}
.tarc-lb-btn:hover { background: rgba(8, 26, 22, .95); border-color: rgba(230, 238, 233, .55); }
.tarc-lb-btn:focus-visible { outline: 2px solid var(--tarc-accent, #b8862f); outline-offset: 2px; }
.tarc-lb-btn[hidden] { display: none; }

.tarc-lb-close { top: 14px; inset-inline-end: 14px; font-size: 30px; }
.tarc-lb-prev { top: 50%; margin-top: -23px; inset-inline-start: 14px; }
.tarc-lb-next { top: 50%; margin-top: -23px; inset-inline-end: 14px; }

@media (max-width: 640px) {
	.tarc-lb-inner { padding: 52px 8px 16px; }
	.tarc-lb-img { max-height: 68vh; }
	.tarc-lb-cap { font-size: 14.5px; }
	.tarc-lb-prev { inset-inline-start: 6px; }
	.tarc-lb-next { inset-inline-end: 6px; }
}

/* ---------- events ---------- */

.tarc-events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarc-event {
	border: 1px solid var(--tarc-line);
	border-top: 3px solid var(--tarc-accent);
	background: var(--tarc-surface);
	border-radius: var(--tarc-radius);
	padding: 22px;
	display: grid;
	gap: 12px;
	align-content: start;
}
.tarc-event-date {
	font-family: var(--tarc-mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tarc-accent-ink);
}
[dir="rtl"] .tarc-event-date { letter-spacing: normal; }
.tarc-event h3 { margin: 0; font-family: var(--tarc-display); font-size: 21px; }
.tarc-event p { margin: 0; color: var(--tarc-soft); font-size: 15.5px; }
.tarc-event-meta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: var(--tarc-faint);
	border-top: 1px solid var(--tarc-line-soft);
	padding-top: 11px;
}

/* ---------- members and booking ---------- */

.tarc-signin {
	display: grid;
	gap: 22px;
	justify-items: start;
	max-width: 52ch;
	border: 1px solid var(--tarc-line);
	background: var(--tarc-surface);
	border-radius: var(--tarc-radius);
	padding: 32px;
}
.tarc-signin h3 { margin: 0 0 6px; font-family: var(--tarc-display); font-size: 22px; }
.tarc-oauth { display: grid; gap: 10px; width: 100%; }

/* Google draws its own button in an iframe and will not take our styling, so
   this only gives it room and keeps it on the correct side in Hebrew. */
.tarc-gsi { display: flex; justify-content: flex-start; min-height: 44px; }
.tarc-signin-alt { margin: 2px 0 0; }
.tarc-signin-alt a { color: var(--tarc-soft); text-decoration: underline; text-underline-offset: 3px; }
.tarc-signin-alt a:hover { color: var(--tarc-ink); }
.tarc-gsi > div { max-width: 100%; }
[dir="rtl"] .tarc-gsi { justify-content: flex-start; }

.tarc-member-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	border: 1px solid var(--tarc-line);
	background: var(--tarc-surface);
	border-radius: var(--tarc-radius);
	padding: 14px 18px;
	margin-bottom: 22px;
}
.tarc-member-bar .tarc-avatar { border-radius: 50%; flex: none; }
.tarc-who { display: grid; }
.tarc-who b { font-size: 15.5px; }
.tarc-who span { font-size: 13px; color: var(--tarc-faint); }
.tarc-member-bar > a:last-child { margin-inline-start: auto; }

.tarc-booking-grid { display: grid; grid-template-columns: 1fr 330px; gap: 30px; align-items: start; }
.tarc-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }

.tarc-boats { display: grid; gap: 10px; }
.tarc-boat {
	display: grid;
	grid-template-columns: 62px 1fr auto;
	gap: 16px;
	align-items: center;
	border: 1px solid var(--tarc-line);
	background: var(--tarc-surface);
	border-radius: var(--tarc-radius);
	padding: 14px 16px;
}
.tarc-boat.is-out { opacity: .62; }
.tarc-boat-no {
	font-family: var(--tarc-mono);
	font-size: 20px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	padding: 7px 0;
	background: var(--tarc-band);
	color: var(--tarc-on-band);
	border-radius: 2px;
}
.tarc-boat-id { display: grid; gap: 3px; }
.tarc-boat-id b { font-family: var(--tarc-display); font-size: 18px; }
.tarc-boat-id span { font-size: 13.5px; color: var(--tarc-faint); }
.tarc-boat-act { display: flex; align-items: center; gap: 10px; }

.tarc-panel {
	border: 1px solid var(--tarc-line);
	background: var(--tarc-surface);
	border-radius: var(--tarc-radius);
	padding: 20px;
	display: grid;
	gap: 16px;
	position: sticky;
	top: 90px;
}
.tarc-panel h3 { margin: 0; font-family: var(--tarc-display); font-size: 19px; }
.tarc-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tarc-slot {
	font-family: var(--tarc-mono);
	font-size: 13.5px;
	padding: 9px 6px;
	text-align: center;
	border: 1px solid var(--tarc-line);
	background: var(--tarc-ground);
	color: var(--tarc-ink);
	border-radius: 2px;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}
.tarc-slot[aria-pressed="true"] {
	background: var(--tarc-band);
	color: var(--tarc-on-band);
	border-color: var(--tarc-band);
}
.tarc-slot small { display: block; font-family: inherit; font-size: 11px; opacity: .75; }

.tarc-my { display: grid; gap: 8px; }
.tarc-mb {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: center;
	border: 1px solid var(--tarc-line-soft);
	border-inline-start: 3px solid var(--tarc-good);
	background: var(--tarc-ground);
	padding: 10px 12px;
	border-radius: 2px;
	font-size: 14px;
}
.tarc-mb b { font-weight: 600; }
.tarc-mb-when { display: block; font-family: var(--tarc-mono); font-size: 12.5px; color: var(--tarc-faint); }
.tarc-mb button {
	background: none;
	border: 0;
	color: var(--tarc-crit);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 6px;
}
.tarc-mb button:hover { text-decoration: underline; }

.tarc-toast {
	position: fixed;
	inset-block-end: 22px;
	inset-inline-start: 50%;
	transform: translateX(-50%) translateY(14px);
	background: var(--tarc-band);
	color: var(--tarc-on-band);
	padding: 12px 20px;
	border-radius: var(--tarc-radius);
	font-size: 14.5px;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	z-index: 900;
	max-width: 88vw;
	text-align: center;
}
.tarc-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.tarc-toast.is-error { background: var(--tarc-crit); color: #fff; }

/* ---------- language toggle ---------- */

.tarc-lang { display: inline-flex; border: 1px solid var(--tarc-line); border-radius: var(--tarc-radius); overflow: hidden; }
.tarc-lang a {
	font-family: var(--tarc-mono);
	font-size: 11.5px;
	letter-spacing: .08em;
	padding: 6px 10px;
	color: var(--tarc-faint);
	text-decoration: none;
}
[dir="rtl"] .tarc-lang a { letter-spacing: normal; }
.tarc-lang a.is-active { background: var(--tarc-band); color: var(--tarc-on-band); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.tarc-booking-grid { grid-template-columns: 1fr; gap: 28px; }
	.tarc-panel { position: static; }
	.tarc-events { grid-template-columns: 1fr 1fr; }
	.tarc-gallery { grid-template-columns: repeat(2, 1fr); }
	.tarc-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.tarc-events { grid-template-columns: 1fr; }
	.tarc-tl-item { grid-template-columns: 1fr; gap: 8px; }
	.tarc-boat { grid-template-columns: 54px 1fr; }
	.tarc-boat-act { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.tarc-toast, .tarc-btn { transition: none; }
}