/* =====================================================================
   MusicXen v0.319.0 — profile-archive.css
   Archive skin for the USER PROFILE page ONLY.

   Loaded only on profile pages, and every rule is scoped anyway:
     - page-frame rules : body.mx-arch-profile …
     - components       : .mx-arch-* class names
     - discussion kit   : body.mx-arch-profile .mx-* selectors
   Nothing in here can affect any other page.

   Source of the values: the 2012 archive BTN profile page —
   ~/workspace/mediaxen/deploy/sites/phase1/BTN/
     Btn.html, includes/css/style.css, includes/css/global.css
   Bar art is mostly 1x25 (some 1x34) gradient strips, repeated-x.
   Strips that production already carries are referenced from the
   theme, NOT re-copied:
     /static/img/theme/blue2/TopMenuBack.png     (== archive, same md5)
     /static/img/theme/blue2/TitleBackHover.png  (theme copy)
     /static/img/theme/blue2/TitleBackActive.png (== archive, same md5)
     /static/img/theme/blue2/TitleBackbar.png    (== archive, same md5)
   Everything else lives in /static/img/profile-arch/ (copied 1:1).

   Canonical component markup (the templates integrate against this):

     <body class="mx-arch-profile">
       <div class="mx-arch-frame">
         <div class="mx-arch-topbar">
           <a class="mx-arch-logo" href="/"><img …></a>
           <a class="mx-arch-topseg on" href="…">Home</a>
           <a class="mx-arch-topseg" href="…">Music</a>
           <span class="mx-arch-topspacer"></span>
           <a class="mx-arch-topseg" href="…"><img class="mx-arch-topico"
              src="/static/img/profile-arch/MailTest8T.png" alt="Messages"></a>
         </div>
         <nav class="mx-arch-blackmenu">
           <a class="on" href="#profile">Profile</a><a href="#music">Music</a>…
         </nav>
         … or the same links as <ul><li><a>…</a></li></ul> inside it.

         <div class="mx-arch-namebar">Clint Worsley</div>
         <img class="mx-arch-avatar" …>
         <img class="mx-arch-stars-img"
              src="/static/img/profile-arch/stars.png" alt="">   (static strip)

         <div class="mx-arch-stars-wrap">
           <div class="mx-arch-stars">
             <button type="button" class="mx-arch-star on"
                     data-mx-prof-rate="1" data-url="/u/x/rate">★</button> ×5
           </div>
           <div class="mx-arch-stars-caption" data-mx-stars-caption>
             Rated 4.5/5 (90%) (12 Votes)</div>
         </div>

         <div class="mx-arch-likebar-wrap">
           <div class="mx-arch-likebar">
             <button type="button" class="mx-arch-like"
                     data-mx-prof-react="like" data-url="/u/x/react">
               <img src="/static/img/profile-arch/Like3.png" alt="">Like</button>
             <button type="button" class="mx-arch-dislike"
                     data-mx-prof-react="dislike" data-url="/u/x/react">
               <img src="/static/img/profile-arch/Dislike3.png" alt="">Dislike</button>
           </div>
           <div class="mx-arch-likemeter">
             <div class="mx-arch-likemeter-bar">
               <span class="mx-arch-meter-yes" data-mx-meter-yes
                     style="width:88%"></span><span class="mx-arch-meter-no"></span>
             </div>
             <div class="mx-arch-likecounts">
               <span class="mx-arch-like-count" data-mx-like-count>1,337 Likes</span>
               <span class="mx-arch-dislike-count" data-mx-dislike-count>182 Dislikes</span>
             </div>
           </div>
         </div>

         <div class="mx-arch-actions">
           <span class="mx-arch-h5btn-group">
             <button class="mx-arch-h5btn">Follow
               <img class="mx-arch-ico"
                    src="/static/img/profile-arch/FollowArrow.png" alt=""></button>
             <button class="mx-arch-h5btn" data-mx-share data-url="/u/x">
               <img class="mx-arch-ico"
                    src="/static/img/profile-arch/facebook.png" alt="">Share</button>
           </span>
           <a class="mx-arch-h5btn" href="…">Send Message</a>
         </div>

         <div class="mx-arch-infostrip">
           <span><span class="mx-arch-info-key">Age:</span> 31</span> …
           <span class="mx-arch-infostrip-right">1,337 Likes</span>
         </div>

         <div class="mx-arch-box">
           <div class="mx-arch-colhead">Bio
             <span class="mx-arch-colhead-edit">[<a href="…">Edit</a>]</span></div>
           <div class="mx-arch-pad">…</div>
           <div class="mx-arch-colhead">Music Info …</div>
           <div class="mx-arch-cols">
             <div class="mx-arch-col">
               <div class="mx-arch-coltitle">Types:</div>
               <ul><li><a href="…">Musician</a></li>…</ul>
             </div> ×4
           </div>
         </div>

         <aside class="mx-arch-railbox">
           <h4 class="mx-arch-railhead">Recently Joined</h4>
           <ul class="mx-arch-railbody">
             <li class="mx-arch-railrow">
               <span class="mx-arch-raildate">03-26-2011</span> -
               <a href="…">Nick Mensa</a></li>…
           </ul>
         </aside>
       </div>
     </body>
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * Palette / frame variables (archive values, verbatim where given)  *
 * ------------------------------------------------------------------ */
body.mx-arch-profile {
  --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" —       *
 * said twice, after the v0.324.2 width change. Diagnosis (rig,      *
 * pixel-sampled): in a standards engine the old ::before/::after    *
 * ends measured flush with the frame (height identical, blue       *
 * bottom 1.1px above the frame's bottom edge at 1360/882/412,      *
 * long and short pages) — but the ends were absolutely-positioned   *
 * pseudos hanging OUTSIDE the gray box, so their flushness          *
 * depended on every engine resolving top:0/bottom:0 inside the     *
 * zoomed frame exactly right; on Clint's Fold7 they present as     *
 * full-height slabs running past the gray. Fix: the ends are now    *
 * background layers OF THE FRAME ITSELF. The frame takes the       *
 * full 1331px composition width (padding 142px a side keeps the    *
 * content box at the same 1047px, in the same place); the end      *
 * art (the exact 122px slices the pseudos used to show, cropped    *
 * to blue-end-left122.png / blue-end-right122.png) paints at the   *
 * frame's own left/right edges, a hard-stop gradient paints the   *
 * old 10px black seams, and the veil keeps its 1067px size at      *
 * the same centre over the same 1399px smoke. A background cannot  *
 * overrun its own box in any engine: blue top == gray top and      *
 * blue bottom == gray bottom BY CONSTRUCTION. Page geometry is    *
 * unchanged — same composition, same columns, same zoom steps.     *
 * ------------------------------------------------------------------ */
body.mx-arch-profile .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-profile) { 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" — third round, and his words were
   literal all along: he has to PAN sideways to see each blue
   column. Root cause, measured in the rig at 360 CSS px (the
   Fold7 COVER screen: 1080 physical / DPR 3.0): the rig had
   only ever tested down to 412px, where 1331 x 0.30 = 399.3
   fits. At 360 the 0.30 step renders the composition 399px
   wide in a 360px viewport — the gray (1067 x 0.30 = 320)
   fits, but the full composition overflows by ~39px and the
   RIGHT blue column sits entirely off-screen (0 of 36.6px
   visible; at 388 only 24.3 of 36.6). The same spill lurked
   at the bottom of the other bands (0.55 needs 733px but the
   band starts at 701; 0.64 needs 852 but starts at 801).
   Fix, two layers: (1) the bleed calcs below divide by
   var(--mx-fit-zoom, <step>) so a script can substitute the
   frame's REAL zoom; base.html's fit script caps the zoom at
   (viewport - 1) / 1331 whenever a step would overflow, so
   the composition fits at EVERY width, both blue columns on
   screen, no pan. Where a step already fits it sets nothing
   and the page is pure CSS, byte-identical to v0.324.4.
   (2) a <=400px CSS step (0.269; 1331 x 0.269 = 358) as the
   no-JS / pre-script fallback for cover-screen widths. */
@media (max-width: 1100px) {
  body.mx-arch-profile .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-profile .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-profile .mx-arch-frame { zoom: 0.55; }
  body.mx-arch-profile .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-profile .mx-arch-frame { zoom: 0.30; }
  body.mx-arch-profile .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 the note
     above) — the fit script refines it to the exact width
     when JS runs; without JS this still fits a 360px screen. */
  body.mx-arch-profile .mx-arch-frame { zoom: 0.269; }
  body.mx-arch-profile .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 (the archive .top strip — a BLUE gradient),   *
 * a 1px strip repeated-x. Live height is ~36px per the brief.       *
 * v0.322.0 FIX: v0.319 painted this bar with the theme's             *
 * TopMenuBack.png, which is the GRAY/black gloss strip (the         *
 * black menu's art) — the bar rendered black. Clint caught it       *
 * 2026-11-01 ("the top bar is black, it should be blue"). The       *
 * blue bar is TopMenuBack2.png, copied under profile-arch/.          *
 * 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.
     One row at every width: overflow scrolls sideways with
     the scrollbar hidden rather than wrapping into rows. */
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  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: nowrap;
  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::-webkit-scrollbar { display: 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: a disabled like/dislike must LOOK disabled. The old
   rule only dimmed opacity — the :hover highlight art above
   (same specificity, background never reset) still painted the
   button full green/red on hover or tap, so on Clint's own
   profile the dead buttons lit up like live ones. Flat gray,
   grayscale (icons too), and the hover selectors are named
   explicitly so no state can repaint them. */
.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 is an EMPTY bar, not a full red one.
   The server adds .is-empty when likes+dislikes == 0 (and
   profile-arch.js keeps it in step after votes change): the
   track goes neutral dark and neither fill paints. */
.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; }
span.mx-arch-star { cursor: default; }
/* v0.322.0: disabled stars (own profile / signed out) read as
   disabled too — gray, dim, no hover brightening. */
.mx-arch-star[disabled], .mx-arch-star[disabled]:hover {
  color: #444444;
  filter: grayscale(1);
  opacity: 0.5;
  cursor: not-allowed;
}
.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; }

/* ------------------------------------------------------------------ *
 * .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-profile .mx-arch-topseg:focus-visible,
body.mx-arch-profile .mx-arch-blackmenu a:focus-visible,
body.mx-arch-profile .mx-arch-h5btn:focus-visible,
body.mx-arch-profile .mx-arch-like:focus-visible,
body.mx-arch-profile .mx-arch-dislike:focus-visible,
body.mx-arch-profile .mx-arch-star:focus-visible,
body.mx-arch-profile .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-profile .mx-comment {
  background: #202020;
  border: 1px solid #000;
  border-radius: 5px;
}
body.mx-arch-profile .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-profile .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-profile .mx-comment-byline a { color: #ffffff; }
body.mx-arch-profile .mx-comment-byline .mx-timebtn,
body.mx-arch-profile .mx-comment-byline .mx-exact,
body.mx-arch-profile .mx-comment-byline .mx-cbadge-author { color: #0096ff; }
body.mx-arch-profile .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-profile .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-profile .mx-cbyline-extra a { color: #dddddd; }
body.mx-arch-profile .mx-cbyline-extra img {
  opacity: 1;
  vertical-align: -2px;
}
body.mx-arch-profile .mx-comment-text { color: #e9e9e9; }
body.mx-arch-profile .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-profile .mx-cavatar {
  border-radius: 5px;
  border: 1px solid #000;
}
/* Reply connector lines keep the kit's geometry, recoloured #444. */
body.mx-arch-profile .mx-creplies > .mx-comment::before,
body.mx-arch-profile .mx-creplies-first > .mx-comment::before {
  border-left-color: #444444;
  border-bottom-color: #444444;
}
body.mx-arch-profile .mx-creplies > .mx-comment::after,
body.mx-arch-profile .mx-cthread-more .mx-creplies-first > .mx-comment::after {
  border-left-color: #444444;
}
body.mx-arch-profile .mx-creplies-toggle::before {
  border-left-color: #444444;
  border-bottom-color: #444444;
}
body.mx-arch-profile .mx-creplies-toggle { color: #999999; }
body.mx-arch-profile .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-profile .mx-comment-form input,
body.mx-arch-profile .mx-comment-form textarea,
body.mx-arch-profile .mx-comment-form select,
body.mx-arch-profile .mx-post-editform textarea,
body.mx-arch-profile .mx-post-editform input {
  background: #111111;
  border: 1px solid #000;
  color: #ffffff;
}
body.mx-arch-profile details.mx-reply[open] > form.mx-comment-form,
body.mx-arch-profile form.mx-comment-form:focus-within,
body.mx-arch-profile form.mx-post-editform:focus-within {
  background: #202020;
  border: 1px solid #000;
  border-radius: 5px;
}
body.mx-arch-profile details.mx-reply[open] > form.mx-comment-form input,
body.mx-arch-profile form.mx-comment-form:focus-within input,
body.mx-arch-profile 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-profile .mx-post {
  background: #202020;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}
body.mx-arch-profile .mx-post-head {
  border-bottom: 1px solid #333333;
  padding-bottom: 6px;
}
body.mx-arch-profile .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-profile .mx-container {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}
body.mx-arch-profile .mx-sidebar { display: none; }
body.mx-arch-profile .mx-content { min-width: 0; }
body.mx-arch-profile .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-profile .mx-replying-excerpt {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ *
 * v0.322.0 — modern features in the archive idiom (Clint:           *
 * "integrate the things we've added on top of that but make it      *
 * look good"). The profile's added-on pieces — sort switches, the   *
 * completeness panel, endorsement chips, role pills, the view-as    *
 * bar, plain .mx-btn buttons (wall composer, calendar nav) — wear   *
 * the archive's bars, gloss buttons and square boxes here instead   *
 * of their modern rounded/blue styling. Profile scope only.         *
 * ------------------------------------------------------------------ */
body.mx-arch-profile .mx-btn:not(.mx-btn-danger):not(.mx-btn-tickets):not(.mx-btn-primary) {
  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-profile .mx-btn:not(.mx-btn-danger):not(.mx-btn-tickets):not(.mx-btn-primary):hover {
  background: url("/static/img/profile-arch/TitleBackHighlight2.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
}
/* Sort switches (posts / comments): black-gloss segmented buttons,
   the active one on the bright-blue active art — the black menu's
   own language. */
body.mx-arch-profile .mx-sortbar { gap: 4px; }
body.mx-arch-profile .mx-sortbtn {
  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;
  font-weight: bold;
  text-shadow: #000 1px 1px 1px;
}
body.mx-arch-profile .mx-sortbtn:hover { color: #ffffff; }
body.mx-arch-profile .mx-sortbtn-on {
  background: url("/static/img/theme/blue2/TitleBackActive.png") left center repeat-x;
  background-size: auto 100%;
  border-color: #000;
  color: #ffffff;
}
/* Completeness panel: the archive's flat dark box, square corners,
   the progress track inset on black with the blue active art as
   the fill. */
body.mx-arch-profile .mx-completeness {
  background: #202020;
  border: 1px solid #000;
  border-radius: 0;
  color: #cccccc;
}
body.mx-arch-profile .mx-comp-bar {
  background: #111111;
  border: 1px solid #000;
  border-radius: 5px;
  height: 8px;
}
body.mx-arch-profile .mx-comp-bar div {
  background: url("/static/img/theme/blue2/TitleBackActive.png") left center repeat-x;
  background-size: auto 100%;
}
/* Endorsement chips + role pills: the leftbar's boxed list look —
   square, #222 on black-bordered chips instead of round pills. */
body.mx-arch-profile .mx-endorse-chip,
body.mx-arch-profile .mx-role-pill {
  background: #222222;
  border: 1px solid #000;
  border-radius: 3px;
  color: #dddddd;
}
/* View-as bar: square it into the frame's idiom (its template
   carries modern rounded/blue inline styles; specificity here
   outranks them on profile pages). */
body.mx-arch-profile .mx-viewas-bar {
  border: 1px solid #000;
  border-radius: 5px;
  background: #202020;
  color: #cccccc;
}
body.mx-arch-profile .mx-viewas-bar.mx-viewas-on {
  border-color: #000;
  background: #202020;
  color: #ffffff;
}
body.mx-arch-profile .mx-viewas-bar a { color: var(--mx-arch-linkblue); }

/* ------------------------------------------------------------------ *
 * v0.322.0 — the section slider (the archive's coda-slider         *
 * behaviour): the black menu slides the profile's sections          *
 * sideways in place. profile-arch.js builds the track: the frame's  *
 * post-menu children move into .mx-arch-panel panes inside          *
 * .mx-arch-track; the wrap clips the outgoing pane.                 *
 * ------------------------------------------------------------------ */
.mx-arch-stagewrap { overflow: hidden; position: relative; }
.mx-arch-track { display: flex; align-items: flex-start; will-change: transform; }
.mx-arch-panel { flex: 0 0 auto; min-width: 0; }
.mx-arch-panel::after { content: ""; display: block; clear: both; }

/* ------------------------------------------------------------------ *
 * 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;
}
body.mx-arch-profile .mx-comment {
  background: #444444;
  border-radius: 0;
}
body.mx-arch-profile .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-profile .mx-ctitle .mx-ctitle-name { min-width: 0; }
body.mx-arch-profile .mx-ctitle .mx-ctitle-date { flex: 0 0 auto; }
body.mx-arch-profile .mx-ctitle .mx-timebtn {
  color: #0096ff;
  font-size: 12px;
  padding: 2px 4px;
  min-height: 0;
}
body.mx-arch-profile .mx-comment-row { padding: 6px 8px 2px; }
body.mx-arch-profile .mx-comment-bubble {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
body.mx-arch-profile .mx-cstrip { justify-content: space-between; }
/* v0.323.1 (Clint, item 13): the archive strip is ONE line —
   role/"for" band left, flag + place right, never wrapped
   into a tall box. The role side ellipsizes to make room;
   the place side never shrinks and never wraps. */
body.mx-arch-profile .mx-cstrip-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.mx-arch-profile .mx-cstrip-r {
  margin-left: auto;
  text-align: right;
  flex: 0 0 auto;
  white-space: nowrap;
}
body.mx-arch-profile .mx-cstrip-flag {
  width: 16px; height: 11px;
  outline: 1px solid #000;
  margin-right: 5px;
  vertical-align: -1px;
  opacity: 1;
}
body.mx-arch-profile .mx-post {
  background: #444444;
  border-radius: 0;
  padding: 0;
}
body.mx-arch-profile .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-profile .mx-ptitle a { color: #ffffff; }
body.mx-arch-profile .mx-ptitle .mx-timebtn {
  color: #0096ff;
  font-size: 12px;
  padding: 2px 4px;
  min-height: 0;
}
body.mx-arch-profile .mx-post-row {
  display: flex;
  gap: 8px;
  padding: 8px 10px 2px;
}
body.mx-arch-profile .mx-pavatar {
  width: 50px; height: 50px;
  object-fit: cover;
  border: 1px solid #000;
  border-radius: 5px;
  display: block;
}
body.mx-arch-profile .mx-post-main { flex: 1 1 auto; min-width: 0; }
body.mx-arch-profile .mx-post-main .mx-post-body { margin-top: 0; }
body.mx-arch-profile .mx-post-meta {
  color: #999999;
  font-size: 12px;
  margin-top: 4px;
}
body.mx-arch-profile .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-profile .mx-post > p { padding: 0 10px; }
body.mx-arch-profile .mx-post > .mx-media,
body.mx-arch-profile .mx-post > .mx-event-card,
body.mx-arch-profile .mx-post > .mx-editwrap,
body.mx-arch-profile .mx-post > .mx-comments { margin-left: 10px; margin-right: 10px; }
body.mx-arch-profile .mx-post > .mx-comments { margin-bottom: 8px; }

/* ------------------------------------------------------------------ *
 * v0.323.0 (Clint) — the Fold7 fix batch.                            *
 *  - The blue bar runs FULL WIDTH at the very top: its art,          *
 *    borders and shadow bleed to the viewport edges on a             *
 *    ::before strip, while the bar's contents keep their             *
 *    frame-aligned positions.                                        *
 *  - Logo overhang: about half the logo below the bar's bottom       *
 *    edge, then up a touch (54px logo: margin-top 5px -> 23px        *
 *    below the 36px bar; 44px logo: 10px -> 18px below).             *
 *  - Tagline back at its pre-v0.322.2 x (just right of the           *
 *    logo: logo 162 + 9 of block spacing + the old 20px segment      *
 *    padding = 191px from the frame's content edge).                 *
 *  - The middle of the profile is ONE framed section                 *
 *    (.mx-arch-midframe: menu, info strip, panels inside).           *
 *  - Alignment row + 14px grid gaps; right-rail heads clear          *
 *    the middle by the same 14px the left side has.                  *
 *  - Rating block in the archive idiom (chunky star art in           *
 *    its own black bar, Rated line in its own bar, black             *
 *    glossy Like/Dislike split bar).                                 *
 *  - Comment/post title bars: the glossy BLACK archive paint         *
 *    (TopMenuBack.png) at every width, one line, 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; }
/* The profile bar's ☰ toggle is a <button> wearing .mx-arch-
   topseg: strip the UA button paint. v0.323.2: the toggle
   sits at the bar's far right with no separator of its own. */
button.mx-arch-topseg {
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  font: inherit;
  cursor: pointer;
}
.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 on the
   desktop band, and the old <=1100px reduction to 151px slid
   it UNDER the logo (the logo is 167.3px wide at every width;
   measured overlap -16.3px at 882/412 — the W disappeared
   behind the logo's last spike in Clint's screenshot).
   196px at EVERY width: a ~29px clear gap, all bands. */
.mx-arch-tagline-under { padding: 4px 12px 2px 196px; }
@media (max-width: 1100px) {
  .mx-arch-logo { margin-top: 10px; }
  .mx-arch-tagline-under { padding-left: 196px; }
}

/* --- the blue bar sits at the VERY top (v0.323.0 #1) --- */
/* base.css pads <main> (16px top, 16px sides); on
   archive-profile pages the bar is the first thing in
   <main> and the frame must reach the viewport edges, so
   the top and side pads go (bottom pad is harmless). */
body.mx-arch-profile .mx-content {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* --- the profile grid: alignment row over three columns --- */
.mx-arch-layout {
  display: grid;
  grid-template-columns: 162px minmax(0, 1fr) 210px;
  column-gap: 14px;
  /* v0.323.1 (Clint): the name bar heads the LEFT column,
     so it belongs on the columns' line — its top lines up
     with the black menu (middle) and the rail's first
     panel (right). Row 1 is the action row alone (actions
     + send) above the middle and right. Mid and right span
     both lower rows; the 1fr last row absorbs the spanned
     columns' extra height so the name row keeps the name
     bar's own height and the photo stays under it. */
  grid-template-areas:
    ". actions send"
    "name mid right"
    "left mid right";
  grid-template-rows: auto auto 1fr;
  align-items: start;
}
.mx-arch-layout > .mx-arch-namebar { grid-area: name; margin-bottom: 0; width: 100%; }
.mx-arch-layout > .mx-arch-actions {
  grid-area: actions;
  /* v0.323.3 (Clint): a clear gap UNDER the button row —
     the row's margin box grows row 1 by 5px (the frame's
     5px gap family), so the name bar / black menu / rail
     tops start 5px below the buttons and stay mutually
     aligned on their own line. */
  margin: 0 0 5px;
  justify-self: end;
  align-self: start;
}
.mx-arch-layout > .mx-arch-sendmsg {
  grid-area: send;
  min-width: 0;
  margin-bottom: 5px;   /* v0.323.3: same under-row gap */
  /* v0.324.2 item 5 (Clint): the Send Message control takes
     its NATURAL width and sits at the RIGHT of its row over
     the rail — it used to stretch the full rail width as a
     long empty bar. justify-self:end shrink-wraps the cell
     to the button group and right-aligns it, so the button's
     right edge lines up with the rail's right edge below. */
  justify-self: end;
}
.mx-arch-layout > .mx-arch-leftbar {
  grid-area: left;
  float: none;
  width: auto;
  padding: 0;
}
.mx-arch-layout > .mx-arch-railcol {
  grid-area: right;
  float: none;
  width: auto;
  margin: 0;
}
/* v0.324.2 item 5: natural width only — the group sizes to
   its label + arrow segment (the same proportions as the
   Follow/Share group over the middle column). */
.mx-arch-sendmsg .mx-arch-h5btn-group { display: flex; }
/* The split button's arrow keeps its joined left edge even
   though the dropdown span is the group's last child. */
.mx-arch-splitwrap { position: relative; }
.mx-arch-splitwrap > button.mx-arch-h5btn:last-of-type {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid #828080;
}
.mx-arch-split-arrow { padding-left: 7px; padding-right: 7px; }
.mx-arch-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 172px;
  background: #1c1c1c;
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  z-index: 60;
  padding: 4px;
  text-align: left;
}
.mx-arch-dropdown[hidden] { display: none; }
.mx-arch-dropdown form { margin: 0; }
.mx-arch-dropdown button,
.mx-arch-dropdown a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 3px;
  color: #ffffff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: bold;
  text-align: left;
  padding: 6px 8px;
  cursor: pointer;
  text-decoration: none;
}
.mx-arch-dropdown button:hover,
.mx-arch-dropdown a:hover {
  background: url("/static/img/profile-arch/TitleBackHighlight2.png") left center repeat-x;
  background-size: auto 100%;
  color: #ffffff;
}

/* --- the middle is one framed section --- */
.mx-arch-midframe {
  grid-area: mid;
  min-width: 0;
  background: #202020;
  border: 1px solid #000;
  border-top: none;
}
.mx-arch-midframe > .mx-arch-blackmenu {
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #000;
}
.mx-arch-midframe > .mx-arch-box {
  border: none;
  margin-bottom: 0;
  background: transparent;
}
.mx-arch-midframe > .mx-arch-infostrip {
  border-left: none;
  border-right: none;
}
.mx-arch-midframe .mx-completeness {
  margin: 0;
  border: none;
  border-bottom: 1px solid #000;
}

/* --- completeness panel v2 controls --- */
body.mx-arch-profile .mx-completeness { position: relative; }
.mx-comp-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: #999999;
  font-size: 17px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
  font-family: inherit;
}
.mx-comp-close:hover { color: #ffffff; }
.mx-comp-dismiss {
  background: none;
  border: none;
  color: #8a94a6;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: 6px;
  font-family: inherit;
}
.mx-comp-dismiss:hover { color: #ffffff; }

/* --- rating block: archive idiom --- */
.mx-arch-stars {
  display: flex;
  justify-content: center;
  gap: 2px;
  background: #0a0a0a;
  border: 1px solid #000;
  border-radius: 5px 5px 0 0;
  padding: 5px 2px;
}
.mx-arch-star { font-size: 0; text-shadow: none; padding: 0; }
.mx-arch-star img {
  width: 26px;
  height: 26px;
  display: block;
  border: none;
}
.mx-arch-star .mx-star-on { display: none; }
.mx-arch-star.on .mx-star-on { display: block; }
.mx-arch-star.on .mx-star-off { display: none; }
/* Disabled (own profile / signed out): the off stars, dimmed
   — the v0.322.0 flat-disabled read, in the new art. */
.mx-arch-star[disabled] .mx-star-on { display: none; }
.mx-arch-star[disabled] .mx-star-off { display: block; opacity: 0.6; }
.mx-arch-stars-caption {
  background: #161616;
  border: 1px solid #000;
  border-top: none;
  border-radius: 0 0 5px 5px;
  padding: 4px 2px;
  margin-top: 0;
  font-size: 11.5px;
}
/* The Like/Dislike split bar wears the glossy BLACK archive
   paint (its hover/.on art is unchanged). */
.mx-arch-like, .mx-arch-dislike {
  background: #3d3d3d url("/static/img/theme/blue2/TopMenuBack.png") left center repeat-x;
  background-size: auto 100%;
}
.mx-arch-likemeter-bar { height: 9px; }

/* --- comment / post title bars: glossy black, one line ---
   v0.323.1 (Clint, item 13): the paint is TitleBackHover.png
   — the archive .commenthead's own art (deep glossy black:
   bright sheen on top, near-black through the lower half).
   TopMenuBack.png (the menu strip) read as a flat light
   gray gradient next to it.
   v0.323.3 (Clint, item 3): WHICH TitleBackHover.png is the
   whole story. The v0.323.1 rules pointed at the blue2
   THEME copy (/static/img/theme/blue2/TitleBackHover.png)
   — a different image with the same name: silver at the
   top (163,163,163), mean (69,70,70). The Btn page's own
   art (BTN/images/TitleBackHover.png, md5 32b91607…) is
   the deep glossy black (top row black, mean (38,38,38)).
   It is copied to profile-arch/TitleBackHover.png and
   every post/comment title-bar rule in this sheet (this
   combined rule — the one that wins the cascade — plus
   .mx-ptitle and .mx-comment-byline) now points at it.
   Verified by PIXEL SAMPLING against the rendered Btn
   comment head, not by computed style. */
body.mx-arch-profile .mx-ctitle,
body.mx-arch-profile .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-profile .mx-ctitle .mx-ctitle-name,
body.mx-arch-profile .mx-ptitle .mx-ptitle-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.mx-arch-profile .mx-ctitle .mx-ctitle-date,
body.mx-arch-profile .mx-ptitle .mx-ptitle-date {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- availability mini calendar inside the rail body --- */
.mx-arch-railbody .mx-mini-cal {
  max-width: none;
  border: none;
  padding: 6px 4px 2px;
  margin: 0;
}
body.mx-arch-profile .mx-arch-railbody .mx-mini-available a {
  background: rgba(74, 222, 128, 0.16);
}

/* --- album cards (Photos section) --- */
.mx-album-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.mx-album-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 128px;
  background: #1a1a1a;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 6px;
  color: #ffffff;
  text-decoration: none;
}
.mx-album-card img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border: 1px solid #000;
  border-radius: 3px;
  background: #111111;
}
.mx-album-card-title { font-weight: bold; font-size: 12.5px; }

/* Viewer "Edit photo" link (your own profile picture). */
.mx-arch-viewer-edit {
  text-decoration: none;
  font-size: 12.5px;
  white-space: nowrap;
}
.mx-arch-viewer-edit[hidden] { display: none; }


/* ------------------------------------------------------------------ *
 * v0.323.1 (Clint) — rating-block spacing + greyed Send Message.     *
 * (3) The stars form's archive margin-top (5px, the column's          *
 * inter-block rhythm — the same gap that sits between the caption     *
 * and the Like bar) was zeroed by the form reset further up, so       *
 * the stars sat flush on the photo. Restore it inside the grid.       *
 * (4) The Like bar carried padding-bottom 5px, which held the         *
 * meter box off the buttons; the archive count box hangs directly     *
 * off the split bar, so the padding goes and the meter's top          *
 * edge touches the buttons' bottom edge.                              *
 * ------------------------------------------------------------------ */
.mx-arch-layout form.mx-arch-stars-wrap { margin-top: 5px; }
.mx-arch-likebar { padding-bottom: 0; }

/* Your own profile still shows the Send Message split
   button (Clint: "show it but grayed out") — the archive
   disabled treatment: greyscale, dimmed, not-allowed,
   fully inert (both halves are disabled buttons and no
   dropdown markup is rendered at all). */
.mx-arch-sendmsg-off {
  filter: grayscale(1);
  opacity: 0.55;
  cursor: not-allowed;
}
.mx-arch-sendmsg-off .mx-arch-h5btn { cursor: not-allowed; }

/* ------------------------------------------------------------------ *
 * v0.323.1 (Clint) — left-column rhythm + menu pill ends.             *
 * (9) The photo sat flush under the name bar; the name bar            *
 * now breathes the same 5px the photo-to-stars gap uses, so           *
 * the column reads name bar, gap, photo, gap, stars.                  *
 * (10) The black menu's ENDS are fully rounded (pill ends,            *
 * top and bottom), superseding the v0.323.0 top-corners-only          *
 * treatment; the midframe's top corners take the same radius          *
 * so no square frame corner pokes out behind the rounded ends.        *
 * ------------------------------------------------------------------ */
.mx-arch-layout .mx-arch-leftbar { padding-top: 5px; }
.mx-arch-blackmenu { border-radius: 16px; }
.mx-arch-midframe {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* ------------------------------------------------------------------
 * v0.323.2 (Clint): the profile photo editor popup (#mx-avpop) —
 * the viewer's "Edit photo" opens the shared editor in place on
 * the profile page instead of routing to Settings.
 * ------------------------------------------------------------------ */
#mx-avpop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.72);
  align-items: center;
  justify-content: center;
}
#mx-avpop:not([hidden]) { display: flex; }
#mx-avpop .mx-avpop-panel {
  background: #141414;
  border: 1px solid #000;
  border-radius: 6px;
  padding: 12px;
  width: 440px;
  max-width: 94vw;
  max-height: 94vh;
  overflow: auto;
}
#mx-avpop canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #0a0a0a;
  border: 1px solid #000;
  border-radius: 4px;
  touch-action: none;
  cursor: grab;
}
#mx-avpop .mx-avpop-row {
  margin: 10px 0 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ------------------------------------------------------------------
 * v0.324.3 (Clint): the completeness step popup (#mx-steppop) —
 * clicking a completeness step opens its editor in place on the
 * profile page, styled like the photo editor popup but wider
 * (the instrument / genre pickers need the room).
 * ------------------------------------------------------------------ */
#mx-steppop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.72);
  align-items: center;
  justify-content: center;
}
#mx-steppop:not([hidden]) { display: flex; }
#mx-steppop .mx-steppop-panel {
  background: #141414;
  border: 1px solid #000;
  border-radius: 6px;
  padding: 12px;
  width: 680px;
  max-width: 94vw;
  max-height: 92vh;
  overflow: auto;
  color: #eee;
}
#mx-steppop .mx-steppop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
#mx-steppop .mx-steppop-title { font-weight: bold; font-size: 16px; }
#mx-steppop .mx-steppop-close {
  background: none;
  border: none;
  color: #eee;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  margin-left: auto;
}
#mx-steppop .mx-steppop-status { min-height: 1.2em; margin: 6px 0 0; }

/* ================================================================
   v0.324.7 (Clint): comments lose the square outlines. Every
   comment was a bordered box and its replies nested INSIDE
   it — boxes within boxes — while the thread's connector
   lines were painted #444 on the #444 panel and vanished.
   The per-comment box goes (the glossy title bar and the
   bordered info strip keep their paint), and the kit's
   connector geometry from base.css — a line down the left
   with a curved elbow into each reply — is repainted in a
   line colour that reads on the archive's gray, the way
   the threads looked before the archive rework.
   ================================================================ */
body.mx-arch-profile .mx-comment {
  background: transparent;
  border: none;
  border-radius: 0;
}
body.mx-arch-profile .mx-creplies > .mx-comment::before,
body.mx-arch-profile .mx-creplies-first > .mx-comment::before {
  border-left-color: #98a2b3;
  border-bottom-color: #98a2b3;
}
body.mx-arch-profile .mx-creplies > .mx-comment::after,
body.mx-arch-profile .mx-cthread-more .mx-creplies-first > .mx-comment::after {
  border-left-color: #98a2b3;
}
body.mx-arch-profile .mx-creplies-toggle::before {
  border-left-color: #98a2b3;
  border-bottom-color: #98a2b3;
}