/* ============================================================
   vibemuseo - base stylesheet (STRUCTURE ONLY)

   Layout, spacing rules and component anatomy live here and are
   shared by every theme. Colours, fonts, radii and shadows come
   from the theme file loaded before this one — see
   public/css/themes/ and config/themes.php.

   Rule of thumb: if changing a value would change how the site
   FEELS rather than how it WORKS, it belongs in the theme.
   ============================================================ */

/* ---------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;

  /* Sticky footer: the body fills the viewport and .main takes up the
     slack, so a short page still pins the footer to the bottom rather
     than leaving it floating mid-screen. */
  min-height: 100vh;
  min-height: 100dvh;  /* accounts for mobile browser chrome */
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; display: block; }
a   { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-w) solid var(--border);
}

.header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .85rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header__brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: var(--tracking-head);
}
.header__brand:hover { text-decoration: none; }

.header__mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  /* The frame picks up the brand colour; the canvas gradient is
     defined in the SVG itself so it stays violet in every theme. */
  color: var(--text);
  overflow: visible;
}

.header__nav {
  display: flex;
  gap: .25rem;
  margin-right: auto;
  /* Hidden at every width, not just in the mobile block: the nav scrolls
     when the links outgrow the space, and a visible bar under it reads as
     a stray artifact rather than an affordance. Same treatment as .tabs. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.header__nav::-webkit-scrollbar { display: none; }

.header__link {
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
}
.header__link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.header__link.is-active { color: var(--text); background: var(--surface-2); }

.header__actions { display: flex; align-items: center; gap: .5rem; }
.header__logout { margin: 0; }

.header__avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-avatar, 50%);
  overflow: hidden;
  background: var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
}
.header__avatar img { width: 100%; height: 100%; object-fit: cover; }
.header__avatar:hover { text-decoration: none; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .45rem .9rem;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.4;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--accent); color: var(--accent-text); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost { border-color: var(--border); background: var(--surface); }
.btn--ghost:hover { background: var(--surface-2); }

/* Destructive actions. Outlined rather than filled: a solid red button
   next to a normal one invites the misclick it is warning about. */
.btn--danger { border-color: var(--danger); background: transparent; color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg); }

.btn--icon { padding: .45rem .55rem; border-color: var(--border); background: var(--surface); }
.btn--icon:hover { background: var(--surface-2); }

.icon { display: block; flex-shrink: 0; }

.btn--lg    { padding: .65rem 1.4rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------- layout */

.main {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-page) var(--gutter);
  flex: 1 0 auto;  /* absorbs the slack, pushing the footer down */
}

/* ---------------------------------------------------------- flash */

.flash {
  max-width: var(--maxw);
  margin: 1rem auto 0;
  padding: .7rem var(--gutter);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 500;
}
.flash--success { background: var(--success-bg); color: var(--success); }
.flash--error   { background: var(--danger-bg);  color: var(--danger); }

.alert {
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: .9rem;
}
.alert--error { background: var(--danger-bg); color: var(--danger); }
.alert__list  { margin: 0; padding-left: 1.1rem; }

/* ---------------------------------------------------------- hero */

.hero { text-align: center; padding: 3rem 0 2.5rem; }

.hero__title {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  margin: 0 0 .6rem;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-head);
  font-weight: 800;
}

.hero__lede {
  margin: 0 auto;
  max-width: 34rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.hero__actions { display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }

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

.tabs {
  display: flex;
  gap: .25rem;
  border-bottom: var(--border-w) solid var(--border);
  margin-bottom: 1.5rem;

  /* Tabs still scroll when they outgrow the width on narrow screens,
     but the bar itself is hidden: it appeared on hover over the strip
     and read as a stray artifact rather than an affordance. */
  overflow-x: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge */
}
.tabs::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

.tabs__tab {
  padding: .6rem .9rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .92rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--text); text-decoration: none; }
.tabs__tab.is-active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------- grid + empty */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* An inline aside explaining why a page shows what it shows. */
.notice {
    margin: 1rem 0 0;
    padding: .7rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .85rem;
    color: var(--text-muted);
    background: var(--surface-2, transparent);
}

.notice--quiet { text-align: center; }

.empty {
  text-align: center;
  padding: 4rem 1rem;
  border: var(--border-w) dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.empty__title { margin: 0 0 .35rem; font-weight: 700; font-size: 1.05rem; }
.empty__body  { margin: 0; color: var(--text-muted); }

/* ---------------------------------------------------------- forms */

.auth {
  max-width: 26rem;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.auth__title { font-family: var(--font-head); margin: 0 0 .3rem; font-size: 1.5rem; letter-spacing: var(--tracking-head); }
.auth__lede  { margin: 0 0 1.5rem; color: var(--text-muted); font-size: .95rem; }
.auth__alt   { margin: 1.25rem 0 0; text-align: center; font-size: .9rem; color: var(--text-muted); }

.field { margin-bottom: 1rem; }

.field__label {
  display: block;
  margin-bottom: .3rem;
  font-weight: 600;
  font-size: .88rem;
}

.field__input {
  width: 100%;
  padding: .55rem .7rem;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
}
.field__input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }

.field__hint { margin: .3rem 0 0; font-size: .8rem; color: var(--text-muted); }

.field--check { margin: 1.25rem 0; }

.check { display: flex; gap: .55rem; align-items: flex-start; font-size: .87rem; color: var(--text-muted); cursor: pointer; }
.check input { margin-top: .25rem; flex-shrink: 0; accent-color: var(--accent); }

/* ---------------------------------------------------------- error page */

.error-page { text-align: center; padding: 5rem 1rem; }
.error-page__code    { font-size: 3.5rem; font-weight: 800; color: var(--accent); margin: 0; letter-spacing: -.04em; }
.error-page__title   { margin: .25rem 0 .5rem; font-size: 1.35rem; }
.error-page__message { color: var(--text-muted); margin: 0 0 1.75rem; }

/* ---------------------------------------------------------- footer */

.footer {
  flex-shrink: 0;
  border-top: var(--border-w) solid var(--border);
  background: var(--surface);
}

.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--text-muted);
}

.footer__note { margin: 0; }
.footer__nav  { display: flex; gap: 1rem; }
.footer__nav a { color: var(--text-muted); }


/* ---------------------------------------------------------- page head */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.page-head__title { font-family: var(--font-head); margin: 0; font-size: 1.75rem; letter-spacing: var(--tracking-head); }

.page-head__filter {
  margin: 0;
  align-self: flex-end;
  font-size: .88rem;
  color: var(--text-muted);
}
.page-head__clear { margin-left: .4rem; font-weight: 600; }
.page-head__lede  { margin: .2rem 0 0; color: var(--text-muted); }

/* ---------------------------------------------------------- search bar */

.searchbar { display: flex; gap: .5rem; }
.searchbar--wide { margin-bottom: 1.5rem; }

.searchbar__input {
  padding: .5rem .75rem;
  font: inherit;
  font-size: .92rem;
  color: var(--text);
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 15rem;
}
.searchbar--wide .searchbar__input { flex: 1; min-width: 0; }
.searchbar__input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* ---------------------------------------------------------- avatar */

.avatar {
  display: grid;
  place-items: center;
  border-radius: var(--radius-avatar, 50%);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar--lg { width: 44px; height: 44px; font-size: 1.05rem; }
.avatar--xl { width: 88px; height: 88px; font-size: 2rem; border: 3px solid var(--surface); }

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

.artist-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.artist-card {
  padding: 1.1rem;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s ease, transform .15s ease;
}
.artist-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.artist-card__head { display: flex; align-items: center; gap: .75rem; color: var(--text); }
.artist-card__head:hover { text-decoration: none; }

.artist-card__names  { display: flex; flex-direction: column; min-width: 0; }
.artist-card__name   { font-size: .98rem; letter-spacing: -.01em; }
.artist-card__handle { color: var(--text-muted); font-size: .84rem; }

.artist-card__bio {
  margin: .7rem 0 0;
  color: var(--text-muted);
  font-size: .88rem;
  /* Two lines, then ellipsis - keeps every card the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.artist-card__stats {
  margin: .8rem 0 0;
  display: flex;
  gap: 1rem;
  font-size: .84rem;
  color: var(--text-muted);
}
.artist-card__stats strong { color: var(--text); }

/* ---------------------------------------------------------- profile */

.profile { margin-bottom: 1.5rem; }

.profile__banner {
  height: 180px;
  border-radius: var(--radius);
  background: var(--banner);
  background-size: cover;
  background-position: center;
}

.profile__head {
  display: flex;
  /* Centred against each other so the avatar and the name read as one
     row, rather than the avatar floating above the text. */
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem 0;
  flex-wrap: wrap;
}

/* A small overlap keeps the avatar tied to the banner without lifting it
   clear of the name. The text itself never overlaps: over a light banner
   there is no text colour that stays readable against an arbitrary
   user-supplied image. */
.profile__head .avatar--xl { margin-top: -28px; }

.profile__identity {
  flex: 1;
  min-width: 0;
}

.profile__name     { margin: 0; font-size: 1.5rem; letter-spacing: var(--tracking-head); }
.profile__handle   { margin: .1rem 0 0; color: var(--text-muted); font-size: .9rem; }
.profile__actions  { align-self: center; }

.profile__bio {
  margin: 1rem 0 0;
  padding: 0 1rem;
  max-width: 42rem;
  color: var(--text);
}

.profile__stats {
  margin: .9rem 0 0;
  padding: 0 1rem;
  display: flex;
  gap: 1.25rem;
  font-size: .9rem;
  color: var(--text-muted);
}
.profile__stats strong { color: var(--text); }

.profile__links {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0 1rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.chip {
  display: inline-block;
  padding: .25rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-pill);
}
.chip:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }

/* ---------------------------------------------------------- pager */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.pager__page { font-size: .88rem; color: var(--text-muted); }

/* ---------------------------------------------------------- prose */

.prose {
  max-width: 42rem;
  margin: 0 auto;
}

.prose h1 { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 1.9rem; letter-spacing: var(--tracking-head); margin: 0 0 .5rem; }
.prose h2 { font-family: var(--font-head); font-weight: var(--weight-head); font-size: 1.15rem; letter-spacing: var(--tracking-head); margin: 2rem 0 .5rem; }
.prose p  { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin-bottom: .4rem; }

.prose__lede { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; }
.prose__meta { font-size: .85rem; color: var(--text-muted); }
.prose__cta  { margin-top: 2rem; }

.callout {
  padding: .9rem 1.1rem;
  margin: 0 0 1.75rem;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.callout p { margin: 0; }


/* ---------------------------------------------------------- global search */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gsearch {
  position: relative;
  flex: 1 1 auto;
  max-width: 26rem;
  min-width: 0;
}

.gsearch__icon {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.gsearch__input {
  width: 100%;
  padding: .45rem 2rem .45rem 2.1rem;
  font: inherit;
  font-size: .9rem;
  color: var(--text);
  background: var(--surface-2);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-pill);
}
.gsearch__input::placeholder { color: var(--text-muted); }
.gsearch__input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
}
/* The browser's own clear button would sit on top of ours. */
.gsearch__input::-webkit-search-cancel-button { display: none; }

/* [hidden] must win over display:grid, or an empty field still shows an X. */
.gsearch__clear[hidden] { display: none; }

.gsearch__clear {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-avatar, 50%);
  cursor: pointer;
}
.gsearch__clear:hover { color: var(--text); background: var(--surface-2); }

/* ---------------------------------------------------------- dropdown */

.gsearch__panel {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 70vh;
  overflow-y: auto;
  padding: .35rem;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.gsearch__group {
  margin: .4rem .5rem .2rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

.gsearch__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .5rem;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.gsearch__item:hover,
.gsearch__item.is-active {
  background: var(--surface-2);
  text-decoration: none;
}

.gsearch__thumb { width: 30px; height: 30px; font-size: .78rem; }

.gsearch__text { display: flex; flex-direction: column; min-width: 0; }

.gsearch__name {
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gsearch__meta { font-size: .78rem; color: var(--text-muted); }

.gsearch__none {
  margin: 0;
  padding: 1rem .6rem;
  text-align: center;
  font-size: .88rem;
  color: var(--text-muted);
}

.gsearch__all {
  display: block;
  margin-top: .25rem;
  padding: .5rem;
  text-align: center;
  font-size: .84rem;
  font-weight: 600;
  border-top: var(--border-w) solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.gsearch__all:hover { background: var(--surface-2); text-decoration: none; }

/* ---------------------------------------------------------- search page */

.search-group { margin-bottom: 2.5rem; }

.search-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}

.search-group__title { font-family: var(--font-head); margin: 0; font-size: 1.1rem; letter-spacing: var(--tracking-head); }

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

@media (max-width: 720px) {
  .header__inner  { flex-wrap: wrap; gap: .75rem; }
  .header__nav {
    order: 3;
    width: 100%;
    margin-right: 0;
    overflow-x: auto;
    /* Repeated here alongside overflow-x. Declared only in the base rule,
       it did not take effect - the scrolling context is established by this
       block, and the hint has to accompany it. */
    scrollbar-width: none;
  }
  .header__actions { margin-left: auto; }
  .header__logout  { display: none; }
  .main { padding: 1.5rem 1rem 3rem; }
  .auth { padding: 1.5rem; margin: 1rem auto; }

  .page-head        { align-items: stretch; }
  .searchbar        { width: 100%; }
  .searchbar__input { flex: 1; min-width: 0; }

  /* Full-width search on its own row, above the nav. */
  .gsearch { order: 2; flex-basis: 100%; max-width: none; }

  .profile__banner  { height: 120px; }
  .profile__head    { padding: .6rem .25rem 0; }
  .profile__head .avatar--xl { margin-top: -22px; }
  .profile__bio,
  .profile__stats,
  .profile__links   { padding: 0 .25rem; }
  .profile__actions { width: 100%; padding-top: .5rem; }
  .profile__actions .btn { width: 100%; }
}


/* ---------------------------------------------------------- upload */

.upload { max-width: 40rem; }

.dropzone {
  display: block;
  position: relative;
  padding: 2rem 1.25rem;
  margin-bottom: 1.5rem;
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover,
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.has-file { padding: 1rem; border-style: solid; }
.dropzone.is-error { border-color: var(--danger); }

/* Visually hidden, but still focusable and still submitted. */
.dropzone__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dropzone__input:focus-visible + .dropzone__empty { outline: 2px solid var(--accent); outline-offset: 4px; }

.dropzone__title { margin: .6rem 0 .2rem; font-weight: 600; }
.dropzone__hint  { margin: 0; font-size: .84rem; color: var(--text-muted); }

.dropzone__preview img {
  max-height: 320px;
  margin: 0 auto .75rem;
  border-radius: var(--radius-sm);
}

.dropzone__meta {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--text-muted);
  margin-bottom: .6rem;
}
.dropzone__dims { font-variant-numeric: tabular-nums; }

.btn--sm { padding: .3rem .6rem; font-size: .82rem; }

.field__opt   { font-weight: 400; color: var(--text-muted); font-size: .82rem; }
.field__check { margin-top: .5rem; }

textarea.field__input { resize: vertical; min-height: 4.5rem; font-family: inherit; }

/* ---------------------------------------------------------- artwork */

.artwork { max-width: 62rem; margin: 0 auto; }

.artwork__figure {
  position: relative;
  margin: 0 0 1.5rem;
  text-align: center;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
}

.artwork__image {
  /* Cap by viewport height so the title and metadata stay reachable
     without scrolling past a tall image. */
  max-height: min(70vh, 720px);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

/* Courtesy blur only - the image is still delivered. Anything needing
   real restriction has to be filtered server-side. */
.artwork__figure.is-blurred .artwork__image { filter: blur(28px); transform: scale(1.05); }

.artwork__reveal {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content; height: max-content;
  padding: .55rem 1rem;
  font: inherit;
  font-weight: 600;
  font-size: .88rem;
  color: var(--text);
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.artwork__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.artwork__title   { margin: 0; font-family: var(--font-head); font-size: 1.5rem; letter-spacing: var(--tracking-head); }
.artwork__byline  { margin: .2rem 0 0; font-size: .9rem; color: var(--text-muted); }
.artwork__description { margin: 0 0 1.25rem; max-width: 44rem; }

.badge {
  display: inline-block;
  padding: .05rem .4rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.artwork__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem 1rem;
  margin: 0;
  font-size: .9rem;
}
.artwork__meta dt { font-weight: 700; color: var(--text-muted); }
.artwork__meta dd { margin: 0; }

.artwork__prompt {
  display: block;
  padding: .6rem .75rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 720px) {
  .artwork__head { flex-direction: column; }
}


/* ---------------------------------------------------------- preview gate */

.bare {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.bare__main { width: 100%; }

.gate {
  max-width: 22rem;
  margin: 0 auto;
  text-align: center;
}

.gate__mark  { margin: 0 auto .9rem; color: var(--text); }
.gate__title { margin: 0 0 .4rem; font-family: var(--font-head); font-size: 1.5rem; letter-spacing: var(--tracking-head); }
.gate__lede  { margin: 0 0 1.5rem; color: var(--text-muted); font-size: .92rem; }

.gate__form { display: grid; gap: .6rem; text-align: left; }



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

.card {
  display: flex;
  flex-direction: column;
  color: var(--text);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }

/* The IMAGE is the square. The card is taller by the height of the caption
   below it, which is fine - what matters is that thumbnails are uniform
   regardless of the original's shape. */
.card__frame {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  overflow: hidden;
}

.card__image {
  width: 100%;
  height: 100%;
  /* Cover rather than contain: a ragged grid of letterboxed thumbnails
     reads worse than a uniform one, and the detail page shows the whole
     image anyway. */
  object-fit: cover;
  display: block;
}

.card__missing {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  font-size: 1.5rem;
}

/* Courtesy blur only - the image is still delivered. */
.card__frame.is-blurred .card__image { filter: blur(18px); transform: scale(1.1); }

.card__flag {
  position: absolute;
  top: .4rem;
  left: .4rem;
  padding: .1rem .4rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: var(--radius-sm);
}
.card__flag--private { background: var(--text-muted); }
.card__flag--count   { left: auto; right: .4rem; }

.card__body { padding: .6rem .7rem; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.card__title {
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__meta { font-size: .78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Artist name takes the slack, the like badge keeps its width. */
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.card__foot .card__meta { min-width: 0; }

.card__likes {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    flex-shrink: 0;
    font-size: .76rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.card__likes svg { opacity: .75; }


/* ---------------------------------------------------------- likes */

.artwork__actions { display: flex; gap: .5rem; align-items: flex-start; }
.artwork__actions form { margin: 0; }

.btn--sm .icon,
[data-like-button] svg { display: block; }

[data-like-button] { gap: .35rem; font-variant-numeric: tabular-nums; }
[data-like-button].is-liked { color: var(--danger); border-color: var(--danger); }

/* ---------------------------------------------------------- comments */

.comments {
  max-width: 44rem;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: var(--border-w) solid var(--border);
}

.comments__heading {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: var(--tracking-head);
}

.comments__form { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; margin-bottom: 1.75rem; }
.comments__form textarea { width: 100%; resize: vertical; font-family: inherit; }

.comments__signin,
.comments__empty { color: var(--text-muted); font-size: .9rem; }

.comments__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }

.comment { display: flex; gap: .75rem; align-items: flex-start; }

.comment__avatar {
  width: 34px;
  height: 34px;
  font-size: .8rem;
  flex-shrink: 0;
}

.comment__body { flex: 1; min-width: 0; }

.comment__head { margin: 0 0 .15rem; font-size: .88rem; }
.comment__head a { color: var(--text); }

.comment__when { color: var(--text-muted); font-size: .8rem; margin-left: .4rem; }

.comment__text {
  margin: 0;
  font-size: .92rem;
  /* A single long token would otherwise push the layout sideways. */
  overflow-wrap: anywhere;
}

.comment__delete { margin: 0; flex-shrink: 0; }

/* ---------------------------------------------------------- settings */

.settings { max-width: 44rem; }
.settings--narrow { max-width: 26rem; }

.settings__section {
  padding: 1.25rem 0;
  border-bottom: var(--border-w) solid var(--border);
}
.settings__section:last-of-type { border-bottom: 0; }

.settings__heading {
  margin: 0 0 .9rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: var(--tracking-head);
}

.settings__note { margin: -.5rem 0 1rem; font-size: .86rem; color: var(--text-muted); }

/* A single action sitting above a tab's grid. */
.profile__tabaction { margin: 0 0 1rem; display: flex; justify-content: flex-end; }

/* Irreversible actions, set apart from the ordinary form above them. */
.settings__danger { border-color: var(--danger); margin-top: 2rem; }
.settings__danger .settings__heading { color: var(--danger); }

/* Cover picker: choose which artwork in the collection is its thumbnail. */
.coverpick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .7rem;
}

.coverpick__option { cursor: pointer; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

.coverpick__frame {
    display: block;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
    display: grid;
    place-items: center;
}

.coverpick__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The radio itself is visually hidden, so selection has to read from the
   frame - and focus has to be visible for keyboard users. */
.coverpick__option input:checked + .coverpick__frame { border-color: var(--accent); }
.coverpick__option input:focus-visible + .coverpick__frame { outline: 2px solid var(--accent); outline-offset: 2px; }

.coverpick__label {
    font-size: .74rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings__actions {
  display: flex;
  gap: .6rem;
  align-items: center;
  padding-top: 1.25rem;
  flex-wrap: wrap;
}

.settings__images { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.settings__banner { flex: 1; min-width: 16rem; }

/* Two columns of link fields, collapsing on narrow screens. */
.linkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem 1rem;
}
.linkgrid .field { margin-bottom: 0; }

.settings__newcollection { margin-top: .5rem; }

/* ---------------------------------------------------------- image picker */

.imagepick {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  cursor: pointer;
}
.imagepick--wide { display: flex; width: 100%; }

.imagepick__hint {
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
}
.imagepick:hover .imagepick__hint { text-decoration: underline; }

.imagepick__banner {
  display: block;
  width: 100%;
  height: 92px;
  background: var(--banner);
  background-size: cover;
  background-position: center;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
}

.imagepick input:focus-visible + * { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------- theme preview bar */
/* Development aid: only rendered when APP_DEBUG is on. */

.themebar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .6rem;
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 4px 20px rgba(0,0,0,.18);
  font-family: var(--font-ui);
  font-size: .78rem;
  max-width: calc(100vw - 2rem);
  flex-wrap: wrap;
}

.themebar__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  color: var(--text-muted);
  padding-right: .2rem;
}

.themebar__item {
  padding: .2rem .55rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 600;
}
.themebar__item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.themebar__item.is-active { background: var(--accent); color: var(--accent-text); }

.themebar__note {
  color: var(--text-muted);
  font-size: .68rem;
  padding-left: .3rem;
  border-left: 1px solid var(--border);
  margin-left: .2rem;
}

@media (max-width: 720px) {
  .themebar__note  { display: none; }
  .themebar__label { display: none; }

  /* Tuck into a corner rather than spanning the width and covering
     content - it is a dev aid, not part of the page. */
  .themebar {
    left: auto;
    right: .5rem;
    bottom: .5rem;
    transform: none;
    max-width: calc(100vw - 1rem);
    opacity: .55;
  }
  .themebar:hover,
  .themebar:focus-within { opacity: 1; }
}