.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: flex-end;
  margin-left: auto;
}

.site-nav a {
  color: var(--ink);
  font-size: 13px;
  text-underline-offset: 4px;
}

.guide {
  max-width: 820px;
  padding-top: 64px;
  padding-bottom: 80px;
}

.guide-intro {
  color: var(--muted);
  font-size: 19px;
  max-width: 720px;
}

.guide-note,
.guide-section {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 28px 0;
  padding: 24px;
}

.guide-note {
  background: #eee6d6;
}

.guide-section h2 {
  margin-top: 0;
}

.guide-section li {
  margin: 10px 0;
}

.guide-section code,
.guide-note code {
  background: #edf0e8;
  border-radius: 4px;
  font-size: .9em;
  padding: 2px 5px;
}

.guide-actions {
  margin-top: 36px;
}

.calendar-help-link {
  font-size: 12px;
  margin: -2px 0 18px;
}

.calendar-help-link a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.button-link {
  align-items: center;
  display: inline-flex;
  text-decoration: none;
}

.guide p,
.guide li {
  max-width: 72ch;
}

.field-help {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 400;
  margin-top: 5px;
}

.calendar-range,
.calendar-import-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.calendar-import-panel label { font-size: 12px; font-weight: bold; }
.calendar-import-panel input,
.calendar-import-panel select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px;
  border: 1px solid #cbd2c4;
  border-radius: 5px;
  background: #fffdf8;
}
.calendar-import-summary { margin: 22px 0 12px; font-weight: bold; }
.calendar-import-warnings { color: #8d2f26; }
.calendar-import-preview { display: grid; gap: 14px; }
.calendar-import-event { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf8; }
.calendar-import-event.duplicate { opacity: .72; }
.calendar-import-event.possible-duplicate { border-color: #b7791f; background: #fffaf0; }
.calendar-import-event-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.calendar-import-event-head span { color: var(--muted); font-size: 12px; }
.calendar-select { display: flex; align-items: center; gap: 8px; }
.calendar-select input { width: 20px; height: 20px; margin: 0; }
.calendar-row-status { min-height: 1.5em; margin-bottom: 0; font-weight: bold; }
.calendar-import-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.calendar-import-actions [role="alert"] { flex: 1 1 100%; margin: 0; color: #9b2c1d; font-weight: 700; }
.cast-file-preview { margin: 10px 0; }
.cast-file-image { display: block; max-width: 100%; max-height: 360px; border: 1px solid var(--line); border-radius: 6px; object-fit: contain; }

@media (max-width: 560px) {
  .calendar-range,
  .calendar-import-fields { grid-template-columns: minmax(0, 1fr); }
  .calendar-import-event-head { align-items: flex-start; flex-direction: column; }
  .calendar-import-actions { align-items: stretch; flex-direction: column-reverse; }
}

.people-section {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding: 36px 0 60px;
}

.section-copy,
.editor-section p {
  color: var(--muted);
}

.people {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.person,
.editor-section {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 18px;
}

.person h3,
.editor-section h3 {
  margin: 0;
}

.person p {
  color: var(--muted);
  font-size: 13px;
}

.show-credits {
  color: #697b65;
  font-size: 12px;
  font-weight: bold;
}

.editor-section {
  margin: 20px 0;
}

#editor {
  width: 960px;
}

.editor-section-head {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.editor-section-head p {
  font-size: 12px;
  margin: 4px 0 14px;
}

.credit-entry {
  align-items: end;
  background: #f0f2ea;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1.2fr 1.2fr 1fr .7fr 1.2fr;
  padding: 14px;
}

.credit-entry label { margin: 0; }
.credit-entry button { justify-self: start; }
.field-error { color: #993c2c; margin: 6px 0; }

.credit-row {
  align-items: end;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: 1.2fr 1fr .7fr 1.2fr auto;
  padding: 14px 0;
}

.credit-row label {
  margin: 0;
}

.credit-row[data-compact="true"] {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto;
}

.credit-summary,
.credit-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.credit-summary span { color: var(--muted); }
.credit-summary small { background: #e4e9de; border-radius: 999px; padding: 3px 8px; }
.credit-summary .credit-source { background: transparent; flex-basis: 100%; padding: 0; }
.credit-fields { display: none; gap: 10px; grid-column: 1 / -1; grid-template-columns: 1.2fr 1fr .7fr 1.2fr; margin-top: 10px; }
.credit-row.editing .credit-fields { display: grid; }
.person[role="button"] { cursor: pointer; }
.person[role="button"]:focus-visible { outline: 3px solid #927137; outline-offset: 3px; }

.photo-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-bottom: 14px;
}

.photo-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  padding-bottom: 8px;
}

.photo-card img,
.photo-placeholder {
  aspect-ratio: 4 / 3;
  background: #edf0e8;
  display: block;
  object-fit: cover;
  width: 100%;
}

.photo-placeholder {
  align-items: center;
  display: flex;
  font-size: 12px;
  justify-content: center;
}

.photo-details {
  padding: 10px;
}

.photo-details label {
  margin: 0 0 10px;
}

.photo-details button {
  margin: 8px 10px 0;
}

.photo-details button:first-of-type {
  margin-left: 0;
}

.show-detail section {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 18px;
}

.detail-notes {
  white-space: pre-wrap;
}

.detail-credits {
  list-style: none;
  margin: 0;
  padding: 0;
}

.detail-credit-grid {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.detail-credit-header,
.detail-credit-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) minmax(7rem, .65fr);
}

.detail-credit-header {
  background: #edf0e8;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.detail-credit-header > span,
.detail-credit-cell {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 11px 13px;
  text-align: left;
}

.detail-credit-header > span + span,
.detail-credit-cell + .detail-credit-cell {
  border-left: 1px solid var(--line);
}

.detail-credit-row + .detail-credit-row {
  border-top: 1px solid var(--line);
}

.detail-credit-cell-content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.detail-credit-cell-content > * {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.detail-credit-cell small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.detail-credit-person button {
  margin-left: 0;
  min-height: 0;
  overflow-wrap: anywhere;
  padding: 0;
  text-align: left;
}

.detail-credit-source a,
.detail-credit-no-source {
  overflow-wrap: anywhere;
}

.detail-credit-no-source {
  color: var(--muted);
}

.detail-credit-empty {
  padding: 14px;
}

@media (max-width: 600px) {
  .detail-credit-header {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .detail-credit-row {
    display: block;
    padding: 5px 0;
  }

  .detail-credit-cell {
    display: grid;
    gap: 4px 12px;
    grid-template-columns: minmax(4.75rem, .4fr) minmax(0, 1fr);
    padding: 7px 11px;
  }

  .detail-credit-cell + .detail-credit-cell {
    border-left: 0;
  }

  .detail-credit-cell::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding-top: 2px;
    text-transform: uppercase;
  }

  .detail-credit-cell-content {
    grid-column: 2;
  }
}
}

.detail-photo-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.detail-photo {
  margin: 0;
}

.detail-photo img {
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.detail-photo figcaption {
  margin-top: 7px;
}

.view-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.view-toggle button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

.view-toggle button.active {
  background: var(--ink);
  color: white;
}

.calendar-head {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto auto 1fr auto;
  margin: 18px 0 12px;
}

.calendar-head h3 {
  margin: 0;
  text-align: center;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays span {
  color: var(--muted);
  font-size: 12px;
  padding: 6px;
  text-align: center;
}

.calendar-day {
  border: 1px solid var(--line);
  min-height: 112px;
  padding: 6px;
}

.calendar-day time {
  display: inline-grid;
  font-size: 12px;
  height: 24px;
  place-items: center;
  width: 24px;
}

.calendar-day.today time {
  background: var(--ink);
  border-radius: 50%;
  color: white;
}

.calendar-events button {
  background: #edf0e8;
  border: 0;
  color: var(--ink);
  display: block;
  font-size: 11px;
  margin: 4px 0 0;
  padding: 5px;
  text-align: left;
  width: 100%;
}

.calendar-events button span,
.calendar-events button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cast-import {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
}

.cast-import summary {
  cursor: pointer;
  font-weight: 700;
}

.cast-candidate {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr 1fr;
  margin-top: 10px;
}

.candidate-check {
  align-items: center;
  display: flex;
  gap: 5px;
}

.credit-source {
  color: var(--muted);
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .cast-candidate {
    grid-template-columns: 1fr;
  }
  .calendar-head {
    grid-template-columns: auto auto 1fr auto;
  }

  .calendar-head h3 {
    font-size: 17px;
  }

  .calendar-weekdays span {
    font-size: 9px;
    padding: 3px 0;
  }

  .calendar-day {
    min-height: 76px;
    padding: 2px;
  }

  .calendar-events button {
    font-size: 9px;
    padding: 3px 2px;
  }

  .calendar-events button small {
    display: none;
  }
}

.file-button input {
  padding: 8px;
}

@media (max-width: 760px) {
  .credit-row,
  .credit-entry,
  .credit-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .credit-row,
  .credit-entry,
  .credit-fields {
    grid-template-columns: 1fr;
  }
}

.load-error {
  margin: 22px auto;
  max-width: 980px;
}

#journal-view.load-failed .collection,
#journal-view.load-failed #people-section,
#journal-view.load-failed #statistics,
#journal-view.load-failed .storage,
#journal-view.load-failed #migration {
  display: none !important;
}

.calendar-presets,.calendar-filter-tabs,.calendar-bulk,.calendar-pages{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.calendar-review-tools{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:9px;background:#f7f5ef}
.calendar-review-tools>label{display:block;margin:12px 0}
.calendar-filter-check{display:flex!important;align-items:center;gap:8px}.calendar-filter-check input{width:auto;margin:0}
.calendar-filter-tabs button.active{background:var(--ink);color:white}
.calendar-bulk select{max-width:220px;margin:0}.calendar-pages{justify-content:center}
@media(max-width:560px){.calendar-bulk>*{width:100%;max-width:none!important}.calendar-pages{justify-content:space-between}}
.cast-import-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 20px;padding:0;list-style:none}
.cast-import-steps li{padding:12px;border:1px solid var(--line);border-radius:7px;background:#fffdf8}
.cast-import-steps strong,.cast-import-steps span{display:block}
.cast-import-steps span,.cast-draft-status{margin-top:4px;color:var(--muted);font-size:12px}
#add-cast-candidates:not([hidden]){display:inline-flex;margin-top:12px}
.candidate-identity-review{grid-column:1/-1;padding:.8rem;border:1px solid #d8b9c3;border-radius:12px;background:#fff8f3}.candidate-identity-review p{margin:.15rem 0 .55rem}.candidate-match-actions{display:flex;flex-wrap:wrap;gap:.55rem}.candidate-identity-review label{margin:0}.candidate-identity-review select{width:100%}.cast-candidate>.candidate-category,.cast-candidate>.candidate-evidence{min-width:0}
#discard-cast-review:not([hidden]){display:inline-flex;margin-left:8px}
.cast-ocr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cast-ocr-review{margin:12px 0;padding:12px;border:1px solid #c6914e;border-radius:7px;background:#fff7e8}
.cast-ocr-review h4{margin:0 0 6px}.cast-ocr-review ul{margin:0;padding-left:20px;overflow-wrap:anywhere}
.ocr-candidate-review{border-color:#c6914e;background:#fffaf0}.cast-ocr-candidate-note{grid-column:1/-1;margin:0 0 4px;color:#714815;font-size:12px}
@media(max-width:560px){.cast-import-steps{grid-template-columns:minmax(0,1fr)}#add-cast-candidates:not([hidden]),#discard-cast-review:not([hidden]),.cast-ocr-actions>button,.candidate-match-actions>button{width:100%;justify-content:center;margin-left:0}.cast-file-preview canvas{max-height:58vh;object-fit:contain}.candidate-identity-review{padding:.7rem}.cast-candidate>.candidate-category,.cast-candidate>.candidate-evidence{grid-column:1/-1}}