/* Component styles for the MOHU primitives. Class names are prefixed .mohu-. */

/* ---------- Button ---------- */
.mohu-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-brand);font-weight:var(--fw-semibold);font-size:var(--fs-sm);line-height:1;height:var(--control-h-md);padding:0 var(--space-5);border:var(--border-hair) solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-control),transform var(--dur-fast) var(--ease-standard);text-decoration:none;white-space:nowrap}
.mohu-btn--sm{height:var(--control-h-sm);padding:0 var(--space-4);font-size:var(--fs-xs)}
.mohu-btn--lg{height:var(--control-h-lg);padding:0 var(--space-7);font-size:var(--fs-base)}
.mohu-btn--primary{background:var(--mohu-gold);color:var(--mohu-black)}
.mohu-btn--primary:hover{background:#c4914f}
.mohu-btn--secondary{background:var(--mohu-black);color:var(--mohu-cream)}
.mohu-btn--secondary:hover{background:#1b2325}
.mohu-btn--outline{background:transparent;color:var(--mohu-black);border-color:var(--mohu-gold)}
.mohu-btn--outline:hover{background:var(--mohu-gold-30)}
.mohu-btn--ghost{background:transparent;color:var(--mohu-black)}
.mohu-btn--ghost:hover{background:var(--mohu-gold-30)}
.mohu-btn:active:not(:disabled){transform:scale(.985)}
.mohu-btn:disabled{background:var(--mohu-mist-30);color:var(--mohu-black-50);border-color:transparent;cursor:not-allowed;transform:none}
.mohu-btn--on-dark.mohu-btn--outline{color:var(--mohu-cream)}
.mohu-btn--on-dark.mohu-btn--ghost{color:var(--mohu-cream)}
.mohu-btn--block{width:100%}

/* ---------- IconButton ---------- */
.mohu-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-md);height:var(--control-h-md);border:var(--border-hair) solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--mohu-black);cursor:pointer;transition:var(--transition-control)}
.mohu-iconbtn:hover{background:var(--mohu-gold-30)}
.mohu-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.mohu-iconbtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.mohu-iconbtn--solid{background:var(--mohu-gold);color:var(--mohu-black)}
.mohu-iconbtn--solid:hover{background:#c4914f}
.mohu-iconbtn--outline{border-color:var(--border-subtle)}
.mohu-iconbtn--on-dark{color:var(--mohu-cream)}
.mohu-iconbtn--on-dark.mohu-iconbtn--outline{border-color:var(--mohu-gold)}
.mohu-iconbtn:disabled{color:var(--mohu-black-50);background:transparent;cursor:not-allowed}

/* ---------- Icon ---------- */
.mohu-icon{display:inline-block;flex:none;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* ---------- Tag / Badge ---------- */
.mohu-tag{display:inline-flex;align-items:center;gap:var(--space-2);height:26px;padding:0 var(--space-3);border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:var(--fw-semibold);background:var(--mohu-gold-30);color:var(--mohu-black);border:var(--border-hair) solid transparent}
.mohu-tag--outline{background:transparent;border-color:var(--mohu-gold)}
.mohu-tag--mist{background:var(--mohu-mist-50);color:var(--mohu-navy)}
.mohu-tag--dark{background:var(--mohu-black);color:var(--mohu-cream)}
.mohu-tag--removable{padding-inline-end:var(--space-2)}
.mohu-tag__x{display:inline-flex;border:0;background:none;padding:0;cursor:pointer;color:inherit;opacity:.7}
.mohu-tag__x:hover{opacity:1}
.mohu-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 var(--space-2);border-radius:var(--radius-xs);font-family:var(--font-numeric);font-size:var(--fs-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide)}
.mohu-badge--neutral{background:var(--mohu-mist-50);color:var(--mohu-navy)}
.mohu-badge--success{background:color-mix(in oklab,var(--mohu-success) 30%,white);color:#12503a}
.mohu-badge--warning{background:color-mix(in oklab,var(--mohu-warning) 40%,white);color:#6b4a06}
.mohu-badge--danger{background:color-mix(in oklab,var(--mohu-danger) 28%,white);color:#7a2418}
.mohu-badge--gold{background:var(--mohu-gold-50);color:var(--mohu-black)}
.mohu-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---------- Card ---------- */
.mohu-card{background:var(--surface-card);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--space-6);transition:box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.mohu-card--interactive{cursor:pointer}
.mohu-card--interactive:hover{box-shadow:var(--shadow-md);border-color:var(--mohu-gold-50)}
.mohu-card--accent{border-top:var(--border-rule) solid var(--mohu-gold)}
.mohu-card--cream{background:var(--mohu-cream);border-color:transparent;box-shadow:none}
.mohu-card--dark{background:var(--mohu-black);border-color:transparent;color:var(--mohu-cream);box-shadow:none}
.mohu-card--flat{box-shadow:none}
.mohu-card__title{font-family:var(--font-brand);font-weight:var(--fw-bold);font-size:var(--fs-lg);margin:0 0 var(--space-2);color:inherit}
.mohu-card__meta{font-size:var(--fs-xs);color:var(--text-muted);margin:0 0 var(--space-3)}
.mohu-card--dark .mohu-card__meta{color:var(--mohu-gold)}

/* ---------- StatCard ---------- */
.mohu-stat{background:var(--surface-card);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.mohu-stat--dark{background:var(--mohu-black);border-color:transparent;color:var(--mohu-cream)}
.mohu-stat__label{font-size:var(--fs-xs);color:var(--text-muted);font-weight:var(--fw-semibold)}
.mohu-stat--dark .mohu-stat__label{color:var(--mohu-gold)}
.mohu-stat__value{font-family:var(--font-numeric);font-size:var(--fs-3xl);font-weight:var(--fw-bold);line-height:1;font-variant-numeric:tabular-nums}
.mohu-stat__delta{font-size:var(--fs-xs);font-family:var(--font-numeric)}
.mohu-stat__delta--up{color:#12503a}.mohu-stat__delta--down{color:#7a2418}

/* ---------- ArchFrame / OrnamentRule / SectionHeading ---------- */
.mohu-arch{overflow:hidden;background:var(--mohu-mist-50);display:block}
.mohu-arch--dome{border-radius:var(--arch-radius)}
.mohu-arch--pointed{border-radius:var(--arch-radius-tall)}
.mohu-arch--soft{border-radius:var(--arch-radius-soft)}
.mohu-arch--circle{border-radius:50%}
.mohu-arch img{width:100%;height:100%;object-fit:cover;display:block}
.mohu-arch--bordered{border:var(--border-thick) solid var(--mohu-gold);box-sizing:border-box}
.mohu-rule{display:block;width:100%;height:14px;background-repeat:repeat-x;background-position:center;background-size:auto 100%}
.mohu-rule--line{height:var(--border-rule);background:var(--mohu-gold)}
.mohu-rule--hair{height:1px;background:var(--border-subtle)}
.mohu-section-heading{display:flex;flex-direction:column;gap:var(--space-3)}
.mohu-section-heading__eyebrow{font-family:var(--font-numeric);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);color:var(--mohu-gold);font-weight:var(--fw-semibold)}
.mohu-section-heading__title{font-family:var(--font-brand);font-weight:var(--fw-bold);font-size:var(--fs-3xl);line-height:var(--lh-tight);margin:0}
.mohu-section-heading__sub{color:var(--text-muted);margin:0;font-size:var(--fs-md)}
.mohu-section-heading__bar{width:56px;height:var(--border-rule);background:var(--mohu-gold)}

/* ---------- Forms ---------- */
.mohu-field{display:flex;flex-direction:column;gap:var(--space-2)}
.mohu-field__label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-body)}
.mohu-field__req{color:var(--mohu-danger);margin-inline-start:2px}
.mohu-field__hint{font-size:var(--fs-xs);color:var(--text-muted)}
.mohu-field__error{font-size:var(--fs-xs);color:#a83b28}
.mohu-input,.mohu-select,.mohu-textarea{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text-body);background:var(--surface-card);border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-sm);height:var(--control-h-md);padding:0 var(--space-4);width:100%;box-sizing:border-box;transition:var(--transition-control)}
.mohu-textarea{height:auto;padding:var(--space-3) var(--space-4);min-height:96px;resize:vertical}
.mohu-input:hover,.mohu-select:hover{border-color:var(--mohu-gold-50)}
.mohu-input:focus,.mohu-select:focus,.mohu-textarea:focus{border-color:var(--mohu-gold);outline:2px solid var(--focus-ring);outline-offset:1px}
.mohu-input::placeholder{color:var(--mohu-black-50)}
.mohu-input:disabled,.mohu-select:disabled{background:var(--mohu-mist-30);color:var(--mohu-black-50);cursor:not-allowed}
.mohu-input--invalid,.mohu-select--invalid{border-color:var(--mohu-danger)}
.mohu-select{appearance:none;background-image:linear-gradient(45deg,transparent 49%,var(--mohu-black) 50%),linear-gradient(-45deg,transparent 49%,var(--mohu-black) 50%);background-size:6px 6px,6px 6px;background-position:left 18px top 18px,left 24px top 18px;background-repeat:no-repeat;padding-inline-start:var(--space-8)}
[dir="rtl"] .mohu-select{background-position:left 18px top 18px,left 24px top 18px}
.mohu-check{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--fs-sm)}
.mohu-check input{appearance:none;margin:0;width:20px;height:20px;flex:none;border:var(--border-hair) solid var(--mohu-black-50);background:var(--surface-card);transition:var(--transition-control);position:relative}
.mohu-check--box input{border-radius:var(--radius-xs)}
.mohu-check--radio input{border-radius:50%}
.mohu-check input:hover{border-color:var(--mohu-gold)}
.mohu-check input:checked{background:var(--mohu-gold);border-color:var(--mohu-gold)}
.mohu-check--box input:checked::after{content:"";position:absolute;inset:0;background:var(--mohu-black);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.mohu-check--radio input:checked::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--mohu-black)}
.mohu-check input:disabled{background:var(--mohu-mist-30);border-color:var(--mohu-mist);cursor:not-allowed}
.mohu-check__text{padding-top:1px}
.mohu-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--fs-sm)}
.mohu-switch__track{width:44px;height:24px;border-radius:var(--radius-pill);background:var(--mohu-mist);position:relative;transition:var(--transition-control);flex:none}
.mohu-switch__knob{position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:var(--surface-card);box-shadow:var(--shadow-xs);transition:inset-inline-start var(--dur-base) var(--ease-standard)}
.mohu-switch--on .mohu-switch__track{background:var(--mohu-gold)}
.mohu-switch--on .mohu-switch__knob{inset-inline-start:23px}
.mohu-switch--disabled{opacity:.5;cursor:not-allowed}

/* ---------- Navigation ---------- */
.mohu-header{display:flex;align-items:center;gap:var(--space-6);height:76px;padding:0 var(--gutter-page);background:var(--mohu-cream);border-bottom:var(--border-hair) solid var(--mohu-gold-50)}
.mohu-header--dark{background:var(--mohu-black);border-bottom-color:var(--mohu-gold)}
.mohu-header__nav{display:flex;align-items:center;gap:var(--space-7);margin-inline-start:auto;font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.mohu-header__link{color:var(--text-body);text-decoration:none;padding:var(--space-2) 0;border-bottom:var(--border-rule) solid transparent;transition:var(--transition-control)}
.mohu-header--dark .mohu-header__link{color:var(--mohu-cream)}
.mohu-header__link:hover{color:var(--mohu-gold)}
.mohu-header__link--current{border-bottom-color:var(--mohu-gold)}
.mohu-header__actions{display:flex;align-items:center;gap:var(--space-3)}
.mohu-tabs{display:flex;gap:var(--space-7);border-bottom:var(--border-hair) solid var(--border-subtle)}
.mohu-tab{appearance:none;background:none;border:0;border-bottom:var(--border-rule) solid transparent;padding:var(--space-3) 0;font-family:var(--font-brand);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-muted);cursor:pointer;transition:var(--transition-control);display:inline-flex;align-items:center;gap:var(--space-2)}
.mohu-tab:hover{color:var(--text-body)}
.mohu-tab--active{color:var(--mohu-black);border-bottom-color:var(--mohu-gold)}
.mohu-breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);color:var(--text-muted)}
.mohu-breadcrumb a{color:var(--text-muted);border:0}
.mohu-breadcrumb a:hover{color:var(--mohu-gold)}
.mohu-breadcrumb__sep{color:var(--mohu-gold)}
.mohu-footer{background:var(--mohu-black);color:var(--mohu-cream);padding:var(--space-11) var(--gutter-page) var(--space-6)}
.mohu-footer__cols{display:flex;gap:var(--space-12);flex-wrap:wrap;align-items:flex-start}
.mohu-footer__col{display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--fs-sm)}
.mohu-footer__heading{color:var(--mohu-gold);font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.mohu-footer a{color:var(--mohu-cream);border:0;opacity:.85}
.mohu-footer a:hover{color:var(--mohu-gold);opacity:1}
.mohu-footer__base{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);margin-top:var(--space-9);padding-top:var(--space-5);border-top:var(--border-hair) solid var(--mohu-gold-70);font-family:var(--font-numeric);font-size:var(--fs-2xs);color:var(--mohu-gold)}

/* ---------- Feedback ---------- */
.mohu-alert{display:flex;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);border:var(--border-hair) solid var(--border-subtle);background:var(--surface-card);font-size:var(--fs-sm)}
.mohu-alert__body{display:flex;flex-direction:column;gap:4px}
.mohu-alert__title{font-weight:var(--fw-bold)}
.mohu-alert--info{background:var(--mohu-mist-50);border-color:var(--mohu-mist)}
.mohu-alert--success{background:color-mix(in oklab,var(--mohu-success) 16%,white);border-color:color-mix(in oklab,var(--mohu-success) 45%,white)}
.mohu-alert--warning{background:color-mix(in oklab,var(--mohu-warning) 20%,white);border-color:color-mix(in oklab,var(--mohu-warning) 55%,white)}
.mohu-alert--danger{background:color-mix(in oklab,var(--mohu-danger) 12%,white);border-color:color-mix(in oklab,var(--mohu-danger) 40%,white)}
.mohu-alert__mark{width:22px;height:22px;flex:none}
.mohu-dialog__scrim{position:fixed;inset:0;background:var(--overlay-scrim);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:50}
.mohu-dialog{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:520px;overflow:hidden}
.mohu-dialog__top{height:var(--border-rule);background:var(--mohu-gold)}
.mohu-dialog__head{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-6) var(--space-6) 0}
.mohu-dialog__title{font-family:var(--font-brand);font-weight:var(--fw-bold);font-size:var(--fs-xl);margin:0}
.mohu-dialog__body{padding:var(--space-4) var(--space-6);font-size:var(--fs-sm);color:var(--text-body)}
.mohu-dialog__foot{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-6) var(--space-6)}
.mohu-steps{display:flex;align-items:flex-start;gap:0;width:100%}
.mohu-step{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);flex:1;position:relative;font-size:var(--fs-xs);text-align:center}
.mohu-step__dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-numeric);font-size:var(--fs-xs);font-weight:var(--fw-semibold);background:var(--mohu-mist-50);color:var(--text-muted);border:var(--border-hair) solid var(--border-subtle);z-index:1}
.mohu-step--done .mohu-step__dot{background:var(--mohu-gold);border-color:var(--mohu-gold);color:var(--mohu-black)}
.mohu-step--current .mohu-step__dot{background:var(--mohu-black);border-color:var(--mohu-black);color:var(--mohu-cream)}
.mohu-step__label{color:var(--text-muted);max-width:14ch}
.mohu-step--current .mohu-step__label{color:var(--text-body);font-weight:var(--fw-semibold)}
.mohu-step__bar{position:absolute;top:16px;height:1px;background:var(--border-subtle);inset-inline-start:50%;width:100%}
.mohu-step--done .mohu-step__bar{background:var(--mohu-gold)}
.mohu-step:last-child .mohu-step__bar{display:none}