/*
 * assets/board-gantt.css — WHAT THE ADS TIMELINE LOOKS LIKE. Shared by every board that draws one.
 *
 * Moved out of dashboard.html on 2026-09-10 alongside assets/board-gantt.js, which owns the markup.
 * 🔴 A STYLESHEET REGRESSION IS INVISIBLE TO tools/gantt_render_equivalence.cjs: it compares HTML,
 * and the HTML is identical whether these rules load or not. Look at the chart after changing this.
 *
 * ⚠️ The .li-tick rules stay here even though only the AI board draws them today. They style the
 * ESTIMATED LinkedIn marks - deliberately a hollow dot on a muted line, so an estimate never reads
 * as a measured run - and a board that gains a LinkedIn feed later must inherit that distinction
 * rather than invent its own.
 */

    .gv2-axis {
      position: sticky; top: 0; z-index: 5;
      display: flex; align-items: center; height: 38px;
      background: #fff; border-bottom: 1px solid #e6e5de;
      min-width: 760px;
    }
    .gv2-axis-spacer {
      flex: 0 0 var(--gv2-name-col);
      position: sticky; left: 0; z-index: 6; background: #fff;
      display: flex; align-items: center; height: 100%; padding: 0 16px;
      font-size: 11px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: #8a91a8;
      border-right: 1px solid #e6e5de;
    }
    /* Collapse the brand names away and hand the width to the months. The button lives in the header
       cell, vertically centred, and flips direction with the state: ‹ hides the names, › brings them
       back. Collapsed, the column is just the logo strip (46px), so on a 412px phone the timeline goes
       from 193px to 356px. The choice is remembered between visits. */
    .gv2-name-toggle {
      position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
      width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center;
      background: #fff; border: 1px solid #e6e5de; border-radius: 6px; color: #8a91a8; cursor: pointer;
    }
    .gv2-name-toggle:hover { color: #344072; border-color: #cfd4de; }
    .gv2-name-toggle svg { width: 13px; height: 13px; display: block; }
    #ads-gantt-v2.names-collapsed .gv2-axis-spacer { padding: 0; justify-content: center; }
    #ads-gantt-v2.names-collapsed .gv2-axis-label { display: none; }
    #ads-gantt-v2.names-collapsed .gv2-name-toggle { position: static; transform: none; }
    #ads-gantt-v2.names-collapsed .g-name { display: none; }
    .gv2-axis-track { flex: 1; position: relative; height: 100%; }
    .gv2-axis-track > span {
      position: absolute; top: 13px; font-size: 11px; color: #8a91a8;
      font-weight: 600; white-space: nowrap; transform: translateX(7px);
    }
    .gv2-axis-track > span.end { transform: translateX(-100%); }
    .gv2-axis-track > span .yr { color: #8a91a8; margin-left: 3px; }
    .gv2-rows { position: relative; min-width: 760px; }
    .gv2-grid { position: absolute; left: var(--gv2-name-col); right: 0; top: 0; bottom: 0; pointer-events: none; }
    .gv2-grid > i { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid #eef1f6; }
    .grow { display: flex; align-items: center; height: 46px; position: relative; min-width: 760px; border-top: 1px solid #f0efe9; }
    .gv2-rows .grow:first-child { border-top: none; }
    .grow:hover, .grow:hover .gv2-cell-logo, .grow:hover .g-name { background: #fafbfc; }
    .gv2-cell-logo {
      flex: 0 0 46px; align-self: stretch; display: flex; align-items: center; justify-content: center;
      position: sticky; left: 0; z-index: 2; background: #fff;
    }
    .g-name {
      flex: 0 0 calc(var(--gv2-name-col) - 46px); align-self: stretch;
      position: sticky; left: 46px; z-index: 2; background: #fff;
      display: flex; align-items: center; gap: 6px; padding-right: 12px;
      font-size: 13px; font-weight: 600; color: #0e1220;
      border-right: 1px solid #e6e5de;
      /* A flex item's min-width defaults to min-content, so a row whose contents don't fit the computed
         column (a long domain, or a label + platform icon + the LinkedIn "N ads" chip) grew the cell
         instead of clipping — five different widths and a 51px ragged edge between the names and the
         timeline, measured at 412px. min-width:0 lets the cell hold its assigned width and the label
         ellipsise instead; overflow:hidden stops anything unshrinkable from spilling past the divider. */
      min-width: 0; overflow: hidden;
    }
    .g-name-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Per-row ad-platform icon (15px), after the brand name. */
    .gantt-row-plat { flex: 0 0 15px; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; }
    .gantt-row-plat svg { width: 15px; height: 15px; display: block; }
    /* Row-total chip — LinkedIn rows only. Quiet by design: it is context for the row, not a headline
       competing with the bars (which now each state their own run count). */
    .g-name-count {
      flex: 0 0 auto; font-size: 10px; font-weight: 700; color: #5b6478;
      background: #eef1f6; border-radius: 999px; padding: 2px 6px; white-space: nowrap;
    }
    .g-track { flex: 1; position: relative; height: 100%; }
    .g-bar {
      position: absolute; top: 50%; transform: translateY(-50%);
      height: 24px; min-width: 34px; border-radius: 6px;
      display: flex; align-items: center; padding: 0 9px;
      color: #fff; font-size: 11px; font-weight: 600;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      box-shadow: 0 1px 3px rgba(0,0,0,.16); cursor: pointer;
      transition: filter .12s ease, box-shadow .12s ease;
    }
    .g-bar:hover { filter: brightness(1.07); box-shadow: 0 4px 12px rgba(0,0,0,.24); }
    /* estimated tick — deliberately styled to READ AS AN ESTIMATE (not a fact): muted desaturated
       blue + a HOLLOW dot, vs the solid saturated verified bar. NO width (carries no duration).
       Per-tick opacity + dot size (--dot) scale with how many ads that month's estimate represents. */
    .li-tick { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 22px; border-radius: 1px; background: #6b8ab5; opacity: .5; cursor: pointer; }
    .li-tick::before { content: ''; position: absolute; left: 50%; top: -4px; transform: translateX(-50%); width: var(--dot, 7px); height: var(--dot, 7px); border-radius: 50%; background: #fff; border: 1.5px solid #6b8ab5; box-sizing: border-box; }
    .li-tick:hover { opacity: 1 !important; }
    .li-tick:hover, .li-tick:hover::before { border-color: #0A66C2; background: #6b8ab5; }
    .li-tick:hover::before { background: #fff; border-color: #0A66C2; }
    /* Square brand logo — marketing look, NO platform-icon overlay */
    .gantt-avatar-wrap { position: relative; width: 26px; height: 26px; flex-shrink: 0; }
    .gantt-sidebar-avatar { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; border: 1px solid #e6e5de; background: #fff; }
    .gantt-sidebar-fallback {
      width: 26px; height: 26px; border-radius: 6px;
      background: #344072; color: #FFB83B;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700;
    }

/* The hovercard trigger reuses the square logo's corner, so this modifier belongs with the logo
   rather than with the hovercard - a board with no hovercards simply never matches it. */
.gantt-avatar-wrap[data-acct-hover] { border-radius: 6px; }   /* match the square gantt logo */