/* Mizan Forum — RTL-first stylesheet.
 *
 * NOTE: kha-cli does NOT expand /api/plugin_api/mizanforum/ /api/plugins_static/mizanforum/ mizanforum tokens inside static/ (LESSONS 5.4).
 * Any asset URL in this file must be written out in full:
 *   /api/plugins_static/mizanforum/...
 * If the plugin key ever changes, these strings must be updated by hand.
 *
 * Direction: every inline offset uses LOGICAL properties
 * (margin-inline-start, padding-inline, inset-inline, border-inline-start...)
 * so the same rules serve rtl and any future ltr locale with no overrides.
 */

:root {
  --mz-bg:        #faf9f7;
  --mz-surface:   #ffffff;
  --mz-surface-2: #f2f0ec;
  --mz-border:    #e2ded7;
  /* A second, firmer rule. Editorial layouts separate things with lines rather
     than with boxes, and a line doing that work has to be visible. */
  --mz-rule:      #cfc9c0;
  /* An ink ground for the masthead and footer. A page made only of white and
     hairlines has nothing to anchor it, which is why the first pass still read
     as a document rather than a product. */
  --mz-ink:       #0e1c18;
  --mz-ink-2:     #16302a;
  --mz-on-ink:    #f3f1ec;
  --mz-on-ink-dim:#a9b8b2;
  --mz-gold:      #d9b45c;
  /* Controls need a boundary of their own. WCAG 1.4.11 asks for 3:1 on anything
     that identifies a UI component, and --mz-border is 1.31:1 against the page -
     fine for a decorative divider, not for the edge of an input you must find.
     #8c8375 is 3.46:1 on the page and 3.74:1 on a card. */
  --mz-control:   #8c8375;
  --mz-text:      #15130f;
  --mz-text-dim:  #5f594f;
  --mz-accent:    #0b5f4f;
  --mz-accent-dim:#e0edea;
  --mz-danger:    #9c2d1b;
  --mz-warn:      #7d5a0f;
  --mz-radius:    10px;
  --mz-maxw:      1060px;

  /* Two faces with a clear split of work. Readex Pro carries headings and the
     wordmark: a contemporary Arabic display sans, serious rather than playful.
     IBM Plex Sans Arabic carries everything read at length - it is an
     institutional text face, which is the right register for a political forum.
     The previous face was Noto Naskh Arabic, a traditional calligraphic book
     hand; beautiful for literature, and the main reason the site read as dated. */
  --mz-display: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --mz-font: "IBM Plex Sans Arabic", "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;

  /* This design is deliberately light-only. Declaring color-scheme keeps the
     browser from rendering form controls, scrollbars and autofill backgrounds
     in dark for visitors whose OS is set to dark mode. */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mz-bg);
  color: var(--mz-text);
  font-family: var(--mz-font);
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mz-accent); text-decoration: none; transition: color .16s ease; }
a:hover { color: color-mix(in srgb, var(--mz-accent) 75%, #000); text-decoration: none; }
/* Inside running text an underline is what makes a link findable, so prose keeps
   it. Chrome, navigation and cards do not - there the shape does the work. */
.mz-prose a, .mz-panel__p a, .mz-empty a, .mz-joinbox a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--mz-accent) 40%, transparent);
}
.mz-prose a:hover, .mz-panel__p a:hover, .mz-empty a:hover, .mz-joinbox a:hover {
  text-decoration-color: currentColor;
}
/* Inside running text an underline is what makes a link findable, so prose
   keeps it. Chrome, navigation and cards do not - there the shape does the work. */

.mz-wrap { max-width: var(--mz-maxw); margin-inline: auto; padding-inline: 16px; }

/* ---------- header ---------- */
.mz-header {
  background: var(--mz-ink);
  border-block-end: 0;
  color: var(--mz-on-ink);
  position: relative;
  overflow: hidden;
}
/* The khatam lattice again, carried across the masthead at low strength so the
   band reads as material rather than a flat bar. */
.mz-header::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--mz-gold);
  -webkit-mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  -webkit-mask-size: 92px 92px;
  mask-size: 92px 92px;
  opacity: .10;
  pointer-events: none;
}
.mz-header__bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-block: 16px;
  position: relative; z-index: 1;
}
.mz-header a { color: var(--mz-on-ink); }
.mz-header .mz-nav a { color: var(--mz-on-ink-dim); font-weight: 500; }
.mz-header .mz-nav a:hover { color: #fff; text-decoration: none; }
/* The balance was drawn for the app icon and never appeared in the interface,
   so the site had no mark at all - only text. ميزان means balance. */
.mz-brand { display: flex; flex-direction: row; align-items: center; gap: 11px; }
.mz-brand:hover { text-decoration: none; }
.mz-brand__mark { flex: none; color: var(--mz-gold); }
.mz-brand__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mz-brand__name {
  font-family: var(--mz-display);
  font-size: 1.35rem; font-weight: 700; color: var(--mz-on-ink);
  letter-spacing: -0.02em; line-height: 1.2;
}
.mz-brand__tag  { font-size: .82rem; color: var(--mz-on-ink-dim); line-height: 1.3; }
.mz-header__spacer { flex: 1 1 auto; }
.mz-nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- generic surfaces ---------- */
/* Every panel on the site is this card. A flat white rectangle with a hairline
   is what made the inner pages look bare beside the homepage, so it gets the
   same treatment the discussion cards got: a gradient, a radius with some
   confidence in it, and a shadow that lifts it off the ground. */
.mz-card {
  position: relative;
  background: linear-gradient(180deg,
    var(--mz-surface) 0%,
    color-mix(in srgb, var(--mz-surface-2) 42%, var(--mz-surface)) 100%);
  border: 1px solid var(--mz-border);
  border-radius: 15px;
  padding: 20px 21px;
  box-shadow: 0 1px 2px rgba(20, 16, 10, .04), 0 10px 26px -22px rgba(20, 16, 10, .3);
}
.mz-main { padding-block: 28px 48px; }
h1, h2, h3 {
  font-family: var(--mz-display);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin-block: 0 .5em;
  text-wrap: balance;
}
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.25rem; }

.mz-muted { color: var(--mz-text-dim); }
.mz-small { font-size: .85rem; }

/* ---------- category list ---------- */
.mz-cat {
  background: var(--mz-surface);
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  padding: 16px 17px;
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  transition: border-color .15s ease;
}
.mz-cat:hover { border-color: var(--mz-control); }
.mz-cat__stats { display: flex; gap: 18px; font-size: .85rem; color: var(--mz-text-dim); }

/* ---------- empty / notice states ---------- */
.mz-empty {
  text-align: center; padding: 48px 16px; color: var(--mz-text-dim);
  border: 1px dashed var(--mz-border); border-radius: var(--mz-radius);
}
.mz-notice {
  border: 1px solid var(--mz-border);
  border-inline-start: 4px solid var(--mz-warn);
  background: var(--mz-surface);
  border-radius: var(--mz-radius);
  padding: 12px 16px;
  margin-block-end: 20px;
}

/* ---------- footer ---------- */
.mz-footer {
  background: var(--mz-ink);
  color: var(--mz-on-ink-dim);
  margin-block-start: 56px;
  padding-block: 26px;
  font-size: .9rem;
}

/* ---------- narrow screens ---------- */
@media (max-width: 560px) {
  body { font-size: 15px; }
  .mz-header__bar { gap: 10px; }
  .mz-cat { padding: 13px; }
}

/* ---------- breadcrumb / heads ---------- */
.mz-crumb { margin-block-end: 12px; }
.mz-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-block-end: 16px; }
.mz-head > div { flex: 1 1 260px; }
.mz-narrow { max-width: 560px; margin-inline: auto; }

/* ======================================================================
   CONTROLS
   Every control on the site was one flat rule: a solid rectangle for a
   button, a 1px box for an input. They work, and they look like 2004.
   What follows gives them depth, states you can feel, and validation that
   waits until someone has actually finished typing.
   ====================================================================== */

/* ---------- buttons ---------- */
.mz-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; letter-spacing: -0.01em;
  color: #fff; text-decoration: none; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--mz-accent) 70%, #000);
  border-radius: 11px;
  padding: 10px 20px;
  min-height: 44px;
  /* Two stops plus an inset highlight: the edge catches light, so the surface
     reads as a raised object rather than a filled rectangle. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-accent) 88%, #fff) 0%,
    var(--mz-accent) 55%,
    color-mix(in srgb, var(--mz-accent) 92%, #000) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
    0 1px 2px rgba(20, 16, 10, .14),
    0 6px 16px -10px color-mix(in srgb, var(--mz-accent) 80%, transparent);
  transition: transform .14s cubic-bezier(.3,.8,.4,1), box-shadow .2s ease, filter .2s ease;
}
.mz-btn:hover {
  text-decoration: none; filter: brightness(1.06); transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent),
    0 2px 4px rgba(20, 16, 10, .16),
    0 12px 24px -12px color-mix(in srgb, var(--mz-accent) 90%, transparent);
}
/* Pressing moves the surface down and kills the lift, so the click lands. */
.mz-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.22); }
.mz-btn[disabled], .mz-btn:disabled {
  opacity: .5; cursor: not-allowed; transform: none; filter: none; box-shadow: none;
}
.mz-btn--lg { padding: 13px 26px; font-size: 1.05rem; min-height: 50px; border-radius: 13px; }
.mz-btn--sm { padding: 6px 14px; font-size: .88rem; min-height: 36px; border-radius: 9px; }

.mz-btn--ghost {
  background: var(--mz-surface); color: var(--mz-text);
  border-color: var(--mz-control);
  box-shadow: 0 1px 2px rgba(20, 16, 10, .05);
}
.mz-btn--ghost:hover {
  background: var(--mz-surface-2); color: var(--mz-accent);
  border-color: var(--mz-accent); filter: none;
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--mz-accent) 60%, transparent);
}
.mz-btn--danger {
  border-color: color-mix(in srgb, var(--mz-danger) 70%, #000);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-danger) 88%, #fff) 0%,
    var(--mz-danger) 55%,
    color-mix(in srgb, var(--mz-danger) 92%, #000) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent),
              0 6px 16px -10px color-mix(in srgb, var(--mz-danger) 80%, transparent);
}
/* A button dressed as an underlined link is the control the owner kept pointing
   at. The base is a quiet pill now; inside .mz-actions it picks up the icon
   treatment, and everywhere else it at least looks pressable. */
.mz-linkbtn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  color: var(--mz-accent);
  background: var(--mz-surface);
  border: 1px solid var(--mz-border);
  border-radius: 999px;
  padding: 6px 14px; min-height: 36px;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.mz-linkbtn:hover {
  background: var(--mz-accent-dim); border-color: var(--mz-accent);
  color: color-mix(in srgb, var(--mz-accent) 80%, #000); text-decoration: none;
}
.mz-linkbtn--danger { color: var(--mz-danger); }
.mz-linkbtn--danger:hover {
  background: color-mix(in srgb, var(--mz-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--mz-danger) 40%, transparent);
  color: var(--mz-danger);
}
.mz-linkbtn--danger { color: var(--mz-danger); }
.mz-inline { display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- thread list ---------- */
.mz-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mz-thread {
  background: var(--mz-surface); border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius); padding: 14px;
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
}
.mz-thread.is-pinned { border-inline-start: 4px solid var(--mz-accent); }
.mz-thread__score {
  min-width: 44px; text-align: center; font-weight: 700;
  background: var(--mz-surface-2); border-radius: 8px; padding: 4px 8px;
}
.mz-thread__body { flex: 1 1 240px; min-width: 0; }
.mz-thread__title { font-weight: 700; font-size: 1.05rem; }
.mz-thread__meta { margin-block-start: 3px; }

.mz-badge {
  display: inline-block; font-size: .72rem; font-weight: 700;
  background: var(--mz-accent-dim); color: var(--mz-accent);
  border-radius: 999px; padding: 1px 9px; margin-inline-end: 5px;
  vertical-align: middle;
}
.mz-badge--warn { background: #f6e6c4; color: var(--mz-warn); }
.mz-badge--best { background: var(--mz-accent); color: #fff; margin-block-end: 8px; }
/* Launch checklist states. --todo must read as "act on this", not as an error:
   an unfinished pre-launch item is normal, a failed one is not. */
.mz-badge--ok   { background: var(--mz-accent); color: #fff; }
.mz-badge--todo { background: #f6dcd7; color: var(--mz-danger); }
.mz-badge--opt  { background: #ece9e3; color: var(--mz-text-dim); }
.mz-check td:first-child { white-space: nowrap; width: 1%; }
.mz-check td:nth-child(3) { font-size: .9rem; }

/* ---------- posts ---------- */
.mz-post {
  background: var(--mz-surface); border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius); padding: 16px; margin-block-end: 14px;
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
}
.mz-post.is-best { border-color: var(--mz-accent); }
.mz-post__main { flex: 1 1 260px; min-width: 0; }
.mz-post__meta { margin-block-end: 8px; }
.mz-prose { overflow-wrap: anywhere; }
.mz-prose p { margin-block: 0 .85em; }
.mz-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-block-start: 10px; }

/* ---------- votes ---------- */

/* ---------- tags ---------- */
.mz-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 12px; }
.mz-tag {
  font-size: .82rem; background: var(--mz-surface-2); border: 1px solid var(--mz-border);
  border-radius: 999px; padding: 2px 11px;
}

/* ---------- forms ---------- */
.mz-form { display: grid; gap: 8px; margin-block-end: 20px; }
.mz-form h2 { margin-block-end: 4px; }
.mz-form label { font-weight: 600; font-size: .92rem; }
.mz-form input, .mz-form textarea, .mz-form select {
  font: inherit; color: var(--mz-text);
  background: var(--mz-surface);
  border: 1px solid var(--mz-control);
  border-radius: 11px;
  padding: 12px 14px;
  min-height: 46px;
  width: 100%; max-width: 100%;
  /* A hairline inset at the top reads as a recess - the counterpart to the
     highlight on the buttons, so controls and surfaces agree about the light. */
  box-shadow: inset 0 1px 2px rgba(20, 16, 10, .05);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.mz-form input::placeholder, .mz-form textarea::placeholder { color: var(--mz-text-dim); opacity: .72; }

/* Focus is a ring drawn with box-shadow rather than an outline, so it follows
   the border radius exactly instead of boxing the corners. */
.mz-form input:focus, .mz-form textarea:focus, .mz-form select:focus {
  outline: none;
  border-color: var(--mz-accent);
  background: var(--mz-surface);
  box-shadow:
    inset 0 1px 2px rgba(20, 16, 10, .04),
    0 0 0 3px color-mix(in srgb, var(--mz-accent) 20%, transparent);
}
.mz-form input:hover:not(:focus), .mz-form textarea:hover:not(:focus), .mz-form select:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--mz-accent) 45%, var(--mz-control));
}

/* :user-invalid, not :invalid - it waits until the field has been interacted
   with and left, so an empty required field is not scolded on arrival. */
.mz-form input:user-invalid, .mz-form textarea:user-invalid {
  border-color: var(--mz-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-danger) 18%, transparent);
}
.mz-form input:user-valid:not(:placeholder-shown) {
  border-color: color-mix(in srgb, var(--mz-accent) 55%, var(--mz-control));
}

.mz-form textarea {
  resize: vertical; line-height: 1.75; min-height: 120px;
  /* Grows with its content where supported, instead of sitting at a fixed
     height with a scrollbar inside it. */
  field-sizing: content;
  max-height: 60vh;
}

/* A select still renders the platform's own arrow, which never matches the
   page and sits on the wrong side in RTL. Replace it with our own. */
.mz-form select {
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 44px;
  cursor: pointer;
  /* Two layers: a soft chip behind the chevron so the control looks pressable,
     and the chevron itself in ink rather than accent. The accent arrow repeated
     down a form read as decoration applied by rule, not as an affordance. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2315130f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--mz-surface-2), color-mix(in srgb, var(--mz-surface-2) 70%, var(--mz-border)));
  background-repeat: no-repeat, no-repeat;
  background-position: left 15px center, left 5px center;
  background-size: 11px 7px, 30px calc(100% - 10px);
  background-origin: padding-box, content-box;
}
.mz-form select:hover { background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230b5f4f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--mz-accent-dim), color-mix(in srgb, var(--mz-accent-dim) 60%, var(--mz-surface)));
}

.mz-form select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230b5f4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Checkboxes and radios: the native box tinted to the palette and given room,
   which is both better looking and better behaved than a rebuilt control. */
.mz-form input[type="checkbox"], .mz-form input[type="radio"] {
  appearance: auto; -webkit-appearance: auto;
  accent-color: var(--mz-accent);
  inline-size: 20px; block-size: 20px; min-height: 0;
  width: auto; padding: 0; box-shadow: none; cursor: pointer;
}
.mz-check {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--mz-border); background: var(--mz-surface);
  cursor: pointer; transition: border-color .18s ease, background .18s ease;
  font-weight: 500;
}
.mz-check:hover { border-color: var(--mz-accent); background: var(--mz-accent-dim); }
/* :has lets the whole row show the checked state, not just the little box. */
.mz-check:has(input:checked) {
  border-color: var(--mz-accent);
  background: var(--mz-accent-dim);
  font-weight: 600;
}

/* A hint or an error under a field, consistent everywhere. */
.mz-hint { font-size: .84rem; color: var(--mz-text-dim); line-height: 1.5; }
.mz-err  { font-size: .84rem; color: var(--mz-danger); font-weight: 600; }
.mz-form button { justify-self: start; margin-block-start: 6px; }
/* honeypot: must stay reachable to bots and invisible to people */
.mz-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }

.mz-error {
  background: #fbe9e5; color: #7d2416; border: 1px solid #eab6aa;
  border-radius: var(--mz-radius); padding: 11px 15px; margin-block-end: 14px;
}
.mz-ok {
  background: var(--mz-accent-dim); color: var(--mz-accent); border: 1px solid var(--mz-accent);
  border-radius: var(--mz-radius); padding: 11px 15px; margin-block-end: 14px;
}

/* ---------- pager / tabs / tables ---------- */
.mz-pager { display: flex; gap: 18px; align-items: center; justify-content: center; margin-block: 22px; }
/* Eleven tabs wrapped onto three ragged lines on a phone, and the active one was
   marked only by weight - at a glance you could not tell where you were. One
   scrolling row of pills instead: the current tab is unmistakable, and the row
   never reflows the page beneath it. */
.mz-tabs {
  display: flex; gap: 7px; flex-wrap: nowrap;
  margin-block-end: 18px; padding-block-end: 10px;
  border-block-end: 1px solid var(--mz-border);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.mz-tabs::-webkit-scrollbar { display: none; }
.mz-tabs a, .mz-tabs button {
  flex: none; scroll-snap-align: start;
  padding: 7px 14px; border-radius: 999px;
  font-size: .91rem; font-weight: 600; white-space: nowrap;
  color: var(--mz-text-dim); background: transparent;
  border: 1px solid transparent; text-decoration: none;
}
.mz-tabs a:hover { background: var(--mz-surface-2); color: var(--mz-text); text-decoration: none; }
.mz-tabs a.is-active {
  font-weight: 700; color: #fff; background: var(--mz-accent);
  border-color: var(--mz-accent);
}
.mz-modrow { margin-block-end: 12px; }
.mz-table { border-collapse: collapse; width: 100%; min-width: 640px; }
.mz-table th, .mz-table td { text-align: start; padding: 9px 11px; border-block-end: 1px solid var(--mz-border); }
.mz-table th { font-size: .85rem; color: var(--mz-text-dim); }

/* ---------- profile ---------- */
.mz-profile { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-block-end: 22px; }
.mz-profile > div { flex: 1 1 240px; min-width: 0; }
.mz-avatar { border-radius: 50%; object-fit: cover; }

/* ===========================================================================
   HOMEPAGE
   All inline offsets use logical properties so the same rules serve rtl and ltr.
   =========================================================================== */

/* The masthead. Was a pale box with a soft gradient blob and centred text -
   the shape every template uses. Now it reads as a masthead: content set to the
   start edge, a rule under it, and a khatam tessellation carrying the texture.

   The pattern is a real construction, not an ornament picked for flavour: the
   eight-pointed star of two squares crossed at 45 degrees, the motif of Tunisian
   zellige. It is applied as a MASK so its colour comes from the accent token and
   follows the palette, and it is held at low opacity and faded away from the
   text, because a pattern that competes with the words is decoration. */
/* The hero was a white box with a faint pattern and a faint gradient - restraint
   so complete that the page had no focal point at all. It is an ink panel now:
   the lattice in gold at real strength, a headline set large, and the stats as a
   quiet line beneath. Boldness in ONE place; everything below it stays calm. */
.mz-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(135deg, var(--mz-ink) 0%, var(--mz-ink-2) 100%);
  color: var(--mz-on-ink);
  padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 46px);
  margin-block-end: 40px;
  text-align: start;
}
.mz-hero__glow {
  position: absolute; inset: 0;
  background: var(--mz-gold);
  -webkit-mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  -webkit-mask-size: 116px 116px;
  mask-size: 116px 116px;
  opacity: .20;
  pointer-events: none;
}
.mz-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to left,
    var(--mz-ink) 6%,
    color-mix(in srgb, var(--mz-ink) 70%, transparent) 42%,
    transparent 80%);
  pointer-events: none;
  z-index: 1;
}
.mz-hero__inner { position: relative; z-index: 2; max-width: 46rem; }
.mz-hero__title {
  font-family: var(--mz-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.12; margin: 0 0 .25em;
  letter-spacing: -0.03em;
  color: var(--mz-on-ink);
}
.mz-hero__tag {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--mz-on-ink-dim);
  max-width: 46ch; margin: 0 0 1.5em;
}
.mz-hero__actions {
  display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap;
  margin-block-end: 36px;
}
.mz-btn--lg { padding: 12px 28px; font-size: 1.02rem; border-radius: 10px; }
.mz-hero .mz-btn--ghost {
  background: transparent; color: var(--mz-on-ink);
  border: 1px solid color-mix(in srgb, var(--mz-on-ink) 45%, transparent);
}
.mz-hero .mz-btn--ghost:hover { background: color-mix(in srgb, var(--mz-on-ink) 12%, transparent); }
.mz-btn--ghost {
  background: transparent; color: var(--mz-accent);
  border: 1px solid var(--mz-border);
}
.mz-btn--ghost:hover { background: var(--mz-accent-dim); filter: none; }

/* Three big numbers centred under the title was the strongest thing on the page,
   and on a new forum two of them read 0 - leading with the one fact that works
   against you. They sit on one line now, at reading size, above a rule. */
.mz-stats {
  display: flex; justify-content: flex-start; gap: clamp(16px, 4vw, 34px);
  flex-wrap: wrap; margin: 0;
  padding-block-start: 18px;
  border-block-start: 1px solid color-mix(in srgb, var(--mz-on-ink) 22%, transparent);
}
.mz-stat { text-align: start; display: flex; align-items: baseline; gap: 7px; }
.mz-stat dt { font-size: .88rem; color: var(--mz-on-ink-dim); margin: 0; order: 2; }
.mz-stat dd {
  margin: 0; font-size: 1.05rem; order: 1;
  font-weight: 700; line-height: 1.4; color: var(--mz-gold);
  font-variant-numeric: tabular-nums;
}

/* ---------- sections ---------- */
.mz-section { margin-block-end: 44px; }
.mz-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-block-end: 16px;
}
/* Section headings were barely larger than body text, so the page had no rhythm
   and nothing announced a new block of content. */
.mz-section__head h2 {
  margin: 0;
  font-family: var(--mz-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 11px;
}
.mz-section__head h2::before {
  content: "";
  inline-size: 4px; block-size: 1.05em;
  background: var(--mz-accent);
  border-radius: 2px;
  flex: none;
}

.mz-ava {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mz-accent-dim); color: var(--mz-accent);
  font-weight: 700; font-size: .82rem; flex: none;
}
.mz-ava--lg { width: 44px; height: 44px; font-size: 1.1rem; }
.mz-ava--img { object-fit: cover; }

/* ---------- closing call to action ---------- */
.mz-cta {
  text-align: center; border-radius: 18px;
  border: 1px solid var(--mz-border);
  background: linear-gradient(180deg, var(--mz-accent-dim) 0%, var(--mz-surface) 100%);
  padding: clamp(26px, 5vw, 46px) 20px;
  margin-block-end: 20px;
}
.mz-cta h2 { margin: 0 0 .4em; }
.mz-cta p { margin: 0 0 1.4em; color: var(--mz-text-dim); }

@media (max-width: 560px) {
  .mz-hero { border-radius: 14px; }
}

/* ---------- notifications ---------- */
.mz-dot {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px;
  padding-inline: 5px; border-radius: 999px;
  background: var(--mz-danger); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1;
  vertical-align: middle;
}
.mz-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mz-note {
  background: var(--mz-surface); border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
}
.mz-note.is-unread { border-inline-start: 4px solid var(--mz-accent); background: var(--mz-accent-dim); }
.mz-note a { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px; color: inherit; }
.mz-note a:hover { text-decoration: none; }
.mz-note__kind { font-weight: 600; font-size: .93rem; }
.mz-note__title { color: var(--mz-text-dim); font-size: .9rem; }

.mz-code {
  display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .09em;
  background: var(--mz-surface); border: 1px solid var(--mz-border);
  border-radius: 8px; padding: 5px 13px; margin-inline: 6px;
}

/* ===========================================================================
   DESIGN PASS
   Fixes found by reviewing rendered pages at 1240px and 390px.
   Later in the file, so these intentionally override the base rules above.
   =========================================================================== */

/* --- 1. Reading measure -------------------------------------------------
   The single biggest readability problem: body copy ran the full ~1000px card
   width. Long Arabic lines are very hard to track back to the next line.
   ~66 characters is the comfortable range. */
.mz-prose { max-width: 66ch; }
.mz-prose p { margin-block: 0 1em; line-height: 1.95; }
.mz-prose p:last-child { margin-block-end: 0; }

/* --- 2. Typography ------------------------------------------------------ */
body { font-size: 16.5px; line-height: 1.8; }
/* An inner page opened with a bare heading floating over the background. It
   now carries the same accent bar the homepage sections use, so every page of
   the site announces itself the same way. */
h1 { font-size: clamp(1.55rem, 3vw, 2.1rem); letter-spacing: -0.025em; font-weight: 700; }
.mz-main > h1:first-child,
.mz-main > .mz-wrap > h1:first-child,
.mz-wrap > h1:first-child,
.mz-narrow > h1:first-child,
.mz-account > h1:first-child,
.mz-layout__main > h1:first-child {
  display: flex; align-items: center; gap: 13px;
  margin-block-end: 20px;
}
.mz-main > h1:first-child::before,
.mz-main > .mz-wrap > h1:first-child::before,
.mz-wrap > h1:first-child::before,
.mz-narrow > h1:first-child::before,
.mz-account > h1:first-child::before,
.mz-layout__main > h1:first-child::before {
  content: "";
  inline-size: 5px; block-size: 1.05em;
  background: linear-gradient(180deg, var(--mz-accent), var(--mz-gold));
  border-radius: 3px; flex: none;
}
h2 { font-size: clamp(1.15rem, 2vw, 1.3rem); }

/* --- 3. Thread rows -----------------------------------------------------
   Stats used to sit in their own block pushed to the far edge, leaving a wide
   empty gap mid-row. They are now part of the meta line under the title. */
.mz-thread {
  gap: 14px; padding: 15px 17px; align-items: flex-start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mz-thread:hover { border-color: var(--mz-accent); box-shadow: 0 3px 14px rgba(0,0,0,.05); }
.mz-thread__score {
  display: grid; place-items: center; flex: none;
  min-width: 46px; min-height: 42px; padding: 4px 8px;
  background: var(--mz-surface-2); border-radius: 10px;
  font-weight: 700; font-size: 1rem; color: var(--mz-text-dim);
}
.mz-thread.is-pinned .mz-thread__score { background: var(--mz-accent-dim); color: var(--mz-accent); }
.mz-thread__body { flex: 1 1 auto; min-width: 0; }
.mz-thread__title { display: block; font-size: 1.06rem; line-height: 1.5; color: var(--mz-text); }
.mz-thread__title:hover { color: var(--mz-accent); text-decoration: none; }
.mz-thread__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-block-start: 5px;
}
.mz-sep { opacity: .45; }

/* --- 4. Posts: distinguish the opening post from replies ---------------- */
.mz-post { padding: 18px 20px; gap: 16px; }
.mz-post--op {
  border-inline-start: 4px solid var(--mz-accent);
  background: linear-gradient(180deg, var(--mz-accent-dim) 0%, var(--mz-surface) 90px);
}
.mz-post--op .mz-prose { font-size: 1.04rem; }
/* flex-basis must be 0, not auto. With auto the basis is the item's max-content
   width, and a flex line wraps before it shrinks - so once the action row grew
   into pills, the whole post body dropped below the vote column, leaving a tall
   empty gap above the title. */
.mz-post__main { flex: 1 1 0; min-width: 0; }
.mz-post.is-best { border-color: var(--mz-accent); box-shadow: 0 0 0 1px var(--mz-accent) inset; }


/* --- 6. Reply prompt for logged-out visitors ---------------------------- */
.mz-joinbox {
  text-align: center; border: 1px dashed var(--mz-border);
  background: var(--mz-surface); border-radius: var(--mz-radius);
  padding: 24px 18px; color: var(--mz-text-dim);
}
.mz-joinbox a { font-weight: 600; }

/* --- 7. Header ----------------------------------------------------------
   One rule owns the header background. A second .mz-header block used to sit
   here setting a light surface, and because it came later it quietly beat the
   ink declared above - the masthead rendered white with white text on it. */
.mz-header {
  position: sticky; inset-block-start: 0; z-index: 20;
  background: color-mix(in srgb, var(--mz-ink) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}
.mz-nav { gap: 16px; font-size: .95rem; }
.mz-nav a { padding-block: 4px; }
.mz-brand__name { font-size: 1.3rem; }

/* --- 8. Keyboard accessibility ------------------------------------------
   Every interactive element needs a visible focus ring; the browser default
   was being suppressed by the custom button styling. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--mz-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- 9. Narrow screens --------------------------------------------------
   Below 640px the vote rail becomes a horizontal strip under the post, so the
   text gets the full width instead of being squeezed into a narrow column. */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .mz-wrap { padding-inline: 14px; }

  .mz-post { flex-direction: column; gap: 12px; padding: 16px; }
  .mz-post__main { order: 1; width: 100%; }
  .mz-vote { order: 2; width: 100%; }
  .mz-vote form {
    flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px;
    border-block-start: 1px solid var(--mz-border); padding-block-start: 10px;
  }
  /* 44px minimum touch target */
  .mz-vote__btn { min-width: 44px; min-height: 44px; font-size: 1.1rem; }
  .mz-vote__score { min-width: auto; padding-inline: 4px; }

  .mz-thread { padding: 13px 14px; gap: 11px; }
  .mz-thread__score { min-width: 40px; min-height: 36px; font-size: .95rem; }
  .mz-thread__title { font-size: 1.02rem; }

  .mz-actions { gap: 14px; }
  .mz-actions .mz-linkbtn, .mz-actions a { min-height: 32px; display: inline-flex; align-items: center; }

  .mz-header__bar { padding-block: 11px; }
  .mz-brand__name { font-size: 1.15rem; }
  .mz-nav { gap: 13px; font-size: .9rem; }
}

@media (max-width: 380px) {
  .mz-nav { gap: 10px; font-size: .86rem; }
}

/* --- 10. Thread row: last-activity column at the row end ----------------
   With title and meta grouped at the start, the far end of a wide row was
   empty. Putting last activity there balances the row and gives the eye a
   consistent place to scan for recency. */
.mz-thread__when {
  flex: none; align-self: center; text-align: center;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 104px; padding-inline-start: 12px;
  border-inline-start: 1px solid var(--mz-border);
}
.mz-thread__when b { color: var(--mz-text); font-weight: 600; }

@media (max-width: 640px) {
  /* On a phone there is no room for a third column: fold it back into the
     meta line rather than letting it squeeze the title. */
  .mz-thread__when {
    min-width: 0; padding-inline-start: 0; border-inline-start: 0;
    flex-direction: row; gap: 5px; align-self: flex-start;
    width: 100%; margin-block-start: 4px; text-align: start;
  }
  .mz-thread { flex-wrap: wrap; }
  .mz-thread__body { flex: 1 1 200px; }
}

/* ---------- Facebook news strip (homepage) ---------- */
.mz-fbstrip {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.mz-fbstrip a {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--mz-surface); border: 1px solid var(--mz-border);
  border-inline-start: 4px solid #1877F2;
  border-radius: var(--mz-radius); padding: 13px 15px; color: inherit;
  height: 100%;
}
.mz-fbstrip a:hover { text-decoration: none; border-color: var(--mz-accent); }
.mz-fbstrip__title { font-weight: 600; line-height: 1.5; }
@media (max-width: 560px) { .mz-fbstrip { grid-template-columns: 1fr; } }

/* ---------- follow / save / jump-to-unread ---------- */
.mz-threadtools {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-block-start: 14px; padding-block-start: 12px;
  border-block-start: 1px solid var(--mz-border);
}
.mz-tool {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--mz-surface-2); color: var(--mz-text);
  border: 1px solid var(--mz-border); border-radius: 999px;
  padding: 6px 15px; font: inherit; font-size: .88rem; cursor: pointer;
  min-height: 34px;
}
.mz-tool:hover { border-color: var(--mz-accent); color: var(--mz-accent); text-decoration: none; }
.mz-tool.is-on { background: var(--mz-accent-dim); color: var(--mz-accent); border-color: var(--mz-accent); }
.mz-tool--jump { background: transparent; border-style: dashed; }
.mz-badge--new { background: var(--mz-accent); color: #fff; }

/* "New replies since your last visit" divider inside a thread. The jump link
   above the replies used to land the reader on an unmarked post, so there was
   nothing at the destination saying where the new material began. Centred rule
   with an inline label; no left/right properties, so it is RTL-safe. */
.mz-newline {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 14px; color: var(--mz-accent);
  font-size: .85rem; font-weight: 700;
}
.mz-newline::before, .mz-newline::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--mz-accent); opacity: .35;
}
.mz-newline span { flex: 0 0 auto; }

/* ---------- quoting and direct replies ---------- */
.mz-quote {
  margin: 0 0 1em; padding: 10px 15px;
  border-inline-start: 3px solid var(--mz-accent);
  background: var(--mz-surface-2);
  border-radius: 0 8px 8px 0;
  color: var(--mz-text-dim); font-size: .95rem;
}
.mz-replyto { margin-block-end: 8px; }
.mz-replyto a { font-weight: 600; }
.mz-replying {
  background: var(--mz-accent-dim); color: var(--mz-accent);
  border-radius: 8px; padding: 8px 13px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

/* ---------- formatting toolbar + rich blocks ---------- */
.mz-editor__bar {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 7px; background: var(--mz-surface-2);
  border: 1px solid var(--mz-border); border-radius: 8px 8px 0 0;
  border-block-end: 0;
}
.mz-fmt {
  background: var(--mz-surface); border: 1px solid var(--mz-border);
  border-radius: 6px; padding: 4px 11px; font: inherit; font-size: .85rem;
  cursor: pointer; color: var(--mz-text); min-height: 32px;
}
.mz-fmt:hover { border-color: var(--mz-accent); color: var(--mz-accent); }
.mz-editor__status { margin-inline-start: auto; font-size: .8rem; color: var(--mz-text-dim); }
.mz-editor + textarea, .mz-editor ~ textarea { border-start-start-radius: 0; border-start-end-radius: 0; }

.mz-h { font-size: 1.1rem; margin-block: .2em .5em; }
.mz-list { margin-block: 0 1em; padding-inline-start: 1.5em; }
.mz-list li { margin-block-end: .3em; }
.mz-prose a { text-decoration: underline; }

/* ---------- search filters ---------- */
.mz-search { gap: 12px; }
.mz-search__row { display: flex; gap: 10px; align-items: center; }
.mz-search__row input { flex: 1 1 auto; }
.mz-search__filters {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: .9rem; color: var(--mz-text-dim);
}
.mz-search__filters select, .mz-search__filters input { width: auto; min-width: 130px; padding: 6px 10px; }
.mz-search__filters label { font-weight: 600; font-size: .85rem; }
@media (max-width: 560px) {
  .mz-search__filters select, .mz-search__filters input { flex: 1 1 100%; min-width: 0; }
}

/* ---------- agreement vote (separate from quality) ---------- */
.mz-reason { max-width: 170px; padding: 4px 8px; font-size: .85rem; }

@media (max-width: 640px) {
  .mz-agree { margin-block-start: 0; }
  .mz-vote form { flex-direction: row; }
}

/* ---------- polls and source links ---------- */
.mz-poll {
  border: 1px solid var(--mz-border); border-radius: var(--mz-radius);
  background: var(--mz-surface-2); padding: 15px 17px; margin-block: 14px;
}
.mz-poll__q { margin: 0 0 12px; font-size: 1.02rem; }
.mz-poll__results { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.mz-poll__label { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; margin-block-end: 3px; }
.mz-poll__bar { background: var(--mz-surface); border-radius: 999px; height: 9px; overflow: hidden; }
.mz-poll__bar span { display: block; height: 100%; background: var(--mz-accent); border-radius: 999px; }
.mz-poll__row.is-mine .mz-poll__bar span { background: var(--mz-accent); }
.mz-poll__row.is-mine .mz-poll__label { font-weight: 600; }
.mz-poll__form { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 10px; }
.mz-poll__btn {
  background: var(--mz-surface); border: 1px solid var(--mz-border);
  border-radius: 999px; padding: 7px 16px; font: inherit; font-size: .9rem;
  cursor: pointer; color: var(--mz-text); min-height: 36px;
}
.mz-poll__btn:hover { border-color: var(--mz-accent); color: var(--mz-accent); }
.mz-poll__btn.is-on { background: var(--mz-accent-dim); color: var(--mz-accent); border-color: var(--mz-accent); }
.mz-poll__foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mz-poll__new {
  border: 1px dashed var(--mz-border); border-radius: var(--mz-radius);
  padding: 13px 15px; margin-block: 6px; display: grid; gap: 7px;
}
.mz-poll__new legend { font-weight: 600; font-size: .92rem; padding-inline: 6px; }
.mz-source { margin-block: 8px 0; overflow-wrap: anywhere; }
.mz-source a { text-decoration: underline; }

/* sub-tabs inside a moderation tab */
.mz-tabs--sub { font-size: .9rem; border-block-end: 0; margin-block-end: 12px; }

/* A native file input renders the browser's own "Choose File / No file chosen"
   in the BROWSER's language - English, left-to-right, in the middle of an Arabic
   form. The real input stays (it is what submits, and it keeps keyboard and
   screen-reader behaviour); only its box is replaced. */
.mz-file { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; cursor: pointer; }
.mz-file input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.mz-file__btn {
  flex: none; font-weight: 700; font-size: .92rem;
  background: var(--mz-surface-2); color: var(--mz-text);
  border: 1px solid var(--mz-control); border-radius: 9px;
  padding: 9px 16px; min-height: 42px;
  display: inline-flex; align-items: center;
}
.mz-file:hover .mz-file__btn { border-color: var(--mz-accent); color: var(--mz-accent); }
.mz-file input[type="file"]:focus-visible + .mz-file__btn { outline: 2px solid var(--mz-accent); outline-offset: 2px; }
.mz-file__name { color: var(--mz-text-dim); font-size: .9rem; min-width: 0; overflow-wrap: anywhere; }

/* ---------- admin: members ----------------------------------------------
   Was a 640px-min table inside a horizontal scroller. On a phone that put the
   actions column off-screen with no hint it existed: you had to swipe sideways
   to ban anyone. It is a grid on desktop and stacked cards on a phone, so every
   action stays reachable at any width. */
.mz-mtable {
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  background: var(--mz-surface);
  overflow: hidden;
}
.mz-mtable__head,
.mz-mrow {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) auto auto 62px 62px minmax(0, 2.4fr);
  gap: 12px;
  align-items: center;
  padding: 11px 15px;
}
.mz-mtable__head {
  font-size: .8rem; color: var(--mz-text-dim); font-weight: 600;
  background: var(--mz-surface-2);
  border-block-end: 1px solid var(--mz-border);
}
.mz-mrow + .mz-mrow { border-block-start: 1px solid var(--mz-border); }
.mz-mrow:hover { background: color-mix(in srgb, var(--mz-accent-dim) 40%, transparent); }
.mz-mrow__who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mz-mrow__who a { font-weight: 600; overflow-wrap: anywhere; }
.mz-mrow__c { min-width: 0; }
.mz-num { font-variant-numeric: tabular-nums; color: var(--mz-text-dim); }

.mz-ava {
  flex: none; inline-size: 30px; block-size: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mz-accent-dim); color: var(--mz-accent);
  font-weight: 700; font-size: .9rem;
}

/* Role and state read as states, not as sentences. */
.mz-role { font-size: .82rem; font-weight: 700; }
.mz-role--admin     { color: var(--mz-danger); }
.mz-role--moderator { color: var(--mz-accent); }
.mz-role--member    { color: var(--mz-text-dim); font-weight: 600; }
.mz-pill {
  display: inline-block; font-size: .76rem; font-weight: 700;
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.mz-pill--ok  { background: var(--mz-accent-dim); color: var(--mz-accent); }
.mz-pill--new { background: #f6e6c4; color: var(--mz-warn); }
.mz-pill--off { background: #f6dcd7; color: var(--mz-danger); }

/* Actions were underlined text, so "ban" and "make admin" looked identical to
   each other and to a link. They are buttons now, and the destructive ones say
   so before they are pressed. */
.mz-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.mz-act {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: var(--mz-surface); color: var(--mz-text);
  border: 1px solid var(--mz-control); border-radius: 8px;
  padding: 5px 11px; min-height: 32px; white-space: nowrap;
}
.mz-act:hover { border-color: var(--mz-accent); color: var(--mz-accent); }
.mz-act--go  { background: var(--mz-accent); border-color: var(--mz-accent); color: #fff; }
.mz-act--go:hover { filter: brightness(1.08); color: #fff; }
.mz-act--bad { color: var(--mz-danger); border-color: color-mix(in srgb, var(--mz-danger) 45%, transparent); }
.mz-act--bad:hover { background: var(--mz-danger); border-color: var(--mz-danger); color: #fff; }

@media (max-width: 760px) {
  .mz-mtable__head { display: none; }
  .mz-mrow {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 14px 15px;
  }
  .mz-mrow__who { grid-column: 1 / -1; }
  /* Each value carries its own label once the header row is gone. */
  .mz-mrow__c::before {
    content: attr(data-l) ": ";
    color: var(--mz-text-dim); font-size: .8rem;
  }
  .mz-mrow__c { display: flex; align-items: center; gap: 6px; }
  .mz-mrow__do { grid-column: 1 / -1; margin-block-start: 4px; }
  .mz-acts { justify-content: flex-start; }
  .mz-act { min-height: 38px; padding-inline: 13px; }
}

.mz-footer .mz-wrap { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.mz-build { font-size: .76rem; color: var(--mz-on-ink-dim); opacity: .8; font-variant-numeric: tabular-nums; }

/* ======================================================================
   HOME — a two-column product, not a single column of text.
   The page felt bare because it was: one narrow column, each section a flat
   list, and the geometry confined to a band at the top. The art runs through
   the cards, the tiles and the panels now, and the layout gives the eye
   somewhere to rest.
   ====================================================================== */

/* Page navigations cross-fade instead of blinking white. Chrome honours this;
   every other browser ignores the at-rule and navigates as before. */
@view-transition { navigation: auto; }

.mz-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 34px;
  align-items: start;
}
@media (max-width: 940px) { .mz-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.mz-layout__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; }
@media (max-width: 940px) { .mz-layout__side { position: static; } }

/* ---------- the discussion card ---------- */
.mz-feed { display: flex; flex-direction: column; gap: 12px; }

.mz-post-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 15px;
  padding: 17px 18px;
  border-radius: 15px;
  background:
    linear-gradient(180deg, var(--mz-surface) 0%, color-mix(in srgb, var(--mz-surface-2) 55%, var(--mz-surface)) 100%);
  border: 1px solid var(--mz-border);
  box-shadow: 0 1px 2px rgba(20, 16, 10, .04);
  transition: transform .2s cubic-bezier(.3,.8,.4,1), box-shadow .2s ease, border-color .2s ease;
  isolation: isolate;
}
/* A hairline of the category's own colour down the start edge, so a glance at
   the feed tells you which part of the forum you are reading. */
.mz-post-card::before {
  content: "";
  position: absolute; inset-block: 14px; inset-inline-start: 0;
  inline-size: 3px; border-radius: 0 3px 3px 0;
  background: var(--mz-c, var(--mz-accent));
  opacity: .85;
}
.mz-post-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mz-c, var(--mz-accent)) 45%, var(--mz-border));
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--mz-c, var(--mz-accent)) 55%, transparent),
              0 2px 6px rgba(20, 16, 10, .05);
}
/* :has lets the whole card respond to the keyboard reaching the hidden link,
   so focus and hover behave alike without a wrapper <a> swallowing the text. */
.mz-post-card:has(.mz-post-card__hit:focus-visible) {
  outline: 2px solid var(--mz-accent); outline-offset: 2px;
}
/* One stretched hit area keeps the card clickable while leaving the names and
   tags inside it as separate, selectable, individually linkable text. */
.mz-post-card__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mz-post-card__body, .mz-post-card__side, .mz-post-card__stat { position: relative; z-index: 2; pointer-events: none; }
.mz-post-card__body a, .mz-post-card__side a { pointer-events: auto; }

.mz-post-card__top { display: flex; gap: 6px; flex-wrap: wrap; margin-block-end: 7px; }
.mz-tag {
  font-size: .73rem; font-weight: 600; letter-spacing: .01em;
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--mz-c, var(--mz-accent)) 13%, transparent);
  color: color-mix(in srgb, var(--mz-c, var(--mz-accent)) 78%, #000);
  border: 1px solid color-mix(in srgb, var(--mz-c, var(--mz-accent)) 26%, transparent);
}
.mz-tag--pin { background: color-mix(in srgb, var(--mz-gold) 22%, transparent); color: #6b5111; border-color: color-mix(in srgb, var(--mz-gold) 45%, transparent); }

.mz-post-card__title {
  font-family: var(--mz-display);
  font-size: clamp(1.08rem, 1.7vw, 1.22rem);
  font-weight: 600; line-height: 1.4;
  letter-spacing: -0.015em;
  margin: 0 0 5px; color: var(--mz-text);
}
.mz-post-card:hover .mz-post-card__title { color: var(--mz-accent); }
.mz-post-card__excerpt {
  margin: 0 0 9px; color: var(--mz-text-dim); font-size: .93rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mz-post-card__meta { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--mz-text-dim); }
.mz-meta-who { font-weight: 600; color: var(--mz-text); }
.mz-dotsep { inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--mz-control); opacity: .6; flex: none; }

/* The vote and reply counts, read as a block rather than buried in a sentence. */
.mz-post-card__stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-inline-size: 64px; padding-inline-start: 13px;
  border-inline-start: 1px solid var(--mz-border);
  text-align: center;
}
.mz-count { font-family: var(--mz-display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; color: var(--mz-text); font-variant-numeric: tabular-nums; }
.mz-count__k { font-size: .7rem; color: var(--mz-text-dim); }
.mz-count--2 { font-size: .78rem; font-weight: 600; color: var(--mz-text-dim); margin-block-start: 6px; }

.mz-ava--lg { inline-size: 42px; block-size: 42px; font-size: 1.05rem; }
.mz-ava--img { padding: 0; object-fit: cover; }

/* ---------- category tiles ---------- */
.mz-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 13px;
}
.mz-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
  padding: 17px 17px 15px;
  border-radius: 15px;
  background: var(--mz-surface);
  border: 1px solid var(--mz-border);
  color: var(--mz-text);
  transition: transform .2s cubic-bezier(.3,.8,.4,1), box-shadow .2s ease, border-color .2s ease;
}
/* The khatam lattice again, tinted to the tile's own colour. This is where the
   art earns its place: every section of the forum carries it, not just a strip
   at the very top of the page. */
.mz-tile__art {
  position: absolute; inset-block-start: -22%; inset-inline-end: -18%;
  inline-size: 68%; aspect-ratio: 1;
  background: var(--mz-c, var(--mz-accent));
  -webkit-mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  -webkit-mask-size: 74px 74px; mask-size: 74px 74px;
  opacity: .13;
  transition: opacity .25s ease, transform .35s cubic-bezier(.3,.8,.4,1);
}
.mz-tile:hover {
  transform: translateY(-3px);
  text-decoration: none;
  border-color: color-mix(in srgb, var(--mz-c, var(--mz-accent)) 50%, var(--mz-border));
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--mz-c, var(--mz-accent)) 70%, transparent);
}
.mz-tile:hover .mz-tile__art { opacity: .2; transform: rotate(8deg) scale(1.08); }
.mz-tile__mark {
  inline-size: 36px; block-size: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--mz-c, var(--mz-accent)) 15%, transparent);
  color: color-mix(in srgb, var(--mz-c, var(--mz-accent)) 85%, #000);
  font-family: var(--mz-display); font-weight: 700; font-size: 1.05rem;
  margin-block-end: 7px;
  position: relative;
}
.mz-tile__name { font-family: var(--mz-display); font-weight: 600; font-size: 1.04rem; position: relative; }
.mz-tile__desc {
  font-size: .86rem; color: var(--mz-text-dim); line-height: 1.55; position: relative;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mz-tile__foot {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--mz-text-dim);
  margin-block-start: auto; padding-block-start: 11px; position: relative;
}

/* ---------- sidebar panels ---------- */
.mz-panel {
  position: relative; overflow: hidden;
  background: var(--mz-surface);
  border: 1px solid var(--mz-border);
  border-radius: 15px;
  padding: 17px 18px;
}
.mz-panel__art {
  position: absolute; inset-block-start: -30%; inset-inline-start: -25%;
  inline-size: 85%; aspect-ratio: 1;
  background: var(--mz-accent);
  -webkit-mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  -webkit-mask-size: 80px 80px; mask-size: 80px 80px;
  opacity: .09; pointer-events: none;
}
.mz-panel > * { position: relative; }
.mz-panel__h {
  font-family: var(--mz-display); font-size: 1rem; font-weight: 700;
  margin: 0 0 13px; letter-spacing: -0.01em;
}
.mz-panel__p { font-size: .9rem; color: var(--mz-text-dim); line-height: 1.65; margin: 0 0 11px; }
.mz-panel--quiet { background: linear-gradient(170deg, var(--mz-accent-dim) 0%, var(--mz-surface) 70%); }

.mz-ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mz-rank { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.mz-rank__n {
  inline-size: 19px; font-family: var(--mz-display); font-weight: 700;
  font-size: .82rem; color: var(--mz-text-dim); text-align: center; flex: none;
  font-variant-numeric: tabular-nums;
}
/* The top three carry the gold, which is the only place a rank needs emphasis. */
.mz-rank:nth-child(-n+3) .mz-rank__n { color: var(--mz-gold); }
.mz-rank__who { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; color: var(--mz-text); }
.mz-rank__who:hover { text-decoration: none; }
.mz-rank__who:hover .mz-rank__name { color: var(--mz-accent); }
.mz-rank__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mz-rank__name { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-rank__sub { font-size: .76rem; color: var(--mz-text-dim); }
.mz-rep {
  flex: none; font-size: .78rem; font-weight: 700;
  color: var(--mz-accent); background: var(--mz-accent-dim);
  border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums;
}

/* ---------- ornamental divider ----------
   A band of the tessellation between sections, masked to fade at both ends.
   Structural rather than decorative: it marks where one kind of content stops
   and another begins, which a plain 1px rule was not doing. */
.mz-ornament {
  block-size: 42px;
  margin-block: 30px;
  background: var(--mz-accent);
  -webkit-mask:
    url("/api/plugins_static/mizanforum/img/khatam.svg") center / 42px 42px repeat-x,
    linear-gradient(to left, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask:
    url("/api/plugins_static/mizanforum/img/khatam.svg") center / 42px 42px repeat-x,
    linear-gradient(to left, transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect;
  opacity: .22;
}

.mz-more { font-size: .88rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.mz-more:hover { text-decoration: none; gap: 9px; }
.mz-more span { transition: none; }

/* Cards arrive rather than appearing, once, on load. @starting-style is the
   modern way to animate in without a class toggled by script. */
@supports (transition-behavior: allow-discrete) {
  .mz-post-card, .mz-tile {
    opacity: 1; transition-property: transform, box-shadow, border-color, opacity;
  }
  @starting-style {
    .mz-post-card, .mz-tile { opacity: 0; }
  }
}

@media (max-width: 560px) {
  .mz-post-card { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 15px; }
  .mz-post-card__stat {
    grid-column: 1 / -1; flex-direction: row; gap: 14px;
    border-inline-start: 0; border-block-start: 1px solid var(--mz-border);
    padding-inline-start: 0; padding-block-start: 10px; justify-content: flex-start;
  }
  .mz-count--2 { margin-block-start: 0; }
  .mz-ornament { margin-block: 22px; }
}

/* ---------- notices ----------------------------------------------------
   Were plain tinted rectangles with a border. They carry a mark now, so the
   kind of message registers before the sentence is read. */
.mz-notice, .mz-ok, .mz-error {
  position: relative;
  border-radius: 13px;
  padding: 14px 17px 14px 17px;
  padding-inline-start: 48px;
  margin-block-end: 18px;
  border: 1px solid var(--mz-border);
  background: var(--mz-surface);
  line-height: 1.6;
  box-shadow: 0 1px 2px rgba(20, 16, 10, .04);
}
.mz-notice::before, .mz-ok::before, .mz-error::before {
  content: "";
  position: absolute; inset-block-start: 15px; inset-inline-start: 16px;
  inline-size: 20px; block-size: 20px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.mz-ok {
  background: linear-gradient(170deg, var(--mz-accent-dim), var(--mz-surface) 80%);
  border-color: color-mix(in srgb, var(--mz-accent) 35%, transparent);
  color: color-mix(in srgb, var(--mz-accent) 88%, #000);
}
.mz-ok::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm4.3 6.6-5 6a1 1 0 0 1-1.5.1l-2.5-2.5 1.4-1.4 1.7 1.7 4.3-5.2 1.6 1.3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm4.3 6.6-5 6a1 1 0 0 1-1.5.1l-2.5-2.5 1.4-1.4 1.7 1.7 4.3-5.2 1.6 1.3Z'/%3E%3C/svg%3E");
}
.mz-error {
  background: linear-gradient(170deg, color-mix(in srgb, var(--mz-danger) 10%, var(--mz-surface)), var(--mz-surface) 80%);
  border-color: color-mix(in srgb, var(--mz-danger) 35%, transparent);
  color: color-mix(in srgb, var(--mz-danger) 90%, #000);
}
.mz-error::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm1 13H9v-2h2v2Zm0-3H9V5h2v6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm1 13H9v-2h2v2Zm0-3H9V5h2v6Z'/%3E%3C/svg%3E");
}
.mz-notice {
  background: linear-gradient(170deg, color-mix(in srgb, var(--mz-gold) 13%, var(--mz-surface)), var(--mz-surface) 80%);
  border-color: color-mix(in srgb, var(--mz-gold) 40%, transparent);
  color: color-mix(in srgb, var(--mz-warn) 92%, #000);
}
.mz-notice::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1 1 18h18L10 1Zm1 13H9v-2h2v2Zm0-3H9V7h2v4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1 1 18h18L10 1Zm1 13H9v-2h2v2Zm0-3H9V7h2v4Z'/%3E%3C/svg%3E");
}

/* ---------- pagination -------------------------------------------------- */
.mz-pager { display: flex; align-items: center; justify-content: center; gap: 9px; margin-block-start: 28px; }
.mz-pager a, .mz-pager span {
  min-inline-size: 42px; min-block-size: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; padding-inline: 14px;
  font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid var(--mz-border); background: var(--mz-surface);
  color: var(--mz-text);
  transition: border-color .18s ease, transform .14s ease, box-shadow .18s ease;
}
.mz-pager a:hover {
  text-decoration: none; border-color: var(--mz-accent); color: var(--mz-accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--mz-accent) 70%, transparent);
}
.mz-pager span { color: var(--mz-text-dim); background: transparent; border-color: transparent; }

/* ---------- empty states ------------------------------------------------
   A line of grey text in the middle of nothing. It carries the tessellation
   now, so an empty area still looks like part of the site. */
.mz-empty {
  position: relative; overflow: hidden;
  text-align: center; padding: 54px 20px; color: var(--mz-text-dim);
  border: 1px dashed var(--mz-control);
  border-radius: 15px;
  background: var(--mz-surface);
}
.mz-empty::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--mz-accent);
  -webkit-mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  -webkit-mask-size: 84px 84px; mask-size: 84px 84px;
  opacity: .07; pointer-events: none;
}
.mz-empty > * { position: relative; }

/* ---------- menus, on the popover API ----------------------------------
   A real popover: the browser puts it in the top layer, closes it on Escape
   and on a click outside, and handles focus - none of which a div and a
   click handler get right by themselves. */
[popover].mz-menu {
  margin: 0; inset: auto;
  position: absolute;
  min-inline-size: 200px;
  padding: 7px;
  border: 1px solid var(--mz-border);
  border-radius: 13px;
  background: var(--mz-surface);
  box-shadow: 0 18px 44px -16px rgba(20, 16, 10, .3), 0 2px 8px rgba(20, 16, 10, .08);
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity .16s ease, transform .16s ease, overlay .16s allow-discrete, display .16s allow-discrete;
}
[popover].mz-menu:popover-open { opacity: 1; transform: none; }
@starting-style { [popover].mz-menu:popover-open { opacity: 0; transform: translateY(-6px) scale(.98); } }
.mz-menu a, .mz-menu button {
  display: flex; align-items: center; gap: 9px;
  inline-size: 100%; text-align: start;
  padding: 10px 12px; border-radius: 9px;
  font: inherit; font-weight: 500; color: var(--mz-text);
  background: none; border: 0; cursor: pointer;
}
.mz-menu a:hover, .mz-menu button:hover { background: var(--mz-accent-dim); color: var(--mz-accent); text-decoration: none; }

/* ---------- dialog ------------------------------------------------------ */
dialog.mz-dialog {
  border: 1px solid var(--mz-border);
  border-radius: 18px;
  padding: 24px;
  max-inline-size: min(460px, calc(100vw - 32px));
  background: var(--mz-surface);
  color: var(--mz-text);
  box-shadow: 0 30px 70px -24px rgba(20, 16, 10, .45);
}
dialog.mz-dialog::backdrop {
  background: color-mix(in srgb, var(--mz-ink) 55%, transparent);
  backdrop-filter: blur(3px);
}

/* ---------- search field ------------------------------------------------ */
.mz-searchbox { position: relative; display: flex; }
.mz-searchbox input[type="search"], .mz-searchbox input[type="text"] {
  padding-inline-start: 44px;
}
.mz-searchbox::before {
  content: "";
  position: absolute; inset-inline-start: 15px; inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 18px; block-size: 18px; z-index: 1;
  background: var(--mz-text-dim);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 2a6.5 6.5 0 1 0 4.0 11.6l4 4 1.4-1.4-4-4A6.5 6.5 0 0 0 8.5 2Zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 2a6.5 6.5 0 1 0 4.0 11.6l4 4 1.4-1.4-4-4A6.5 6.5 0 0 0 8.5 2Zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  pointer-events: none;
}
.mz-searchbox:focus-within::before { background: var(--mz-accent); }

/* ======================================================================
   THREAD PAGE
   The heart of a forum, and still the flattest page on the site: every post
   an identical bordered rectangle, the vote arrows a pair of small glyphs.
   ====================================================================== */

.mz-post {
  border-radius: 15px;
  padding: 18px 20px;
  background: linear-gradient(180deg,
    var(--mz-surface) 0%,
    color-mix(in srgb, var(--mz-surface-2) 38%, var(--mz-surface)) 100%);
  box-shadow: 0 1px 2px rgba(20, 16, 10, .04), 0 10px 26px -24px rgba(20, 16, 10, .3);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* The opening post should not look like the fourteenth reply. It carries the
   lattice and a gold edge, so the question is always findable on the page. */
.mz-post--op {
  position: relative; overflow: hidden;
  border-color: color-mix(in srgb, var(--mz-accent) 32%, var(--mz-border));
}
.mz-post--op::after {
  content: "";
  /* A corner accent, not a field: at 46% it read as a large empty panel beside
     a short question, which drew the eye to nothing. */
  position: absolute; inset-block-start: -34%; inset-inline-end: -8%;
  inline-size: 26%; aspect-ratio: 1; z-index: 0;
  background: var(--mz-accent);
  -webkit-mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  -webkit-mask-size: 64px 64px; mask-size: 64px 64px;
  opacity: .10; pointer-events: none;
}
.mz-post--op > * { position: relative; z-index: 1; }

/* The accepted answer announced itself with a 1px border change. */
.mz-post.is-best {
  border-color: var(--mz-accent);
  box-shadow: 0 0 0 1px var(--mz-accent) inset,
              0 12px 30px -18px color-mix(in srgb, var(--mz-accent) 75%, transparent);
  background: linear-gradient(180deg, var(--mz-accent-dim) 0%, var(--mz-surface) 32%);
}

/* ---------- the vote column ---------- */

/* The agreement vote is a second, separate axis - it needs a visible break from
   the quality vote above it, or the column reads as one confusing stack. */

/* ---------- the body copy ---------- */
.mz-prose { overflow-wrap: anywhere; line-height: 1.85; }
.mz-prose p { margin-block: 0 .9em; }
.mz-prose h2, .mz-prose h3 { margin-block: 1.2em .5em; }
.mz-prose ul, .mz-prose ol { padding-inline-start: 1.4em; margin-block: 0 .9em; }
.mz-prose li { margin-block-end: .35em; }
.mz-prose a { text-decoration: underline; text-underline-offset: 3px; }
/* A quotation was an indented paragraph with a grey bar. It reads as quoted
   speech now, with the mark that Arabic typography actually uses. */
.mz-prose blockquote {
  position: relative;
  margin: 0 0 1em; padding: 12px 18px;
  border-inline-start: 3px solid var(--mz-accent);
  border-radius: 0 11px 11px 0;
  background: color-mix(in srgb, var(--mz-accent-dim) 55%, transparent);
  color: var(--mz-text);
}
.mz-prose code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em;
  background: var(--mz-surface-2); border: 1px solid var(--mz-border);
  border-radius: 6px; padding: 1px 6px;
}

/* ---------- the reply toolbar ---------- */
.mz-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-block-start: 13px; }
.mz-actions .mz-linkbtn, .mz-actions a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 5px 12px;
  border-radius: 9px; border: 1px solid transparent;
  font-size: .86rem; font-weight: 600;
  color: var(--mz-text-dim); text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.mz-actions .mz-linkbtn:hover, .mz-actions a:hover {
  background: var(--mz-surface-2); color: var(--mz-accent);
  border-color: var(--mz-border); text-decoration: none;
}
.mz-actions .mz-linkbtn--danger:hover { color: var(--mz-danger); border-color: color-mix(in srgb, var(--mz-danger) 40%, transparent); }

/* ---------- the editor toolbar ---------- */
.mz-editor__bar {
  display: flex; gap: 5px; flex-wrap: wrap;
  padding: 8px; border-radius: 11px 11px 0 0;
  background: var(--mz-surface-2);
  border: 1px solid var(--mz-control); border-block-end: 0;
}
.mz-editor__bar button {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  min-height: 34px; padding: 4px 12px;
  border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--mz-text);
  transition: background .16s ease, border-color .16s ease;
}
.mz-editor__bar button:hover { background: var(--mz-surface); border-color: var(--mz-border); }
.mz-editor + textarea, .mz-editor__bar + textarea { border-start-start-radius: 0; border-start-end-radius: 0; }

/* ======================================================================
   ICONS
   The action row under a post was a line of bare words - تعديل, إبلاغ,
   اقتباس - which is what a forum looked like before anyone drew an icon.
   Every icon here is a mask filled with currentColor, so it inherits the
   colour of whatever it sits in and costs no extra request.
   ====================================================================== */
.mz-i { display: inline-flex; align-items: center; gap: 7px; }
.mz-i::before {
  content: ""; flex: none;
  inline-size: 16px; block-size: 16px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.mz-i--lg::before { inline-size: 19px; block-size: 19px; }

.mz-i--reply { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E"); }
.mz-i--quote { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5H4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v1a2 2 0 0 1-2 2H3v2h1a4 4 0 0 0 4-4V6a1 1 0 0 0-1-1Zm9 0h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h2v1a2 2 0 0 1-2 2h-1v2h1a4 4 0 0 0 4-4V6a1 1 0 0 0-1-1Z'/%3E%3C/svg%3E"); }
.mz-i--edit { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13.6 2.3a1 1 0 0 1 1.4 0l2.7 2.7a1 1 0 0 1 0 1.4L7.9 16.2 3 17.5l1.3-4.9L13.6 2.3Z'/%3E%3C/svg%3E"); }
.mz-i--flag { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 2v16h2v-6h8l-1.6-3L14 6H6V2H4Z'/%3E%3C/svg%3E"); }
.mz-i--save { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2h10a1 1 0 0 1 1 1v15l-6-3.4L4 18V3a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E"); }
.mz-i--bell { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2a5 5 0 0 0-5 5v3l-2 3v1h14v-1l-2-3V7a5 5 0 0 0-5-5Zm0 17a2.5 2.5 0 0 0 2.4-2H7.6A2.5 2.5 0 0 0 10 19Z'/%3E%3C/svg%3E"); }
.mz-i--best { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1 12.5 6.5 18.5 7.4 14.2 11.6 15.3 17.5 10 14.7 4.7 17.5 5.8 11.6 1.5 7.4 7.5 6.5 10 1Z'/%3E%3C/svg%3E"); }
.mz-i--trash { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 2h6v2h4v2H3V4h4V2Zm-2 6h10l-1 11H6L5 8Z'/%3E%3C/svg%3E"); }
.mz-i--link { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 11.5a3.5 3.5 0 0 0 5 0l3-3a3.54 3.54 0 0 0-5-5l-1.6 1.6 1.4 1.4L13 5a1.54 1.54 0 1 1 2.2 2.2l-3 3a1.5 1.5 0 0 1-2.1 0l-1.4 1.4Zm3-3a3.5 3.5 0 0 0-5 0l-3 3a3.54 3.54 0 0 0 5 5l1.6-1.6-1.4-1.4L7 15a1.54 1.54 0 1 1-2.2-2.2l3-3a1.5 1.5 0 0 1 2.1 0l1.4-1.4Z'/%3E%3C/svg%3E"); }
.mz-i--shield { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1 3 4v6c0 4.4 3 7.6 7 9 4-1.4 7-4.6 7-9V4l-7-3Z'/%3E%3C/svg%3E"); }
.mz-i--user { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-7 2.2-7 5v1h14v-1c0-2.8-3-5-7-5Z'/%3E%3C/svg%3E"); }
.mz-i--plus { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 3h2v6h6v2h-6v6H9v-6H3V9h6V3Z'/%3E%3C/svg%3E"); }
.mz-i--lock { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8V6a4 4 0 1 1 8 0v2h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1Zm2 0h4V6a2 2 0 1 0-4 0v2Z'/%3E%3C/svg%3E"); }
.mz-i--pin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12 2 9 5v4L5 12v1h4.5v5l.5 2 .5-2v-5H15v-1l-4-3V5l1-3Z'/%3E%3C/svg%3E"); }

/* ---------- the action row, as pills ----------------------------------
   Reddit-shaped: a row of pills with an icon and a label, each one an
   obvious target, rather than underlined words running into each other. */
.mz-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-block-start: 14px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--mz-border);
}
.mz-actions .mz-linkbtn, .mz-actions > a, .mz-actions form > button {
  background: transparent;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--mz-text-dim); text-decoration: none; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.mz-actions .mz-linkbtn:hover, .mz-actions > a:hover, .mz-actions form > button:hover {
  background: var(--mz-surface-2);
  color: var(--mz-accent);
  border-color: var(--mz-border);
  text-decoration: none;
}
.mz-actions .mz-linkbtn--danger:hover {
  color: var(--mz-danger);
  background: color-mix(in srgb, var(--mz-danger) 9%, transparent);
  border-color: color-mix(in srgb, var(--mz-danger) 35%, transparent);
}

/* The follow / save tools, matching the action pills they sit beside. */
.mz-tool {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--mz-surface); color: var(--mz-text);
  border: 1px solid var(--mz-border); border-radius: 999px;
  padding: 7px 15px; font: inherit; font-size: .87rem; font-weight: 600;
  cursor: pointer; min-height: 38px;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.mz-tool:hover { border-color: var(--mz-accent); color: var(--mz-accent); background: var(--mz-accent-dim); text-decoration: none; }
.mz-tool.is-on {
  background: var(--mz-accent); border-color: var(--mz-accent); color: #fff;
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--mz-accent) 90%, transparent);
}
.mz-tool.is-on:hover { background: color-mix(in srgb, var(--mz-accent) 88%, #000); color: #fff; }
/* A select dropped into the action row should not tower over the pills. */
.mz-actions select, .mz-reason {
  min-height: 34px; padding-block: 4px; font-size: .84rem;
  border-radius: 999px; width: auto; min-width: 150px;
}

/* ======================================================================
   THREAD LISTS — browse, category, tag, saved, search, profile
   All six render the same .mz-thread row, so bringing it up to the standard
   the homepage cards set lifts every one of them at once.
   ====================================================================== */
.mz-threads { display: flex; flex-direction: column; gap: 11px; }

.mz-thread {
  position: relative;
  gap: 15px; padding: 16px 18px;
  align-items: flex-start; flex-wrap: nowrap;
  border-radius: 15px;
  border: 1px solid var(--mz-border);
  background: linear-gradient(180deg,
    var(--mz-surface) 0%,
    color-mix(in srgb, var(--mz-surface-2) 45%, var(--mz-surface)) 100%);
  box-shadow: 0 1px 2px rgba(20, 16, 10, .04);
  transition: transform .2s cubic-bezier(.3,.8,.4,1), box-shadow .2s ease, border-color .2s ease;
}
.mz-thread:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mz-accent) 45%, var(--mz-border));
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--mz-accent) 55%, transparent),
              0 2px 6px rgba(20, 16, 10, .05);
}
.mz-thread:hover .mz-thread__title { color: var(--mz-accent); }

/* A pinned thread had a 4px bar grafted onto its start edge. It carries the
   gold instead, which is the colour this design already uses for "singled out". */
.mz-thread.is-pinned {
  border-inline-start: 0;
  border-color: color-mix(in srgb, var(--mz-gold) 48%, var(--mz-border));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mz-gold) 9%, var(--mz-surface)) 0%,
    var(--mz-surface) 60%);
}

/* The score block reads as a vote tally rather than a grey chip. */
.mz-thread__score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: none; gap: 1px;
  min-inline-size: 52px; min-block-size: 50px; padding: 6px 8px;
  background: color-mix(in srgb, var(--mz-surface-2) 75%, transparent);
  border: 1px solid var(--mz-border);
  border-radius: 12px;
  font-family: var(--mz-display); font-weight: 700; font-size: 1.1rem;
  color: var(--mz-text); font-variant-numeric: tabular-nums;
}
.mz-thread.is-pinned .mz-thread__score {
  background: color-mix(in srgb, var(--mz-gold) 18%, transparent);
  border-color: color-mix(in srgb, var(--mz-gold) 40%, transparent);
  color: color-mix(in srgb, var(--mz-warn) 95%, #000);
}

.mz-thread__body { flex: 1 1 0; min-width: 0; }
.mz-thread__title {
  display: block;
  font-family: var(--mz-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.6vw, 1.16rem); line-height: 1.45;
  letter-spacing: -0.015em; color: var(--mz-text);
  transition: color .16s ease;
}
.mz-thread__meta { margin-block-start: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mz-thread__meta a { color: var(--mz-text-dim); font-weight: 600; }
.mz-thread__meta a:hover { color: var(--mz-accent); }
/* The dot separators were literal "·" characters in the markup. */
.mz-sep { color: var(--mz-control); opacity: .55; }

.mz-thread__when {
  flex: none; text-align: center; align-self: center;
  display: flex; flex-direction: column; gap: 1px;
  padding-inline-start: 15px;
  border-inline-start: 1px solid var(--mz-border);
  min-inline-size: 92px;
}
.mz-thread__when b { font-weight: 600; color: var(--mz-text); font-size: .86rem; }

@media (max-width: 620px) {
  .mz-thread { flex-wrap: wrap; gap: 12px; padding: 14px 15px; }
  .mz-thread__when {
    order: 3; flex-basis: 100%;
    flex-direction: row; gap: 6px; text-align: start;
    border-inline-start: 0; padding-inline-start: 0;
    border-block-start: 1px solid var(--mz-border); padding-block-start: 9px;
  }
}

/* ---------- notifications ---------- */
.mz-notes { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.mz-note {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 13px;
  border: 1px solid var(--mz-border);
  background: var(--mz-surface);
  transition: border-color .18s ease, background .18s ease;
}
.mz-note:hover { border-color: var(--mz-accent); }
/* Unread carries a dot and a tint, not just bold text. */
.mz-note.is-unread {
  background: linear-gradient(170deg, var(--mz-accent-dim), var(--mz-surface) 70%);
  border-color: color-mix(in srgb, var(--mz-accent) 35%, transparent);
}
.mz-note.is-unread::before {
  content: ""; flex: none; margin-block-start: 7px;
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--mz-accent);
}

/* ---------- profile header ---------- */
.mz-profile {
  position: relative; overflow: hidden;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding: 22px 24px; margin-block-end: 24px;
  border-radius: 16px;
  border: 1px solid var(--mz-border);
  background: linear-gradient(135deg, var(--mz-ink) 0%, var(--mz-ink-2) 100%);
  color: var(--mz-on-ink);
}
.mz-profile::after {
  content: ""; position: absolute; inset: 0;
  background: var(--mz-gold);
  -webkit-mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  mask-image: url("/api/plugins_static/mizanforum/img/khatam.svg");
  -webkit-mask-size: 88px 88px; mask-size: 88px 88px;
  opacity: .12; pointer-events: none;
}
.mz-profile > * { position: relative; z-index: 1; }
.mz-profile h1 { color: var(--mz-on-ink); margin: 0 0 4px; }
.mz-profile .mz-muted, .mz-profile .mz-small { color: var(--mz-on-ink-dim); }
.mz-profile .mz-avatar {
  border: 2px solid color-mix(in srgb, var(--mz-gold) 60%, transparent);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.6);
}

/* ---------- search filters ---------- */
.mz-search__filters {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  margin-block-start: 12px;
}
.mz-search__filters select, .mz-search__filters input {
  min-height: 40px; border-radius: 999px; padding-block: 5px;
}

/* A pill-shaped select is too short for the chevron chip, which ends up a grey
   smudge beside the text. Small selects get the arrow alone. */
.mz-search__filters select,
.mz-actions select,
.mz-reason,
.mz-form select.mz-sm {
  /* Without this the platform draws its own arrow too and the control shows
     TWO chevrons - these selects sit outside .mz-form, which is where the
     reset used to live. */
  appearance: none; -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2315130f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 11px 7px;
  padding-inline-end: 34px;
}
.mz-search__filters select:hover, .mz-actions select:hover, .mz-reason:hover {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230b5f4f' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* A byline with a face on it. Avatars existed on the profile page only, so a
   discussion was a wall of names; Member.avatarId is a plain id rather than a
   relation, so carrying it costs one plucked field and no image load. */
.mz-byline { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; font-weight: 600; color: var(--mz-text); }
.mz-byline:hover { color: var(--mz-accent); text-decoration: none; }
.mz-ava--sm { inline-size: 26px; block-size: 26px; font-size: .78rem; }
.mz-ava--img { padding: 0; object-fit: cover; background: var(--mz-surface-2); }

/* ---------- account ----------------------------------------------------
   Was one narrow column of five identical cards, each claiming a full row
   however little it held. A grid lets the short ones share a line, and the
   section icons let the page be scanned rather than read top to bottom. */
.mz-account { max-width: 940px; margin-inline: auto; }
.mz-account > h1 { grid-column: 1 / -1; }
.mz-account .mz-form {
  display: grid; gap: 9px;
  align-content: start;
  margin-block-end: 0;
}
@media (min-width: 760px) {
  .mz-account {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }
  /* The profile form carries the most fields, so it takes the full width. */
  .mz-account > form:first-of-type { grid-column: 1 / -1; }
}
.mz-account h2 {
  font-size: 1.05rem; margin-block-end: 10px;
  padding-block-end: 10px; border-block-end: 1px solid var(--mz-border);
}
.mz-account h2::before { color: var(--mz-accent); }

.mz-fbtools { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 14px; }

/* ---------- guest replies ----------------------------------------------
   A guest post must never be mistaken for a member's. It carries a neutral
   avatar and a label rather than borrowing the member styling. */
.mz-ava--guest { background: var(--mz-surface-2); color: var(--mz-text-dim); }
.mz-guesttag {
  display: inline-block; font-size: .7rem; font-weight: 700;
  background: var(--mz-surface-2); color: var(--mz-text-dim);
  border: 1px solid var(--mz-border);
  border-radius: 999px; padding: 1px 8px; vertical-align: middle;
}
.mz-guestbox { margin-block-start: 18px; }
.mz-guestbox h2 { font-size: 1.05rem; margin-block-end: 6px; }
.mz-guestbox h2::before { color: var(--mz-accent); }

.mz-optform { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.mz-optform .mz-check { align-items: flex-start; }
.mz-optform .mz-check input { margin-block-start: 3px; }
.mz-optform button { align-self: flex-start; margin-block-start: 4px; }

.mz-guestwelcome {
  background: linear-gradient(170deg, var(--mz-accent-dim), var(--mz-surface) 85%);
  border: 1px solid color-mix(in srgb, var(--mz-accent) 28%, transparent);
  border-radius: 12px; padding: 12px 15px;
}
.mz-guestwelcome p { margin: 0 0 6px; font-size: .92rem; }
.mz-guestwelcome p:last-child { margin-block-end: 0; }
.mz-guestwelcome__cta { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }

.mz-mrow--guest { grid-template-columns: minmax(0,2fr) auto auto minmax(0,1.4fr); }
@media (max-width: 760px) { .mz-mrow--guest { grid-template-columns: 1fr auto; } }

/* ======================================================================
   THE BALLOT — two named votes, not two unexplained arrow pairs
   The axes used to be a bare ▲/▼ pair and an أوافق/لا pair, distinguished
   only by title attributes: invisible on touch, and requiring a deliberate
   hover on desktop. The product's whole premise is that these are DIFFERENT
   QUESTIONS, so the interface names them and separates them.
   Moved beneath the post as a row, which also returns the horizontal space
   the vertical rail was taking from the text on a narrow screen.
   ====================================================================== */
.mz-ballot {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-block-start: 14px;
}
.mz-ballot__group {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--mz-border);
  border-radius: 999px;
  background: var(--mz-surface);
}
.mz-ballot__label {
  font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  padding-inline-end: 4px; white-space: nowrap;
}
/* The two groups are tinted differently on purpose: quality carries the
   accent because it is the one that feeds reputation; agreement is gold and
   deliberately quieter, because it changes nothing but the tally. */
.mz-ballot__group--q { border-color: color-mix(in srgb, var(--mz-accent) 30%, var(--mz-border)); }
.mz-ballot__group--q .mz-ballot__label { color: var(--mz-accent); }
.mz-ballot__group--a { border-color: color-mix(in srgb, var(--mz-gold) 42%, var(--mz-border)); }
.mz-ballot__group--a .mz-ballot__label { color: var(--mz-warn); }

.mz-ballot__btn {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--mz-text-dim);
  padding: 4px 11px; min-height: 32px; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.mz-ballot__group--q .mz-ballot__btn:hover {
  background: var(--mz-accent-dim); color: var(--mz-accent);
  border-color: color-mix(in srgb, var(--mz-accent) 35%, transparent);
}
.mz-ballot__group--q .mz-ballot__btn.is-on {
  background: var(--mz-accent); color: #fff; border-color: var(--mz-accent);
}
.mz-ballot__group--a .mz-ballot__btn:hover {
  background: color-mix(in srgb, var(--mz-gold) 20%, transparent);
  color: var(--mz-warn);
  border-color: color-mix(in srgb, var(--mz-gold) 45%, transparent);
}
.mz-ballot__group--a .mz-ballot__btn.is-on {
  background: var(--mz-gold); color: #3a2c08;
  border-color: color-mix(in srgb, var(--mz-gold) 70%, #000);
}
.mz-ballot__score {
  font-family: var(--mz-display); font-weight: 700; font-size: .95rem;
  min-inline-size: 22px; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--mz-text);
}

/* Said once, above the replies, where people are about to vote - rather than
   in a sidebar on a different page, which is where it used to live. */
.mz-ballothelp {
  display: flex; flex-direction: column; gap: 3px;
  margin-block: 26px 14px; padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mz-accent) 26%, transparent);
  background: linear-gradient(170deg, var(--mz-accent-dim), var(--mz-surface) 85%);
  font-size: .89rem; line-height: 1.6;
}
.mz-ballothelp strong { font-family: var(--mz-display); }
.mz-ballothelp b { color: var(--mz-accent); }
.mz-ballothelp span:nth-of-type(2) b { color: var(--mz-warn); }
.mz-ballothelp__pt { color: var(--mz-text-dim); margin-block-start: 4px; }

@media (max-width: 560px) {
  .mz-ballot { gap: 7px; }
  .mz-ballot__group { padding-inline-start: 8px; }
  .mz-ballot__btn { padding-inline: 9px; min-height: 36px; }
}

/* Anonymous readers still see the tally - the old rail showed it to everyone,
   and hiding it would remove the only visible signal of how a post was received. */
.mz-ballot__btn--join { color: var(--mz-accent); text-decoration: none; }
.mz-ballot__group--a .mz-ballot__btn--join { color: var(--mz-warn); }
.mz-ballot__btn--join:hover { text-decoration: underline; }

/* ---------- PWA ----------------------------------------------------------
   One banner component serves both the install offer and the update notice.
   It sits at the bottom: on a phone that is where the thumb is, and it keeps
   the top of the page clear for reading. */
.mz-pwa {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  max-width: 560px; margin-inline: auto;
  background: var(--mz-surface);
  border: 1px solid var(--mz-border);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .14);
  padding: 11px 13px;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.mz-pwa.is-in { transform: translateY(0); opacity: 1; }
.mz-pwa__t { flex: 1 1 auto; min-width: 0; font-size: .93rem; line-height: 1.5; }
.mz-pwa__go {
  flex: none; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--mz-accent); color: #fff; border: 0;
  border-radius: 9px; padding: 9px 17px; min-height: 42px;
}
.mz-pwa__go:hover { filter: brightness(1.08); }
.mz-pwa__x {
  flex: none; font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--mz-text-dim);
  padding: 6px 9px; border-radius: 8px; min-height: 42px; min-width: 38px;
}
.mz-pwa__x:hover { color: var(--mz-text); background: var(--mz-surface-2); }

/* Connection notice. Stated plainly rather than as an error: a cached page is
   a working page, and the reader should know which one they are looking at. */
.mz-offline {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  background: var(--mz-warn); color: #fff;
  text-align: center; font-size: .88rem; font-weight: 600;
  padding: 9px 14px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
}

/* Install button in the header: hidden until the browser says the app is
   actually installable, so it never advertises something that cannot happen. */
#mzInstall { display: none; }
:root[data-installable="1"] #mzInstall { display: inline-flex; }
:root[data-standalone="1"] #mzInstall { display: none !important; }

/* Installed window: no browser chrome to borrow breathing room from, so the
   header takes the status-bar inset itself. */
:root[data-standalone="1"] .mz-header { padding-block-start: calc(10px + env(safe-area-inset-top, 0px)); }

/* The offline page. */
.mz-offpage { text-align: center; padding-block: 56px 40px; max-width: 460px; margin-inline: auto; }
.mz-offpage__mark { color: var(--mz-accent); opacity: .5; margin-block-end: 14px; }
.mz-offpage h1 { font-size: 1.5rem; margin-block-end: 8px; }
.mz-offpage__lead { color: var(--mz-text-dim); margin-block-end: 22px; }

@media (max-width: 460px) {
  .mz-pwa { flex-wrap: wrap; }
  .mz-pwa__t { flex-basis: 100%; }
}

/* Touch targets. Keyed to the POINTER, not the viewport: a tablet is wide and
   still finger-driven, so a width query aims at the wrong thing. Voting is the
   most-used control on a forum and was 38x32 at every size - above the WCAG 2.2
   minimum of 24x24, below the 44x44 that is actually comfortable. */
@media (pointer: coarse) {
  .mz-vote__btn { min-width: 44px; min-height: 44px; }
  .mz-tool { min-height: 44px; padding-block: 10px; }
  .mz-tabs a { padding-block: 8px; display: inline-block; }
  .mz-btn { padding-block: 12px; }
  .mz-btn--sm { padding-block: 9px; }
}

/* Motion is decorative here - a hover lift on cards and thread rows. Anyone who
   has asked their system to reduce motion should not get it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}