/* ==========================================================================
   mh_ui.css - THE MarketHive toolbar + div-table master (S586).

   Every size in this file is measured off /newsfeed, the SIZING MASTER
   (Chris, S586-DRL-02: "everything gets built from sizing off news feed for
   uniformity ... not just tool bars but also div tables ... all div tables
   should have scroll or expand where needed"). Colours follow S586-DRL-01 Q4
   and Tom's sheets. The ruling text and every value's source live in the
   KitFire spec: kitfire-ai-os/product/markethive/TOOLBAR_SPEC.md (section 0).

   RULES FOR EVERY PAGE:
   - Pages USE these tokens. They never restate a toolbar or row size.
   - A page that needs a different size needs a new ruling first; it does
     not get a page-scoped override (S436-DRL-02).
   - /newsfeed is the reference. If this file and /newsfeed disagree, this
     file is wrong.

   Loaded by includes/page_header_bar.php AFTER the page's own CSS, so on an
   equal selector the master wins.
   ========================================================================== */

:root {
    /* ---- band (the toolbar shell) ---- */
    --mh-band-max-w: 1423px;
    --mh-band-min-h: 121.7px;        /* the master band as rendered on /newsfeed */
    --mh-band-pad: 7.42px 12px;
    --mh-band-gap: 24px;
    --mh-band-bg: #b0b1df;
    --mh-band-border: 2px solid #5c6690;
    --mh-band-radius: 10px;
    --mh-icon-w: 87px;
    --mh-icon-h: 86px;
    --mh-icon-gap: 10px;
    --mh-title-fs: 21.04px;
    --mh-crumb-fs: 13.48px;

    /* ---- controls ---- */
    --mh-font: 'Tahoma', 'Poppins', Geneva, sans-serif;
    --mh-ctl-h: 30px;
    --mh-ctl-gap: 8px;
    --mh-ctl-radius: 4px;
    --mh-grid-col-w: 196px;          /* grid band cell (S601-DRL-01): Blogging Tools & Assets fits */
    /* dropdown toggles (GO TO and every page menu) */
    --mh-dd-w: 148px;
    --mh-dd-border: 2px solid #000000;
    --mh-dd-fs: 13px;
    /* Production /newsfeed's GO TO colours (Chris, S586: "we need Dev3 to match Prod").
       This replaces S586-DRL-01 Q4's #E1E1E1/#21345B - the master page does not change. */
    --mh-dd-fill: #e9eaf3;
    --mh-dd-text: #1a1a2e;
    --mh-dd-hover-fill: #dcdef0;
    --mh-menu-head: #3b5bbf;
    --mh-menu-item-fs: 13px;
    /* plain toolbar buttons (Algorithm / Search Newsfeed / Black Listing) */
    --mh-btn-min-w: 140px;
    --mh-btn-border: 1px solid #000000;
    --mh-btn-fs: 13.34px;
    --mh-btn-pad: 3px 8px;
    --mh-btn-fill: #ffffff;
    --mh-btn-text: #333333;
    --mh-btn-hover-fill: #eeeeee;
    /* search box in a toolbar takes a dropdown's slot */
    --mh-search-w: 148px;

    /* ---- div tables (rows / panels under the band) ---- */
    --mh-row-border: 1px solid #dfdfdf;
    --mh-row-pad: 10px;
    --mh-row-gap: 10px;
    --mh-row-radius: 0;
    --mh-table-max-h: 70vh;          /* only for a table that must stay bounded */

    /* ---- text sizer (S586-DRL-01 Q7) and switch (Q8) ---- */
    --mh-sizer-w: 36px;
    --mh-sizer-gap: 3px;
    --mh-sizer-h: 24px;
    --mh-switch-on: #6d83b4;
    --mh-switch-off: #a1b1d1;
    --mh-focus: 0 0 0 2px #e9bc47;
}

/* ---------------------------------------------------------------- band --- */
.subs-section-header {
    max-width: var(--mh-band-max-w);
    min-height: var(--mh-band-min-h);
    padding: var(--mh-band-pad);
    gap: var(--mh-band-gap);
    background: var(--mh-band-bg);
    border: var(--mh-band-border);
    border-radius: var(--mh-band-radius);
}
.subs-section-header .subs-nav-page-icon {
    width: var(--mh-icon-w);
    height: var(--mh-icon-h);
    object-fit: contain;
    flex: 0 0 var(--mh-icon-w);
}
.subs-section-header .subs-nav-page-title { font-size: var(--mh-title-fs); }
.subs-section-header .subs-nav-breadcrumb { font-size: var(--mh-crumb-fs); }

/* AI Chat borrowed the E1 band (pinned 112px). Only E1 EXCHANGE is excepted
   from the master, so AI Chat opts back in with .mh-band-master. */
.subs-section-header.mh-band-master { height: auto; min-height: var(--mh-band-min-h); }

/* ------------------------------------------------------------ controls --- */
/* SPECIFICITY CONTRACT: every master rule here is exactly (0,2,0) - one band
   class + one control class, with any extra structure inside :where(). That
   beats the unscoped base rules (.bh-btn in blogs.css, inline copies), and it
   LOSES to page STATE rules (.hs-info .bh-btn.is-current, .nf-btn-disabled.
   nf-btn-algorithm, :disabled ...), which is what we want. A page rule that
   restates a SIZE at higher specificity is drift: delete it, don't out-shout it.
   E1 Exchange is excepted (Tom/Chris, S436): .ph-nav-dd-legacy is left alone. */

/* Every control in a toolbar row: same height, same baseline. */
.subs-section-header .bh-btn,
.subs-section-header .mh-tb-btn,
.subs-section-header .bh-search-input {
    height: var(--mh-ctl-h);
    border-radius: var(--mh-ctl-radius);
    font-family: var(--mh-font);
    box-sizing: border-box;
}

/* Dropdown toggles: at least GO TO's 148px; a longer label grows its toggle
   just enough to fit (S586-DRL-03 - "Blogging Tools & Assets" cannot be read at
   148, and nothing is ever clipped). GO TO itself stays exactly 148 (its own
   rules in nav_page_select.css). The menu is as wide as its toggle (S469/S470). */
.subs-section-header :where(:not(.ph-nav-dd-legacy)) > .bh-dd-toggle {
    width: auto;
    min-width: var(--mh-dd-w);
    max-width: none;
    white-space: nowrap;
    padding: 0 10px 0 12px;
    border: var(--mh-dd-border);
    background: var(--mh-dd-fill);
    color: var(--mh-dd-text);
    font-size: var(--mh-dd-fs);
    font-weight: bold;
    gap: 4px;
}
.subs-section-header :where(:not(.ph-nav-dd-legacy)) > .bh-dd-toggle:hover { background: var(--mh-dd-hover-fill); }
.subs-section-header :where(:not(.ph-nav-dd-legacy)) > .bh-dd-menu {
    width: 100%;                      /* = its toggle (the .bh-dd shrink-wraps it) */
    min-width: var(--mh-dd-w);
    max-width: none;
    box-sizing: border-box;
}
.subs-section-header :where(:not(.ph-nav-dd-legacy)) .bh-dd-sub {
    width: var(--mh-dd-w);
    min-width: var(--mh-dd-w);
    max-width: var(--mh-dd-w);
    box-sizing: border-box;
}
.subs-section-header :where(.mh-band-controls, .bh-nav-row, .fh-control-row, .gf-control-row, .cn-control-row) > .bh-dd { flex: 0 0 auto; }
.subs-section-header .bh-dd-head { background: var(--mh-menu-head); }
.subs-section-header .bh-dd-head,
.subs-section-header .bh-dd-item { white-space: normal; overflow-wrap: anywhere; }
/* S587: mh_band.php draws click-action menu items as <button>; without this they kept the
   browser's grey button box and sat side by side (Smart Mail). Every item is a full-width row.
   Link items (<a>, the 'href' items) need the same - an <a> is inline, so a menu of links ran
   together on one line (the /analytics date range, the group menu's Capture Pages). */
.subs-section-header :is(button, a).bh-dd-item {
    display: block; width: 100%; box-sizing: border-box; margin: 0; text-align: left;
    background: #FFFFFF; border: 0; border-top: 1px solid #eef0f6; border-radius: 0;
}
.subs-section-header a.bh-dd-item { color: inherit; text-decoration: none; }
.subs-section-header :is(button, a).bh-dd-item:hover { background: #e9eaf3; }
.subs-section-header :is(button, a).bh-dd-item.is-on { font-weight: bold; }

/* Plain toolbar buttons, modelled on News Feed's Algorithm / Search Newsfeed /
   Black Listing (css/newsfeed.css .nf-header-btn reads these same tokens).
   At least 140px; they grow only to fit their label. */
.subs-section-header .mh-tb-btn,
.subs-section-header :where(.bh-nav-row, .bh-nav-buttons, .mh-band-controls) > .bh-btn:where(:not(.bh-dd-toggle)) {
    width: auto;
    min-width: var(--mh-btn-min-w);
    max-width: none;
    padding: var(--mh-btn-pad);
    border: var(--mh-btn-border);
    background: var(--mh-btn-fill);
    color: var(--mh-btn-text);
    font-size: var(--mh-btn-fs);
    font-weight: normal;
    justify-content: center;
    white-space: nowrap;
}
.subs-section-header .mh-tb-btn:hover,
.subs-section-header :where(.bh-nav-row, .bh-nav-buttons, .mh-band-controls) > .bh-btn:where(:not(.bh-dd-toggle)):hover {
    background: var(--mh-btn-hover-fill); color: var(--mh-btn-text);
}

/* Search box in a toolbar: a dropdown's slot, a button's border and type. */
.subs-section-header .bh-search-input {
    width: var(--mh-search-w);
    min-width: 0;
    border: var(--mh-btn-border);
    background: #ffffff;
    font-size: var(--mh-btn-fs);
    font-weight: normal;
}

/* Control rows: one 8px gap everywhere. */
.subs-section-header .mh-band-controls,
.subs-section-header .nf-header-buttons,
.subs-section-header .bh-nav-row,
.subs-section-header .bh-nav-buttons,
.subs-section-header .fh-control-row,
.subs-section-header .gf-control-row,
.subs-section-header .cn-control-row { gap: var(--mh-ctl-gap); }

/* The band partial's control row (includes/mh_band.php) - laid out exactly like
   News Feed's .nf-header-buttons: one row, 8px gaps, wraps when it must. */
.subs-section-header .mh-band-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mh-ctl-gap); }
.subs-section-header .mh-band-controls > :where(.bh-dd, .bh-search, .mh-tb-btn, .bh-btn, span.bh-btn) { margin-top: 6px; }
/* S624 (Tom's video 2026-11-07, /groups zoomed in and out): "make sure all of your buttons are
   the exact same height, exact width and exact line". GO TO (.ph-nav-dd, inline-block) and each
   menu (.bh-dd, block) wrapped its 30px button in a LINE BOX, so the wrapper came out a fraction
   taller than 30px - by a different fraction at each zoom level - and the centred row put the
   buttons 1px apart; the search form (inline-flex, no line box) sat higher still. Every slot in a
   control row is now a 30px flex box, so all of them centre on the same line at any zoom. */
.subs-section-header .mh-band-controls > :where(.bh-dd, .ph-nav-dd, .bh-search),
.subs-section-header .mh-band-goto > :where(.bh-dd, .ph-nav-dd, .bh-search) {
    display: flex;
    align-items: center;
    height: var(--mh-ctl-h);
    line-height: 1;
    vertical-align: top;
}
/* S624, measured live on dev3 /groups after the rule above: GO TO was still 0.48px below its three
   neighbours. On desktop css/nav_page_select.css pins GO TO's button ABSOLUTELY, 19px up from the
   band's bottom edge (the S436 baseline rule), while the rest of an mh_band row is centred in flow -
   two anchors on a 121.73px band land half a pixel apart, which rounds to a visible 1px at most zoom
   levels. Friends' row already opts out of the pin (.fh-control-row); every mh_band control row now
   does the same, so GO TO rides the row with its neighbours. Specificity (0,5,0) beats the pin. */
@media (min-width: 993px) {
    .subs-section-header:not(.e1-section-header) .mh-band-controls > .ph-nav-dd { position: relative; }
    .subs-section-header:not(.e1-section-header) .mh-band-controls > .ph-nav-dd > .ph-nav-page-select { position: static; }
    .subs-section-header:not(.e1-section-header) .mh-band-controls > .ph-nav-dd > .bh-dd-menu { top: 100%; left: 0; }
    /* The grid band (/blogs, blog post, /analytics) had the same two anchors: GO TO pinned 19px up,
       the grid flex-end with a 4px bottom margin - 0.33px apart at 100%, up to 0.5px at other zooms,
       and from 150% up the pinned GO TO landed 179-239px off the wrapped grid. GO TO now sits in flow
       at the foot of its column with the grid's same 4px below it; 4px comes off its top margin so the
       column (and the band, title and row offset) keeps its height. Measured live on dev3 /blogs:
       spread 0.00 at zoom 0.67-2. */
    .subs-section-header.mh-band--grid:not(.e1-section-header) .mh-band-goto > .ph-nav-dd { position: relative; margin-top: 2px; }
    .subs-section-header.mh-band--grid:not(.e1-section-header) .mh-band-goto > .ph-nav-dd > .ph-nav-page-select { position: static; }
    .subs-section-header.mh-band--grid:not(.e1-section-header) .mh-band-goto > .ph-nav-dd > .bh-dd-menu { top: 100%; left: 0; }
    .subs-section-header.mh-band--grid:not(.e1-section-header) .mh-band-goto { margin-bottom: 4px; }
}
.subs-section-header .mh-tb-btn { display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; }
.subs-section-header .mh-tb-btn:disabled { opacity: .45; cursor: not-allowed; }
.subs-section-header .mh-band-count { font-weight: normal; }

/* GO TO inside a button-grid row (/blogs, blog post, /analytics): no extra top
   margin, so it sits on the row's baseline with its neighbours. */
.subs-section-header .bh-nav-row > .ph-nav-dd { margin-top: 0; }

/* OPT-IN GRID BAND (S601-DRL-01, Chris): $mhBand['layout'] = 'grid' in includes/mh_band.php.
   GO TO sits in its own left column under the title + breadcrumb (.mh-band-goto, 148px as
   everywhere); the page's controls form an aligned grid beside it - at most 2 rows x 3
   columns, every cell the same 196px wide, 30px tall (--mh-ctl-h), 8px apart (--mh-ctl-gap).
   Bands without the opt-in are untouched. Used by /blogs and the blog post page. */
.subs-section-header.mh-band--grid .mh-band-controls {
    display: grid;
    grid-template-columns: repeat(3, var(--mh-grid-col-w));
    grid-auto-rows: var(--mh-ctl-h);
    gap: var(--mh-ctl-gap);
    /* Measured against production /blogs at 1920 (S605): row 2 sits level with GO TO (both
       bottom-aligned in .subs-nav-left; GO TO's box carries 4px below its button) and the grid
       starts 11px after the title column (.subs-nav-left's own 10px gap + 1px). */
    align-self: flex-end;
    margin-bottom: 4px;
    margin-left: 1px;
}
.subs-section-header.mh-band--grid .mh-band-goto { margin-top: 6px; }
.subs-section-header.mh-band--grid .mh-band-controls > :where(.bh-dd, .bh-search, .mh-tb-btn, .bh-btn, span.bh-btn) { margin-top: 0; width: var(--mh-grid-col-w); min-width: 0; }
.subs-section-header.mh-band--grid .mh-band-controls > .bh-dd > .bh-dd-toggle { width: var(--mh-grid-col-w); min-width: 0; }
.subs-section-header.mh-band--grid .mh-band-controls > .bh-search { display: flex; }
.subs-section-header.mh-band--grid .mh-band-controls > .bh-search > .bh-search-input { width: var(--mh-grid-col-w); box-sizing: border-box; }
/* Grid cells all read as one set, as on production /blogs (Chris, compare-to-production): the plain
   button (Write a New Blog Post) takes the dropdown look - #e9eaf3, 2px #000, 13px bold - and the
   search box the same 2px border and 13px type. Its blue "writing" state is restated here because
   this file loads after blogs.css, where .write-new-blog-btn.active lives. */
.subs-section-header.mh-band--grid .mh-band-controls > .bh-btn:where(:not(.bh-dd-toggle)) {
    border: var(--mh-dd-border); background: var(--mh-dd-fill); color: var(--mh-dd-text);
    font-size: var(--mh-dd-fs); font-weight: bold;
}
.subs-section-header.mh-band--grid .mh-band-controls > .bh-btn:where(:not(.bh-dd-toggle)):hover { background: var(--mh-dd-hover-fill); }
.subs-section-header.mh-band--grid .mh-band-controls > .bh-btn.write-new-blog-btn.active { background: #5f78ab; color: #fff; }
.subs-section-header.mh-band--grid .mh-band-controls > .bh-search > .bh-search-input { border: var(--mh-dd-border); font-size: var(--mh-dd-fs); --mh-btn-fs: var(--mh-dd-fs); }   /* input_defaults.css forces var(--mh-btn-fs) on toolbar inputs at higher specificity */
@media (max-width: 900px) {
    .subs-section-header.mh-band--grid .subs-nav-left { flex-wrap: wrap; }
    .subs-section-header.mh-band--grid .mh-band-controls { grid-template-columns: repeat(2, var(--mh-grid-col-w)); margin-left: 0; }
}
@media (max-width: 600px) {
    .subs-section-header.mh-band--grid .mh-band-controls { grid-template-columns: var(--mh-grid-col-w); }
}

.subs-section-header .bh-btn:focus-visible,
.subs-section-header .mh-tb-btn:focus-visible { outline: none; box-shadow: var(--mh-focus); }

/* ---------------------------------------------------------- div tables --- */
/* The News Feed's post container is the row master: full column width (the
   band's edges), 1px #dfdfdf, 10px padding, 10px between rows, square corners,
   height grows with content. New tables use .mh-table / .mh-row; existing row
   classes are mapped onto the same tokens below. */
.mh-table {
    width: 100%;
    max-width: var(--mh-band-max-w);
    margin: 0 auto;
    box-sizing: border-box;
}
.mh-row {
    margin: 0 0 var(--mh-row-gap);
    padding: var(--mh-row-pad);
    border: var(--mh-row-border);
    border-radius: var(--mh-row-radius);
    box-sizing: border-box;
    overflow: visible;
}

/* SCROLL OR EXPAND (S586-DRL-02): a table either grows with its content (the
   default above), or - when it has to stay inside a bounded region - scrolls.
   Never clip. Add .mh-table--bounded to opt in to scrolling. */
.mh-table--bounded {
    max-height: var(--mh-table-max-h);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Existing rows mapped onto the master. Several legacy lists size their rows
   with inline style attributes, so those mappings carry !important - the only
   way a stylesheet beats an inline style. They set SIZES only; colours stay. */
.groups-feed-page .gf-row {
    margin: 0 0 var(--mh-row-gap);
    padding: var(--mh-row-pad);
    border: var(--mh-row-border);
    border-radius: var(--mh-row-radius);
}
/* /blogs list: inline "padding:12px 10px; border-bottom; overflow:hidden".
   flow-root still contains the floats that overflow:hidden was there for,
   without clipping anything (S586-DRL-02: never clip). The infinite scroll
   appends later pages straight into #column_main, outside #main_container_blogs,
   so those rows are mapped too (S611). The profile's Blogs tab draws the same
   rows inside .profile-blog-list (profile_query.php, S624). */
#main_container_blogs > .blog_post_row,
#column_main > .blog_post_row,
.profile-blog-list > .blog_post_row {
    display: flow-root !important;
    overflow: visible !important;
    margin: 0 0 var(--mh-row-gap) !important;
    padding: var(--mh-row-pad) !important;
    border: var(--mh-row-border) !important;
    border-radius: var(--mh-row-radius);
}
/* /friends rows (Tom's stripes stay; sizes follow the master). */
.friends-page .fh-row {
    margin: 0 0 var(--mh-row-gap) !important;
    padding: var(--mh-row-pad) !important;
    border: var(--mh-row-border) !important;
    border-radius: var(--mh-row-radius) !important;
}
/* Group feed posts on /group/<name>: inline "padding:15px 0; border-bottom". */
.grp-page-wrap ~ .full_width_main_content_container_group_custom #activity_feed > [id^="display_activity_"] {
    margin: 0 0 var(--mh-row-gap) !important;
    padding: var(--mh-row-pad) !important;
    border: var(--mh-row-border) !important;
    border-radius: var(--mh-row-radius) !important;
}
/* /meetings room cards keep their grid; card box sizes follow the master. */
.mh-rooms-grid { gap: var(--mh-row-gap); }
.mh-rooms-grid .mh-room-card {
    padding: var(--mh-row-pad);
    border: var(--mh-row-border);
    border-radius: var(--mh-row-radius);
}