/* Creator directory, profiles and the creator account pages (_app/creators.py). Uses the site's tokens from mic.css,
   so both themes follow automatically. */
.mic .cr {
  background: var(--mic-bg); color: var(--mic-fg);
  padding: calc(var(--mic-header-h) + clamp(2rem, 5vw, 4rem)) var(--safe-gutter-right) var(--mic-section-pad) var(--safe-gutter-left);
}
.cr .mic-work__title { margin-bottom: 1rem; }
.cr a:not(.mic-btn) { color: inherit; text-decoration-color: var(--mic-orange); text-underline-offset: .2em; }
.cr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- directory ------------------------------------------------------------------ */
.cr-dir__head { max-width: 46rem; }
.cr-dir__join { margin: 1.25rem 0 0; font-weight: 700; }
.cr-dir__join a { color: var(--mic-orange-deep); }
.cr-filters { display: flex; flex-wrap: wrap; gap: .75rem; margin: clamp(2rem, 4vw, 3rem) 0 1rem; }
.cr-filters input, .cr-filters select { flex: 1 1 12rem; min-width: 0; }
.cr-filters input[type=search] { flex-basis: 18rem; }
.cr-count { margin: 0 0 1.5rem; font-size: var(--type-small); font-weight: 700; color: var(--mic-grey-text); }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.cr-card a { display: grid; gap: .35rem; color: inherit; text-decoration: none; }
.cr-card__photo { aspect-ratio: 4 / 5; margin-bottom: .6rem; }
.cr-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-settle); }
.cr-card a:hover .cr-card__img { transform: scale(1.04); }
.cr-card__name { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: var(--mic-orange); }
.cr-card__line { margin: 0; line-height: 1.4; }
.cr-card__meta, .cr-card__reach { margin: 0; font-size: var(--type-small); color: var(--mic-grey-text); }
.cr-card__reach b { color: var(--mic-fg); }
.cr-empty { font-size: 1.125rem; }
.cr-avatar--none, .cr-card__img.cr-avatar--none, .cr-hero__img.cr-avatar--none {
  display: grid; place-items: center; width: 100%; height: 100%; background: var(--mic-soft);
  font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--mic-grey-text);
}

/* --- profile -------------------------------------------------------------------- */
.cr-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; margin-top: 1rem; }
.cr-hero__photo { aspect-ratio: 4 / 5; }
.cr-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-hero__text .mic-lead { margin-bottom: 1.25rem; }
.cr-hero__meta { margin: 1rem 0; font-weight: 700; color: var(--mic-grey-text); }
.cr-hero__meta b { color: var(--mic-fg); }
.cr-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cr-chips li { padding: .35rem .85rem; border-radius: 999px; background: var(--mic-orange); color: var(--mic-white); font-size: var(--type-small); font-weight: 700; }
.cr-chips--soft li { background: transparent; color: var(--mic-fg); border: 1px solid var(--mic-line); }
.cr-socials { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.cr-socials a { display: inline-flex; gap: .4rem; align-items: baseline; padding: .45rem .9rem; border: 1px solid var(--mic-line); border-radius: .6rem 0 .6rem 0; font-weight: 700; text-decoration: none; }
.cr-socials a:hover { border-color: var(--mic-orange); }
.cr-socials small { font-weight: 600; color: var(--mic-grey-text); }
.cr-section { margin-top: clamp(3rem, 7vw, 5.5rem); }
.cr-section > .mic-h2 { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cr-about p { max-width: 46rem; font-size: 1.125rem; line-height: 1.6; white-space: pre-line; }
.cr-work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.cr-work-grid--tall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.cr-work-grid + .cr-work-grid { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.cr-work { margin: 0; }
.cr-work__frame { position: relative; overflow: hidden; border-radius: var(--mic-radius-sm) 0 var(--mic-radius-sm) 0; background: var(--mic-soft); }
.cr-work__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cr-work--tall .cr-work__frame { aspect-ratio: 9 / 16; }
.cr-work--wide .cr-work__frame { aspect-ratio: 16 / 9; }
.cr-work--post .cr-work__frame { height: 38rem; }
.cr-work--audio .cr-work__frame { height: 9.5rem; border-radius: .75rem; }
.cr-work__src { display: inline-block; margin-top: .6rem; font-size: var(--type-small); font-weight: 700; }
.cr-work figcaption { margin-top: .25rem; font-size: var(--type-small); color: var(--mic-grey-text); }
.cr-work--link a { display: grid; gap: .25rem; padding: 1.25rem 1.5rem; border: 1px dashed var(--mic-line); border-radius: var(--mic-radius-sm) 0 var(--mic-radius-sm) 0; text-decoration: none; }
.cr-work--link span { font-size: var(--type-small); color: var(--mic-grey-text); }
.cr-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--mic-radius) 0 var(--mic-radius) 0; background: var(--mic-soft); }
.cr-contact > div > p { max-width: 26rem; }
.cr-sent { font-size: 1.125rem; }
.cr-preview-bar { margin: 0 0 1.5rem; padding: .85rem 1.1rem; border: 2px dashed var(--mic-orange); border-radius: .75rem; font-weight: 700; }

/* --- forms ------------------------------------------------------------------------ */
.cr-form { display: grid; gap: 1rem; }
.cr-row { display: grid; gap: .3rem; }
.cr-form label, .cr-social-row label, .cr-work-row label { display: grid; gap: .35rem; font-weight: 700; }
.cr-form label small, .cr-row > small, .cr-hint { font-weight: 500; font-size: var(--type-small); color: var(--mic-grey-text); }
.cr input:not([type=checkbox]):not([type=file]), .cr select, .cr textarea {
  width: 100%; min-width: 0; padding: .75rem .9rem; border: 1px solid var(--mic-line); border-radius: .6rem;
  background: var(--mic-bg); color: var(--mic-fg); font: inherit; font-weight: 500;
}
.cr input:focus-visible, .cr select:focus-visible, .cr textarea:focus-visible { outline: 3px solid var(--mic-orange); outline-offset: 1px; border-color: transparent; }
.cr textarea { resize: vertical; }
.cr-check { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 500 !important; line-height: 1.4; }
.cr-check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; accent-color: var(--mic-orange); }
.cr-err { color: #B3261E; font-size: var(--type-small); font-weight: 700; }
.cr-ok { color: #1B6E3A; font-weight: 700; }
.cr-note { padding: .9rem 1.1rem; border-radius: .75rem; background: var(--mic-soft); }
.cr-linkbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--mic-orange); text-underline-offset: .2em; cursor: pointer; justify-self: start; }
.cr-alt { margin-top: 1.5rem; }
.cr-auth__box { max-width: 34rem; }
.cr-auth .mic-lead { margin-bottom: 1.75rem; }
.cr-account { max-width: 56rem; }
.cr-account__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cr-state { padding: 1rem 1.2rem; border-radius: .75rem; border-left: 5px solid var(--mic-grey-text); background: var(--mic-soft); font-weight: 600; overflow-wrap: anywhere; }
.cr-state--live { border-left-color: #1B6E3A; }
.cr-state--pending { border-left-color: var(--mic-orange); }
.cr-state--changes, .cr-state--hidden { border-left-color: #B3261E; }
.cr-edit fieldset { margin: 1.5rem 0 0; padding: 0; border: 0; display: grid; gap: 1rem; }
.cr-edit legend { margin-bottom: .75rem; padding: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--mic-orange); }
.cr-edit legend small { font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--mic-grey-text); }
.cr-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .6rem 1.25rem; }
.cr-social-row, .cr-work-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: .5rem 1rem; align-items: end; }
.cr-work-row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.cr-social-row .cr-err, .cr-work-row .cr-err { grid-column: 1 / -1; }
.cr-photo-now { display: flex; align-items: center; gap: 1rem; }
.cr-photo-now__img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: 1rem 0 1rem 0; }
.cr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.cr-password { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--mic-line); max-width: 30rem; }

/* admin: the creator review page's photo and work preview (admin.css has the rest) */
.adm-cr-photo { width: 6rem; height: 6rem; object-fit: cover; border-radius: .75rem; }

@media (max-width: 63.99rem) {
  .cr-hero, .cr-contact { grid-template-columns: minmax(0, 1fr); }
  .cr-hero__photo { max-width: 26rem; }
}
@media (max-width: 39.99rem) {   /* phones: two creators a row, so browsing doesn't take a screen per person */
  .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; }
  .cr-card__name { font-size: 1.1rem; }
  .cr-card__line { font-size: .9375rem; }
  .cr-card__photo { margin-bottom: .35rem; }
  .cr-hero__photo { aspect-ratio: 1 / 1; }
  .cr-social-row, .cr-work-row { grid-template-columns: minmax(0, 1fr); }
  .cr-work--post .cr-work__frame { height: 34rem; }
}
:root[data-theme="dark"] .cr-err { color: #FF8A80; }
:root[data-theme="dark"] .cr-ok { color: #7BD89A; }