/* Account + owner area. Builds on the site's tokens and components. */

.app-body { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.app-main { flex: 1; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); }

/* ---- bar ---- */
.app-bar {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(20, 18, 17, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.app-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-block: 0.85rem; flex-wrap: wrap; }
/* The bar carries the real lockup now, not a text wordmark beside a
   CSS-drawn approximation of the mark. Height beats site.css's .lockup__art
   on specificity (0,2,0 vs 0,1,0) rather than relying on load order. */
.app-bar__brand {
  display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px;
  color: var(--paper-100); text-decoration: none;
}
/* 30px muddied the mark — its 10px squares landed on ~2.5 device px. */
.app-bar__brand .lockup__art { height: 36px; }
.app-bar__tag {
  font-family: var(--font-sans); font-size: var(--t-meta); letter-spacing: var(--track-meta);
  /* Was inherited from the brand's text styling, which the lockup replaced. */
  text-transform: uppercase;
  color: var(--terracotta-300); border: 1px solid var(--hairline-warm);
  border-radius: var(--radius-pill); padding: 0.15rem 0.5rem; margin-left: 0.4rem;
}
.app-nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }
.app-nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase;
  font-weight: 500; color: var(--text-meta); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease-out);
}
.app-nav__link:hover { color: var(--paper-100); }
.app-nav__link.is-active { color: var(--paper-100); border-bottom-color: var(--terracotta-500); }

/* ---- page furniture ---- */
.app-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); }
.mb-5 { margin-bottom: var(--sp-5); }
.app-mono { font-family: var(--font-mono); font-size: 0.9375rem; letter-spacing: 0.02em; color: var(--text); }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.app-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); }
.app-filters .field { min-width: 12rem; }

.app-fieldset { border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); }
.app-fieldset legend { padding-inline: 0.4rem; color: var(--text-meta); }
.qty-input {
  width: 5rem; min-height: 44px; text-align: center;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---- tables ---- */
.table-scroll { overflow-x: auto; }
.app-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 44rem; }
.app-table th {
  text-align: left; padding: var(--sp-4) var(--sp-5);
  font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase;
  font-weight: 500; color: var(--text-meta); border-bottom: 1px solid var(--hairline);
  background: var(--surface); white-space: nowrap;
}
.app-table td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--hairline); vertical-align: top; }
.app-table tr:last-child td { border-bottom: 0; }
.app-table .num-col { text-align: right; white-space: nowrap; }

.email-dump {
  width: 100%; min-height: 5.5rem; resize: vertical;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  color: var(--text-body); font-family: var(--font-mono); font-size: var(--t-xs);
  line-height: 1.6; padding: var(--sp-4);
}

/* ---- courses ---- */
.lesson-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
@media (max-width: 900px) { .lesson-grid { grid-template-columns: minmax(0, 1fr); } }

.lesson-row {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface); transition: border-color var(--dur) var(--ease-out);
}
.lesson-row:hover { border-color: var(--hairline-warm); }
.lesson-row__n {
  font-family: var(--font-display); font-weight: 300; font-size: 1.125rem;
  color: var(--accent-text); font-variant-numeric: tabular-nums; flex: none; min-width: 1.75rem;
}

.video-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); background: var(--ink-900); border: 1px solid var(--hairline);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame--empty { display: grid; place-items: center; }

.lesson-link {
  display: block; padding: 0.7rem 0.85rem; border-radius: var(--radius);
  font-size: var(--t-sm); color: var(--text-body); text-decoration: none;
  border: 1px solid transparent; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.lesson-link:hover { background: var(--surface-hi); color: var(--text); }
.lesson-link.is-current { background: var(--surface-hi); color: var(--text); border-color: var(--hairline-warm); }

/* ---- footer ---- */
.app-foot {
  border-top: 1px solid var(--hairline); padding-block: var(--sp-6);
  font-size: var(--t-xs); color: var(--text-meta);
}
.app-foot .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); }
.app-foot a { color: inherit; text-decoration: none; }
.app-foot a:hover { color: var(--gold-500); }

/* ---- purchase request ---- */
.tier-pick {
  display: flex; align-items: center; gap: 0.75rem; min-height: 48px;
  padding: 0.75rem 1rem; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.tier-pick:hover { border-color: var(--hairline-warm); }
.tier-pick:has(input:checked) { border-color: var(--terracotta-500); background: var(--surface-hi); }
.tier-pick input { accent-color: var(--terracotta-500); width: 18px; height: 18px; flex: none; }

/* ---- lockup on the sign-in / sign-up screens ---- */
.auth-brand {
  display: block;
  width: min(260px, 70%);
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  color: var(--paper-100);          /* the wordmark and rule inherit this */
}
.auth-brand svg { width: 100%; height: auto; display: block; }

@media (max-width: 520px) {
  .auth-brand { width: min(220px, 78%); }
  /* the strapline is only a few pixels tall here — noise, not information */
  .auth-brand .lockup__strap { display: none; }
}

/* With no brand on the left, the bar is just an escape hatch — push it right
   and let it recede so the lockup below is the page's only strong mark. */
.app-bar--minimal .app-bar__inner { justify-content: flex-end; }

/* Status chips -------------------------------------------------------------
   A status badge and a ghost button were the same shape: pill radius, 1px
   border at the same alpha, transparent fill. Sat side by side — "Open" next
   to "Mark resolved", "Paid" next to "Open" — the label read as a dead button.
   Every badge in the app is a status, never an action, so they become filled
   and borderless here and the outlined pill stays reserved for things that do
   something. The marketing pages keep the outlined treatment. */
.app-body .badge {
  border-color: transparent;
  background: rgba(214, 178, 94, 0.16);
  padding-block: 0.22rem;
}
.app-body .badge--success { background: rgba(127, 168, 120, 0.18); }
.app-body .badge--neutral { background: rgba(242, 241, 238, 0.09); }

@media (max-width: 620px) {
  .app-bar__brand .lockup__art { height: 24px; }
}

/* ---- Photos screen ---- */
.photo-grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
.photo-card {
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: var(--sp-4); background: var(--surface-1);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.photo-card__shots { display: flex; gap: 0.5rem; }
.photo-card__shot { flex: 1; margin: 0; min-width: 0; }
.photo-card__shot img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 6px; display: block; background: var(--surface-2);
}
.photo-card__shot figcaption {
  font-size: var(--t-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-meta); margin-top: 0.35rem;
}
.photo-card__label { color: var(--paper-100); font-size: 0.9375rem; margin: 0.25rem 0 0; }
.photo-card__actions { margin-top: auto; padding-top: 0.75rem; display: grid; gap: 0.5rem; }
.photo-file { display: grid; gap: 0.25rem; }
.photo-file span {
  font-size: var(--t-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-meta);
}
.photo-file input[type=file] { font-size: 0.8125rem; color: var(--text-muted); }
.photo-file input[type=file]:disabled { opacity: 0.4; }

/* The crop picker sits above everything and is deliberately plain — the photo
   is the thing being judged, not the interface around it. */
.crop {
  border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--surface-1); color: var(--text); padding: var(--sp-5);
  max-width: min(46rem, 92vw);
}
.crop::backdrop { background: rgba(0, 0, 0, 0.72); }
.crop__title { font-family: var(--font-display); font-size: 1.25rem; margin: 0; color: var(--paper-100); }
.crop__hint { margin: 0.35rem 0 0; }
.crop__stage { position: relative; margin-top: var(--sp-4); line-height: 0; touch-action: none; }
.crop__stage img { max-width: 100%; max-height: 60vh; width: auto; display: block; margin-inline: auto; }
.crop__box {
  position: absolute; cursor: grab; touch-action: none;
  border: 2px solid var(--terracotta-500);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}
.crop__box:active { cursor: grabbing; }
.crop__grid {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.35) 1px, transparent 1px) 0 33.33% / 100% 33.34%,
    linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px) 33.33% 0 / 33.34% 100%;
}
.crop__actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: var(--sp-4); }