/* HTNS r118 — normal-size Profile view.
   Size and spacing only. Keep the existing colors, permissions, data and actions.
   Repeated IDs override the older compact reference rules without affecting other pages. */

html body #mainApp#mainApp #view-profile#view-profile{
  font-size:16px !important;
  line-height:1.45 !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-ref-page,.me-admin-reference,.me-admin-manager-stack){
  gap:16px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-ref-page{
  min-width:0 !important;
  padding:0 2px 80px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-section-card,.me-super-album-card){
  padding:16px !important;
  margin:0 !important;
  border-radius:16px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-manager,.role-manager-dropdown){
  border-radius:16px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .profile-section-head{
  grid-template-columns:44px minmax(0,1fr) !important;
  align-items:start !important;
  gap:12px !important;
  min-height:44px !important;
  margin:0 0 12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .profile-section-head > div{
  min-width:0 !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.profile-section-icon,.me-super-album-icon,.roster-toggle-icon,.role-manager-icon){
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  flex-basis:44px !important;
  border-radius:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.profile-section-icon,.me-super-album-icon,.roster-toggle-icon,.role-manager-icon) svg{
  width:24px !important;
  height:24px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-section-title,.me-super-album-title){
  font-size:18px !important;
  line-height:1.3 !important;
  font-weight:750 !important;
  margin:0 0 4px !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.profile-section-sub,.me-pref-sub,.me-power-sub,.me-super-album-desc,.me-album-note,.roster-toggle-sub,.role-manager-sub){
  font-size:14px !important;
  line-height:1.45 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
}
html body #mainApp#mainApp #view-profile#view-profile .profile-section-sub{
  margin:4px 0 0 !important;
}

/* Notification rows and full-size switch hit areas. */
html body #mainApp#mainApp #view-profile#view-profile .me-pref-item{
  grid-template-columns:36px minmax(0,1fr) 52px !important;
  align-items:center !important;
  gap:12px !important;
  min-height:80px !important;
  padding:14px 0 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-pref-item:first-child{
  padding-top:14px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-power-row{
  grid-template-columns:36px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
  min-height:80px !important;
  padding:14px 0 !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-pref-icon,.me-power-icon){
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  flex-basis:36px !important;
  border-radius:11px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-pref-icon,.me-power-icon) svg{
  width:22px !important;
  height:22px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-pref-title,.me-power-title){
  font-size:16px !important;
  line-height:1.3 !important;
  font-weight:750 !important;
  margin:0 0 4px !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
html body #mainApp#mainApp #view-profile#view-profile #notificationsCard .toggle{
  position:relative !important;
  width:52px !important;
  min-width:52px !important;
  height:44px !important;
  min-height:44px !important;
  justify-self:end !important;
  align-self:center !important;
  margin:0 !important;
  transform:none !important;
}
html body #mainApp#mainApp #view-profile#view-profile #notificationsCard .toggle input{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
}
html body #mainApp#mainApp #view-profile#view-profile #notificationsCard .toggle-ui{
  inset:7px 0 !important;
  width:52px !important;
  height:30px !important;
  border-radius:999px !important;
}
html body #mainApp#mainApp #view-profile#view-profile #notificationsCard .toggle-ui::before{
  width:24px !important;
  height:24px !important;
  left:3px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}
html body #mainApp#mainApp #view-profile#view-profile #notificationsCard .toggle input:checked + .toggle-ui::before{
  transform:translate(22px,-50%) !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-power-actions{
  gap:8px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-icon-btn,.me-power-btn){
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  border-radius:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-icon-btn,.me-power-btn) svg{
  width:22px !important;
  height:22px !important;
}

/* Date and album fields: 16px text avoids focus zoom on iPhone. */
html body #mainApp#mainApp #view-profile#view-profile .me-availability-stack{
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-date-control{
  min-width:0 !important;
  width:100% !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-date-field{
  min-height:48px !important;
  height:48px !important;
  grid-template-columns:32px minmax(0,1fr) !important;
  gap:8px !important;
  padding:0 46px 0 8px !important;
  border-radius:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-date-field .me-date-icon{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-date-icon svg{
  width:20px !important;
  height:20px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-date-label{
  font-size:16px !important;
  line-height:1.3 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .profile-date-clear{
  top:1px !important;
  right:1px !important;
  bottom:1px !important;
  width:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  font-size:24px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-availability-add,.me-album-update,.me-admin-action){
  min-width:0 !important;
  min-height:48px !important;
  height:auto !important;
  padding:12px 14px !important;
  gap:8px !important;
  border-radius:12px !important;
  font-size:15px !important;
  line-height:1.35 !important;
  white-space:normal !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-availability-add .plus{
  font-size:22px !important;
  flex:0 0 auto !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-availability-add,.me-album-update,.me-admin-action) > span:not(.plus){
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-availability-list{
  gap:10px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-availability-empty,.me-availability-item){
  grid-template-columns:32px minmax(0,1fr) auto !important;
  min-height:64px !important;
  padding:12px !important;
  gap:10px !important;
  border-radius:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-availability-empty,.me-availability-item) .me-date-icon{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-availability-empty > span{
  font-size:14px !important;
  line-height:1.45 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-availability-empty b{
  font-size:14px !important;
  line-height:1.4 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-availability-empty small{
  font-size:14px !important;
  line-height:1.45 !important;
  margin-top:4px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-availability-item .date-val{
  font-size:16px !important;
  line-height:1.3 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-availability-remove{
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  font-size:24px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-super-album-head{
  grid-template-columns:44px minmax(0,1fr) auto !important;
  grid-template-rows:auto auto !important;
  column-gap:12px !important;
  row-gap:6px !important;
  margin:0 0 14px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-super-album-card{
  display:block !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-super-album-copy{
  display:contents !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-super-album-title{
  grid-column:2 !important;
  grid-row:1 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-super-album-desc{
  grid-column:2 / -1 !important;
  grid-row:2 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-super-badge{
  grid-column:3 !important;
  grid-row:1 !important;
  font-size:10px !important;
  line-height:1.2 !important;
  padding:5px 7px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-album-controls{
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-album-link-wrap{
  grid-template-columns:24px minmax(0,1fr) !important;
  min-height:48px !important;
  height:48px !important;
  padding:0 10px !important;
  gap:8px !important;
  border-radius:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-album-link-wrap input{
  height:44px !important;
  min-height:44px !important;
  font-size:16px !important;
  line-height:1.3 !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-album-link-icon,.me-album-update) svg{
  width:22px !important;
  height:22px !important;
  flex:0 0 22px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-album-note{
  margin-top:12px !important;
}

/* Members and role libraries, including their expanded controls. */
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-toggle,.role-manager-toggle){
  grid-template-columns:44px minmax(0,1fr) 20px !important;
  min-height:80px !important;
  height:auto !important;
  gap:12px !important;
  padding:14px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-toggle-copy,.role-manager-copy){
  min-width:0 !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-toggle-title,.role-manager-title){
  font-size:16px !important;
  line-height:1.3 !important;
  white-space:normal !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin:0 0 4px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-count,.role-manager-count){
  font-size:12px !important;
  min-width:28px !important;
  height:24px !important;
  padding:0 7px !important;
  flex:0 0 auto !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-chevron,.role-manager-chevron){
  width:20px !important;
  height:24px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-chevron,.role-manager-chevron)::after{
  width:7px !important;
  height:7px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-body,.role-manager-body){
  padding:0 14px 14px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-manager-v152 .roster-body{
  grid-template-columns:minmax(0,1fr) !important;
  gap:12px !important;
  padding-top:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-help,.member-role-limit-v152,.member-role-focus-v152){
  font-size:14px !important;
  line-height:1.45 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-team-filters-v152{
  height:auto !important;
  gap:4px !important;
  padding:4px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-admin-manager-stack button:not(.roster-toggle):not(.role-manager-toggle){
  min-height:44px !important;
  font-size:14px !important;
  line-height:1.3 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-team-filters-v152 button{
  height:auto !important;
  padding:8px 4px !important;
  white-space:normal !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-search-wrap,.roster-add-row){
  height:auto !important;
  min-height:48px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-admin-manager-stack :is(input:not([type="checkbox"]):not([type="radio"]),select){
  min-width:0 !important;
  min-height:48px !important;
  height:48px !important;
  font-size:16px !important;
  line-height:1.3 !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-add-row,.role-library-v152 .add-row){
  grid-template-columns:minmax(0,1fr) 48px !important;
  gap:8px !important;
  height:auto !important;
  margin-top:8px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-add-btn,.role-library-v152 .add-plus){
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
}
html body #mainApp#mainApp #view-profile#view-profile #rosterPersonList{
  max-height:440px !important;
  border-radius:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile #rosterPersonList > .member-role-card-v152 > .member-role-head-v152{
  height:auto !important;
  min-height:56px !important;
  grid-template-columns:minmax(0,1fr) 28px 20px !important;
  gap:8px !important;
  padding:10px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .roster-person-name{
  font-size:16px !important;
  line-height:1.35 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-role-count-chip-v155{
  width:28px !important;
  height:24px !important;
  font-size:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .roster-person-chevron{
  width:20px !important;
  height:20px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-role-body-v152{
  padding:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-team-group-v152{
  padding:10px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-role-options-v152{
  grid-template-columns:minmax(0,1fr) !important;
  gap:8px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-role-choice-v152{
  min-height:44px !important;
  padding:8px !important;
  gap:8px !important;
  white-space:normal !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-role-choice-v152 input{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-role-choice-v152 span{
  font-size:14px !important;
  line-height:1.4 !important;
  white-space:normal !important;
}
html body #mainApp#mainApp #view-profile#view-profile .member-person-actions-v152{
  gap:8px !important;
  flex-wrap:wrap !important;
}
html body #mainApp#mainApp #view-profile#view-profile .role-library-list-v152{
  grid-template-columns:minmax(0,1fr) !important;
  gap:12px !important;
  max-height:480px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .role-library-line-v152{
  padding:12px !important;
  border-radius:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .role-library-head-v152{
  grid-template-columns:minmax(0,1fr) 28px !important;
  gap:8px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .role-library-head-v152 > b{
  font-size:16px !important;
  line-height:1.35 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
html body #mainApp#mainApp #view-profile#view-profile .role-library-count-v152{
  width:28px !important;
  min-width:28px !important;
  height:24px !important;
  font-size:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .role-library-actions-v152{
  grid-column:1 / -1 !important;
  justify-content:flex-start !important;
  gap:8px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .role-library-actions-v152 button{
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .role-library-names-v152{
  height:auto !important;
  min-height:24px !important;
  margin:8px 0 !important;
  white-space:normal !important;
  overflow:visible !important;
}
html body #mainApp#mainApp #view-profile#view-profile .role-library-names-v152 > span{
  font-size:14px !important;
  line-height:1.4 !important;
  padding:4px 7px !important;
  margin:2px !important;
}
html body #mainApp#mainApp #view-profile#view-profile .role-library-manage-v152{
  height:auto !important;
  padding:10px !important;
  white-space:normal !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-admin-actions{
  gap:12px !important;
  padding:0 !important;
  margin-top:0 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-admin-action svg{
  width:20px !important;
  height:20px !important;
  flex:0 0 20px !important;
}

/* Use whole rows for phone controls; never shrink the text to fit. */
@media (max-width:600px){
html body #mainApp#mainApp #view-profile#view-profile :is(.me-availability-stack,.me-album-controls,.me-admin-actions){
  grid-template-columns:minmax(0,1fr) !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-power-row{
  grid-template-columns:36px minmax(0,1fr) !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-power-actions{
  grid-column:2 !important;
  justify-self:start !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-super-album-head{
  grid-template-columns:44px minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-super-album-icon{
  grid-row:1 / 3 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-super-album-desc{
  grid-column:2 !important;
  grid-row:2 !important;
}
html body #mainApp#mainApp #view-profile#view-profile .me-super-badge{
  grid-column:2 !important;
  grid-row:3 !important;
  justify-self:start !important;
  align-self:start !important;
}
}

@media (max-width:360px){
html body #mainApp#mainApp #view-profile#view-profile :is(.me-section-card,.me-super-album-card){
  padding:12px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.me-pref-item,.profile-section-head,.me-power-row){
  gap:10px !important;
}
html body #mainApp#mainApp #view-profile#view-profile :is(.roster-toggle,.role-manager-toggle){
  padding:12px !important;
  gap:10px !important;
}
}