/* PostHelp Calendar - v1 styles. Desktop-primary, responsive-but-not-optimized.
 * Restyled to match PostHelp Captions + the CSV/Sheet Manager reference apps.
 * Build: v18 - brand wordmark is one flex item again (fixes flex-gap splitting Post/Help/Calendar into separate words); only inner Help span is purple. v17 - in-header save/approve confirmation pill (.phcal-head-msg); toast z-index raised above the modal. v16 - imghint font-size forced small + scoped under modal so the Divi theme can't inflate it. v15 - Unscheduled panel toggled from header button (closed by default), in-panel close X; dropped collapsed-rail styling. v13 - restored pinned footer for Draft-with-AI + batch forms (v11 hid every footer, killing their submit buttons). v12 - IMAGE card label matched to the other field labels (gray, not purple). v11 - uniform image buttons (same rest/hover; clicked render button sticks active). v10 - render-in-progress indicator (spinner + overlay on image block, buttons disabled). v9 - header matches Captions (icon image, xl wordmark, padding). v8b - category action spacing. v8 - 6-col platform grid (emoji/hashtag/max), visual weekly schedule grid. v7b - uniform profile field padding/alignment. v7 - tone pills, owner field, timezone dropdown, placeholder padding. v6 - button specificity for re-parented modal, wider centered modal, 2-col fit-no-scroll layout. v5 - editor row layout, footer opaque, modal top offset + max z-index. v4 - icon thumb, single-select grid, clear moved, wordmark tighten. v3 - real purple, solid header, top-radius, dropdown align, modal z-index, bigger thumb. */

:root {
  --ph-primary: #8B5CF6;
  --ph-primary-dark: #7C3AED;
  --ph-primary-soft: #F1F0FF;
  --ph-secondary: #0EA5E9;
  --ph-dark: #111827;
  --ph-gray-50: #F9FAFB;
  --ph-gray-100: #F3F4F6;
  --ph-gray-200: #E5E7EB;
  --ph-gray-300: #D1D5DB;
  --ph-gray-400: #9CA3AF;
  --ph-gray-500: #6B7280;
  --ph-gray-600: #4B5563;
  --ph-gray-700: #374151;
  --ph-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --ph-shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.1);
  --ph-shadow-lg: 0 20px 50px rgba(0,0,0,.3);
}
.phcal-app {
  --ph-primary: #8B5CF6;
  --ph-primary-dark: #7C3AED;
  --ph-primary-soft: #F1F0FF;
  --ph-secondary: #0EA5E9;
  --ph-dark: #111827;
  --ph-gray-50: #F9FAFB;
  --ph-gray-100: #F3F4F6;
  --ph-gray-200: #E5E7EB;
  --ph-gray-300: #D1D5DB;
  --ph-gray-400: #9CA3AF;
  --ph-gray-500: #6B7280;
  --ph-gray-600: #4B5563;
  --ph-gray-700: #374151;
  --ph-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --ph-shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.1);
  --ph-shadow-lg: 0 20px 50px rgba(0,0,0,.3);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ph-dark);
  max-width: 1280px;
  margin: 0 auto;
}
.phcal-app[data-loading] { opacity: .5; pointer-events: none; }
.phcal-gate { padding: 40px; text-align: center; }
.phcal-app * { box-sizing: border-box; }

/* Header band (matches Captions dark purple-black bar) */
.phcal-header {
  background: #1A1D23;
  border-radius: 12px 12px 0 0; padding: 18px 28px; color: #fff;
  box-shadow: var(--ph-shadow-sm); margin-bottom: 0;
}
.phcal-header-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.phcal-brand { font-weight: 700; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem); color: #fff; display: flex; align-items: center; gap: 12px; letter-spacing: -0.5px; }
.phcal-brand-icon { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; display: block; }
.phcal-brand-word { letter-spacing: -0.5px; }
.phcal-brand-word span { color: var(--ph-primary); letter-spacing: -0.5px; }
.phcal-header-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.phcal-profilesel { display: flex; align-items: center; gap: 6px; }
.phcal-profilesel label { font-size: 12px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .04em; }
.phcal-profilesel select { padding: 6px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; background: rgba(255,255,255,.1); color: #fff; font-size: 14px; }
.phcal-profilesel select option { color: #111827; }
.phcal-meter { font-size: 12px; color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }

/* Tabs under the header (Captions Generate/History/Profile style) */
.phcal-tabs { display: flex; gap: 2px; background: #fff; border-radius: 0 0 12px 12px; padding: 0 8px; border: 1px solid var(--ph-gray-200); border-top: none; box-shadow: var(--ph-shadow-sm); margin-bottom: 16px; }
.phcal-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 12px 20px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ph-gray-500); font-family: inherit; }
.phcal-tab:hover { color: var(--ph-primary); }
.phcal-tab.is-active { color: var(--ph-primary); border-bottom-color: var(--ph-primary); }

/* Toolbar / filter card */
.phcal-toolbar { margin-bottom: 16px; }
.phcal-filtercard { background: #fff; border-radius: 12px; padding: 16px 20px; box-shadow: var(--ph-shadow-sm); border: 1px solid var(--ph-gray-200); display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.5fr; gap: 14px; align-items: end; }
.phcal-filtergroup { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.phcal-filterlabel { font-size: 11px; font-weight: 600; color: var(--ph-gray-500); text-transform: uppercase; letter-spacing: .05em; }
.phcal-filtergroup input, .phcal-filtergroup select { padding: 9px 12px; border: 1px solid var(--ph-gray-200); border-radius: 6px; font-size: 14px; font-family: inherit; background: #fff; color: var(--ph-dark); width: 100%; }
.phcal-filtergroup input:focus, .phcal-filtergroup select:focus { outline: none; border-color: var(--ph-primary); box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
.phcal-daterange { display: flex; align-items: center; gap: 6px; }
.phcal-daterange input { padding: 9px 8px; }
.phcal-daterange span { color: var(--ph-gray-400); font-size: 13px; }
.phcal-filtergroup.phcal-filteractions { align-self: start; justify-content: flex-start; }
.phcal-filteractions { display: flex; gap: 8px; align-items: flex-start; padding-top: 2px; }


/* Buttons */
.phcal-app .phcal-btn { border: 1px solid var(--ph-gray-300); background: #fff !important; color: var(--ph-gray-700) !important; border-radius: 6px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s ease; display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: normal; }
.phcal-btn:hover { background: var(--ph-gray-100); transform: translateY(-1px); }
.phcal-app .phcal-btn-primary { background: var(--ph-primary) !important; color: #fff !important; border-color: var(--ph-primary); }
.phcal-app .phcal-btn-primary:hover { background: var(--ph-primary-dark) !important; }
.phcal-app .phcal-btn-ghost { background: var(--ph-gray-100) !important; color: var(--ph-gray-700) !important; }
.phcal-app .phcal-btn-danger { background: #fff !important; color: #b91c1c !important; }
.phcal-btn-ghost { background: var(--ph-gray-100); border-color: var(--ph-gray-200); }
.phcal-btn-danger { color: #b91c1c; border-color: #fecaca; background: #fff; }
.phcal-btn-danger:hover { background: #fef2f2; }
.phcal-btn-sm { padding: 5px 10px; font-size: 12px; }
.phcal-btn-lg { padding: 11px 22px; font-size: 15px; }
.phcal-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.phcal-link { background: none; border: none; color: var(--ph-primary); cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 600; padding: 10px 0; display: inline-block; }
.phcal-link:hover { text-decoration: underline; }

/* Table view */
.phcal-table-wrap { background: #fff; border-radius: 12px; box-shadow: var(--ph-shadow-sm); border: 1px solid var(--ph-gray-200); overflow: auto; max-height: calc(100vh - 360px); min-height: 200px; }
.phcal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.phcal-table thead { position: sticky; top: 0; background: var(--ph-gray-50); z-index: 2; }
.phcal-table th { padding: 13px 14px; text-align: left; font-weight: 600; color: var(--ph-gray-700); border-bottom: 2px solid var(--ph-gray-200); cursor: pointer; user-select: none; white-space: nowrap; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.phcal-table th.phcal-th-nosort { cursor: default; }
.phcal-table th:not(.phcal-th-nosort):hover { background: var(--ph-gray-100); }
.phcal-table th .phcal-sort-arrow { color: var(--ph-gray-400); margin-left: 4px; font-size: .7rem; }
.phcal-table th.is-sorted .phcal-sort-arrow { color: var(--ph-primary); }
.phcal-table td { padding: 11px 14px; border-bottom: 1px solid var(--ph-gray-100); color: var(--ph-gray-700); vertical-align: middle; max-width: 320px; }
.phcal-table td.phcal-td-copy { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ph-gray-500); }
.phcal-table td.phcal-td-title { font-weight: 600; color: var(--ph-dark); }
.phcal-table tbody tr { transition: background .1s; cursor: pointer; }
.phcal-table tbody tr:hover { background: var(--ph-primary-soft); }
.phcal-table-thumb-icon { width: 40px; height: 40px; border-radius: 6px; background: var(--ph-primary-soft); display: flex; align-items: center; justify-content: center; color: var(--ph-primary); cursor: pointer; }
.phcal-table-thumb-icon svg { width: 20px; height: 20px; }
.phcal-table-thumb-none { width: 40px; height: 40px; border-radius: 6px; background: var(--ph-gray-100); display: flex; align-items: center; justify-content: center; color: var(--ph-gray-400); font-size: 16px; }
.phcal-table-thumb-wait { width: 40px; height: 40px; border-radius: 6px; background: var(--ph-primary-soft); display: flex; align-items: center; justify-content: center; color: var(--ph-primary); font-size: 11px; }

/* Action icons */
.phcal-rowactions { display: flex; gap: 4px; white-space: nowrap; }
.phcal-iconbtn { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 6px; color: var(--ph-gray-400); line-height: 0; display: inline-flex; }
.phcal-iconbtn:hover { background: var(--ph-gray-100); color: var(--ph-primary); }
.phcal-iconbtn.phcal-iconbtn-danger:hover { color: #b91c1c; background: #fef2f2; }
.phcal-iconbtn svg { width: 16px; height: 16px; }

/* ===== v1.4.9: tidier posts table ===== */
/* Tighter vertical padding now that Copy/image columns are gone (kept tap-friendly). */
.phcal-table td { padding: 9px 14px; }
/* Single-line ellipsis cells with a hover tooltip (Title + Category). */
.phcal-table td.phcal-td-ellip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phcal-table td.phcal-td-title { font-weight: 600; color: var(--ph-dark); max-width: 360px; }
.phcal-table td.phcal-td-cat { max-width: 160px; color: var(--ph-gray-600); }
.phcal-table th.phcal-th-plat, .phcal-table td.phcal-td-plat { width: 1%; white-space: nowrap; }
/* Platform brand-logo glyph. */
.phcal-plat-glyph { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: default; }
.phcal-plat-glyph svg { width: 22px; height: 22px; display: block; border-radius: 4px; }
/* Image preview as the first item in the actions rail. */
.phcal-railimg { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-right: 2px; }
/* The image preview wraps in a .phcal-thumb-wrap (position:relative for the hover
   pop); make that wrapper fill the box and center its icon so the glyph sits dead
   center like the edit/duplicate/delete icons, not pinned top-left. */
.phcal-railimg.phcal-thumb-wrap { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--ph-primary-soft); color: var(--ph-primary); cursor: pointer; }
.phcal-railimg-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.phcal-railimg-icon svg { width: 16px; height: 16px; display: block; }
.phcal-railimg-wait { background: var(--ph-primary-soft); color: var(--ph-primary); font-size: 12px; }
.phcal-railimg-none { background: transparent; color: var(--ph-gray-300); }
/* The hover preview pop anchors off the rail item now (left of the icon rail). */
.phcal-railimg.phcal-thumb-wrap .phcal-thumb-pop { left: auto; right: 36px; }


/* Status badges */
.phcal-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: .72rem; font-weight: 600; text-transform: capitalize; letter-spacing: .02em; white-space: nowrap; }
.phcal-status-pending { background: #FEF3C7; color: #92400E; }
.phcal-status-approved { background: #D1FAE5; color: #065F46; }
.phcal-status-reminded { background: #DBEAFE; color: #1E40AF; }
.phcal-status-posting { background: #E0E7FF; color: #3730A3; }
.phcal-status-posted { background: #DCFCE7; color: #166534; }
.phcal-status-failed { background: #FEE2E2; color: #991B1B; }
.phcal-status-cancelled { background: var(--ph-gray-100); color: var(--ph-gray-500); }

/* Empty state */
.phcal-empty { background: #fff; border-radius: 12px; padding: 64px 20px; text-align: center; color: var(--ph-gray-500); box-shadow: var(--ph-shadow-sm); border: 1px solid var(--ph-gray-200); }
.phcal-empty p { margin-bottom: 16px; font-size: 15px; }
.phcal-empty button { margin: 4px; }

/* Calendar grid view */
.phcal-gridwrap { background: #fff; border-radius: 12px; box-shadow: var(--ph-shadow-sm); border: 1px solid var(--ph-gray-200); padding: 16px; }
.phcal-grid-header { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 0 14px; }
.phcal-grid-title { font-weight: 700; font-size: 17px; min-width: 180px; text-align: center; color: var(--ph-dark); }
.phcal-grid-layout { display: flex; gap: 12px; align-items: flex-start; }
.phcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; flex: 1; min-width: 0; }
.phcal-grid-dow { font-size: 11px; color: var(--ph-gray-500); text-align: center; font-weight: 600; padding: 4px; text-transform: uppercase; letter-spacing: .03em; }
.phcal-grid-cell { min-height: 96px; border: 1px solid var(--ph-gray-200); border-radius: 8px; padding: 5px; background: #fff; min-width: 0; }
.phcal-grid-cell.is-pad { background: var(--ph-gray-50); border-color: var(--ph-gray-200); }
.phcal-grid-cell.is-dragover { background: var(--ph-primary-soft); border-color: var(--ph-primary); }
.phcal-grid-daynum { font-size: 11px; color: var(--ph-gray-400); margin-bottom: 3px; font-weight: 600; }
.phcal-chip-post { font-size: 11px; padding: 3px 6px; border-radius: 4px; margin-bottom: 3px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-left: 3px solid var(--ph-gray-400); background: var(--ph-gray-50); }
.phcal-chip-post.phcal-status-approved { border-left-color: #14b8a6; }
.phcal-chip-post.phcal-status-pending { border-left-color: #f59e0b; }
.phcal-chip-post.phcal-status-posted { border-left-color: #6D28D9; }
.phcal-chip-post.phcal-status-failed { border-left-color: #ef4444; }
.phcal-chip-post.phcal-status-reminded { border-left-color: #3b82f6; }
.phcal-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ph-gray-200); font-size: 12px; color: var(--ph-gray-600); }
.phcal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.phcal-legend-swatch { width: 12px; height: 12px; border-radius: 3px; border-left: 3px solid var(--ph-gray-400); background: var(--ph-gray-50); flex: 0 0 auto; }
.phcal-legend-swatch.phcal-status-approved { border-left-color: #14b8a6; }
.phcal-legend-swatch.phcal-status-pending { border-left-color: #f59e0b; }
.phcal-legend-swatch.phcal-status-posted { border-left-color: #6D28D9; }
.phcal-legend-swatch.phcal-status-failed { border-left-color: #ef4444; }
.phcal-legend-swatch.phcal-status-reminded { border-left-color: #3b82f6; }
.phcal-qpick { display: flex; gap: 8px; align-items: center; width: 100%; }
.phcal-field .phcal-qpick input[type="date"] { flex: 1 1 60%; min-width: 0; width: auto; }
.phcal-field .phcal-qpick select.phcal-qpick-time { flex: 0 0 auto; width: auto; }
.phcal-chip-plat { font-weight: 700; }

/* Tray */
.phcal-tray { width: 230px; flex: 0 0 auto; border: 1px solid var(--ph-gray-200); border-radius: 8px; padding: 10px; background: var(--ph-gray-50); }
.phcal-tray.is-dragover { background: var(--ph-primary-soft); border-color: var(--ph-primary); }
.phcal-tray-head { font-size: 13px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.phcal-tray-title { display: inline-flex; align-items: center; gap: 6px; }
.phcal-tray-toggle { flex: 0 0 auto; width: 22px; height: 22px; line-height: 1; padding: 0; border: 1px solid var(--ph-gray-200); border-radius: 6px; background: #fff; color: var(--ph-gray-500); font-size: 16px; font-weight: 700; cursor: pointer; }
.phcal-tray-toggle:hover { background: var(--ph-primary-soft); border-color: var(--ph-primary); color: var(--ph-primary-dark); }
.phcal-badge { background: var(--ph-primary); color: #fff; border-radius: 10px; padding: 0 8px; font-size: 11px; font-weight: 600; }
.phcal-tray-list { display: flex; flex-direction: column; gap: 4px; min-height: 40px; }
/* Header toggle button that shows/hides the unscheduled panel. */
.phcal-unsched-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.phcal-unsched-btn.is-active { background: var(--ph-primary); border-color: var(--ph-primary); color: #fff; }
.phcal-unsched-btn.is-active .phcal-badge { background: #fff; color: var(--ph-primary-dark); }

/* Modal / editor */
.phcal-app [hidden], .phcal-modal-backdrop[hidden], .phcal-view[hidden], .phcal-toast[hidden], .phcal-lightbox[hidden] { display: none !important; }
.phcal-modal-backdrop { position: fixed; inset: 0; background: rgba(26,29,35,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 80px 24px 24px; z-index: 2147483600; }
.phcal-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 1200px; /* v1.4.5 r4 - was 1040; the caption refine placeholder was clipped */ max-height: calc(100vh - 104px); display: flex; flex-direction: column; box-shadow: var(--ph-shadow-lg); overflow: hidden; animation: phcalModalIn .22s ease; isolation: isolate; }
.phcal-modal-narrow { max-width: 560px; }
.phcal-modal-backdrop .phcal-btn { background: #fff !important; color: var(--ph-gray-700) !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 600; border: 1px solid var(--ph-gray-300); border-radius: 6px; padding: 9px 16px; }
.phcal-modal-backdrop .phcal-btn-primary { background: var(--ph-primary) !important; color: #fff !important; border-color: var(--ph-primary) !important; }
.phcal-modal-backdrop .phcal-btn-primary:hover { background: var(--ph-primary-dark) !important; }
.phcal-modal-backdrop .phcal-btn-ghost { background: var(--ph-gray-100) !important; }
.phcal-modal-backdrop .phcal-btn-danger { background: #fff !important; color: #b91c1c !important; border-color: #fecaca !important; }
.phcal-editor { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; max-height: 100%; width: 100%; background: #fff; border-radius: 14px; overflow: hidden; }
@keyframes phcalModalIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.phcal-editor-head { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--ph-gray-200); flex-shrink: 0; flex-wrap: wrap; }
.phcal-editor-head h3 { margin: 0; }
.phcal-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.phcal-editor-head .phcal-x { flex-shrink: 0; }
/* header action buttons need the same in-modal styling as the old footer ones */
.phcal-head-actions .phcal-btn { background: #fff; color: var(--ph-gray-700); border: 1px solid var(--ph-gray-300); border-radius: 6px; padding: 7px 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.phcal-head-actions .phcal-btn-primary { background: var(--ph-primary); color: #fff; border-color: var(--ph-primary); }
.phcal-head-actions .phcal-btn-primary:hover { background: var(--ph-primary-dark); }
.phcal-head-actions .phcal-btn-ghost { background: var(--ph-gray-100); }
.phcal-editor-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ph-primary); display: flex; align-items: center; gap: 10px; }
.phcal-x { background: none; border: none; font-size: 26px; cursor: pointer; color: var(--ph-gray-400); line-height: 1; }
.phcal-x:hover { color: var(--ph-gray-700); }
/* v1.1: in-header save/approve confirmation (replaces the toast for those actions,
   which rendered behind the max-z-index modal). Green pill, fades in then auto-hides. */
.phcal-head-msg { font-size: 13px; font-weight: 600; color: #166534; background: #DCFCE7;
  border: 1px solid #BBF7D0; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  opacity: 0; transition: opacity .15s ease; }
.phcal-head-msg.is-show { opacity: 1; }
.phcal-editor-body { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; background: #fff; }
.phcal-editor-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.phcal-editor-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.phcal-editor-ctrlrow { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: end; }
@media (max-width: 760px) { .phcal-editor-row3 { grid-template-columns: 1fr; } .phcal-editor-ctrlrow { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .phcal-editor-cols { grid-template-columns: 1fr; } }
.phcal-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.phcal-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.phcal-editor-body .phcal-field { margin-bottom: 10px; }
.phcal-field label { font-size: 11px; font-weight: 600; color: var(--ph-gray-500); text-transform: uppercase; letter-spacing: .04em; }
.phcal-field input, .phcal-field textarea, .phcal-field select { padding: 9px 11px; border: 1px solid var(--ph-gray-300); border-radius: 6px; font-size: 14px; font-family: inherit; width: 100%; }
.phcal-field input:focus, .phcal-field textarea:focus, .phcal-field select:focus { outline: none; border-color: var(--ph-primary); box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
.phcal-readonly { padding: 9px 11px; background: var(--ph-gray-100); border-radius: 6px; font-size: 14px; color: var(--ph-gray-700); }
.phcal-copy, .phcal-prompt { width: 100%; resize: vertical; }
.phcal-error { background: #FEE2E2; color: #991B1B; padding: 9px 13px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }
.phcal-editor-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--ph-gray-200); flex-shrink: 0; background: #fff; } /* v13: shown again - Draft-with-AI + batch forms put their submit/cancel here. The post editor creates no footer, so it's unaffected. */

/* Editor image column */
.phcal-img-thumb { width: 100%; max-width: 240px; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--ph-gray-200); display: block; }
.phcal-img-placeholder { padding: 36px 12px; text-align: center; background: var(--ph-gray-100); border-radius: 8px; color: var(--ph-gray-400); font-size: 13px; }
.phcal-imgbtns { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.phcal-imghint { font-size: 11px; color: var(--ph-gray-400); }

/* Lightbox */
.phcal-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 30px; z-index: 2147483646; cursor: zoom-out; }
.phcal-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* Refine */
.phcal-refine { margin-top: 6px; }
.phcal-refine-row { display: flex; gap: 6px; margin-top: 6px; }
.phcal-refine-row input { flex: 1; padding: 7px 10px; border: 1px solid var(--ph-gray-300); border-radius: 6px; font-size: 13px; }

/* Chooser / form */
.phcal-chooser { text-align: center; padding: 8px 0; }
.phcal-chooser .phcal-btn-lg { display: block; width: 100%; margin: 16px 0 8px; }
.phcal-form .phcal-btn-primary { margin-top: 10px; }
.phcal-checkrow { display: flex; gap: 8px; flex-wrap: wrap; }
.phcal-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: var(--ph-gray-100); border-radius: 16px; padding: 5px 12px; cursor: pointer; }
.phcal-hint { font-size: 12px; color: var(--ph-gray-400); margin: 8px 0; }

/* Profile editor */
.phcal-section { background: #fff; border: 1px solid var(--ph-gray-200); border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: var(--ph-shadow-sm); }
.phcal-section h4 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--ph-dark); }
.phcal-catlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.phcal-catrow { display: flex; gap: 6px; align-items: flex-start; }
.phcal-catrow .phcal-cat-name { width: 30%; }
.phcal-catrow .phcal-cat-desc { flex: 1; }
.phcal-catrow input { padding: 8px 10px; border: 1px solid var(--ph-gray-300); border-radius: 6px; font-size: 14px; }
/* Category description is an auto-growing textarea (v1.4): one line by default,
   grows to three as you type, draggable taller via the native handle. */
textarea.phcal-cat-desc { padding: 8px 10px; border: 1px solid var(--ph-gray-300); border-radius: 6px; font-size: 14px; font-family: inherit; line-height: 1.4; resize: vertical; overflow: hidden; min-height: 0; display: block; }
textarea.phcal-cat-desc:focus { overflow: auto; }
.phcal-section input, .phcal-section textarea, .phcal-section select { padding: 9px 11px; border: 1px solid var(--ph-gray-300); border-radius: 6px; font-size: 14px; font-family: inherit; width: 100%; }
.phcal-schedjson { width: 100%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }

/* Toast */
.phcal-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ph-dark); color: #fff; padding: 11px 20px; border-radius: 8px; font-size: 14px; z-index: 2147483647; box-shadow: var(--ph-shadow-md); }
.phcal-toast.is-error { background: #b91c1c; }

/* Responsive-but-not-optimized */
@media (max-width: 860px) { .phcal-filtercard { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .phcal-header-top { gap: 10px; }
  .phcal-filtercard { grid-template-columns: 1fr; }
  .phcal-table-wrap { max-height: none; }
  .phcal-grid-layout { flex-direction: column; }
  .phcal-tray { width: 100%; }
  .phcal-grid { gap: 2px; }
  .phcal-grid-cell { min-height: 64px; }
  .phcal-editor-cols, .phcal-editor-grid { grid-template-columns: 1fr; }
  .phcal-modal { max-height: 92vh; }
}

/* v3: thumbnail hover preview popup */
.phcal-thumb-wrap { position: relative; display: inline-block; }
.phcal-thumb-pop { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; padding: 4px; background: #fff; border: 1px solid var(--ph-gray-200); border-radius: 8px; box-shadow: var(--ph-shadow-md); }
.phcal-thumb-pop img { display: block; max-width: 260px; max-height: 260px; border-radius: 6px; }
.phcal-thumb-wrap:hover .phcal-thumb-pop { display: block; }

/* v3: + Add profile button in header */
.phcal-addprofile { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.phcal-addprofile:hover { background: rgba(255,255,255,.2); }


/* v4: section description text (Captions-style helper under section heading) */
.phcal-section-desc { font-size: 13px; color: var(--ph-gray-500); margin: -6px 0 14px; line-height: 1.5; }

/* v4: platform settings grid (row per platform) */
.phcal-psgrid { border: 1px solid var(--ph-gray-200); border-radius: 10px; overflow: hidden; }
.phcal-psgrid-head, .phcal-psgrid-row { display: grid; grid-template-columns: 1.5fr .7fr .7fr .8fr .7fr 1.6fr; align-items: center; gap: 10px; padding: 10px 14px; }
.phcal-psgrid-head { background: var(--ph-gray-50); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ph-gray-500); }
.phcal-psgrid-row { border-top: 1px solid var(--ph-gray-100); }
.phcal-psgrid-row:hover { background: var(--ph-gray-50); }
.phcal-ps-name { font-weight: 600; color: var(--ph-dark); }
.phcal-ps-note { font-size: 11px; color: var(--ph-gray-400); margin-left: 8px; }
.phcal-psgrid-row select { padding: 7px 10px; border: 1px solid var(--ph-gray-300); border-radius: 6px; font-size: 13px; font-family: inherit; width: 100%; }

/* v4: toggle switch (Captions-style) */
.phcal-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.phcal-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.phcal-switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--ph-gray-300); border-radius: 999px; transition: .2s; }
.phcal-switch-slider:before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.phcal-switch input:checked + .phcal-switch-slider { background: var(--ph-primary); }
.phcal-switch input:checked + .phcal-switch-slider:before { transform: translateX(18px); }

/* v7: tone pills (coincident with Captions .ph-pill look) */
.phcal-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.phcal-pill {
  padding: 7px 16px; border-radius: 999px;
  border: 1.5px solid var(--ph-gray-300);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .18s; background: #fff;
  color: var(--ph-gray-700); user-select: none;
}
.phcal-pill:hover { border-color: var(--ph-primary); color: var(--ph-primary); }
.phcal-pill-selected {
  background: var(--ph-primary) !important;
  border-color: var(--ph-primary) !important;
  color: #fff !important;
}

/* v7: placeholder padding - the e.g. text was jammed against the left border.
   Give every profile field input/textarea/select a roomier, consistent inset. */
.phcal-section input, .phcal-section textarea, .phcal-section select,
.phcal-field input, .phcal-field textarea, .phcal-field select { padding: 10px 13px; }
.phcal-catrow input { padding: 10px 13px; }
.phcal-section input::placeholder, .phcal-section textarea::placeholder,
.phcal-field input::placeholder, .phcal-field textarea::placeholder,
.phcal-catrow input::placeholder { color: var(--ph-gray-400); opacity: 1; }

/* v7b: uniform padding + alignment for every field in the Profile view.
   Single-line inputs, textareas, and selects all share the same inset so the
   left edge of the placeholder/value text lines up down the whole form. */
.phcal-profile input[type=text],
.phcal-profile input[type=number],
.phcal-profile input[type=search],
.phcal-profile textarea,
.phcal-profile select { padding: 10px 13px !important; }

/* v8: max # input in platform grid */
.phcal-ps-max { width: 64px; padding: 7px 9px !important; border: 1px solid var(--ph-gray-300); border-radius: 6px; font-size: 13px; text-align: center; }

/* v8: visual weekly schedule grid */
.phcal-sched { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.phcal-sched-plat { border: 1px solid var(--ph-gray-200); border-radius: 10px; padding: 12px 14px; }
.phcal-sched-platname { font-weight: 700; font-size: 13px; color: var(--ph-dark); margin-bottom: 10px; }
.phcal-sched-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.phcal-sched-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.phcal-sched-dow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ph-gray-500); text-align: center; }
.phcal-sched-cell select { padding: 7px 6px !important; border: 1px solid var(--ph-gray-300); border-radius: 6px; font-size: 12px; width: 100%; background: #fff; }
.phcal-sched-cell select:focus { outline: none; border-color: var(--ph-primary); box-shadow: 0 0 0 3px rgba(139,92,246,.18); }
@media (max-width: 720px) {
  .phcal-sched-days { grid-template-columns: repeat(2, 1fr); }
  .phcal-psgrid-head, .phcal-psgrid-row { grid-template-columns: 1.2fr .6fr .6fr .6fr .6fr 1.2fr; gap: 6px; font-size: 12px; }
}

/* v8b: spacing between + Add a category and Suggest categories with AI */
.phcal-cat-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.phcal-cat-actions .phcal-link { padding: 6px 0; }

/* ── v10: Edit modal rework ─────────────────────────────────────────────── */

/* Inline label-beside-field: label sits left, control fills the rest, on one
   line. Applied to the direct .phcal-field children of the left column and the
   image card (Title, Post Copy, Image Prompt, Image Suggestion). The
   Platform/Category/Date row (.phcal-editor-row3) keeps stacked labels. */
.phcal-iform .phcal-editor-cols { align-items: start; }
.phcal-iform > div > .phcal-field,
.phcal-iform .phcal-imgcard > .phcal-field {
  display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: start; margin-bottom: 12px;
}
.phcal-iform > div > .phcal-field > label,
.phcal-iform .phcal-imgcard > .phcal-field > label {
  padding-top: 9px; margin: 0; text-align: right; line-height: 1.25;
}
/* refine row sits in the input column (spans nothing extra), under its field */
.phcal-iform .phcal-field .phcal-refine-row { grid-column: 2; }

/* The image group card - colored background so image + its controls read as one unit */
.phcal-imgcard { background: var(--ph-primary-soft); border: 1px solid #E4E1FB; border-radius: 12px; padding: 16px; }
.phcal-imgcard-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ph-gray-500); margin-bottom: 8px; }
.phcal-imgcard .phcal-field label { color: var(--ph-gray-600); }
.phcal-imgcard textarea, .phcal-imgcard select, .phcal-imgcard input { background: #fff; }

/* Image: centered, smaller, click to enlarge */
.phcal-imgblock { display: flex; justify-content: center; margin-bottom: 14px; }
.phcal-img-thumb { width: auto; max-width: 200px; max-height: 240px; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--ph-gray-200); display: block; background: #fff; }
.phcal-img-placeholder { width: 100%; }

/* one-line refine row */
.phcal-refine-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.phcal-refine-row input { flex: 1; padding: 8px 11px; border: 1px solid var(--ph-gray-300); border-radius: 6px; font-size: 13px; min-width: 0; }

/* image render buttons + hint */
.phcal-imgbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; justify-content: center; }
/* v16: scope under the re-parented modal + !important so the Divi theme's
   paragraph font-size can't inflate the hint text (it was rendering large). */
.phcal-modal-backdrop .phcal-imghint,
.phcal-imghint { font-size: 12px !important; line-height: 1.5 !important; color: var(--ph-gray-500); margin: 10px 0 0; }

/* Approve / primary button in the re-parented modal - belt and suspenders so the
   Divi theme can't win and paint it white-on-white. Covers default + disabled. */
.phcal-modal-backdrop .phcal-btn-primary,
.phcal-modal-backdrop button.phcal-btn-primary {
  background: var(--ph-primary) !important; color: #fff !important; border: 1px solid var(--ph-primary) !important;
}
.phcal-modal-backdrop .phcal-btn-primary:disabled { background: #C4B5FD !important; color: #fff !important; border-color: #C4B5FD !important; opacity: 1; }

@media (max-width: 760px) {
  .phcal-iform > div > .phcal-field,
  .phcal-iform .phcal-imgcard > .phcal-field { grid-template-columns: 1fr; }
  .phcal-iform > div > .phcal-field > label,
  .phcal-iform .phcal-imgcard > .phcal-field > label { text-align: left; padding-top: 0; }
}

/* ── v12 fixes ──────────────────────────────────────────────────────────── */

/* Every button inside the modal (header actions AND image-card buttons) must be
   visible - the Divi theme repaints unstyled buttons white-on-white. Force all
   three variants with !important so nothing in the modal is invisible. */
.phcal-modal-backdrop .phcal-btn,
.phcal-modal-backdrop button.phcal-btn {
  background: #fff !important; color: var(--ph-gray-700) !important; border: 1px solid var(--ph-gray-300) !important;
  border-radius: 6px !important; padding: 7px 13px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: normal !important; cursor: pointer; font-family: inherit;
}
.phcal-modal-backdrop .phcal-btn-primary,
.phcal-modal-backdrop button.phcal-btn-primary {
  background: var(--ph-primary) !important; color: #fff !important; border-color: var(--ph-primary) !important;
}
.phcal-modal-backdrop .phcal-btn-primary:hover { background: var(--ph-primary-dark) !important; }
.phcal-modal-backdrop .phcal-btn-ghost { background: var(--ph-gray-100) !important; color: var(--ph-gray-700) !important; }
.phcal-modal-backdrop .phcal-btn-sm { padding: 6px 11px !important; font-size: 13px !important; }

/* Modal inputs: roomy left padding so placeholder text isn't jammed against the
   border (same problem we fixed on the profile page). */
.phcal-modal input[type=text],
.phcal-modal input[type=datetime-local],
.phcal-modal textarea,
.phcal-modal select { padding: 9px 12px !important; }
.phcal-modal .phcal-readonly { padding: 9px 12px; }

/* Image rides to the top of the card, aligned with the IMAGE label - no wasted
   space above it. */
.phcal-imgcard { padding-top: 12px; }
.phcal-imgblock { margin: 0 0 12px; align-items: flex-start; justify-content: flex-start; }
.phcal-img-thumb { max-width: 180px; max-height: 220px; }

/* Refine row: the input must shrink so the Refine button is never clipped. */
.phcal-refine-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; width: 100%; }
.phcal-refine-row input { flex: 1 1 auto; min-width: 0; }
.phcal-refine-row .phcal-btn { flex: 0 0 auto; white-space: nowrap; }
.phcal-iform .phcal-field .phcal-refine-row { grid-column: 2; }

/* v15: image card top row - IMAGE label left, image floated right to fill space */
.phcal-imgcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.phcal-imgcard-top .phcal-imgcard-title { margin: 0; padding-top: 2px; flex: 0 0 116px; width: 116px; text-align: right; }
.phcal-imgcard-top .phcal-imgblock { margin: 0; flex: 1 1 auto; display: flex; justify-content: center; }
.phcal-imgcard-top .phcal-img-thumb { max-width: 220px; max-height: 280px; }
.phcal-imgcard-top .phcal-img-placeholder { width: 100%; max-width: 220px; }


/* --- Image render in-progress indicator (build v10) --- */
@keyframes phcalSpin { to { transform: rotate(360deg); } }
.phcal-img-rendering {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; min-height: 120px; padding: 24px 12px;
  background: var(--ph-gray-100); border-radius: 8px; text-align: center;
}
.phcal-img-rendering .phcal-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(139, 92, 246, .25);
  border-top-color: var(--ph-primary);
  animation: phcalSpin .8s linear infinite;
}
.phcal-img-rendering .phcal-rendering-label { font-size: 13px; color: var(--ph-gray-500, #6b7280); }
.phcal-imgbtns.is-rendering button { opacity: .5; pointer-events: none; }


/* --- Uniform image buttons (build v11) ---
 * All three (Render from Prompt, Render from Copy, Upload) share one resting and
 * one hover style. Clicking a render button gives it .is-active, which sticks it
 * in the same purple the hover uses so you can see which mode you last ran.
 * Scoped to .phcal-imgbtns + !important to beat the generic backdrop button rules. */
.phcal-modal-backdrop .phcal-imgbtns .phcal-btn,
.phcal-modal-backdrop .phcal-imgbtns button.phcal-btn {
  background: var(--ph-gray-100) !important;
  color: var(--ph-gray-700) !important;
  border: 1px solid var(--ph-gray-300) !important;
}
.phcal-modal-backdrop .phcal-imgbtns .phcal-btn:hover,
.phcal-modal-backdrop .phcal-imgbtns button.phcal-btn:hover {
  background: var(--ph-primary) !important;
  color: #fff !important;
  border-color: var(--ph-primary) !important;
}
.phcal-modal-backdrop .phcal-imgbtns .phcal-btn.is-active,
.phcal-modal-backdrop .phcal-imgbtns button.phcal-btn.is-active {
  background: var(--ph-primary) !important;
  color: #fff !important;
  border-color: var(--ph-primary) !important;
}

/* --- Batch progress message + editor prev/next nav (build v14) --- */
.phcal-batch-progress { text-align: center; padding: 28px 18px 8px; }
.phcal-batch-spinner {
  width: 34px; height: 34px; margin: 0 auto 16px;
  border: 4px solid var(--ph-gray-200, #e5e7eb);
  border-top-color: var(--ph-primary);
  border-radius: 50%;
  animation: phcalSpin .8s linear infinite;
}
.phcal-batch-progress-title { font-weight: 700; font-size: 1.05rem; margin: 0 0 10px; color: var(--ph-gray-800, #1f2937); }
.phcal-batch-progress-line { color: var(--ph-gray-600, #4b5563); margin: 0 auto 8px; max-width: 440px; line-height: 1.45; }

.phcal-editor-nav { display: flex; align-items: center; gap: 8px; }
.phcal-editor-nav .phcal-nav-pos { font-size: .85rem; color: var(--ph-gray-600, #4b5563); min-width: 56px; text-align: center; }
.phcal-editor-nav .phcal-btn[disabled] { opacity: .4; cursor: default; }

/* ── v1.3 GBP editor card + descriptor badges ───────────────────────────── */
.phcal-gbp-card {
  margin-top: 14px;
  margin-bottom: 14px; /* v1.4.5 r2 - the card butted against the Status field */
  padding: 12px 14px;
  border: 1px solid #d7dce5;
  border-radius: 8px;
  background: #f7f9fc;
}
.phcal-gbp-title {
  font-weight: 600;
  font-size: 13px;
  color: #36507a;
  margin-bottom: 8px;
}
.phcal-gbp-card .phcal-field { margin-bottom: 8px; }
/* v1.4.9 - GBP real-photo recommendation callout */
.phcal-gbp-tip {
  font-size: 12px;
  color: #4a4326;
  line-height: 1.45;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #fff8e6;
  border: 1px solid #f0e0a8;
  border-radius: 6px;
}
.phcal-gbp-tip strong { color: #7a6516; }
.phcal-gbp-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin: 6px 0;
  cursor: pointer;
}
.phcal-gbp-row { display: flex; gap: 10px; }
.phcal-gbp-row .phcal-field { flex: 1; }
.phcal-gbp-group {
  margin: 4px 0 2px;
  padding-left: 8px;
  border-left: 2px solid #d7dce5;
}
.phcal-gbp-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: #2a4d7a;
  background: #e6eefc;
  border: 1px solid #c4d6f2;
  border-radius: 10px;
  white-space: nowrap;
}
.phcal-gbp-badge-sm {
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
}
.phcal-gbp-note {
  font-size: 12px;
  color: #5a6b85;
  margin: -2px 0 8px;
  padding-left: 2px;
  line-height: 1.4;
}

.phcal-app .phcal-input-tabs,
.phcal-modal-backdrop .phcal-input-tabs { display: flex; gap: 4px; margin: 4px 0 14px; border-bottom: 1px solid var(--ph-gray-300); }
.phcal-app .phcal-input-tab,
.phcal-modal-backdrop .phcal-input-tab { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ph-gray-500); cursor: pointer; border-radius: 8px 8px 0 0; line-height: 1.2; }
.phcal-app .phcal-input-tab:hover,
.phcal-modal-backdrop .phcal-input-tab:hover { color: var(--ph-primary); background: rgba(139,92,246,.06); }
.phcal-app .phcal-input-tab-active,
.phcal-modal-backdrop .phcal-input-tab-active { color: var(--ph-primary); background: #fff; border-color: var(--ph-gray-300); border-bottom: 2px solid #fff; }
.phcal-app .phcal-input-panel,
.phcal-modal-backdrop .phcal-input-panel { display: none; }
.phcal-app .phcal-input-panel-active,
.phcal-modal-backdrop .phcal-input-panel-active { display: block; }
.phcal-app .phcal-photo-preview,
.phcal-modal-backdrop .phcal-photo-preview { margin: 8px 0 4px; }
.phcal-app .phcal-photo-preview-img,
.phcal-modal-backdrop .phcal-photo-preview-img { max-width: 100%; max-height: 220px; border-radius: 8px; border: 1px solid var(--ph-gray-300); display: block; }

/* v1.4.3 - PostProxy Connections panel (profile editor). Replaces the raw JSON textarea. */
.phcal-app .phcal-ppconn,
.phcal-modal-backdrop .phcal-ppconn { margin: 4px 0 2px; }
.phcal-app .phcal-ppconn-bar,
.phcal-modal-backdrop .phcal-ppconn-bar { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.phcal-app .phcal-ppconn-status,
.phcal-modal-backdrop .phcal-ppconn-status { font-size: 12px; color: var(--ph-gray-500); }
.phcal-app .phcal-ppconn-usage,
.phcal-modal-backdrop .phcal-ppconn-usage { font-size: 12px; color: var(--ph-gray-500); margin: 2px 0 6px; }
.phcal-app .phcal-ppconn-rows,
.phcal-modal-backdrop .phcal-ppconn-rows { display: flex; flex-direction: column; gap: 6px; }
.phcal-app .phcal-ppconn-row,
.phcal-modal-backdrop .phcal-ppconn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phcal-app .phcal-ppconn-plat,
.phcal-modal-backdrop .phcal-ppconn-plat { min-width: 84px; font-weight: 600; font-size: 13px; }
.phcal-app .phcal-ppconn-chip,
.phcal-modal-backdrop .phcal-ppconn-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.6; }
.phcal-app .phcal-ppconn-chip.is-ok,
.phcal-modal-backdrop .phcal-ppconn-chip.is-ok { background: rgba(16,185,129,.12); color: #047857; }
.phcal-app .phcal-ppconn-chip.is-warn,
.phcal-modal-backdrop .phcal-ppconn-chip.is-warn { background: rgba(245,158,11,.15); color: #b45309; }
.phcal-app .phcal-ppconn-chip.is-mapped,
.phcal-modal-backdrop .phcal-ppconn-chip.is-mapped { background: rgba(139,92,246,.12); color: var(--ph-primary); }
.phcal-app .phcal-ppconn-chip.is-off,
.phcal-modal-backdrop .phcal-ppconn-chip.is-off { background: var(--ph-gray-100, #f3f4f6); color: var(--ph-gray-500); }
.phcal-app .phcal-ppconn-sel,
.phcal-modal-backdrop .phcal-ppconn-sel { flex: 1 1 200px; min-width: 160px; padding: 5px 8px; border: 1px solid var(--ph-gray-300); border-radius: 8px; font-size: 13px; }



/* v1.4.4 - Team tab. The card reuses .phcal-section (white card + h4 heading)
   so the title matches the other tabs. Member rows + add-member form here. */
.phcal-team-section { max-width: 760px; }
.phcal-team-section .phcal-hint { font-size: 13px; color: var(--ph-gray-500); margin: 0 0 14px; line-height: 1.5; }
.phcal-team-list { margin-bottom: 16px; }
.phcal-team-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ph-gray-200); }
.phcal-team-row:last-child { border-bottom: none; }
.phcal-team-row .phcal-team-name { font-weight: 600; color: var(--ph-dark); }
.phcal-team-row .phcal-hint { margin: 0; }
/* Add-member form: a tidy row of spaced fields with the button aligned to them. */
.phcal-team-add-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 4px; }
.phcal-team-add-form .phcal-field { flex: 1 1 180px; margin-bottom: 0; }
.phcal-team-add-btn-wrap { flex: 0 0 auto; }
@media (max-width: 600px) {
  .phcal-team-add-form .phcal-field { flex: 1 1 100%; }
  .phcal-team-add-btn-wrap { flex: 1 1 100%; }
  .phcal-team-add-btn-wrap .phcal-btn { width: 100%; }
}

/* ── v1.4.5 - Write caption from image + CSV import ─────────────────────── */
/* r4: the button is primary (purple) so it reads as an action, not an input;
   min-height matches the Refine button, which flex-stretches to its input's
   ~34px box (a lone button on its own row has nothing to stretch to). */
.phcal-app .phcal-capfromimg-row,
.phcal-modal-backdrop .phcal-capfromimg-row { margin-top: 6px; }
.phcal-app .phcal-capfromimg-btn,
.phcal-modal-backdrop .phcal-capfromimg-btn { white-space: nowrap; flex: 0 0 auto; }
.phcal-modal-backdrop .phcal-csv-progress { color: #4b5563; font-size: 13px; margin: 8px 0 0; line-height: 1.45; }
.phcal-modal-backdrop .phcal-csv-help { font-size: 13px; color: #444; line-height: 1.45; }
.phcal-modal-backdrop .phcal-csv-help ul { margin: 6px 0 10px 18px; padding: 0; }
.phcal-modal-backdrop .phcal-csv-help li { margin: 2px 0; }
.phcal-modal-backdrop .phcal-csv-help code { background: #f1f1f4; padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.phcal-modal-backdrop .phcal-csv-result { margin-top: 10px; }
.phcal-modal-backdrop .phcal-csv-ok { color: #1a7f37; font-weight: 600; margin: 4px 0; }
.phcal-modal-backdrop .phcal-csv-err { color: #b42318; font-size: 12px; margin: 2px 0; }