/* Global design system: typography, layout, components */
:root{
  --font-display: 'League Spartan', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans: 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Libre Baskerville', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;


  --color-bg: #fff;
  --color-text: #111;
  --color-muted: #666;
  --color-border: #000;
  --color-pill-bg: #fff;
  --color-pill-border: #C6F289;
  --color-error: #cc0000;
  --color-overlay: rgba(0,0,0,0.45);
  --shadow-card: 0 12px 40px rgba(0,0,0,.18);

  --radius-lg: 26px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --radius-round: 9999px;
  --radius-modal: 34px;

  --border-2: 2px solid var(--color-border);
  --border-3: 3px solid var(--color-border);
}

html, body{max-width:100%;overflow-x:hidden;}
.h1{font-size:clamp(34px,6vw,46px);}

/* Typography */
.h1{font:700 46px/1.1 var(--font-display); color:var(--color-text); margin:0 0 28px}
.h2{font:700 30px/1.1 var(--font-display); color:var(--color-text); margin:0 0 12px}
.text-body{font:400 16px/1.5 var(--font-sans); color:var(--color-text)}
.text-muted{color:var(--color-muted)}
.label{font:600 15px/1.2 var(--font-sans); letter-spacing:.5px; text-transform:uppercase}
.caption{font:500 12px/1.2 var(--font-sans)}
.error-text{color:var(--color-error); font:600 12px/1.3 var(--font-sans)}

/* Inputs */
.input, input[type=text], input[type=email], input[type=number], input[type=datetime-local], textarea, select{
  border: var(--border-2);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  background: #fff;
  font: 400 16px/1.3 var(--font-sans);
  color: var(--color-text);
}
.input.invalid{border-color: var(--color-error); background:#fff0f0}

/* Placeholder text standardization */
::-webkit-input-placeholder{ color: var(--color-muted); opacity: 1; }
:-ms-input-placeholder{ color: var(--color-muted); opacity: 1; }
::placeholder{ color: var(--color-muted); opacity: 1; }

/* Form grid and fields aligning with Create Event */
.form{display:grid; grid-template-columns: 420px 1fr; gap:50px; align-items:flex-start}
.form-left{display:flex; flex-direction:column; gap:28px}
.form-right{display:flex; flex-direction:column; gap:26px}
.field{display:flex; flex-direction:column; gap:10px}
.form-row{display:flex; flex-wrap:wrap; gap:20px}
.form-col{flex:1 1 240px}

/* Buttons - standardized to match Create Event primary/secondary */
body .btn{border: var(--border-2); border-radius: var(--radius-round); padding:16px 34px; font:600 16px/1 var(--font-display); cursor:pointer; transition:background .2s,color .2s,filter .2s,transform .05s}
body .btn.primary{background:#000;color:#fff}
body .btn.secondary{background:#fff;color:#000}
body .btn.callout{background:#C6F28990;color:#000}
body .btn:hover{filter:brightness(1.05)}
body .btn:active{transform:translateY(1px)}
body .btn:focus-visible{outline:3px dashed #000; outline-offset:3px}
body .btn:disabled{opacity:.5;cursor:not-allowed}

/* Cards */
.card{background:#fff; border:var(--border-3); border-radius: var(--radius-lg); box-shadow: var(--shadow-card)}

/* Pills */
.pill{border:var(--border-2); border-radius: var(--radius-round); padding:10px 16px; background:var(--color-pill-bg); font:600 14px/1 var(--font-sans)}

/* Modals */
.modal-overlay{position:fixed; inset:0; background: var(--color-overlay); display:none; align-items:center; justify-content:center; z-index:10000}
.modal{background:#fff; border: var(--border-3); border-radius: var(--radius-modal); box-shadow: var(--shadow-card)}

/* Layout utils */
.center{display:flex; align-items:center; justify-content:center}
.stack{display:flex; flex-direction:column; gap:12px}
.grid{display:grid; gap:20px}

/* Loading skeletons */
.skeleton{position:relative; overflow:hidden; background:#f2f2f2; border: var(--border-3); border-radius: var(--radius-lg);}
.skeleton.card{height:220px;}
.skeleton::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%); transform:translateX(-100%); animation: shimmer 1.2s ease-in-out infinite;}
@keyframes shimmer{100%{transform:translateX(100%);}}

/* Content fade-in */
.fade-in{animation:fadeIn .25s ease-out;}
@keyframes fadeIn{from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;}}

/* Forms layout */
.form-row{display:flex; flex-wrap:wrap; gap:20px}
.form-col{flex:1 1 240px}

/* Helper classes for views that already styled similarly */
.view-title{font:700 46px/1.1 var(--font-display); margin:0 0 28px}
.field{display:flex; flex-direction:column; gap:10px}
.hobby-bar{display:flex; flex-wrap:wrap; gap:10px}

/* Responsive tweaks */
@media (max-width: 760px){ .h1{font-size:38px} }