/* Musicrew App layer — shared across Home's Join dialog, Sign Up, Sign In,
   and the signed-in pages that follow. Reuses tokens + home.css component
   classes (mc-btn, mc-badge, mc-card, mc-icon, mc-container, mc-avatar). */

/* ---- Responsive: mobile-friendly collapse of the fixed-width desktop layout ---- */
#musicrew-home{min-width:320px}
@media (max-width:1180px){
  .mc-rail{grid-template-columns:1fr!important}
  .mc-showcase-layout{grid-template-columns:1fr!important}
  .mc-rail{position:static!important}
}
@media (max-width:1024px){
  .mc-grid-3,.mc-grid-4,.mc-featured-grid{grid-template-columns:repeat(2,1fr)!important}
  .mc-steps{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:900px){
  .mc-header,.mc-header__inner{height:auto!important}
  .mc-header__inner{flex-wrap:wrap;gap:var(--space-4)!important;padding-top:12px!important;padding-bottom:12px!important}
  .mc-nav{gap:var(--space-5)!important;flex-wrap:wrap}
  .mc-hero__grid{grid-template-columns:1fr!important}
  .mc-hero__sub{width:auto!important;height:auto!important}
  .mc-section-head{flex-wrap:wrap}
  .mc-split{grid-template-columns:1fr!important}
  .mc-split__aside{display:none!important}
}
@media (max-width:760px){
  .mc-grid-3,.mc-grid-4,.mc-featured-grid,.mc-steps{grid-template-columns:1fr!important}
  .mc-footer__top{grid-template-columns:1fr!important;gap:var(--space-8)!important}
}

/* ---- Dialog / modal ---- */
.mc-dialog-overlay{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:var(--space-6)}
.mc-dialog-overlay.is-open{display:grid}
.mc-dialog-backdrop{position:absolute;inset:0;background:rgba(14,14,14,.55);backdrop-filter:blur(3px)}
.mc-dialog{position:relative;width:100%;background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);animation:mc-rise var(--duration-base) var(--ease-out);max-height:90vh;overflow-y:auto}
.mc-dialog__head{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-4)}
.mc-dialog__head-copy{flex:1}
.mc-dialog__head h3{font:var(--type-h4)}
.mc-dialog__sub{font:var(--type-body-sm);color:var(--text-muted);margin:6px 0 0}
.mc-dialog__body{padding:0 var(--space-6) var(--space-6)}
.mc-dialog__footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1.5px solid var(--border-subtle);background:var(--surface-sunken);border-radius:0 0 var(--radius-xl) var(--radius-xl)}

/* ---- Labeled form fields (label above, hint optional) ---- */
.mc-form-field{display:block;min-width:0}
.mc-form-field__label{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-2);font:var(--type-label);color:var(--text-heading)}
.mc-form-field__required{color:var(--red-500)}
.mc-form-field__hint{font:var(--type-body-sm);color:var(--text-muted)}
.mc-form-field__control{position:relative;display:flex;align-items:center;height:var(--control-h-md);border:1.5px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);transition:var(--transition-control)}
.mc-form-field__control:focus-within{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.mc-form-field__control svg{margin-left:14px;color:var(--text-muted);flex:0 0 auto}
.mc-form-field input,.mc-form-field select{flex:1;min-width:0;width:100%;height:100%;padding:0 14px;font:var(--type-body);color:var(--text-heading);background:transparent;border:0;outline:0;appearance:none}
.mc-form-field__control svg + input,.mc-form-field__control svg + select{padding-left:10px}
.mc-form-field--select .mc-form-field__control::after{content:'';position:absolute;right:13px;top:50%;width:18px;height:18px;margin-top:-9px;pointer-events:none;background:currentColor;color:var(--text-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.mc-form-field-error{display:block;margin-top:var(--space-2);font:var(--type-body-sm);color:var(--red-600)}

/* ---- Checkbox with label (block style, used in forms) ---- */
.mc-check{display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer;position:relative}
.mc-check input{position:absolute;opacity:0;width:1px;height:1px}
.mc-check__box{width:20px;height:20px;flex:0 0 auto;display:grid;place-items:center;margin-top:1px;border-radius:var(--radius-xs);border:1.5px solid var(--border-default);background:var(--surface-card);transition:var(--transition-control)}
.mc-check input:checked ~ .mc-check__box{background:var(--accent);border-color:var(--accent-deep)}
.mc-check__box svg{display:none;color:var(--text-on-brand)}
.mc-check input:checked ~ .mc-check__box svg{display:block}
.mc-check__label{font:var(--type-body-sm);color:var(--text-heading)}

/* ---- Role-picker cards (Join modal, Sign Up) ---- */
.mc-role-card{cursor:pointer;transition:var(--transition-card),border-color var(--duration-fast) var(--ease-standard)}
.mc-role-card.is-selected{border-color:var(--accent-deep)!important;box-shadow:0 0 0 1.5px var(--accent-deep) inset}
.mc-role-card__row{display:flex;gap:var(--space-3);align-items:flex-start}
.mc-role-card__title{font:var(--weight-bold) var(--text-md)/1.3 var(--font-sans);color:var(--text-heading)}
.mc-role-card__body{font:var(--type-body-sm);color:var(--text-muted);margin-top:2px}

/* ---- "or" divider ---- */
.mc-or{display:flex;align-items:center;gap:var(--space-4)}
.mc-or__line{height:1.5px;background:var(--border-subtle);flex:1}
.mc-or__label{font:var(--type-body-sm);color:var(--text-muted)}

/* ---- Auth split layout (dark aside + centered form), used by Sign Up ---- */
.mc-split{min-height:100vh;display:grid;grid-template-columns:420px 1fr;background:var(--bg-page)}
.mc-split__aside{background:var(--surface-inverse);color:var(--text-inverse);padding:var(--space-12) var(--space-10);display:grid;align-content:start;gap:var(--space-10)}
.mc-split__logo{display:flex;align-items:center;gap:var(--space-3)}
.mc-split__wordmark{font:var(--weight-bold) 19px/1 var(--font-display);letter-spacing:var(--tracking-wordmark);text-transform:uppercase;color:var(--yellow-500)}
.mc-split__eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--yellow-500)}
.mc-split__title{font:var(--type-h1);letter-spacing:var(--tracking-tight);color:var(--white);max-width:20ch}
.mc-split__body{font:var(--type-body);color:var(--stone-300);max-width:34ch}
.mc-perks{display:grid;gap:var(--space-5);padding-top:var(--space-8);border-top:1.5px solid var(--ink-600)}
.mc-perk{display:flex;gap:var(--space-4);align-items:flex-start}
.mc-perk__icon{color:var(--yellow-500);flex:none;padding-top:2px}
.mc-perk__title{font:var(--type-label);color:var(--white);display:block}
.mc-perk__body{font:var(--type-body-sm);color:var(--stone-400);display:block}
.mc-split__main{display:grid;align-content:start;justify-items:center;padding:var(--space-16) var(--page-pad) var(--space-24)}
.mc-split__panel{width:100%;max-width:620px;display:grid;gap:var(--space-8)}

/* ---- Step indicator (Sign Up progress) ---- */
.mc-steprow{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.mc-step-pip{display:flex;align-items:center;gap:var(--space-3)}
.mc-step-pip__n{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--radius-pill);font:var(--weight-bold) var(--text-sm)/1 var(--font-display);border:1.5px solid var(--border-subtle)}
.mc-step-pip__label{font:var(--type-body-sm)}
.mc-step-pip__bar{width:28px;height:1.5px;background:var(--border-subtle)}

/* ---- Auth panel cards ---- */
.mc-panel{display:grid;gap:var(--space-8);background:var(--surface-card);border:1.5px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-xs);padding:var(--space-10)}
.mc-panel--poster{border:1.5px solid var(--border-strong);box-shadow:var(--shadow-poster);justify-items:start}
.mc-panel h1{font:var(--type-h2);letter-spacing:var(--tracking-tight);color:var(--text-heading)}
.mc-panel p{font:var(--type-body);color:var(--text-body)}
.mc-icon-circle{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--radius-pill);background:var(--yellow-500);color:var(--ink-900)}
.mc-icon-circle--sm{width:48px;height:48px}
.mc-callout{display:grid;gap:var(--space-3);width:100%;background:var(--bg-page-alt);border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-6)}
.mc-next-row{display:flex;align-items:center;gap:var(--space-4);border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5)}
.mc-next-row__icon{color:var(--yellow-800);flex:none}
.mc-next-row__label{font:var(--type-body-sm);color:var(--text-body);margin-right:auto}
.mc-next-row__time{font:var(--type-body-sm);color:var(--text-muted)}