/* ============================================================
   Circular Hub v3 — Professional Editorial Design
   
   Aesthetic: Refined Institutional Authority
   Inspired by premium legal gazettes & financial newspapers
   
   Fonts: Playfair Display (headers) + Source Sans 3 (body) + JetBrains Mono (codes)
   Palette: Deep Navy + Warm Parchment + Gold accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
.ch-wrap {
    /* Core palette */
    --ch-navy:         #0f1f3d;
    --ch-navy-2:       #1a3461;
    --ch-navy-3:       #2a4a82;
    --ch-parchment:    #faf8f4;
    --ch-parchment-2:  #f2ede4;
    --ch-parchment-3:  #e8e0d0;
    --ch-gold:         #c9963a;
    --ch-gold-light:   #f0d9a8;
    --ch-gold-pale:    #fdf6e8;

    /* Text */
    --ch-ink:          #0f1f3d;
    --ch-ink-2:        #2c3e65;
    --ch-ink-3:        #5a6a8a;
    --ch-ink-4:        #8899bb;

    /* Borders */
    --ch-border:       #ddd5c2;
    --ch-border-2:     #c9bda6;
    --ch-border-3:     #b8a98a;

    /* Category accents — richer, more authoritative tones */
    --ch-it-solid:     #1a5fa0;
    --ch-it-bg:        #e8f1fb;
    --ch-it-text:      #0f3d6e;
    --ch-it-rule:      #1a5fa0;

    --ch-gst-solid:    #0a7a4f;
    --ch-gst-bg:       #e4f5ed;
    --ch-gst-text:     #054d31;
    --ch-gst-rule:     #0a7a4f;

    --ch-mca-solid:    #7b2d8b;
    --ch-mca-bg:       #f3e8f8;
    --ch-mca-text:     #4d1a5c;
    --ch-mca-rule:     #7b2d8b;

    /* Summary */
    --ch-summary-bg:   #f7f4ef;
    --ch-summary-border: #d9cdb8;
    --ch-summary-accent: #c9963a;
}

/* ── Reset ──────────────────────────────────────────────────── */
.ch-wrap *, .ch-wrap *::before, .ch-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ch-wrap {
    font-family: 'Source Sans 3', sans-serif;
    color: var(--ch-ink);
    max-width: 940px;
    padding-bottom: 64px;
    line-height: 1.6;
    background: transparent;
}

/* ── Page Header Banner ─────────────────────────────────────── */
.ch-header {
    background: #0f1f3d !important;
    background-color: #0f1f3d !important;
    border-radius: 12px !important;
    padding: 36px 40px 32px !important;
    margin-bottom: 32px !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
}

/* Subtle geometric background pattern */
.ch-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 40px,
            rgba(255,255,255,.015) 40px,
            rgba(255,255,255,.015) 41px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 40px,
            rgba(255,255,255,.015) 40px,
            rgba(255,255,255,.015) 41px
        );
    pointer-events: none;
}

.ch-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ch-gold) 0%, #e8c06a 50%, var(--ch-gold) 100%);
}

.ch-header__eyebrow {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    color: #c9963a !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ch-header__eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(201,150,58,.3);
    max-width: 120px;
}

.ch-header__title {
    font-family: 'Playfair Display', serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
    letter-spacing: -.01em !important;
}

.ch-header__subtitle {
    font-size: 14px !important;
    font-weight: 300 !important;
    color: rgba(255,255,255,.65) !important;
    letter-spacing: .01em !important;
}

.ch-header__stats {
    display: flex !important;
    gap: 28px !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    flex-wrap: wrap !important;
}

.ch-header__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ch-header__stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ch-gold);
    line-height: 1;
}

.ch-header__stat-label {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,.5);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ── Category Tabs ──────────────────────────────────────────── */
.ch-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--ch-border);
    margin-bottom: 0;
    flex-wrap: wrap;
}

.ch-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ch-ink-3);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    letter-spacing: .01em;
    transition: color .2s, border-color .2s, background .2s;
    white-space: nowrap;
    position: relative;
}

.ch-tab:hover {
    color: var(--ch-navy);
    background: var(--ch-parchment);
}

.ch-tab--active {
    color: var(--ch-navy);
    border-bottom-color: var(--ch-gold);
    font-weight: 600;
}

.ch-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    background: var(--ch-parchment-2);
    color: var(--ch-ink-3);
    border-radius: 3px;
    transition: background .2s, color .2s;
}

.ch-tab--active .ch-tab__count {
    background: var(--ch-gold-pale);
    color: var(--ch-gold);
    border: 1px solid var(--ch-gold-light);
}

/* ── Sub-type Pills ─────────────────────────────────────────── */
.ch-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 0 18px;
    border-bottom: 1px solid var(--ch-border);
    margin-bottom: 22px;
}

.ch-subtab {
    display: inline-block;
    padding: 5px 14px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--ch-ink-3);
    text-decoration: none;
    border: 1px solid var(--ch-border);
    border-radius: 3px;
    background: var(--ch-parchment);
    letter-spacing: .02em;
    transition: all .15s;
    white-space: nowrap;
}

.ch-subtab:hover {
    color: var(--ch-navy);
    border-color: var(--ch-border-3);
    background: var(--ch-parchment-2);
}

.ch-subtab--active {
    background: var(--ch-navy);
    border-color: var(--ch-navy);
    color: #fff;
}

/* Gap between tabs and next element */
.ch-tabs + .ch-search,
.ch-tabs + .ch-meta { margin-top: 22px; }

/* ── Search Bar ─────────────────────────────────────────────── */
.ch-search { margin-bottom: 18px; }

.ch-search__inner {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--ch-border-2);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 1px 3px rgba(15,31,61,.04);
}

.ch-search__inner:focus-within {
    border-color: var(--ch-navy-3);
    box-shadow: 0 0 0 3px rgba(15,31,61,.07);
}

.ch-search__icon {
    display: flex;
    align-items: center;
    padding: 0 10px 0 16px;
    color: var(--ch-ink-4);
    flex-shrink: 0;
}

.ch-search__input {
    flex: 1;
    border: none;
    outline: none;
    padding: 13px 4px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--ch-ink);
    background: transparent;
    min-width: 0;
}

.ch-search__input::placeholder {
    color: var(--ch-ink-4);
    font-style: italic;
}

.ch-search__btn {
    padding: 0 24px;
    height: 48px;
    background: var(--ch-navy);
    color: #fff;
    border: none;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
}

.ch-search__btn:hover { background: var(--ch-navy-2); }

.ch-search__clear {
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: var(--ch-ink-4);
    text-decoration: none;
    font-size: 15px;
    transition: color .15s;
}
.ch-search__clear:hover { color: var(--ch-ink); }

/* ── Results meta bar ───────────────────────────────────────── */
.ch-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--ch-ink-3);
    margin-bottom: 20px;
    padding: 10px 14px;
    background: var(--ch-parchment);
    border: 1px solid var(--ch-border);
    border-radius: 5px;
    letter-spacing: .01em;
}

.ch-meta strong { color: var(--ch-navy); font-weight: 600; }
.ch-meta em { font-style: italic; color: var(--ch-ink-2); }
.ch-meta__empty { color: var(--ch-ink-3); }
.ch-meta__empty strong { color: var(--ch-navy); }

.ch-meta__updated {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ch-ink-4);
    letter-spacing: .03em;
}

/* ── Card list ──────────────────────────────────────────────── */
.ch-list { display: flex; flex-direction: column; gap: 1px; }

/* ── Card ───────────────────────────────────────────────────── */
.ch-card {
    background: #fff;
    border: 1px solid var(--ch-border);
    border-left: 4px solid var(--ch-border-2);
    position: relative;
    transition: border-left-color .2s, box-shadow .2s, transform .15s;
}

/* First card gets top-rounded corners, last gets bottom-rounded */
.ch-list > .ch-card:first-child { border-radius: 6px 6px 0 0; }
.ch-list > .ch-card:last-child  { border-radius: 0 0 6px 6px; }
.ch-list > .ch-card:only-child  { border-radius: 6px; }

.ch-card:hover {
    box-shadow: 0 2px 16px rgba(15,31,61,.08);
    transform: translateX(2px);
    z-index: 1;
}

/* Left border colour by category */
.ch-card--it:hover  { border-left-color: var(--ch-it-rule);  }
.ch-card--gst:hover { border-left-color: var(--ch-gst-rule); }
.ch-card--mca:hover { border-left-color: var(--ch-mca-rule); }

.ch-card--it  { border-left-color: var(--ch-it-solid);  }
.ch-card--gst { border-left-color: var(--ch-gst-solid); }
.ch-card--mca { border-left-color: var(--ch-mca-solid); }

/* Thin top divider between stacked cards */
.ch-list > .ch-card + .ch-card {
    border-top: 1px solid var(--ch-border);
}

/* Card header */
.ch-card__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 14px 22px 0;
}

/* ── Badges ─────────────────────────────────────────────────── */
.ch-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ch-badge--it  { background: var(--ch-it-bg);  color: var(--ch-it-text);  }
.ch-badge--gst { background: var(--ch-gst-bg); color: var(--ch-gst-text); }
.ch-badge--mca { background: var(--ch-mca-bg); color: var(--ch-mca-text); }

.ch-badge--sub {
    background: var(--ch-parchment-2);
    color: var(--ch-ink-3);
    border: 1px solid var(--ch-border);
    letter-spacing: .04em;
    font-weight: 500;
}

/* Circular number */
.ch-card__no {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--ch-ink-3);
    background: var(--ch-parchment);
    border: 1px solid var(--ch-border);
    border-radius: 3px;
    padding: 1px 7px;
    letter-spacing: .02em;
}

/* Date */
.ch-card__date {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--ch-ink-4);
    letter-spacing: .03em;
    white-space: nowrap;
}

/* Card title */
.ch-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ch-navy);
    padding: 9px 22px 14px;
    letter-spacing: -.01em;
}

/* ── PDF action bar ─────────────────────────────────────────── */
.ch-pdf-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px 14px;
    border-top: 1px solid var(--ch-parchment-3);
    background: var(--ch-parchment);
    flex-wrap: wrap;
}

/* ── PDF viewer ─────────────────────────────────────────────── */
.ch-pdf-viewer { border-top: 1px solid var(--ch-parchment-3); }

.ch-pdf-viewer__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--ch-parchment);
    border-bottom: 1px solid var(--ch-border);
    flex-wrap: wrap;
}

.ch-pdf-viewer__label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ch-ink-3);
    flex: 1;
    min-width: 0;
    font-family: 'Source Sans 3', sans-serif;
    letter-spacing: .02em;
}

.ch-pdf-viewer__frame-wrap {
    overflow: hidden;
    transition: height .3s ease;
}
.ch-pdf-viewer__frame-wrap.ch-collapsed { height: 0 !important; }

.ch-pdf-viewer__frame {
    display: block;
    width: 100%;
    height: 520px;
    border: none;
    background: var(--ch-parchment);
}

/* ── Buttons ────────────────────────────────────────────────── */
.ch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    border-radius: 3px;
    transition: all .18s;
    white-space: nowrap;
    line-height: 1.3;
}

.ch-btn--sm { padding: 5px 12px; font-size: 11px; }

/* Primary — navy fill */
.ch-btn--download {
    background: var(--ch-navy);
    color: #fff;
    border-color: var(--ch-navy);
}
.ch-btn--download:hover {
    background: var(--ch-navy-2);
    border-color: var(--ch-navy-2);
    color: #fff;
}

/* Gold accent — for secondary CTA */
.ch-btn--outline {
    background: transparent;
    color: var(--ch-navy);
    border-color: var(--ch-border-2);
}
.ch-btn--outline:hover {
    border-color: var(--ch-navy-3);
    color: var(--ch-navy);
    background: var(--ch-parchment);
}

/* Ghost */
.ch-btn--ghost {
    background: transparent;
    color: var(--ch-ink-3);
    border-color: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 12px;
}
.ch-btn--ghost:hover {
    color: var(--ch-navy);
    background: var(--ch-parchment-2);
}

/* ── AI Summary section ─────────────────────────────────────── */
.ch-summary {
    padding: 14px 22px 16px;
    background: var(--ch-summary-bg);
    border-top: 1px solid var(--ch-summary-border);
    position: relative;
}

.ch-summary::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ch-gold);
    opacity: .5;
}

.ch-summary--pending {
    background: var(--ch-parchment);
    border-top-color: var(--ch-border);
}
.ch-summary--pending::before { opacity: .15; }

.ch-summary__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ch-summary-accent);
    margin-bottom: 8px;
}

.ch-summary--pending .ch-summary__label { color: var(--ch-ink-4); }

.ch-summary__text {
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--ch-ink-2);
    font-style: italic;
}

/* Spinner */
.ch-summary__spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--ch-border-2);
    border-top-color: var(--ch-ink-3);
    border-radius: 50%;
    animation: ch-spin 0.9s linear infinite;
}
@keyframes ch-spin { to { transform: rotate(360deg); } }

/* ── Pagination ─────────────────────────────────────────────── */
.ch-pagination {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.ch-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 3px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--ch-ink-2);
    text-decoration: none;
    border: 1px solid var(--ch-border);
    background: #fff;
    transition: all .15s;
    letter-spacing: .01em;
}

.ch-pagination__btn:hover {
    background: var(--ch-parchment);
    border-color: var(--ch-border-2);
    color: var(--ch-navy);
}

.ch-pagination__btn--active {
    background: var(--ch-navy);
    border-color: var(--ch-navy);
    color: #fff;
    font-weight: 600;
}

.ch-pagination__btn--active:hover { background: var(--ch-navy); color: #fff; }
.ch-pagination__btn--nav { font-size: 17px; font-weight: 300; }
.ch-pagination__ellipsis {
    font-size: 13px;
    color: var(--ch-ink-4);
    padding: 0 4px;
    line-height: 36px;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Empty state ────────────────────────────────────────────── */
.ch-empty {
    text-align: center;
    padding: 72px 32px 56px;
    background: var(--ch-parchment);
    border: 1px solid var(--ch-border);
    border-radius: 6px;
}

.ch-empty__icon {
    display: block;
    margin: 0 auto 20px;
    color: var(--ch-border-3);
    opacity: .7;
}

.ch-empty__title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--ch-navy);
    margin-bottom: 10px;
}

.ch-empty__sub {
    font-size: 14px;
    font-weight: 300;
    color: var(--ch-ink-3);
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.7;
}
.ch-empty__sub strong { color: var(--ch-navy); font-weight: 600; }
.ch-empty__sub em { font-style: italic; }

/* ── Card entry animation ───────────────────────────────────── */
@keyframes ch-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ch-list > .ch-card {
    animation: ch-fade-up .3s ease both;
}
.ch-list > .ch-card:nth-child(1)  { animation-delay: .03s; }
.ch-list > .ch-card:nth-child(2)  { animation-delay: .06s; }
.ch-list > .ch-card:nth-child(3)  { animation-delay: .09s; }
.ch-list > .ch-card:nth-child(4)  { animation-delay: .12s; }
.ch-list > .ch-card:nth-child(5)  { animation-delay: .15s; }
.ch-list > .ch-card:nth-child(6)  { animation-delay: .18s; }
.ch-list > .ch-card:nth-child(7)  { animation-delay: .20s; }
.ch-list > .ch-card:nth-child(8)  { animation-delay: .22s; }
.ch-list > .ch-card:nth-child(9)  { animation-delay: .24s; }
.ch-list > .ch-card:nth-child(10) { animation-delay: .26s; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 680px) {
    .ch-header { padding: 24px 22px 20px; border-radius: 8px; }
    .ch-header__title { font-size: 22px; }
    .ch-header__stats { gap: 20px; }
    .ch-header__stat-num { font-size: 18px; }
    .ch-tab { padding: 10px 14px; font-size: 13px; }
    .ch-card__date { margin-left: 0; }
    .ch-card__header,
    .ch-card__title,
    .ch-summary,
    .ch-pdf-link { padding-left: 16px; padding-right: 16px; }
    .ch-pdf-viewer__toolbar { padding: 8px 14px; }
    .ch-pdf-viewer__frame { height: 340px; }
    .ch-search__btn { padding: 0 14px; font-size: 12px; }
    .ch-subtabs { gap: 5px; }
    .ch-card__title { font-size: 15px; }
}

@media (max-width: 420px) {
    .ch-header__stats { flex-direction: column; gap: 12px; }
    .ch-btn { font-size: 11.5px; padding: 7px 12px; }
}