/* Atelier additions on top of the existing v2 stylesheet. */

.masthead-sub {
  margin: 4px 0 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted, #807466);
  text-transform: uppercase;
}

.tabs {
  display: flex;
  gap: 0;
  margin: 0 0 18px 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--rule, #d4c8b3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab {
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink-muted, #807466);
  cursor: pointer;
  white-space: nowrap;
}
.tab.active {
  color: var(--ink, #2a201a);
  border-bottom-color: var(--ink, #2a201a);
  font-weight: 600;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.action-row {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 14px; flex-wrap: wrap;
}

.checkbox {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px;
}
.checkbox input { width: auto; margin: 0; }

.status-line {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-muted, #807466);
  min-height: 18px;
}
.status-line.error { color: #b03020; }
.status-line.success { color: #2a6f3a; }

.prompt-preview {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--linen-deep, #ece1c9);
  border: 1px dashed var(--rule, #d4c8b3);
  border-radius: 4px;
}
.prompt-preview h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, #807466);
}
.prompt-preview pre {
  margin: 0;
  font-size: 12px;
  white-space: pre-wrap;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  color: var(--ink, #2a201a);
  max-height: 320px;
  overflow: auto;
}

.gen-result {
  margin-top: 18px;
  padding: 14px;
  background: var(--linen, #f3ede1);
  border: 1px solid var(--rule, #d4c8b3);
  border-radius: 4px;
}
.gen-result h4 {
  margin: 0 0 10px 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted, #807466);
}
.gen-result img {
  max-width: 100%;
  display: block;
  background: #000;
  border-radius: 2px;
}
.muted { color: var(--ink-muted, #807466); font-size: 12px; }
.muted.small { font-size: 11px; }

.source-toggles {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 0;
}
.source-toggles label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule, #d4c8b3);
  border-radius: 999px;
  font-size: 12px;
  background: var(--linen, #f3ede1);
  cursor: pointer;
  user-select: none;
}
.source-toggles input { margin: 0; }
.source-toggles label.tier-2 {
  background: transparent;
  color: var(--ink-muted, #807466);
}

.repo-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--rule, #d4c8b3);
  border-radius: 4px;
  background: var(--linen, #f3ede1);
  margin: 8px 0;
  cursor: pointer;
}
.repo-card img {
  width: 96px; height: 96px; object-fit: cover;
  background: var(--linen-deep, #ece1c9);
  border-radius: 2px;
}
.repo-card .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.repo-card .meta strong {
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.repo-card .meta .sub {
  font-size: 11px; color: var(--ink-muted, #807466);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.repo-card .src-pill {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink, #2a201a);
  color: var(--linen, #f3ede1);
  align-self: flex-start;
  margin-top: 4px;
}

button.mini {
  padding: 4px 10px;
  font-size: 12px;
}

textarea {
  font: inherit;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule, #d4c8b3);
  border-radius: 3px;
  background: #fff;
  resize: vertical;
}

#gen-result-actions button { padding: 6px 12px; font-size: 12px; }

/* atelier.js opens modals via .show; the legacy stylesheet uses .open.
   Map both to display:flex so either works. */
.modal-backdrop.show { display: flex !important; }

/* Project cards reuse the library-card layout from style.css when
   present, but we provide a minimal fallback so the Projects tab is
   readable even before the legacy stylesheet defines library-card. */
.library-card {
  padding: 14px;
  border: 1px solid var(--rule, #d4c8b3);
  border-radius: 4px;
  background: var(--linen, #f3ede1);
  margin: 8px 0;
}
.library-card h3 { margin: 0 0 4px 0; font-size: 14px; }


/* ── Unit toggle buttons ─────────────────────────────────────────── */
.unit-btn {
  padding: 5px 14px;
  border: 1px solid var(--rule, #d4c8b3);
  background: transparent;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink, #2a2218);
  transition: background 0.15s, color 0.15s;
}
.unit-btn.active {
  background: var(--ink, #2a2218);
  color: var(--linen, #f3ede1);
  border-color: var(--ink, #2a2218);
}

/* ── Upload image preview ────────────────────────────────────────── */
.upload-preview-box {
  border: 1px solid var(--rule, #d4c8b3);
  border-radius: 4px;
  padding: 8px;
  background: var(--linen-deep, #ede6d6);
  text-align: center;
}
.upload-preview-box img {
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 3px;
  display: block;
  margin: 0 auto 6px;
}
.upload-preview-name {
  margin: 0;
  word-break: break-all;
}

/* ============================================================
   v3.1 ADDITIONS — UI redesign
   REVERT: delete everything below this banner.
   ============================================================ */

/* Anchored top toolbar (was: scrolled with page) */
.tabs{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--linen);
  box-shadow: 0 2px 8px rgba(26,26,26,.05);
}

/* Universal Intake modal */
.intake-modal{ max-width: 560px; }
.intake-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:14px;
}
.intake-head h3{ margin:0; }
.intake-from{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rust); font-weight:700;
}
.view-toggle{
  display:flex; border:1px solid var(--rule); border-radius:4px;
  overflow:hidden; margin-bottom:12px;
}
.view-toggle button{
  flex:1; border:0; border-radius:0; background:var(--linen);
  color:var(--rule-strong); padding:9px; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; font-weight:700; min-height:40px;
}
.view-toggle button.active{ background:var(--ink); color:var(--paper); }
.intake-img-box{
  position:relative; border:1px solid var(--rule); border-radius:4px;
  overflow:hidden; background:var(--linen-deep); min-height:180px;
  display:flex; align-items:center; justify-content:center; margin-bottom:6px;
}
.intake-img-box img{ width:100%; display:block; }
.intake-img-box .dropmsg{ text-align:center; color:var(--rule-strong); padding:40px 20px; }
.intake-img-box .dropmsg strong{ display:block; color:var(--ink); font-size:1rem; margin-bottom:4px; }
.live-badge{
  position:absolute; bottom:8px; right:8px; background:rgba(166,66,37,.9);
  color:var(--paper); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; padding:3px 7px; border-radius:2px;
}
.edit-stub{
  border:1px dashed var(--rule-strong); border-radius:4px; padding:12px;
  text-align:center; color:var(--rule-strong); font-size:.82rem;
  margin-bottom:14px; background:rgba(110,98,83,.04);
}
.edit-stub strong{ color:var(--ink); }
.intake-foot{
  display:flex; justify-content:space-between; gap:10px; margin-top:8px;
}

/* Repo source pill on cards (dark badge) */
.repo-card .src-pill{
  position:absolute; top:8px; left:8px; background:rgba(26,26,26,.85);
  color:var(--paper); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; padding:3px 7px; border-radius:2px;
}
.repo-card{ position:relative; }

/* Library granular checkpoint under the progress bar */
.checkpoint{ font-size:.74rem; color:var(--ink-soft); margin-top:5px; font-weight:600; }
.checkpoint .pct{ color:var(--rust); }
.checkpoint .sub{ color:var(--rule-strong); font-weight:400; display:block; }

/* v3.1 LOGO: image masthead sizing. REVERT: delete this block. */
.masthead-logo {
  display: block;
  height: clamp(52px, 8vw, 84px);
  width: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.masthead-title { margin: 0; line-height: 1; }

/* ============================================================
   v3.1 b5 LAYOUT — centered logo, gear, full-width tabs.
   Loaded after style.css so these win. REVERT: delete this block.
   ============================================================ */
.masthead {
  position: relative;
  justify-content: center;
  align-items: center;
  padding: 16px 16px 14px;
}
.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.masthead-logo {
  display: block;
  height: clamp(76px, 13vw, 116px);  /* larger than before */
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  user-select: none;
  -webkit-user-drag: none;
}
.masthead-version {
  margin: 6px 0 0;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust);
  font-weight: 700;
}
.gear-btn {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  border-radius: 4px;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.gear-btn:hover { background: var(--rule-strong); color: var(--paper); }

/* Tabs: evenly spaced, full width across the page */
.tabs {
  display: flex;
  gap: 0;
  padding: 0;
  margin: 0 0 18px 0;
  overflow-x: visible;
  border-bottom: 1px solid var(--rule);
}
.tab {
  flex: 1;
  text-align: center;
  padding: 14px 4px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tab:last-child { border-right: 0; }
.tab.active {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0;
}

/* === v3.1 b8 spec === */
/* sans-serif for AI-generated / Upload / institution name */
.intake-from { font-family: var(--sans) !important; }
.repo-card .src-pill {
  position: absolute; top: auto; bottom: 8px; left: 8px;
  font-family: var(--sans);
}
.intake-img-box .dropmsg strong,
.intake-img-box .dropmsg span { font-family: var(--sans); }
/* grayed/locked intake params */
.locked-param,
#intake-aspect:disabled, #intake-colors:disabled, #intake-style:disabled {
  opacity: .55; background: var(--linen-deep, #ece1c9); cursor: not-allowed;
}
/* defensive: keep the toast fully off-screen until shown (black-box guard) */
.toast:not(.show) { visibility: hidden; pointer-events: none; }

/* branding_v2: right-aligned full org-name pill (overflows image if long) */
.repo-card .src-pill { left: auto; right: 8px; bottom: 8px; top: auto; white-space: nowrap; max-width: none; }
/* studio-deploy: right-align repo pill so it overflows the image edge */
.repo-card .src-pill { left: auto; right: 8px; bottom: 8px; top: auto; white-space: nowrap; max-width: none; }