/* =====================================================================
   MusicXen v0.320.0 — archive.css
   The archive (2012 BTN) design system, generalized site-wide.

   This file is profile-archive.css's rule set with the page scope
   widened: every rule the profile sheet hangs on
   body.mx-arch-profile hangs here on body.mx-arch-site, the class
   base.html puts on <body> for the default (blue2) theme on every
   non-profile page. The component classes (.mx-arch-topbar,
   .mx-arch-blackmenu, .mx-arch-colhead, .mx-arch-h5btn, ...) are
   shared verbatim with the profile sheet — the profile keeps its
   own profile-archive.css untouched (its pages never carry
   mx-arch-site), so the profile's cascade cannot drift. Site-only
   additions (the site chrome's buttons-in-menus, .mx-btn gloss,
   page-title bars, panel frames, banner/footer integration) live
   in the marked section at the END of this file and are all
   scoped body.mx-arch-site.

   Non-blue2 themes never load this file and never get the body
   class: they keep the pre-v0.320 header and theme styling
   verbatim (the documented theme fallback).
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * Palette / frame variables (archive values, verbatim where given)  *
 * ------------------------------------------------------------------ */
body.mx-arch-site {
  --mx-arch-blue: #0096ff;        /* .commenthead / railhead text     */
  --mx-arch-linkblue: #3faafd;    /* #main_right .li2 hover           */
  --mx-arch-like: #00ff42;        /* likebar counts, like side        */
  --mx-arch-dislike: #fa5b5b;     /* likebar counts, dislike side     */
  --mx-arch-panel: #202020;       /* .box background                  */
  --mx-arch-panel2: #2a2a2a;      /* comment bubble lift              */
  --mx-arch-rail: #222222;        /* .leftbar ul / .meta2 / .li2      */
  --mx-arch-dim: #999999;         /* .title / byline-extra text       */
  --mx-thread-line: #444444;      /* discussion-kit connector lines   */

  background: #000000;            /* archive body: #000, smoke is in
                                     the wrapper, not on body         */
  color: #e9e9e9;                 /* archive body color               */
  font-family: tahoma, helvetica, sans-serif;  /* archive body font  */
  overflow-x: clip;               /* the 1331px composition is wider
                                     than small viewports before the
                                     zoom steps; never let it force a
                                     horizontal scrollbar */
}

/* ------------------------------------------------------------------ *
 * .mx-arch-frame — the archive #wrapper composition.                *
 * Archive: width 975px, padding 0 10px, margin 0 auto, position     *
 * relative; backgrounds wbg6.png (998px wide veil, centre top,      *
 * repeat-y) OVER bg/34-Smoke2.png (centre top, repeat, sized        *
 * 1327px auto); #wrapper:before/:after are the smoke tile's blue    *
 * ends, 158px wide, at left:-168px / right:-168px, repeat-y,        *
 * full height.                                                      *
 * Task spec sets the live frame width to 995px. base.css carries   *
 * a global * { box-sizing: border-box }, so that 995px is the       *
 * archive's exact total footprint: 975px content + 2x10px padding.  *
 * v0.324.2 (Clint): EXTEND THE GRAY A BIT — the frame widens to     *
 * 1067px and the blue ends narrow to 122px at -132px, so the        *
 * 1331px composition (and every zoom step's fit) is unchanged        *
 * while the gray takes a bigger share: gray 995 -> 1067, ends       *
 * 158 -> 122 a side. The smoke tile grows 1327 -> 1399px so its     *
 * marble window still starts at the frame's left edge, and the      *
 * wbg6 veil (998px, narrower than the new frame) stretches to       *
 * 100% so no unveilled band shows at the frame's sides.             *
 * v0.324.4 (Clint): "THE SIDES STILL GO PAST THE GRAY AREA" —       *
 * the ends were absolutely-positioned pseudos hanging OUTSIDE       *
 * the gray box; they are now background layers OF THE FRAME         *
 * ITSELF (frame takes the full 1331px, padding 142px a side,        *
 * the exact 122px art slices cropped to blue-end-left122.png /      *
 * blue-end-right122.png, a hard-stop gradient for the old 10px      *
 * black seams, veil still 1067px at the same centre). A             *
 * background cannot overrun its own box in any engine: blue         *
 * top == gray top, blue bottom == gray bottom BY CONSTRUCTION.     *
 * Page geometry unchanged. See profile-archive.css for the          *
 * full diagnosis note.                                              *
 * ------------------------------------------------------------------ */
body.mx-arch-site .mx-arch-frame {
  position: relative;
  width: 1331px;
  margin: 0 auto;
  padding: 0 142px;
  background-image: url("/static/img/profile-arch/blue-end-left122.png"),
                    url("/static/img/profile-arch/blue-end-right122.png"),
                    linear-gradient(to right,
                      rgba(0,0,0,0) 0, rgba(0,0,0,0) 122px,
                      #000000 122px, #000000 132px,
                      rgba(0,0,0,0) 132px,
                      rgba(0,0,0,0) calc(100% - 132px),
                      #000000 calc(100% - 132px),
                      #000000 calc(100% - 122px),
                      rgba(0,0,0,0) calc(100% - 122px),
                      rgba(0,0,0,0) 100%),
                    url("/static/img/profile-arch/wbg6.png"),
                    url("/static/img/profile-arch/34-Smoke2.png");
  background-position: left top, right top, left top, center top, center top;
  background-repeat: repeat-y, repeat-y, no-repeat, repeat-y, repeat;
  background-size: 122px auto, 122px auto, 100% 100%, 1067px auto, 1399px auto;
}
/* In the unzoomed 1101-1339px band the 1331px composition
   is wider than the viewport and overflows it; clip at
   the root too (body already clips) so that band can
   never grow a horizontal scrollbar either. */
html:has(> body.mx-arch-site) { overflow-x: clip; }
/* v0.323.3 (Clint): THE BLUE ENDS RIDE AT EVERY WIDTH.
   Frame + both strips need 1331px in total (995 + 2*168
   then; 1067 + 2*132 since v0.324.2) — exactly
   the archive body's min-width. v0.323.1 hid the strips
   below 1340px (a leftover from the pre-zoom fluid frame,
   where they could force a scrollbar), so on phone widths
   they never showed at all. They are part of the zoomed
   composition now: the step table below is the archive Btn
   page's own (0.64 / 0.55 / 0.30), chosen so the WHOLE
   1331px composition fits the viewport at each step —
   full scaled ends at 882 (158*.64 = 101px a side) and
   ~47px slivers at 412 (158*.30), exactly like the Btn
   page Clint approved. body overflow-x: clip keeps the
   strips from ever forcing a scrollbar in the unzoomed
   1101-1339px band, where the viewport simply crops them. */
/* v0.323.1 (Clint, item 11): DESKTOP SIZING. The frame is a
   fixed desktop canvas (995px, the archive composition) at
   every width; below 1100px it no longer reflows fluid -
   it SCALES TO FIT with zoom steps, the treatment Clint
   approved on the archive Btn page. All the small-screen
   reflow blocks that used to stack / wrap / tighten the
   frame's contents are gone: the desktop layout is the
   layout, only smaller. (Step values set to the Btn
   page's own table in v0.323.3 — see the note above.) */
/* v0.324.5 (Clint): "THE SIDES ARE STILL GOING PAST THE
   GRAY AREA ON BOTH SIDES" — the step table only fit at the
   widths the rig tested (412/882). At 360 CSS px (Fold7
   cover screen) the 0.30 step renders the 1331px composition
   399px wide: the gray fits, the blue sides spill past the
   screen and he pans to see them (same spill at 701-732 and
   801-851, the bottoms of the other bands). The bleed calcs
   now divide by var(--mx-fit-zoom, <step>); base.html's fit
   script caps the frame zoom at (viewport - 1) / 1331 when a
   step would overflow, and a <=400px step (0.269) covers
   cover-screen widths without JS. Where a step already fits
   the script sets nothing — pure CSS, as shipped in
   v0.324.4. Full diagnosis in profile-archive.css. */
@media (max-width: 1100px) {
  body.mx-arch-site .mx-arch-frame { zoom: 0.64; }
  /* The bar's bleed strip is sized in vw; inside the zoom
     it must grow by 1/zoom or it stops at the frame edge. */
  body.mx-arch-site .mx-arch-topbar::before {
    width: calc(100vw / var(--mx-fit-zoom, 0.64));
    left: calc(50% - 50vw / var(--mx-fit-zoom, 0.64));
  }
}
@media (max-width: 800px) {
  body.mx-arch-site .mx-arch-frame { zoom: 0.55; }
  body.mx-arch-site .mx-arch-topbar::before {
    width: calc(100vw / var(--mx-fit-zoom, 0.55));
    left: calc(50% - 50vw / var(--mx-fit-zoom, 0.55));
  }
}
@media (max-width: 700px) {
  body.mx-arch-site .mx-arch-frame { zoom: 0.30; }
  body.mx-arch-site .mx-arch-topbar::before {
    width: calc(100vw / var(--mx-fit-zoom, 0.30));
    left: calc(50% - 50vw / var(--mx-fit-zoom, 0.30));
  }
}
@media (max-width: 400px) {
  /* v0.324.5: cover-screen fallback step (see above). */
  body.mx-arch-site .mx-arch-frame { zoom: 0.269; }
  body.mx-arch-site .mx-arch-topbar::before {
    width: calc(100vw / var(--mx-fit-zoom, 0.269));
    left: calc(50% - 50vw / var(--mx-fit-zoom, 0.269));
  }
}

/* Optional layout helpers (archive .leftbar / .midbar / #main_right).
   Opt-in only — the template's own layout wins if it doesn't use them. */
.mx-arch-leftbar { float: left; width: 150px; padding: 0 6px; }
.mx-arch-railcol { float: right; width: 198px; margin-right: 5px; color: #cccccc; }
.mx-arch-center { overflow: hidden; min-height: 450px; }
.mx-arch-clear { clear: both; }

/* ------------------------------------------------------------------ *
 * .mx-arch-topbar — the blue bar (archive #menu / .top).            *
 * Archive: height 34px, line-height 34px, font 11px bold white,     *
 * text-shadow #000 1px 1px 1px, border-top/bottom 1px solid #000,   *
 * segments padded 0 20px with a 1px #000 right border; the bar art  *
 * is TopMenuBack2.png (.top) / TopMenuBack.png (#menu), 1px strips *
 * repeated-x. Live height is ~36px per the brief.                   *
 * Hover art: the archive #menu rule literally uses                  *
 * TitleBackHover2.png (the 1x34 strip — copied to profile-arch/);   *
 * the 1x25 TitleBackHover.png is used by the likebar/railhead.      *
 * Active art: TitleBackActive.png (theme copy). The "subbar         *
 * shadow" is the bar's own black bottom border + drop shadow,       *
 * plus the optional .mx-arch-subbar strip below.                    *
 * ------------------------------------------------------------------ */
.mx-arch-topbar {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 36px;
  line-height: 36px;
  background: #000d33 url("/static/img/profile-arch/TopMenuBack2.png") left center repeat-x;
  background-size: auto 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
  text-shadow: #000 1px 1px 1px;
  font-size: 13px;
  position: relative;
  z-index: 20;
}
.mx-arch-topseg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 20px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  /* v0.323.0 (Clint): no black divider lines between bar
     segments — the thin separators live only around the
     right-side icon cluster (.mx-arch-cluster-first /
     .mx-arch-cluster-last, v0.323.2). */
}
.mx-arch-topseg:hover {
  background: url("/static/img/profile-arch/TitleBackHover2.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
  text-decoration: none;
}
/* Active segment: .on is the live state class; .selected /          *
 * [aria-current] are accepted aliases (archive name / a11y).        */
.mx-arch-topseg.on,
.mx-arch-topseg.selected,
.mx-arch-topseg[aria-current] {
  background: url("/static/img/theme/blue2/TitleBackActive.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
}
.mx-arch-topspacer { flex: 1 1 auto; }
/* Small icons inside the bar (mail 27x22, arrows, user pic). */
.mx-arch-topico { height: 22px; width: auto; border: none; display: block; }
.mx-arch-topseg .mx-arch-topico { display: inline-block; }
/* Logo overlapping the bar. Archive: the 213x42 logo pic sits in the
   34px bar with 6px top padding; the brief's live version is bigger:
   logo block 64px tall, pulled up 14px, image ~54px. */
.mx-arch-logo {
  flex: 0 0 auto;
  align-self: flex-start;
  height: 64px;
  margin-top: -14px;
  margin-right: 4px;
  padding: 0 5px 0 0;
  line-height: 0;
  position: relative;
  z-index: 21;
}
.mx-arch-logo img { height: 54px; width: auto; border: none; display: block; }
.mx-arch-logo:hover {
  background: url("/static/img/profile-arch/TitleBackHover2.png") left center repeat-x;
  background-size: auto 100%;
}
/* Optional thin shadow strip directly under the blue bar. */
.mx-arch-subbar {
  height: 5px;
  background: url("/static/img/theme/blue2/TitleBackbar.png") left center repeat-x;
  background-size: auto 100%;
  border-bottom: 1px solid #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------------ *
 * .mx-arch-blackmenu — the section menu under the blue bar.         *
 * Archive: ul.navigation — TopMenuBack.png on #3d3d3d, white bold,  *
 * 1px solid #000, top corners rounded 5px; links padded 5px 15px    *
 * with a 1px #000 border; hover = TitleBackActive.png;              *
 * a.selected = TopMenuBackHover.png with border-radius 5px.         *
 * The live buttons read as black glossy tabs: black text-shadow,    *
 * black borders, the archive art on hover/selected. Links may be    *
 * direct children (<a>) or in a <ul><li> — both are styled.         *
 * State class: .on (live), .selected accepted as an alias.          *
 * ------------------------------------------------------------------ */
.mx-arch-blackmenu {
  display: block;
  background: #3d3d3d url("/static/img/theme/blue2/TopMenuBack.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  list-style: none;
  margin: 0;
  /* v0.323.0 (Clint): the segments ARE the bar — no padding
     around pill buttons; the links fill the bar's height. */
  padding: 0;
  border: 1px solid #000;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  text-shadow: #000 1px 1px 1px;
}
.mx-arch-blackmenu ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mx-arch-blackmenu li { display: block; margin: 0; }
.mx-arch-blackmenu a {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  padding: 6px 14px;
  border: none;
  border-right: 1px solid #000;
  white-space: nowrap;
}
.mx-arch-blackmenu li:last-child a { border-right: none; }
.mx-arch-blackmenu a:hover {
  background: url("/static/img/theme/blue2/TitleBackActive.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
  text-decoration: none;
}
.mx-arch-blackmenu a.on,
.mx-arch-blackmenu a.selected,
.mx-arch-blackmenu a[aria-current] {
  background: #3d3d3d url("/static/img/profile-arch/TopMenuBackHover.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
  /* v0.323.0: a segment of the bar, not a pill — no radius. */
}

/* ------------------------------------------------------------------ *
 * .mx-arch-namebar — archive .profile_name.                         *
 * TopMenuBack.png on #3d3d3d, centred white bold, padding 5px,      *
 * 1px solid #000, border-radius 5px, margin-bottom 5px. Archive     *
 * width is 140px (+padding/border = 152, matching the 150px        *
 * avatar); the live bar keeps that width but may grow for long      *
 * names (max-width 100%, border-box).                               *
 * ------------------------------------------------------------------ */
.mx-arch-namebar {
  box-sizing: border-box;
  width: 152px;
  max-width: 100%;
  background: #3d3d3d url("/static/img/theme/blue2/TopMenuBack.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  margin: 0 0 5px;
  padding: 5px;
  border: 1px solid #000;
  border-radius: 5px;
  text-shadow: #000 1px 1px 1px;
  overflow-wrap: anywhere;
}

/* Profile picture (archive .ProfilePicture + Btn.html inline 5px). */
.mx-arch-avatar {
  border: 1px solid #000;
  border-radius: 5px;
  display: block;
  max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * .mx-arch-box / .mx-arch-pad — archive .box / .pad.                *
 * .box: #202020, 1px #000 on left/right/bottom (the colhead above   *
 * supplies the top border), 8pt-era font (live: inherit).           *
 * ------------------------------------------------------------------ */
.mx-arch-box {
  background-color: #202020;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-bottom: 10px;
}
.mx-arch-pad { margin: 0.6em 1em; }

/* ------------------------------------------------------------------ *
 * .mx-arch-colhead — archive .head / .colhead section bar.          *
 * Archive .colhead: TitleBackHighlight2.png (1x25, archive-only —   *
 * copied to profile-arch/), bold, 11px, white, 1px solid #000,      *
 * padding 5px (10px sides on cells). Live text is stepped up to     *
 * 13px for readability on the modern page. The right-hand [Edit]    *
 * slot is .mx-arch-colhead-edit (margin-left:auto in the flex row). *
 * ------------------------------------------------------------------ */
.mx-arch-colhead {
  display: flex;
  align-items: center;
  gap: 8px;
  background: url("/static/img/profile-arch/TitleBackHighlight2.png") left center repeat-x;
  background-size: auto 100%;
  font-weight: bold;
  font-size: 13px;
  color: #ffffff;
  border: 1px solid #000;
  padding: 5px 10px;
  text-shadow: #000 1px 1px 1px;
}
.mx-arch-colhead a { color: #ffffff; text-decoration: none; }
.mx-arch-colhead a:hover { color: var(--mx-arch-blue); }
.mx-arch-colhead-edit { margin-left: auto; font-weight: bold; white-space: nowrap; }

/* ------------------------------------------------------------------ *
 * .mx-arch-infostrip — the quick-info line (archive .profilestatpad)*
 * #333 strip, 15px tall in the archive, 1px #000 left/right/bottom, *
 * padding 2px 1em; items floated with 15px gaps, right-hand items   *
 * floated right. Live: a wrapping flex row; keys dim, values white. *
 * .mx-arch-info-key / .mx-arch-info-val mark a key/value pair;      *
 * .mx-arch-infostrip-right pushes a group to the right edge.        *
 * ------------------------------------------------------------------ */
.mx-arch-infostrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 15px;
  background: #333333;
  min-height: 15px;
  padding: 2px 1em;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  color: #ffffff;
  font-size: 12px;
}
.mx-arch-info-key { color: #999999; }
.mx-arch-info-val { color: #ffffff; }
.mx-arch-infostrip-right { margin-left: auto; display: inline-flex; gap: 15px; }
.mx-arch-infostrip img { vertical-align: -2px; }

/* ------------------------------------------------------------------ *
 * .mx-arch-h5btn — the archive h5 a glossy buttons                  *
 * (Follow / Share / Send Message).                                  *
 * Archive h5 a: TopMenuBack.png bg, padding 5px 10px 4px, 1px #000  *
 * borders, radius 5px, white, line-height 20px; h5 itself is 12px   *
 * #004cff bold with a black cross text-shadow, floated right with   *
 * 12px right / 7px bottom margins. Per the brief the live base art  *
 * is TitleBackHover.png (theme copy); hover lifts to the archive's  *
 * TitleBackHighlight2.png, and .on wears TitleBackActive.png.       *
 * .mx-arch-actions is the right-aligned row they sit in;            *
 * .mx-arch-h5btn-group joins two buttons into the archive's split   *
 * pair (square inner corners, shared middle border).                *
 * .mx-arch-ico sizes the inline icons (FollowArrow 11x13,           *
 * facebook 14x13, DownArrow2 12x8).                                 *
 * ------------------------------------------------------------------ */
.mx-arch-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 12px;
  margin: 0 12px 7px 0;
}
.mx-arch-h5btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: url("/static/img/theme/blue2/TitleBackHover.png") left center repeat-x;
  background-size: auto 100%;
  padding: 5px 10px 4px;
  border: 1px solid #000;
  border-radius: 5px;
  color: #ffffff;
  font-weight: bold;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  font-family: inherit;
}
.mx-arch-h5btn:hover {
  background: url("/static/img/profile-arch/TitleBackHighlight2.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
  text-decoration: none;
}
.mx-arch-h5btn.on {
  background: url("/static/img/theme/blue2/TitleBackActive.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
}
.mx-arch-h5btn[disabled],
.mx-arch-h5btn.is-disabled { opacity: 0.55; cursor: default; pointer-events: none; }
.mx-arch-h5btn-group { display: inline-flex; }
.mx-arch-h5btn-group > .mx-arch-h5btn:first-child {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.mx-arch-h5btn-group > .mx-arch-h5btn:last-child {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left: 1px solid #828080;
}
.mx-arch-ico { border: none; vertical-align: -2px; }

/* ------------------------------------------------------------------ *
 * .mx-arch-likebar — archive .likebar / .likebar2 (style.css        *
 * ~895-930). Each half is a block link at width 49%, floated,       *
 * TitleBackHover.png bg, radius 5px, padding 4px 0, borders: top/   *
 * bottom 1px #000, outer side 1px #828080 in the base rule (the     *
 * Btn.html inline styles square the inner corners and put #000 on  *
 * the outer sides). .like a:hover -> LikeBackHighlight.png;         *
 * .dislike a:hover -> DislikeBackHighlight.png. The live widget     *
 * keeps those hovers and adds the same art for the .on (your vote)  *
 * state. Icons: Like3.png / Dislike3.png (14x13).                   *
 * Disabled (own profile / signed out — rendered as a span or a      *
 * [disabled]/.is-disabled button): dimmed, no hover art.            *
 * ------------------------------------------------------------------ */
.mx-arch-likebar-wrap { width: 100%; }
.mx-arch-likebar {
  display: flex;
  width: 100%;
  margin-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
.mx-arch-like,
.mx-arch-dislike {
  flex: 1 1 49%;
  width: 49%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 0;
  background: url("/static/img/theme/blue2/TitleBackHover.png") left center repeat-x;
  background-size: auto 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  color: #ffffff;
  font-weight: bold;
  font-family: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.mx-arch-like {
  border-left: 1px solid #000;
  border-right: 1px solid #828080;
  border-radius: 5px 0 0 5px;
}
.mx-arch-dislike {
  border-right: 1px solid #000;
  border-left: none;
  border-radius: 0 5px 5px 0;
}
.mx-arch-like img,
.mx-arch-dislike img { border: none; }
.mx-arch-dislike img { position: relative; top: 2px; } /* archive: top 4px on a 13px icon, softened */
.mx-arch-like:hover,
.mx-arch-like.on {
  background: url("/static/img/profile-arch/LikeBackHighlight.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
}
.mx-arch-dislike:hover,
.mx-arch-dislike.on {
  background: url("/static/img/profile-arch/DislikeBackHighlight.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
}
.mx-arch-like[disabled], .mx-arch-dislike[disabled],
.mx-arch-like.is-disabled, .mx-arch-dislike.is-disabled,
span.mx-arch-like, span.mx-arch-dislike {
  opacity: 0.55;
  cursor: default;
}
/* v0.322.0: disabled like/dislike reads as disabled — flat
   gray, grayscale, and the hover selectors are named so the
   green/red highlight art can never repaint a dead button. */
.mx-arch-like[disabled], .mx-arch-dislike[disabled],
.mx-arch-like[disabled]:hover, .mx-arch-dislike[disabled]:hover,
.mx-arch-like.is-disabled, .mx-arch-dislike.is-disabled,
.mx-arch-like.is-disabled:hover, .mx-arch-dislike.is-disabled:hover {
  background: #262626;
  background-image: none;
  filter: grayscale(1);
  opacity: 0.5;
  cursor: not-allowed;
}
span.mx-arch-like:hover { background: url("/static/img/theme/blue2/TitleBackHover.png") left center repeat-x; background-size: auto 100%; }
span.mx-arch-dislike:hover { background: url("/static/img/theme/blue2/TitleBackHover.png") left center repeat-x; background-size: auto 100%; }
span.mx-arch-like.on { background: url("/static/img/profile-arch/LikeBackHighlight.png") left center repeat-x; background-size: auto 100%; opacity: 1; }
span.mx-arch-dislike.on { background: url("/static/img/profile-arch/DislikeBackHighlight.png") left center repeat-x; background-size: auto 100%; opacity: 1; }

/* .mx-arch-likemeter — the archive count box under the buttons:     *
 * background #202020, 1px solid #000, 5px side margins; inside it   *
 * the archive used the LikeColorBar3.png image — the live bar is    *
 * CSS-built instead: a bordered split bar whose green segment is    *
 * width = like %, the rest red, then the counts line (green left,   *
 * red right, archive colours verbatim).                             */
.mx-arch-likemeter {
  background: #202020;
  border: 1px solid #000;
  margin: 0 5px;
  padding: 5px 6px 2px;
}
.mx-arch-likemeter-bar {
  display: flex;
  height: 6px;
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;
  background: #fa5b5b;
}
.mx-arch-meter-yes {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #7dff9e 0%, #00ff42 55%, #00c933 100%);
}
.mx-arch-meter-no {
  display: block;
  height: 100%;
  flex: 1 1 auto;
  background: linear-gradient(180deg, #ff9d9d 0%, #fa5b5b 55%, #d63d3d 100%);
}
/* v0.322.0: zero votes = an empty neutral bar, never full red. */
.mx-arch-likemeter-bar.is-empty { background: #2e2e2e; }
.mx-arch-likemeter-bar.is-empty .mx-arch-meter-yes,
.mx-arch-likemeter-bar.is-empty .mx-arch-meter-no { background: none; }
.mx-arch-likecounts {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
}
.mx-arch-like-count { color: #00ff42; }
.mx-arch-dislike-count { color: #fa5b5b; text-align: right; }

/* ------------------------------------------------------------------ *
 * .mx-arch-stars — profile star rating.                             *
 * The archive profile shows the stars.png strip (181x37) at full    *
 * column width under the avatar (Btn.html: width 152 / 100%,        *
 * margin-top 5px, radius 5px) — kept as .mx-arch-stars-img for a    *
 * static strip. The live interactive version is five star buttons:  *
 * filled stars in the archive comment blue #0096ff, dimmed stars    *
 * in #444, both with the black cross text-shadow the archive uses   *
 * on its blue headings. Caption: "Rated X/5 (NN%) (N Votes)".       *
 * State class: .on = filled. Buttons carry data-mx-prof-rate        *
 * (see profile-arch.js).                                            *
 * ------------------------------------------------------------------ */
.mx-arch-stars-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 5px;
  border-radius: 5px;
  border: none;
}
.mx-arch-stars-wrap { margin-top: 5px; text-align: center; }
.mx-arch-stars { display: inline-flex; gap: 2px; line-height: 1; }
.mx-arch-star {
  background: none;
  border: none;
  padding: 0 1px;
  margin: 0;
  font-size: 24px;
  line-height: 1;
  font-family: inherit;
  color: #444444;
  cursor: pointer;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.mx-arch-star.on { color: #0096ff; }
.mx-arch-star:hover { color: #3faafd; }
/* v0.322.0: disabled stars read as disabled (see profile sheet). */
.mx-arch-star[disabled], .mx-arch-star[disabled]:hover {
  color: #444444;
  filter: grayscale(1);
  opacity: 0.5;
  cursor: not-allowed;
}
span.mx-arch-star { cursor: default; }
.mx-arch-stars-caption {
  margin-top: 3px;
  font-size: 12px;
  color: #cccccc;
  text-align: center;
}
.mx-arch-stars-caption b, .mx-arch-stars-caption strong { color: #0096ff; }

/* ------------------------------------------------------------------ *
 * .mx-arch-cols / .mx-arch-col — the four Music Info columns.       *
 * global.css: .floatleft { float:left; width:140px } inside a       *
 * .statistics block (margins 0 8px); each column's heading is       *
 * .BoxTitle (13px bold white, 1px white bottom border, inline),     *
 * over a .nobullet list. Live: same 140px floats in a clearfixed    *
 * row; on narrow screens the columns take half the row each.        *
 * ------------------------------------------------------------------ */
.mx-arch-cols { margin: 5px 8px 10px; }
.mx-arch-cols::after { content: ""; display: block; clear: both; }
.mx-arch-col { float: left; width: 140px; }
.mx-arch-coltitle {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
  margin-bottom: 3px;
}
.mx-arch-col ul { list-style: none; margin: 0; padding: 0; }
.mx-arch-col li { margin: 0 0 2px; }
.mx-arch-col a { color: #999999; text-decoration: none; }
.mx-arch-col a:hover { color: #0096ff; }
@media (max-width: 640px) {
  .mx-arch-col { width: calc(50% - 8px); margin-right: 8px; }
}

/* ------------------------------------------------------------------ *
 * .mx-arch-railbox — right-rail boxes (Recently Joined /            *
 * Latest News). Header = archive #main_right h4: TitleBackHover.png *
 * art (the archive rule points at the blue2 theme path), colour     *
 * #0096ff, bold, centred, line-height 25px, 1px solid #000,         *
 * radius 5px, black cross text-shadow. Body = .meta2: #222, 1px     *
 * #000 right/left/bottom, 3px side margins, 10px bottom margin.     *
 * Rows = .li2: #222, white, block, padding 2px 0 2px 5px; hover     *
 * wears TopMenuBack.png on #888 and turns the text #3faafd.         *
 * .mx-arch-raildate is the row's leading date span. Direct h4/ul/li *
 * children are styled too, so minimal markup works.                 *
 * ------------------------------------------------------------------ */
.mx-arch-railbox { margin-bottom: 10px; }
.mx-arch-railhead,
.mx-arch-railbox > h4 {
  margin: 0;
  color: #0096ff;
  font-weight: bold;
  font-size: 13px;
  border: 1px solid #000;
  text-align: center;
  line-height: 25px;
  background: url("/static/img/theme/blue2/TitleBackHover.png") left center repeat-x;
  background-size: auto 100%;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  border-radius: 5px;
}
.mx-arch-railbody,
.mx-arch-railbox > ul {
  list-style: none;
  font-weight: normal;
  line-height: 15px;
  color: #666666;
  background: #222222;
  margin: 0 3px 10px;
  padding: 0;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  font-size: 12px;
}
.mx-arch-railrow,
.mx-arch-railbody > li,
.mx-arch-railbox > ul > li {
  list-style: none;
  background: #222222;
  color: #ffffff;
  display: block;
  padding: 2px 0 2px 5px;
  text-align: left;
}
.mx-arch-railrow a,
.mx-arch-railbody > li a { color: #ffffff; text-decoration: none; display: block; }
.mx-arch-railrow:hover,
.mx-arch-railbody > li:hover {
  background: #888888 url("/static/img/theme/blue2/TopMenuBack.png") left center repeat-x;
  background-size: auto 100%;
  color: #3faafd;
}
.mx-arch-railrow:hover a,
.mx-arch-railbody > li a:hover { color: #3faafd; text-decoration: none; }
.mx-arch-raildate { color: #999999; }
.mx-arch-railrow:hover .mx-arch-raildate { color: #e9e9e9; }

/* ------------------------------------------------------------------ *
 * Photo viewer overlay — built by profile-arch.js at runtime and    *
 * appended to <body class="mx-arch-profile">, so these classes are  *
 * also only ever live on the profile page.                          *
 * ------------------------------------------------------------------ */
.mx-arch-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  box-sizing: border-box;
}
.mx-arch-viewer[hidden] { display: none; }
.mx-arch-viewer-img {
  display: block;
  height: auto;
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);
  object-fit: contain;
  background: #111111;
  border: 1px solid #000;
  border-radius: 5px;
}
.mx-arch-viewer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  background: url("/static/img/theme/blue2/TitleBackHover.png") left center repeat-x;
  background-size: auto 100%;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px 8px;
  color: #ffffff;
  text-shadow: #000 1px 1px 1px;
}
.mx-arch-viewer-cap {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.mx-arch-viewer-count { color: #cfe6ff; font-size: 12px; white-space: nowrap; }
.mx-arch-viewer-btn {
  flex: 0 0 auto;
  background: url("/static/img/theme/blue2/TopMenuBack.png") left center repeat-x;
  background-size: auto 100%;
  border: 1px solid #000;
  border-radius: 5px;
  color: #ffffff;
  font-weight: bold;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}
.mx-arch-viewer-btn:hover {
  background: url("/static/img/profile-arch/TitleBackHighlight2.png") left center repeat-x;
  background-size: auto 100%;
}

/* Keyboard focus stays visible across the archive components. */
body.mx-arch-site .mx-arch-topseg:focus-visible,
body.mx-arch-site .mx-arch-blackmenu a:focus-visible,
body.mx-arch-site .mx-arch-h5btn:focus-visible,
body.mx-arch-site .mx-arch-like:focus-visible,
body.mx-arch-site .mx-arch-dislike:focus-visible,
body.mx-arch-site .mx-arch-star:focus-visible,
body.mx-arch-site .mx-arch-viewer-btn:focus-visible {
  outline: 2px solid #0096ff;
  outline-offset: 1px;
}

/* ================================================================== *
 * Discussion-kit overrides — profile scope ONLY.                     *
 * The kit (.mx-comment, .mx-post, …) keeps its layout; only its      *
 * paint changes to the archive's comment world:                      *
 *   comment panel  #444 body in the archive, on #202020 boxes here   *
 *   .commenthead   TitleBackHover.png bg, bold 11px, colour #0096ff, *
 *                  1px solid #000, padding 5px                       *
 *   comment title  #333 bg, #999 bold text, 1px solid #000           *
 * ================================================================== */
body.mx-arch-site .mx-comment {
  background: #202020;
  border: 1px solid #000;
  border-radius: 5px;
}
body.mx-arch-site .mx-comment-bubble {
  background: #2a2a2a;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 8px 10px;
}
/* The byline becomes the archive's black glossy comment head: art
   bg, white name, blue accents (time / badges / dots). */
body.mx-arch-site .mx-comment-byline {
  background: url("/static/img/profile-arch/TitleBackHover.png") left center repeat-x;
  background-size: auto 100%;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px 8px;
  margin: -2px -2px 6px;
  color: #ffffff;
  font-weight: bold;
  text-shadow: #000 1px 1px 1px;
}
body.mx-arch-site .mx-comment-byline a { color: #ffffff; }
body.mx-arch-site .mx-comment-byline .mx-timebtn,
body.mx-arch-site .mx-comment-byline .mx-exact,
body.mx-arch-site .mx-comment-byline .mx-cbadge-author { color: #0096ff; }
body.mx-arch-site .mx-byline-dot { color: #0096ff; }
/* New kit line the templates add under the byline (city/state ·
   plays · band · type icon): the archive comment .title row —
   #333, #999, 1px #000. Text stays dim; the icon does not. */
body.mx-arch-site .mx-cbyline-extra {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px 8px;
  background: #333333;
  color: #999999;
  border: 1px solid #000;
  padding: 2px 5px;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: bold;
}
body.mx-arch-site .mx-cbyline-extra a { color: #dddddd; }
body.mx-arch-site .mx-cbyline-extra img {
  opacity: 1;
  vertical-align: -2px;
}
body.mx-arch-site .mx-comment-text { color: #e9e9e9; }
body.mx-arch-site .mx-comment-meta { color: #999999; }
/* Avatars go square-cornered like the archive's profile pictures
   (base.css pins the SIZE with !important; radius/border are ours). */
body.mx-arch-site .mx-cavatar {
  border-radius: 5px;
  border: 1px solid #000;
}
/* Reply connector lines keep the kit's geometry, recoloured #444. */
body.mx-arch-site .mx-creplies > .mx-comment::before,
body.mx-arch-site .mx-creplies-first > .mx-comment::before {
  border-left-color: #444444;
  border-bottom-color: #444444;
}
body.mx-arch-site .mx-creplies > .mx-comment::after,
body.mx-arch-site .mx-cthread-more .mx-creplies-first > .mx-comment::after {
  border-left-color: #444444;
}
body.mx-arch-site .mx-creplies-toggle::before {
  border-left-color: #444444;
  border-bottom-color: #444444;
}
body.mx-arch-site .mx-creplies-toggle { color: #999999; }
body.mx-arch-site .mx-creplies-toggle:hover { color: #ffffff; }
/* Composer inputs: the archive's dark input look (its global input
   rule is #333 on #666 borders; the brief's profile values are
   #111 bg, #000 border, white text). The :focus-within / open-reply
   rules also restate the form's lifted panel in archive paint so the
   base kit's primary-colour ring does not show on this page. */
body.mx-arch-site .mx-comment-form input,
body.mx-arch-site .mx-comment-form textarea,
body.mx-arch-site .mx-comment-form select,
body.mx-arch-site .mx-post-editform textarea,
body.mx-arch-site .mx-post-editform input {
  background: #111111;
  border: 1px solid #000;
  color: #ffffff;
}
body.mx-arch-site details.mx-reply[open] > form.mx-comment-form,
body.mx-arch-site form.mx-comment-form:focus-within,
body.mx-arch-site form.mx-post-editform:focus-within {
  background: #202020;
  border: 1px solid #000;
  border-radius: 5px;
}
body.mx-arch-site details.mx-reply[open] > form.mx-comment-form input,
body.mx-arch-site form.mx-comment-form:focus-within input,
body.mx-arch-site form.mx-post-editform:focus-within textarea {
  background: #111111;
  border-color: #000;
  color: #ffffff;
}

/* ================================================================== *
 * Post skin — profile scope ONLY, deliberately light: wall posts     *
 * get the archive panel paint (borders/background/spacing) and       *
 * nothing structural.                                                *
 * ================================================================== */
body.mx-arch-site .mx-post {
  background: #202020;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}
body.mx-arch-site .mx-post-head {
  border-bottom: 1px solid #333333;
  padding-bottom: 6px;
}
body.mx-arch-site .mx-post-head a { color: #ffffff; }

/* ================================================================== *
 * Integration additions (coordinator) — page chrome + small pieces.  *
 * The profile page carries its own bars inside .mx-arch-frame, so    *
 * base.html's flex container + sidebar step aside on this page only. *
 * ================================================================== */
body.mx-arch-site .mx-container {
  max-width: none;
  margin: 10px 0 14px;
  padding: 0 2px;
}
body.mx-arch-site .mx-content {
  min-width: 0;
  background: #202020;
  border: 1px solid #000;
  border-radius: 5px;
}
body.mx-arch-site .mx-sidebar {
  background: #222222;
  border: 1px solid #000;
  border-radius: 5px;
}
body.mx-arch-site .mx-footer {
  background: transparent;
  color: #999999;
  border-top: none;
  text-align: center;
}
/* Unread envelope badge in the top bar. */
.mx-arch-badge {
  background: #c0392b;
  color: #ffffff;
  border: 1px solid #000;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
}
/* The tagline segment never takes the hover art. */
.mx-arch-topseg.mx-arch-tagline { font-style: italic; font-weight: normal; }
.mx-arch-topseg.mx-arch-tagline:hover { background: none; }
/* Search segment: the archive's .topsearchbox inside the blue
   bar — translucent blue glass, 5px radius (style.css:556). */
.mx-arch-search { padding: 0 10px; }
.mx-arch-search input {
  background: rgba(0, 0, 255, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  color: #ffffff;
  font-size: 12px;
  padding: 3px 6px;
  width: 104px;
}
.mx-arch-search input::placeholder { color: #888888; }
/* Star + likebar forms carry no chrome of their own. */
form.mx-arch-stars-wrap,
form.mx-arch-likebar-wrap { margin: 0; padding: 0; }
/* Photo strip (center column): the viewer's thumbnails. */
.mx-arch-photostrip { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 8px 10px; }
.mx-arch-photostrip a { display: block; line-height: 0; }
.mx-arch-photostrip img {
  height: 64px; width: 64px; object-fit: cover;
  border: 1px solid #000; border-radius: 3px;
}
/* The kit's replying-to excerpt must not push past the frame
   on narrow screens (profile scope). */
body.mx-arch-site .mx-replying-excerpt {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================================== *
 * SITE-ONLY sections (v0.320.0) — the site chrome's extra pieces     *
 * and the general-page consistency pass. Everything here is scoped   *
 * body.mx-arch-site; none of it exists in the profile sheet.         *
 * ================================================================== */

/* The ☰ menu toggle is a <button> wearing .mx-arch-topseg: strip
   the UA button paint so it sits in the blue bar like a segment.
   v0.323.2: no separator of its own (border-left stripped too). */
button.mx-arch-topseg {
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  font: inherit;
  cursor: pointer;
}
/* The Log Out item in the black menu is a POST form: make its
   button indistinguishable from the menu's links. */
.mx-arch-blackmenu form { display: block; margin: 0; }
.mx-arch-blackmenu button.mx-arch-menubtn {
  display: block;
  color: #ffffff;
  font-weight: bold;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  padding: 6px 14px;
  border: none;
  border-right: 1px solid #000;
  background: none;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
}
.mx-arch-blackmenu button.mx-arch-menubtn:hover {
  background: url("/static/img/theme/blue2/TitleBackActive.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
}
/* Two stacked black menus (primary + contextual): rounded outer
   corners only, square where they meet. */
.mx-arch-menuwrap > .mx-arch-blackmenu { border-radius: 0; }
.mx-arch-menuwrap > .mx-arch-blackmenu:first-child {
  border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.mx-arch-menuwrap > .mx-arch-blackmenu:last-child {
  border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
}
.mx-arch-menuwrap > .mx-arch-blackmenu:only-child { border-radius: 5px; }
/* The unread badge inside a black-menu item. */
.mx-arch-blackmenu .mx-arch-badge { margin-left: 2px; }

/* The hamburger panel, opened inside the frame, wears panel paint. */
body.mx-arch-site .mx-nav { margin-top: 6px; }
body.mx-arch-site .mx-nav.mx-nav-panelmode.open {
  background: #202020;
  border: 1px solid #000;
  border-radius: 5px;
}
/* Site banners sit inside the frame now: a little air on top. */
body.mx-arch-site .mx-banners { margin: 8px 2px 0; }

/* ---------------------------------------------------------------- *
 * General-page consistency: buttons + page headers.                *
 * .mx-btn becomes the archive's glossy black button (the h5 art),  *
 * hover lifts to the highlight art, primary wears the active art.  *
 * Danger and ticket buttons keep their own colours on purpose.     *
 * ---------------------------------------------------------------- */
body.mx-arch-site .mx-btn {
  background: url("/static/img/theme/blue2/TitleBackHover.png") left center repeat-x;
  background-size: auto 100%;
  border: 1px solid #000;
  border-radius: 5px;
  color: #ffffff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
body.mx-arch-site .mx-btn:hover {
  background: url("/static/img/profile-arch/TitleBackHighlight2.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
  filter: none;
  text-decoration: none;
}
body.mx-arch-site .mx-btn-primary {
  background: url("/static/img/theme/blue2/TitleBackActive.png") left center repeat-x;
  background-size: auto 100%;
  border-color: #000;
  color: #ffffff;
}
body.mx-arch-site .mx-btn-danger { background: linear-gradient(#c04040, #a02020); }
body.mx-arch-site .mx-btn-tickets { background: #0E5AFF; }
/* Page titles wear the archive section bar (the colhead art);
   the landing hero H1 keeps its own design. */
body.mx-arch-site .mx-content h1:not(.mx-hero-h1) {
  background: url("/static/img/profile-arch/TitleBackHighlight2.png") left center repeat-x;
  background-size: auto 100%;
  border: 1px solid #000;
  border-radius: 3px;
  color: #ffffff;
  padding: 5px 10px;
  margin: 0 0 10px;
  font-size: 15px;
  text-shadow: #000 1px 1px 1px;
}
/* Panel boxes sit in the archive world: black frame, #202020 body. */
body.mx-arch-site .mx-panel-box {
  background: #202020;
  border: 1px solid #000;
  border-radius: 5px;
}
/* Narrow screens: form controls sized by their size= attribute
   (the settings page's developer-app URLs are size=48) must
   never push the page sideways — cap them at the column. Caps
   only; nothing ever gets wider. */
body.mx-arch-site .mx-content input,
body.mx-arch-site .mx-content select,
body.mx-arch-site .mx-content textarea { max-width: 100%; }
/* ================================================================== *
 * BAND + VENUE FRAMES (v0.321.0) — the band skeleton (shared by      *
 * band.html and venue.html) inside the archive composition. The     *
 * skeleton is itself the original Bands.php lineage, so this is a   *
 * frame/composition migration, not a redesign: every band-ajax      *
 * hook and section survives untouched; what changes is the paint    *
 * unification (panels, section heads) and the stacking — the fixed  *
 * width=1010 viewport is gone, so the columns must stack at phone   *
 * widths with no page-level horizontal scroll.                      *
 * ================================================================== */

/* Panels unify with the archive world: #202020 body, black frame. */
body.mx-arch-site .mx-band .mx-band-subpanel,
body.mx-arch-site .mx-band .mx-band-menu,
body.mx-arch-site .mx-band .mx-band-sidebox,
body.mx-arch-site .mx-band .mx-band-upcoming {
  background: #202020;
  border: 1px solid #000;
  border-radius: 5px;
}
body.mx-arch-site .mx-band .mx-band-tabbody {
  background: #202020;
  border: 1px solid #000;
  border-radius: 0 5px 5px 5px;
}
/* Section heads wear the archive colhead art (they already wore
   the same blue as a gradient; this makes it the same art). */
body.mx-arch-site .mx-band .mx-band-menuhead {
  background: url("/static/img/profile-arch/TitleBackHighlight2.png") left center repeat-x;
  background-size: auto 100%;
  border-bottom: 1px solid #000;
  color: #ffffff;
  text-shadow: #000 1px 1px 1px;
}
body.mx-arch-site .mx-band h2.mx-band-sect {
  background: url("/static/img/profile-arch/TitleBackHighlight2.png") left center repeat-x;
  background-size: auto 100%;
  border: 1px solid #000;
  border-radius: 3px;
  color: #ffffff;
  padding: 5px 10px;
  margin: 0 0 10px;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  text-shadow: #000 1px 1px 1px;
}
/* The band's own menu keeps its structure; the current item
   already lights blue — keep. Hover row lifts slightly. */
body.mx-arch-site .mx-band .mx-band-menu a:hover { background: #2a2a2a; }

/* ------------------------------------------------------------------ *
 * v0.322.2 (Clint) — the bar settles + the 2012 comment structure.   *
 * The logo nudges DOWN so it overhangs the blue bar's bottom edge   *
 * like the archive's; the tagline leaves the bar for a small line   *
 * just under it; posts and comments wear the archive's structure:   *
 * a full-width glossy black title bar (name left, full date right   *
 * in blue) over a #444 panel, with the bordered info strip inside   *
 * (instrument/role + band left, flag + place right).                 *
 * ------------------------------------------------------------------ */
.mx-arch-logo { margin-top: -4px; }
.mx-arch-tagline-under {
  font-style: italic;
  color: #cfd8e3;
  font-size: 12.5px;
  padding: 4px 12px 2px;
  text-shadow: #000 1px 1px 1px;
}
@media (max-width: 1100px) {
  .mx-arch-logo { margin-top: 2px; }
}
body.mx-arch-site .mx-comment {
  background: #444444;
  border-radius: 0;
}
body.mx-arch-site .mx-ctitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  border: none;
  border-bottom: 1px solid #000;
  border-radius: 0;
}
body.mx-arch-site .mx-ctitle .mx-ctitle-name { min-width: 0; }
body.mx-arch-site .mx-ctitle .mx-ctitle-date { flex: 0 0 auto; }
body.mx-arch-site .mx-ctitle .mx-timebtn {
  color: #0096ff;
  font-size: 12px;
  padding: 2px 4px;
  min-height: 0;
}
body.mx-arch-site .mx-comment-row { padding: 6px 8px 2px; }
body.mx-arch-site .mx-comment-bubble {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
body.mx-arch-site .mx-cstrip { justify-content: space-between; }
/* v0.323.1 (Clint, item 13): the archive strip is ONE line —
   the role side ellipsizes; the place side never wraps. */
body.mx-arch-site .mx-cstrip-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.mx-arch-site .mx-cstrip-r {
  margin-left: auto;
  text-align: right;
  flex: 0 0 auto;
  white-space: nowrap;
}
body.mx-arch-site .mx-cstrip-flag {
  width: 16px; height: 11px;
  outline: 1px solid #000;
  margin-right: 5px;
  vertical-align: -1px;
  opacity: 1;
}
body.mx-arch-site .mx-post {
  background: #444444;
  border-radius: 0;
  padding: 0;
}
body.mx-arch-site .mx-ptitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: url("/static/img/profile-arch/TitleBackHover.png") left center repeat-x;
  background-size: auto 100%;
  border-bottom: 1px solid #000;
  padding: 5px 8px;
  margin: 0;
  color: #ffffff;
  font-weight: bold;
  text-shadow: #000 1px 1px 1px;
}
body.mx-arch-site .mx-ptitle a { color: #ffffff; }
body.mx-arch-site .mx-ptitle .mx-timebtn {
  color: #0096ff;
  font-size: 12px;
  padding: 2px 4px;
  min-height: 0;
}
body.mx-arch-site .mx-post-row {
  display: flex;
  gap: 8px;
  padding: 8px 10px 2px;
}
body.mx-arch-site .mx-pavatar {
  width: 50px; height: 50px;
  object-fit: cover;
  border: 1px solid #000;
  border-radius: 5px;
  display: block;
}
body.mx-arch-site .mx-post-main { flex: 1 1 auto; min-width: 0; }
body.mx-arch-site .mx-post-main .mx-post-body { margin-top: 0; }
body.mx-arch-site .mx-post-meta {
  color: #999999;
  font-size: 12px;
  margin-top: 4px;
}
body.mx-arch-site .mx-post-actions { padding: 0 10px 8px; }
/* The shared children under the post's branch (mention chips,
   media, the event card, the edit form, the comments) keep the
   old 10px inset the .mx-post padding used to give them. */
body.mx-arch-site .mx-post > p { padding: 0 10px; }
body.mx-arch-site .mx-post > .mx-media,
body.mx-arch-site .mx-post > .mx-event-card,
body.mx-arch-site .mx-post > .mx-editwrap,
body.mx-arch-site .mx-post > .mx-comments { margin-left: 10px; margin-right: 10px; }
body.mx-arch-site .mx-post > .mx-comments { margin-bottom: 8px; }

/* ------------------------------------------------------------------ *
 * v0.323.0 (Clint) — the Fold7 fix batch, site-chrome mirror.        *
 * The blue bar runs FULL WIDTH at the very top (its art,             *
 * borders and shadow bleed to the viewport edges on a ::before      *
 * strip; contents keep their frame-aligned positions); the           *
 * logo overhangs about half its height below the bar, up a           *
 * touch (54px logo: margin-top 5px -> 23px below the 36px            *
 * bar; 44px logo: 10px -> 18px); the tagline returns to its          *
 * pre-v0.322.2 x (just right of the logo: 191px from the             *
 * frame's content edge); comment/post title bars wear the            *
 * glossy BLACK archive paint at every width, one line, the           *
 * name ellipsizing before the date can wrap.                         *
 * ------------------------------------------------------------------ */
.mx-arch-topbar::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #000d33 url("/static/img/profile-arch/TopMenuBack2.png") left center repeat-x;
  background-size: auto 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
  z-index: -1;
}
/* v0.323.2 (Clint): exactly TWO divider lines in the bar —
   one at the left edge of the right-side icon cluster and
   one at its right edge. The cluster classes ride the first
   (invite) and last (HelpI) icon anchors in the templates;
   every other segment sits on the continuous blue. */
.mx-arch-topico-seg { padding: 0 12px; }
.mx-arch-cluster-first { border-left: 1px solid #000; }
.mx-arch-cluster-last { border-right: 1px solid #000; }
.mx-arch-logo { margin-top: 5px; }
/* v0.324.2 (Clint): the tagline moves RIGHT a bit — 191px put
   its first letter 23.7px past the logo's right edge; 196px
   gives a ~29px clear gap. (The profile sheet's <=1100px
   reduction overlapped the tagline under the logo entirely;
   see the mirror note in profile-archive.css.) */
.mx-arch-tagline-under { padding: 4px 12px 2px 196px; }
/* v0.323.1 (Clint, item 13): TitleBackHover.png — the
   archive .commenthead's own art (deep glossy black), not
   the menu strip TopMenuBack.png, which read flat gray.
   v0.323.3 (Clint, item 3): the URL must be the BTN art
   copy in profile-arch/ — the blue2 THEME file of the
   same name is a silver-topped gradient (top 163, mean
   69 vs the Btn art's black top, mean 38), which is why
   v0.323.1's bars still painted light. See the mirror
   note in profile-archive.css; verified by pixel
   sampling against the rendered Btn comment head. */
body.mx-arch-site .mx-ctitle,
body.mx-arch-site .mx-ptitle {
  background: #3d3d3d url("/static/img/profile-arch/TitleBackHover.png") left center repeat-x;
  background-size: auto 100%;
  flex-wrap: nowrap;
}
body.mx-arch-site .mx-ctitle .mx-ctitle-name,
body.mx-arch-site .mx-ptitle .mx-ptitle-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.mx-arch-site .mx-ctitle .mx-ctitle-date,
body.mx-arch-site .mx-ptitle .mx-ptitle-date {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ================================================================
   v0.324.7 (Clint): comments lose the square outlines — the
   site-scope twin of the profile-archive.css block. The
   per-comment bordered box goes (glossy title bar and the
   bordered info strip keep their paint) and the kit's
   connector lines are repainted in a colour that reads on
   the archive's gray.
   ================================================================ */
body.mx-arch-site .mx-comment {
  background: transparent;
  border: none;
  border-radius: 0;
}
body.mx-arch-site .mx-creplies > .mx-comment::before,
body.mx-arch-site .mx-creplies-first > .mx-comment::before {
  border-left-color: #98a2b3;
  border-bottom-color: #98a2b3;
}
body.mx-arch-site .mx-creplies > .mx-comment::after,
body.mx-arch-site .mx-cthread-more .mx-creplies-first > .mx-comment::after {
  border-left-color: #98a2b3;
}
body.mx-arch-site .mx-creplies-toggle::before {
  border-left-color: #98a2b3;
  border-bottom-color: #98a2b3;
}