/* ============================================================
   issues-tab-v1.0.8.css
   = issues-tab-v1.0.7.css + the ↗ new-tab glyph hover rescoped
     from .it-card--archive:hover to .it-card:hover.

   Paired with issues-tab-v1.0.18.js, which gives Active (In
   Progress) cards target="_blank" and the ↗ glyph. The glyph is
   inline-styled in JS at 0.6 opacity; this stylesheet owns the
   hover handoff that brightens it. Scoped to --archive, that
   handoff never fired on Active cards and their glyph sat dim
   through hover. One selector change, no new rules.

   Ship both files together. JS alone = dim Active glyphs.

   Prior header, v1.0.7:
   = issues-tab-v1.0.6.css + .it-clone-btn resized to pill scale.
     No selector, property or rule differs from v1.0.5 — v1.0.5's
     header named v1.0.11 of the JS, which was superseded by
     v1.0.12 (clone scenario renumbered 105 -> 104).

   Cumulative contents vs v1.0.3:
     · .ppm-success-banner--unverified — amber toast-truth variant
       for the "could not verify the write" state (v1.0.10 JS).
     · .it-card-actions — action row holding Promote + Clone inline.
     · .it-clone-btn — teal clone button, quieter than gold Promote.
     · .ppm-clone-note — shared-vs-cloned explainer in the modal.

   Pairs with issues-tab-v1.0.15.js.

   NOTE: the .ppm-number-input spinner-suppression rules further
   down are now inert — that input became type="text" in v1.0.10
   so it has no spinners. Left in place deliberately; harmless,
   and removing them is churn.
   ============================================================ */

/* ─── Promote to Next button (Active cards only) ────────────── */
.it-promote-btn {
  margin-top: 10px;
  align-self: flex-start;
  padding: 7px 14px;
  background: transparent;
  color: #8a6a30;
  border: 1.5px solid #C4A35A;
  border-radius: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.it-promote-btn:hover:not(:disabled) {
  background: #C4A35A;
  color: #ffffff;
}
.it-promote-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.it-promote-btn:focus-visible {
  outline: 2px solid #5b7fff;
  outline-offset: 2px;
}
.it-promote-btn:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}
.it-promote-btn--busy {
  border-color: #d4cfbf;
  color: #8a8a7a;
}
.it-promote-btn--done {
  border-color: #1A3A3A;
  background: #1A3A3A;
  color: #C4A35A;
}

/* ─── Promote toast (success / failure) ─────────────────────── */
.it-promote-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10002;
  padding: 12px 22px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(26, 58, 58, 0.25);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: ppmSlideDown 0.25s ease-out;
}
.it-promote-toast--ok {
  background: #1A3A3A;
  color: #ffffff;
}
.it-promote-toast--err {
  background: #fef2f0;
  color: #c0392b;
  border: 1px solid #f5b8ad;
}
.it-promote-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.it-promote-toast--ok .it-promote-toast-icon {
  background: #10b981;
  color: #ffffff;
}
.it-promote-toast--err .it-promote-toast-icon {
  background: #c0392b;
  color: #ffffff;
}

/* ============================================================
   issues-tab-v1.0.1.css

   Issues tab on the T-A page — companion to issues-tab-v1.0.2.js
   (MNA Workstream A-4).

   v1.0.1 changes from v1.0.0:
     - All .ppm-* modal styles REMOVED (Add PubPlan modal retired).
     - .pp-add-btn header button REMOVED (no longer in header HTML).
     - All .it-* card list + zone styles PRESERVED unchanged.

   Design tokens:
     Primary:    #5b7fff  electric blue (hover, In Progress accents)
     Accent:     #C4A35A  gold (In Progress pill text + border)
     Teal text:  #1A3A3A  primary text + Locked pill bg
     Body BG:    #FAF9F5  matches T-A page
     Card BG:    #FFFFFF
     Border:     #e8e4d8  warm light tan
     Muted:      #8a8a7a  meta text gray

   Load AFTER title-admin-page-design CSS in Webflow <head>.
   ============================================================ */


/* ─── Container ─────────────────────────────────────────────── */
.it-overview {
  padding: 8px 0 40px;
  font-family: 'DM Sans', sans-serif;
  color: #1A3A3A;
}

/* ─── Empty state (zero pubplans anywhere) ──────────────────── */
.it-overview-empty {
  padding: 48px 24px;
}
.it-empty-state {
  background: #faf9f5;
  border: 1px dashed #d4cfbf;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5a6a5a;
  line-height: 1.5;
}
.it-empty-state strong {
  color: #1A3A3A;
  font-weight: 600;
}

/* ─── Zone (Active or Archive) ──────────────────────────────── */
.it-zone {
  margin-top: 24px;
}
.it-zone:first-child {
  margin-top: 12px;
}

/* Zone header — label + count */
.it-zone-hdr {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid #e8e4d8;
  margin-bottom: 14px;
}
.it-zone-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #1A3A3A;
}
.it-zone-count {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #8a8a7a;
}
.it-zone-count::before { content: '· '; opacity: 0.6; }

/* Visual differentiation between Active and Archive zone headers */
.it-zone--active .it-zone-label {
  color: #1A3A3A;
}
.it-zone--archive .it-zone-label {
  color: #8a8a7a;
}
.it-zone--archive .it-zone-hdr {
  border-bottom-color: #efebe0;
}

/* ─── Zone grid ─────────────────────────────────────────────── */
.it-zone-grid {
  display: grid;
  gap: 14px;
}
.it-zone-grid--active {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.it-zone-grid--archive {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

/* Per-zone empty state (zone exists but no cards) */
.it-zone-empty {
  grid-column: 1 / -1;
  padding: 18px 20px;
  background: #faf9f5;
  border: 1px dashed #e0dccd;
  border-radius: 8px;
  font-size: 13px;
  color: #8a8a7a;
  text-align: center;
}

/* ─── Card (base) ───────────────────────────────────────────── */
.it-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1.5px solid #e8e4d8;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.1s,
    background 0.15s;
}
.it-card:hover {
  border-color: #5b7fff;
  box-shadow: 0 4px 14px rgba(91, 127, 255, 0.10);
}
.it-card:active {
  transform: translateY(1px);
}
.it-card:focus-visible {
  outline: 2px solid #5b7fff;
  outline-offset: 2px;
}
.it-card[data-no-detail] {
  cursor: default;
  opacity: 0.6;
}
.it-card[data-no-detail]:hover {
  border-color: #e8e4d8;
  box-shadow: none;
}

/* ─── Card — Active variant (prominent) ─────────────────────── */
.it-card--active {
  padding: 18px 20px;
}
.it-card--active .it-card-id {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b7fff;
}
.it-card--active .it-card-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1A3A3A;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ─── Card — Archive variant (condensed, muted) ─────────────── */
.it-card--archive {
  padding: 12px 14px;
  background: #fcfbf6;
  border-color: #efebe0;
}
.it-card--archive:hover {
  background: #ffffff;
}
.it-card--archive .it-card-id {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1A3A3A;
}
.it-card--archive .it-card-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #5a6a5a;
  line-height: 1.3;
}

/* ─── Card meta row (date + status pill cluster) ────────────── */
.it-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.it-card-date {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #8a8a7a;
  letter-spacing: 0.02em;
}
.it-card-date--empty {
  opacity: 0.5;
}

/* ─── Status pills ──────────────────────────────────────────── */
.it-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.it-pill--inprogress {
  background: rgba(196, 163, 90, 0.15);
  color: #8a6a30;
  border: 1px solid rgba(196, 163, 90, 0.35);
}
.it-pill--locked {
  background: #1A3A3A;
  color: #C4A35A;
  border: 1px solid #1A3A3A;
}

/* On card hover, the ↗ glyph next to the status pill brightens.
   The glyph itself is inline-styled in JS; this is the hover handoff.
   v1.0.8: was .it-card--archive:hover. Active cards open the PubPlan
   in a new tab as of JS v1.0.18 and carry the same glyph, so the
   handoff is scoped to .it-card. Cards without a glyph match nothing
   and are unaffected. */
.it-card:hover [aria-label="opens in new tab"] {
  opacity: 1 !important;
  color: #5b7fff !important;
}

/* ─── Mobile tweaks ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .it-zone-grid--active,
  .it-zone-grid--archive {
    grid-template-columns: 1fr;
  }
  .it-card--active {
    padding: 14px 16px;
  }
  .it-card--active .it-card-name {
    font-size: 16px;
  }
}

/* ---- Add-a-PubPlan modal (.ppm-*) ---- */
/* ─── Backdrop ──────────────────────────────────────────────── */
.ppm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 58, 58, 0.45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ppmFadeIn 0.18s ease-out;
}

/* ─── Modal shell ───────────────────────────────────────────── */
.ppm-modal {
  position: relative;
  z-index: 10001;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(26, 58, 58, 0.25);
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  font-family: 'DM Sans', sans-serif;
  animation: ppmSlideUp 0.22s ease-out;
}

/* ─── Header ────────────────────────────────────────────────── */
.ppm-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #e8e4d8;
}

.ppm-hdr h3 {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1A3A3A;
  letter-spacing: -0.01em;
}

.ppm-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #8a8a7a;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.ppm-close:hover {
  background: #faf9f5;
  color: #1A3A3A;
}

/* ─── Body ──────────────────────────────────────────────────── */
.ppm-body {
  padding: 18px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ppm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ppm-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a6a5a;
  font-weight: 600;
}

.ppm-help {
  font-size: 11px;
  color: #8a8a7a;
  line-height: 1.4;
}

/* ─── Inputs ────────────────────────────────────────────────── */
.ppm-input {
  width: 100%;
  padding: 10px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #1A3A3A;
  background: #ffffff;
  border: 1.5px solid #e8e4d8;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.ppm-input:focus {
  outline: none;
  border-color: #5b7fff;
  box-shadow: 0 0 0 3px rgba(91, 127, 255, 0.12);
}

.ppm-input[type="date"] {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  /* Native date picker icon — keep default, browser-styled */
}

/* ─── Issue row: prefix label + number input ────────────────── */
.ppm-issue-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1.5px solid #e8e4d8;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ppm-issue-row:focus-within {
  border-color: #5b7fff;
  box-shadow: 0 0 0 3px rgba(91, 127, 255, 0.12);
}

.ppm-prefix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: #faf9f5;
  border-right: 1px solid #e8e4d8;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: #1A3A3A;
  white-space: nowrap;
  user-select: none;
}

/* Number input inside the issue row — strip its own border, inherit row border */
.ppm-number-input {
  flex: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 500;
}

.ppm-number-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

/* Hide spinners on number input — cleaner look */
.ppm-number-input::-webkit-outer-spin-button,
.ppm-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ppm-number-input {
  -moz-appearance: textfield;
}

.ppm-preview {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #5b7fff;
  margin-top: 2px;
  padding-left: 2px;
}

/* ─── Error banner ──────────────────────────────────────────── */
.ppm-error {
  background: #fef2f0;
  border: 1px solid #f5b8ad;
  color: #c0392b;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.ppm-error[hidden] { display: none !important; }

/* ─── Actions ───────────────────────────────────────────────── */
.ppm-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px 20px;
  border-top: 1px solid #e8e4d8;
  margin-top: 8px;
}

.ppm-cancel-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #C4A35A;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.15s;
}

.ppm-cancel-link:hover {
  color: #a78645;
}

.ppm-create-btn {
  padding: 10px 20px;
  background: #5b7fff;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  min-width: 110px;
}

.ppm-create-btn:hover:not(:disabled) {
  background: #4a6ce8;
}

.ppm-create-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.ppm-create-btn:disabled {
  background: #b8c4ef;
  cursor: not-allowed;
}

.ppm-create-btn:focus-visible {
  outline: 2px solid #5b7fff;
  outline-offset: 2px;
}

/* ─── Success banner (post-create, pre-reload) ──────────────── */
.ppm-success-banner {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10002;
  padding: 12px 24px;
  background: #1A3A3A;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(26, 58, 58, 0.3);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: ppmSlideDown 0.25s ease-out;
}

/* Toast-truth: request succeeded but the response carried no
   fieldData echo, so we cannot confirm what was written. Amber,
   not green — we have not earned the check. Expected only until
   Scenario 103 blueprint v1.1 is imported. */
.ppm-success-banner--unverified {
  background: #7A5C18;
  box-shadow: 0 8px 24px rgba(122, 92, 24, 0.32);
}

.ppm-success-banner--unverified .ppm-success-icon {
  background: rgba(255, 255, 255, 0.22);
  font-weight: 700;
}

.ppm-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #10b981;
  color: #ffffff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.ppm-hdr,
  .ppm-body,
  .ppm-actions {
    padding-left: 18px;
    padding-right: 18px;
  }


/* ─── v1.0.11 · Clone a PubPlan ─────────────────────────────── */

/* Action row — holds Promote and Clone side by side on Active cards.
   Was a bare button before v1.0.11; wrapping lets both sit inline
   without either stretching. */
.it-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.it-card-actions .it-promote-btn {
  margin-top: 0;
}

/* Clone button — v1.0.7: sized to the .it-pill scale (see line ~335)
   so it reads as a chip alongside the ACTIVE / LOCKED tag rather than
   as a second primary action. Every metric matched to .it-pill:
   3px 9px padding, 999px radius, 9px DM Mono, 700, 0.06em tracking,
   uppercase, 1.4 line-height. Teal outline keeps it distinguishable
   from both pill fills. Only the border-width differs (1.5px vs the
   pill's 1px) so it still reads as pressable. */
.it-clone-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 9px;
  background: transparent;
  color: #1A3A3A;
  border: 1.5px solid #1A3A3A;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.it-clone-btn:hover {
  background: #1A3A3A;
  color: #FAF9F5;
}

.it-clone-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Shared-vs-cloned explainer inside the clone modal. This is the one
   thing an operator can get wrong — editing a shared picker on the
   clone silently changes the source edition. Say it up front. */
.ppm-clone-note {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: #FAF9F5;
  border-left: 3px solid #C4A35A;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4a4a42;
}

.ppm-clone-note strong {
  color: #1A3A3A;
  font-weight: 600;
}