/* ART LOG shared application theme.
 * Load after the legacy layout and artlog-theme.css. Keep the home-specific
 * stylesheet last; this file covers the other application and auth screens.
 */

/* Empty guidance uses the full section width, outside data-card layouts. */
body.artlog-app[data-page] main.main :is(.panel, .content-stack) .artlog-empty-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--al-ivory);
  text-align: left;
}

body.artlog-app[data-page] main.main :is(.panel, .content-stack) .artlog-empty-state p {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  color: var(--al-muted);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.75;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.artlog-app[data-page="profile"] main.main .panel .artlog-empty-state p {
  line-height: 1.6;
}

body.artlog-app[data-page="profile"] .profile-v3-info-card div:nth-child(3) strong {
  color: var(--al-indigo);
  background: var(--al-mist);
}

body.artlog-app[data-page="parks"] .parks-v2-pref-chips a {
  font-weight: 500;
}

body.artlog-app[data-page] main.main :is(.panel, .content-stack) .artlog-empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.artlog-app[data-page] main.main :is(.panel, .content-stack) .artlog-empty-state-actions .btn {
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-control);
  background: var(--al-white);
  color: var(--al-indigo);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
  text-decoration: none;
}

body.artlog-app[data-page] main.main :is(.profile-v3-visited-grid, .profile-v2-park-scroll) > a {
  min-width: 0;
}

@media (max-width: 360px) {
  body.artlog-app[data-page="profile"] main.main :is(.profile-v3-visited-grid, .profile-v2-park-scroll),
  body.artlog-app[data-page="timeline"] main.friend-profile-v2 .profile-v3-visited-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.artlog-app {
  --ink: var(--al-ink);
  --muted: var(--al-muted);
  --soft: var(--al-ivory);
  --paper: var(--al-white);
  --line: var(--al-line);
  --green: var(--al-sage);
  --blue: var(--al-indigo);
  --orange: var(--al-coral);
  --navy: var(--al-indigo);
  --dark: var(--al-indigo);
  --sky: #c9ddea;
  --sl-bg: var(--al-ivory);
  --sl-surface: var(--al-white);
  --sl-text: var(--al-ink);
  --sl-text-secondary: var(--al-muted);
  --sl-border: var(--al-line);
  --sl-primary: var(--al-indigo);
  --sl-accent-yellow: var(--al-gold);
  --sl-accent-aqua: #c9ddea;
  --sl-success: var(--al-sage);
  --sl-alert: var(--al-coral);
  --shadow: var(--al-shadow-card);
  --sl-shadow-sm: var(--al-shadow-card);
  --sl-shadow-md: var(--al-shadow-card);
  --sl-shadow-lg: 0 8px 24px rgba(65, 49, 27, .08);
  --cta-primary-bg: var(--al-indigo);
  --cta-primary-border: var(--al-indigo);
  --cta-secondary-bg: var(--al-white);
  --cta-secondary-color: var(--al-indigo);
  --cta-secondary-border: var(--al-line);
  --cta-primary-font-weight: 600;
  --cta-secondary-font-weight: 600;
  --cta-primary-height: 44px;
  --cta-secondary-height: 44px;
  color: var(--al-ink);
  background: var(--al-stone);
  font-family: var(--al-font-sans);
  line-height: 1.75;
}

body.artlog-app[data-page]:not(.artlog-home):not(.landing-page) > main.main {
  width: min(100%, 430px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 0;
  background: var(--al-ivory);
  box-shadow: none;
}

body.artlog-app[data-page]:not(.artlog-home) > main.main > .content-stack {
  gap: 20px;
  margin-inline: var(--al-gutter);
  padding: 0;
}

body.artlog-app[data-page] main.main > :is(
  .timeline-v2-hero, .checkin-v2-hero, .log-v2-hero, .gear-v2-hero,
  .badge-v2-hero, .favorite-parks-v2-hero, .parks-v2-hero,
  .notifications-v2-hero, .friend-log-v2-hero, .subpage-hero,
  .page-title, .member-lock, .park-photo-v2-hero, .parks-column-v2-hero,
  .guest-static-hero
) {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--al-gutter) 20px;
  border: 0;
  border-bottom: 1px solid var(--al-line);
  border-radius: 0;
  color: var(--al-ink);
  background: var(--al-ivory);
  box-shadow: none;
}

body.artlog-app[data-page] main.main > .profile-edit-v2-hero {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--al-gutter) 20px;
  border: 0;
  border-bottom: 1px solid var(--al-line);
  border-radius: 0;
  background: var(--al-ivory);
  box-shadow: none;
}

body.artlog-app[data-page] main.main > :is(
  .timeline-v2-hero, .checkin-v2-hero, .log-v2-hero, .gear-v2-hero,
  .badge-v2-hero, .favorite-parks-v2-hero, .parks-v2-hero,
  .notifications-v2-hero, .friend-log-v2-hero, .subpage-hero,
  .page-title, .member-lock, .park-photo-v2-hero, .parks-column-v2-hero
)::before,
body.artlog-app[data-page] main.main > :is(
  .timeline-v2-hero, .checkin-v2-hero, .log-v2-hero, .gear-v2-hero,
  .badge-v2-hero, .favorite-parks-v2-hero, .parks-v2-hero,
  .notifications-v2-hero, .friend-log-v2-hero, .subpage-hero,
  .page-title, .member-lock, .park-photo-v2-hero, .parks-column-v2-hero
)::after {
  content: none;
}

body.artlog-app[data-page] main :is(h1, h2, h3) {
  color: var(--al-indigo);
  font-family: var(--al-font-serif);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
}

body.artlog-app[data-page] main h1 {
  font-size: clamp(1.45rem, 6vw, 1.75rem);
}

body.artlog-app[data-page] main h2 {
  font-size: 1rem;
}

body.artlog-app[data-page] main :is(p, small) {
  font-weight: 400;
  line-height: 1.8;
}

body.artlog-app[data-page] main :is(strong, b) {
  font-weight: 600;
}

body.artlog-app[data-page] main :is(label, legend) {
  font-weight: 600;
}

body.artlog-app[data-page] :is(
  .subpage-title p, .timeline-v2-hero > p, .checkin-v2-lead,
  .log-v2-hero > p, .gear-v2-hero > p, .badge-v2-hero > p,
  .favorite-parks-v2-hero > p, .notifications-v2-hero > p,
  .friend-log-v2-hero > p, .section-head p
) {
  color: var(--al-muted);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.85;
}

body.artlog-app[data-page] :is(
  .timeline-v2-title-icon, .checkin-v2-title-icon, .log-v2-title-icon,
  .gear-v2-title-icon, .badge-v2-title-icon, .favorite-parks-v2-title-icon,
  .parks-v2-title-icon, .notifications-v2-title-icon,
  .friend-log-v2-title-icon, .subpage-title-icon, .park-photo-v2-title-icon,
  .parks-column-v2-title-icon, .profile-edit-v2-title-icon
) {
  border-radius: 12px;
  background: var(--al-indigo);
  box-shadow: none;
}

body.artlog-app[data-page] :is(
  .timeline-v2-title-icon, .checkin-v2-title-icon, .log-v2-title-icon,
  .gear-v2-title-icon, .badge-v2-title-icon, .favorite-parks-v2-title-icon,
  .parks-v2-title-icon, .notifications-v2-title-icon,
  .friend-log-v2-title-icon, .subpage-title-icon, .park-photo-v2-title-icon,
  .parks-column-v2-title-icon, .profile-edit-v2-title-icon
)::before {
  background-color: var(--al-white);
}

body.artlog-app[data-page] :is(
  .panel, .timeline-v2-card, .log-v2-card, .favorite-parks-v2-card,
  .profile-v2-park-card, .profile-v3-info-card, .friend-link-card,
  .friend-profile-v3-info-card, .friend-log-v2-card, .artwork-card,
  .checkin-v3-park-card, .checkin-v2-park-card, .gear-v2-board-card,
  .parks-v2-park-card, .park-photo-v2-target-card, .parks-column-v2-card,
  .yearly-summary-panel, .news-v2-list-panel, .faq-v2-panel
) {
  border-color: var(--al-line);
  border-radius: var(--al-radius-card);
  color: var(--al-ink);
  background-color: var(--al-white);
  box-shadow: var(--al-shadow-card);
}

body.artlog-app[data-page] :is(
  .section-head, .section-head.inline-head, .inline-head
) {
  align-items: center;
}

body.artlog-app[data-page] :is(
  .timeline-v2-filter-tabs, .log-v2-filter-tabs, .favorite-parks-v2-filter,
  .yearly-summary-switch
) a {
  border-color: var(--al-line);
  color: var(--al-muted);
  background: var(--al-white);
  box-shadow: none;
}

body.artlog-app[data-page] :is(
  .timeline-v2-filter-tabs, .log-v2-filter-tabs, .favorite-parks-v2-filter,
  .yearly-summary-switch
) a.active {
  border-color: var(--al-indigo);
  color: var(--al-indigo);
  background: #edf1f6;
}

body.artlog-app[data-page] :is(
  .btn, .cta-action, .profile-v3-see-all, .parks-v2-see-all,
  .checkin-v3-save-button, .badge-v2-save-button,
  .profile-edit-v2-actions button, .settings-v2-install-button
) {
  font-weight: 600;
  line-height: 1.5;
  box-shadow: none;
}

body.artlog-app[data-page] :is(
  .btn.primary, .cta-primary, .checkin-v3-save-button,
  .badge-v2-save-button, .profile-edit-v2-actions button,
  .parks-v2-search button, .park-detail-v2-primary
) {
  min-height: 44px;
  border-color: var(--al-indigo);
  background: var(--al-indigo);
  color: var(--al-white);
  box-shadow: none;
}

body.artlog-app[data-page] :is(.btn.ghost, .cta-secondary, .cta-ghost) {
  border-color: var(--al-line);
  background: var(--al-white);
  color: var(--al-indigo);
  box-shadow: none;
}

body.artlog-app[data-page] main :is(
  .field input:not(:is([type='checkbox'], [type='radio'], [type='hidden'])), .field select, .field textarea,
  .artwork-field input:not(:is([type='checkbox'], [type='radio'], [type='hidden'])), .artwork-field select, .artwork-field textarea,
  .profile-edit-v2-field input:not(:is([type='checkbox'], [type='radio'], [type='hidden'])), .profile-edit-v2-field select,
  .profile-edit-v2-field textarea, .search,
  .parks-v2-search, .friends-v2-search, .user-search-v2-form input
) {
  min-height: 44px;
  border-color: var(--al-line);
  border-radius: 12px;
  color: var(--al-ink);
  background: var(--al-white);
  font-weight: 400;
  box-shadow: none;
}

body.artlog-app :is(input, select, textarea) {
  accent-color: var(--al-indigo);
}

body.artlog-app :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(16, 45, 86, .3);
  outline-offset: 3px;
}

body.artlog-app[data-page] :is(
  .artwork-add-cta, .artwork-profile-empty, .art-profile-empty,
  .profile-yearly-summary-card, .artwork-revisit-context,
  .log-v2-summary-link,
  .checkin-v2-status-card, .checkin-v3-status-card,
  .favorite-parks-v2-empty, .timeline-v2-empty, .log-v2-empty,
  .checkin-v2-empty, .friends-v2-empty
) {
  border-color: var(--al-line);
  background: var(--al-ivory);
  color: var(--al-indigo);
  box-shadow: none;
}

body.artlog-app[data-page] .art-profile-card::before {
  background: var(--al-gold);
  height: 2px;
}

body.artlog-app[data-page] .profile-v3-section-icon.is-artwork {
  background: var(--al-indigo);
  mask: url('/assets/icons/bold/gallery-favorite.svg') center / contain no-repeat;
  -webkit-mask: url('/assets/icons/bold/gallery-favorite.svg') center / contain no-repeat;
}

body.artlog-app[data-page] .subpage-title-icon.is-artwork::before {
  mask: url('/assets/icons/bold/gallery-favorite.svg') center / contain no-repeat;
  -webkit-mask: url('/assets/icons/bold/gallery-favorite.svg') center / contain no-repeat;
}

body.artlog-app[data-page] :is(.art-profile-tags span, .favorite-artwork-tags small) {
  background: var(--al-ivory);
  color: var(--al-muted);
}

body.artlog-app[data-page] :is(.artwork-card-placeholder, .artwork-detail-placeholder) {
  background: var(--al-stone);
}

/* The default profile cover is an ART LOG gallery. Uploaded covers still use
 * their original image element, above the default background.
 */
body.artlog-app[data-page] :is(.profile-v2-cover, .friend-profile-v3-cover) {
  height: 168px;
  min-height: 168px;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(16, 45, 86, .45), rgba(16, 45, 86, .05)), url('/assets/artlog/hero-morning-gallery.jpg') center 54% / cover;
}

body.artlog-app[data-page] :is(.profile-v2-cover, .friend-profile-v3-cover)::before,
body.artlog-app[data-page] :is(.profile-v2-cover, .friend-profile-v3-cover)::after {
  content: none;
}

body.artlog-app[data-page] .profile-v3-hero-skater {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

body.artlog-app[data-page] .profile-v3-hero-skater[src$='/profile-cover-default.jpg'] {
  display: none;
}

body.artlog-app[data-page] .profile-v3-hero-skater[src$='/hero-morning-gallery.jpg'] {
  display: none;
}

body.artlog-app .small-avatar {
  background: var(--al-indigo);
  color: var(--al-white);
  box-shadow: none;
}

body.artlog-app[data-page] .profile-v3-cover-copy {
  display: grid;
  position: relative;
  z-index: 2;
  width: auto;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 24px 14px;
  color: var(--al-white);
  text-align: left;
  text-shadow: 0 1px 6px rgba(16, 45, 86, .3);
}

body.artlog-app[data-page] .profile-v3-cover-copy :is(span, strong) {
  color: inherit;
}

body.artlog-app[data-page] .profile-v3-cover-copy span {
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .12em;
  transform: none;
}

body.artlog-app[data-page] .profile-v3-cover-copy strong {
  display: block;
  max-width: 240px;
  font-family: var(--al-font-serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
}

body.artlog-app[data-page] .profile-v3-hero-actions {
  grid-template-columns: 1.2fr 1fr;
}

body.artlog-app[data-page] .profile-v3-hero-actions .cta-action {
  padding-inline: 8px;
  font-size: .75rem;
}

body.artlog-app[data-page] :is(.profile-v2-card, .friend-profile-v3-card) {
  background: var(--al-ivory);
  border-color: var(--al-line);
  box-shadow: none;
}

/* Fade the whole cover into the profile, including the area behind the name. */
body.artlog-app[data-page="profile"] .profile-v2-hero {
  background: var(--al-ivory);
}

body.artlog-app[data-page="profile"] .profile-v2-cover {
  height: clamp(224px, 58vw, 280px);
  min-height: 224px;
}

body.artlog-app[data-page="profile"] .profile-v2-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 124px;
  background: linear-gradient(180deg,
    rgba(250, 247, 240, 0) 0%,
    rgba(250, 247, 240, .08) 20%,
    rgba(250, 247, 240, .3) 40%,
    rgba(250, 247, 240, .65) 60%,
    rgba(250, 247, 240, .9) 80%,
    var(--al-ivory) 100%);
  pointer-events: none;
}

body.artlog-app[data-page="profile"] .profile-v2-card {
  margin-inline: 0;
  padding-inline: 12px;
  background: transparent;
}

body.artlog-app[data-page="profile"] .profile-v2-settings {
  right: 12px;
}

body.artlog-app[data-page] .profile-edit-v2-cover {
  display: block;
  background: url('/assets/artlog/hero-morning-gallery.jpg') center 54% / cover;
}

body.artlog-app[data-page="profile-edit"] .profile-edit-v2-privacy-group {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--al-ivory);
}

body.artlog-app[data-page="profile-edit"] .profile-edit-v2-privacy-group h3 {
  margin: 0 0 6px;
  font-size: .875rem;
  font-weight: 500;
}

body.artlog-app[data-page="profile-edit"] .profile-edit-v2-privacy-row {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.artlog-app[data-page="profile-edit"] .profile-edit-v2-privacy-row legend {
  margin-bottom: 6px;
}

body.artlog-app[data-page="profile-edit"] .profile-edit-v2-privacy-row legend strong {
  font-weight: 500;
}

body.artlog-app[data-page="profile-edit"] .profile-edit-v2-form .profile-edit-v2-privacy-group p.profile-edit-v2-privacy-description {
  margin: 0 0 12px;
  color: var(--al-muted);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.7;
}

body.artlog-app[data-page="profile-edit"] .profile-edit-v2-privacy-list {
  gap: 20px;
  margin-top: 16px;
}

body.artlog-app[data-page="profile-edit"] .profile-edit-v2-choice-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

body.artlog-app[data-page="profile-edit"] .profile-edit-v2-choice-grid span {
  min-height: 44px;
  font-size: .75rem;
  font-weight: 500;
}

body.artlog-app[data-page="profile-edit"] .profile-edit-v2-choice-grid input:focus-visible + span {
  outline: 2px solid var(--al-indigo);
  outline-offset: 3px;
}

body.artlog-app[data-page] .profile-edit-v2-cover img[src$='/profile-cover-default.jpg'] {
  display: none;
}

body.artlog-app[data-page] :is(.profile-v2-avatar, .friend-profile-v3-avatar) {
  border-color: var(--al-ivory);
  box-shadow: 0 0 0 1px var(--al-line);
}

body.artlog-app[data-page] :is(.profile-v2-stats, .art-profile-numbers, .profile-v3-summary-card) {
  border-color: var(--al-line);
  background: var(--al-white);
  box-shadow: none;
}

body.artlog-app[data-page] .yearly-summary-hero {
  min-height: 0;
  padding: 12px var(--al-gutter) 28px;
  background: var(--al-ivory);
}

body.artlog-app[data-page] .yearly-summary-hero::before,
body.artlog-app[data-page] .yearly-summary-hero::after {
  content: none;
}

body.artlog-app[data-page] .yearly-summary-hero-year {
  font-size: clamp(3.5rem, 16vw, 4.5rem);
}

body.artlog-app[data-page] .yearly-summary-hero-title {
  font-size: 1.5rem;
}

body.artlog-app[data-page] :is(.yearly-summary-stat-grid strong, .log-v2-hero-stats strong, .badge-v2-hero-stats strong) {
  color: var(--al-indigo);
  font-family: var(--al-font-serif);
  font-weight: 500;
}

body.artlog-app[data-page] .yearly-summary-share-status {
  color: var(--al-muted);
}

body.artlog-app[data-page] .yearly-summary-stat-grid article {
  box-shadow: var(--al-shadow-card);
}

/* Transparent badge art should sit directly on the page/card material. */
body.artlog-app[data-page] :is(.badge-v2-art, .profile-v3-badge-art, .home-v2-badge-progress-art) {
  background: transparent;
  box-shadow: none;
}

body.artlog-app[data-page] :is(.badge-v2-progress, .home-v2-badge-progress-bar) {
  background: var(--al-stone);
}

body.artlog-app[data-page] :is(.badge-v2-progress, .home-v2-badge-progress-bar) > span {
  background: var(--al-gold);
}

body.artlog-app[data-page="badge-collection"] .badge-v2-progress {
  background: transparent;
}

body.artlog-app[data-page="badge-collection"] .badge-v2-card.is-in-progress .badge-v2-art {
  background: transparent;
}

body.artlog-app[data-page="badge-collection"] .badge-v2-card.is-in-progress .badge-v2-art::after {
  content: none;
}

body.artlog-app[data-page="badge-collection"] .badge-v2-card.is-in-progress .badge-v2-art img {
  filter: none;
}

body.artlog-app[data-page="badge-collection"] .badge-v2-card.is-in-progress .badge-v2-progress em {
  background: linear-gradient(90deg, #079957, #15bd71);
}

body.artlog-app[data-page] .badge-v2-select-grid input:checked + span {
  border-color: var(--al-indigo);
  background: #edf1f6;
}

body.artlog-app[data-page] .badge-v2-select-grid label > span {
  border-color: var(--al-line);
  background: var(--al-ivory);
  box-shadow: none;
}

body.artlog-app[data-page] :is(.badge-v2-showcase, .badge-v2-card) {
  border-color: var(--al-line);
  background: var(--al-white);
  box-shadow: var(--al-shadow-card);
}

body.artlog-app[data-page]:not([data-page='access']):not([data-page='guest']) .bottom-nav {
  bottom: 0;
  width: min(100%, 430px);
  border-color: var(--al-line);
  border-radius: 0;
  background: rgba(250, 247, 240, .97);
  box-shadow: 0 -3px 14px rgba(65, 49, 27, .04);
}

body.artlog-app[data-page]:not([data-page='access']):not([data-page='guest']) .bottom-nav a,
body.artlog-app[data-page]:not([data-page='access']):not([data-page='guest']) .bottom-nav .bottom-checkin:not(.active) {
  color: var(--al-muted);
  font-weight: 500;
}

body.artlog-app[data-page]:not([data-page='access']):not([data-page='guest']) .bottom-nav a.active {
  color: var(--al-indigo);
  background: transparent;
  font-weight: 600;
}

body.artlog-app[data-page]:not([data-page='access']):not([data-page='guest']) .bottom-nav a::before {
  background-color: currentColor;
}

/* Onboarding and other shared auth screens use the same quiet entry styling.
 * Keep the admin's wider tables and desktop layout intact.
 */
body.artlog-app.auth-body:not(.admin-body) .auth-shell {
  width: min(100%, 430px);
  min-height: 100vh;
  background: var(--al-ivory);
  box-shadow: none;
}

body.artlog-app.auth-body:not(.admin-body) .auth-brand-link {
  justify-content: flex-start;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.artlog-app.auth-body .auth-card {
  border-color: var(--al-line);
  border-radius: var(--al-radius-card);
  background: var(--al-white);
  box-shadow: var(--al-shadow-card);
}

body.artlog-app.auth-body .auth-card :is(h1, h2, h3) {
  color: var(--al-indigo);
  font-family: var(--al-font-serif);
  font-weight: 500;
  line-height: 1.6;
}

body.artlog-app.auth-body .auth-card :is(p, label, small) {
  font-weight: 400;
  line-height: 1.8;
}

body.artlog-app.auth-body :is(.auth-button, .ob-nav a, .ob-options button) {
  min-height: 44px;
  font-weight: 600;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  body.artlog-app { scroll-behavior: auto; }
  body.artlog-app :is(a, button, input, select, textarea) { transition: none; }
}

/* Unknown GPS duration: an indeterminate bar, never a made-up percentage. */
body.artlog-app[data-page='checkin'] .checkin-location-loading {
  display: grid;
  gap: 8px;
  padding: 4px 2px 0;
  color: var(--al-indigo);
}

body.artlog-app[data-page='checkin'] .checkin-location-loading[hidden] {
  display: none;
}

body.artlog-app[data-page='checkin'] .checkin-location-loading > span {
  font-size: .8125rem;
  font-weight: 600;
}

body.artlog-app[data-page='checkin'] .checkin-location-loading > small {
  color: var(--al-muted);
  font-size: .75rem;
}

body.artlog-app[data-page='checkin'] .checkin-location-loading-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--al-stone);
}

body.artlog-app[data-page='checkin'] .checkin-location-loading-bar > i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--al-indigo);
  animation: artlog-location-loading 1.4s ease-in-out infinite;
}

@keyframes artlog-location-loading {
  from, to { transform: translateX(0); }
  50% { transform: translateX(150%); }
}

body.artlog-app[data-page='checkin'] .checkin-v2-status-card.is-locating > i::before {
  mask: url('/assets/icons/linear/gps.svg') center / contain no-repeat;
  -webkit-mask: url('/assets/icons/linear/gps.svg') center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  body.artlog-app[data-page='checkin'] .checkin-location-loading-bar > i {
    animation: none;
    margin-inline: auto;
  }
}

@media (max-width: 360px) {
  body.artlog-app[data-page] .profile-v3-hero-actions {
    grid-template-columns: 1fr;
  }
}

/* Museum registration shares ART LOG's calm form and notice colors. */
body.artlog-app[data-page='checkin'] .checkin-v2-register > .compact-link {
  margin: 8px 0 0;
  text-align: center;
}

body.artlog-app .artlog-museum-registration .subpage-title-icon::before {
  -webkit-mask-image: url('/assets/icons/linear/building-4.svg');
  mask-image: url('/assets/icons/linear/building-4.svg');
}
body.artlog-app .artlog-museum-registration .notice:not(.error),
body.artlog-app .artlog-museum-registration .auth-notice {
  border-color: var(--al-line);
  background: var(--al-ivory);
  color: var(--al-ink);
  font-weight: 400;
}
body.artlog-app .artlog-museum-registration .form-grid :is(input, textarea) {
  font-weight: 400;
}

body.artlog-app .artlog-registration-steps {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
body.artlog-app .artlog-registration-steps li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--al-line);
  text-align: left;
}
body.artlog-app .artlog-registration-steps li:last-child {
  border-bottom: 0;
}
body.artlog-app .artlog-registration-steps span {
  color: var(--al-gold);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.8;
}
body.artlog-app .artlog-registration-steps strong {
  min-width: 0;
  color: var(--al-ink);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.8;
  text-align: left;
}

/* One compact page-heading system for application screens. */
body.artlog-app[data-page] main :is(
  .timeline-v2-title, .checkin-v2-title, .log-v2-title, .gear-v2-title,
  .badge-v2-title, .favorite-parks-v2-title, .parks-v2-title,
  .notifications-v2-title, .friend-log-v2-title, .subpage-title,
  .park-photo-v2-title, .parks-column-v2-title, .profile-edit-v2-title,
  .guest-static-title
) {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
body.artlog-app[data-page] main :is(
  .timeline-v2-title, .checkin-v2-title, .log-v2-title, .gear-v2-title,
  .badge-v2-title, .favorite-parks-v2-title, .parks-v2-title,
  .notifications-v2-title, .friend-log-v2-title, .subpage-title,
  .park-photo-v2-title, .parks-column-v2-title, .profile-edit-v2-title,
  .guest-static-title
) > span {
  width: 42px;
  height: 42px;
  margin: 0;
  border: 0;
}
body.artlog-app[data-page] main :is(
  .timeline-v2-title, .checkin-v2-title, .log-v2-title, .gear-v2-title,
  .badge-v2-title, .favorite-parks-v2-title, .parks-v2-title,
  .notifications-v2-title, .friend-log-v2-title, .subpage-title,
  .park-photo-v2-title, .parks-column-v2-title, .profile-edit-v2-title,
  .guest-static-title
) > div {
  min-width: 0;
}
body.artlog-app[data-page] main :is(
  .timeline-v2-title, .checkin-v2-title, .log-v2-title, .gear-v2-title,
  .badge-v2-title, .favorite-parks-v2-title, .parks-v2-title,
  .notifications-v2-title, .friend-log-v2-title, .subpage-title,
  .park-photo-v2-title, .parks-column-v2-title, .profile-edit-v2-title,
  .guest-static-title
) > div > p:first-child {
  display: none;
}
body.artlog-app[data-page] main :is(
  .timeline-v2-title, .checkin-v2-title, .log-v2-title, .gear-v2-title,
  .badge-v2-title, .favorite-parks-v2-title, .parks-v2-title,
  .notifications-v2-title, .friend-log-v2-title, .subpage-title,
  .park-photo-v2-title, .parks-column-v2-title, .profile-edit-v2-title,
  .guest-static-title
) h1 {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin: 0;
  font-size: clamp(1.375rem, 5.8vw, 1.625rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
body.artlog-app[data-page] main :is(
  .timeline-v2-title, .checkin-v2-title, .log-v2-title, .gear-v2-title,
  .badge-v2-title, .favorite-parks-v2-title, .parks-v2-title,
  .notifications-v2-title, .friend-log-v2-title, .subpage-title,
  .park-photo-v2-title, .parks-column-v2-title, .profile-edit-v2-title,
  .guest-static-title
) > div > h1 + p {
  margin: 8px 0 0;
  font-size: .8125rem;
  line-height: 1.75;
}
body.artlog-app[data-page] main :is(
  .subpage-back, .notifications-v2-back, .badge-v2-back,
  .favorite-parks-v2-back, .profile-edit-v2-back, .park-photo-v2-back,
  .parks-column-v2-back, .park-detail-v2-back, .guest-static-back, .yearly-summary-back
) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--al-indigo);
  box-shadow: none;
  font-size: .8125rem;
  line-height: 1.4;
}
body.artlog-app[data-page] main :is(
  .subpage-back, .notifications-v2-back, .badge-v2-back,
  .favorite-parks-v2-back, .profile-edit-v2-back, .park-photo-v2-back,
  .parks-column-v2-back, .park-detail-v2-back, .guest-static-back, .yearly-summary-back
)::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  mask: url("/assets/icons/linear/arrow-left.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/linear/arrow-left.svg") center / contain no-repeat;
}

body.artlog-app[data-page="notifications"] .notifications-v2-item {
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  padding-block: 16px;
}
body.artlog-app[data-page="notifications"] .notifications-v2-icon {
  grid-row: 1 / 3;
  width: 56px;
  height: 56px;
}
body.artlog-app[data-page="notifications"] .notifications-v2-icon.has-badge-image {
  background: transparent;
}
body.artlog-app[data-page="notifications"] .notifications-v2-icon.has-badge-image::before {
  content: none;
}
body.artlog-app[data-page="notifications"] .notifications-v2-icon img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
body.artlog-app[data-page="notifications"] .notifications-v2-copy {
  gap: 6px;
}
body.artlog-app[data-page="notifications"] .notifications-v2-item em {
  grid-column: 2;
  margin: 0;
}

body.artlog-app[data-page] .faq-v2-list summary {
  font-weight: 400;
  line-height: 1.6;
}

/* Optional visit details: a few quick taps, without heavy labels. */
body.artlog-app[data-page="checkin"] .visit-context-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.artlog-app[data-page="checkin"] .visit-context-options label { flex: 1 0 auto; }
body.artlog-app[data-page="checkin"] .visit-context-options span {
  min-height: 44px;
  padding: 10px 12px;
  font-weight: 400;
  line-height: 1.4;
}
body.artlog-app[data-page="checkin"] .visit-context-options input:checked + span {
  border-color: var(--al-indigo);
  background: var(--al-indigo);
  color: #fff;
  font-weight: 400;
}
body.artlog-app[data-page="checkin"] .visit-context-options .visit-context-skip { flex: 0 0 auto; }
body.artlog-app[data-page="checkin"] .visit-context-skip span {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--al-muted);
  font-size: 12px;
}
body.artlog-app[data-page="checkin"] .visit-context-skip input:checked + span {
  border-color: transparent;
  background: #f6f3ed;
  color: var(--al-muted);
}
body.artlog-app[data-page="checkin"] .visit-context-options input:focus-visible + span {
  outline: 2px solid var(--al-indigo);
  outline-offset: 3px;
}
body.artlog-app[data-page="checkin"] .checkin-v3-option-group legend,
body.artlog-app[data-page="checkin"] .checkin-v3-note-field label,
body.artlog-app[data-page="checkin"] .checkin-v3-visibility legend { font-weight: 400; }
body.artlog-app[data-page="checkin"] .visit-context-intro {
  margin: 0;
  font-weight: 400;
  line-height: 1.7;
}
body.artlog-app[data-page] .faq-v2-answer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 12px 8px;
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Artwork choices follow the same quiet controls as the visit form. */
body.artlog-app[data-page] main.artwork-page .artwork-form :is(.artwork-feeling-options, .artwork-visibility-options) legend {
  margin-bottom: 8px;
  font-weight: 400;
}
body.artlog-app[data-page] main.artwork-page .artwork-form .artwork-feeling-options > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.artlog-app[data-page] main.artwork-page .artwork-form .artwork-feeling-options label {
  flex: 1 0 auto;
}
body.artlog-app[data-page] main.artwork-page .artwork-form .artwork-visibility-options > div:not(.artwork-visibility-help) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.artlog-app[data-page] main.artwork-page .artwork-form :is(.artwork-feeling-options, .artwork-visibility-options) label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-control);
  background: var(--al-white);
  color: var(--al-ink);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}
body.artlog-app[data-page] main.artwork-page .artwork-form .artwork-visibility-options label > span::after {
  content: none;
}
body.artlog-app[data-page] main.artwork-page .artwork-form :is(.artwork-feeling-options, .artwork-visibility-options) input:checked + span {
  border-color: var(--al-indigo);
  background: var(--al-indigo);
  color: var(--al-white);
  font-weight: 400;
}
body.artlog-app[data-page] main.artwork-page .artwork-form :is(.artwork-feeling-options, .artwork-visibility-options) input:focus-visible + span {
  outline: 2px solid var(--al-indigo);
  outline-offset: 3px;
}
body.artlog-app[data-page] main.artwork-page .artwork-form .artwork-feeling-options .artwork-feeling-skip {
  flex: 0 0 auto;
}
body.artlog-app[data-page] main.artwork-page .artwork-form .artwork-feeling-options .artwork-feeling-skip span,
body.artlog-app[data-page] main.artwork-page .artwork-form .artwork-feeling-options .artwork-feeling-skip input:checked + span {
  border-color: transparent;
  background: var(--al-ivory);
  color: var(--al-muted);
  box-shadow: none;
  font-size: .75rem;
}
body.artlog-app[data-page] main.artwork-page .artwork-form :is(.artwork-field, .artwork-field small, .artwork-feeling-options legend small) {
  font-weight: 400;
}
body.artlog-app[data-page] main.artwork-page .artwork-form .artwork-visibility-help {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
body.artlog-app[data-page] main.artwork-page .artwork-form .artwork-visibility-help p {
  margin: 0;
  color: var(--al-muted);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.7;
}