/*
  MedScopeHub Community (Premium SaaS)

  Goals
  - Clean, editorial feed (no heavy card UI)
  - Left rail: collapsed by default, expands on hover / can be pinned
  - Right column: quiet context
  - Inter/system font stack, restrained color usage
*/

:root{
  --mh-bg:#F7F9FC;
  --mh-surface:#ffffff;
  --mh-border:#e5e7eb;
  --mh-text:#111827;
  --mh-muted:#6b7280;
  --mh-muted2:#9ca3af;
  --mh-accent:#2563EB; /* links only */
  --mh-insight:#2563EB;
  --mh-question:#111827;
  --mh-resource:#0F766E;
  --mh-case:#7C3AED;
  --mh-black:#0b1220;
  --mh-radius:12px;
}

/* Base wrapper (shared with /my-posts) */
.mh-wrap,
.mh-page{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--mh-text);
}

.mh-wrap{
  max-width: 980px;
  margin: 32px auto;
  padding: 0 16px;
}

.mh-page{
  background: var(--mh-bg);
  padding: 28px 0 48px;
}

.mh-container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
}

.mh-grid{
  display:grid;
  grid-template-columns: 64px minmax(0,760px) 320px;
  gap: 28px;
  align-items:start;
  justify-content:center;
}

/* -----------------------------
   Left rail
------------------------------ */

.mh-rail{
  position: sticky;
  top: 96px;
  width: 64px; /* do not change: keeps main column stable */
}

.mh-rail-inner{
  width: 64px;
  transition: width 140ms cubic-bezier(.4,0,.2,1);
  overflow: hidden; /* clipped when collapsed */
  border-radius: var(--mh-radius);
  z-index: 20;
  position: relative;
}

.mh-rail.is-expanded .mh-rail-inner,
.mh-rail.is-pinned .mh-rail-inner{
  width: 184px; /* expanded width overlays main (no layout shift) */
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  box-shadow: 0 10px 30px rgba(17,24,39,.06);
}

.mh-rail-list{ display:flex; flex-direction:column; gap: 6px; padding: 8px; }

.mh-rail-item{
  display:flex;
  align-items:center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  text-decoration:none;
  color: var(--mh-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select:none;
}

.mh-rail-item:hover{ background:#f3f4f6; }

.mh-rail-item[aria-current="page"]{
  background:#f3f4f6;
  box-shadow: inset 2px 0 0 var(--mh-accent);
}

.mh-rail-icon{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--mh-muted);
  flex: 0 0 18px;
}

.mh-rail-label{
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 140ms cubic-bezier(.4,0,.2,1), transform 140ms cubic-bezier(.4,0,.2,1);
}

.mh-rail.is-expanded .mh-rail-label,
.mh-rail.is-pinned .mh-rail-label{ opacity: 1; transform: translateX(0); }

.mh-rail-sep{ height: 1px; background: var(--mh-border); margin: 8px 10px; }

.mh-rail-bottom{ margin-top:auto; padding: 8px; }

.mh-rail-pin{
  width: 100%;
  border: 1px solid var(--mh-border);
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
  font-size: 12px;
  color: var(--mh-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}

.mh-rail-pin:hover{ background:#f9fafb; }

/* -----------------------------
   Main column
------------------------------ */

.mh-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
}

.mh-title{
  margin: 0;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
}

.mh-sub{
  margin-top: 6px;
  color: var(--mh-muted);
  font-size: 14px;
}

.mh-controls{ display:flex; align-items:center; gap: 10px; }

.mh-sort-wrap{ display:flex; align-items:center; gap: 8px; color: var(--mh-muted); font-size: 13px; }

.mh-sort{
  border: 1px solid var(--mh-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  color: var(--mh-text);
  font-size: 13px;
}

.mh-link{
  color: var(--mh-accent);
  text-decoration:none;
}
.mh-link:hover{ text-decoration: underline; }

.mh-list{
  margin-top: 18px;
  border-top: 1px solid var(--mh-border);
}

.mh-item{
  padding: 22px 0;
  border-bottom: 1px solid var(--mh-border);
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  transition: background-color 140ms cubic-bezier(.4,0,.2,1), transform 140ms cubic-bezier(.4,0,.2,1);
}

.mh-item:hover{
  background: rgba(17,24,39,.015);
  transform: translateY(-1px);
}

/* Questions: bolder + clearer identity */
.mh-item[data-mh-type="question"] .mh-item-title{ font-weight: 750; }
.mh-item[data-mh-type="question"]{
  /* Semantic contrast (Question ≠ Insight) without making the feed noisy */
  border-left: 3px solid rgba(124,58,237,.55);
  padding-left: 12px;
  background: rgba(124,58,237,.018);
}

/* Give every type a subtle semantic tint so the feed feels consistent and premium.
   Keep Question the strongest; others are softer to avoid a noisy feed. */
.mh-item[data-mh-type="insight"]{
  border-left: 3px solid rgba(37,99,235,.28);
  padding-left: 12px;
  background: rgba(37,99,235,.010);
}

.mh-item[data-mh-type="resource"]{
  border-left: 3px solid rgba(16,185,129,.34);
  padding-left: 12px;
  background: rgba(16,185,129,.010);
}

.mh-item[data-mh-type="case"]{
  border-left: 3px solid rgba(245,158,11,.34);
  padding-left: 12px;
  background: rgba(245,158,11,.010);
}

.mh-item[data-mh-type="insight"]:hover{ background: rgba(37,99,235,.016); }
.mh-item[data-mh-type="resource"]:hover{ background: rgba(16,185,129,.016); }
.mh-item[data-mh-type="case"]:hover{ background: rgba(245,158,11,.016); }
.mh-item[data-mh-type="question"]:hover{ background: rgba(124,58,237,.028); }

.mh-item-title{
  display:inline-block;
  font-size: 18px;
  font-weight: 600;
  color: var(--mh-text);
  text-decoration:none;
}

.mh-item-title:hover{ text-decoration: underline; }

.mh-item-meta{
  margin-top: 6px;
  color: var(--mh-muted);
  font-size: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.mh-meta-stat{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  color: var(--mh-muted);
}
.mh-meta-stat .mh-ico{
  display:inline-flex;
  align-items:center;
}
.mh-meta-stat .mh-ico svg{
  width: 14px;
  height: 14px;
}
.mh-meta-stat span:last-child{
  color: var(--mh-text);
  font-weight: 650;
}

.mh-dot{ color: var(--mh-muted2); }

.mh-item-excerpt{
  margin-top: 8px;
  color: #374151;
  font-size: 14px;
  line-height: 1.55;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mh-item-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 120ms cubic-bezier(.4,0,.2,1), transform 120ms cubic-bezier(.4,0,.2,1);
}

.mh-item:hover .mh-item-actions,
.mh-item:focus-within .mh-item-actions{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mh-action{
  border: 1px solid var(--mh-border);
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--mh-text);
  cursor: pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  white-space: nowrap;
}

.mh-action:hover{ background:#f9fafb; }

.mh-action.is-saved{
  border-color: rgba(37,99,235,.35);
  color: var(--mh-accent);
}

.mh-empty{
  padding: 20px 0;
  color: var(--mh-muted);
}

/* -----------------------------
   Right column
------------------------------ */

.mh-right{
  position: sticky;
  top: 96px;
  padding-left: 24px;
  border-left: 1px solid var(--mh-border);
}

.mh-aside-title{ margin:0; font-size: 14px; font-weight: 700; }

/* Premium discovery widgets (Trending / Most saved) */
.mh-widget{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(17,24,39,.06);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17,24,39,.06);
}
.mh-widget-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mh-widget-title{ font-size: 12px; font-weight: 800; letter-spacing: .10em; color: rgba(17,24,39,.70); }
.mh-widget-list{ margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mh-widget-row{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.04);
  background: rgba(17,24,39,.012);
  transition: background-color 140ms cubic-bezier(.4,0,.2,1), box-shadow 140ms cubic-bezier(.4,0,.2,1), border-color 140ms cubic-bezier(.4,0,.2,1), transform 140ms cubic-bezier(.4,0,.2,1);
}
.mh-widget-row:hover{
  background: rgba(37,99,235,.035);
  border-color: rgba(37,99,235,.14);
  box-shadow: 0 10px 26px rgba(17,24,39,.08);
  transform: translateY(-1px);
}
.mh-rank{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,24,39,.60);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(17,24,39,.05);
}
.mh-widget-main{ min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mh-widget-name{ font-size: 13px; font-weight: 700; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-widget-meta{ font-size: 12px; color: rgba(17,24,39,.60); }
.mh-aside-desc{ margin:10px 0 14px; color: var(--mh-muted); font-size: 13px; line-height: 1.5; }

.mh-aside-rows{ display:flex; flex-direction:column; gap: 10px; font-size: 13px; color: var(--mh-muted); }
.mh-aside-row{ display:flex; align-items:center; gap: 10px; }
.mh-aside-row b{ color: var(--mh-text); font-weight: 650; }

.mh-guidelines{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mh-border);
}

.mh-guidelines summary{
  cursor:pointer;
  font-size: 13px;
  font-weight: 650;
  color: var(--mh-text);
  list-style: none;
}

/* Remove default marker in webkit */
.mh-guidelines summary::-webkit-details-marker{ display:none; }

.mh-discovery{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mh-border);
}
.mh-aside-list{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mh-aside-list a{
  color: var(--mh-text);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
}
.mh-aside-list a:hover{ text-decoration: underline; }

.mh-guidelines summary:after{
  content: "▾";
  float: right;
  color: var(--mh-muted);
}

.mh-guidelines[open] summary:after{ content: "▴"; }

.mh-guidelines ul{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--mh-muted);
  font-size: 13px;
  line-height: 1.55;
}

.mh-cta{ margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mh-border); }

.mh-cta-btn{
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--mh-black);
  color:#fff;
  font-weight: 650;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  text-decoration:none;
}

.mh-cta-btn:hover{ filter: brightness(.96); }
/* Ensure theme hover rules can’t flip text/icons to invisible */
.mh-cta-btn,
.mh-cta-btn:hover,
.mh-cta-btn:active,
.mh-cta-btn:focus{ color:#fff !important; }

/* -----------------------------
   Modal (Create Insight)
------------------------------ */

.mh-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.42);
  width:100vw;
  height:100dvh;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index:9998;
}

.mh-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:16px;
}

.mh-modal-card{
  width:min(760px,100%);
  background:#fff;
  border-radius: 14px;
  border: 1px solid var(--mh-border);
  box-shadow: 0 24px 80px rgba(0,0,0,.26);
  padding: 16px;
}

.mh-modal-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 8px; }
.mh-modal-title{ font-weight: 700; font-size: 16px; }
.mh-x{ border:0; background:transparent; font-size: 18px; cursor:pointer; color: var(--mh-muted); }
.mh-x:hover{ color: var(--mh-text); }

.mh-note{ color: var(--mh-muted); font-size: 13px; margin-bottom: 10px; }

.mh-field{ display:block; margin-top: 10px; }
.mh-label{ font-weight: 650; font-size: 12px; color: #374151; margin-bottom: 6px; }
.mh-field input,
.mh-field textarea{
  width:100%;
  border:1px solid var(--mh-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}

.mh-actions{ display:flex; align-items:center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.mh-btn{
  border:0;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 650;
  cursor:pointer;
}

.mh-btn-primary{ background: var(--mh-black); color:#fff; }
.mh-btn-primary:hover{ filter: brightness(.96); }

.mh-btn-ghost{ background: transparent; color: var(--mh-text); border: 1px solid var(--mh-border); }
.mh-btn-ghost:hover{ background: #f9fafb; }

.mh-status{ color: var(--mh-muted); font-size: 13px; }

/* Critical: keep modal hidden until explicitly opened (themes may override default [hidden] styles) */
.mh-modal[hidden],
.mh-modal-backdrop[hidden]{ display:none !important; }

/* -----------------------------
   Legacy (my-posts uses .mh-card, keep it minimal)
------------------------------ */

.mh-feed{ display:flex; flex-direction:column; gap: 12px; margin-top: 14px; }

.mh-card{
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius);
  padding: 14px;
  background: #fff;
}

.mh-card-title{ font-weight: 650; font-size: 16px; color: var(--mh-text); text-decoration:none; }
.mh-card-title:hover{ text-decoration: underline; }

.mh-card-meta{ color: var(--mh-muted); font-size: 12px; margin-top: 6px; }

/* -----------------------------
   Responsive
------------------------------ */

@media (max-width: 1100px){
  .mh-grid{ grid-template-columns: 64px minmax(0,760px); }
  .mh-right{ display:none; }
}

@media (max-width: 860px){
  .mh-grid{ grid-template-columns: 1fr; }
  .mh-rail{ position: static; width: 100%; }
  .mh-rail-inner{ width: 100% !important; border: 1px solid var(--mh-border); background: #fff; }
  .mh-rail-label{ opacity: 1 !important; transform: none !important; }
  .mh-rail-list{ flex-direction: row; align-items:center; flex-wrap: wrap; }
  .mh-rail-bottom{ display:none; }
  .mh-item{ grid-template-columns: 1fr; }
  .mh-item-actions{ opacity: 1; pointer-events:auto; transform:none; }
}


/* ==========================================================
   Premium polish update (0.8.2.6)
   - More breathing room
   - Premium search in right column
   - Fix theme hover/visited overrides (white-on-white)
   - Card-like feed
   ========================================================== */

.mh-page{ padding: 36px 0 64px; }
.mh-container{ max-width: 1320px; padding: 0 24px; }
.mh-grid{ grid-template-columns: 64px minmax(0,820px) 340px; gap: 34px; }

/* Feed becomes soft cards */
.mh-list{ margin-top: 22px; border-top: 0; display:flex; flex-direction:column; gap: 14px; }
.mh-item{
  border: 1px solid var(--mh-border);
  border-radius: 14px;
  padding: 20px 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
  border-bottom: 0;
}

/* Always show actions (premium + avoids hover edge-cases) */
.mh-item-actions{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* HARDEN action styling against theme overrides */
.mh-item-actions .mh-action,
.mh-item-actions .mh-action:visited,
.mh-item-actions .mh-action:focus,
.mh-item-actions .mh-action:active{
  color: var(--mh-text) !important;
  background: transparent !important;
  text-decoration: none !important;
}
.mh-item-actions .mh-action:hover{
  color: var(--mh-text) !important;
  background: #f9fafb !important;
}
.mh-item-actions .mh-action.is-saved,
.mh-item-actions .mh-action.is-saved:hover{
  color: var(--mh-accent) !important;
  border-color: rgba(37,99,235,.35) !important;
  background: rgba(37,99,235,.06) !important;
}

/* Left rail item hardening (fixes white-on-white on hover) */
.mh-rail-item,
.mh-rail-item:visited,
.mh-rail-item:active{
  color: var(--mh-text) !important;
}
.mh-rail-item:hover{
  color: var(--mh-text) !important;
  background: #f3f4f6 !important;
}

.mh-badge{
  margin-left: auto;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid var(--mh-border);
  color: var(--mh-muted);
}

/* Right column becomes a card (premium + anchors search) */
.mh-right{
  padding-left: 0;
  border-left: 0;
  background: #fafafa;
  border: 1px solid var(--mh-border);
  border-radius: 16px;
  padding: 18px;
}

/* Premium search pill */
.mh-search{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--mh-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
  margin-bottom: 14px;
  cursor: text;
}
.mh-search:hover{ border-color: #d1d5db; }
.mh-search:focus-within{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.mh-search-icon{ color: var(--mh-muted); display:flex; }
.mh-search-input{
  flex:1;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px;
  color: var(--mh-text);
}
.mh-search-input::placeholder{ color: var(--mh-muted2); }

.mh-kbd{
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid var(--mh-border);
  color: var(--mh-muted);
}

/* Sort select: more premium */
.mh-sort{
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}
.mh-sort:focus{
  outline: none;
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* CTA hardening (prevents purple takeover on hover) */
.mh-cta-btn,
.mh-cta-btn:visited,
.mh-cta-btn:active{
  background: var(--mh-black) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.mh-cta-btn:hover{
  background: var(--mh-black) !important;
  color: #fff !important;
  filter: brightness(.96);
}

/* Toasts */
.mh-toast-stack{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999999;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.mh-toast{
  background: rgba(17,24,39,.96);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

/* Responsive: keep right column until smaller screens */
@media (max-width: 980px){
  .mh-grid{ grid-template-columns: 64px minmax(0,1fr); }
  .mh-right{ display:none; }
}

/* Mobile: true single-column layout (rail must not steal width)
   Keep this AFTER premium overrides so it wins in the cascade. */
@media (max-width: 720px){
  .mh-container{ padding: 0 14px; }
  .mh-grid{ grid-template-columns: 1fr !important; gap: 16px; }
  .mh-rail{ display:none !important; }

  /* Single post: let title breathe and push actions below */
  .mh-post-head{ grid-template-columns: 1fr; }
  .mh-post-actions{ justify-content:flex-start; flex-wrap: wrap; }
  .mh-post-title{
    font-size: 28px;
    line-height: 1.15;
    overflow-wrap: break-word;
    word-break: normal;
  }
}


/* ===========================
   Premium Single Post (Community)
   =========================== */
.mh-single{
  background: #f6f7fb;
  padding: 34px 0 54px;
}
.mh-single-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}
.mh-back{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #2563EB;
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 14px;
}
.mh-back:hover{ text-decoration: underline; }

.mh-single-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}

.mh-card{
  background: var(--mh-surface);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.mh-post{ padding: 22px 22px 16px; }

.mh-post-head{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px 18px;
  align-items: start;
}
.mh-post-titlewrap{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mh-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid rgba(17,24,39,.12);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 34px;
}
.mh-avatar-img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-avatar-fallback{
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  letter-spacing: 0.02em;
}
.mh-avatar.has-img{ background: transparent; border-color: transparent; }
.mh-avatar.has-img .mh-avatar-fallback{ display: none; }
.mh-avatar.has-img .mh-avatar-fallback{ display:none; }
.mh-post-title{
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mh-post-actions{
  display: inline-flex;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* Single post header: keep full title as first priority */
.mh-post-titlewrap{ min-width: 0; }
.mh-post-title{ overflow-wrap: anywhere; }

/* Three-dot menu for Save / Copy / Share (saves space beside title) */
.mh-more{ position: relative; display: inline-flex; }
.mh-kebab{
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}
.mh-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--mh-border);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  padding: 6px;
  z-index: 9999;
}
.mh-menuitem{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--mh-text);
  border-radius: 10px;
  padding: 10px 10px;
  cursor: pointer;
  font-weight: 650;
}

.mh-menuitem.mh-premium-item{
  font-weight:600;
}
.mh-menuitem.mh-premium-item::after{
  content:"★";
  float:right;
  opacity:.6;
}
.mh-menuitem:hover{ background: #f9fafb; color: var(--mh-text); }

/* Harden button hover so text/icons never “vanish” due to theme overrides */
.mh-btn,
.mh-btn:hover,
.mh-btn:active,
.mh-btn:focus{ text-decoration: none !important; }
.mh-btn-primary,
.mh-btn-primary:hover,
.mh-btn-primary:active,
.mh-btn-primary:focus{ color:#fff !important; background: var(--mh-black) !important; }
.mh-btn-primary:hover{ filter: brightness(.96); }
.mh-btn-ghost,
.mh-btn-ghost:hover,
.mh-btn-ghost:active,
.mh-btn-ghost:focus{ color: var(--mh-text) !important; }
.mh-btn-ghost:hover{ background: #f9fafb !important; border-color: var(--mh-border) !important; }

.mh-action,
.mh-action:hover,
.mh-action:active,
.mh-action:focus{ color: var(--mh-text) !important; }
.mh-action.is-saved,
.mh-action.is-saved:hover{ color: var(--mh-accent) !important; }

.mh-menuitem,
.mh-menuitem:hover,
.mh-menuitem:active,
.mh-menuitem:focus{ color: var(--mh-text) !important; }

.mh-post-meta{
  grid-column: 1 / -1;
  color: var(--mh-muted);
  font-size: 13px;
}

.mh-trust-strip{
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f3f4f6;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 12px;
  padding: 10px 12px;
  color: #374151;
  font-size: 13px;
}
.mh-trust-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2563EB;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.mh-post-body{
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: #111827;
}
.mh-post-body p{ margin: 0 0 14px; }
.mh-post-body h2, .mh-post-body h3{
  margin: 22px 0 10px;
  letter-spacing: -0.01em;
}
.mh-post-body blockquote{
  margin: 18px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(124,58,237,.55);
  background: rgba(124,58,237,.06);
  border-radius: 12px;
}

.mh-engage{
  margin-top: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mh-engage-btn{
  appearance: none;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
  color: #111827;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mh-engage-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  background:#fff;
  color:#111827;
}
.mh-engage-btn.is-active{
  border-color: rgba(124,58,237,.35);
  background: rgba(124,58,237,.08);
}
.mh-engage-count{
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  color: #111827;
}
.mh-engage-sep{
  width: 1px;
  height: 18px;
  background: rgba(17,24,39,.12);
  margin: 0 6px;
}
.mh-engage-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111827;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 10px;
}
.mh-engage-link:hover{
  background: rgba(17,24,39,.04);
}
.mh-engage-muted{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mh-muted);
}

.mh-discussion{
  margin-top: 14px;
  padding: 18px 18px 10px;
}
.mh-section-title{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.mh-login-gate{
  border: 1px solid rgba(17,24,39,.10);
  background: #f9fafb;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mh-login-title{ font-weight: 700; color: #111827; }

/* Make WP comments feel like product UI */
.mh-comments .comment-reply-title,
.mh-comments .comments-title{ display:none; }
.mh-comments .comment-list{ list-style:none; padding: 0; margin: 0; }
.mh-comments .comment{ border-top: 1px solid rgba(17,24,39,.06); padding: 12px 0; }
.mh-comments .comment:first-child{ border-top:none; }
.mh-comments .comment-meta{ font-size: 13px; color: var(--mh-muted); }
.mh-comments .comment-content{ margin-top: 6px; font-size: 14px; line-height: 1.6; }
.mh-comments .comment-respond{ margin-top: 12px; border-top: 1px solid rgba(17,24,39,.06); padding-top: 12px; }
.mh-comments .comment-respond label{ font-size: 13px; color: #374151; }
.mh-comments textarea,
.mh-comments input[type="text"],
.mh-comments input[type="email"],
.mh-comments input[type="url"]{
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  background: rgba(17,24,39,.03);
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.06);
  transition: box-shadow 140ms cubic-bezier(.4,0,.2,1), background-color 140ms cubic-bezier(.4,0,.2,1);
}
.mh-comments textarea{ min-height: 44px; resize: vertical; }
.mh-comments textarea:focus,
.mh-comments input[type="text"]:focus,
.mh-comments input[type="email"]:focus,
.mh-comments input[type="url"]:focus{
  outline: none;
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(124,58,237,.12),
    inset 0 0 0 1px rgba(124,58,237,.18);
}
.mh-comments .form-submit input[type="submit"]{
  background: var(--mh-black);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
.mh-comments .form-submit input[type="submit"]:hover{
  filter: brightness(1.03);
}
.mh-comments .must-log-in{ display:none; }

.mh-navcards{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mh-navcard{ min-height: 140px; }
.mh-navlink{
  display: block;
  height: 100%;
  padding: 16px 16px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  color: #111827;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mh-navlink:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  border-color: rgba(124,58,237,.22);
}
.mh-navkicker{ font-size: 13px; color: var(--mh-muted); margin-bottom: 8px; }
.mh-navtitle{ font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.mh-navexcerpt{ color: #374151; font-size: 14px; line-height: 1.5; }
.mh-navdate{ margin-top: 10px; font-size: 13px; color: var(--mh-muted); }

.mh-single-side{
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mh-side-search{ padding: 14px; }
.mh-search-pill{
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
}
.mh-search-pill input{
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  background: transparent;
  color: #111827;
}
.mh-kbd{
  font-size: 12px;
  color: var(--mh-muted);
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 8px;
  padding: 2px 6px;
}
.mh-side-links{
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.mh-side-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: #111827;
}
.mh-side-link:hover{ background: rgba(17,24,39,.04); }

.mh-about{ padding: 16px; }
.mh-about-head{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}
.mh-about-title{ font-weight: 900; letter-spacing:-0.01em; }
.mh-about-text{ color: #374151; font-size: 14px; line-height: 1.55; margin-bottom: 10px; }

.mh-link{ color:#2563EB; text-decoration:none; font-weight:700; }
.mh-link:hover{ text-decoration: underline; }

.mh-reco{ padding: 16px; }
.mh-reco-title{ font-weight: 900; letter-spacing:-0.01em; margin-bottom: 10px; }
.mh-reco-list{ list-style:none; padding:0; margin:0; display:grid; gap: 10px; }
.mh-reco-list a{
  display:grid;
  grid-template-columns: 16px minmax(0,1fr);
  gap: 10px;
  text-decoration:none;
  color:#111827;
}
.mh-reco-item-title{ font-weight: 700; }
.mh-reco-date{
  grid-column: 2 / -1;
  font-size: 12px;
  color: var(--mh-muted);
  margin-top: 2px;
}

@media (max-width: 980px){
  .mh-single-grid{ grid-template-columns: 1fr; }
  .mh-single-side{ position: static; }
  .mh-navcards{ grid-template-columns: 1fr; }
}

/* -------------------------------------------------
   Premium Comments (Reddit-ish, compact)
-------------------------------------------------- */

.mh-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.mh-comments-wrap{margin-top:16px;}

.mh-composer{
  /* Premium composer: soft surface (no heavy outline) */
  border: 0;
  background: rgba(17,24,39,.015);
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(17,24,39,.06);
}
.mh-composer .comment-reply-title{display:none;}

.mh-composer-form{display:block;}
.mh-composer-form.is-open .mh-composer-input{background:rgba(17,24,39,.04);}

.mh-composer-row{display:flex;gap:10px;align-items:flex-start;}
.mh-composer-ava{flex:0 0 auto;}
.mh-avatar-img{border-radius:999px;display:block;}

.mh-composer-input{flex:1 1 auto;width:100%;border:0;outline:0;resize:none;min-height:36px;line-height:1.25;padding:9px 10px;border-radius:12px;background:rgba(17,24,39,.03);font-size:14px;}
.mh-composer-input:focus{box-shadow:0 0 0 4px rgba(37,99,235,.12);background:#fff;}
.mh-composer-input::placeholder{color:rgba(17,24,39,.55);}

.mh-composer-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:6px 6px;border-radius:12px;background:rgba(17,24,39,.02);border:1px solid rgba(17,24,39,.06);}
.mh-tools-left{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.mh-tool{border:1px solid rgba(17,24,39,.10);background:#fff;border-radius:10px;padding:6px 8px;cursor:pointer;font-size:13px;line-height:1;color:#111827;}
.mh-tool:hover{background:rgba(17,24,39,.03);}
.mh-tools-right{display:flex;align-items:center;gap:8px;}
.mh-count{font-size:12px;color:rgba(17,24,39,.65);}

.mh-composer-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px;}

.mh-btn{border:1px solid rgba(17,24,39,.12);background:#fff;color:#111827;border-radius:12px;padding:8px 12px;font-size:13px;line-height:1;cursor:pointer;}
.mh-btn:hover{background:rgba(17,24,39,.03);}
.mh-btn-primary{background:var(--mh-black);color:#fff;border-color:rgba(17,24,39,.12);}
.mh-btn-primary:hover{filter:brightness(.96);}
.mh-btn[disabled], .mh-btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.1);}
.mh-btn-ghost{background:#fff;}

.mh-comments-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 6px;}
.mh-comments-count{font-size:13px;color:rgba(17,24,39,.7);}
.mh-sort{border:1px solid rgba(17,24,39,.12);border-radius:12px;padding:8px 10px;background:#fff;font-size:13px;}

.mh-empty-comments{border:1px dashed rgba(17,24,39,.18);background:rgba(17,24,39,.02);border-radius:18px;padding:14px;margin-top:10px;}
.mh-empty-title{font-weight:600;margin-bottom:4px;}
.mh-empty-sub{font-size:13px;color:rgba(17,24,39,.7);}

.mh-comment-list{margin:0;padding:0;list-style:none;}
.mh-comment-list > li{padding:0;margin:0;}

.mh-c{display:flex;gap:10px;padding:14px 0;}
.mh-c-ava{flex:0 0 auto;}
.mh-c-body{flex:1 1 auto;min-width:0;}

.mh-c-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;color:rgba(17,24,39,.65);}
.mh-c-author{font-weight:600;color:#111827;}
.mh-c-author a{color:inherit;text-decoration:none;}
.mh-c-author a:hover{text-decoration:underline;}
.mh-dot{opacity:.4;}
.mh-edited{font-size:12px;color:rgba(17,24,39,.55);}

.mh-badge-op{display:inline-flex;align-items:center;border:1px solid rgba(37,99,235,.3);color:#2563EB;background:rgba(37,99,235,.08);padding:2px 8px;border-radius:999px;font-size:11px;}

.mh-c-content{margin-top:6px;font-size:14px;line-height:1.55;color:#111827;}
.mh-c-content p{margin:.35em 0;}

.mh-c-actions{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:rgba(17,24,39,.7);}
.mh-c-actions a.comment-reply-link{color:rgba(17,24,39,.75);text-decoration:none;border-radius:10px;padding:6px 8px;}
.mh-c-actions a.comment-reply-link:hover{background:rgba(17,24,39,.04);}

.mh-cact{border:0;background:transparent;color:rgba(17,24,39,.75);padding:6px 8px;border-radius:10px;cursor:pointer;font-size:12px;}
.mh-cact:hover{background:rgba(17,24,39,.04);}
.mh-cact.mh-danger{color:#b42318;}
.mh-cact.mh-danger:hover{background:rgba(180,35,24,.08);}

.mh-cvote{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(17,24,39,.12);background:#fff;border-radius:999px;padding:6px 10px;cursor:pointer;font-size:12px;color:rgba(17,24,39,.75);}
.mh-cvote:hover{background:rgba(17,24,39,.03);}
.mh-cvote.is-active{border-color:rgba(37,99,235,.35);color:#2563EB;background:rgba(37,99,235,.08);}
.mh-cvote .mh-ico{display:inline-flex;line-height:0;}

.mh-comment-deleted .mh-c-content{color:rgba(17,24,39,.6);}

/* Thread guides */
.mh-comment-list .children{display:block !important;list-style:none;margin:10px 0 0 50px;padding:0 0 0 14px;border-left:1px solid rgba(17,24,39,.12);}
.mh-comment-list .children > li{padding:0;margin:0;}

/* Make replies feel visually subordinate (premium hierarchy) */
.mh-comment-list .children .mh-c{padding:12px 0;}
.mh-comment-list .children .mh-avatar-img{width:32px;height:32px;}
.mh-comment-list .children .mh-c-content{font-size:13.5px;color:rgba(17,24,39,.92);}

/* Collapse replies */
.mh-comment-list li.mh-comment-collapsed > .children{display:none !important;}
.mh-comment-list > li.mh-comment-collapsed .mh-collapse{background:rgba(17,24,39,.04);}


/* Inline editor */
.mh-editor{border:1px solid rgba(17,24,39,.10);background:rgba(17,24,39,.02);border-radius:14px;padding:10px;}
.mh-editor-ta{width:100%;border:1px solid rgba(17,24,39,.12);border-radius:12px;padding:10px;font-size:14px;line-height:1.45;resize:vertical;min-height:90px;}
.mh-editor-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px;}

/* -------------------------------------------------
   Notifications (Bell + dropdown)
-------------------------------------------------- */

.mh-notify{position:relative;}
.mh-notify-btn{position:relative;display:inline-flex;align-items:center;gap:8px;}
.mh-notify-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#b42318;color:#fff;font-size:11px;line-height:18px;text-align:center;border:2px solid #fff;}

.mh-notify-menu{position:absolute;right:0;top:42px;z-index:50;width:min(360px, 92vw);background:#fff;border:1px solid rgba(17,24,39,.10);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.12);padding:10px;}
.mh-notify-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 10px;}
.mh-notify-title{font-weight:700;font-size:13px;color:#111827;}
.mh-notify-mark{border:0;background:transparent;color:#2563EB;font-size:12px;cursor:pointer;padding:6px 8px;border-radius:10px;}
.mh-notify-mark:hover{background:rgba(37,99,235,.08);}

.mh-notify-items{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto;padding:0 4px 6px;}
.mh-notify-empty{padding:12px;border:1px dashed rgba(17,24,39,.15);border-radius:14px;background:rgba(17,24,39,.02);font-size:13px;color:rgba(17,24,39,.7);}

.mh-notify-item{display:block;text-decoration:none;color:#111827;border:1px solid rgba(17,24,39,.08);border-radius:14px;padding:10px 12px;background:#fff;}
.mh-notify-item:hover{background:rgba(17,24,39,.03);}
.mh-notify-item.is-unread{border-color:rgba(37,99,235,.30);background:rgba(37,99,235,.06);}
.mh-notify-msg{font-size:13px;line-height:1.3;margin-bottom:6px;}
.mh-notify-time{font-size:12px;color:rgba(17,24,39,.65);}

/* Follow button state */
#mh_follow_btn.is-active{background:rgba(17,24,39,.04);}


/* Community post type filter bar */
.mh-typebar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 10px 0 0;
}
.mh-typebar button{
  appearance:none;
  border:1px solid var(--mh-border);
  background:#fff;
  color: var(--mh-muted);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.mh-typebar button:hover{ background:#f9fafb; }
.mh-typebar button.is-active{
  color: var(--mh-text);
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

/* Post type badge */
.mh-badge-type{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  color: var(--mh-muted);
  margin-left: 8px;
}
.mh-badge-type.is-insight{ border-color: rgba(37,99,235,.25); background: rgba(37,99,235,.08); color: #1e40af; }
/* Make Questions clearly distinct from Insights (avoid similar blues) */
.mh-badge-type.is-question{ border-color: rgba(124,58,237,.28); background: rgba(124,58,237,.10); color: #5b21b6; font-weight: 700; }
.mh-badge-type.is-resource{ border-color: rgba(16,185,129,.22); background: rgba(16,185,129,.10); color: #065f46; }
.mh-badge-type.is-case{ border-color: rgba(245,158,11,.24); background: rgba(245,158,11,.10); color: #92400e; }

/* Extra safety: hidden overlays must not intercept clicks */
.mh-modal[hidden], .mh-modal-backdrop[hidden]{ pointer-events:none !important; }