/* ==========================================================================
   Public result / information listing - reference layout layer.
   Loaded after style.css so it can refine the board without touching the
   base design system. Every token is prefixed with --ui- so it can never
   collide with the variables declared in style.css.

   What lives here:
     1. Palette tokens
     2. Top disclaimer + last updated stamp
     3. Green date / page title bar
     4. Board table header (Market | Today | Yesterday)
     5. LIVE / NEXT section headers
     6. Row typography (name over time + record chart line)
     7. One minute before "update soon" highlight
     8. Responsive steps + reduced motion
   ========================================================================== */

:root {
    /* ---------- palette ---------- */
    --ui-danger:       #ff4d4f;   /* disclaimer background            */
    --ui-danger-ink:   #d32f2f;   /* LIVE / NEXT labels, red accents  */
    --ui-danger-soft:  #ffe3e3;   /* supporting text on red           */
    --ui-danger-link:      #0d1878; /* "Read More..." on red (4.5:1)   */
    --ui-danger-link-hover: #060d5e;
    --ui-success:      #0b9f5a;   /* green accent                     */
    --ui-success-deep: #0a7d47;   /* date bar background (AA on white)*/
    --ui-warning:      #ffc400;   /* upcoming highlight               */
    --ui-warning-lit:  #ffd740;   /* highlight pulse peak             */
    --ui-warning-line: #d99b00;   /* highlight border / indicator     */
    --ui-warning-ink:  #1f1700;   /* text on yellow                   */
    --ui-warning-link: #7a4b00;   /* links on yellow (4.5:1)          */
    --ui-surface:      #f4f5f7;   /* section header background        */
    --ui-border:       #d9dde3;
    --ui-text:         #111827;
    --ui-muted:        #5b6472;

    /* ---------- type steps used by this layer ---------- */
    --ui-disclaimer:    0.875rem;  /* 14 */
    --ui-updated:       0.8125rem; /* 13 */
    --ui-section-label: 1rem;      /* 16 */
    --ui-time:          0.8125rem; /* 13 */
    --ui-link:          0.8125rem; /* 13 */
}

/* ==========================================================================
   1. Top disclaimer
   ========================================================================== */

.top-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--ui-danger);
    color: #fff;
    border-radius: 6px;
    padding: 8px 14px;
    width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.75rem;        /* 12: compact disclaimer scale */
    margin-bottom: 8px;
}

.top-alert__icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    stroke-width: 2;
}

.top-alert__body { min-width: 0; flex: 1 1 auto; }

.top-alert__title {
    font-size: 0.875rem;      /* 14 */
    font-weight: var(--weight-bold, 700);
    line-height: var(--line-normal, 1.5);
    letter-spacing: var(--tracking-normal, 0);
    color: #fff;
}

.top-alert__text {
    margin-top: 2px;
    font-size: 0.8125rem;        /* 13 */
    font-weight: var(--weight-regular, 400);
    line-height: 1.45;
    color: #fff;
    overflow-wrap: break-word;
}

.top-alert__sub {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .35);
    font-size: 0.6875rem;      /* 11 */
    line-height: var(--line-normal, 1.5);
    color: #fff;
}

/* Centered DISCLAIMER line, its "Read More..." link and the legal link row -
   the body of the red notice banner is centered like the reference design. */
.top-alert__body { text-align: center; }
.top-alert__text strong { font-weight: var(--weight-bold, 700); }

.top-alert__more {
    color: var(--ui-danger-link);
    font-weight: var(--weight-semibold, 600);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    font-size: 0.8125rem;
}
.top-alert__more:hover { color: var(--ui-danger-link-hover); }

.top-alert__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .35);
}
.top-alert__links a {
    display: inline-block;
    padding: 4px 2px;
    color: #fff;
    font-size: 0.75rem;        /* 12 */
    font-weight: var(--weight-semibold, 600);
    line-height: var(--line-normal, 1.5);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.top-alert__links a:hover { color: #fff; text-decoration-thickness: 2px; }
.top-alert__links a[aria-current="page"] {
    color: var(--accent, #f5b301);
    text-decoration: none;
}

@media (min-width: 600px) {
    .top-alert__links a { font-size: 0.8125rem; }   /* 13 */
}

/* ==========================================================================
   2. Last updated stamp
   ========================================================================== */

.last-updated {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 6px;
    margin-top: 9px;
    font-size: var(--ui-updated);
    font-weight: var(--weight-medium, 500);
    line-height: var(--line-normal, 1.5);
    color: var(--ui-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.last-updated__icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--ui-muted);
}

.last-updated__label {
    font-weight: var(--weight-semibold, 600);
    color: var(--ui-text);
}

.last-updated__time { color: var(--ui-muted); }

/* ==========================================================================
   3. Green date / page title bar
   ========================================================================== */

.date-bar {
    display: block;
    width: 100%;
    flex: 1 1 100%;
    margin: 0;
    padding: 9px 12px;
    background: var(--ui-success-deep);
    color: #fff;
    border-radius: var(--radius, 6px);
    text-align: center;
    font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);   /* 18 -> 22 */
    font-weight: var(--weight-bold, 700);
    line-height: var(--line-heading, 1.3);
    letter-spacing: var(--tracking-normal, 0);
    overflow-wrap: break-word;
    box-shadow: 0 1px 2px rgba(16, 20, 24, .12);
}

.date-bar__kicker {
    display: block;
    font-size: 0.875rem;                     /* 14 */
    font-weight: var(--weight-semibold, 600);
    letter-spacing: var(--tracking-wide, .03em);
    color: rgba(255, 255, 255, .94);
}

.date-bar__date {
    display: block;
    margin-top: 2px;
    font-size: clamp(1rem, 0.6vw + 0.9rem, 1.25rem);   /* 16 -> 20 */
    font-weight: var(--weight-bold, 700);
    color: #fff;
}

/* ==========================================================================
   4. Board table header - Market | Today | Yesterday
   ========================================================================== */

/* Fixed layout takes its column widths from these <col> elements. */
.board col.board__col-name { width: auto; }
.board col.board__col-val  { width: 76px; }

.board__head th.board__col-num {
    width: auto;
    text-align: right;
    padding: 7px 10px 7px 4px;
    white-space: nowrap;
}

.board__head th.board__col-game {
    text-align: left;
    padding-left: 12px;
    white-space: normal;
}

.board__head th .board__col-day {
    display: block;
    font-size: 0.75rem;                      /* 12 mobile */
    font-weight: var(--weight-bold, 700);
    line-height: 1.25;
    letter-spacing: var(--tracking-normal, 0);
    text-transform: none;
    color: #fff;
}

.board__head th .board__col-sub {
    display: block;
    margin-top: 1px;
    font-size: 0.6875rem;                    /* 11 */
    font-weight: var(--weight-semibold, 600);
    line-height: 1.25;
    letter-spacing: var(--tracking-normal, 0);
    text-transform: none;
    color: var(--ui-warning);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. LIVE / NEXT (+ group) section headers
   ========================================================================== */

.board .board__section td,
.board .board__section.is-live td,
.board .board__section.is-next td,
.board .board__section.is-upcoming td,
.board .board__section.is-completed td {
    background: var(--ui-surface);
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
    border-left: 5px solid var(--ui-danger-ink);
    padding: 7px 12px;
}

.board .board__section.is-upcoming td   { border-left-color: var(--upcoming, #6b7883); }
.board .board__section.is-completed td  { border-left-color: var(--done, #1c7a45); }

.board .board__section-label,
.board .board__section.is-live .board__section-label,
.board .board__section.is-next .board__section-label,
.board .board__section.is-upcoming .board__section-label,
.board .board__section.is-completed .board__section-label {
    font-size: var(--ui-section-label);
    font-weight: var(--weight-bold, 700);
    line-height: var(--line-heading, 1.3);
    letter-spacing: var(--tracking-wide, .03em);
    text-transform: uppercase;
    color: var(--ui-danger-ink);
}

.board .board__section.is-upcoming .board__section-label { color: var(--upcoming, #6b7883); }
.board .board__section.is-completed .board__section-label { color: var(--done, #1c7a45); }

.board .board__section-note {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--weight-medium, 500);
    color: var(--ui-muted);
}

/* ==========================================================================
   6. Rows - name over "time + record chart", values on the right
   ========================================================================== */

.board__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    margin-top: 1px;
}

.board .board__time {
    display: inline;
    margin-top: 0;
    font-size: var(--ui-time);
    font-weight: var(--weight-medium, 500);
    line-height: var(--line-normal, 1.5);
    color: var(--ui-muted);
    white-space: nowrap;
}

.board .board__link {
    display: inline-block;
    margin: 0;
    font-size: var(--ui-link);
    font-weight: var(--weight-semibold, 600);
    line-height: 1.5;
    white-space: nowrap;
}

.board .board__name {
    font-size: 0.9375rem;                    /* 15 - 16 mobile floor below */
    line-height: 1.3;
}

.board .board__num {
    padding: 7px 10px 7px 4px;
    vertical-align: middle;
}

.board .board__num--today {
    font-size: var(--type-result, clamp(1.25rem, 3vw + 0.75rem, 1.75rem));
    line-height: 1.1;
    vertical-align: middle;
}

.board .board__num--prev {
    font-size: clamp(1.0625rem, 1vw + 0.85rem, 1.25rem);   /* 17 -> 20 */
    font-weight: var(--weight-semibold, 600);
    line-height: 1.15;
    color: var(--ui-muted);
    vertical-align: middle;
}

/* Pending placeholder must stay readable on white rows too. */
.board .board__num--today.is-pending { color: var(--ui-muted); }

/* ==========================================================================
   7. One minute before - "update soon" highlight
   Separate from .is-highlight, which stays the permanent category highlight.
   ========================================================================== */

.board__flag {
    display: none;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--ui-warning-line);
    border-radius: 3px;
    background: #fff3c4;
    color: var(--ui-warning-ink);
    font-size: 0.6875rem;                    /* 11 */
    font-weight: var(--weight-bold, 700);
    line-height: 1.6;
    letter-spacing: var(--tracking-wide, .03em);
    text-transform: uppercase;
    vertical-align: 1px;
    white-space: nowrap;
}

@keyframes ui-soon-pulse {
    0%, 100% { background-color: var(--ui-warning); }
    50%      { background-color: var(--ui-warning-lit); }
}

table.board .board__row.is-upcoming-highlight,
table.board .board__row.is-upcoming-highlight:nth-child(odd),
table.board .board__row.is-upcoming-highlight.is-highlight,
table.board .board__row.is-upcoming-highlight.is-highlight:nth-child(odd) {
    background: var(--ui-warning);
}

table.board .board__row.is-upcoming-highlight {
    animation: ui-soon-pulse 1.4s ease-in-out infinite;
}

table.board .board__row.is-upcoming-highlight .board__name { color: var(--ui-warning-ink); }
table.board .board__row.is-upcoming-highlight .board__time  { color: #4a3a00; }
table.board .board__row.is-upcoming-highlight .board__flag  { display: inline-block; }

/* Values, links and timestamps must clear 4.5:1 against the yellow row. */
table.board .board__row.is-upcoming-highlight .board__num--today,
table.board .board__row.is-upcoming-highlight .board__num--today.is-pending,
table.board .board__row.is-upcoming-highlight .board__num--prev {
    color: var(--ui-warning-ink);
}
table.board .board__row.is-upcoming-highlight .board__link { color: var(--ui-warning-link); }

table.board .board__row.is-upcoming-highlight .board__game {
    box-shadow: inset 4px 0 0 0 var(--ui-warning-line);
}

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (min-width: 600px) {
    .top-alert { padding: 8px 14px; gap: 8px; margin-bottom: 8px; }
    .top-alert__title { font-size: 0.875rem; }
    .top-alert__text  { font-size: 0.8125rem; line-height: 1.45; }

    .last-updated { font-size: 0.8125rem; }        /* 13 */

    .date-bar { padding: 10px 14px; }

    .board col.board__col-val { width: 104px; }

    .board__head th .board__col-day { font-size: 0.9375rem; }   /* 15 */
    .board__head th .board__col-sub { font-size: 0.75rem; }

    .board .board__name { font-size: var(--font-size-lg, 1.125rem); }
    .board .board__time  { font-size: var(--ui-time); }
    .board .board__link  { font-size: var(--ui-link); }

    .board .board__section td { padding: 8px 14px; }
    .board .board__section-label,
    .board .board__section.is-live .board__section-label,
    .board .board__section.is-next .board__section-label,
    .board .board__section.is-upcoming .board__section-label,
    .board .board__section.is-completed .board__section-label {
        font-size: 1.0625rem;                                    /* 17 */
    }
}

/* Phones: compact padding, smaller type, 3 column rhythm preserved. */
@media (max-width: 599px) {
    .top-alert {
        gap: 7px;
        padding: 8px 10px;
        border-radius: var(--radius-sm, 4px);
        margin-bottom: 8px;
    }
    .top-alert__icon { width: 15px; height: 15px; }
    .top-alert__title { font-size: 0.8125rem; }
    .top-alert__text  { font-size: 0.75rem; line-height: 1.45; }
    .top-alert__sub   { font-size: 0.625rem; }

    .date-bar { padding: 7px 10px; font-size: 1rem; }
    .date-bar__kicker { font-size: 0.75rem; }
    .date-bar__date { font-size: 0.9375rem; }

    .last-updated { margin-top: 8px; font-size: 0.75rem; }

    .date-bar { padding: 8px 10px; }
    .date-bar__kicker { font-size: 0.8125rem; }

    .board .board__name { font-size: var(--font-size-md, 1rem); }
    .board .board__time  { font-size: 0.75rem; }      /* 12 */
    .board .board__link  { font-size: 0.75rem; }      /* 12 */
    .board__meta { gap: 2px 6px; }

    .board .board__num { padding: 8px 8px 8px 4px; }

    .board .board__section td { padding: 6px 10px; }
    .board .board__section-label,
    .board .board__section.is-live .board__section-label,
    .board .board__section.is-next .board__section-label,
    .board .board__section.is-upcoming .board__section-label,
    .board .board__section.is-completed .board__section-label {
        font-size: 0.9375rem;                                   /* 15 */
    }
}

/* Very narrow phones (320px): keep name + time + record chart on one line. */
@media (max-width: 419px) {
    /* Header countdown must never push the brand bar off screen. */
    .refresh-pill { font-size: 0.75rem; padding: 3px 8px; }
    .refresh-pill__label { display: none; }
}

@media (max-width: 359px) {
    .board col.board__col-val { width: 66px; }
    .board__head th.board__col-num { padding: 7px 6px 7px 2px; }
    .board__head th .board__col-day { font-size: 0.6875rem; }   /* 11 */
    .board__head th .board__col-sub { font-size: 0.625rem; }
    .board .board__name { font-size: 0.9375rem; }
    .board .board__num--prev { font-size: 1rem; }
    .board .board__num { padding-right: 6px; }
}

/* Accessibility: never animate the highlight for reduced motion users. */
@media (prefers-reduced-motion: reduce) {
    table.board .board__row.is-upcoming-highlight { animation: none; }
    * { scroll-behavior: auto; }
}

/* ==========================================================================
   9. Warm premium finish (CSS-only, no images / no extra UI)
   ========================================================================== */

/* Softer warm ambient layer behind everything. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 8% 12%, rgba(255, 224, 130, 0.22), transparent 70%),
        radial-gradient(ellipse 55% 45% at 92% 30%, rgba(255, 193, 7, 0.14), transparent 70%),
        radial-gradient(ellipse 70% 50% at 50% 105%, rgba(255, 241, 186, 0.25), transparent 70%);
}

body.home-page { background-color: #F8F9FA; }
body.home-page::before { background: none; }

/* Nearest pending scheduled card (class set server-side, kept current by result-ui.js). */
.board-cards .board-card.is-nearest-upcoming { outline: 2px solid var(--next); outline-offset: -2px; }

/* Normal cards: crisp white + soft warm shadow. */
.board-cards .board-card.board__row {
    box-shadow: 0 1px 3px rgba(120, 90, 0, 0.08);
    transition: box-shadow .18s ease, transform .18s ease;
}
.board-cards .board-card.board__row:hover {
    box-shadow: 0 4px 12px rgba(120, 90, 0, 0.12);
}

/* Highlighted cards: rich warm gradient, glow, top sheen, orange accent. */
table.board .board__row.is-highlight,
table.board .board__row.is-highlight:nth-child(odd),
.board-cards .board-card.board__row.is-highlight {
    background: linear-gradient(var(--hi-angle, 100deg), #FFD000 0%, #FFC800 72%, #F59E0B 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 6px 16px rgba(245, 158, 11, 0.30);
    border-color: #F0B429;
    border-left: 5px solid #F59E0B;
}
.board-cards .board-card.board__row.is-highlight:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 10px 22px rgba(245, 158, 11, 0.38);
}

/* Highlighted card inner text stays dark & readable. */
.board-cards .board-card.board__row.is-highlight .board-card__name { color: #111111; }
.board-cards .board-card.board__row.is-highlight .board-card__meta { color: #3a2f00; }
.board-cards .board-card.board__row.is-highlight .board-card__link { color: #0b5ea8; }
.board-cards .board-card.board__row.is-highlight .board-card__val--today { color: #000000; }
.board-cards .board-card.board__row.is-highlight .board-card__val--today.is-pending { color: #000000; }
.board-cards .board-card.board__row.is-highlight .board-card__val--prev { color: #000000; }

/* Highlighted card: rich future finish (CSS-only, lightweight).
   Rotating warm gradient angle + glow pulse + sheen sweep. */
@property --hi-angle {
    syntax: '<angle>';
    initial-value: 100deg;
    inherits: false;
}

@keyframes hi-angle-spin {
    0%   { --hi-angle: 100deg; }
    50%  { --hi-angle: 280deg; }
    100% { --hi-angle: 460deg; }
}

@keyframes hi-glow-pulse {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            0 6px 16px rgba(245, 158, 11, 0.28);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            0 8px 24px rgba(245, 158, 11, 0.45);
    }
}

.board-cards .board-card.board__row.is-highlight {
    position: relative;
    overflow: hidden;
    background-size: 220% 100%;
    animation:
        hi-glow-pulse 2.4s ease-in-out infinite,
        hi-angle-spin 6s ease-in-out infinite,
        hi-color-shift 5.5s ease-in-out infinite;
}

/* Gradient warna slide karta hai - yellow dominant rehta hai. */
@keyframes hi-color-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Periodic light sheen sweep across the highlighted card. */
.board-cards .board-card.board__row.is-highlight::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    pointer-events: none;
    animation: hi-sheen 3.4s ease-in-out infinite;
}

@keyframes hi-sheen {
    0%       { left: -70%; }
    55%, 100% { left: 130%; }
}

/* Table-row highlight: same colour shift (no pseudo-element on <tr>). */
table.board .board__row.is-highlight,
table.board .board__row.is-highlight:nth-child(odd) {
    background-size: 220% 100%;
    background-image: linear-gradient(var(--hi-angle, 100deg), #FFD000 0%, #FFC800 72%, #F59E0B 100%);
    animation:
        hi-angle-spin 6s ease-in-out infinite,
        hi-color-shift 5.5s ease-in-out infinite;
}

/* Phones: tighter glow, no lift, even softer ambient layer. */
/* ==========================================================================
   10. Month / year picker - advanced, mobile-friendly
   ========================================================================== */

/* Years become a smooth horizontal snap-scroll strip (no ragged wrap). */
.months__years {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 6px;
}
.months__years::-webkit-scrollbar { display: none; }
.months__years .chip { flex: 0 0 auto; scroll-snap-align: center; }

/* Month grid: 3 columns on small phones, keeps chips readable. */
@media (max-width: 480px) {
    .months__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .chip { min-height: 42px; font-size: 0.8125rem; }
    .chip--year { padding: 8px 14px; }
}

/* Advanced chips: pill depth, gradients, shadows, press feedback. */
.chip {
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(16, 20, 24, .18);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.chip:active { transform: scale(.95); }
.chip--year {
    background: linear-gradient(135deg, #d32f2f, #b71c1c);
    box-shadow: 0 2px 8px rgba(198, 40, 40, .35);
}
.chip--month {
    background: linear-gradient(135deg, #12995c, #0a7d47);
    box-shadow: 0 2px 8px rgba(11, 159, 90, .30);
}
.chip--month.chip--alt {
    background: linear-gradient(135deg, #1273c4, #0b5ea8);
    box-shadow: 0 2px 8px rgba(11, 94, 168, .30);
}
.chip.is-active {
    outline: none;
    transform: translateY(-1px);
    box-shadow:
        0 0 0 2px #FFFBEA,
        0 0 0 4px var(--accent, #f5b301),
        0 4px 12px rgba(245, 179, 1, .45);
}

.months__title {
    box-shadow: 0 1px 4px rgba(120, 90, 0, .10);
}

@media (prefers-reduced-motion: reduce) {
    .chip, .chip:active, .chip.is-active { transition: none; transform: none; }
}

/* Autocomplete suggestion dropdown (advanced search). */
.board-tools { position: relative; }
.board-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 70;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line, #d7dde3);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(16, 20, 24, .14);
    max-height: 320px;
    overflow-y: auto;
}
.board-suggest__item a,
.board-suggest__more a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--ink, #101418);
}
.board-suggest__item a:hover,
.board-suggest__more a:hover { text-decoration: none; background: #f4f5f7; }
.board-suggest__item.is-active a { background: #fff3c4; }
.board-suggest__title { display: block; font-weight: 600; font-size: 0.875rem; }
.board-suggest__title mark { background: transparent; color: #b45309; font-weight: 700; }
.board-suggest__desc { display: block; font-size: 0.75rem; color: #5b6472; }
.board-suggest__more a { font-size: 0.8125rem; font-weight: 600; color: var(--next, #0b5ea8); }
.board-suggest__empty,
.board-suggest__loading,
.board-suggest__error { padding: 10px 12px; font-size: 0.8125rem; color: #5b6472; }
.board-suggest__error { color: #d32f2f; }

/* Search results page. */
.search-results__title { font-size: 1.25rem; margin: 10px 0 14px; }
.search-results__group { font-size: 1rem; margin: 16px 0 6px; color: #b91c1c; text-transform: uppercase; letter-spacing: .03em; }
.search-results__list { list-style: none; margin: 0 0 8px; padding: 0; background: #fff; border: 1px solid var(--line, #d7dde3); border-radius: 6px; }
.search-results__list li { padding: 9px 12px; border-bottom: 1px solid #e9edf1; }
.search-results__list li:last-child { border-bottom: 0; }
.search-results__list a { font-weight: 600; }
.search-results__desc { display: block; font-size: 0.75rem; color: #5b6472; margin-top: 2px; }

/* Floating contact buttons: staggered pulse ring + hover/touch states. */
@keyframes float-pulse {
    0%   { transform: scale(1);    opacity: 0.55; }
    50%  { transform: scale(1.25); opacity: 0.20; }
    100% { transform: scale(1.45); opacity: 0; }
}

.float-btn--wa,
.float-btn--tg { position: relative; }
.float-btn--wa::before,
.float-btn--tg::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: -1;
    animation: float-pulse 2.6s ease-out infinite;
}
.float-btn--wa::before { box-shadow: 0 0 0 3px rgba(37, 211, 102, .55); }
.float-btn--tg::before { box-shadow: 0 0 0 3px rgba(34, 158, 217, .55); animation-delay: 1.3s; }

.float-btn--tg { background: #229ED9; border-color: #229ED9; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.float-btn--wa { box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.float-btn__tg-icon { width: 26px; height: 26px; }

.float-btn--wa, .float-btn--tg { transition: transform .22s ease, box-shadow .22s ease; }
.float-btn--wa:hover, .float-btn--tg:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, .24); }
.float-btn--wa:active, .float-btn--tg:active { transform: scale(.94); }
.float-btn--wa:focus-visible, .float-btn--tg:focus-visible { outline: 2px solid var(--accent, #f5b301); outline-offset: 2px; }

@media (max-width: 599px) {
    .float-tools { right: 12px; bottom: 14px; }
    .float-btn { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .float-btn--wa::before, .float-btn--tg::before { animation: none; display: none; }
    .float-btn--wa, .float-btn--tg { transition: none; }
}

@media (max-width: 599px) {
    /* Compact disclaimer banner on phones. */
    .top-alert { gap: 5px; padding: 5px 8px; margin-bottom: 6px; }
    .top-alert__icon { width: 12px; height: 12px; margin-top: 1px; }
    .top-alert__title { font-size: 0.6875rem; }   /* 11 */
    .top-alert__text  { font-size: 0.625rem; line-height: 1.45; } /* 10 */
    /* Disclaimer body: only ~2 lines, rest available via Read More. */
    .top-alert__text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .top-alert__sub   { display: none; }
    .top-alert__links { margin-top: 4px; padding-top: 4px; gap: 2px 8px; }
    .top-alert__links a { font-size: 0.625rem; padding: 2px 0; }

    body::before {
        background:
            radial-gradient(ellipse 70% 35% at 10% 8%, rgba(255, 224, 130, 0.15), transparent 70%),
            radial-gradient(ellipse 70% 35% at 90% 95%, rgba(255, 193, 7, 0.10), transparent 70%);
    }
    .board-cards .board-card.board__row.is-highlight {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 3px 10px rgba(245, 158, 11, 0.25);
    }
    .board-cards .board-card.board__row.is-highlight:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .board-cards .board-card.board__row { transition: none; }
    .board-cards .board-card.board__row.is-highlight:hover { transform: none; }
    .board-cards .board-card.board__row.is-highlight { animation: none; }
    table.board .board__row.is-highlight { animation: none; }
    .board-cards .board-card.board__row.is-highlight::after { animation: none; display: none; }
}

/* ---------- Contact CTA banner (homepage, links to /contact/) ---------- */
.contact-cta {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: #fff;
    padding: 20px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(33, 150, 243, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}
.contact-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
}
a.contact-cta {
    display: block;
    color: #fff;
    text-decoration: none;
}
a.contact-cta:hover {
    color: #fff;
    text-decoration: none;
}
.contact-cta-title {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}
.contact-cta-sub {
    display: block;
    font-size: 14px;
    opacity: 0.95;
}
.contact-cta--adv {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 16px 18px;
    border-radius: 16px;
    background:
        radial-gradient(300px 120px at 95% 0%, rgba(245,179,1,.25), transparent 60%),
        linear-gradient(120deg, #101418 10%, #1d242c 60%, #101418 100%);
    border: 1px solid rgba(245,179,1,.35);
    box-shadow: 0 10px 28px rgba(16,20,24,.35);
    cursor: default;
}
.contact-cta--adv::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent);
    transform: skewX(-20deg);
    animation: contactCtaShine 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes contactCtaShine {
    0%, 55% { left: -70%; }
    100% { left: 140%; }
}
.contact-cta__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5b301, #ff8a00);
    color: #141414;
    box-shadow: 0 6px 18px rgba(245,179,1,.5);
}
.contact-cta__icon svg { width: 24px; height: 24px; }
.contact-cta__texts { flex: 1 1 auto; min-width: 0; }
.contact-cta--adv .contact-cta-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.02rem;
    letter-spacing: .02em;
}
.contact-cta__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22e584;
    box-shadow: 0 0 0 0 rgba(34,229,132,.7);
    animation: contactCtaPulse 1.6s infinite;
    flex: 0 0 auto;
}
@keyframes contactCtaPulse {
    70% { box-shadow: 0 0 0 9px rgba(34,229,132,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,229,132,0); }
}
.contact-cta__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}
.contact-cta__btn {
    border: 0;
    border-radius: 999px;
    padding: 11px 22px;
    background: linear-gradient(135deg, #f5b301, #ffd34d);
    color: #141414;
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(245,179,1,.45);
    transition: transform .15s;
}
.contact-cta__btn:hover { transform: translateY(-1px) scale(1.02); }
.contact-cta__link {
    text-align: center;
    font-size: .76rem;
    font-weight: 700;
    color: #f5b301;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.contact-cta__link:hover { color: #fff; }
@media (max-width: 560px) {
    .contact-cta--adv { flex-wrap: wrap; padding: 10px 12px; gap: 10px; border-radius: 12px; }
    .contact-cta__icon { width: 32px; height: 32px; border-radius: 10px; }
    .contact-cta__icon svg { width: 17px; height: 17px; }
    .contact-cta--adv .contact-cta-title { font-size: 0.82rem; }
    .contact-cta-sub { font-size: 0.74rem; }
    .contact-cta__actions { width: 100%; gap: 4px; }
    .contact-cta__btn { width: 100%; padding: 8px 14px; font-size: 0.78rem; }
    .contact-cta__link { font-size: 0.7rem; }
}

/* ---------- Contact popup modal ---------- */
body.contact-modal-open {
    overflow: hidden;
}

.contact-modal[hidden] {
    display: none;
}

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.contact-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 18, 0.6);
}

.contact-modal__dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100% - 20px));
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.contact-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft, #e9edf1);
    background: #f6f8fa;
    flex: 0 0 auto;
}

.contact-modal__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink, #101418);
}

.contact-modal__title-icon {
    width: 19px;
    height: 19px;
    color: #0b5ea8;
}

.contact-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dfe5ec;
    border-radius: 50%;
    background: #fff;
    color: var(--ink, #101418);
    cursor: pointer;
}

.contact-modal__close:hover {
    background: #eef1f4;
}

.contact-modal__close-icon {
    width: 18px;
    height: 18px;
}

.contact-modal__body {
    padding: 18px 16px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.contact-modal__body .contact-card {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}

.contact-modal__loading {
    text-align: center;
    padding: 40px 10px;
    color: var(--ink-mute, #6b7683);
}

.contact-modal__spinner {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #dfe5ec;
    border-top-color: #2196F3;
    animation: ct-modal-spin 0.9s linear infinite;
}

@keyframes ct-modal-spin {
    to { transform: rotate(360deg); }
}

@media (min-width: 600px) {
    .contact-modal__dialog {
        width: min(760px, calc(100% - 48px));
    }

    .contact-modal__body {
        padding: 24px 28px 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-modal__spinner {
        animation: none;
    }
}