/* ============================================================
   ta-asset-workbench-v0.4.6.css
   INBXIFY TA Studio — Asset Workbench
   Companion script: ta-asset-workbench-v0.4.2.js

   v0.4.4 — Event (Concept C) + Real Estate (Concept A) standalone
            render styles. Reuse the .awb-article-render card shell;
            add .awb-ev-* and .awb-re-* layout. Studio tokens.
   v0.4.3 — Article standalone render styles (.awb-article-render) +
            BAKED article typography for production parity. See the
            HC-AWB-ART block below. v0.3.3 — No style changes (filename parity w/ JS preview-proxy fix). v0.3.2 — All-asset-type support (no new styles; reuses awb- system).
            v0.2.0 — Read-webhook hydration + loading state + real URL
            pattern. v0.1.0 — SCAFFOLD. Studio design system (teal/gold/cream,
            DM Sans / Fraunces). Overlay shell mirrors .asf-overlay.
            Left render pane (iframe) + right params sidebar with
            subtle per-MEDIA Name + ID captions.
   ============================================================ */

.ta-asset-workbench {
  --teal:#1a3a3a;
  --teal-light:#244a4a;
  --gold:#c4a35a;
  --gold-deep:#a98639;
  --cream-bg:#faf9f5;
  --canvas:#ffffff;
  --tile-border:#e8e4d8;
  --text-dark:#1a3a3a;
  --text-mid:#5a6a5a;
  --text-light:#8a8a7a;
  --text-tiny:#a0a090;
  --row-bg:#fafaf6;
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;

  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
}
.ta-asset-workbench *,
.ta-asset-workbench *::before,
.ta-asset-workbench *::after { box-sizing:border-box; }

/* ── Overlay shell (mirrors .asf-overlay) ── */
.awb-overlay {
  position:fixed;
  inset:0;
  background:var(--teal);
  z-index:10000;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.awb-panel {
  width:100%;
  max-width:1400px;
  background:var(--cream-bg);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.awb-shell { display:flex; flex-direction:column; flex:1; }

/* ── Header ── */
.awb-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:24px 32px 20px;
  border-bottom:1px solid var(--tile-border);
  background:var(--canvas);
}
.awb-eyebrow {
  display:block;
  font-size:11px;
  letter-spacing:0.12em;
  font-weight:600;
  color:var(--gold-deep);
  margin-bottom:6px;
}
.awb-title {
  font-family:'Fraunces',Georgia,serif;
  font-size:30px;
  font-weight:600;
  color:var(--teal);
  line-height:1.1;
  margin:0;
}
.awb-header-r { display:flex; gap:10px; flex-shrink:0; }

/* ── Body: render pane (left) + sidebar (right) ── */
.awb-body {
  display:flex;
  flex:1;
  min-height:0;
  gap:0;
}
.awb-render {
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  background:#eceae0;
  min-width:0;
}
.awb-render--empty {
  align-items:center;
  justify-content:center;
  padding:60px;
}
.awb-render-note {
  max-width:360px;
  text-align:center;
  color:var(--text-light);
  font-size:14px;
  line-height:1.5;
}
.awb-render-bar {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  background:var(--canvas);
  border-bottom:1px solid var(--tile-border);
  font-size:12px;
}
.awb-render-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
.awb-render-url {
  color:var(--text-mid);
  font-family:var(--mono);
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}
.awb-render-open {
  color:var(--gold-deep);
  font-weight:600;
  text-decoration:none;
  flex-shrink:0;
}
.awb-render-open:hover { text-decoration:underline; }
.awb-iframe {
  flex:1;
  width:100%;
  border:0;
  background:#fff;
}

/* ── Sidebar ── */
.awb-sidebar {
  flex:0 0 360px;
  background:var(--canvas);
  border-left:1px solid var(--tile-border);
  padding:24px;
  overflow-y:auto;
}
.awb-sb-section { margin-bottom:28px; }
.awb-sb-h {
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--teal);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:2px solid var(--teal);
  display:flex;
  align-items:center;
  gap:8px;
}
.awb-sb-count {
  font-size:11px;
  background:var(--teal);
  color:#fff;
  border-radius:10px;
  padding:1px 8px;
  font-weight:600;
}
.awb-sb-rows { display:flex; flex-direction:column; }
.awb-sb-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid #f0eee4;
  font-size:13px;
}
.awb-sb-label { color:var(--text-light); flex-shrink:0; }
.awb-sb-value { color:var(--text-dark); text-align:right; font-weight:500; }
.awb-sb-value.mono { font-family:var(--mono); font-size:11px; color:var(--text-mid); }

/* ── Media list — subtle Name + ID captions ── */
.awb-media-list { display:flex; flex-direction:column; gap:10px; }
.awb-media-item {
  display:flex;
  gap:12px;
  align-items:center;
  padding:8px;
  background:var(--row-bg);
  border:1px solid var(--tile-border);
  border-radius:8px;
}
.awb-media-thumb {
  width:48px; height:48px;
  border-radius:6px;
  object-fit:cover;
  flex-shrink:0;
  background:#e4e1d4;
}
.awb-media-thumb--none {
  display:block;
}
.awb-media-meta {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.awb-media-role {
  font-size:11px;
  font-weight:600;
  color:var(--gold-deep);
  letter-spacing:0.04em;
}
.awb-media-name {
  font-size:12px;
  color:var(--text-dark);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* subtle, muted, small — testing affordance, not a focal element */
.awb-media-id {
  font-size:10px;
  color:var(--text-tiny);
  font-family:var(--mono);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.awb-media-empty,
.awb-media-list .awb-media-empty {
  font-size:13px;
  color:var(--text-light);
  padding:8px 0;
}


/* ============================================================
   v0.4.3 · ARTICLE STANDALONE RENDER
   Faithful render of the article itself — no page, no iframe,
   no chrome. Sits in the LEFT render pane for assetType=article.
   ============================================================ */
.awb-render--standalone {
  background:#eceae0;
  overflow:hidden;
}
.awb-art-scroll {
  flex:1;
  overflow-y:auto;
  padding:32px 24px 64px;
  display:flex;
  justify-content:center;
}
/* The article "sheet" — white card, centered, fixed comfortable measure */
.awb-article-render {
  width:100%;
  max-width:720px;
  background:#fff;
  border:1px solid var(--tile-border);
  border-radius:8px;
  padding:40px 48px 52px;
  box-shadow:0 1px 4px rgba(26,58,58,0.06);
}

/* Title — matches on-page .ts-article-title (Fraunces, teal) */
.awb-article-render .awb-art-title {
  font-family:'Fraunces',Georgia,serif;
  font-size:34px;
  font-weight:600;
  line-height:1.12;
  color:var(--teal);
  margin:0 0 18px;
}

/* Teaser Summary — ABOVE hero. SS1 typography (Spectral 20/1.9,
   #393a3c, letter-spacing -1px, justified). */
.awb-article-render .awb-art-summary {
  font-family:'Spectral',Georgia,serif;
  font-size:20px;
  font-weight:400;
  line-height:1.9;
  color:#393a3c;
  letter-spacing:-1px;
  text-align:justify;
  margin:0 0 24px;
}

/* Hero (MAIN Image) */
.awb-article-render .awb-art-hero {
  margin:0 0 20px;
  border-radius:4px;
  overflow:hidden;
}
.awb-article-render .awb-art-hero img {
  display:block;
  width:100%;
  height:auto;
}

/* Writer */
.awb-article-render .awb-art-writer {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px;
  color:var(--text-mid);
  margin:0 0 14px;
}
.awb-article-render .awb-art-writer-label {
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--text-light);
}
.awb-article-render .awb-art-writer-name { font-weight:600; color:var(--text-dark); }

/* Share bar — static visual parity (on-page Option-A circles) */
.awb-article-render .awb-art-share {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 0 4px;
  margin:0 0 20px;
  border-top:1px solid #f0eee4;
}
.awb-article-render .awb-art-share-label {
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--teal);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.awb-article-render .awb-art-share-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border-radius:50%;
  background:#f0edd8;
}
.awb-article-render .awb-art-share-btn svg {
  width:16px; height:16px;
  stroke:var(--teal);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ── HC-AWB-ART · BAKED article body typography ──────────────
   DUPLICATES the live article template <head> .article-body-rte
   styles for production parity in standalone View. Sources:
   ta-rte v1.1.15 article <head> block + SS1 body typography.
   IF the article template typography changes, THIS MUST CHANGE
   IN LOCKSTEP — or both should move to a shared stylesheet the
   article page + View load by reference. Tracked: Hardcoding-Tracker.
   image sizes 33/50/75/100 = HC-IMG-001 parity. ──────────────── */
.awb-art-body { margin-top:4px; }
.awb-art-body--empty { color:var(--text-light); font-size:13px; font-style:italic; }

.awb-article-render .article-body-rte h2 {
  font-family:'Fraunces',Georgia,serif;
  font-size:24px; font-weight:600; line-height:1.25;
  color:#1A3A3A; margin:32px 0 12px;
  text-transform:none; letter-spacing:normal;
}
.awb-article-render .article-body-rte h3 {
  font-family:'Fraunces',Georgia,serif;
  font-size:22px; font-weight:600; line-height:1.3;
  color:#1A3A3A; margin:24px 0 10px;
  text-transform:none; letter-spacing:normal;
}
/* Body text — SS1: Spectral 20/1.9 #393a3c, letter-spacing -1px.
   (Article page ships 18/1.95 at #2a2a2a; SS1 is the authority Jeff
   gave for THIS render — kept consistent with the summary above.) */
.awb-article-render .article-body-rte p,
.awb-article-render .article-body-rte div,
.awb-article-render .article-body-rte span {
  font-family:'Spectral',Georgia,serif;
  font-size:20px; font-weight:400; line-height:1.9;
  color:#393a3c; letter-spacing:-1px;
}
.awb-article-render .article-body-rte p { margin:0 0 16px; }
.awb-article-render .article-body-rte strong { font-weight:600; color:#1A3A3A; }
.awb-article-render .article-body-rte em { font-style:italic; color:#4a5a4a; }
.awb-article-render .article-body-rte blockquote {
  border-left:3px solid #C4A35A;
  margin:24px 0; padding:4px 0 4px 20px;
  font-style:italic; color:#4a5a4a;
}
.awb-article-render .article-body-rte a {
  color:#1A3A3A; text-decoration:underline;
  text-decoration-color:#C4A35A; text-underline-offset:3px;
}
.awb-article-render .article-body-rte a:hover { color:#C4A35A; }

/* Inline RTE figure images — 33/50/75/100 parity (HC-IMG-001) */
.awb-article-render .article-body-rte img {
  display:block; max-width:90%; width:auto; height:auto;
  margin:20px auto; border-radius:0; image-orientation:from-image;
}
.awb-article-render .article-body-rte figure.rte-inserted-image {
  display:block; margin:20px auto; border-radius:0; overflow:hidden;
}
.awb-article-render .article-body-rte figure.rte-inserted-image img {
  display:block; width:100%; height:auto; max-width:100%;
}
.awb-article-render .article-body-rte figure.rte-inserted-image figcaption {
  padding:6px 10px; font-size:13px; font-style:italic;
  text-align:center; color:#5a6a5a;
}
.awb-article-render .article-body-rte figure.rte-inserted-image[data-img-size="small"]  { max-width:33%; }
.awb-article-render .article-body-rte figure.rte-inserted-image[data-img-size="medium"] { max-width:50%; }
.awb-article-render .article-body-rte figure.rte-inserted-image[data-img-size="large"]  { max-width:75%; }
.awb-article-render .article-body-rte figure.rte-inserted-image[data-img-size="full"]   { max-width:100%; }
.awb-article-render .article-body-rte figure.rte-inserted-image[data-img-align="left"]   { margin-left:0; margin-right:auto; }
.awb-article-render .article-body-rte figure.rte-inserted-image[data-img-align="center"] { margin-left:auto; margin-right:auto; }
.awb-article-render .article-body-rte figure.rte-inserted-image[data-img-align="right"]  { margin-left:auto; margin-right:0; }

@media (max-width:900px) {
  .awb-article-render { padding:28px 24px 36px; }
  .awb-article-render .awb-art-title { font-size:28px; }
}


/* ── Loading state ── */
.awb-loading {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:60vh;
  color:var(--text-light);
  font-size:14px;
}
.awb-spinner {
  width:32px; height:32px;
  border:3px solid var(--tile-border);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:awb-spin 0.8s linear infinite;
}
@keyframes awb-spin { to { transform:rotate(360deg); } }

/* ── Responsive: stack on narrow ── */
@media (max-width:900px) {
  .awb-body { flex-direction:column; }
  .awb-sidebar { flex:1 1 auto; border-left:0; border-top:1px solid var(--tile-border); }
  .awb-render { min-height:50vh; }
}


/* ============================================================
   v0.4.4 · EVENT standalone render (Concept C)
   ============================================================ */
.awb-ev-card { padding:0 0 40px; overflow:hidden; }
.awb-ev-hero {
  position:relative;
  width:100%; height:220px;
  background:#cdd2c9;
  border-radius:8px 8px 0 0;
  overflow:hidden;
}
.awb-ev-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.awb-ev-hero--none {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:#7a857c; font-size:13px;
}
.awb-ev-chip {
  position:absolute; top:16px; left:16px;
  background:var(--teal); color:#fff;
  border-radius:6px; padding:8px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.awb-ev-chip-mo { font-size:12px; font-weight:700; color:var(--gold); letter-spacing:0.08em; }
.awb-ev-chip-dt { font-size:14px; font-weight:600; }
.awb-ev-card > .awb-ev-title {
  font-family:'Fraunces',Georgia,serif;
  font-size:26px; font-weight:600; color:var(--teal);
  margin:24px 40px 6px; line-height:1.15;
}
.awb-ev-when { font-size:14px; color:var(--text-mid); margin:0 40px 16px; }
.awb-ev-teaser {
  margin:0 40px 8px;
  font-family:'Spectral',Georgia,serif;
  font-size:16px; line-height:1.7; color:#393a3c;
}
.awb-ev-sep { height:1px; background:#f0eee4; margin:16px 40px; }
.awb-ev-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:0 40px;
}
.awb-ev-venue-name { font-size:14px; font-weight:600; color:var(--text-dark); }
.awb-ev-venue-addr { font-size:13px; color:var(--text-mid); margin-top:2px; }
.awb-ev-cta {
  flex-shrink:0;
  background:var(--teal); color:#fff;
  font-size:13px; font-weight:600; text-decoration:none;
  padding:9px 16px; border-radius:6px;
}
.awb-ev-cta:hover { background:var(--teal-light); }

/* ============================================================
   v0.4.4 · REAL ESTATE standalone render (Concept A)
   ============================================================ */
.awb-re-card { padding:0 0 40px; overflow:hidden; }
.awb-re-hero {
  position:relative;
  width:100%; height:240px;
  background:#d8d3c4;
  border-radius:8px 8px 0 0;
  overflow:hidden;
}
.awb-re-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.awb-re-hero--none {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:#7a857c; font-size:13px;
}
.awb-re-badge {
  position:absolute; top:16px; left:16px;
  background:var(--teal); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:0.04em;
  padding:6px 12px; border-radius:13px;
}
.awb-re-price {
  font-family:'Fraunces',Georgia,serif;
  font-size:30px; font-weight:600; color:var(--teal);
  margin:24px 40px 4px;
}
.awb-re-addr { font-size:17px; color:#2a2a2a; margin:0 40px 2px; }
.awb-re-mls { font-size:12px; color:var(--text-light); font-family:var(--mono); margin:0 40px; }
.awb-re-sep { height:1px; background:#f0eee4; margin:16px 40px; }
.awb-re-teaser {
  margin:0 40px;
  font-family:'Spectral',Georgia,serif;
  font-size:16px; font-style:italic; line-height:1.7; color:#393a3c;
}
.awb-re-stats {
  display:flex; gap:12px; margin:16px 40px 0;
}
.awb-re-stat {
  flex:1;
  background:var(--cream-bg);
  border:1px solid var(--tile-border);
  border-radius:6px;
  padding:10px 14px;
  display:flex; flex-direction:column; gap:4px;
}
.awb-re-stat-l { font-size:11px; color:var(--text-light); letter-spacing:0.04em; text-transform:uppercase; }
.awb-re-stat-v { font-size:16px; font-weight:600; color:var(--teal); }
.awb-re-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:0 40px;
}
.awb-re-agent-name { font-size:14px; font-weight:600; color:var(--text-dark); }
.awb-re-agent-broker { font-size:13px; color:var(--text-mid); margin-top:2px; }
.awb-re-cta {
  flex-shrink:0;
  background:var(--teal); color:#fff;
  font-size:13px; font-weight:600; text-decoration:none;
  padding:9px 16px; border-radius:6px;
}
.awb-re-cta:hover { background:var(--teal-light); }

@media (max-width:900px) {
  .awb-ev-card > .awb-ev-title { margin:20px 24px 6px; }
  .awb-ev-when, .awb-ev-teaser, .awb-ev-sep, .awb-ev-foot { margin-left:24px; margin-right:24px; }
  .awb-re-price, .awb-re-addr, .awb-re-mls, .awb-re-sep, .awb-re-teaser, .awb-re-stats, .awb-re-foot { margin-left:24px; margin-right:24px; }
  .awb-re-stats { flex-wrap:wrap; }
}