/*
 * ScareSpots component library. Shared by the public site and the ScareSpots admin screens.
 * Colours, type, space, shape and motion come only from tokens.css. Class names are the ones the plugin
 * already renders (ss-button, ss-card, ss-badge, ss-notice, ss-hint, ss-error), so no markup had to change.
 * Contracts and every state are shown on the style board (shortcode [scarespots_styleboard], admin only).
 */

/* ---------- Base for ScareSpots screens ---------- */
.ss-admin { font-family: var(--ss-font-body); color: var(--ss-text); background: var(--ss-bg); }
.ss-admin *, .ss-admin *::before, .ss-admin *::after { box-sizing: border-box; }
.ss-admin h1, .ss-admin h2, .ss-admin h3 { font-family: var(--ss-font-display); font-weight: 600; line-height: var(--ss-leading-tight); color: var(--ss-text); }
.ss-admin a { color: var(--ss-link); }

:where(.ss-discover, .ss-profile, .ss-account, .ss-onboarding, .ss-press, .ss-admin, .ss-styleboard) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ss-focus);
	outline-offset: 2px;
}

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.ss-button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--ss-space-2);
	min-height: var(--ss-touch); padding: var(--ss-space-2) var(--ss-space-5);
	font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
	border: 2px solid var(--ss-accent); border-radius: var(--ss-radius-m);
	background: var(--ss-accent); color: var(--ss-on-accent);
	transition: background var(--ss-motion-fast) var(--ss-ease), border-color var(--ss-motion-fast) var(--ss-ease), transform var(--ss-motion-fast) var(--ss-ease);
}
.ss-button:hover { filter: brightness(1.08); }
.ss-button:active { transform: translateY(1px); }
.ss-button.ss-secondary { background: transparent; color: var(--ss-text); border-color: var(--ss-border); }
.ss-button.ss-secondary:hover { background: var(--ss-sunken); filter: none; }
.ss-button.ss-brand { background: var(--ss-brand); border-color: var(--ss-brand); color: var(--ss-on-brand); }
.ss-button.ss-danger { background: transparent; color: var(--ss-error); border-color: var(--ss-error); }
.ss-button.ss-ghost { background: transparent; border-color: transparent; color: var(--ss-link); text-decoration: underline; }
.ss-button.ss-small { min-height: 36px; padding: var(--ss-space-1) var(--ss-space-3); font-size: var(--ss-text-s); }
.ss-button[disabled], .ss-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
.ss-button.ss-loading { cursor: progress; position: relative; color: transparent; }
.ss-button.ss-loading::after {
	content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 50%;
	border: 2px solid var(--ss-on-accent); border-right-color: transparent; animation: ss-spin .8s linear infinite;
}
.ss-button.ss-secondary.ss-loading::after { border-color: var(--ss-text); border-right-color: transparent; }
@keyframes ss-spin { to { transform: rotate(360deg); } }

/* ---------- Form controls ---------- */
:where(.ss-form, .ss-onboarding, .ss-discover, .ss-account, .ss-review-form, .ss-admin) label { display: block; font-weight: 600; margin-bottom: var(--ss-space-1); }
:where(.ss-form, .ss-onboarding, .ss-discover, .ss-review-form, .ss-admin) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
	box-sizing: border-box; width: 100%; max-width: 100%; min-height: var(--ss-touch); padding: var(--ss-space-2) var(--ss-space-3);
	font: inherit; color: var(--ss-text); background: var(--ss-surface);
	border: 2px solid var(--ss-border); border-radius: var(--ss-radius-s);
}
.ss-discover select { width: auto; min-width: 12rem; }
:where(.ss-form, .ss-onboarding, .ss-discover, .ss-review-form, .ss-admin) :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--ss-error); }
:where(.ss-form, .ss-onboarding, .ss-discover, .ss-account, .ss-admin) input[type=checkbox] { width: 1.5rem; height: 1.5rem; margin-right: var(--ss-space-2); vertical-align: middle; accent-color: var(--ss-accent); }
.ss-check { display: flex; align-items: center; min-height: var(--ss-touch); flex-wrap: wrap; gap: var(--ss-space-2); }
.ss-check label { display: inline; margin: 0; }
.ss-field { margin-block: var(--ss-space-4); }
:where(.ss-form, .ss-onboarding, .ss-discover) fieldset { box-sizing: border-box; min-width: 0; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-m); padding: var(--ss-space-3) var(--ss-space-4); margin-block: var(--ss-space-5); }
:where(.ss-form, .ss-onboarding, .ss-discover) legend { font-weight: 700; padding-inline: var(--ss-space-1); }
.ss-search { display: flex; gap: var(--ss-space-2); }
.ss-search input { flex: 1; border-radius: var(--ss-radius-pill); padding-inline: var(--ss-space-4); }
.ss-hint { font-size: var(--ss-text-s); color: var(--ss-muted); margin: .125rem 0 .375rem; }
.ss-req { font-weight: 400; font-size: var(--ss-text-xs); color: var(--ss-muted); }
.ss-error { color: var(--ss-error); font-weight: 600; margin: var(--ss-space-1) 0; }

/* ---------- Alerts and notices ---------- */
.ss-notice, .ss-summary, .ss-moved {
	padding: var(--ss-space-3) var(--ss-space-4); background: var(--ss-surface); color: var(--ss-text);
	border: 1px solid var(--ss-border-soft); border-left: 4px solid var(--ss-accent); border-radius: var(--ss-radius-s);
}
.ss-notice:empty { display: none; }
.ss-notice.ss-success { border-left-color: var(--ss-success); background: var(--ss-success-bg); }
.ss-notice.ss-warning { border-left-color: var(--ss-warning); background: var(--ss-warning-bg); }
.ss-notice.ss-danger { border-left-color: var(--ss-error); background: var(--ss-error-bg); }
.ss-summary { border: 2px solid var(--ss-error); border-left-width: 4px; background: var(--ss-error-bg); margin-bottom: var(--ss-space-4); }

.ss-toast {
	position: fixed; right: var(--ss-space-4); bottom: var(--ss-space-4); z-index: var(--ss-z-toast);
	max-width: min(24rem, calc(100vw - 2rem)); padding: var(--ss-space-3) var(--ss-space-4);
	background: var(--ss-brand); color: var(--ss-on-brand); border-radius: var(--ss-radius-m); box-shadow: var(--ss-shadow-3);
}

/* ---------- Badges and statuses ---------- */
.ss-badge {
	display: inline-flex; align-items: center; gap: var(--ss-space-1); padding: .125rem var(--ss-space-3);
	border: 1px solid var(--ss-accent); border-radius: var(--ss-radius-pill);
	font-size: var(--ss-text-xs); font-weight: 600; line-height: 1.5; color: var(--ss-text); background: transparent;
}
.ss-badge.ss-success { border-color: var(--ss-success); color: var(--ss-success); }
.ss-badge.ss-warning { border-color: var(--ss-warning); color: var(--ss-warning); }
.ss-badge.ss-danger { border-color: var(--ss-error); color: var(--ss-error); }
.ss-badge.ss-neutral { border-color: var(--ss-border); color: var(--ss-muted); }
.ss-badge.ss-brand { background: var(--ss-brand); border-color: var(--ss-brand); color: var(--ss-on-brand); }
.ss-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }

/* ---------- Cards ---------- */
.ss-card {
	background: var(--ss-surface); color: var(--ss-text);
	border: 1px solid var(--ss-border-soft); border-radius: var(--ss-radius-m); padding: var(--ss-space-4);
	box-shadow: var(--ss-shadow-1);
	transition: box-shadow var(--ss-motion-base) var(--ss-ease), border-color var(--ss-motion-base) var(--ss-ease);
}
.ss-card:hover, .ss-card:focus-within { box-shadow: var(--ss-shadow-2); border-color: var(--ss-border); }
.ss-card h3 { margin: 0 0 var(--ss-space-1); font-family: var(--ss-font-display); font-size: var(--ss-text-l); line-height: var(--ss-leading-snug); }
.ss-card h3 a { color: var(--ss-text); text-decoration: none; }
.ss-card h3 a:hover { color: var(--ss-link); text-decoration: underline; }
.ss-card-media { margin: calc(var(--ss-space-4) * -1) calc(var(--ss-space-4) * -1) var(--ss-space-3); aspect-ratio: 3 / 2; background: var(--ss-sunken); border-radius: var(--ss-radius-m) var(--ss-radius-m) 0 0; overflow: hidden; display: grid; place-items: center; color: var(--ss-muted); }
.ss-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-meta { margin: 0; color: var(--ss-muted); font-size: var(--ss-text-s); }
.ss-card-row { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); margin-top: var(--ss-space-2); }

/* ---------- Empty states, skeletons ---------- */
.ss-empty { text-align: center; padding: var(--ss-space-7) var(--ss-space-4); border: 1px dashed var(--ss-border); border-radius: var(--ss-radius-m); color: var(--ss-muted); }
.ss-empty h3 { color: var(--ss-text); margin-top: 0; }
.ss-skeleton { display: block; border-radius: var(--ss-radius-s); background: linear-gradient(90deg, var(--ss-sunken) 25%, var(--ss-border-soft) 37%, var(--ss-sunken) 63%); background-size: 400% 100%; animation: ss-shimmer 1.4s ease infinite; min-height: 1rem; }
@keyframes ss-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Tables and data grids ---------- */
.ss-table { width: 100%; border-collapse: collapse; background: var(--ss-surface); }
.ss-table th, .ss-table td { text-align: left; padding: var(--ss-space-3); border-bottom: 1px solid var(--ss-border-soft); vertical-align: middle; }
.ss-table thead th { font-size: var(--ss-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ss-muted); background: var(--ss-sunken); position: sticky; top: 0; }
.ss-table tbody tr:hover { background: var(--ss-sunken); }
.ss-table-wrap { overflow-x: auto; border: 1px solid var(--ss-border-soft); border-radius: var(--ss-radius-m); }
@media (max-width: 600px) {
	.ss-table.ss-stack thead { position: absolute; left: -9999px; }
	.ss-table.ss-stack, .ss-table.ss-stack tbody, .ss-table.ss-stack tr, .ss-table.ss-stack td { display: block; width: 100%; }
	.ss-table.ss-stack tr { border: 1px solid var(--ss-border-soft); border-radius: var(--ss-radius-m); margin-bottom: var(--ss-space-3); padding: var(--ss-space-2); }
	.ss-table.ss-stack td { border: 0; padding: var(--ss-space-1) var(--ss-space-2); }
	.ss-table.ss-stack td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ss-muted); }
}

/* ---------- Tabs, breadcrumbs, pagination ---------- */
.ss-tabs { display: flex; gap: var(--ss-space-1); border-bottom: 1px solid var(--ss-border-soft); overflow-x: auto; }
.ss-tabs a, .ss-tabs button { min-height: var(--ss-touch); padding: var(--ss-space-2) var(--ss-space-4); border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; color: var(--ss-muted); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ss-tabs [aria-selected="true"], .ss-tabs [aria-current="page"] { color: var(--ss-text); border-bottom-color: var(--ss-accent); font-weight: 700; }
.ss-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); list-style: none; padding: 0; margin: 0 0 var(--ss-space-4); font-size: var(--ss-text-s); color: var(--ss-muted); }
.ss-breadcrumb li + li::before { content: "/"; margin-right: var(--ss-space-2); }
.ss-pagination { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); list-style: none; padding: 0; }
.ss-pagination a, .ss-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ss-touch); min-height: var(--ss-touch); padding: 0 var(--ss-space-3); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-s); text-decoration: none; color: var(--ss-text); }
.ss-pagination [aria-current="page"] { background: var(--ss-brand); color: var(--ss-on-brand); border-color: var(--ss-brand); }

/* ---------- Modal and drawer (styles only, behaviour is added where used) ---------- */
.ss-overlay { position: fixed; inset: 0; background: var(--ss-overlay); z-index: var(--ss-z-modal); display: grid; place-items: center; padding: var(--ss-space-4); }
.ss-modal { background: var(--ss-surface); color: var(--ss-text); border-radius: var(--ss-radius-l); box-shadow: var(--ss-shadow-3); padding: var(--ss-space-5); width: min(32rem, 100%); max-height: 90vh; overflow: auto; }
.ss-drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(24rem, 100%); background: var(--ss-surface); color: var(--ss-text); box-shadow: var(--ss-shadow-3); padding: var(--ss-space-5); z-index: var(--ss-z-drawer); overflow: auto; }

/* ---------- Ratings, galleries, legend, upload ---------- */
.ss-rating { font-size: var(--ss-text-l); }
.ss-rating strong { font-family: var(--ss-font-display); font-size: var(--ss-text-xl); }
.ss-stars-display { color: var(--ss-accent); letter-spacing: .1em; }
.ss-gallery { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--ss-space-3); }
.ss-gallery img { width: 100%; height: auto; border-radius: var(--ss-radius-m); display: block; }
.ss-legend { display: flex; flex-wrap: wrap; gap: var(--ss-space-4); list-style: none; padding: 0; font-size: var(--ss-text-s); color: var(--ss-muted); }
.ss-upload { border: 2px dashed var(--ss-border); border-radius: var(--ss-radius-m); padding: var(--ss-space-5); text-align: center; background: var(--ss-surface); }
.ss-upload:focus-within { border-color: var(--ss-focus); }

@media (prefers-reduced-motion: reduce) {
	.ss-button, .ss-card { transition: none; }
	.ss-skeleton, .ss-button.ss-loading::after { animation: none; }
}

/* D4: panel (a titled block on the page) and calmer checkbox labels. */
.ss-panel{background:var(--ss-surface);border:1px solid var(--ss-border-soft);border-radius:var(--ss-radius-m);padding:var(--ss-space-4) var(--ss-space-5);box-shadow:var(--ss-shadow-1)}
.ss-panel>h2:first-child{margin-top:0}
.ss-check>label{font-weight:500}
[tabindex="-1"]:focus{outline:none}

/* Touch size for checkbox rows */
.ss-check input[type=checkbox]{width:1.25rem;height:1.25rem;flex:none}
.ss-check>label{display:inline-flex;align-items:center;min-height:var(--ss-touch)}

/* 0.57.8: ScareSpots silhouettes as map and legend symbols, drawn as a mask in the current text colour */
.ss-gi{display:inline-block;flex:none;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.ss-gi-house{-webkit-mask-image:url(img/pin-walkthrough.png);mask-image:url(img/pin-walkthrough.png)}
.ss-gi-walkthrough{-webkit-mask-image:url(img/pin-walkthrough.png);mask-image:url(img/pin-walkthrough.png)}
.ss-gi-trail,.ss-gi-haunted_trail{-webkit-mask-image:url(img/pin-haunted_trail.png);mask-image:url(img/pin-haunted_trail.png)}
.ss-gi-flag,.ss-gi-event{-webkit-mask-image:url(img/pin-event.png);mask-image:url(img/pin-event.png)}
.ss-gi-hidden{-webkit-mask-image:url(img/pin-hidden.png);mask-image:url(img/pin-hidden.png)}
.ss-pin span.ss-gi,.ss-pin-demo span.ss-gi{background:currentColor;border:0;border-radius:0;box-shadow:none;transform:none;color:inherit}

/* 0.57.10: skulls instead of stars for ratings */
.ss-skulls{display:inline-flex;align-items:center;gap:.12em;vertical-align:-.12em;letter-spacing:0}
.ss-skull{display:inline-block;flex:none;width:1.05em;height:1.05em;background-color:currentColor;-webkit-mask:url(img/skull.png) center/contain no-repeat;mask:url(img/skull.png) center/contain no-repeat}
.ss-skull-off{opacity:.3}
.ss-stars label .ss-skull{width:1.1rem;height:1.1rem}
.ss-stars label>span[aria-hidden]{display:inline-flex;align-items:center;gap:.1em}