/* members-app.css
   The meal planner and the workout builder are React apps that carry their
   own styles inside the code, with dozens of colours written inline. This
   sheet sits over them and gives them the members area look without touching
   the code: the serif where they used Bebas Neue, pills where they used
   6px corners, 22px cards, and the lime as the one accent. The app itself
   room follows the theme like the rest of the site: the colours inside the
   code point at the same tokens every other page uses. */

/* --- The room -------------------------------------------------------- */
#root{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,32px) 40px}
#root > div{
  background:var(--room) !important;color:var(--text) !important;
  border:1px solid var(--rule);border-radius:var(--r-room);overflow:hidden;
  min-height:auto !important;
}
@media (max-width:720px){#root > div{border-radius:28px}}
:root[data-theme="light"] #root > div{box-shadow:0 30px 60px -40px rgba(22,21,15,.5)}
html body{background:var(--bg) !important}

/* --- Type ------------------------------------------------------------- */
#root .logo,#root .section-title,#root .section-label,#root [style*="Bebas"]{
  font-family:var(--serif) !important;font-weight:400 !important;letter-spacing:-.012em !important;text-transform:none !important;
}
#root .logo{font-size:1.6rem !important;color:var(--text) !important}
#root .logo span{color:var(--accent) !important;font-style:italic}
#root .subtitle{font-size:.74rem !important;font-weight:600 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--eyebrow) !important;font-family:var(--sans) !important}
#root .section-title{font-size:1.35rem !important;color:var(--text) !important}
#root .section-label{font-size:.74rem !important;font-weight:600 !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--eyebrow) !important;font-family:var(--sans) !important;margin-bottom:10px}
#root [style*="DM Mono"],#root .db-card-macros,#root code{font-family:var(--sans) !important;font-variant-numeric:tabular-nums}
#root .form-label{font-size:.74rem !important;font-weight:600 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--muted) !important;margin-bottom:8px !important}

/* --- Controls ----------------------------------------------------------- */
#root .btn{
  border-radius:999px !important;font-family:var(--sans) !important;font-weight:600 !important;
  min-height:44px;padding:8px 18px !important;font-size:.92rem !important;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
#root .btn-sm{min-height:36px;padding:6px 14px !important;font-size:.82rem !important}
#root .btn-accent{background:var(--lime) !important;color:var(--ink) !important;box-shadow:0 1px 0 var(--lime-deep)}
#root .btn-accent:hover{transform:translateY(-2px);box-shadow:0 3px 0 var(--lime-deep);background:var(--lime) !important}
#root .btn-ghost{background:transparent !important;color:var(--text) !important;border:1px solid var(--rule) !important}
#root .btn-ghost:hover{border-color:var(--accent) !important;color:var(--accent) !important;background:transparent !important}
#root .btn-danger{border-radius:999px !important;border:1px solid rgba(232,64,46,.45) !important;color:var(--danger) !important;background:transparent !important}
#root .help-btn{border-radius:50% !important;border:1px solid var(--rule) !important;background:transparent !important;color:var(--text) !important}
#root input,#root select,#root textarea{
  border-radius:999px !important;border:1px solid var(--input-border) !important;background:var(--input-bg) !important;color:var(--text) !important;
  font-family:var(--sans) !important;min-height:44px;padding:8px 16px !important;
}
#root textarea{border-radius:16px !important}
#root input:focus,#root select:focus,#root textarea:focus{border-color:var(--lime) !important;box-shadow:0 0 0 3px rgba(200,241,53,.22);outline:none}
#root input[type="checkbox"],#root input[type="radio"]{min-height:0;border-radius:4px !important;padding:0 !important;accent-color:var(--lime)}
#root input[type="range"]{border:0 !important;background:transparent !important;padding:0 !important;accent-color:var(--lime)}
#root .tab{border-bottom:0 !important;gap:4px;padding:4px;background:var(--bg-2);border:1px solid var(--rule);border-radius:999px;display:inline-flex !important;max-width:100%;margin-bottom:22px !important}
#root .tab-btn{border-radius:999px !important;border:0 !important;padding:9px 18px !important;font-weight:600 !important;color:var(--muted) !important;font-family:var(--sans) !important}
#root .tab-btn.active{background:var(--lime) !important;color:var(--ink) !important}
#root .tab-btn:hover:not(.active){color:var(--text) !important}

/* --- Surfaces ------------------------------------------------------------ */
#root .card,#root .modal,#root .help-box{border-radius:var(--r-card) !important;background:var(--bg-2) !important;border:1px solid var(--rule) !important}
#root .modal{max-height:88vh}
#root .modal-overlay{background:var(--overlay) !important}
#root .header{border-bottom:1px solid var(--rule) !important;padding:20px clamp(16px,3vw,28px) 16px !important}
#root .content{padding:20px clamp(14px,3vw,28px) !important}
#root .progress-bar{border-radius:999px !important}
#root .progress-fill{border-radius:999px !important}
#root .db-table th{background:var(--surface) !important;font-family:var(--sans) !important;letter-spacing:.1em !important;color:var(--muted) !important}
#root .help-step-num{border-radius:50% !important;font-family:var(--sans) !important}
#root .toast{border-radius:999px !important;font-family:var(--sans) !important}
#root [style*="border-radius: 6px"],#root [style*="borderRadius:6"],#root [style*="border-radius: 8px"],#root [style*="border-radius: 10px"]{border-radius:16px !important}

/* --- Phone ------------------------------------------------------------------ */
@media (max-width:560px){
  #root{padding:0 12px 32px}
  #root .header-tools .btn{min-height:40px}
  #root .tab{display:flex !important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #root .tab-btn{flex:none;white-space:nowrap}
}

/* --- Scrollbars ----------------------------------------------------------
   The help panel, the load list and the wide tables scroll inside the room.
   The browser's stock scrollbar is a light track on charcoal; this makes it
   a thin bar in the room's own colours, in both themes. */
#root,#root *{scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
#root ::-webkit-scrollbar,#root::-webkit-scrollbar{width:8px;height:8px}
#root ::-webkit-scrollbar-thumb{background:var(--faint);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
#root ::-webkit-scrollbar-track{background:transparent}