/* A calm paper workspace for a Recenter. */
.recenters-page, .recenter-detail, .recenter-editor-page, .recenter-player {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-xxl);
  color: var(--ink-dark);
}

.recenter-editor-page [hidden], .recenter-player [hidden] { display: none !important; }

.recenters-page__header, .recenter-editor-page__header, .recenter-detail__header,
.recenter-player__header, .recenter-card__footer, .recenter-editor__block > header,
.recenter-editor__footer, .recenter-player__footer, .recenter-player__photo-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.recenters-page__header, .recenter-editor-page__header, .recenter-detail__header,
.recenter-player__header { justify-content: space-between; }

.recenters-page__header, .recenter-editor-page__header {
  align-items: flex-end;
  margin-bottom: var(--space-xl);
}

.recenters-page h1, .recenter-detail h1, .recenter-editor-page h1, .recenter-player h1 {
  margin: 0;
  font: 500 var(--text-page-title) / 1.18 var(--font-serif);
  letter-spacing: -.02em;
}

.recenters-eyebrow, .recenter-player__eyebrow {
  margin: 0 0 var(--space-xs);
  color: var(--leather-brown);
  font: 600 var(--text-xs) / 1.4 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.recenters-page__header > div:first-child > p:not(.recenters-eyebrow) {
  max-width: 52ch;
  margin: var(--space-sm) 0 0;
  color: var(--ink-soft);
  font: var(--text-sm) / 1.55 var(--font-sans);
}

.recenters-page__filters {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
}

.recenters-page__filters label { flex: 1; }

.recenters-page__filters input,
.recenter-editor-page input:not([type="file"]),
.recenter-editor-page textarea {
  width: 100%;
  color: var(--ink-dark);
  background: color-mix(in srgb, var(--paper-aged) 94%, white);
  border: 1px solid var(--sepia-line);
  border-radius: var(--radius-compact);
  box-shadow: inset 0 1px 1px rgb(70 48 28 / 4%);
  font: var(--text-md) / 1.5 var(--font-sans);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.recenters-page__filters input, .recenter-editor-page input:not([type="file"]) {
  min-height: 46px;
  padding: 10px 12px;
}

.recenter-editor-page textarea { min-height: 104px; padding: 11px 12px; resize: vertical; }

.recenters-page__filters input::placeholder, .recenter-editor-page input::placeholder,
.recenter-editor-page textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 74%, transparent); }

.recenters-page__filters input:focus-visible, .recenter-editor-page input:focus-visible,
.recenter-editor-page textarea:focus-visible {
  outline: 0;
  border-color: var(--leather-brown);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 32%, transparent);
}

.recenters-list { display: grid; gap: var(--space-sm); }
.recenter-card {
  overflow: hidden;
  background: var(--paper-aged);
  border: 1px solid var(--sepia-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.recenter-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.recenter-card__main { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); color: var(--ink-dark); text-decoration: none; }
.recenter-card__main strong { font: 500 var(--text-lg) / 1.25 var(--font-serif); }
.recenter-card__main span, .recenter-card__footer small { color: var(--ink-soft); font: var(--text-xs) var(--font-sans); }
.recenter-card__main:focus-visible, .recenter-editor__block button:focus-visible,
.recenter-player button:focus-visible, .recenter-detail a:focus-visible { outline: 3px solid var(--action-primary); outline-offset: -3px; }
.recenter-card__footer { justify-content: space-between; padding: var(--space-sm) var(--space-lg); border-top: 1px solid color-mix(in srgb, var(--sepia-line) 70%, transparent); }

.recenters-empty {
  display: grid;
  min-height: 320px;
  place-items: center;
  align-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  text-align: center;
  background: var(--paper-aged);
  border: 1px solid var(--sepia-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
}
.recenters-empty h2 { margin: 0; font: 500 var(--text-xl) var(--font-serif); }
.recenters-empty p { max-width: 44ch; margin: 0; color: var(--ink-soft); font: var(--text-sm) / 1.55 var(--font-sans); }
.recenters-empty .btn { margin-top: var(--space-md); }

/* Editor */
.recenter-editor-page { padding-top: var(--space-md); }
.recenter-editor-page__header { padding-bottom: var(--space-md); border-bottom: 1px solid color-mix(in srgb, var(--sepia-line) 72%, transparent); }
.recenter-editor-page__header .btn { flex: 0 0 auto; }
.recenter-editor-page > [data-recenter-editor-target="content"] { display: grid; gap: var(--space-md); }

.recenter-editor__field {
  margin: 0;
  padding: var(--space-md);
  background: rgb(255 253 248 / 62%);
  border: 1px solid color-mix(in srgb, var(--sepia-line) 62%, transparent);
  border-radius: var(--radius-card);
}
.recenter-editor__field--anchor { padding: var(--space-lg); background: var(--paper-aged); box-shadow: var(--shadow-sm); }
.recenter-editor__field label { display: grid; gap: var(--space-sm); color: var(--ink-dark); font: 600 var(--text-sm) / 1.35 var(--font-sans); }
.recenter-editor__field--anchor label { font: 500 var(--text-lg) / 1.25 var(--font-serif); }

.recenter-editor__context {
  margin: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper-warm) 68%, var(--paper-aged));
  border: 1px dashed color-mix(in srgb, var(--sepia-line) 78%, transparent);
  border-radius: var(--radius-card);
}
.recenter-editor__context summary { display: flex; min-height: 52px; align-items: center; padding: 0 var(--space-md); color: var(--leather-brown); font: 600 var(--text-sm) var(--font-sans); cursor: var(--cursor-pointer); }
.recenter-editor__context summary span { margin-left: var(--space-xs); color: var(--ink-soft); font-weight: 400; }
.recenter-editor__context-body { display: grid; gap: var(--space-sm); padding: 0 var(--space-md) var(--space-md); }
.recenter-editor__context-body .recenter-editor__field { background: rgb(255 253 248 / 52%); }

.recenter-editor__helps { display: grid; gap: var(--space-sm); padding: var(--space-lg); background: var(--paper-aged); border: 1px solid var(--sepia-line); border-radius: var(--radius-panel); box-shadow: var(--shadow-sm); }
.recenter-editor__helps h2 { margin: 0; font: 500 var(--text-xl) var(--font-serif); }
.recenter-editor__helps p { margin: var(--space-xs) 0 0; color: var(--ink-soft); font: var(--text-sm) / 1.5 var(--font-sans); }
.recenter-editor__blocks { display: grid; gap: var(--space-md); margin: var(--space-sm) 0; }
.recenter-editor__block { padding: var(--space-md); background: color-mix(in srgb, var(--paper-warm) 62%, white); border: 1px solid var(--sepia-line); border-radius: var(--radius-card); }
.recenter-editor__block > header { justify-content: space-between; padding-bottom: var(--space-sm); border-bottom: 1px solid color-mix(in srgb, var(--sepia-line) 50%, transparent); }
.recenter-editor__block > header > span { display: inline-grid; width: 28px; height: 28px; place-items: center; color: var(--paper-aged); background: var(--leather-brown); border-radius: 50%; font: 600 var(--text-xs) var(--font-sans); }
.recenter-editor__block h3 { flex: 1; margin: 0; font: 500 var(--text-lg) var(--font-serif); }
.recenter-editor__block > header > div { display: flex; gap: 2px; }
.recenter-editor__block .btn-ghost { min-height: 36px; padding: 7px 10px; color: var(--leather-brown); background: transparent; }
.recenter-editor__block .btn-ghost:hover { color: var(--ink-dark); background: rgb(90 62 43 / 8%); }
.recenter-editor__block-body { display: grid; gap: var(--space-sm); padding-top: var(--space-sm); }
.recenter-editor__block-body .recenter-editor__field { padding: 0; background: transparent; border: 0; }

.recenter-editor__add { display: grid; justify-items: start; gap: var(--space-sm); }
.recenter-editor__choices { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-sm); background: var(--paper-warm); border-radius: var(--radius-control); }
.recenter-editor__choices[hidden] { display: none; }
.recenter-editor__choices button, .recenter-player__photo-controls button {
  min-height: 38px;
  padding: 7px 12px;
  color: var(--leather-brown);
  background: var(--paper-aged);
  border: 1px solid var(--sepia-line);
  border-radius: var(--radius-pill);
  font: 600 var(--text-xs) var(--font-sans);
  cursor: var(--cursor-pointer);
}
.recenter-editor__choices button:hover { color: var(--ink-dark); border-color: var(--leather-brown); }
.recenter-editor__file-picker { display: grid; gap: var(--space-xs); padding: var(--space-md); background: rgb(255 253 248 / 60%); border: 1px dashed var(--sepia-line); border-radius: var(--radius-control); }
.recenter-editor__file-picker label { color: var(--leather-brown); font: 600 var(--text-sm) var(--font-sans); cursor: var(--cursor-pointer); }
.recenter-editor__file-picker input { display: block; margin-top: var(--space-xs); color: var(--ink-soft); font: var(--text-xs) var(--font-sans); }
.recenter-editor__file-picker small { color: var(--ink-soft); font: var(--text-xs) var(--font-sans); }
.recenter-editor__asset { display: grid; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid color-mix(in srgb, var(--sepia-line) 58%, transparent); }
.recenter-editor__asset > span { color: var(--ink-soft); font: var(--text-sm) var(--font-sans); }
.recenter-editor__memory { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); background: var(--paper-warm); border-radius: var(--radius-control); }
.recenter-editor__memory p { margin: 0; }

.recenter-editor__footer {
  position: sticky;
  z-index: 2;
  bottom: 0;
  justify-content: space-between;
  margin: var(--space-lg) calc(-1 * var(--space-sm)) 0;
  padding: var(--space-sm) var(--space-sm) calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper-base) 88%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--sepia-line) 55%, transparent);
  backdrop-filter: blur(10px);
}
.recenter-editor__footer p { margin: 0; color: var(--ink-soft); font: var(--text-xs) / 1.4 var(--font-sans); }
.recenter-editor__footer .btn { min-width: 148px; }
.recenter-editor__locked { display: grid; justify-items: center; gap: var(--space-md); padding: var(--space-xl); text-align: center; background: var(--paper-aged); border: 1px solid var(--sepia-line); border-radius: var(--radius-panel); }
.form-errors { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--paper-aged)); border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); border-radius: var(--radius-control); font: var(--text-sm) / 1.45 var(--font-sans); }

.recenter-memory-picker { width: min(32rem, calc(100vw - 2rem)); max-height: min(42rem, calc(100vh - 2rem)); padding: var(--space-lg); color: var(--ink-dark); background: var(--paper-aged); border: 1px solid var(--sepia-line); border-radius: var(--radius-panel); box-shadow: var(--shadow-floating); }
.recenter-memory-picker::backdrop { background: rgb(42 37 32 / 52%); backdrop-filter: blur(3px); }
.recenter-memory-picker h2 { margin: 0; font: 500 var(--text-xl) var(--font-serif); }
.recenter-memory-picker__list { display: grid; gap: var(--space-xs); max-height: 55vh; margin: var(--space-md) 0; overflow: auto; }
.recenter-memory-picker__option { min-height: 44px; padding: var(--space-sm) var(--space-md); color: var(--ink-dark); text-align: left; background: transparent; border: 1px solid color-mix(in srgb, var(--sepia-line) 68%, transparent); border-radius: var(--radius-control); font: var(--text-sm) var(--font-sans); cursor: var(--cursor-pointer); }
.recenter-memory-picker__option:hover { background: var(--paper-warm); }

/* Detail and player */
.recenter-detail, .recenter-player main { background: var(--paper-aged); border: 1px solid var(--sepia-line); box-shadow: var(--shadow-sm); }
.recenter-detail { margin-top: var(--space-md); border-radius: var(--radius-panel); }
.recenter-detail__header { margin-bottom: var(--space-xl); }
.recenter-detail__header > div, .recenter-detail__danger { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.recenter-detail__direction { max-width: 42ch; font: 500 var(--text-xl) / 1.35 var(--font-serif); }
.recenter-detail__count { color: var(--ink-soft); font: var(--text-sm) var(--font-sans); }
.recenter-detail__danger { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--sepia-line); }
.recenter-player main { min-height: 24rem; margin: var(--space-md) 0; padding: clamp(var(--space-lg), 6vw, var(--space-xxl)); border-radius: var(--radius-panel); }
.recenter-player__progress { min-height: 1.2em; margin: var(--space-md) 0 0; color: var(--ink-soft); font: var(--text-xs) var(--font-sans); }
.recenter-player__footer { justify-content: space-between; }
.recenter-player__footer [hidden] { display: none; }
.recenter-player__block { max-width: 64ch; margin: 0 auto; }
.recenter-player__block blockquote { margin: var(--space-lg) 0; font: italic 500 clamp(1.65rem, 4vw, 2.4rem) / 1.36 var(--font-serif); }
.recenter-player__block cite, .recenter-player__description { color: var(--ink-soft); font: var(--text-sm) / 1.55 var(--font-sans); }
.recenter-player__action, .recenter-player__direction { font: 500 var(--text-xl) / 1.5 var(--font-serif); }
.recenter-player__image, .recenter-player video { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--radius-media); }
.recenter-player audio { width: 100%; }
.recenter-player__photo-controls { flex-wrap: wrap; margin-top: var(--space-md); }
.recenter-player__all { display: grid; gap: var(--space-xs); }
.recenter-player__all h2 { margin: 0 0 var(--space-sm); font: 500 var(--text-xl) var(--font-serif); }
.recenter-player__all button { min-height: 44px; padding: var(--space-sm) var(--space-md); color: var(--ink-dark); text-align: left; background: transparent; border: 1px solid var(--sepia-line); border-radius: var(--radius-control); font: var(--text-sm) var(--font-sans); cursor: var(--cursor-pointer); }
.recenter-player__all button:hover { background: var(--paper-warm); }
.recenter-player__closing { text-align: center; }
.recenter-player__closing h1 { margin-bottom: var(--space-sm); }
.recenter-player__closing p { color: var(--ink-soft); font: var(--text-sm) var(--font-sans); }
.recenter-player__closing button { min-width: 92px; min-height: 44px; margin: var(--space-xs); padding: var(--space-sm) var(--space-md); color: var(--leather-brown); background: transparent; border: 1px solid var(--sepia-line); border-radius: var(--radius-pill); font: 600 var(--text-sm) var(--font-sans); cursor: var(--cursor-pointer); }
.recenter-player__closing .is-selected { color: var(--ink-dark); background: var(--paper-warm); border-color: var(--leather-brown); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-primary) 28%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .recenter-card, .recenter-player main { transition: opacity 180ms ease, transform 180ms ease, box-shadow 160ms ease; }
  .recenter-player__image { animation: recenter-photo-in 450ms ease-out; }
}
@keyframes recenter-photo-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 640px) {
  .recenters-page, .recenter-detail, .recenter-editor-page, .recenter-player { padding: var(--space-md) var(--space-md) var(--space-xl); }
  .recenters-page__header, .recenter-editor-page__header { align-items: flex-start; flex-direction: column; }
  .recenters-page__filters, .recenter-editor__footer, .recenter-player__footer { align-items: stretch; flex-direction: column; }
  .recenters-page__filters .btn, .recenter-editor__footer .btn { width: 100%; }
  .recenter-editor__block > header { align-items: flex-start; flex-wrap: wrap; }
  .recenter-editor__memory { align-items: flex-start; flex-direction: column; }
  .recenter-player__footer button { min-height: 44px; }
}