/* ==========================================================================
   coaching.css — components specific to the two-screen coaching build:
   Brand Setup (the academy memory) and the simplified Studio.
   Loads after styles.css and reuses its tokens.
   ========================================================================== */

/* ---------- Studio: field card ---------- */
.studio-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-sm); overflow: hidden;
}
.fld { padding: 22px clamp(16px, 3vw, 26px); border-bottom: 1px solid var(--line); }
.fld-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px;
}
.fld-n {
  width: 21px; height: 21px; border-radius: 6px; background: var(--ink); color: var(--on-ink);
  font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fld-sub { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.fld-head.between { justify-content: space-between; }

/* Size selector docked in the Post type header */
.size-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.size-inline > span {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.size-inline select { width: auto; min-width: 190px; padding: 7px 10px; font-size: 13px; }
@media (max-width: 560px) {
  .fld-head.between { flex-wrap: wrap; gap: 10px; }
  .size-inline select { min-width: 150px; }
}
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.hintline { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
textarea.ctx { min-height: 118px; font-size: 14.5px; }

.gen-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px clamp(16px, 3vw, 26px); background: var(--paper-warm);
}
.btn-lg { padding: 13px 26px; font-size: 15px; border-radius: 12px; }

/* post-type picker */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 9px; }
.pt-card {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--paper); font-size: 13px; font-weight: 600; color: var(--ink);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.pt-card:hover { background: var(--paper-warm); }
.pt-card.sel { border-color: var(--ink); background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-sm); }
.pt-ic { font-size: 16px; line-height: 1; }
.pt-nm { line-height: 1.25; }

/* "pulling in from Brand Setup" hint */
.memhint {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--accent-soft); font-size: 12.5px; line-height: 1.5;
}
.memhint .mh-ic { color: var(--accent); }
.memhint a { text-decoration: underline; font-weight: 600; }

/* ---------- Resolved-from-memory panel ---------- */
.resolved {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--accent-soft); font-size: 12.5px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 9px;
}
.rz-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rz-head .mh-ic { color: var(--accent); }
.rz-head a { margin-left: auto; text-decoration: underline; font-weight: 500; color: var(--muted); }
.rz-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rz-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); min-width: 84px; }
.rz-items { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.rz-person {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px 3px 3px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line-strong); font-weight: 600;
}
.rz-person img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.rz-person .rz-avatar {
  width: 24px; height: 24px; border-radius: 50%; background: var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted);
}
.rz-person.nophoto { border-style: dashed; color: var(--muted); font-weight: 500; }
.rz-person.placed { border-color: var(--ink); }
.rz-person.unplaced { opacity: .78; }
.rz-person.unplaced img { filter: grayscale(1); }
.rz-tick { color: var(--ok); font-size: 10px; }
.rz-note { font-size: 11.5px; color: var(--muted); }
.rz-suggest {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 9px; border-bottom: 1px solid rgba(0, 0, 0, .07); font-weight: 600;
}
.rz-warn {
  padding: 8px 11px; border-radius: 8px; background: #fff6e6;
  border: 1px solid #f0d9a8; color: #7a5310; font-size: 12px; line-height: 1.5;
}
.rz-warn a { text-decoration: underline; font-weight: 600; }

.rz-ref {
  width: 40px; height: 40px; border-radius: 7px; object-fit: cover;
  border: 1px solid var(--line-strong);
}
.ok-text { color: var(--ok); font-weight: 600; }

/* ---------- Style reference gallery ---------- */
.refgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
.refcard {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--paper-warm);
}
.refcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.refcard input {
  border: none; border-top: 1px solid var(--line); border-radius: 0;
  font-size: 11.5px; padding: 7px 9px; background: var(--paper);
}
.refcard input:focus { box-shadow: none; border-color: var(--line); background: #fff; }
.refdel {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(17, 17, 17, .6); color: #fff;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s;
}
.refcard:hover .refdel { opacity: 1; }
.refdel:hover { background: var(--err); }
.refadd {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 4 / 5; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper-warm); color: var(--muted); font-size: 12px; font-weight: 600;
}
.refadd:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- API Vault: add / edit form ---------- */
.prov-note {
  font-size: 12px; line-height: 1.5; color: var(--muted);
  margin: -6px 0 14px; padding: 8px 11px; border-radius: 8px; background: var(--paper-warm);
}
.prov-note a { color: var(--accent); font-weight: 600; text-decoration: underline; white-space: nowrap; }
.prov-note.warn { background: #fff6e6; color: #7a5310; }
.keyrow.editing { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.keyrow .kbadge {
  margin-left: 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: #7a5310; background: #fff0d6; padding: 1px 7px; border-radius: 999px;
}

/* link chips inside record cards */
.link-field { grid-column: 1 / -1; display: block; margin-bottom: 14px; }
.link-field .lab { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.linkchips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-link { cursor: pointer; background: var(--paper); }
.chip-link:hover { border-color: var(--ink); }
button.chip-on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* brand chip in the Studio header */
.brandchip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 12px 6px 6px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); font-size: 13px; font-weight: 600;
}
.brandchip:hover { border-color: var(--ink); }
.brandchip img { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: var(--paper-warm); }
.brandchip .bc-dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--on-ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.brandchip .bc-edit { font-size: 11px; color: var(--muted); font-weight: 500; }

/* drawer bodies holding controls rather than a code block */
.drawer .body.pad { padding: 16px; }
.drawer .body.pad pre.prompt { border-radius: 10px; }

/* ---------- Brand Setup ---------- */
.setup-meter {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-warm); padding: 16px 18px; margin: 18px 0 26px;
}
.meterbar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meterbar i { display: block; height: 100%; background: var(--ink); transition: width .3s; }
.chip-on { border-color: var(--ink); color: var(--ink); font-weight: 600; }

.savestate { font-size: 12px; color: var(--muted); }
.savestate.ok { color: var(--ok); font-weight: 600; }

.setup-section {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); margin-bottom: 18px; overflow: hidden;
}
.sec-head {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px clamp(16px, 3vw, 24px); background: var(--paper-warm);
  border-bottom: 1px solid var(--line);
}
.sec-num { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 3px; }
.sec-head h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; }
.sec-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.sec-body { padding: 22px clamp(16px, 3vw, 24px); }
.lab-mini { font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.note { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.5; }

/* logo drop */
.logo-drop {
  width: 118px; height: 118px; border-radius: var(--radius);
  border: 1.5px dashed var(--line-strong); background: var(--paper-warm);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 13px; overflow: hidden; transition: border-color .12s;
}
.logo-drop:hover { border-color: var(--ink); }
.logo-drop img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

/* palette swatches */
.sw-cell { position: relative; }
.swatch-input {
  width: 46px; height: 46px; padding: 0; border: 1px solid var(--line-strong);
  border-radius: 10px; background: none; cursor: pointer;
}
.sw-rm {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--muted);
  font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.sw-rm:hover { border-color: var(--err); color: var(--err); }

/* record list (courses / faculty / toppers / stats) */
.reclist { display: flex; flex-direction: column; gap: 12px; }
.reclist-empty {
  font-size: 13px; color: var(--muted); background: var(--paper-warm);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 16px; line-height: 1.5;
}
.reccard {
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 44px 4px 16px; background: var(--paper-warm);
}
.recfields { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 0 14px; }
.recfields .field.wide { grid-column: span 2; }
.recdel {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid transparent; background: none; color: var(--muted); font-size: 17px; line-height: 1;
}
.recdel:hover { background: var(--err-soft); color: var(--err); }
.recphoto-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.recphoto {
  width: 74px; height: 74px; border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 1.5px dashed var(--line-strong); background: var(--paper);
  display: flex; align-items: center; justify-content: center; color: var(--muted-soft); font-size: 18px;
}
.recphoto:hover { border-color: var(--ink); }
.recphoto img { width: 100%; height: 100%; object-fit: cover; }
.linkbtn { border: none; background: none; font-size: 11px; color: var(--muted); text-decoration: underline; padding: 0; }
.linkbtn.muted { text-decoration: none; cursor: default; }

/* ---------- Output variants: true proportions, small cards ---------- */
.variants {
  display: flex; flex-wrap: wrap; gap: 14px;
  grid-template-columns: none;          /* drop the square grid from styles.css */
  align-items: flex-start;
}
.variant { flex: 0 0 auto; width: auto; border-width: 2px; }
/* The box is sized in JS (fitBox) so both dimensions stay small while the
   ratio stays exact; aspect-ratio is only the fallback. */
.variant .vmedia {
  position: relative;
  aspect-ratio: var(--ar, 1);
  max-width: 100%;
  background:
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%) 0 0/16px 16px,
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%) 8px 8px/16px 16px,
    var(--paper);
}
.variant .vmedia img {
  width: 100%; height: 100%;
  aspect-ratio: auto;                   /* override the forced 1/1 */
  object-fit: contain;                  /* never crop — show the real frame */
}
.variant .vzoom {
  position: absolute; top: 7px; right: 7px;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(17, 17, 17, .55);
  color: #fff; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s;
}
.variant:hover .vzoom, .variant.sel .vzoom { opacity: 1; }
.variant .vzoom:hover { background: rgba(17, 17, 17, .85); }
.variant .vlabel { padding: 7px 10px; font-size: 11.5px; gap: 12px; align-items: center; }
.vsize { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.vsize.off { color: var(--warn); }

/* actual-size viewer */
#img-viewer .vviewer {
  background: var(--paper); border-radius: var(--radius);
  width: min(1200px, 94vw); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg);
}
#img-viewer .mhead { flex-shrink: 0; flex-wrap: wrap; gap: 10px; }
#img-viewer .vv-dims { font-size: 12px; color: var(--muted); }
#img-viewer .vv-dims.off { color: var(--warn); font-weight: 600; }
#img-viewer .vv-note { font-size: 11.5px; color: var(--muted); }
.vv-stage {
  flex: 1; min-height: 0; overflow: hidden; padding: 18px;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%) 0 0/18px 18px,
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%) 9px 9px/18px 18px,
    var(--paper-warm);
}
/* display:block + margin:auto — a centred flex child cannot be scrolled back to
   once it overflows, so the actual-size view switches layout mode. */
.vv-stage.scrolls { overflow: auto; display: block; }
.vv-stage.scrolls img { margin: auto; }
.vv-stage img { display: block; box-shadow: var(--shadow-md); flex-shrink: 0; }

/* chip list (subjects / selling points) */
.chiplist { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-height: 24px; }
.chip-tag { display: inline-flex; align-items: center; gap: 6px; }
.chip-tag .x { border: none; background: none; color: var(--muted); font-size: 14px; line-height: 1; padding: 0; }
.chip-tag .x:hover { color: var(--err); }

@media (max-width: 760px) {
  .fld-row { grid-template-columns: 1fr; gap: 20px; }
  .reccard { flex-direction: column; padding-right: 44px; }
  .recfields .field.wide { grid-column: span 1; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Auth gate ---------- */
.authgate {
  display: none; min-height: 100vh; align-items: center; justify-content: center;
  padding: 24px; background: var(--paper-warm);
}
.authbox {
  width: 100%; max-width: 380px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-md);
}
.authbox .brandmark { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 700; }
.authbox .page-sub { margin: 0 0 20px; }
.authbox .auth-err {
  font-size: 12.5px; color: var(--err); background: var(--err-soft);
  border-radius: 8px; padding: 8px 11px; margin-bottom: 14px; display: none;
}
.authbox .auth-err.show { display: block; }
.authbox .auth-switch { font-size: 13px; color: var(--muted); text-align: center; margin-top: 16px; }
.authbox .auth-switch a { font-weight: 600; text-decoration: underline; }