/* ===========================================================
   ta-page-head-v1.4.css
   INBXIFY Title-Admin Page — Head Styles
   v1.1: RTE toolbar styles, sct-generated H2 red,
         char counter under/ok states
   v1.2: Align SCT max-width to 900px (match Content Manager)
   v1.3: Remove SCT max-width — fill Webflow layout like Clients tab
   v1.4: Shared tab header (.cm-hdr) extracted from Content Processor.
         All tabs reuse these classes for consistent headers.
   =========================================================== */

/* ===========================================================
   SHARED TAB HEADER — reusable across all T-A page tabs
   Pattern:
     <div class="cm-hdr">
       <div class="cm-hdr-left">
         <div class="cm-hdr-icon">📋</div>
         <div><h3>Tab Title</h3><div class="cm-hdr-sub">SUBTITLE</div></div>
       </div>
       <span class="cm-badge">v1.0</span>
     </div>
   =========================================================== */
.cm-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 2px solid #1a3a3a; margin-bottom: 14px;
}
.cm-hdr-left { display: flex; align-items: center; gap: 10px; }
.cm-hdr-icon {
  width: 30px; height: 30px; background: #1a3a3a; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: #c4a35a; font-size: 14px;
}
.cm-hdr h3 { font-size: 16px; font-weight: 700; color: #1a3a3a; margin: 0; }
.cm-hdr-sub {
  font-size: 10px; font-family: 'DM Mono', monospace; color: #8a8a7a;
  letter-spacing: .04em; text-transform: uppercase;
}
.cm-badge {
  font-family: 'DM Mono', monospace; font-size: 9px; padding: 3px 8px;
  background: #1a3a3a; color: #c4a35a; border-radius: 2px; letter-spacing: .06em;
}

/* ===========================================================
   INPUTS & FORM ELEMENTS
   =========================================================== */
input[type="text"],
input[type="number"],
input[type="date"],
textarea {
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 12px !important;
  padding: 12px 16px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #333 !important;
  box-sizing: border-box !important;
}
input[type="text"],
input[type="number"],
input[type="date"] {
  height: 44px !important;
}
textarea {
  min-height: 80px !important;
  resize: vertical !important;
}
input::placeholder,
textarea::placeholder {
  color: #9ca3af !important;
}
input:focus,
textarea:focus {
  outline: none !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* ===========================================================
   CHOICES.JS
   =========================================================== */
.choices { margin: 0 !important; }
.choices__inner {
  font-family: 'Tenor Sans', sans-serif !important;
  font-size: 12px !important;
  padding: 12px 16px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  background: #fff !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}
.choices__list--dropdown .choices__item {
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-family: 'Tenor Sans', sans-serif !important;
}

/* ===========================================================
   SUCCESS RING ANIMATION
   =========================================================== */
.slot-pulse-ring.play {
  animation: pulseRing 5s ease-out forwards;
}
@keyframes pulseRing {
  0%   { width: 0;    height: 0;    opacity: 0.9; box-shadow: 0 0 0  0  rgba(255,216,77,0.9); }
  40%  { width: 22px; height: 22px; opacity: 0.5; box-shadow: 0 0 12px 6px rgba(255,216,77,0.6); }
  100% { width: 40px; height: 40px; opacity: 0;   box-shadow: 0 0 20px 10px rgba(255,216,77,0); }
}

/* ===========================================================
   PUBPLAN MODAL
   =========================================================== */
#pubplan-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: none;
  justify-content: flex-end;
  align-items: stretch;
  background: rgba(0,0,0,0.40);
  overflow: hidden;
}
#pubplan-modal .pubplan-modal-panel {
  width: 420px;
  max-width: 100%;
  height: 100vh !important;
  background: #fff;
  position: relative;
  overflow-y: auto;
  padding: 32px 24px;
  box-shadow: -4px 0 18px rgba(0,0,0,0.12);
  transform: translateX(100%);
  transition: transform 280ms ease-out;
}
#pubplan-modal.is-active .pubplan-modal-panel {
  transform: translateX(0);
}

/* ===========================================================
   SCREENSHOT TRANSCRIBER — injected into #screenshot-transcriber-mount
   =========================================================== */
#screenshot-transcriber-mount {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #1a3a3a;
  min-height: 200px;
}

.sct-root { padding: 16px 0; }

/* Header */
.sct-hdr { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:2px solid #1a3a3a; margin-bottom:16px; }
.sct-hdr-left { display:flex; align-items:center; gap:10px; }
.sct-hdr-icon { width:30px; height:30px; background:#1a3a3a; border-radius:4px; display:flex; align-items:center; justify-content:center; color:#c4a35a; font-size:14px; }
.sct-hdr h3 { font-size:16px; font-weight:700; color:#1a3a3a; margin:0; }
.sct-hdr-sub { font-size:10px; font-family:'DM Mono',monospace; color:#8a8a7a; letter-spacing:.04em; text-transform:uppercase; margin-top:1px; }
.sct-badge { font-family:'DM Mono',monospace; font-size:9px; padding:3px 8px; background:#1a3a3a; color:#c4a35a; border-radius:2px; letter-spacing:.06em; }

/* Steps */
.sct-steps { display:flex; align-items:center; gap:4px; margin-bottom:16px; flex-wrap:wrap; }
.sct-step { display:flex; align-items:center; gap:5px; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:2px; border:1.5px solid #e8e4d8; color:#a0a090; background:#fff; transition:all .2s; }
.sct-step.active { background:#1a3a3a; color:#f0edd8; border-color:transparent; }
.sct-step.done  { background:#e8f5e9; color:#27ae60; border-color:#d4eed4; }
.sct-step-dot { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.6; flex-shrink:0; }
.sct-step-arr { font-size:9px; color:#a0a090; }

/* Card */
.sct-card { background:#fff; border:1.5px solid #e8e4d8; border-radius:6px; overflow:hidden; margin-bottom:12px; }
.sct-card-bar { height:3px; background:linear-gradient(90deg,#1a3a3a,#c4a35a); }
.sct-card-body { padding:16px; }
.sct-card-title { font-size:13px; font-weight:700; color:#1a3a3a; margin:0 0 2px; }
.sct-card-sub { font-size:10px; font-family:'DM Mono',monospace; color:#8a8a7a; text-transform:uppercase; letter-spacing:.04em; margin:0 0 12px; }

/* Paste zone */
.sct-paste-zone { border:2px dashed #ddd9c8; border-radius:5px; padding:32px 20px; text-align:center; background:#faf9f5; outline:none; user-select:none; transition:all .2s; }
.sct-paste-zone.drag-over { border-color:#1a3a3a; background:#f0f4f4; }
.sct-paste-zone.has-image { border-style:solid; border-color:#c4a35a; background:#fdfcf8; padding:14px; }
.sct-pz-icon { font-size:28px; opacity:.3; margin-bottom:8px; }
.sct-pz-label { font-family:'DM Mono',monospace; font-size:12px; color:#5a6a5a; letter-spacing:.03em; font-weight:500; }
.sct-pz-hint { font-size:10px; color:#a0a090; margin-top:4px; }
.sct-pz-or { font-size:10px; color:#a0a090; margin:8px 0; }
.sct-browse-btn { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; border-radius:2px; border:1.5px solid #ddd9c8; background:#fff; color:#5a6a5a; cursor:pointer; transition:all .15s; }
.sct-browse-btn:hover { border-color:#1a3a3a; color:#1a3a3a; }

/* Thumbnail */
.sct-thumb { max-height:190px; max-width:100%; border-radius:4px; display:block; margin:0 auto; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.sct-thumb-actions { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
.sct-mag-btn, .sct-clear-btn { font-family:'DM Mono',monospace; font-size:9px; padding:3px 10px; border-radius:2px; border:1.5px solid #ddd9c8; background:#fff; cursor:pointer; transition:all .15s; }
.sct-mag-btn:hover { border-color:#1a3a3a; color:#1a3a3a; }
.sct-clear-btn { color:#c0392b; border-color:rgba(192,57,43,.25); }
.sct-clear-btn:hover { background:rgba(192,57,43,.05); }

/* Lightbox */
.sct-lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:9999999; align-items:center; justify-content:center; padding:24px; }
.sct-lightbox.open { display:flex; }
.sct-lightbox img { max-width:92vw; max-height:92vh; border-radius:4px; }
.sct-lb-close { position:fixed; top:18px; right:22px; font-size:20px; color:#fff; cursor:pointer; opacity:.7; font-family:'DM Mono',monospace; padding:4px 8px; }
.sct-lb-close:hover { opacity:1; }

/* Mode toggle */
.sct-mode-toggle { display:flex; border:1.5px solid #ddd9c8; border-radius:3px; overflow:hidden; margin-bottom:12px; width:fit-content; }
.sct-mode-opt { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.04em; padding:6px 16px; cursor:pointer; background:#fff; color:#5a6a5a; border:none; transition:all .15s; border-right:1.5px solid #ddd9c8; }
.sct-mode-opt:last-child { border-right:none; }
.sct-mode-opt.active { background:#1a3a3a; color:#f0edd8; }
.sct-notice-box { padding:8px 12px; background:#f0f4f4; border:1px solid #e8e4d8; border-radius:3px; font-size:10px; font-family:'DM Mono',monospace; color:#5a6a5a; margin-bottom:10px; }

/* Article search */
.sct-article-results { max-height:140px; overflow-y:auto; border:1.5px solid #ddd9c8; border-radius:3px; background:#fff; margin-bottom:8px; }
.sct-article-item { padding:7px 10px; font-size:12px; cursor:pointer; border-bottom:1px solid #e8e4d8; transition:background .1s; }
.sct-article-item:last-child { border-bottom:none; }
.sct-article-item:hover, .sct-article-item.sel { background:#faf9f5; }
.sct-article-item.sel { font-weight:600; color:#1a3a3a; }
.sct-article-meta { font-size:9px; font-family:'DM Mono',monospace; color:#a0a090; margin-top:1px; }
.sct-replace-row { display:flex; gap:12px; align-items:center; padding:6px 0; }
.sct-replace-row label { display:flex; align-items:center; gap:5px; font-family:'DM Mono',monospace; font-size:10px; color:#5a6a5a; cursor:pointer; }
.sct-replace-row input[type=radio] { accent-color:#1a3a3a; }

/* Form labels + inputs */
.sct-fl { display:block; font-size:9px; font-family:'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:#8a8a7a; margin-bottom:4px; }
.sct-fl .req { color:#c0392b; }
.sct-frow { display:flex; gap:10px; margin-bottom:10px; }
.sct-ff { flex:1; min-width:0; }
.sct-finp, .sct-ftxt {
  width:100%; font-family:'DM Sans',system-ui,sans-serif; font-size:12px !important;
  color:#1a3a3a !important; background:#faf9f5 !important; border:1.5px solid #ddd9c8 !important;
  border-radius:3px !important; padding:7px 9px !important; outline:none !important;
  transition:border-color .15s, box-shadow .15s !important;
  height:auto !important; min-height:unset !important;
  box-shadow:none !important;
}
.sct-ftxt { resize:vertical !important; }
.sct-finp:focus, .sct-ftxt:focus { border-color:#1a3a3a !important; box-shadow:0 0 0 2px rgba(26,58,58,.08) !important; }
.sct-finp.has-val, .sct-ftxt.has-val { border-color:#c4a35a !important; box-shadow:0 0 0 2px rgba(196,163,90,.1) !important; }
.sct-char-counter { font-family:'DM Mono',monospace; font-size:9px; color:#a0a090; text-align:right; margin-top:3px; }
.sct-char-counter.warn { color:#e8a030; }
.sct-char-counter.over { color:#c0392b; }
.sct-writers-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; margin-bottom:10px; }
.sct-divider { border:none; border-top:1px dashed #e8e4d8; margin:14px 0; }

/* RTE preview */
.sct-rte { font-size:12px; line-height:1.65; color:#1a3a3a; padding:10px 12px; background:#faf9f5; border:1.5px solid #ddd9c8; border-radius:3px; max-height:280px; overflow-y:auto; outline:none; transition:border-color .15s; }
.sct-rte:focus { border-color:#1a3a3a; box-shadow:0 0 0 2px rgba(26,58,58,.08); }
.sct-rte.has-val { border-color:#c4a35a; }
.sct-rte h2 { font-size:13px; font-weight:700; color:#1a3a3a; margin:10px 0 4px; }
.sct-rte h2:first-child { margin-top:0; }
.sct-rte p { margin-bottom:8px; }
.sct-rte ul { margin:4px 0 8px 18px; }
.sct-rte li { margin-bottom:3px; }
.sct-rte-meta { display:flex; justify-content:space-between; margin-top:4px; }
.sct-rte-meta span { font-size:9px; font-family:'DM Mono',monospace; color:#a0a090; }

/* Transcribe button */
.sct-tx-btn { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:11px 20px; border-radius:3px; border:none; background:#1a3a3a; color:#f0edd8; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-bottom:12px; }
.sct-tx-btn:hover:not(:disabled) { background:#244a4a; }
.sct-tx-btn:disabled { opacity:.35; cursor:not-allowed; }

/* Processing */
.sct-proc-bar { height:3px; background:linear-gradient(90deg,#1a3a3a 0%,#c4a35a 50%,#1a3a3a 100%); background-size:200%; animation:sct-slide 1.5s linear infinite; border-radius:2px; margin-bottom:8px; }
@keyframes sct-slide { 0%{background-position:200%} 100%{background-position:-200%} }
.sct-proc-msg { font-family:'DM Mono',monospace; font-size:10px; color:#5a6a5a; text-align:center; letter-spacing:.04em; }

/* Results panel */
.sct-results { border:2px solid #c4a35a; border-radius:6px; overflow:hidden; margin-bottom:12px; animation:sct-fade .25s ease; }
@keyframes sct-fade { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.sct-results-bar { height:4px; background:linear-gradient(90deg,#1a3a3a,#c4a35a); }
.sct-results-body { padding:16px; }
.sct-results-title { font-size:13px; font-weight:700; color:#1a3a3a; margin:0 0 2px; }
.sct-results-sub { font-size:10px; font-family:'DM Mono',monospace; color:#8a8a7a; text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px; }

/* Submit bar */
.sct-sub-bar { display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid #f0ede4; }
.sct-cancel { font-size:10px; font-family:'DM Mono',monospace; color:#c0392b; cursor:pointer; background:none; border:none; }
.sct-cancel:hover { opacity:.65; }
.sct-sub-right { display:flex; align-items:center; gap:12px; }
.sct-sub-info { font-size:9px; font-family:'DM Mono',monospace; color:#a0a090; }
.sct-save-btn { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:7px 18px; border-radius:3px; border:none; background:#c4a35a; color:#1a3a3a; font-weight:700; cursor:pointer; transition:all .15s; }
.sct-save-btn:hover:not(:disabled) { background:#f4a127; }
.sct-save-btn:disabled { opacity:.35; cursor:not-allowed; }

/* Success */
.sct-success { text-align:center; padding:32px 20px; animation:sct-fade .3s ease; }
.sct-success-icon { font-size:34px; margin-bottom:10px; }
.sct-success-title { font-size:15px; font-weight:700; color:#1a3a3a; margin-bottom:6px; }
.sct-success-sub { font-size:11px; font-family:'DM Mono',monospace; color:#8a8a7a; margin-bottom:14px; }
.sct-success-link { font-family:'DM Mono',monospace; font-size:10px; color:#1a3a3a; text-decoration:underline; cursor:pointer; }
.sct-reset-btn { font-family:'DM Mono',monospace; font-size:10px; padding:6px 18px; border-radius:3px; border:1.5px solid #ddd9c8; background:#fff; color:#5a6a5a; cursor:pointer; margin-top:12px; display:inline-block; transition:all .15s; }
.sct-reset-btn:hover { border-color:#1a3a3a; color:#1a3a3a; }

.sct-hidden { display:none !important; }

/* ── RTE Toolbar ── */
.sct-toolbar {
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  padding:5px 8px; background:#f5f3ee;
  border:1.5px solid #ddd9c8; border-bottom:none;
  border-radius:3px 3px 0 0;
}
.sct-tb-btn {
  font-family:'DM Mono',monospace; font-size:10px; font-weight:500;
  padding:3px 8px; border-radius:2px;
  border:1px solid transparent; background:transparent;
  color:#5a6a5a; cursor:pointer; transition:all .12s;
  line-height:1.4; white-space:nowrap;
}
.sct-tb-btn:hover { background:#fff; border-color:#ddd9c8; color:#1a3a3a; }
.sct-tb-btn:active { background:#e8e4d8; }
.sct-tb-sep { width:1px; height:16px; background:#ddd9c8; margin:0 2px; flex-shrink:0; }
/* When toolbar is present, rte gets square top corners */
.sct-toolbar + .sct-rte { border-radius:0 0 3px 3px; }

/* ── Generated H2 (Claude-invented section headers) ── */
.sct-rte h2.sct-generated { color:#c0392b !important; }
.sct-rte h2.sct-transcribed { color:#1a3a3a; }

/* ── Char counter states ── */
.sct-char-counter.ok   { color:#27ae60; }
.sct-char-counter.under { color:#e8a030; }
.sct-char-counter.warn  { color:#e8a030; }
.sct-char-counter.over  { color:#c0392b; }