/* ============================================================================
   Mijhar - the BOST strategy diagnostic. Full-screen modal app.
   Spec: majhir-spec.md (Phase A). Self-contained, scoped under #majhir.
   Tokens reused from styles.css (--ink, --paper, --gold, --muted, --line).
   ========================================================================== */

#majhir[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper, #f6f3ea);
  color: var(--ink, #111711);
  overflow: hidden;
  /* sit above the site chrome */
  z-index: 1000;
}
#majhir::backdrop { background: rgba(8, 11, 8, 0.62); backdrop-filter: blur(3px); }
html.majhir-open, body.majhir-open { overflow: hidden; }

#majhir, #majhir * { box-sizing: border-box; }

.majhir-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100dvh;
  font-family: Inter, system-ui, sans-serif;
  opacity: 0;
  transform: translateY(8px);
  animation: majhir-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes majhir-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .majhir-shell { animation: none; opacity: 1; transform: none; }
}

/* ---- header ---- */
.majhir-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem clamp(1.1rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--line, rgba(17, 23, 17, 0.14));
}
.majhir-brand { display: flex; align-items: baseline; gap: 0.6rem; }
.majhir-wordmark {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.majhir-tagline {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted, rgba(17, 23, 17, 0.6));
}
.majhir-close {
  appearance: none;
  border: 1px solid var(--line, rgba(17, 23, 17, 0.16));
  background: transparent;
  color: var(--ink, #111711);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.majhir-close:hover { background: rgba(17, 23, 17, 0.06); border-color: var(--gold, #9a7b2f); }

/* ---- body: two panes ---- */
.majhir-body { display: grid; grid-template-columns: 1fr; min-height: 0; }
@media (min-width: 900px) {
  .majhir-body { grid-template-columns: 1.15fr 0.85fr; }
}

.majhir-stage {
  min-height: 0;
  overflow-y: auto;
  padding: clamp(1.4rem, 5vw, 4rem) clamp(1.2rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.majhir-stage-inner { width: 100%; max-width: 36rem; margin: 0 auto; }

/* progress: quiet, not a survey bar */
.majhir-progress {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--muted, rgba(17, 23, 17, 0.55));
  margin-bottom: 1.6rem;
}
.majhir-progress b { color: var(--gold, #9a7b2f); font-weight: 600; }

.majhir-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold, #9a7b2f);
  margin: 0 0 0.7rem;
}
.majhir-q {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.55rem, 4.2vw, 2.4rem);
  line-height: 1.12;
  font-weight: 540;
  margin: 0 0 0.7rem;
}
.majhir-help { font-size: 0.98rem; color: var(--muted, rgba(17, 23, 17, 0.62)); margin: 0 0 1.5rem; }

.majhir-input, .majhir-textarea {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink, #111711);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line, rgba(17, 23, 17, 0.18));
  border-radius: 0.7rem;
  padding: 0.9rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.majhir-textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
.majhir-input:focus, .majhir-textarea:focus {
  outline: none;
  border-color: var(--gold, #9a7b2f);
  box-shadow: 0 0 0 3px rgba(154, 123, 47, 0.16);
}

/* option cards (door + chips) */
.majhir-options { display: grid; gap: 0.7rem; }
.majhir-option {
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line, rgba(17, 23, 17, 0.18));
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.8rem;
  padding: 1rem 1.1rem;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.majhir-option:hover { border-color: var(--gold, #9a7b2f); transform: translateY(-1px); }
.majhir-option.is-on { border-color: var(--gold, #9a7b2f); background: rgba(154, 123, 47, 0.08); }
.majhir-option-title { display: block; font-weight: 600; font-size: 1.02rem; }
.majhir-option-sub { display: block; color: var(--muted, rgba(17, 23, 17, 0.6)); font-size: 0.9rem; margin-top: 0.15rem; }

.majhir-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.majhir-chip {
  font: inherit; font-size: 0.95rem; cursor: pointer;
  border: 1px solid var(--line, rgba(17, 23, 17, 0.2));
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2rem; padding: 0.5rem 1rem;
  transition: border-color 0.18s, background 0.18s;
}
.majhir-chip:hover { border-color: var(--gold, #9a7b2f); }
.majhir-chip.is-on { border-color: var(--gold, #9a7b2f); background: rgba(154, 123, 47, 0.1); }

/* nav */
.majhir-nav { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.8rem; }
.majhir-btn {
  font: inherit; cursor: pointer; border-radius: 0.65rem;
  padding: 0.8rem 1.5rem; font-weight: 600; font-size: 1rem;
  border: 1px solid transparent; transition: opacity 0.2s, transform 0.15s;
}
.majhir-btn-primary { background: var(--ink, #111711); color: var(--paper, #f6f3ea); }
.majhir-btn-primary:hover { transform: translateY(-1px); }
.majhir-btn-primary[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.majhir-btn-ghost { background: transparent; color: var(--muted, rgba(17, 23, 17, 0.7)); border-color: transparent; padding-left: 0.3rem; }
.majhir-btn-ghost:hover { color: var(--ink, #111711); }
.majhir-skip { margin-left: auto; font-size: 0.85rem; color: var(--muted, rgba(17, 23, 17, 0.55)); }

/* ---- live Bayyinah panel (dark) ---- */
.majhir-aside {
  background: var(--ink, #111711);
  color: var(--paper, #f2eee3);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
@media (max-width: 899px) {
  .majhir-aside { display: none; }
  .majhir-aside.is-peek { display: block; }
}
.majhir-aside-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold, #c9a44e); margin-bottom: 1.1rem;
}
.majhir-doc-title { font-family: Fraunces, serif; font-size: 1.5rem; margin: 0 0 1.3rem; font-weight: 560; }
.majhir-slot { padding: 0.75rem 0; border-top: 1px solid rgba(242, 238, 227, 0.13); }
.majhir-slot:first-of-type { border-top: 0; }
.majhir-slot-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(242, 238, 227, 0.5); margin-bottom: 0.3rem;
}
.majhir-slot-val { font-size: 0.95rem; line-height: 1.5; color: rgba(242, 238, 227, 0.92); }
.majhir-slot-val.is-empty { color: rgba(242, 238, 227, 0.32); font-style: italic; }

/* ---- diagnosis + bayyina ---- */
.majhir-report-seal { display: flex; align-items: center; gap: 0.65rem; margin: 0 0 0.85rem; }
.majhir-report-seal img { width: 34px; height: 34px; display: block; flex: none; }
.majhir-report-seal-label { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold, #9a7b2f); }
.majhir-report-frame { font-size: 0.82rem; line-height: 1.55; color: var(--muted, rgba(17,23,17,.62)); margin: 0 0 1.1rem; max-width: 46ch; }
.majhir-diagnosis-head { font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold, #9a7b2f); margin-bottom: 0.8rem; }
.majhir-diagnosis-line { font-family: Fraunces, serif; font-size: clamp(1.5rem, 4vw, 2.15rem); line-height: 1.16; font-weight: 540; margin: 0 0 1.4rem; }
.majhir-section { margin: 0 0 1.25rem; }
.majhir-section h4 { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted, rgba(17,23,17,.6)); margin: 0 0 0.35rem; }
.majhir-section p { margin: 0; font-size: 1rem; line-height: 1.55; }
.majhir-list { margin: 0.15rem 0 0; padding-inline-start: 1.1rem; }
.majhir-list li { font-size: 0.98rem; line-height: 1.5; margin-bottom: 0.3rem; }
.majhir-lens { margin: 0 0 0.55rem; font-size: 0.98rem; line-height: 1.55; }
.majhir-lens strong { color: var(--gold, #9a7b2f); }

/* email gate */
.majhir-gate { margin-top: 1.6rem; padding: 1.3rem; border: 1px solid var(--line, rgba(17,23,17,.18)); border-radius: 0.9rem; background: rgba(154, 123, 47, 0.06); }
.majhir-gate-locked { position: relative; }
.majhir-gate-locked .majhir-locked-body { filter: blur(6px); opacity: 0.5; pointer-events: none; user-select: none; }

.majhir-note { font-size: 0.82rem; color: var(--muted, rgba(17,23,17,.55)); margin-top: 0.7rem; }
.majhir-err { color: #9a2f2f; font-size: 0.85rem; margin-top: 0.5rem; min-height: 1rem; }

/* welcome */
.majhir-welcome { text-align: left; max-width: 34rem; }
.majhir-welcome .majhir-q { font-size: clamp(2rem, 6vw, 3.2rem); }
.majhir-welcome-lede { font-size: 1.12rem; line-height: 1.55; color: var(--muted, rgba(17,23,17,.7)); margin: 0 0 2rem; }
.majhir-welcome-meta { display: flex; gap: 1.6rem; margin-top: 2.2rem; flex-wrap: wrap; }
.majhir-welcome-meta span { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--muted, rgba(17,23,17,.55)); }

/* ============================================================================
   Sovereign Dark (the modal is always dark + on-brand, theme-independent)
   ========================================================================== */
#majhir[open] { background: #0c1411; color: #f2eee3; }
.majhir-shell { color: #f2eee3; }

/* khatam texture on both panes */
.majhir-stage, .majhir-aside { position: relative; }
.majhir-stage::before, .majhir-aside::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg fill='none' stroke='%231cba80' stroke-width='1'%3E%3Crect x='34' y='34' width='60' height='60'/%3E%3Cpolygon points='64,20 108,64 64,108 20,64'/%3E%3Ccircle cx='64' cy='64' r='6'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.05;
}
.majhir-stage-inner, .majhir-aside > * { position: relative; z-index: 1; }

.majhir-head { border-bottom-color: rgba(242, 238, 227, 0.10); }
.majhir-tagline { color: rgba(242, 238, 227, 0.5); }
.majhir-close { color: #f2eee3; border-color: rgba(242, 238, 227, 0.2); }
.majhir-close:hover { background: rgba(242, 238, 227, 0.08); border-color: #1cba80; }

.majhir-eyebrow, .majhir-diagnosis-head { color: #1cba80; }
.majhir-help, .majhir-welcome-lede { color: rgba(242, 238, 227, 0.62); }
.majhir-section h4 { color: rgba(242, 238, 227, 0.5); }

.majhir-input, .majhir-textarea {
  background: rgba(242, 238, 227, 0.05); color: #f2eee3; border-color: rgba(242, 238, 227, 0.16);
}
.majhir-input::placeholder, .majhir-textarea::placeholder { color: rgba(242, 238, 227, 0.4); }
.majhir-input:focus, .majhir-textarea:focus { border-color: #1cba80; box-shadow: 0 0 0 3px rgba(28, 186, 128, 0.18); }

.majhir-option, .majhir-chip { background: rgba(242, 238, 227, 0.05); border-color: rgba(242, 238, 227, 0.14); color: #f2eee3; }
.majhir-option:hover, .majhir-chip:hover { border-color: #1cba80; }
.majhir-option.is-on, .majhir-chip.is-on { border-color: #1cba80; background: rgba(28, 186, 128, 0.12); }
.majhir-option-sub { color: rgba(242, 238, 227, 0.6); }

.majhir-btn-primary { background: #1cba80; color: #06120c; }
.majhir-btn-primary:hover { background: #16a374; }
.majhir-btn-primary[disabled] { background: rgba(242, 238, 227, 0.16); color: rgba(242, 238, 227, 0.45); }
.majhir-btn-ghost { color: rgba(242, 238, 227, 0.7); }
.majhir-btn-ghost:hover { color: #f2eee3; }

/* Bayyinah pane: a distinct dark panel with a green edge, not flat black */
.majhir-aside {
  background: linear-gradient(180deg, #0a130f 0%, #081008 100%);
  color: #f2eee3;
  border-inline-start: 1px solid rgba(28, 186, 128, 0.22);
}
.majhir-aside::before { opacity: 0.07; }
.majhir-gate { background: rgba(28, 186, 128, 0.06); border-color: rgba(242, 238, 227, 0.14); }
.majhir-note { color: rgba(242, 238, 227, 0.5); }

/* BOST branding in the modal header */
.majhir-logo { width: 26px; height: 26px; display: block; }
.majhir-brand-name { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.06em; }
.majhir-brand-div { width: 1px; height: 18px; background: rgba(242, 238, 227, 0.22); margin: 0 0.2rem; }
.majhir-brand { gap: 0.55rem; align-items: center; }
.majhir-wordmark-ar { font-family: "Noto Kufi Arabic", "Noto Naskh Arabic", serif; font-size: 1.05rem; color: var(--gold, #c9a44e); margin-inline-start: -0.15rem; }

/* graphical step progress */
.majhir-progress { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.7rem; }
.majhir-prog-bar { display: flex; gap: 5px; flex: 1; max-width: 340px; }
.majhir-prog-seg { height: 4px; flex: 1; border-radius: 2px; background: rgba(242, 238, 227, 0.14); transition: background 0.45s ease; }
.majhir-prog-seg.is-done { background: #1cba80; }
.majhir-prog-label { font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.14em; color: rgba(242, 238, 227, 0.55); white-space: nowrap; }
.majhir-prog-label b { color: #1cba80; }

/* loading dots while the Bayyinah composes */
.majhir-loading-dots { display: flex; gap: 8px; margin-top: 1.6rem; }
.majhir-loading-dots span { width: 9px; height: 9px; border-radius: 50%; background: #1cba80; opacity: 0.35; animation: majhir-dot 1.2s ease-in-out infinite; }
.majhir-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.majhir-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes majhir-dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .majhir-loading-dots span { animation: none; } }

/* ---- track choice cards (Standard vs Advanced) ---- */
.majhir-track { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 1.05rem 1.15rem; }
.majhir-track .majhir-option-title { font-size: 1.1rem; }
.majhir-track-desc { display: block; color: rgba(242, 238, 227, 0.66); font-size: 0.92rem; line-height: 1.5; margin-top: 0.35rem; }
.majhir-track-meta {
  display: inline-block; margin-top: 0.6rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #1cba80;
  border: 1px solid rgba(28, 186, 128, 0.3); border-radius: 999px; padding: 0.25rem 0.6rem;
}

/* ---- Bayyinah chat (last step) ---- */
.majhir-chat { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(242, 238, 227, 0.12); }
.majhir-chat-thread { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.9rem 0 1rem; }
.majhir-chat-msg {
  max-width: 88%; padding: 0.7rem 0.95rem; border-radius: 0.85rem;
  font-size: 0.95rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.majhir-chat-user { align-self: flex-end; background: #1cba80; color: #06120c; border-bottom-right-radius: 0.2rem; }
.majhir-chat-assistant { align-self: flex-start; background: rgba(242, 238, 227, 0.06); border: 1px solid rgba(242, 238, 227, 0.12); border-bottom-left-radius: 0.2rem; }
.majhir-chat-row { display: flex; gap: 0.6rem; align-items: stretch; }
.majhir-chat-row .majhir-input { flex: 1; margin: 0; }
.majhir-chat-row .majhir-btn { white-space: nowrap; }
.majhir-chat-typing { display: inline-flex; gap: 5px; align-items: center; }
.majhir-chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #1cba80; opacity: 0.4; animation: majhir-dot 1.2s ease-in-out infinite; }
.majhir-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.majhir-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) { .majhir-chat-typing span { animation: none; } }