/* HDX Channels frontend (2.0 premium pass). One variable-driven system: every presentation option the admin exposes
   maps to a CSS custom property or a modifier class on .ccg-guide. Structure-preserving: the table, the sticky first
   column, the package filter isolation (.ccg-is-filtered / .ccg-selected-package-col) and the print clone all still
   work with the same hooks frontend.js uses. */
.ccg-guide{--ccg-pad:14px;--ccg-media:84px;--ccg-radius:14px;--ccg-border-w:1px;--ccg-accent:#111827;font-family:var(--ccg-font-family);font-size:var(--ccg-font-size);font-weight:var(--ccg-font-weight);color:var(--ccg-body-text);max-width:100%;line-height:1.35;-webkit-font-smoothing:antialiased}
.ccg-guide,.ccg-guide *,.ccg-guide *::before,.ccg-guide *::after{box-sizing:border-box}
.ccg-density-compact{--ccg-pad:9px}
.ccg-density-spacious{--ccg-pad:20px}
.ccg-size-sm{--ccg-media:56px}
.ccg-size-lg{--ccg-media:112px}

/* Toolbar: package filter as a segmented control, print as a quiet secondary action. */
.ccg-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.ccg-filter-bar{display:inline-flex;gap:3px;padding:4px;background:color-mix(in srgb,var(--ccg-accent) 7%,#fff);border-radius:999px;flex-wrap:wrap;max-width:100%}
.ccg-filter{border:0;background:transparent;color:var(--ccg-accent);border-radius:999px;padding:8px 14px;margin:0;font:inherit;font-size:.9em;font-weight:600;line-height:1.2;cursor:pointer;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.ccg-filter:hover{background:color-mix(in srgb,var(--ccg-accent) 12%,#fff)}
.ccg-filter:focus-visible,.ccg-print-guide:focus-visible{outline:2px solid var(--ccg-accent);outline-offset:2px}
.ccg-filter.is-active{background:var(--ccg-accent);color:#fff;box-shadow:0 2px 8px color-mix(in srgb,var(--ccg-accent) 35%,transparent)}
.ccg-print-guide{display:inline-flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--ccg-accent) 22%,#fff);background:#fff;color:var(--ccg-accent);border-radius:999px;padding:8px 14px;margin:0;font:inherit;font-size:.9em;font-weight:600;line-height:1.2;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.ccg-print-guide:hover{background:color-mix(in srgb,var(--ccg-accent) 6%,#fff);border-color:color-mix(in srgb,var(--ccg-accent) 40%,#fff)}
.ccg-print-guide::before{content:"";width:14px;height:14px;flex:0 0 auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") center/contain no-repeat}

/* Shell + table */
.ccg-scroll-shell{max-height:var(--ccg-scroll-height);overflow:auto;background:var(--ccg-table-bg);border:1px solid var(--ccg-border);border-radius:var(--ccg-radius);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
.ccg-table{width:100%;min-width:max-content;border-collapse:separate;border-spacing:0;background:var(--ccg-table-bg);margin:0}
.ccg-table th,.ccg-table td{padding:var(--ccg-pad);text-align:center;vertical-align:middle;background:var(--ccg-row-bg);border:0;border-bottom:var(--ccg-border-w) solid var(--ccg-border);border-right:var(--ccg-border-w) solid var(--ccg-border);font-weight:inherit}
.ccg-table tr>*:last-child{border-right:0}
.ccg-table tbody tr:last-child>*{border-bottom:0}
.ccg-table thead th{padding:0;vertical-align:bottom;background:var(--ccg-table-bg)}
.ccg-sticky .ccg-table thead th{position:sticky;top:0;z-index:5}
.ccg-table .ccg-sticky-col{position:sticky;left:0;z-index:4;text-align:left;min-width:200px;max-width:280px;width:240px}
.ccg-table thead .ccg-sticky-col{z-index:6;padding:var(--ccg-pad) calc(var(--ccg-pad) + 4px);background:var(--ccg-table-bg)}
.ccg-channel-col{font-weight:700;font-size:.78em;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--ccg-body-text) 72%,#fff)}
.ccg-count{display:block;margin-top:4px;font-size:.92em;font-weight:500;letter-spacing:0;text-transform:none;color:color-mix(in srgb,var(--ccg-body-text) 58%,#fff)}
.ccg-table tbody tr:hover>*{background:color-mix(in srgb,var(--ccg-row-bg) 94%,var(--ccg-accent))}

/* Package headers */
.ccg-package-col{min-width:150px}
.ccg-package-card{--ccg-pkg-text:var(--ccg-header-text);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;height:100%;min-height:100%;padding:calc(var(--ccg-pad) + 6px) var(--ccg-pad) calc(var(--ccg-pad) + 2px);margin:6px;border-radius:calc(var(--ccg-radius) - 4px);background:var(--ccg-pkg);color:var(--ccg-pkg-text);font-weight:700;letter-spacing:.01em;position:relative;overflow:hidden}
.ccg-header-soft .ccg-package-card{background:color-mix(in srgb,var(--ccg-pkg) 12%,#fff);--ccg-pkg-text:var(--ccg-pkg)}
.ccg-header-outline .ccg-package-card{background:#fff;border:2px solid var(--ccg-pkg);--ccg-pkg-text:var(--ccg-pkg)}
.ccg-header-plain .ccg-package-card{background:transparent;border-radius:0;border-top:4px solid var(--ccg-pkg);margin:0;padding-top:var(--ccg-pad);--ccg-pkg-text:var(--ccg-body-text)}
.ccg-package-media{max-width:100%;display:flex;align-items:center;justify-content:center;width:var(--ccg-media);height:var(--ccg-media);flex:0 0 auto;background:#fff;overflow:hidden;border-radius:999px;box-shadow:0 1px 3px rgba(15,23,42,.14)}
.ccg-header-plain .ccg-package-media{box-shadow:0 0 0 1px var(--ccg-border)}
.ccg-shape-rounded .ccg-package-media{border-radius:max(6px,calc(var(--ccg-radius) - 2px))}
.ccg-shape-square .ccg-package-media{border-radius:0}
.ccg-shape-banner .ccg-package-col{width:220px;min-width:220px;max-width:220px}
.ccg-shape-banner .ccg-package-card{padding-top:0;gap:0}
.ccg-shape-banner .ccg-package-media{width:calc(100% + 2 * var(--ccg-pad));height:auto;aspect-ratio:16/9;margin:0 calc(-1 * var(--ccg-pad)) 10px;border-radius:0;box-shadow:none}
.ccg-header-outline.ccg-shape-banner .ccg-package-media{margin-top:0}
.ccg-header-plain.ccg-shape-banner .ccg-package-card{padding-top:0}
.ccg-header-plain.ccg-shape-banner .ccg-package-media{width:100%;margin:0 0 10px;border-radius:calc(var(--ccg-radius) - 6px)}
.ccg-package-media .dashicons{font-size:calc(var(--ccg-media) * .48);width:calc(var(--ccg-media) * .48);height:calc(var(--ccg-media) * .48);color:var(--ccg-pkg)}
.ccg-package-custom-icon{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;display:block;transform-origin:center center;border-radius:0}
.ccg-package-text{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;min-width:0}
.ccg-package-title{font-size:1em;line-height:1.2;overflow-wrap:anywhere}
.ccg-case-upper .ccg-package-title,.ccg-case-upper .ccg-channel-name-wrap span{text-transform:uppercase;letter-spacing:.04em}
.ccg-package-subtitle{font-size:.8em;font-weight:500;line-height:1.3;opacity:.85}
.ccg-package-badge{font-size:.66em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--ccg-pkg-text) 14%,transparent);color:var(--ccg-pkg-text);margin-bottom:2px;line-height:1.3}
.ccg-header-solid .ccg-package-badge{background:rgba(255,255,255,.22)}

/* Channel rows */
.ccg-channel-name-cell{font-weight:600;color:var(--ccg-body-text)}
.ccg-channel-name-wrap{display:flex;align-items:center;gap:12px;min-width:0;width:100%}
.ccg-channel-name-wrap span{display:block;min-width:0;overflow-wrap:anywhere;line-height:1.25}
.ccg-channel-logo{width:var(--ccg-logo-width);height:var(--ccg-logo-height);object-fit:contain;flex:0 0 auto;border-radius:6px}
.ccg-available-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ccg-icon-color);vertical-align:middle}
.ccg-availability-custom-icon{object-fit:contain}
.ccg-available-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--ccg-pkg,var(--ccg-icon-color));box-shadow:0 0 0 4px color-mix(in srgb,var(--ccg-pkg,var(--ccg-icon-color)) 18%,transparent);vertical-align:middle}
.ccg-avail-fill td.is-available{background:color-mix(in srgb,var(--ccg-pkg) 11%,var(--ccg-row-bg))}
.ccg-avail-fill td.is-available .ccg-available-icon{color:var(--ccg-pkg)}
.ccg-avail-fill tbody tr:hover td.is-available{background:color-mix(in srgb,var(--ccg-pkg) 16%,var(--ccg-row-bg))}

/* Selected-package isolation (desktop and mobile share it) */
.ccg-guide.ccg-is-filtered [data-package-col]{display:none}
.ccg-guide.ccg-is-filtered [data-package-col].ccg-selected-package-col{display:table-cell}
.ccg-guide.ccg-is-filtered .ccg-table{min-width:0;width:100%}
.ccg-guide.ccg-is-filtered .ccg-package-col{min-width:180px}

/* Phones: single consolidated set of rules. Sticky first column + horizontal swipe, filters scroll sideways. */
@media (max-width:767px){
  .ccg-guide{--ccg-pad:10px;--ccg-media:min(var(--ccg-media),64px);font-size:calc(var(--ccg-font-size) * .9)}
  .ccg-toolbar{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:12px}
  .ccg-filter-bar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-radius:14px;padding:4px;scroll-snap-type:x proximity}
  .ccg-filter-bar::-webkit-scrollbar{display:none}
  .ccg-filter{flex:0 0 auto;white-space:nowrap;min-height:40px;scroll-snap-align:start;touch-action:manipulation}
  .ccg-print-guide{justify-content:center;min-height:44px;touch-action:manipulation}
  .ccg-scroll-shell{max-height:none;border-radius:max(10px,calc(var(--ccg-radius) - 4px))}
  .ccg-table .ccg-sticky-col,.ccg-table thead .ccg-sticky-col{min-width:128px;max-width:150px;width:140px}
  .ccg-table thead .ccg-sticky-col{padding:var(--ccg-pad)}
  .ccg-channel-col{font-size:.72em}
  .ccg-package-col{min-width:136px;width:136px;scroll-snap-align:start}
  .ccg-shape-banner .ccg-package-col{width:170px;min-width:170px;max-width:170px}
  .ccg-package-card{margin:4px;gap:8px}
  .ccg-package-title{font-size:.9em}
  .ccg-channel-name-wrap{gap:8px}
  .ccg-channel-logo{max-width:36px;max-height:36px}
  .ccg-guide.ccg-is-filtered .ccg-package-col{min-width:160px;width:auto}
}
@media (max-width:420px){
  .ccg-table .ccg-sticky-col,.ccg-table thead .ccg-sticky-col{min-width:116px;width:120px}
  .ccg-package-col{min-width:128px;width:128px}
}

/* Print / PDF */
@media print{
  .ccg-toolbar,.ccg-print-guide,.ccg-filter-bar{display:none !important}
  .ccg-scroll-shell{max-height:none !important;overflow:visible !important;border:0}
  .ccg-table{min-width:0 !important;width:100% !important}
  .ccg-table thead th,.ccg-table .ccg-sticky-col{position:static !important}
  .ccg-guide{font-size:12px !important}
  .ccg-package-card,.ccg-available-icon,.ccg-available-dot,.ccg-avail-fill td.is-available{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ccg-guide.ccg-is-filtered [data-package-col]{display:none !important}
  .ccg-guide.ccg-is-filtered [data-package-col].ccg-selected-package-col{display:table-cell !important}
}